:root{--bg:#0b1020;--card:rgba(255,255,255,.06);--muted:#9aa4bf;--txt:#e6e9f4;--primary:#6c7cff;--accent:#22d3ee;--success:#22c55e;--danger:#ef4444;--warning:#f59e0b;--glass:blur(20px);--radius:14px}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(1200px 800px at 80% -10%,#1b1f41 0%,transparent 55%),radial-gradient(900px 700px at -10% 10%,#10243e 0%,transparent 50%),var(--bg);color:var(--txt);line-height:1.5}
.content{min-height:calc(100vh - 120px)}
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(to bottom,rgba(0,0,0,.45),transparent);transition:all 0.3s ease}.site-header.scrolled{background:rgba(11,16,32,0.8);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.1)}.navbar{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;letter-spacing:.2px;color:#fff;text-decoration:none}
.nav-actions{display:flex;gap:10px;align-items:center}
.btn{border:0;border-radius:999px;padding:10px 16px;cursor:pointer;text-decoration:none;color:#fff;transition:transform .1s ease,background .2s ease}.btn.primary{background:linear-gradient(135deg,var(--primary),#9b8cff)}.btn.ghost{background:rgba(255,255,255,.08)}.btn:hover{transform:translateY(-1px)}
.user-pill{position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--card);backdrop-filter:var(--glass);border-radius:999px}
.user-pill .avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#647dee,#7f53ac)}
.user-pill .badge{background:rgba(34,211,238,.15);color:#b3f4ff;border:1px solid rgba(34,211,238,.35);padding:4px 8px;border-radius:999px;font-size:12px}
.user-pill .dropdown{position:absolute;top:100%;right:0;display:none;flex-direction:column;background:rgba(20,24,48,.9);backdrop-filter:var(--glass);border:1px solid rgba(255,255,255,.08);border-radius:12px;min-width:200px;overflow:hidden;margin-top:8px}
.user-pill:hover .dropdown,.user-pill.open .dropdown{display:flex}
.user-pill .dropdown a,.user-pill .dropdown button{appearance:none;border:0;background:transparent;color:var(--txt);padding:12px 14px;text-align:left;text-decoration:none}
.content{max-width:1200px;margin:24px auto;padding:0 20px}
.hero{position:relative;padding:96px 20px;border-radius:var(--radius);background:radial-gradient(600px 300px at 20% 10%,rgba(108,124,255,.25),transparent 60%),radial-gradient(600px 300px at 80% 0%,rgba(34,211,238,.2),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));overflow:hidden;margin-bottom:20px}
.hero.center{text-align:center}
.hero h1{font-size:44px;margin:0 0 10px}.hero p{max-width:760px;margin:0 auto;color:var(--muted)}
.cta-row{margin-top:20px;display:flex;gap:12px;justify-content:center}
.btn.cta{min-width:140px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:24px}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px}
.features{max-width:1100px;margin:0 auto 32px;padding:0 20px}

/* Catalog */
.catalog{max-width:1200px;margin:0 auto;padding:0 20px}
.categories{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.pill{appearance:none;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:#fff;padding:8px 12px;border-radius:999px;cursor:pointer}
.pill.active{background:linear-gradient(135deg,var(--primary),#9b8cff)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.product-card{position:relative;border-radius:16px;background:var(--card);backdrop-filter:var(--glass);border:1px solid rgba(255,255,255,.08);padding:16px;overflow:hidden}
.product-card header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.product-card .icon{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,#7f53ac,#647dee)}
.product-card h3{margin:0;font-size:16px}
.product-card .live-status{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;margin-top:4px;display:inline-block}
.product-card .stats{display:flex;gap:12px}
.product-card .stat{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px;text-align:center}
.product-card .stat span{display:block;font-weight:700}
.product-card .stat small{display:block;color:var(--muted);font-size:12px}
.actions{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.quantity{display:flex;align-items:center;border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden}
.quantity input{width:56px;text-align:center;border:0;background:rgba(255,255,255,.04);color:#fff;padding:10px}
.quantity button{border:0;background:rgba(255,255,255,.06);color:#fff;width:36px;height:36px;cursor:pointer}
.action-btn{min-width:160px}
.account-full{max-width:1200px;margin:0 auto;padding:0 20px 24px}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width: 900px){.grid.two{grid-template-columns:1fr}}
.card{position:relative;border-radius:16px;background:var(--card);backdrop-filter:var(--glass);border:1px solid rgba(255,255,255,.08);padding:16px;overflow:hidden}
.card.highlighted{border:2px solid #10b981;background:rgba(16,185,129,.05);box-shadow:0 0 10px rgba(16,185,129,.2)}
.card .title{font-weight:600}.card .stock{font-size:13px;color:var(--muted)}
.progress{height:8px;background:rgba(255,255,255,.06);border-radius:999px;margin-top:10px;overflow:hidden}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#34d399)}
.fab-wrap{display:none}
.fab{display:none}
.alert{padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);margin:10px 0}.alert.success{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.25)}.alert.error{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25)}.alert.info{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.25)}
.form{display:grid;gap:12px}.input{position:relative}.input input{width:100%;padding:14px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;outline:none}.input label{position:static;display:block;margin:0 0 6px;color:var(--muted);font-size:12px}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center}
@media (max-width: 900px){.split{grid-template-columns:1fr}.hero{padding:64px 16px}}

/* Ripple */
.btn, .fab, button{position:relative;overflow:hidden}
.ripple{position:absolute;width:16px;height:16px;background:rgba(255,255,255,.35);border-radius:50%;transform:translate(-50%,-50%) scale(0);animation:ripple .6s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(12);opacity:0}}


/* Footer */
.site-footer{display:flex;align-items:center;justify-content:center;padding:24px 16px;color:var(--muted)}
.site-footer .footer-inner{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center}
.site-footer a{color:#b3c7ff;text-decoration:none}

/* Orders page */
.orders-full{max-width:1200px;margin:0 auto;padding:0 20px 24px}