:root {
  --fg: #1a1a1a;
  --muted: #6a6a6a;
  --bg: #fafafa;
  --line: #e0e0e0;
  --green: #2e7d32;
  --orange: #e65100;
  --red: #c62828;
  --darkred: #8b0000;
  --blue: #1565c0;
}
* { box-sizing: border-box; }
body {
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--fg); background: var(--bg); margin: 0;
}
header {
  display: flex; align-items: center; gap: 24px; padding: 12px 24px;
  border-bottom: 1px solid var(--line); background: white;
}
header strong { font-size: 15px; }
header nav { display: flex; gap: 16px; }
header nav a { color: var(--blue); text-decoration: none; }
header nav a:hover { text-decoration: underline; }
main { max-width: 1280px; margin: 24px auto; padding: 0 24px; }
footer { padding: 24px; color: var(--muted); text-align: center; border-top: 1px solid var(--line); margin-top: 32px; }
h1 { margin-top: 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--red); }
table.grid {
  width: 100%; border-collapse: collapse; background: white;
  border: 1px solid var(--line); margin-bottom: 24px;
}
table.grid th, table.grid td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); }
table.grid th { background: #f3f3f3; font-weight: 600; font-size: 13px; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid .notes { color: var(--muted); font-size: 12px; }
table.grid.grid-tight td, table.grid.grid-tight th { padding: 4px 10px; }
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px;
  font-weight: 600; background: #eee; color: #333;
}
tr.status-comfortable .badge { background: #e8f5e9; color: var(--green); }
tr.status-watch       .badge { background: #fff8e1; color: #c97a00; }
tr.status-at-risk     .badge { background: #ffe9d6; color: var(--orange); }
tr.status-oversold    .badge { background: #ffebee; color: var(--red); }
tr.status-oversold-heavy .badge { background: var(--darkred); color: white; }
.rationale-row td { background: #fafafa; color: var(--muted); font-size: 12px; padding-top: 0; }
pre.copyable { background: white; border: 1px solid var(--line); padding: 16px; white-space: pre-wrap; }
.login-form { max-width: 320px; margin: 64px auto; background: white; padding: 24px; border: 1px solid var(--line); }
.login-form input, .login-form button {
  width: 100%; padding: 8px; font-size: 14px; margin-top: 8px;
}
details { margin-bottom: 12px; }
summary { cursor: pointer; padding: 6px 0; font-weight: 600; }