:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; background:#080d12; color:#e6edf3; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 10% 0%,#162431 0,#080d12 42%); }
button,input { font:inherit; }
button { border:1px solid #2c8cff; border-radius:9px; padding:9px 15px; background:#2c8cff; color:#fff; cursor:pointer; font-weight:700; }
button:hover { filter:brightness(1.12); }
button.ghost { border-color:#334352; background:#121b24; color:#bcd0df; }
button.danger { border-color:#a94758; background:#3a1820; color:#ffabb7; }
.hidden,[hidden] { display:none !important; }
.shell { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:42px 0 70px; }
.topbar,.section-heading,.result-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.eyebrow { margin:0 0 8px; color:#45d389; font-size:11px; font-weight:900; letter-spacing:.18em; }
h1 { margin:0; font-size:32px; }
h2 { margin:0; font-size:18px; }
.muted { margin:7px 0 0; color:#788b9b; font-size:13px; line-height:1.55; }
.card { margin-top:20px; padding:22px; border:1px solid #22303d; border-radius:16px; background:rgba(15,23,31,.92); box-shadow:0 16px 45px rgba(0,0,0,.15); }
.login-card { max-width:640px; }
.inline-form { display:flex; align-items:end; flex-wrap:wrap; gap:10px; margin-top:18px; }
input { width:min(520px,100%); padding:10px 12px; border:1px solid #334352; border-radius:9px; outline:0; background:#0b1118; color:#e6edf3; }
input:focus { border-color:#2c8cff; }
.inline-form label { display:grid; gap:6px; color:#90a2b1; font-size:12px; }
.message { min-height:19px; margin:14px 0 0; color:#8294a3; font-size:12px; }
.message.success { color:#59dc98; }
.message.error { color:#ff8092; }
.result-box { margin-top:18px; padding:14px; border:1px solid #315742; border-radius:10px; background:#0d2118; }
.result-heading { align-items:center; color:#8ff0bc; }
pre { margin:12px 0 0; padding:12px; overflow:auto; border:1px solid #214430; border-radius:8px; background:#08140e; color:#c9f9dd; font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; user-select:all; }
.count { min-width:32px; padding:6px 10px; border-radius:999px; background:#172a38; color:#83cbff; text-align:center; }
.table-wrap { margin-top:18px; overflow:auto; border:1px solid #253542; border-radius:10px; }
table { width:100%; border-collapse:collapse; min-width:820px; }
th,td { padding:12px 13px; border-bottom:1px solid #1f2b35; text-align:left; white-space:nowrap; font-size:12px; }
th { color:#7f93a3; background:#0b1219; font-size:11px; font-weight:800; }
tr:last-child td { border-bottom:0; }
td.mono { color:#9ed2fa; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
td.status.active { color:#59dc98; } td.status.revoked { color:#ff8092; } td.status.unused { color:#f1d27b; }
td button { margin-right:6px; padding:6px 9px; font-size:11px; }
.empty { padding:26px 0 4px; color:#687b8b; text-align:center; font-size:13px; }
@media (max-width:640px) { .shell { width:min(100% - 20px,1180px); padding-top:24px; } h1 { font-size:26px; } .card { padding:16px; border-radius:12px; } .inline-form input { flex:1 1 100%; } }