:root { --bg:#0f1318; --surface:#141920; --border:rgba(255,255,255,.1); --text:#f4f7fa; --muted:#8c98a5; --accent:#4cb8f0; --danger:#f0655f; --success:#3ecf8e; --warning:#f2b84b; }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.5 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; background:var(--bg); color:var(--text); }
header.top { display:flex; align-items:center; justify-content:space-between; padding:12px 24px; border-bottom:1px solid var(--border); background:#0c0f13; }
.brand { font-family: ui-monospace, Menlo, monospace; letter-spacing:2px; font-size:12px; }
.brand span { color:var(--muted); letter-spacing:0; margin-left:8px; }
nav { display:flex; gap:16px; align-items:center; }
nav a { color:var(--text); text-decoration:none; opacity:.85; }
nav a:hover { opacity:1; text-decoration:underline; }
main { max-width:1100px; margin:0 auto; padding:24px; }
h1 { font-weight:500; font-size:22px; margin:0 0 16px; }
h2 { font-weight:500; font-size:16px; margin:24px 0 8px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-size:11px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:20px; margin-bottom:16px; }
.card.narrow { max-width:380px; margin:64px auto; }
label { display:block; margin-bottom:12px; color:var(--muted); font-size:12px; }
input, select { display:block; width:100%; margin-top:4px; padding:8px 10px; background:#0a0c10; color:var(--text); border:1px solid var(--border); border-radius:4px; font-size:14px; }
button { padding:8px 14px; border-radius:4px; border:1px solid var(--border); background:var(--text); color:#050607; cursor:pointer; font-weight:500; }
button.ghost { background:transparent; color:var(--text); }
button.danger { background:var(--danger); color:#fff; border-color:transparent; }
button.small { padding:4px 10px; font-size:12px; }
form.inline { display:inline; }
table { width:100%; border-collapse:collapse; margin-top:8px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
th { color:var(--muted); font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:1px; }
td.mono, .mono { font-family: ui-monospace, Menlo, monospace; font-size:12px; }
.flash { padding:10px 14px; border-radius:4px; margin-bottom:16px; border:1px solid var(--border); }
.flash.error { border-color:var(--danger); color:var(--danger); }
.flash.success { border-color:var(--success); color:var(--success); }
.pill { display:inline-block; padding:2px 8px; border-radius:3px; font-size:11px; text-transform:uppercase; letter-spacing:1px; border:1px solid; }
.pill.active { color:var(--success); border-color:var(--success); }
.pill.revoked { color:var(--danger); border-color:var(--danger); }
.pill.expired { color:var(--warning); border-color:var(--warning); }
.stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:16px; }
.stat .n { font-size:28px; font-weight:500; }
.stat .l { color:var(--muted); font-size:12px; }
.key { font-family: ui-monospace, Menlo, monospace; font-size:20px; letter-spacing:2px; padding:12px 16px; background:#0a0c10; border:1px dashed var(--accent); border-radius:6px; display:inline-block; }
.row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.row label { flex:1; min-width:140px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
a { color:var(--accent); }
.muted { color:var(--muted); }
.pager { display:flex; gap:12px; margin-top:12px; }
.row.tight { display:flex; gap:6px; align-items:stretch; margin-top:4px; }
.row.tight select { margin-top:0; flex:1; }
.row.tight button { padding:0 12px; font-size:18px; line-height:1; }
dialog.card { border:1px solid var(--border); background:var(--surface); color:var(--text); max-width:380px; width:90%; }
dialog::backdrop { background:rgba(0,0,0,.6); }
[hidden] { display:none !important; }
code.key { font-size:16px; letter-spacing:1.5px; }
#recovery-codes { columns:2; list-style:none; padding:0; font-size:16px; letter-spacing:1px; }
#recovery-codes li { padding:4px 0; }