:root {
  --purple: #a855f7;
  --purple-hover: #9333ea;
  --purple-soft: #c4b5fd;
  --canvas: #08050e;
  --shell: #120b1b;
  --surface: #15151f;
  --surface-raised: #171020;
  --control: #26263a;
  --border: #24242f;
  --border-strong: #33334a;
  --muted: #9a9aab;
  --text: #e5e5ea;
  --white: #fff;
  --green: #22c55e;
  --red: #ef4444;
  --yellow: #f59e0b;
  --blue: #60a5fa;
  --font: 'Figtree', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--canvas); }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--text); font-family: var(--font); }
button, input { font: inherit; }
a { color: var(--purple-soft); }
.site-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.topbar { min-height: 76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:12px; color:var(--white); text-decoration:none; font-weight:700; font-size:18px; }
.brand img { width:42px; height:42px; object-fit:contain; }
.live-indicator { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
#live-dot { width:8px; height:8px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 4px rgba(245,158,11,.1); }
#live-dot.online { background:var(--green); box-shadow:0 0 0 4px rgba(34,197,94,.1); }
#live-dot.down { background:var(--red); box-shadow:0 0 0 4px rgba(239,68,68,.1); }
.hero { padding:48px 0 28px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.eyebrow { margin:0 0 8px; color:var(--purple-soft); font-size:12px; font-weight:700; letter-spacing:.12em; }
h1 { margin:0; color:var(--white); font-size:clamp(32px,5vw,48px); line-height:1.08; letter-spacing:-.03em; }
.subhead { margin:12px 0 0; color:var(--muted); font-size:16px; }
.report-button { min-height:42px; padding:0 16px; border:1px solid #5b2525; border-radius:8px; background:#180b0e; color:#fca5a5; cursor:pointer; transition:.2s; white-space:nowrap; }
.report-button:hover:not(:disabled) { background:#281015; border-color:#7f1d1d; }
.report-button:disabled { opacity:.55; cursor:not-allowed; }
.notice { margin-bottom:20px; padding:12px 14px; border-radius:8px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); }
.notice.error { border-color:#7f1d1d; color:#fecaca; background:#180b0e; }
.notice.success { border-color:#14532d; color:#bbf7d0; background:#07170d; }
.hidden { display:none !important; }
.status-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.status-card, .chart-card, .metric-panel { background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.status-card { min-height:136px; padding:20px; }
.card-label { color:var(--muted); font-size:13px; margin-bottom:12px; }
.status-value { min-height:30px; display:flex; align-items:center; }
.status-pill { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:6px 10px; font-size:13px; font-weight:600; background:#22222e; color:var(--muted); }
.status-pill::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.status-pill.online { color:#86efac; background:#0b2114; }
.status-pill.down { color:#fca5a5; background:#241012; }
.status-pill.degraded { color:#fcd34d; background:#251b08; }
.big-number { color:var(--white); font-size:30px; line-height:1; font-weight:700; letter-spacing:-.02em; }
.card-detail { color:var(--muted); font-size:12px; margin-top:11px; }
.chart-section { margin-top:44px; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:14px; }
h2 { margin:0; color:var(--white); font-size:22px; }
.range-tabs { display:flex; gap:4px; padding:4px; border:1px solid var(--border); background:#0b0b12; border-radius:9px; }
.range-tabs button { border:0; background:transparent; color:var(--muted); border-radius:6px; padding:7px 11px; cursor:pointer; }
.range-tabs button:hover { color:var(--white); background:var(--control); }
.range-tabs button.active { background:var(--purple); color:var(--white); }
.chart-card { padding:18px; }
.chart-legend { display:flex; flex-wrap:wrap; gap:14px 20px; color:var(--muted); font-size:12px; margin-bottom:12px; }
.chart-legend span { display:flex; align-items:center; gap:7px; }
.legend-dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.legend-dot.online { background:var(--green); }
.legend-dot.playing { background:#16a34a; }
.legend-dot.active { background:#60a5fa; }
.legend-dot.visits { background:#a78bfa; }
.legend-dot.reports { background:#f87171; }
.chart-wrap { position:relative; height:360px; }
#history-chart { width:100%; height:100%; display:block; }
.chart-empty { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); }
.metrics-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0 48px; }
.metric-panel { padding:20px; }
.panel-title { color:var(--white); font-weight:600; margin-bottom:12px; }
.metric-row { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--border); color:var(--muted); font-size:14px; }
.metric-row strong { color:var(--white); font-weight:600; }
footer { border-top:1px solid var(--border); padding:22px 0 30px; display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }
@media (max-width: 800px) {
  .hero { align-items:flex-start; flex-direction:column; }
  .report-button { width:100%; }
  .status-grid { grid-template-columns:repeat(2,1fr); }
  .section-head { align-items:flex-start; flex-direction:column; }
  .range-tabs { width:100%; justify-content:space-between; }
  .range-tabs button { flex:1; }
  .metrics-grid { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .site-shell { width:min(100% - 20px, 1180px); }
  .topbar { min-height:64px; }
  .brand span { font-size:16px; }
  .brand img { width:34px; height:34px; }
  .status-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .status-card { min-height:120px; padding:15px; }
  .big-number { font-size:25px; }
  .chart-card { padding:12px; }
  .chart-wrap { height:300px; }
  footer { flex-direction:column; gap:7px; }
}