:root{--bg:#0f0b1e;--bg-soft:#181230;--text:#f5f3ff;--text-muted:#a8a3c7;--primary:#8b5cf6;--primary-dark:#6d3fe0;--accent:#f472b6;--border:#ffffff1a;--radius:14px;color:var(--text);background-color:var(--bg);font-family:Segoe UI,system-ui,-apple-system,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);min-height:100vh}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit}.container{width:100%;max-width:1100px;margin:0 auto;padding:0 1.25rem}.btn{border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;padding:.6rem 1.2rem;font-size:.95rem;font-weight:600;transition:transform .15s,background .2s;display:inline-flex}.btn:hover{transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff}.btn-ghost{color:var(--text);background:0 0}.btn-outline{color:var(--text);border-color:var(--border);background:0 0}.btn-lg{padding:.85rem 1.6rem;font-size:1rem}.navbar{z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);background:#0f0b1ed9;position:sticky;top:0}.navbar-inner{justify-content:space-between;align-items:center;height:66px;display:flex}.logo{font-size:1.5rem;font-weight:800}.logo span{color:var(--primary)}.nav-links{color:var(--text-muted);gap:2rem;font-weight:500;display:flex}.nav-links a:hover{color:var(--text)}.nav-actions{gap:.5rem;display:flex}.hero{padding:4rem 0 5rem}.hero-inner{grid-template-columns:1.1fr .9fr;align-items:center;gap:3rem;display:grid}.badge{background:var(--bg-soft);border:1px solid var(--border);color:var(--text-muted);border-radius:999px;padding:.35rem .9rem;font-size:.85rem;display:inline-block}.hero h1{margin:1.2rem 0;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.1}.gradient-text{background:linear-gradient(135deg, var(--primary), var(--accent));color:#0000;-webkit-background-clip:text;background-clip:text}.hero-sub{color:var(--text-muted);max-width:520px;font-size:1.1rem}.hero-buttons{flex-wrap:wrap;gap:.8rem;margin-top:2rem;display:flex}.hero-visual{justify-content:center;display:flex}.visual-card{text-align:center;background:var(--bg-soft);border:1px solid var(--border);border-radius:24px;width:100%;max-width:340px;padding:2rem;box-shadow:0 20px 60px #8b5cf640}.visual-face{background:linear-gradient(135deg,#8b5cf64d,#f472b64d);border-radius:18px;place-items:center;height:200px;font-size:5rem;display:grid}.visual-chips{justify-content:center;gap:.5rem;margin-top:1.2rem;display:flex}.visual-chips span{border:1px solid var(--border);color:var(--text-muted);border-radius:999px;padding:.3rem .8rem;font-size:.85rem}.visual-note{color:var(--text-muted);margin-top:1rem;font-size:.75rem}@media (width<=760px){.nav-links,.nav-actions .btn-ghost{display:none}.hero{padding:2.5rem 0 3rem}.hero-inner{text-align:center;grid-template-columns:1fr}.hero-sub{margin:0 auto}.hero-buttons{justify-content:center}}.section{padding:5rem 0;scroll-margin-top:66px}.section-alt{background:var(--bg-soft)}.section-head{text-align:center;max-width:600px;margin:0 auto 3rem}.section-head h2{font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.2}.section-head p{color:var(--text-muted);margin-top:.75rem}.features-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem;display:grid}.feature-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);padding:1.6rem;transition:transform .2s,border-color .2s}.feature-card:hover{border-color:var(--primary);transform:translateY(-4px)}.feature-icon{background:#8b5cf62e;border-radius:12px;place-items:center;width:48px;height:48px;margin-bottom:1rem;font-size:1.5rem;display:grid}.feature-card h3{margin-bottom:.5rem;font-size:1.1rem}.feature-card p{color:var(--text-muted);font-size:.95rem}.tag-soon{border:1px solid var(--border);color:var(--accent);border-radius:999px;margin-top:1rem;padding:.2rem .7rem;font-size:.75rem;display:inline-block}.steps-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.step-card{text-align:center;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:1.6rem}.step-number{background:linear-gradient(135deg, var(--primary), var(--accent));border-radius:50%;place-items:center;width:46px;height:46px;margin:0 auto 1rem;font-weight:800;display:grid}.step-card h3{margin-bottom:.5rem}.step-card p{color:var(--text-muted);font-size:.95rem}@media (width<=900px){.features-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.features-grid,.steps-grid{grid-template-columns:1fr}.section{padding:3.5rem 0}}.pricing-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem;max-width:760px;margin:0 auto;display:grid}.price-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;padding:2rem;display:flex;position:relative}.price-card.featured{border-color:var(--primary);box-shadow:0 20px 50px #8b5cf640}.popular{background:linear-gradient(135deg, var(--primary), var(--accent));border-radius:999px;padding:.2rem .8rem;font-size:.75rem;font-weight:700;position:absolute;top:-12px;right:1.5rem}.price-card h3{font-size:1.2rem}.price{margin:.75rem 0 1.5rem;font-size:2.4rem;font-weight:800}.price span{color:var(--text-muted);font-size:.85rem;font-weight:400;display:block}.price-card ul{flex:1;margin-bottom:1.75rem;list-style:none}.price-card li{color:var(--text-muted);padding:.45rem 0 .45rem 1.6rem;font-size:.95rem;position:relative}.price-card li:before{content:"✓";color:var(--primary);font-weight:700;position:absolute;left:0}.btn:disabled{opacity:.6;cursor:not-allowed}.btn:disabled:hover{transform:none}.footer{border-top:1px solid var(--border);padding:2.5rem 0}.footer-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.footer-links{color:var(--text-muted);gap:1.5rem;display:flex}.footer-links a:hover{color:var(--text)}.footer-copy{color:var(--text-muted);font-size:.85rem}@media (width<=640px){.pricing-grid{grid-template-columns:1fr}.footer-inner{text-align:center;flex-direction:column}}.auth-page{place-items:center;min-height:calc(100vh - 66px);padding:2rem 1.25rem;display:grid}.auth-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:20px;width:100%;max-width:420px;padding:2.2rem;box-shadow:0 20px 60px #8b5cf633}.auth-card h1{font-size:1.7rem}.auth-sub{color:var(--text-muted);margin:.4rem 0 1.5rem}.auth-card label{margin:1rem 0 .4rem;font-size:.9rem;font-weight:600;display:block}.auth-card input{width:100%;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:10px;outline:none;padding:.75rem .9rem;font-family:inherit;font-size:1rem}.auth-card input:focus{border-color:var(--primary)}.auth-submit{width:100%;margin-top:1.5rem;padding:.8rem}.auth-notice{color:var(--accent);background:#f472b61a;border:1px solid #f472b64d;border-radius:10px;margin-top:1rem;padding:.75rem .9rem;font-size:.9rem}.auth-switch{text-align:center;color:var(--text-muted);margin-top:1.5rem;font-size:.9rem}.auth-switch a{color:var(--primary);font-weight:600}.upload-page{min-height:calc(100vh - 66px);padding:3rem 0 4rem}.upload-inner{max-width:640px}.upload-inner .section-head h1{font-size:clamp(1.8rem,4vw,2.5rem)}.upload-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:20px;padding:1.75rem;box-shadow:0 20px 60px #8b5cf633}.file-input{display:none}.drop-zone{text-align:center;color:var(--text-muted);border:2px dashed var(--border);border-radius:var(--radius);cursor:pointer;flex-direction:column;align-items:center;gap:.4rem;padding:3rem 1rem;transition:border-color .2s;display:flex}.drop-zone:hover{border-color:var(--primary)}.drop-zone strong{color:var(--text)}.drop-icon{font-size:2.5rem}.preview-wrap{text-align:center}.preview-img{object-fit:contain;border-radius:var(--radius);background:var(--bg);width:100%;max-height:420px}.preview-name{color:var(--text-muted);word-break:break-all;margin-top:.6rem;font-size:.85rem}.upload-actions{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.5rem;display:flex}.privacy-note{text-align:center;color:var(--text-muted);margin-top:1.25rem;font-size:.8rem}.tips{color:var(--text-muted);grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:1.5rem;font-size:.9rem;list-style:none;display:grid}.tips li:before{content:"✓ ";color:var(--primary);font-weight:700}@media (width<=520px){.tips{grid-template-columns:1fr}}.result-box{text-align:center;background:var(--bg);border:1px solid var(--primary);border-radius:var(--radius);margin-top:1.5rem;padding:1.4rem}.result-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.8rem}.result-shape{margin:.3rem 0;font-size:2.2rem}.result-desc{color:var(--text-muted);font-size:.95rem}.result-stats{color:var(--text-muted);flex-wrap:wrap;justify-content:center;gap:.5rem 1.2rem;margin-top:1rem;font-size:.8rem;list-style:none;display:flex}.result-disclaimer{color:var(--text-muted);margin-top:1rem;font-size:.75rem}.preview-stage{max-width:100%;line-height:0;display:inline-block;position:relative}.preview-stage .preview-img{width:auto;max-width:100%;height:auto;max-height:420px;display:block}.reco{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);margin-top:1.5rem;padding:1.4rem}.reco-title{text-align:center;font-size:1.2rem}.reco-label{color:var(--text-muted);margin-top:1rem;font-size:.85rem}.chip-row{flex-wrap:wrap;gap:.5rem;margin-top:.6rem;display:flex}.chip{color:var(--text-muted);border:1px solid var(--border);background:0 0;border-radius:999px;padding:.35rem .8rem;font-size:.8rem}.chip:hover{border-color:var(--primary)}.chip-active{color:#fff;background:var(--primary);border-color:var(--primary)}.reco-goal{color:var(--text-muted);background:var(--bg-soft);border-left:3px solid var(--accent);border-radius:8px;margin:1.2rem 0;padding:.8rem 1rem;font-size:.9rem}.tab-row{gap:.5rem;margin-bottom:1rem;display:flex}.tab{color:var(--text-muted);border:1px solid var(--border);background:0 0;border-radius:10px;flex:1;padding:.6rem;font-weight:600}.tab-active{color:#fff;background:linear-gradient(135deg, var(--primary), var(--accent));border-color:#0000}.style-list{gap:.6rem;list-style:none;display:grid}.style-item{background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:.15rem;padding:.8rem 1rem;display:flex}.style-item span{color:var(--text-muted);font-size:.85rem}.auth-success{color:#4ade80;background:#4ade801a;border:1px solid #4ade804d;border-radius:10px;margin-top:1rem;padding:.75rem .9rem;font-size:.9rem}.nav-actions{align-items:center}.nav-user{text-overflow:ellipsis;white-space:nowrap;max-width:160px;color:var(--text-muted);font-size:.9rem;overflow:hidden}.loading-screen{text-align:center;color:var(--text-muted);padding:4rem 1rem}@media (width<=520px){.nav-user{display:none}}.style-item{flex-direction:row;justify-content:space-between;align-items:center;gap:.75rem}.style-text{flex-direction:column;gap:.15rem;display:flex}.heart-btn{background:0 0;border:none;flex-shrink:0;padding:.3rem .5rem;font-size:1.3rem;line-height:1;transition:transform .15s}.heart-btn:hover{transform:scale(1.2)}.fav-remove{padding:.35rem .9rem;font-size:.8rem}.fav-empty{text-align:center;color:var(--text-muted);flex-direction:column;align-items:center;gap:1rem;display:flex}.usage-box{color:var(--text-muted);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1.25rem;padding:.9rem 1rem;font-size:.9rem}.usage-box strong{color:var(--text)}.usage-bar{background:var(--border);border-radius:999px;height:6px;margin-top:.6rem;overflow:hidden}.usage-fill{background:linear-gradient(135deg, var(--primary), var(--accent));border-radius:999px;height:100%;transition:width .3s}.limit-box{text-align:center;color:var(--text-muted);background:var(--bg);border:1px dashed var(--primary);border-radius:var(--radius);flex-direction:column;align-items:center;gap:.75rem;margin-top:1rem;padding:1rem;font-size:.9rem;display:flex}.admin-inner{max-width:860px}.stats-grid{grid-template-columns:repeat(4,1fr);gap:1rem;display:grid}.stat-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:.25rem;padding:1.2rem;display:flex}.stat-value{font-size:2rem;font-weight:800}.stat-label{color:var(--text-muted);font-size:.85rem}.admin-subtitle{margin:2.5rem 0 1rem;font-size:1.2rem}.table-wrap{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto}.admin-table{border-collapse:collapse;width:100%;font-size:.9rem}.admin-table th,.admin-table td{text-align:left;border-bottom:1px solid var(--border);padding:.8rem 1rem}.admin-table th{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-size:.8rem}.admin-table tr:last-child td{border-bottom:none}@media (width<=760px){.stats-grid{grid-template-columns:repeat(2,1fr)}}.nav-toggle{color:var(--text);border:1px solid var(--border);background:0 0;border-radius:10px;padding:.4rem .75rem;font-size:1.2rem;line-height:1;display:none}.nav-menu{flex:1;justify-content:space-between;align-items:center;gap:1rem;margin-left:2rem;display:flex}.nav-menu .nav-links{margin:0 auto}@media (width<=760px){.nav-toggle{display:block}.nav-menu{background:var(--bg);border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch;gap:1rem;margin:0;padding:1rem 1.25rem 1.5rem;display:none;position:absolute;top:100%;left:0;right:0}.nav-menu-open{display:flex}.nav-menu .nav-links{flex-direction:column;gap:.25rem;margin:0;display:flex}.nav-menu .nav-links a{padding:.7rem 0;font-size:1.05rem}.nav-menu .nav-actions{flex-direction:column;align-items:stretch;gap:.6rem}.nav-menu .nav-actions .btn-ghost{display:inline-flex}.nav-menu .nav-user{text-align:center;max-width:none;display:block}}.swatch-row{flex-wrap:wrap;gap:.6rem;margin:1rem 0;display:flex}.swatch{border:2px solid var(--border);border-radius:50%;width:36px;height:36px;transition:transform .15s}.swatch:hover:not(:disabled){transform:scale(1.12)}.swatch:disabled{opacity:.5;cursor:wait}.swatch-active{box-shadow:0 0 0 2px var(--primary);border-color:#fff}.colour-stage{text-align:center;margin-top:1rem}.colour-canvas{border-radius:var(--radius);background:var(--bg-soft);max-width:100%;max-height:460px}