:root {
  --bg:#070a12; --bg2:#0c1120; --surface:#11182a; --surface2:#17213a;
  --border:rgba(120,160,220,.2); --text:#f4f7fb; --muted:#a7b0c0;
  --cyan:#00d4ff; --blue:#3b82f6; --purple:#8b5cf6;
  --success:#22c55e; --warning:#f59e0b; --danger:#ef4444;
  --shadow:0 18px 48px rgba(0,0,0,.3);
}
* { box-sizing:border-box }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--text);
  font:14px/1.5 "Segoe UI Variable","Segoe UI",sans-serif }
button,input,select { font:inherit }
button { cursor:pointer }
.hidden { display:none!important }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(360px,1fr) minmax(390px,520px);
  gap:64px; align-items:center; padding:6vw; background:
  radial-gradient(circle at 20% 30%,rgba(0,212,255,.1),transparent 32%),
  linear-gradient(135deg,var(--bg),var(--bg2)) }
.auth-brand { max-width:680px }
.auth-brand h1 { font-size:clamp(40px,6vw,72px); margin:10px 0; letter-spacing:-2px }
.auth-brand p { color:var(--muted); font-size:18px }
.auth-brand ul { padding:0; list-style:none; color:var(--muted) }
.auth-brand li { margin:14px 0 }
.auth-brand li:before { content:"✓"; color:var(--cyan); margin-right:12px }
.panel { background:linear-gradient(145deg,rgba(17,24,42,.98),rgba(12,17,32,.98));
  border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow) }
.auth-card { padding:36px }
.auth-card h2 { font-size:28px; margin:18px 0 4px }
.muted { color:var(--muted) }
label { display:grid; gap:7px; color:var(--muted); margin:18px 0 0 }
input,select { width:100%; color:var(--text); background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; min-height:44px; padding:10px 12px; outline:none }
input:focus,select:focus,button:focus-visible { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,212,255,.14); outline:none }
button { min-height:40px; padding:9px 14px; border-radius:10px; border:1px solid var(--border);
  color:var(--text); background:var(--surface2); transition:120ms ease }
button:hover { border-color:rgba(0,212,255,.55); transform:translateY(-1px) }
button:disabled { opacity:.48; cursor:not-allowed; transform:none }
.primary { width:100%; margin-top:24px; border:0; font-weight:650;
  background:linear-gradient(110deg,var(--blue),#2563eb,var(--purple)) }
.ghost { background:transparent }
.danger { background:rgba(239,68,68,.12); color:#fca5a5; border-color:rgba(239,68,68,.28) }
.warning { background:rgba(245,158,11,.12); color:#fcd34d; border-color:rgba(245,158,11,.28) }
.error { min-height:20px; color:#fca5a5 }
.eyebrow { color:var(--cyan); font-size:11px; font-weight:700; letter-spacing:1.6px }
.status-line { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px }
.pulse { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 12px rgba(34,197,94,.75) }
.app-shell { min-height:100vh; display:grid; grid-template-columns:250px minmax(0,1fr) }
.sidebar { position:sticky; top:0; height:100vh; padding:24px 16px; display:flex; flex-direction:column;
  background:var(--bg2); border-right:1px solid var(--border) }
.logo { display:flex; align-items:center; gap:12px; padding:4px 10px 26px }
.logo-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:11px;
  color:var(--bg); font-weight:800; background:linear-gradient(135deg,var(--cyan),var(--blue)) }
.logo div { display:grid }.logo small { color:var(--muted) }
nav { display:grid; gap:6px }
nav button { text-align:left; background:transparent; border-color:transparent }
nav button.active { color:var(--cyan); border-color:rgba(0,212,255,.25);
  background:linear-gradient(90deg,rgba(0,212,255,.12),rgba(59,130,246,.06)) }
.sidebar-footer { margin-top:auto; display:grid; gap:14px; padding:12px 8px }
main { min-width:0; padding:0 28px 40px }
header { min-height:92px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border); margin-bottom:24px }
header h1 { margin:2px 0 0; font-size:27px }
.header-actions,.actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap }
.chip,.badge { border:1px solid var(--border); border-radius:999px; padding:6px 10px; background:var(--surface) }
.grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.metric { padding:20px }.metric strong { display:block; font-size:30px; margin-top:8px }
.metric small { color:var(--muted) }
.metric.cyan { border-top:2px solid var(--cyan) }.metric.green { border-top:2px solid var(--success) }
.metric.orange { border-top:2px solid var(--warning) }.metric.purple { border-top:2px solid var(--purple) }
.section { margin-top:18px; padding:20px; overflow:hidden }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px }
.section h2 { margin:0; font-size:18px }
.table-wrap { overflow:auto; max-width:100% }
table { width:100%; border-collapse:collapse; min-width:780px }
th,td { text-align:left; padding:11px 10px; border-bottom:1px solid var(--border); white-space:nowrap }
th { color:var(--muted); font-size:12px; font-weight:600 }
td { max-width:300px; overflow:hidden; text-overflow:ellipsis }
tr:hover td { background:rgba(23,33,58,.46) }
.badge { display:inline-flex; padding:3px 8px; font-size:11px }
.badge.active,.badge.available { color:#86efac; background:rgba(34,197,94,.1) }
.badge.locked,.badge.suspended { color:#fcd34d; background:rgba(245,158,11,.1) }
.badge.revoked,.badge.disabled,.badge.banned { color:#fca5a5; background:rgba(239,68,68,.1) }
.toolbar { display:grid; grid-template-columns:minmax(200px,1fr) auto auto; gap:10px; margin-bottom:16px }
.toolbar input,.toolbar select { margin:0 }
.empty,.loading { min-height:220px; display:grid; place-items:center; align-content:center; color:var(--muted) }
.spinner { width:28px; height:28px; border:3px solid var(--border); border-top-color:var(--cyan);
  border-radius:50%; animation:spin .8s linear infinite }
@keyframes spin { to { transform:rotate(360deg) } }
.toast { position:fixed; z-index:20; top:22px; right:28px; max-width:420px; padding:13px 16px;
  border-radius:10px; background:var(--surface2); border:1px solid var(--border); box-shadow:var(--shadow) }
.toast.error { color:#fca5a5; border-color:rgba(239,68,68,.4) }
.modal { position:fixed; inset:0; z-index:30; display:grid; place-items:center; background:rgba(0,0,0,.66); padding:20px }
.modal-card { width:min(540px,100%); padding:24px }.modal-card h2 { margin-top:0 }
.key-result { word-break:break-all; font:600 14px/1.8 Consolas,monospace; padding:14px;
  border-radius:10px; color:var(--cyan); background:var(--bg); border:1px dashed rgba(0,212,255,.35) }
@media (max-width:1100px) {
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .auth-shell { gap:28px; padding:32px }
}
@media (max-width:820px) {
  .auth-shell { grid-template-columns:1fr }.auth-brand { display:none }
  .app-shell { grid-template-columns:76px minmax(0,1fr) }
  .sidebar { padding:18px 8px }.logo div,nav button { font-size:0 }.logo { padding-left:8px }
  nav button:before { content:attr(data-page); font-size:9px }
  .sidebar-footer .status-line { display:none } main { padding:0 14px 30px }
}
@media (max-width:620px) {
  .grid { grid-template-columns:1fr }.toolbar { grid-template-columns:1fr }
  header { align-items:flex-start; padding:18px 0; min-height:auto }.header-actions { justify-content:flex-end }
}
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important } }