:root{--lime:#9dff4b;--lime2:#67ff26;--teal:#00df9d;--ink:#021a14;--panel:#06342c;--muted:#c4d7d1}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#00140f;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}
body{overflow-x:hidden;background:radial-gradient(circle at 60% 5%,#074c3a 0,#01251c 32%,#00110d 70%)}
#app{min-height:100vh}.stage{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;background:#00110d}.mockup{position:relative;width:min(100vw,177.7778vh);aspect-ratio:16/9;background-size:100% 100%;background-position:center top;background-repeat:no-repeat;overflow:hidden;box-shadow:0 0 90px #0008}.mockup.arch{aspect-ratio:1536/1087;width:min(100vw,141.3vh)}
.hot{position:absolute;border:0;background:transparent;color:transparent;z-index:10;border-radius:14px}.hot:hover{outline:2px solid #9dff4b88;background:#9dff4b10}.hot:focus-visible{outline:3px solid var(--lime)}
.home-bg{background-image:url('./assets/mockups/home.png')}.login-bg{background-image:url('./assets/mockups/login.png')}.dash-bg{background-image:url('./assets/mockups/dashboard.png')}.menu-bg{background-image:url('./assets/mockups/menu.png')}.vector-bg{background-image:url('./assets/mockups/image-vector.png')}.forge-bg{background-image:url('./assets/mockups/vector-forge.png')}.custom-bg{background-image:url('./assets/mockups/customize.png')}.arch-bg{background-image:url('./assets/mockups/architecture.png')}
/* exact-ish hotspots based on supplied 1536×864 comps */
.home-sign{left:77.3%;top:2.1%;width:6.5%;height:4.8%}.home-get{left:84.8%;top:2.0%;width:9.5%;height:5%}.home-start{left:5.5%;top:33.6%;width:17%;height:5.7%}.home-card1{left:2.4%;top:41.8%;width:26.7%;height:42.6%}.home-card2{left:29.8%;top:41.8%;width:23.5%;height:42.6%}.home-card3{left:54.2%;top:41.8%;width:23.7%;height:42.6%}.home-card4{left:78.6%;top:41.8%;width:19.1%;height:42.6%}
.login-form{position:absolute;z-index:20;left:57.7%;top:37.4%;width:32.4%;display:grid;gap:1.65vw}.login-form input{width:100%;height:4.25vw;max-height:66px;min-height:44px;border-radius:17px;border:1px solid #5ba89d55;background:linear-gradient(180deg,#164f45,#0b3932);box-shadow:inset 0 0 18px #86fff315,0 0 18px #001;color:#fff;font-size:clamp(14px,1.15vw,19px);padding:0 4.4vw 0 3.9vw;outline:none}.login-form input::placeholder{color:#c8d5d1}.login-submit{margin-top:1.1vw;height:4.1vw;min-height:45px;border:0;border-radius:999px;background:linear-gradient(180deg,#baff54,#7fe62e);font-weight:900;font-size:clamp(16px,1.35vw,22px);box-shadow:0 0 20px #9dff4b66;color:#06170d}.guest-btn{height:4vw;min-height:44px;border-radius:999px;background:#043b31d8;border:2px solid #8cf533;color:#fff;font-weight:700;font-size:clamp(14px,1.15vw,19px)}.login-alt{display:flex;align-items:center;justify-content:center;gap:10px;color:#a9bab5;font-size:clamp(11px,.95vw,16px);margin-top:-.4vw}.login-alt:before,.login-alt:after{content:"";height:1px;flex:1;background:#7b9a9033}.login-create{position:absolute;z-index:21;left:68.5%;top:83.0%;color:#9dff4b;font-size:clamp(12px,1vw,16px);font-weight:700;background:transparent;border:0}.login-back{position:absolute;z-index:22;left:1.5%;top:2%;width:10%;height:8%;background:transparent;border:0;color:transparent}
.top-home{left:19%;top:1.7%;width:4.7%;height:5%}.top-design{left:25.2%;top:1.7%;width:5.4%;height:5%}.top-prod{left:31.3%;top:1.7%;width:6.9%;height:5%}.top-projects{left:39%;top:1.7%;width:8%;height:5%}.top-templates{left:47.2%;top:1.7%;width:7.2%;height:5%}.top-menu{left:94.6%;top:1.3%;width:3.5%;height:5.7%}
.dash-vector{left:2.8%;top:33.8%;width:23.4%;height:25.8%}.dash-file{left:27.4%;top:33.8%;width:22.3%;height:25.8%}.dash-bulk{left:50.6%;top:33.8%;width:22.2%;height:25.8%}.dash-recent{left:74.0%;top:33.8%;width:23.1%;height:25.8%}
.menu-close{left:95.2%;top:2%;width:3.3%;height:5.4%}.menu-dashboard{left:71.0%;top:26.7%;width:25.5%;height:6.5%}.menu-vector{left:71%;top:37.8%;width:25.5%;height:6%}.menu-custom{left:71%;top:44.2%;width:25.5%;height:6%}.menu-preview{left:71%;top:50.5%;width:25.5%;height:6%}.menu-templates{left:71%;top:56.7%;width:25.5%;height:6%}.menu-file{left:71%;top:67.8%;width:12.8%;height:5.8%}.menu-bulk{left:71%;top:74.5%;width:12.8%;height:5.8%}
.vector-upload{left:3.2%;top:50.9%;width:17.2%;height:7.1%;border-radius:9px}.vector-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}.vector-preview-img{position:absolute;z-index:9;object-fit:contain;border-radius:8px}.vector-original{left:23.0%;top:43.0%;width:8.0%;height:17.4%;background:#0a1613}.vector-clean{left:32.3%;top:43.0%;width:8.0%;height:17.4%;background:#0a1613}.vector-use{left:41.8%;top:67.4%;width:17.8%;height:6.4%}.vector-download{left:82.9%;top:74.4%;width:14.9%;height:6.6%}
.upload-overlay{position:absolute;z-index:15;left:2.8%;top:39.2%;width:18.8%;height:22%;display:flex;align-items:center;justify-content:center;pointer-events:none}.upload-overlay img{max-width:92%;max-height:92%;object-fit:contain;border-radius:9px;filter:drop-shadow(0 0 12px #000)}
.vector-status{position:absolute;z-index:25;left:23.2%;top:62.0%;width:17%;color:#adff64;font-size:clamp(9px,.75vw,13px);line-height:1.5;text-shadow:0 1px 4px #000}.vector-status b{display:block;color:#fff;margin-bottom:.2vw}
.custom-front{position:absolute;z-index:6;left:15.7%;top:28.9%;width:33.0%;height:42.5%;display:flex;align-items:center;justify-content:center;pointer-events:none}.custom-back{position:absolute;z-index:6;left:54.4%;top:32.7%;width:18.2%;height:30.4%;display:flex;align-items:center;justify-content:center;pointer-events:none}.jersey{width:100%;height:100%;filter:drop-shadow(0 0 18px #000)}.custom-panel{position:absolute;z-index:20;left:79.6%;top:29.3%;width:17.5%;height:55%;pointer-events:none}.control{position:absolute;pointer-events:auto}.color-primary{left:1%;top:11%;width:95%;height:7%;opacity:.001}.color-accent{left:1%;top:19%;width:95%;height:7%;opacity:.001}.logo-file{left:2%;top:42%;width:49%;height:16%;opacity:.001}.name-input{left:2%;top:63%;width:95%;height:6%;background:#063f34;border:1px solid #45b98a66;color:#fff;padding:0 8px;border-radius:6px}.num-input{left:2%;top:71%;width:45%;height:6%;background:#063f34;border:1px solid #45b98a66;color:#fff;padding:0 8px;border-radius:6px}.save-design{left:1%;top:91%;width:43%;height:7%;border:0;border-radius:6px;background:#9dff4b;color:#09200f;font-weight:800}.continue-btn{left:46%;top:91%;width:52%;height:7%;border:0;border-radius:6px;background:#9dff4b;color:#09200f;font-weight:800}.ai-box{position:absolute;z-index:20;left:14.8%;top:72.3%;width:36.8%;height:10%;display:flex;align-items:flex-end;padding:0 1.2% 1.1%}.ai-box input{width:88%;height:42%;background:#08483d;border:1px solid #49c59588;color:#fff;padding:0 12px;border-radius:6px}.ai-box button{width:10%;height:42%;margin-left:2%;border:0;border-radius:7px;background:#9dff4b;font-weight:900}
.preview-card{position:absolute;z-index:18;left:54.8%;top:33.1%;width:16.7%;height:27.3%;pointer-events:none}.preview-card .jersey{width:100%;height:100%}
.floating-back{position:fixed;z-index:100;left:14px;bottom:14px;background:#031f18e8;color:white;border:1px solid #57ff9a66;padding:10px 14px;border-radius:999px;box-shadow:0 10px 30px #0009}.floating-back:hover{border-color:#9dff4b}
.toast{position:fixed;z-index:9999;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;background:#051f19;color:#fff;border:1px solid #78ff5766;padding:12px 18px;border-radius:12px;box-shadow:0 12px 40px #000b;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.simple-page{min-height:100vh;background:radial-gradient(circle at 70% 10%,#0b4b3c,#021a14 40%,#00100c);padding:28px}.simple-top{max-width:1300px;margin:auto;display:flex;align-items:center;gap:20px;padding:16px 18px;background:#042a22cc;border:1px solid #0e6b55;border-radius:18px}.brand-text{font-size:28px;font-weight:900}.brand-text span{color:#a1ff4d}.simple-top nav{display:flex;gap:22px;margin-left:auto}.simple-top a{color:#e7fff4;text-decoration:none}.simple-content{max-width:1300px;margin:34px auto}.simple-content h1{font-size:clamp(36px,5vw,76px);margin:0}.simple-content h1 span{color:#9dff4b}.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}.card{background:linear-gradient(180deg,#073c31e8,#03251f);border:1px solid #1f8c6b;border-radius:18px;padding:22px;min-height:160px;box-shadow:0 0 30px #00ff8830}.card button{margin-top:16px;border:0;border-radius:10px;background:#9dff4b;padding:10px 16px;font-weight:800}
@media(max-width:900px){.mockup{width:100vw;min-width:900px;transform-origin:top left}.stage{overflow-x:auto;justify-content:flex-start}.login-form{gap:14px}.grid-cards{grid-template-columns:1fr}.simple-top nav{display:none}}