:root {
  color-scheme: light dark;
  --bg: #0b1220; --panel: #121a2b; --border: #24314a; --text: #e8edf5; --muted: #8d98a8;
  --ok: #22c55e; --degraded: #f59e0b; --down: #ef4444; --none: #334155; --info: #38bdf8;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f6f8fb; --panel: #ffffff; --border: #dfe5ee; --text: #0f172a; --muted: #5b6676; --none: #d6dde7; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
main, .top, footer { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.top { display: flex; align-items: baseline; gap: 8px; padding-top: 28px; }
.brand { font-weight: 700; font-size: 22px; color: var(--text); text-decoration: none; }
.sub { color: var(--muted); font-size: 18px; }
.env { margin-left: auto; background: var(--degraded); color: #000; border-radius: 999px; padding: 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
h2 { font-size: 15px; margin: 28px 0 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.overall { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 16px 18px; border-radius: 12px; font-size: 18px; font-weight: 600; background: var(--panel); border: 1px solid var(--border); }
.overall .dot, .comp .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--none); }
.overall.operational .dot, .comp.operational .dot { background: var(--ok); }
.overall.degraded .dot, .comp.degraded .dot { background: var(--degraded); }
.overall.down .dot, .comp.down .dot { background: var(--down); }

.card { background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--info); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.card.warning { border-left-color: var(--degraded); }
.card.critical { border-left-color: var(--down); }
.card.ended { border-left-color: var(--none); }
.card .title { font-weight: 600; }
.card .when { color: var(--muted); font-size: 13px; margin-top: 2px; }
.card .body { white-space: pre-line; margin: 8px 0 0; }
.card a { color: var(--info); }

.comp { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.comp .row { display: flex; align-items: center; gap: 10px; }
.comp .name { flex: 1; font-weight: 600; }
.comp .state { color: var(--muted); font-size: 13px; }
.bars { display: flex; gap: 2px; height: 28px; margin-top: 10px; }
.bars span { flex: 1; border-radius: 2px; background: var(--none); }
.bars .ok { background: var(--ok); }
.bars .degraded { background: var(--degraded); }
.bars .down { background: var(--down); }
.uptime { color: var(--muted); font-size: 12px; margin-top: 4px; display: flex; justify-content: space-between; }

.legend { color: var(--muted); font-size: 12px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 2px 0 8px; vertical-align: -1px; }
.sw.ok { background: var(--ok); } .sw.degraded { background: var(--degraded); } .sw.down { background: var(--down); } .sw.none { background: var(--none); }

.events { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.events li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.events time { color: var(--muted); margin-right: 8px; }

footer { color: var(--muted); font-size: 12px; padding-top: 28px; padding-bottom: 40px; }
.noscript { text-align: center; color: var(--muted); }