:root {
  --bg: #f6f7f9; --panel: #ffffff; --text: #1d2330; --muted: #667085; --line: #e4e7ec;
  --ch: #2563eb; --r2: #ea580c; --ok: #15803d; --bad: #b42318; --warn: #b54708;
  --field: #ffffff; --accent: #1d4ed8; --rowbad: #fdecea;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1218; --panel: #171b23; --text: #e6e8ec; --muted: #98a2b3; --line: #2a303b;
    --ch: #60a5fa; --r2: #fb923c; --ok: #4ade80; --bad: #f87171; --warn: #fbbf24; --field: #11151c; --accent: #93c5fd; --rowbad: #3a1d1d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1218; --panel: #171b23; --text: #e6e8ec; --muted: #98a2b3; --line: #2a303b;
  --ch: #60a5fa; --r2: #fb923c; --ok: #4ade80; --bad: #f87171; --warn: #fbbf24; --field: #11151c; --accent: #93c5fd; --rowbad: #3a1d1d;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; display: flex; flex-direction: column; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); font-weight: 400; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; flex-direction: column; }
.unlock, .session { display: flex; gap: 8px; align-items: center; }
.status { margin: 0 0 0 auto; color: var(--muted); }
.status.error { color: var(--bad); }
input, select { font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; min-width: 0; }
input:focus-visible, select:focus-visible, .btn:focus-visible, .link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn { font: inherit; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.btn:hover { background: var(--bg); }
.btn.primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn:disabled { opacity: .5; cursor: default; }
.link { font: inherit; font-size: 11px; border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0 4px; }
.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 270px minmax(0, 1fr) 440px; }
.filters { overflow: auto; background: var(--panel); border-right: 1px solid var(--line); padding: 8px 12px 16px; }
fieldset { border: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 8px 0 10px; display: grid; gap: 6px; }
legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.checks { display: grid; gap: 2px; max-height: 170px; overflow: auto; }
.checks.inline { display: flex; flex-wrap: wrap; gap: 4px 12px; max-height: none; }
.check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.filters label:not(.check) { display: grid; gap: 4px; color: var(--muted); }
.mapwrap { position: relative; min-height: 0; }
#map { position: absolute; inset: 0; }
.legend { position: absolute; left: 10px; top: 10px; flex-wrap: wrap; max-width: calc(100% - 20px); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; display: flex; gap: 12px; align-items: center; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dot.ch { background: var(--ch); }
.dot.r2 { border: 2px solid var(--r2); }
.results { overflow: auto; background: var(--panel); border-left: 1px solid var(--line); padding: 10px 14px 20px; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.side { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.side h2 { font-size: 13px; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.side .total { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.side .parts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-variant-numeric: tabular-nums; }
.side .err { color: var(--bad); grid-column: 1 / -1; }
.agree { margin: 10px 0; display: grid; gap: 3px; }
.ok { color: var(--ok); } .bad { color: var(--bad); } .warn { color: var(--warn); }
h3 { font-size: 12px; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; }
td.card { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr.diff td { background: var(--rowbad); }
.history td:nth-child(2), .history td:nth-child(3) { font-weight: 600; }
.maplibregl-popup-content { background: var(--panel); color: var(--text); }
@media (max-width: 1180px) { .layout { grid-template-columns: 240px minmax(0, 1fr) 360px; } }
@media (max-width: 767px) {
  body { height: auto; }
  .layout { display: flex; flex-direction: column; }
  .mapwrap { height: 55vh; order: 1; }
  .results { order: 2; border-left: 0; }
  .filters { order: 3; border-right: 0; }
  .status { margin-left: 0; width: 100%; }
  .legend { top: 8px; left: 8px; right: 56px; }
}