:root {
  --canvas: #efede7; --panel: #ffffff; --sunken: #f6f4ee; --header: #16191a;
  --ink: #16191a; --ink-muted: #52585a; --ink-faint: #6e7476; --ink-inverse: #f4f2ed;
  --line: #ddd9d0; --line-soft: #eae7df; --brand: #14584a; --brand-ink: #ffffff;
  --ok: #115345; --ok-bg: #e3efeb; --ok-line: #c9e0d8;
  --warn: #74490a; --warn-bg: #f7edd8; --warn-line: #ead9b5;
  --alert: #8c2f13; --alert-bg: #f8e6e0; --alert-line: #eccbc0;
  --display: "Space Grotesk", system-ui, sans-serif;
  --text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #1a1c1b; --panel: #232625; --sunken: #2b2e2d; --header: #0f1211;
    --ink: #f1efe9; --ink-muted: #b6bcbb; --ink-faint: #929896; --line: #3a3e3d; --line-soft: #333736;
    --brand: #4fbfa3; --brand-ink: #10241f;
    --ok: #6ed0b4; --ok-bg: #16302a; --ok-line: #1f4a3f;
    --warn: #e0b45f; --warn-bg: #33290f; --warn-line: #574518;
    --alert: #f0907a; --alert-bg: #3a1c14; --alert-line: #5e2c1e;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 13px/1.45 var(--text); }
header { background: var(--header); color: var(--ink-inverse); display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
header .name { font: 600 16px var(--display); }
header .who { margin-left: auto; font-size: 12px; }
main { padding: 16px; max-width: 1180px; margin: 0 auto; }
h1 { font: 600 22px var(--display); margin: 4px 0 8px; }
h2 { font: 600 16px var(--display); margin: 20px 0 8px; }
.overline { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.muted { color: var(--ink-muted); }
.mono { font-family: var(--mono); }
button { font: 14px var(--text); padding: 6px 12px; border-radius: 6px; border: 1px solid var(--brand); background: var(--brand); color: var(--brand-ink); cursor: pointer; }
button.quiet { background: transparent; color: inherit; border-color: var(--line); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
table { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; padding: 0 8px; }
td { background: var(--panel); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 8px; vertical-align: top; }
td:first-child { border-left: 3px solid var(--line); border-radius: 8px 0 0 8px; }
td:last-child { border-right: 1px solid var(--line-soft); border-radius: 0 8px 8px 0; }
tr.alert td:first-child { border-left-color: var(--alert); }
tr.warn td:first-child { border-left-color: var(--warn); }
.chip { display: inline-block; font-size: 12px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); margin: 2px 4px 0 0; }
.chip.alert { color: var(--alert); background: var(--alert-bg); border-color: var(--alert-line); }
.chip.warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.chip.ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.remaining.alert { color: var(--alert); }
.remaining.warn { color: var(--warn); }
.narrow { max-width: 420px; margin: 32px auto; }
#status { margin-top: 12px; min-height: 1.5em; color: var(--ink-muted); }