:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #f5f5f7; --panel: #fff; --surface: #f0f1f4; --text: #1d1d1f;
  --muted: #636670; --border: #e1e3e8; --accent: #0067d9; --selected: #eaf2ff;
  --glass: rgba(255,255,255,.92); --success: #247344; --danger: #b12d35;
  --shadow: 0 8px 32px rgba(20,25,40,.045);
  color: var(--text); background: var(--bg);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#141416; --panel:#202023; --surface:#2b2b30; --text:#f5f5f7;
    --muted:#b1b1ba; --border:#37373d; --accent:#83baff; --selected:#293b54;
    --glass:rgba(32,32,35,.94); --success:#8ed7a5; --danger:#ffa0a6; }
}
* { box-sizing:border-box; }
body { margin:0; }
[hidden] { display:none!important; }
a { color:var(--accent); text-underline-offset:3px; }
button,input,select { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.app-header { position:sticky; top:0; z-index:10; min-height:72px; padding:14px 28px;
  display:flex; align-items:center; gap:28px; background:var(--glass);
  backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
  font-size:18px; font-weight:650; letter-spacing:-.5px; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:10px;
  background:var(--accent); color:var(--panel); font-size:19px; }
.app-header nav { display:flex; gap:3px; background:var(--surface); padding:4px; border-radius:12px; }
.app-header nav a { text-decoration:none; color:var(--muted); padding:8px 16px; border-radius:9px; font-size:14px; font-weight:550; }
.app-header nav a[aria-current] { color:var(--text); background:var(--panel); box-shadow:0 1px 4px #00000010; }
.app-header button { margin-left:auto; border:1px solid var(--border); border-radius:10px;
  padding:9px 14px; background:var(--panel); color:var(--text); font-size:14px; }
.map-page #map { position:absolute; top:72px; height:calc(100dvh - 72px); width:100%; }
.map-page .panel { top:92px; left:20px; width:370px; max-height:calc(100dvh - 112px);
  padding:20px; border:1px solid var(--border); border-radius:20px; background:var(--glass);
  backdrop-filter:blur(24px); box-shadow:0 12px 40px #00000018; color:var(--text); }
.map-page h1 { font-size:21px; font-weight:650; letter-spacing:-.6px; }
.map-page .status,.map-page .alert-meta,.map-page .metric span,.map-page .popup-meta { color:var(--muted); }
.map-page button { background:var(--surface); color:var(--text); border-color:var(--border); border-radius:10px; }
.map-page .summary { gap:8px; margin:18px 0; }
.map-page .metric { background:var(--surface); border:0; border-radius:12px; padding:12px 8px; }
.map-page .metric strong { font-size:24px; letter-spacing:-.7px; }
.map-page .alert { background:var(--panel); border-color:var(--border); border-radius:12px; padding:14px; }
.map-page .alert:hover { background:var(--surface); border-color:var(--accent); }
.map-page .alert-title { font-size:14px; line-height:1.4; }
.map-page .tag { background:var(--surface); color:var(--muted); font-size:12px; }
.map-page .maplibregl-popup-content { background:var(--panel); color:var(--text); border-radius:14px; padding:16px; }
.map-page .popup-alert + .popup-alert { border-color:var(--border); }
@media(max-width:640px) {
  .app-header { padding:12px 14px; gap:12px; flex-wrap:wrap; }
  .app-header nav { order:3; width:100%; }
  .app-header nav a { flex:1; text-align:center; padding:7px 10px; }
  .map-page .app-header { height:116px; }
  .map-page #map { top:116px; height:calc(100dvh - 116px); }
  .map-page .panel { left:12px; right:12px; top:130px; width:auto; max-height:42dvh; padding:16px; }
}
@media(prefers-reduced-motion:no-preference) { button,a { transition:background .15s, border-color .15s; } }