:root {
  color-scheme: light dark;
  --bg:#f4f6f9; --surface:#fff; --sunken:#f8fafc;
  --line:#e2e7ef; --line-strong:#cfd6e2;
  --ink:#111826; --ink-2:#5a6474; --ink-3:#8a94a6;
  --accent:#2f5bea; --accent-ink:#fff; --accent-soft:#eaefff;
  --good:#0f7a4a; --good-soft:#e6f6ee;
  --warn:#9a5b0b; --warn-soft:#fdf1de;
  --bad:#b42318; --bad-soft:#fdeceb;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.05);
  --radius:12px; --radius-sm:8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0e1116; --surface:#161a21; --sunken:#12161c;
    --line:#252b35; --line-strong:#333b48;
    --ink:#e7ebf2; --ink-2:#9aa4b4; --ink-3:#6f7a8b;
    --accent:#7ea2ff; --accent-ink:#0e1116; --accent-soft:#1b2438;
    --good:#5ed39b; --good-soft:#14271f;
    --warn:#f0a75a; --warn-soft:#2a2015;
    --bad:#f28b82; --bad-soft:#2b1a19;
    --shadow:none;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover { text-decoration-color:currentColor; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* --- chrome ------------------------------------------------------------- */
.chrome { position:sticky; top:0; z-index:5; background:var(--surface);
  border-bottom:1px solid var(--line); }
.chrome-inner { max-width:1080px; margin:0 auto; padding:10px 22px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:650;
  color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.mark { display:grid; place-items:center; width:26px; height:26px; border-radius:7px;
  background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:700;
  letter-spacing:.02em; }
.chrome nav { display:flex; gap:4px; }
.chrome nav a { padding:6px 11px; border-radius:999px; color:var(--ink-2);
  text-decoration:none; font-weight:500; }
.chrome nav a:hover { background:var(--sunken); color:var(--ink); }
.chrome nav a.on { background:var(--accent-soft); color:var(--accent); }
.account { margin-left:auto; display:flex; align-items:center; gap:10px; }
.who { color:var(--ink-3); font-size:13px; }
main { max-width:1080px; margin:0 auto; padding:26px 22px 64px; }
footer { max-width:1080px; margin:0 auto; padding:0 22px 44px;
  color:var(--ink-3); font-size:12.5px; }
/* The measure belongs on the text, not on the box: a narrow box with automatic
   margins is a centred column, which is not what a footnote wants to be. */
footer p { margin:0; max-inline-size:78ch; }

/* --- the pages you reach before signing in ------------------------------ */
body.solo main { max-width:420px; padding-top:9vh; }
.solo-brand { display:flex; align-items:center; justify-content:center; gap:10px;
  font-weight:650; margin-bottom:18px; }
.solo-foot { max-width:420px; text-align:center; padding-top:18px; }
.solo-foot p { max-inline-size:none; }

/* --- page furniture ----------------------------------------------------- */
.page-head { display:flex; align-items:flex-start; gap:16px; margin:0 0 20px; flex-wrap:wrap; }
.page-head > div { flex:1 1 320px; }
h1 { font-size:24px; line-height:1.2; letter-spacing:-.015em; margin:0; font-weight:650; }
h2 { font-size:16px; margin:0; font-weight:600; letter-spacing:-.005em; }
h2.section { margin:30px 0 10px; }
.crumb { margin:0 0 4px; font-size:13px; }
.lead { color:var(--ink-2); margin:5px 0 0; max-inline-size:70ch; }
.card > .lead, section.card > .lead { margin:4px 0 14px; font-size:13.5px; }
/* A heading with no lead under it would otherwise sit on the first label. */
.card h2 + form, .card h2 + .fields { margin-top:14px; }
.note { color:var(--ink-3); font-size:12.5px; margin-top:10px; max-inline-size:76ch; }
.strong { font-weight:600; color:var(--ink); }
.muted, .ink-3 { color:var(--ink-3); }
small { display:block; font-size:12px; color:var(--ink-3); font-weight:400; }
.banner { margin:0 0 16px; padding:10px 14px; border-radius:var(--radius-sm);
  background:var(--good-soft); color:var(--good); font-weight:500; }
.hidden-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* --- counts ------------------------------------------------------------- */
.stats { list-style:none; display:grid; gap:10px; margin:0 0 18px; padding:0;
  grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); }
.stats li { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow); }
.figure { display:block; font-size:22px; font-weight:650; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.figure.good { color:var(--good); } .figure.warn { color:var(--warn); } .figure.bad { color:var(--bad); }
.stats .label { display:block; font-size:12px; color:var(--ink-3); margin-top:2px; }

/* --- toolbar ------------------------------------------------------------ */
.toolbar { display:flex; gap:8px; align-items:center; margin:0 0 14px; flex-wrap:wrap; }
.toolbar input { max-width:360px; }

/* --- tables ------------------------------------------------------------- */
.scroll { overflow-x:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line);
  vertical-align:top; white-space:nowrap; }
th { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3); font-weight:600; background:var(--sunken); }
td small { white-space:normal; margin-top:2px; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--sunken); }
tr.current td:first-child { box-shadow:inset 2px 0 0 var(--accent); }
.right { text-align:right; }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; }
.wrap { white-space:normal; overflow-wrap:anywhere; }

/* --- the key itself ----------------------------------------------------- */
.keybox { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow); display:grid; gap:4px; }
.keybox .label { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.keybox .key { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:22px; font-weight:600; letter-spacing:.06em; overflow-wrap:anywhere; }
.keybox .reason { color:var(--ink-2); font-size:13.5px; margin-top:4px; }

/* --- facts -------------------------------------------------------------- */
.facts { display:grid; gap:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:4px 18px; margin:12px 0 0; box-shadow:var(--shadow); }
.facts div { display:grid; grid-template-columns:160px 1fr; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line); }
.facts div:last-child { border-bottom:none; }
dt { color:var(--ink-3); font-size:13.5px; } dd { margin:0; }

/* --- cards and forms ---------------------------------------------------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); margin:18px 0 0; }
.card h1 { margin-bottom:2px; }
.prose p { margin:0 0 10px; } .prose p:last-child { margin:0; }
.fields { display:grid; gap:14px; max-width:640px; }
.pair { display:grid; gap:14px; grid-template-columns:1fr 1fr; }
label { display:grid; gap:5px; font-weight:500; font-size:13.5px; align-content:start; }
input, textarea, select { font:inherit; padding:9px 11px; border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); background:var(--sunken); color:var(--ink); width:100%;
  font-weight:400; }
input:hover, textarea:hover, select:hover { border-color:var(--ink-3); }
input:focus, textarea:focus, select:focus { background:var(--surface); }
input::placeholder, textarea::placeholder { color:var(--ink-3); }
textarea { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12.5px; resize:vertical; }
.checkbox { display:flex; gap:9px; align-items:center; font-weight:400; }
.checkbox input { width:auto; }
.actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

button, .button { font:inherit; font-size:14px; font-weight:500; padding:8px 15px;
  border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink); cursor:pointer; text-decoration:none; display:inline-flex;
  align-items:center; justify-self:start; }
button:hover, .button:hover { border-color:var(--ink-3); }
button.primary, .button.primary { background:var(--accent); border-color:var(--accent);
  color:var(--accent-ink); font-weight:600; }
button.primary:hover, .button.primary:hover { filter:brightness(1.06); }
button.danger { border-color:var(--line-strong); color:var(--bad); }
button.danger:hover { border-color:var(--bad); background:var(--bad-soft); }
button.quiet, .button.quiet { background:transparent; border-color:transparent; color:var(--ink-2); }
button.quiet:hover, .button.quiet:hover { background:var(--sunken); border-color:transparent; color:var(--ink); }

/* --- state ------------------------------------------------------------- */
.tag { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap;
  background:var(--sunken); color:var(--ink-2); border:1px solid var(--line); }
.tag::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.tag.big { font-size:13px; padding:5px 13px; }
.tag.in-use { color:var(--good); background:var(--good-soft); border-color:transparent; }
.tag.unused { color:var(--ink-2); }
.tag.suspended, .tag.expired { color:var(--warn); background:var(--warn-soft); border-color:transparent; }
.tag.ended { color:var(--bad); background:var(--bad-soft); border-color:transparent; }

/* --- odds and ends ------------------------------------------------------ */
.empty { text-align:center; padding:34px 18px; }
.empty p { margin:0 0 8px; color:var(--ink-2); } .empty p:last-child { margin:0; }
.issued { background:var(--good-soft); border:1px solid var(--good); border-radius:var(--radius);
  padding:16px 18px; margin:18px 0 0; }
.issued h2 { color:var(--good); }
.api { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 16px; overflow-x:auto; box-shadow:var(--shadow);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px;
  line-height:1.7; margin:0; }

@media (max-width:720px) {
  .pair { grid-template-columns:1fr; }
  .facts div { grid-template-columns:1fr; gap:2px; }
  .chrome-inner { gap:12px; }
  .account { width:100%; margin-left:0; }
  main { padding:20px 16px 52px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }