/* ---------- Premium Cyberlux Theme ---------- */
:root{
  --bg:#0a0a0a;
  --panel:#121216;
  --glass:rgba(18,18,22,.52);
  --glass-b:#23232b;
  --text:#f6f7fb;
  --muted:#9aa0a6;
  --gold:#ffd700;
  --good:#22c55e;
  --bad:#f43f5e;
  --accent:#00f6ff;
  --accent2:#00a2ff;
  --border:#23232b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font:15px/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: radial-gradient(1000px 600px at 70% -10%, #04131a 0%, transparent 60%), var(--bg);
  overflow-x:hidden;
}

/* background canvas */
#bg{position:fixed; inset:0; z-index:-1; background:radial-gradient(1400px 900px at 10% -20%, #0b1020 0%, transparent 60%);}

/* glass panels */
.glass{background:var(--glass); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.06);}

/* layout */
.container{max-width:1150px; margin:88px auto 80px; padding:0 16px;}
.topbar{
  position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px; border-bottom:1px solid var(--border);
}
.brand{font-weight:800; letter-spacing:.3px; display:flex; align-items:center; gap:8px;}
.logo-dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:linear-gradient(90deg,var(--accent),var(--accent2)); box-shadow:0 0 12px var(--accent);}
.nav a{margin-right:14px; color:var(--text); opacity:.9}
.nav a:hover{opacity:1}
.nav .tag{padding:2px 8px; border:1px solid var(--border); border-radius:16px; color:var(--muted); font-size:12px;}
.footer{border-top:1px solid var(--border); padding:14px 16px; text-align:center;}

/* text */
h1,h2,h3{font-family:"Space Grotesk", Inter, system-ui, sans-serif; margin:.2em 0;}
.display{font-size:34px;}
.lead{color:var(--muted)}
.muted{color:var(--muted)}
code{font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color:#9ef;}

/* hero */
.hero{padding:42px 0; text-align:center;}
.accent{color:var(--gold); text-shadow:0 0 10px rgba(255,215,0,.2);}

/* buttons */
.btn{display:inline-block; padding:10px 14px; border:1px solid var(--border); border-radius:10px; color:var(--text); background:#121218; transition:transform .08s, box-shadow .08s, background .12s;}
.btn:hover{transform:translateY(-1px); background:#161620;}
.btn.primary{background: linear-gradient(90deg,#00e1ff,#0078ff); border:0; color:#001018; font-weight:800;}
.btn.ghost{background:transparent;}
.btn.danger{background:#2b0d12; border-color:#541a22; color:#ff7b8e;}
.btn:disabled{opacity:.6; pointer-events:none;}
.glow{box-shadow:0 0 0 rgba(0,246,255,0); animation:glowPulse 2.2s ease-in-out infinite;}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 rgba(0,246,255,0)}50%{box-shadow:0 0 20px rgba(0,246,255,.25)}}

/* grid/cards */
.grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:14px;}
.grid.two{grid-template-columns:1fr 1fr;}
.card{
  background: linear-gradient(180deg, #14141a, #111118);
  border:1px solid var(--border); border-radius:14px; padding:14px; min-height:120px; position:relative; overflow:hidden;
}
.card:before{content:""; position:absolute; inset:auto -40% -40% auto; width:60%; height:60%; background:var(--card-gradient, linear-gradient(90deg,#00e1ff,#0078ff)); filter:blur(60px); opacity:.18; transform:rotate(15deg);}
.card .card-title{font-weight:800; margin-bottom:4px;}
.card .card-sub{color:var(--muted); margin-bottom:8px;}
.card .dna{margin-top:6px; font-size:12px; color:#9ef;}
.card .route{margin:6px 0; font-size:18px;}
.card .price{font-weight:800;}
.lift{transition:transform .08s, border-color .12s;}
.lift:hover{transform:translateY(-2px); border-color:#3a3a46;}

/* forms */
.filters{display:flex; gap:8px; margin:12px 0 16px; padding:10px; border-radius:12px;}
.filters input{padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:#0f0f14; color:var(--text);}
.filters .btn{padding:8px 12px;}

/* detail */
.detail .narrative{color:var(--muted); margin-bottom:12px;}
.mesh-preview{border-radius:12px; padding:12px; margin:12px 0;}
.route-anim{font-size:20px; letter-spacing:.2em; animation:routeBlink 2s infinite;}
@keyframes routeBlink{0%,100%{opacity:.7}50%{opacity:1}}
.specs{width:100%; border-collapse: collapse; margin-top: 12px; border-radius:12px; overflow:hidden;}
.specs th,.specs td{border-bottom:1px dashed var(--border); padding:8px 6px; text-align:left;}

/* checkout */
.pay{border-radius:12px; padding:14px; margin-top:14px;}
select{padding:10px; background:#0f0f14; border:1px solid var(--border); color:var(--text); border-radius:8px; margin:6px 0 12px;}
.terminal{background:#0b0b12; border:1px solid #1a1a24; border-radius:12px; padding:12px; font-family: ui-monospace, Menlo, Consolas, monospace; color:#9ef;}
.terminal .mono{margin:6px 0;}
.terminal .blink{animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:.55}}
.bar{height:8px; background:#0d0d14; border-radius:999px; border:1px solid #1f1f28; margin-top:6px; overflow:hidden;}
.bar #barfill{height:100%; width:0; background:linear-gradient(90deg,#00f6ff,#0078ff); box-shadow:0 0 10px rgba(0,246,255,.6);}

/* alerts */
.alert{padding:10px 12px; border-radius:12px; border:1px solid var(--border); margin:10px 0 14px;}
.alert.good{border-color:#11361b; background:#0d1f13; color:#9ff5b5;}
.alert.bad{border-color:#3d1216; background:#1a0d0f; color:#ff8c9b;}

/* vault */
.vault{border-radius:16px; padding:14px; position:relative;}
.vault-head{display:flex; justify-content:space-between; gap:14px; align-items:flex-end; flex-wrap:wrap;}
.fuse .track{width:260px; max-width:60vw; height:8px; background:#0d0d14; border:1px solid #1f1f28; border-radius:999px; overflow:hidden;}
#fuseFill{height:100%; width:0; background:linear-gradient(90deg,#ffd700,#ff4d00); box-shadow:0 0 10px rgba(255,180,0,.5);}
.vault.lock .vault-head{filter:brightness(1.3)}
.vault.lock:after{content:""; position:absolute; inset:0; background:radial-gradient(800px 300px at 50% -10%, rgba(255,255,255,.06), transparent 60%);}
.vault.purged{animation:purge .7s ease forwards;}
@keyframes purge{to{transform:scale(.98); filter:blur(2px) brightness(.7); opacity:.0}}
.actions{display:flex; gap:8px; margin-top:10px;}
.list{margin:0; padding-left:18px;}

/* purge overlay */
.expiry{position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(800px 400px at 50% -10%, rgba(0,0,0,.0), rgba(0,0,0,.55)); backdrop-filter: blur(2px);}
.expiry-card{padding:18px 20px; border:1px solid #44151c; border-radius:14px; background:#1a0d0f; color:#ff8c9b; text-align:center; box-shadow:0 10px 50px rgba(255,76,76,.25);}
.expiry-title{font-weight:800; margin-bottom:4px;}
.expiry-sub{color:#ffb1bc;}
.hidden{display:none;}

.footer{color:var(--muted);}
.empty{color:var(--muted); padding:20px 10px;}
.pill{display:inline-block; padding:2px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:12px;}
.card .pill{margin-top:4px;}
.price.big{font-size:24px;}

a{color:var(--accent); text-decoration:none;}
a:hover{filter:brightness(1.1)}