:root {
  color-scheme: light dark;
  --bg: #f6f7f9;
  --card: #fff;
  --text: #1c2026;
  --muted: #667085;
  --up: #2e9e5b;
  --down: #d64545;
  --unknown: #9aa3af;
  --partial: #e0a21b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c;
    --card: #1d2229;
    --text: #e8ebef;
    --muted: #9aa3af;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, sans-serif;
}
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px;
}
h1 {
  margin: 0 0 4px;
  font-size: 1.6rem;
}
.summary {
  margin: 0 0 24px;
  font-weight: 600;
}
.card {
  background: var(--card);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.badge {
  font-weight: 600;
}
.up { color: var(--up); }
.down { color: var(--down); }
.unknown { color: var(--unknown); }
.bars {
  display: flex;
  gap: 2px;
  height: 28px;
  margin-top: 10px;
}
.bars span {
  flex: 1;
  border-radius: 2px;
  background: var(--unknown);
  opacity: 0.35;
}
.bars span.up { background: var(--up); opacity: 1; }
.bars span.down { background: var(--down); opacity: 1; }
.bars span.partial { background: var(--partial); opacity: 1; }
.muted, .foot {
  color: var(--muted);
  font-size: 0.875rem;
}
.incident { border-left: 4px solid var(--down); }
.incident.resolved { border-left-color: var(--up); }
.incident h2 { margin: 0; font-size: 1rem; }
.incident p { margin: 4px 0 0; white-space: pre-wrap; }