:root{
  --bg:#0b0f1a; --card:rgba(255,255,255,.06); --line:rgba(255,255,255,.12);
  --txt:#eef2ff; --mut:#9aa4c0; --vio:#7c3aed; --cyan:#06b6d4; --ok:#22c55e; --bad:#ef4444;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:"Segoe UI",system-ui,Arial,sans-serif;min-height:100vh}
.bg{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(700px 400px at 15% 0%,rgba(124,58,237,.35),transparent),
  radial-gradient(700px 400px at 90% 20%,rgba(6,182,212,.25),transparent),
  radial-gradient(600px 500px at 50% 110%,rgba(124,58,237,.2),transparent),var(--bg)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px}
.brand{font-weight:800;font-size:20px}.brand span{background:linear-gradient(90deg,var(--vio),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.linkbtn{background:none;border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:8px 14px;cursor:pointer}
#nav{display:flex;gap:10px;align-items:center}
.avatarbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:linear-gradient(135deg,var(--vio),var(--cyan));color:#fff;font-weight:800;font-size:17px;cursor:pointer}
.wrap{max-width:1060px;margin:0 auto;padding:10px 18px 40px}
.glass{background:var(--card);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.hero{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:28px;margin-bottom:18px}
.hero h1{margin:0 0 8px;font-size:clamp(24px,4vw,38px)}
.grad{background:linear-gradient(90deg,var(--vio),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-art{font-size:64px;filter:drop-shadow(0 8px 20px rgba(124,58,237,.6))}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips span{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:var(--mut)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.card{padding:22px}
.card h2{margin:0 0 4px}.muted{color:var(--mut);font-size:13px}
label{display:block;font-size:13px;margin:12px 0 0;color:var(--mut)}
input{width:100%;margin-top:6px;padding:12px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--txt);font-size:15px;outline:none}
input:focus{border-color:var(--vio);box-shadow:0 0 0 3px rgba(124,58,237,.25)}
input.code{text-align:center;font-size:22px;letter-spacing:8px;font-weight:800}
.btn{margin-top:14px;width:100%;padding:13px;border:none;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--vio),var(--cyan));color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.btn.small{width:auto;padding:9px 14px;font-size:13px;background:#232c47;color:var(--txt);border:1px solid var(--line)}
.btn.small.primary{background:linear-gradient(90deg,var(--vio),var(--cyan));border:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.msg{min-height:20px;font-size:13px;margin-top:8px}
.msg.ok{color:var(--ok)}.msg.bad{color:var(--bad)}
.row{display:flex;gap:10px}.row .btn{flex:1}
.hint{font-size:11px;margin-left:6px}.hint.ok{color:var(--ok)}.hint.bad{color:var(--bad)}
.meter{display:block;height:6px;background:#1a2236;border-radius:99px;margin-top:6px;overflow:hidden}
.meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--vio),var(--cyan));transition:width .2s}
.profile{display:flex;gap:14px;align-items:center;margin:12px 0 18px}
.avatar{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;background:linear-gradient(135deg,var(--vio),var(--cyan))}
.pname{font-size:20px;font-weight:800}
.dashgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.sub{border:1px solid var(--line);border-radius:14px;padding:16px}
.sub h3{margin:0}
#settingsMenu{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
#accountPanel{margin-top:6px;border-top:1px solid var(--line);padding-top:14px}
#accountPanel .dashgrid{margin-top:14px}
.packgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:12px}
.pack{border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;background:rgba(0,0,0,.25)}
.pack h3{margin:0 0 4px}
.pack .price{font-size:26px;font-weight:800;background:linear-gradient(90deg,var(--vio),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.pack .credits{font-size:15px;font-weight:700;margin:2px 0 10px}
.foot{text-align:center;margin-top:26px}
.hidden{display:none!important}
@media(max-width:640px){.hero{flex-direction:column;text-align:center}}