:root {
  --bg: #001538;
  --surface: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.12);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --ok: #2fbf71;
  --warn: #f0b429;
  --bad: #e0524d;
  --maint: #5b8def;
  --nodata: rgba(255, 255, 255, 0.14);
  --radius: 8px;
  font-family: "Lato", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: inherit; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }
.header { padding: 28px 20px 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.15rem; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 40px 0 12px; }
h3 { font-size: 1rem; margin: 0; }
.overall { margin-top: 20px; padding: 20px 24px; border-radius: var(--radius); border: 1px solid var(--border); border-left-width: 6px; background: var(--surface); }
.overall p { margin: 4px 0 0; }
.overall--operational { border-left-color: var(--ok); }
.overall--degraded { border-left-color: var(--warn); }
.overall--outage { border-left-color: var(--bad); }
.overall--maintenance { border-left-color: var(--maint); }
.overall--unknown { border-left-color: var(--nodata); }
.notice { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--radius); background: rgba(240, 180, 41, 0.12); border: 1px solid rgba(240, 180, 41, 0.4); }
.components { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.component { padding: 16px 20px; border-top: 1px solid var(--border); }
.component:first-child { border-top: 0; }
.component__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.component__name { display: flex; flex-direction: column; }
.component__note { margin: 8px 0 0; color: var(--muted); }
.badge { white-space: nowrap; font-size: 0.8rem; padding: 2px 10px; border-radius: 9999px; border: 1px solid currentColor; }
.badge--operational { color: var(--ok); }
.badge--degraded { color: var(--warn); }
.badge--outage { color: var(--bad); }
.badge--maintenance { color: var(--maint); }
.badge--unknown, .badge--incident { color: var(--muted); }
.bar { display: flex; gap: 2px; margin-top: 12px; height: 28px; }
.bar__day { flex: 1; border-radius: 2px; background: var(--nodata); }
.bar__day--operational { background: var(--ok); }
.bar__day--degraded { background: var(--warn); }
.bar__day--outage { background: var(--bad); }
.bar__legend { display: flex; justify-content: space-between; margin-top: 6px; }
.incident { margin: 16px 0; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
#active-incidents .incident--incident { border-left: 6px solid var(--bad); }
#active-incidents .incident--impact-minor { border-left-color: var(--warn); }
#active-incidents .incident--maintenance { border-left: 6px solid var(--maint); }
.incident__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.incident p { margin: 6px 0; }
.incident__body h3, .incident__body h4, .incident__body h5 { font-size: 0.95rem; margin: 14px 0 4px; }
.incident__body code { font-size: 0.9em; }
.footer { padding: 40px 20px; }
@media (max-width: 560px) { .bar { gap: 1px; } .component__head { flex-direction: column; } }