:root {
  --bg: #0b0d14; --panel: #12151f; --border: #232838; --text: #e7e9f3; --muted: #8b91a7;
  --up: #34d399; --degraded: #fbbf24; --down: #f87171; --empty: #2a2f40; --info: #60a5fa;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f5f6fa; --panel: #ffffff; --border: #e2e5ee; --text: #161a29; --muted: #626a82;
    --up: #10b981; --degraded: #f59e0b; --down: #ef4444; --empty: #e3e6ef; --info: #2563eb; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; min-height: 100vh; }
.wrap { max-width: 860px; margin: 0 auto; padding: 32px 16px 56px; }
.top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
h1 { font-size: 24px; margin: 0; }
.refresh { color: var(--muted); font-size: 12px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); flex-shrink: 0; display: inline-block; }
.overall { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); font-size: 17px; font-weight: 600; margin-bottom: 16px; }
.overall.operational { border-color: color-mix(in srgb, var(--up) 45%, var(--border)); background: color-mix(in srgb, var(--up) 10%, var(--panel)); }
.overall.operational .dot { background: var(--up); }
.overall.degraded, .overall.partial { border-color: color-mix(in srgb, var(--degraded) 50%, var(--border)); background: color-mix(in srgb, var(--degraded) 10%, var(--panel)); }
.overall.degraded .dot, .overall.partial .dot { background: var(--degraded); }
.overall.major { border-color: color-mix(in srgb, var(--down) 50%, var(--border)); background: color-mix(in srgb, var(--down) 10%, var(--panel)); }
.overall.major .dot { background: var(--down); }
.notice { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); margin-bottom: 16px; border-left: 4px solid var(--info); white-space: pre-wrap; }
.notice.warn { border-left-color: var(--degraded); }
.notice.error { border-left-color: var(--down); }
.group { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 16px; overflow: hidden; }
.group > h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0; padding: 14px 20px 6px; font-weight: 600; }
.mon { padding: 14px 20px 16px; border-top: 1px solid var(--border); }
.group > h2 + .mon { border-top: none; }
.mon-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mon-name { font-weight: 600; overflow-wrap: anywhere; }
.state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; color: var(--muted); }
.state .dot { width: 9px; height: 9px; }
.state.up { color: var(--up); } .state.up .dot { background: var(--up); }
.state.degraded { color: var(--degraded); } .state.degraded .dot { background: var(--degraded); }
.state.down { color: var(--down); } .state.down .dot { background: var(--down); }
.bars { display: flex; gap: 2px; height: 32px; }
.bar { flex: 1; min-width: 0; border-radius: 2px; background: var(--empty); }
.bar.up { background: var(--up); } .bar.degraded { background: var(--degraded); } .bar.down { background: var(--down); }
.bar:hover { opacity: .75; }
.mon-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.foot { color: var(--muted); font-size: 12px; text-align: center; margin-top: 24px; }
.incs { margin-bottom: 16px; }
.incs > h2, .past > h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.inc { background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--degraded); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; }
.inc.major { border-left-color: var(--down); }
.inc.maintenance { border-left-color: var(--info); }
.inc h3 { margin: 0 0 4px; font-size: 15px; }
.inc-sched { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.upd { font-size: 14px; padding: 6px 0; border-top: 1px solid var(--border); }
.inc h3 + .upd, .inc-sched + .upd { border-top: none; }
.upd time { display: block; color: var(--muted); font-size: 12px; }
.past { margin-top: 28px; }
.pday { padding: 10px 0; border-top: 1px solid var(--border); }
.pday > h3 { margin: 0 0 6px; font-size: 14px; }
.pday .none { color: var(--muted); font-size: 13px; }
.pday .inc { background: transparent; }
@media (max-width: 600px) {
  .wrap { padding: 20px 12px 40px; }
  h1 { font-size: 20px; }
  .overall { padding: 14px 16px; font-size: 16px; }
  .group > h2, .mon { padding-left: 14px; padding-right: 14px; }
  .bars { height: 28px; gap: 1px; }
}