:root { --ink:#1d2433; --muted:#667085; --line:#e4e7ec; --bg:#f6f7f9; --card:#fff; --brand:#c2410c; --brand-d:#9a3412;
        --ok:#067647; --warn:#b54708; --bad:#b42318; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif; color:var(--ink); background:var(--bg); }
a { color: var(--brand-d); }
header.top { display:flex; align-items:center; gap:24px; padding:12px 28px; background:#111827; color:#fff; flex-wrap:wrap; }
header .brand { color:#fff; text-decoration:none; font-weight:700; font-size:18px; display:flex; align-items:center; gap:8px; }
header .mark { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:7px; background:var(--brand); }
header nav { display:flex; gap:18px; flex:1; flex-wrap:wrap; }
header nav a { color:#d0d5dd; text-decoration:none; } header nav a:hover { color:#fff; } header nav a.staff { color:#fdba74; }
header .logout { display:flex; gap:10px; align-items:center; } header .who { color:#98a2b3; font-size:13px; }
header .logout button { background:none; border:1px solid #475467; color:#fff; border-radius:6px; padding:4px 10px; cursor:pointer; }
main { max-width:1080px; margin:28px auto; padding:0 20px; }
footer { max-width:1080px; margin:40px auto; padding:0 20px; color:var(--muted); font-size:13px; }
h1 { font-size:26px; margin:0 0 18px; } h2 { font-size:17px; margin:0 0 12px; } small { font-weight:400; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px; margin-bottom:18px; }
.card.highlight { border-color:var(--brand); box-shadow:0 0 0 3px #fed7aa; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-bottom:18px; }
.grid .card { margin:0; }
.stat .label { color:var(--muted); font-size:13px; } .stat .value { font-size:24px; font-weight:650; margin:4px 0; }
.state-active { color:var(--ok); } .state-grace { color:var(--warn); } .state-expired, .state-none { color:var(--bad); }
.muted { color:var(--muted); }
.badge { font-size:13px; font-weight:500; background:#eef2f6; border-radius:6px; padding:2px 8px; vertical-align:middle; }
.pill { font-size:12px; border-radius:999px; padding:2px 9px; background:#eef2f6; }
.pill.active { background:#dcfae6; color:var(--ok); } .pill.pending { background:#fef0c7; color:var(--warn); }
.pill.suspended, .pill.revoked, .pill.replaced, .pill.unregistered { background:#fee4e2; color:var(--bad); }
pre, code, kbd { font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; font-size:13px; }
pre { background:#0f172a; color:#e2e8f0; padding:12px 14px; border-radius:8px; overflow-x:auto; white-space:pre-wrap; word-break:break-all; }
code { background:#f2f4f7; padding:1px 5px; border-radius:4px; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.form { display:grid; gap:12px; max-width:560px; } .form.inline { max-width:none; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); align-items:end; }
label { display:grid; gap:4px; font-size:13px; color:var(--muted); } label.check { display:flex; gap:8px; align-items:center; color:var(--ink); }
input { font:inherit; padding:8px 10px; border:1px solid #d0d5dd; border-radius:7px; color:var(--ink); }
.button { display:inline-block; font:inherit; border:1px solid #d0d5dd; background:#fff; color:var(--ink); padding:8px 14px;
          border-radius:8px; text-decoration:none; cursor:pointer; margin:2px 4px 2px 0; }
.button.primary { background:var(--brand); border-color:var(--brand); color:#fff; } .button.primary:hover { background:var(--brand-d); }
.button.danger { background:#fff; border-color:var(--bad); color:var(--bad); }
button.link { background:none; border:none; padding:0; cursor:pointer; font:inherit; color:var(--brand-d); } button.link.danger { color:var(--bad); }
.flash { padding:12px 16px; border-radius:8px; margin-bottom:18px; } .flash.ok { background:#dcfae6; color:#054f31; } .flash.err { background:#fee4e2; color:#7a271a; }
.hero { text-align:center; padding:60px 20px; } .hero h1 { font-size:40px; } .hero .lead { font-size:18px; max-width:640px; margin:0 auto 24px; }
.audit { font-size:13px; padding:3px 0; border-bottom:1px dashed var(--line); }