:root {
  --ok: #2ecc71;
  --bad: #e67e22;
  --crit:#e74c3c;
  --fg: #111;
  --muted: #6b7280;
  --bg: #fff;
  --line:#eee;
}

* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--fg); background:var(--bg); }

.container { max-width: 980px; margin: 0 auto; padding: 0 16px; }

.hero { padding:32px 0 28px; border-bottom:1px solid var(--line); background:#fafafa; text-align:center; }
.hero h1 { margin:0 0 10px; font-size:28px; }
.hero p { margin:4px 0 0; color:var(--muted); }
.overall-status { display:inline-flex; align-items:center; gap:8px; font-size:18px; font-weight:600; color:var(--fg); }
.overall-status .status-icon { font-size:22px; }
.last-updated { font-size:13px; color:var(--muted); }

.tabs { margin:28px auto 12px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.tabs button { padding:10px 20px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; cursor:pointer; font-size:14px; color:var(--muted); transition:all .2s ease; }
.tabs button:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
.tabs button.active { background:#111827; color:#fff; border-color:#111827; }

.tab-panel { padding:8px 0 12px; }

.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

.notice { margin:16px 0; }

.group { padding:20px 0; }
.group h2 { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 8px; }

.component { display:flex; flex-direction:column; gap:10px; padding:18px 0; border-bottom:1px solid #f5f5f5; }
.component-header { display:flex; align-items:center; gap:12px; width:100%; }
.component .status-indicator { font-size:18px; }
.component .name { font-size:16px; font-weight:500; }
.component .meta { margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:var(--muted); font-size:13px; }
.component .uptime { font-weight:600; color:var(--fg); }
.component .badge { font-size:12px; padding:4px 12px; border-radius:999px; background:#f5f5f5; text-transform:capitalize; }
.component.operational .badge { background:#eafaf2; color:var(--ok); }
.component.degraded .badge { background:#fff3e8; color:var(--bad); }

.timeline { display:flex; align-items:center; gap:16px; width:100%; }
.timeline .timeline-label { font-size:11px; color:var(--muted); white-space:nowrap; }

.history { display:flex; gap:2px; flex:1; justify-content:flex-end; }
.history .day { width:8px; height:20px; background: var(--ok); display:inline-block; border-radius:2px; opacity:1; position:relative; }
/* .history .day[data-pct="100"]{ opacity:1; }
.history .day[data-pct^="99"]{ opacity:.95; }
.history .day[data-pct^="9"]{ opacity:.9; }
.history .day[data-pct^="8"]{ opacity:.8; }
.history .day[data-pct^="7"]{ opacity:.7; }
.history .day[data-pct^="6"]{ opacity:.6; }
.history .day[data-pct^="5"]{ opacity:.5; } */
.history .day[data-status="degraded"] { background: var(--bad); }
.history .day[data-status="outage"] { background: var(--crit); }

.history .day::after { content: attr(data-tooltip); position:absolute; left:50%; bottom:130%; transform:translateX(-50%); background:#111827; color:#f9fafb; padding:6px 10px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; font-size:12px; transition:opacity .2s ease; box-shadow:0 10px 25px rgba(15,23,42,.18); }
.history .day::before { content:""; position:absolute; left:50%; bottom:120%; transform:translateX(-50%); width:8px; height:8px; background:#111827; clip-path:polygon(50% 100%, 0 0, 100% 0); opacity:0; transition:opacity .2s ease; }
.history .day:hover::after,
.history .day:focus-visible::after,
.history .day:hover::before,
.history .day:focus-visible::before { opacity:1; }
.history .day:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }

#maintenance, #incidents { margin-top:12px; }

#maintenance .muted, #incidents .muted { color:var(--muted); }

.incidents h2 { margin-top:24px; font-size:16px; }
.incident { border:1px solid #f2f2f2; border-radius:8px; padding:12px; margin:12px 0; }
.incident h3 { margin:4px 0 8px; font-size:16px; }
.incident .meta { color:var(--muted); font-size:13px; }

.foot { margin:28px 0 40px; color:var(--muted); }