:root {
  --bg: #0f1115;
  --fg: #e8eaed;
  --muted: #9aa0a6;
  --line: #262b33;
  --up: #34a853;
  --down: #ea4335;
  --unknown: #fbbc04;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.page { max-width: 44rem; margin: 0 auto; padding: 3rem 1.25rem; }
h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.01em; margin: 0 0 1.5rem; }
.verdict {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 2rem;
  padding-left: 0.875rem;
  border-left: 4px solid var(--muted);
}
.verdict--operational { border-color: var(--up); }
.verdict--degraded, .verdict--unknown { border-color: var(--unknown); }
.verdict--down { border-color: var(--down); }
.checks { list-style: none; margin: 0 0 2rem; padding: 0; }
.check {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--line);
}
.check:last-child { border-bottom: 1px solid var(--line); }
.check__label { font-weight: 500; }
.check__key { grid-row: 2; color: var(--muted); font-size: 0.8125rem; font-family: ui-monospace, monospace; }
.check__detail { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.check--up .check__detail { color: var(--up); }
.check--down .check__detail { color: var(--down); }
.meta { color: var(--muted); font-size: 0.8125rem; margin: 0.5rem 0 0; }
.meta a { color: inherit; }
@media (prefers-color-scheme: light) {
  :root { --bg: #ffffff; --fg: #1f2328; --muted: #6a737d; --line: #e1e4e8; }
}