:root {
  --surface: #fff;
  --soft-line: #E4E8EF;
  --hover: #F2F7FE;
  --body-text: #161616;
  --link: #0C6FF1;
  --map-idle: #DEEEFD;
  --map-edge: #8BA7C4;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #07152A;
  --surface: #0D1C33;
  --ink: #DEEEFD;
  --ice: #172B4D;
  --line: #344760;
  --soft-line: #273A54;
  --muted: #B0BED1;
  --danger: #F4C554;
  --detection: #FF8991;
  --hover: #192F50;
  --body-text: #DEEEFD;
  --link: #69CFF7;
  --map-idle: #172B4D;
  --map-edge: #49658A;
}
.topbar, .status-panel, .map-toolbar, .map-controls,
.map-controls button, .legend, .zone-card, .detail-heading button {
  background: var(--surface);
}
.status-panel { scrollbar-color: var(--line) var(--surface); }
.zone-card, .time-grid { border-color: var(--soft-line); }
.zone-card:hover, .map-controls button:hover, .detail-heading button:hover { background: var(--hover); }
.detail-message { color: var(--body-text); }
.detail-actions a { color: var(--link); }
button:focus-visible, a:focus-visible { outline-color: var(--link); }
.back-button:hover { background: #004DB8; }
.legend-dot:not(.legend-dot--danger):not(.legend-dot--detection) {
  background: var(--map-idle);
  border-color: var(--map-edge);
}
:root[data-theme="dark"] .basemap-layer canvas {
  filter: grayscale(1) invert(1) brightness(.7) contrast(.85);
}
.theme-switch { display: flex; flex-shrink: 0; border: 1px solid var(--line); }
.theme-switch button {
  border: 0;
  background: var(--surface);
  color: var(--muted);
  padding: 0 10px;
  min-height: 34px;
  font-size: 12px;
}
.theme-switch button + button { border-left: 1px solid var(--line); }
.theme-switch button:hover { background: var(--hover); }
.theme-switch button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.theme-switch button:focus-visible { outline-offset: -3px; }
@media (max-width: 850px) {
  .dashboard-shell { grid-template-rows: 92px minmax(350px,52dvh) auto; }
  .topbar { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding-block: 6px; }
  .theme-switch { grid-column: 2; grid-row: 1; }
  .theme-switch button { min-height: 40px; }
  .connection { grid-column: 1/-1; grid-row: 2; margin-left: 0; align-self: start; }
}