:root{
  --bg:#07060d;--panel:#130f24;--panel2:#1a1533;--line:#ffffff14;--line2:#ffffff22;
  --text:#f4f1fb;--muted:#a49cc0;--dim:#726a8e;
  --accent:#a855f7;--accent2:#c89bff;--accent3:#6d8bff;
  --ok:#34d399;--warn:#fbbf24;--bad:#ff6b6b;
  --radius:18px;--shadow:0 24px 70px -20px #00000099;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 Manrope,Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:
  radial-gradient(1100px 620px at 8% -8%,#3a1b6e55 0,transparent 60%),
  radial-gradient(900px 560px at 108% 8%,#23347a44 0,transparent 55%),
  radial-gradient(1000px 700px at 50% 120%,#2a155233 0,transparent 60%),
  var(--bg);
  background-attachment:fixed}
a{color:var(--accent2);text-decoration:none}
::selection{background:var(--accent);color:#fff}
.wrap{max-width:1180px;margin:0 auto;padding:22px 20px 70px}

/* Top bar */
.top{display:flex;align-items:center;gap:14px;margin-bottom:26px;position:sticky;top:0;z-index:20;
  padding:12px 0;background:linear-gradient(var(--bg),#07060dcc 70%,transparent);backdrop-filter:blur(6px)}
.logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#6d8bff,#a855f7);
  display:grid;place-items:center;font-weight:900;color:#fff;box-shadow:0 10px 30px -6px #a855f788}
.brand{font-weight:800;font-size:18px;letter-spacing:-.01em}
.brand small{display:block;color:var(--muted);font-weight:600;font-size:12px;letter-spacing:0}
.sp{flex:1}

/* Cards */
.card{background:linear-gradient(180deg,#ffffff0c,#ffffff05);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.card.pad-lg{padding:26px}

/* Headings */
h1{font-size:30px;margin:0 0 6px;font-weight:800;letter-spacing:-.02em}
h2{font-size:18px;margin:0 0 14px;font-weight:800;letter-spacing:-.01em}
h3{font-size:15px;margin:0 0 10px;font-weight:800}
.sub{color:var(--muted);margin:0 0 22px}
.subh{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);font-weight:800;margin:18px 0 9px}
.subh:first-of-type{margin-top:2px}

/* Forms */
label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:12px 0 6px;text-transform:uppercase;letter-spacing:.04em}
input,select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line2);
  background:#ffffff0a;color:var(--text);font:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px #a855f72e}
select option{background:var(--panel)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:12px;
  border:1px solid var(--line2);background:#ffffff10;color:var(--text);font:inherit;font-weight:700;cursor:pointer;
  transition:transform .12s,border-color .15s,background .15s,box-shadow .15s}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,#7c5cff,#a855f7);border-color:transparent;color:#fff;
  box-shadow:0 12px 30px -10px #a855f7aa}
.btn.primary:hover{filter:brightness(1.08);box-shadow:0 16px 40px -10px #a855f7cc}
.btn.danger{color:var(--bad)}.btn.danger:hover{border-color:var(--bad)}
.btn.small{padding:7px 12px;font-size:13px;border-radius:10px}
.btn.ghost{background:transparent}

.err{color:var(--bad);font-weight:700;min-height:20px;margin-top:10px}.okmsg{color:var(--ok);font-weight:700}

/* Grid + stats */
.grid{display:grid;gap:16px}.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:1fr 1fr}
@media(max-width:820px){.g4{grid-template-columns:1fr 1fr}.g2{grid-template-columns:1fr}}
.stat .n{font-size:30px;font-weight:800;letter-spacing:-.02em}
.stat .l{color:var(--muted);font-weight:700;font-size:13px}

/* Tables */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
th{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
tr:hover td{background:#ffffff07}
tr:last-child td{border-bottom:none}

/* Pills */
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.5}
.pill.active{background:#34d39922;color:var(--ok)}
.pill.expired{background:#fbbf2422;color:var(--warn)}
.pill.disabled{background:#ff6b6b22;color:var(--bad)}
.pill.admin{background:#a855f733;color:var(--accent2)}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.center{min-height:100vh;display:grid;place-items:center;padding:20px}
.login{width:min(420px,100%)}
.muted{color:var(--muted)}.dim{color:var(--dim)}
.overflow{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}

dialog{border:1px solid var(--line2);border-radius:20px;background:linear-gradient(180deg,#171229,#120d22);
  color:var(--text);padding:24px;width:min(560px,95vw);box-shadow:var(--shadow)}
dialog::backdrop{background:#000b;backdrop-filter:blur(3px)}
.kv{display:grid;grid-template-columns:160px 1fr;gap:10px 16px}.kv div:nth-child(odd){color:var(--muted);font-weight:700}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}.toolbar input{max-width:300px}
[hidden]{display:none!important}

/* Phones */
@media(max-width:640px){
  .wrap{padding:14px 13px 48px}
  h1{font-size:23px}h2{font-size:16px}
  .card{padding:15px;border-radius:15px}
  .stat .n{font-size:22px}
  .toolbar{gap:8px}.toolbar input{max-width:none;flex:1 1 140px}
  .btn{padding:11px 15px}
  th,td{padding:10px 8px;font-size:13px}
  .top{gap:10px;margin-bottom:14px}.brand{font-size:16px}
  dialog{padding:16px}
  .kv{grid-template-columns:110px 1fr}
}
@media(max-width:420px){.g4{grid-template-columns:1fr}}