:root {
  --bg: #06070d; --surface: #0d0f1a; --raised: #131627; --fg: #eef0fb; --muted: #9a9fbb; --line: rgba(255, 255, 255, 0.09);
  --ok: #34d399; --warn: #fbbf24; --bad: #fb7185; --info: #6d7cff; --none: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: radial-gradient(60rem 30rem at 50% -10rem, rgba(109, 124, 255, 0.12), transparent), var(--bg); color: var(--fg); font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100vh; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
.wrap { width: min(100% - 2rem, 52rem); margin-inline: auto; }
.muted { color: var(--muted); }

.top { padding: 1.25rem 0; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; font-weight: 700; letter-spacing: -0.01em; }
.tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.5rem; }
.back { color: var(--muted); font-size: 0.9rem; text-decoration: none; }
.back:hover { color: var(--fg); }

.banner { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; padding: 1.4rem 1.5rem; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.banner h1 { font-size: 1.35rem; letter-spacing: -0.01em; }
.banner p { font-size: 0.92rem; margin-top: 0.15rem; }
.banner-dot { flex: none; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 0.3rem rgba(255, 255, 255, 0.05); }
.banner.operational { border-color: rgba(52, 211, 153, 0.35); background: linear-gradient(180deg, rgba(52, 211, 153, 0.09), var(--surface)); }
.banner.operational .banner-dot { background: var(--ok); box-shadow: 0 0 0 0.3rem rgba(52, 211, 153, 0.18); }
.banner.degraded { border-color: rgba(251, 191, 36, 0.4); background: linear-gradient(180deg, rgba(251, 191, 36, 0.09), var(--surface)); }
.banner.degraded .banner-dot { background: var(--warn); box-shadow: 0 0 0 0.3rem rgba(251, 191, 36, 0.18); }
.banner.outage { border-color: rgba(251, 113, 133, 0.45); background: linear-gradient(180deg, rgba(251, 113, 133, 0.1), var(--surface)); }
.banner.outage .banner-dot { background: var(--bad); box-shadow: 0 0 0 0.3rem rgba(251, 113, 133, 0.2); }
.banner.maintenance { border-color: rgba(109, 124, 255, 0.45); background: linear-gradient(180deg, rgba(109, 124, 255, 0.1), var(--surface)); }
.banner.maintenance .banner-dot { background: var(--info); box-shadow: 0 0 0 0.3rem rgba(109, 124, 255, 0.2); }
.banner.loading .banner-dot { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

.stack { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; }
.block { margin-top: 2.5rem; }
.block h2 { font-size: 1.05rem; margin-bottom: 0.8rem; }
.card { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.list > .item + .item { border-top: 1px solid var(--line); }
.item { padding: 1.1rem 1.25rem 1.2rem; }
.item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.item-name { font-weight: 600; }
.item-desc { font-size: 0.84rem; color: var(--muted); margin-top: 0.1rem; }
.state { font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.45rem; }
.state::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--muted); }
.state.operational { color: var(--ok); } .state.operational::before { background: var(--ok); }
.state.degraded { color: var(--warn); } .state.degraded::before { background: var(--warn); }
.state.down { color: var(--bad); } .state.down::before { background: var(--bad); }
.state.maintenance { color: var(--info); } .state.maintenance::before { background: var(--info); }

.bars { display: flex; gap: 2px; margin-top: 0.85rem; height: 2rem; }
.bars .day { flex: 1; min-width: 0; border-radius: 2px; background: var(--none); position: relative; }
.bars .day:hover { filter: brightness(1.3); }
.s1, .bars .s1 { background: var(--ok); } .s2, .bars .s2 { background: var(--warn); } .s3, .bars .s3 { background: var(--bad); } .s4, .bars .s4 { background: var(--info); } .s0, .bars .s0 { background: var(--none); }
.bars-meta { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--muted); margin-top: 0.35rem; }

.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.78rem; margin-top: 0.8rem; }
.legend .bar { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 2px; margin-right: 0.35rem; vertical-align: -0.05em; }

.incident { padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.incident.major { border-color: rgba(251, 113, 133, 0.4); }
.incident.minor { border-color: rgba(251, 191, 36, 0.4); }
.incident.maintenance { border-color: rgba(109, 124, 255, 0.4); }
.incident h3 { font-size: 1rem; }
.incident .meta { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.updates { list-style: none; padding: 0; margin: 0.8rem 0 0; display: flex; flex-direction: column; gap: 0.7rem; }
.updates li { font-size: 0.9rem; padding-left: 0.9rem; border-left: 2px solid var(--line); }
.updates .u-status { font-weight: 600; text-transform: capitalize; }
.updates .u-time { color: var(--muted); font-size: 0.78rem; margin-left: 0.4rem; }
.updates .u-body { white-space: pre-wrap; word-break: break-word; margin-top: 0.1rem; }
.empty { padding: 1.4rem 1.25rem; color: var(--muted); font-size: 0.9rem; text-align: center; }

.foot { margin-top: 3.5rem; padding: 1.5rem 0 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; display: flex; flex-direction: column; gap: 0.35rem; }

@media (max-width: 560px) { .banner { padding: 1.1rem; } .item { padding: 1rem; } .bars { height: 1.6rem; } }
@media (prefers-reduced-motion: reduce) { .banner.loading .banner-dot { animation: none; } }