:root {
  --bg: #0b1017;
  --panel: #121b27;
  --line: #273344;
  --text: #f0f4fa;
  --muted: #a5b3c5;
  --on: #b79a60;
  --off: #56565e;
  --unknown: #65748a;
  --future: #202a37;
  font: 16px/1.45 system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}
:root[data-palette="yellow-black"] { --on: #ffd600; --off: #101114; }
:root[data-palette="dark"] { --on: #387e63; --off: #9b4650; }
:root[data-palette="classic"] { --on: #48dca1; --off: #ff727f; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(#0b1017da, #0b1017ed), url("/dashboard-background.png") center / cover fixed;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid #9ad8ff; outline-offset: 3px; }
.shell { width: min(100% - 40px, 1120px); margin: auto; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 0 22px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 1.2rem; }
.brand #report-start { margin-top: 3px; color: var(--text); }
.brand span, .timezone, footer { color: var(--muted); font-size: .82rem; }
.header-controls { display: flex; align-items: center; gap: 18px; }
.palette-picker { display: grid; gap: 3px; color: var(--muted); font-size: .78rem; }
.palette-picker select { color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; font: inherit; }
.palette-picker select:focus-visible { outline: 2px solid #9ad8ff; outline-offset: 2px; }
.timezone { text-align: left; white-space: nowrap; }
.timezone time { display: block; color: var(--text); font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bolt { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #f3ca67; color: #211906; }
.bolt svg { width: 22px; fill: currentColor; }
.demo { color: #f5d58d; background: #302713; border: 1px solid #514323; border-radius: 10px; padding: 9px 14px; margin-bottom: 14px; font-size: .86rem; }
.status-panel {
  --signal: var(--muted);
  display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  padding: clamp(22px, 4vw, 42px); min-height: 190px; border: 1px solid var(--line); border-radius: 20px;
  background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--signal) 15%, transparent), transparent 75%), var(--panel);
}
.status-panel[data-state=on] { --signal: #8af2bd; background: linear-gradient(120deg, #176344, #103729); border-color: #368d65; }
.status-panel[data-state=off] { --signal: #ffb3b3; background: linear-gradient(120deg, #8a2939, #421923); border-color: #ac4a56; }
.eyebrow { color: var(--signal); font-size: .76rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 750; margin: 0; }
.signal { display: inline-block; width: .65em; height: .65em; border-radius: 50%; background: currentColor; margin-right: .4em; box-shadow: 0 0 14px currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 8px 0 3px; font-size: clamp(2rem, 6vw, 3.5rem); letter-spacing: -.055em; line-height: 1.06; }
.status-heading { display: flex; align-items: center; gap: 12px; }
.status-icon { font-size: clamp(1.3rem, 4vw, 2.5rem); white-space: nowrap; }
.frog { width: clamp(38px, 7vw, 58px); }
#status-detail { margin: 8px 0 0; color: #e5e7ed; }
#status-time { color: white; font-size: clamp(1.15rem, 4vw, 1.7rem); font-variant-numeric: tabular-nums; }
.counter { border-left: 1px solid var(--line); padding-left: 22px; min-width: 170px; }
.counter span, .counter strong { display: block; }
.counter span { color: var(--muted); font-size: .82rem; }
.counter strong { font-size: 1.9rem; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.status-stage { display: none; position: relative; flex: 1 1 112px; max-width: 210px; height: 120px; isolation: isolate; }
.status-panel[data-state=on] .status-stage,
.status-panel[data-state=off] .status-stage { display: block; }
.dance-scene, .ghost-scene { display: none; position: absolute; inset: 0; }
.status-panel[data-state=on] .dance-scene,
.status-panel[data-state=off] .ghost-scene { display: block; }
.beam {
  position: absolute; top: -8px; left: calc(50% - 34px); width: 68px; height: 123px;
  transform-origin: center top; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background: linear-gradient(var(--beam), transparent); opacity: .8;
  animation: sweep 3.1s ease-in-out infinite alternate;
}
.beam-left { --beam: #fff1a0; --angle: 28deg; left: 0; }
.beam-center { --beam: #9efbd9; --angle: -10deg; animation-delay: -.8s; }
.beam-right { --beam: #bfc1ff; --angle: -30deg; left: auto; right: 0; animation-delay: -1.8s; }
.stage-glow { position: absolute; inset: auto 8% 0; height: 26px; border-radius: 50%; background: radial-gradient(ellipse, #fff6ba9c, transparent 68%); }
.dancer { position: absolute; left: calc(50% - .5em); bottom: 4px; font-size: 3.3rem; line-height: 1; filter: drop-shadow(0 0 13px #fff8b8); animation: dance 1.15s ease-in-out infinite alternate; }
.spark { position: absolute; color: #fff7bf; animation: twinkle 2s ease-in-out infinite alternate; }
.spark-left { left: 17%; top: 47%; }.spark-right { right: 18%; top: 30%; animation-delay: -.9s; }
.ghost-scene { border-radius: 50%; background: radial-gradient(ellipse, #170f2bc9, transparent 72%); }
.ghost { position: absolute; font-size: 2rem; filter: grayscale(.8) drop-shadow(0 0 9px #c7bdff85); animation: haunt 4.2s ease-in-out infinite alternate; }
.ghost-left { left: 10%; bottom: 12%; opacity: .72; }
.ghost-center { left: 40%; bottom: 24%; font-size: 2.75rem; animation-delay: -1.2s; }
.ghost-right { right: 7%; top: 14%; opacity: .55; animation-delay: -2.2s; }
@keyframes sweep { from { transform: rotate(var(--angle)); } to { transform: rotate(calc(var(--angle) * -.5)); } }
@keyframes dance { from { transform: translate(-6px, 0) rotate(-9deg); } to { transform: translate(8px, -12px) rotate(10deg); } }
@keyframes twinkle { from { opacity: .4; } to { opacity: 1; } }
@keyframes haunt { from { transform: translate(-6px, 9px) rotate(-9deg); } to { transform: translate(9px, -12px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) {
  .status-stage * { animation: none; }
  .beam { transform: rotate(var(--angle)); }
}
.history { padding-top: 28px; }
h2 { font-size: 1.45rem; margin-bottom: 12px; letter-spacing: -.025em; }
.periods, .custom { display: flex; flex-wrap: wrap; gap: 8px; }
button, input[type=date] { color: var(--text); border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: 8px 12px; }
.periods button:hover, .custom button:hover { border-color: #7890ad; }
.periods button:disabled { opacity: .45; cursor: default; }
.periods button[aria-pressed=true] { background: #d6ecff; border-color: #d6ecff; color: #0c243b; font-weight: 700; }
.custom { margin-top: 12px; align-items: end; }
.custom label { display: grid; gap: 4px; color: var(--muted); font-size: .84rem; }
.range-label { margin: 10px 0; color: var(--muted); font-size: .87rem; }
#error { color: #ff727f; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.metrics article, .card { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 17px 20px; }
.metrics article > span, .metrics small { color: var(--muted); font-size: .85rem; }
.metrics strong { display: block; font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: -.045em; line-height: 1.15; margin: 5px 0 3px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.on { background: var(--on); }.off { background: var(--off); }.unknown { background: var(--unknown); }.future { background: var(--future); }
.card { margin: 12px 0; }
.card h3 { margin-bottom: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 15px; color: var(--muted); font-size: .8rem; margin-bottom: 12px; }
.timeline-day { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 9px; margin: 6px 0; }
.day-label { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.track { position: relative; }
.bar { height: 21px; display: flex; border-radius: 5px; overflow: hidden; background: var(--future); }
.bar span { display: block; min-width: 0; }
.bar span:focus-visible { outline-offset: -3px; }
.axis { position: absolute; inset: 0; pointer-events: none; color: white; font-size: .68rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.axis span { position: absolute; top: 50%; transform: translate(-50%, -50%); background: #101722b8; border-radius: 3px; padding: 0 3px; }
.axis span:first-child { transform: translate(2px, -50%); }.axis span:last-child { transform: translate(calc(-100% - 2px), -50%); }
.now-marker { position: absolute; top: -4px; bottom: -2px; width: 2px; background: #fff0b3; pointer-events: none; box-shadow: 0 0 0 1px #152336; }
.now-marker::before { content: ""; position: absolute; top: -2px; left: -4px; border: 5px solid transparent; border-top-color: #fff0b3; }
.line-key::before { content: ""; display: inline-block; width: 17px; border-top: 2px solid #ffdb88; vertical-align: middle; margin-right: 5px; }
.plot-scroll { overflow-x: auto; }
.plot-scroll svg { display: block; width: 100%; height: 380px; }
.plot-scroll text { font-family: system-ui, sans-serif; fill: var(--muted); font-size: 11px; }
.plot-scroll line { stroke: var(--line); }
.plot-scroll rect.on { fill: var(--on); }.plot-scroll rect.off { fill: var(--off); }
.plot-scroll rect.unknown { fill: var(--unknown); }.plot-scroll rect.future { fill: var(--future); }
.plot-scroll .outage-line { fill: none; stroke: #ffdb88; stroke-width: 2; pointer-events: none; }
.plot-scroll .outage-point { fill: #ffdb88; stroke: #172332; stroke-width: 1.5; pointer-events: none; }
.plot-scroll .outage-value { fill: #ffebad; font-weight: 750; paint-order: stroke; stroke: #172332; stroke-width: 3; pointer-events: none; }
.plot-scroll .plot-hit { fill: transparent; cursor: help; }
.chart-tooltip {
  position: fixed; z-index: 5; max-width: min(280px, calc(100vw - 16px)); pointer-events: none;
  padding: 9px 13px; border-radius: 9px; background: #fff1bd; color: #183f76; box-shadow: 0 6px 22px #0007; font-size: .82rem;
}
.chart-tooltip strong, .chart-tooltip span { display: block; }
.chart-tooltip strong { margin-bottom: 3px; font-size: .9rem; }
.chart-tooltip .event { margin-top: 2px; }
.chart-tooltip .event small { color: #57667e; }
.chart-tooltip .event-duration { color: #57667e; padding-left: 22px; font-size: .78rem; }
.chart-tooltip .tip-summary { margin-top: 7px; padding-top: 6px; border-top: 1px solid #b6a66e; font-weight: 650; }
footer { padding: 12px 0 28px; }
@media (max-width: 620px) {
  .shell { width: calc(100% - 24px); }
  .top { padding-top: 16px; }
  .header-controls { flex-direction: column; align-items: start; gap: 5px; }
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .metrics article:last-child { grid-column: 1 / -1; }
  .metrics article, .card { padding: 13px; }
  .counter { padding-left: 12px; }
  .status-stage { height: 100px; max-width: 150px; }
  .beam { height: 100px; }
}