:root {
  color-scheme: dark;
  --bg: #101214;
  --surface: #171a1e;
  --raised: #1b1f23;
  --border: #2c3238;
  --text: #edf0f2;
  --muted: #98a1aa;
  --subtle: #727c85;
  --green: #34b99f;
  --green-soft: rgba(52, 185, 159, 0.14);
  --amber: #d6a643;
  --amber-soft: rgba(214, 166, 67, 0.14);
  --red: #ef706f;
  --red-soft: rgba(239, 112, 111, 0.14);
  --blue: #78a8dc;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 20px 64px;
}

.hero h1 {
  margin: 0 0 8px;
  font-size: 32px;
  letter-spacing: -0.03em;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lede, .updated, footer, .error {
  color: var(--muted);
}

.updated { margin-top: 16px; font-variant-numeric: tabular-nums; }

.overall {
  margin: 28px 0 20px;
}

.groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
}

.card.overall-card {
  background: var(--raised);
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.card h2 {
  margin: 0;
  font-size: 18px;
}

.badge {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}

.badge.operational { color: var(--green); background: var(--green-soft); }
.badge.degraded { color: var(--amber); background: var(--amber-soft); }
.badge.outage { color: var(--red); background: var(--red-soft); }
.badge.idle { color: var(--muted); background: rgba(152, 161, 170, 0.12); }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat small {
  display: block;
  color: var(--subtle);
  font-size: 11px;
}

.stat strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.timeline {
  display: flex;
  gap: 1.5px;
  align-items: flex-end;
  height: 36px;
  margin: 14px 0 8px;
}

.timeline span {
  flex: 1;
  min-width: 1px;
  height: 15%;
  border-radius: 1px;
  background: #2a3036;
}

.timeline span.o { height: 100%; background: var(--green); }
.timeline span.s { height: 65%; background: var(--amber); }
.timeline span.f { height: 35%; background: var(--red); }
.timeline span.idle { height: 15%; background: #2a3036; }

.hangs {
  margin: 10px 0 0;
  color: var(--amber);
  font-size: 12px;
}

.models {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 13px;
}

.models li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-top: 1px solid var(--border);
}

.error {
  color: var(--red);
}

footer {
  margin-top: 36px;
  font-size: 13px;
}

code {
  color: var(--blue);
}