:root {
  --ink: #1a1a1a;
  --muted: #64707a;
  --line: #d7dde2;
  --accent: #007ce0;
  --bg: #ffffff;
  --panel: #f7f9fa;
  --good: #1a9850;
  --warn: #fdae61;
  --bad: #d73027;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

header { padding: 18px 24px 6px; border-bottom: 1px solid var(--line); }
header h1 { margin: 0 0 4px; font-size: 22px; font-weight: 650; }
.muted { color: var(--muted); }
header p { margin: 0 0 10px; }

main {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr);
  gap: 20px;
  padding: 16px 24px;
  align-items: start;
}
@media (max-width: 1000px) { main { grid-template-columns: 1fr; } }

#map { height: 620px; border: 1px solid var(--line); border-radius: 6px; }
.caption { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px;
      vertical-align: -1px; }

.picker-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.picker-row label { font-weight: 600; font-size: 13px; }
select {
  font: inherit; padding: 4px 8px; border: 1px solid var(--line);
  border-radius: 4px; background: #fff;
}

#detail h2 { margin: 4px 0 10px; font-size: 19px; }
.badge { font-size: 13px; padding: 2px 9px; border-radius: 10px; color: #fff;
         font-weight: 600; vertical-align: 2px; }
.metrics { display: flex; gap: 12px; margin: 10px 0; }
.metric { background: var(--panel); border: 1px solid var(--line);
          border-radius: 6px; padding: 8px 14px; flex: 1; text-align: center; }
.metric .v { font-size: 20px; font-weight: 650; }
.metric .k { font-size: 12px; color: var(--muted); }

.status { font-size: 17px; font-weight: 650; margin: 10px 0 2px; }
.status.firing { color: var(--bad); }
.status.ok { color: var(--good); }

table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 6px 0; }
th, td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--muted); font-size: 12px;
     text-transform: uppercase; letter-spacing: 0.02em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.hit  { background: #d7f0d7; }
tr.miss { background: #f7d4cf; }
tr.fa   { background: #fde8c8; }
td.cell-good { background: #d7f0d7; }
td.cell-mid  { background: #fdf2cc; }
td.cell-bad  { background: #f7d4cf; }

.scroll { max-height: 420px; overflow-y: auto; border: 1px solid var(--line);
          border-radius: 6px; }
.scroll table { margin: 0; }
.scroll th { position: sticky; top: 0; background: var(--panel); }

details { margin: 10px 0; border: 1px solid var(--line); border-radius: 6px;
          padding: 8px 12px; background: var(--panel); }
details summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
details[open] summary { margin-bottom: 8px; }

h3 { font-size: 15px; margin: 14px 0 6px; }
#compare-panel { padding: 8px 24px 20px; border-top: 1px solid var(--line); }
#compare-panel h2 { font-size: 18px; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 1000px) { .compare-grid { grid-template-columns: 1fr; } }

svg text { font: 11px -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--ink); }
svg .axis line, svg .axis path { stroke: var(--line); }
svg .gridline { stroke: #eef1f3; }
svg .ylab, svg .xlab { fill: var(--muted); font-size: 11.5px; }
.legend-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px;
              margin: 4px 0; }
.legend-row .sw { margin-right: 4px; }

footer { padding: 10px 24px 20px; border-top: 1px solid var(--line); font-size: 12.5px; }
.note { font-size: 12.5px; color: var(--muted); }