:root {
  color-scheme: dark;
  --bg: #061019;
  --panel: #0a1722;
  --panel-2: #0d2030;
  --line: #29404e;
  --line-soft: #1b303d;
  --text: #f4f6f8;
  --muted: #8da0ad;
  --accent: #f0b54a;
  --accent-soft: rgba(240,181,74,.12);
  --good: #6ad7a5;
  --warn: #f0b54a;
  --danger: #ff6b73;
  --shadow: 0 16px 45px rgba(0,0,0,.25);
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background: radial-gradient(circle at 15% 0%, #0b2941 0%, var(--bg) 38%, #03080d 100%); color:var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { padding:22px; }
a { color:inherit; }
button, input, select { font:inherit; }
.shell { width:min(1500px,100%); margin:0 auto; }
.topbar { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:18px; }
.brand-row { display:flex; align-items:center; gap:12px; }
.brand-block { min-width:0; }
.brand-logo { width:54px; height:54px; object-fit:cover; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 1px rgba(240,181,74,.35), 0 8px 22px rgba(0,0,0,.28); }
.brand-tagline { margin-top:3px; color:#c3b28e; font-size:9px; font-weight:800; letter-spacing:.22em; white-space:nowrap; }
.brand-tagline span { color:var(--accent); }
.brand-mark { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--accent); color:#041019; font-size:11px; font-weight:900; letter-spacing:.06em; }
.brand { font-size:24px; font-weight:850; letter-spacing:.16em; background:linear-gradient(90deg,#f2f2f2 0%,#d7d9dc 40%,#f0b54a 58%,#d48828 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.subtitle { color:var(--muted); font-size:13px; margin-top:3px; }
.top-status { display:flex; align-items:center; gap:8px; color:#b9d0db; font-size:12px; font-weight:700; letter-spacing:.08em; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--warn); box-shadow:0 0 16px rgba(241,199,91,.5); }
.status-dot.live { background:var(--good); box-shadow:0 0 16px rgba(84,231,162,.55); }
.status-dot.error { background:var(--danger); box-shadow:0 0 16px rgba(255,107,115,.55); }
.separator { color:#365365; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(350px,.8fr); gap:18px; }
.panel { background:linear-gradient(180deg, rgba(15,29,41,.96), rgba(9,22,32,.96)); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 22px; border-bottom:1px solid var(--line-soft); }
.panel-head.compact { padding:17px 20px; }
.panel-head h1 { margin:0; font-size:16px; letter-spacing:.02em; }
.panel-head p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.range-chip { border:1px solid #76572a; color:#ffd98b; background:var(--accent-soft); padding:7px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.08em; }
.radar-wrap { position:relative; padding:20px; display:grid; place-items:center; }
#radar { width:min(100%,720px); max-height:68vh; }
.scope-bg { fill:#07131d; stroke:#214052; stroke-width:1.2; }
.scope-grid circle, .scope-grid line { fill:none; stroke:#173343; stroke-width:1; stroke-dasharray:3 7; }
.scope-grid line { stroke-dasharray:2 8; }
.cardinals text { fill:#56788a; font-size:12px; font-weight:800; letter-spacing:.14em; }
.reference-dot { fill:var(--accent); filter:drop-shadow(0 0 8px rgba(240,181,74,.8)); }
.aircraft-marker { cursor:pointer; }
.aircraft-marker circle { fill:#0c2b3d; stroke:#f0b54a; stroke-width:1.5; }
.aircraft-marker.selected circle { fill:#4a3315; stroke:#ffe0a0; stroke-width:2; }
.aircraft-marker text.callsign { fill:#fff4d8; font-size:11px; font-weight:800; paint-order:stroke; stroke:#07131d; stroke-width:3px; }
.aircraft-marker text.plane { fill:#ffc65d; font-size:17px; font-weight:900; }
.radar-legend { position:absolute; left:34px; bottom:28px; display:flex; align-items:center; gap:7px; color:#708e9f; font-size:10px; font-weight:800; letter-spacing:.08em; }
.legend-dot { width:7px; height:7px; background:var(--accent); border-radius:50%; }
.featured-panel { min-height:560px; }
.empty-state { min-height:460px; display:grid; place-items:center; color:var(--muted); text-align:center; padding:40px; }
.featured-content { padding:22px; }
.hidden { display:none !important; }
.flight-title-row { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.flight-number { font-size:38px; line-height:1; font-weight:850; letter-spacing:-.03em; }
.airline { color:#9db5c2; margin-top:7px; font-size:13px; }
.distance-badge { min-width:72px; height:72px; border-radius:16px; background:var(--accent-soft); border:1px solid #76572a; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.distance-badge strong { font-size:23px; }
.distance-badge span { color:#d3a65d; font-size:9px; font-weight:900; letter-spacing:.14em; }
.route-line { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; margin:30px 0 22px; padding:18px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.route-code { display:block; font-size:25px; font-weight:800; }
.route-name { display:block; color:var(--muted); font-size:10px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.route-arrow { color:#4e7b92; font-size:22px; }
.text-right { text-align:right; }
.aircraft-line { display:flex; justify-content:space-between; gap:12px; color:#b8cad4; font-size:12px; margin-bottom:18px; }
.metrics-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.metric { background:#0a151f; border:1px solid var(--line-soft); border-radius:13px; padding:13px; }
.metric span { display:block; color:#5e8295; font-size:9px; font-weight:900; letter-spacing:.1em; }
.metric strong { display:inline-block; font-size:22px; margin-top:4px; }
.metric small { color:#718c9b; font-size:9px; font-weight:800; margin-left:4px; }
.bearing-line { display:flex; justify-content:space-between; gap:12px; margin-top:15px; color:#7392a2; font-size:10px; font-weight:800; letter-spacing:.08em; }
.list-panel { margin-top:18px; }
.admin-link { text-decoration:none; color:#ffd98b; border:1px solid #76572a; background:#171b1d; padding:7px 11px; border-radius:9px; font-size:11px; font-weight:800; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:720px; }
th { color:#5f8397; text-align:left; font-size:9px; letter-spacing:.12em; padding:11px 18px; border-bottom:1px solid var(--line-soft); }
td { padding:12px 18px; border-bottom:1px solid #122632; font-size:12px; color:#bcd0da; }
tbody tr[data-flight-id] { cursor:pointer; }
tbody tr[data-flight-id]:hover, tbody tr.selected { background:rgba(240,181,74,.07); }
tbody tr:last-child td { border-bottom:0; }
.flight-cell { color:#eef9fd; font-weight:800; }
.loading-cell { color:var(--muted); text-align:center; padding:25px; }
.footer { display:flex; justify-content:space-between; gap:15px; flex-wrap:wrap; padding:13px 4px 0; color:#4f6c7b; font-size:10px; }

/* Admin */
.admin-shell { width:min(1120px,100%); margin:0 auto; }
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.admin-card { background:linear-gradient(180deg, rgba(15,29,41,.97), rgba(9,22,32,.97)); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.admin-card.wide { grid-column:1 / -1; }
.card-body { padding:20px; }
.card-title { margin:0 0 4px; font-size:16px; }
.card-subtitle { margin:0 0 18px; color:var(--muted); font-size:12px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field.full { grid-column:1 / -1; }
.field label { color:#7794a4; font-size:10px; font-weight:800; letter-spacing:.08em; }
.field input, .field select { width:100%; background:#08141d; color:var(--text); border:1px solid #244052; border-radius:10px; padding:10px 11px; outline:none; }
.field input:focus, .field select:focus { border-color:#b07d31; box-shadow:0 0 0 3px rgba(240,181,74,.09); }
.action-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:18px; }
.btn { border:1px solid #6f552f; background:#17232a; color:#f8dfac; border-radius:10px; padding:9px 13px; cursor:pointer; font-weight:800; font-size:11px; }
.btn.primary { background:linear-gradient(180deg,#e7ad42,#b87320); border-color:#f1c266; color:#130f08; }
.btn.danger { border-color:#6a3438; background:#2a1518; color:#ffbec2; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.notice { margin-top:12px; border-radius:10px; padding:10px 12px; background:#0a1b25; border:1px solid #1d3a4b; color:#9eb8c6; font-size:11px; line-height:1.45; }
.notice.error { border-color:#65333a; color:#ffc1c5; background:#241316; }
.notice.success { border-color:#285b49; color:#a5efcc; background:#0d2019; }
.status-list { display:grid; gap:8px; }
.status-row { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:12px; }
.status-row:last-child { border-bottom:0; }
.status-row span:first-child { color:var(--muted); }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.login-wrap { width:min(520px,100%); margin:60px auto; }
.setup-help { color:#7897a8; font-size:11px; line-height:1.55; }
.backup-list { display:grid; gap:9px; }
.backup-item { display:flex; justify-content:space-between; gap:15px; align-items:center; background:#091720; border:1px solid #17313f; border-radius:10px; padding:10px 12px; }
.backup-item small { color:var(--muted); display:block; margin-top:3px; }
.preflight-box { margin-top:14px; padding:13px; border:1px solid #76572a; border-radius:12px; background:#091c27; }
.preflight-box h3 { margin:0 0 6px; font-size:13px; }
.release-notes { white-space:pre-wrap; color:#9cb4c1; font-size:11px; max-height:180px; overflow:auto; }

@media (max-width: 1000px) {
  .dashboard-grid, .admin-grid { grid-template-columns:1fr; }
  .admin-card.wide { grid-column:auto; }
  .featured-panel { min-height:auto; }
}
@media (max-width: 650px) {
  body { padding:12px; }
  .topbar { align-items:flex-start; }
  .brand { font-size:20px; }
  .brand-logo { width:46px; height:46px; }
  .brand-tagline { font-size:8px; letter-spacing:.14em; }
  .top-status { flex-wrap:wrap; justify-content:flex-end; }
  .panel-head { padding:15px; }
  .radar-wrap { padding:10px; }
  .featured-content { padding:16px; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .flight-number { font-size:31px; }
}

/* Build 3 enrichment + airport weather */
.weather-bar { display:grid; grid-template-columns:auto repeat(4,minmax(90px,auto)) minmax(220px,1fr); gap:14px; align-items:center; margin:-2px 0 18px; padding:11px 14px; border:1px solid #233b4a; border-radius:14px; background:linear-gradient(90deg,rgba(8,25,36,.96),rgba(12,31,43,.9)); color:#bdd0da; }
.weather-main { display:flex; align-items:center; gap:8px; min-width:0; }
.weather-main strong { color:#fff0cf; font-size:13px; letter-spacing:.08em; }
.weather-category { border:1px solid #4f6673; border-radius:999px; padding:3px 7px; color:#c7d5dc; font-size:9px; font-weight:900; letter-spacing:.08em; }
.weather-category.cat-vfr { color:#9df0c5; border-color:#2f7056; background:rgba(70,190,132,.08); }
.weather-category.cat-mvfr { color:#8ecbff; border-color:#37678b; background:rgba(72,139,198,.08); }
.weather-category.cat-ifr { color:#ff9398; border-color:#7d3a41; background:rgba(211,68,78,.08); }
.weather-category.cat-lifr { color:#e9a4ff; border-color:#6c417b; background:rgba(160,75,190,.08); }
.weather-item { display:flex; flex-direction:column; gap:2px; min-width:0; }
.weather-item span { color:#5e8295; font-size:8px; font-weight:900; letter-spacing:.12em; }
.weather-item strong { color:#d9e5eb; font-size:11px; white-space:nowrap; }
.weather-raw { min-width:0; color:#6f8d9c; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right; }
.route-progress { margin:-10px 0 17px; padding:0 2px 14px; border-bottom:1px solid var(--line-soft); }
.route-progress-head, .route-progress-foot { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.route-progress-head { margin-bottom:7px; color:#7797a8; font-size:9px; font-weight:900; letter-spacing:.08em; }
.route-progress-head strong { color:#f6d18d; }
.route-progress-track { height:5px; overflow:hidden; border-radius:999px; background:#102936; }
.route-progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#b77725,#f0b54a); transition:width .35s ease; }
.route-progress-foot { margin-top:7px; color:#617f8f; font-size:8px; font-weight:800; letter-spacing:.06em; }
.aircraft-owner { color:#627f90; font-size:10px; margin:-11px 0 17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width: 1050px) {
  .weather-bar { grid-template-columns:auto repeat(4,minmax(78px,1fr)); }
  .weather-raw { grid-column:1 / -1; text-align:left; }
}
@media (max-width: 650px) {
  .weather-bar { grid-template-columns:1fr 1fr; gap:10px; }
  .weather-main { grid-column:1 / -1; }
  .weather-raw { grid-column:1 / -1; }
}

/* Build 4 display and platform hardening */
.view-button { border:1px solid #5f4b2d; background:#101a20; color:#dbc38f; border-radius:8px; padding:6px 9px; cursor:pointer; font-size:9px; font-weight:900; letter-spacing:.12em; }
.view-button:hover { border-color:#a97a35; color:#ffe4a8; }
.flight-chips { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 -11px; }
.flight-chip { display:inline-flex; align-items:center; min-height:24px; padding:4px 8px; border:1px solid #365161; border-radius:999px; background:#091923; color:#9eb6c3; font-size:8px; font-weight:900; letter-spacing:.11em; }
.flight-chip.class-airline { border-color:#76572a; color:#f3cf89; background:rgba(240,181,74,.07); }
.flight-chip.class-cargo { border-color:#825228; color:#f0ba72; background:rgba(215,131,50,.08); }
.flight-chip.class-helicopter { border-color:#315f72; color:#9cd7e8; background:rgba(70,147,175,.08); }
.flight-chip.class-general_aviation { border-color:#4c5f68; color:#b8cbd4; }
.flight-chip.state-available { border-color:#285b49; color:#9fe4c5; background:rgba(76,185,133,.07); }
.flight-chip.state-pending { border-color:#745c31; color:#e5c37b; }
.flight-chip.state-unavailable, .flight-chip.state-not_applicable, .flight-chip.state-disabled { color:#809aa8; }
.flight-chip.state-error { border-color:#6a3438; color:#ffb7bd; background:rgba(190,68,76,.07); }
.route-line.route-unavailable .route-code { color:#718895; }
.route-line.route-unavailable .route-name { color:#617b89; font-style:italic; }
.aircraft-type { display:block; }
.traffic-mini { display:block; margin-top:3px; color:#587887; font-size:7px; font-weight:900; letter-spacing:.09em; }

/* Radar markers now rotate to ground track and labels deconflict in JavaScript. */
.aircraft-marker { outline:none; }
.aircraft-marker .marker-ring { fill:#0c2b3d; stroke:#dca43d; stroke-width:1.35; transition:r .12s ease, stroke-width .12s ease; }
.aircraft-marker.traffic-airline .marker-ring { stroke:#efb34a; }
.aircraft-marker.traffic-cargo .marker-ring { stroke:#d88e3e; }
.aircraft-marker.traffic-helicopter .marker-ring { stroke:#63abc3; }
.aircraft-marker.traffic-general_aviation .marker-ring { stroke:#bf9c5a; }
.aircraft-marker .selection-halo { fill:rgba(240,181,74,.08); stroke:rgba(255,218,145,.72); stroke-width:1.4; stroke-dasharray:3 3; filter:drop-shadow(0 0 8px rgba(240,181,74,.65)); }
.aircraft-marker.selected .marker-ring { fill:#4a3315; stroke:#ffe0a0; stroke-width:2.2; }
.plane-glyph { fill:#ffc65d; stroke:#07131d; stroke-width:.65; paint-order:stroke; vector-effect:non-scaling-stroke; }
.traffic-helicopter .plane-glyph { fill:#9cd7e8; }
.label-bg { fill:rgba(5,16,24,.91); stroke:#304b5a; stroke-width:.8; }
.aircraft-marker.selected .label-bg { fill:rgba(50,34,13,.96); stroke:#e9b453; stroke-width:1.1; }
.aircraft-marker text.callsign { fill:#f7e6bf; font-size:10px; font-weight:850; paint-order:stroke; stroke:#07131d; stroke-width:2px; pointer-events:none; }
.aircraft-marker.selected text.callsign { fill:#fff0c9; font-size:10.5px; }
.label-leader { stroke:#496777; stroke-width:.8; stroke-dasharray:2 2; pointer-events:none; }
.aircraft-marker.selected .label-leader { stroke:#d4a54f; }

/* Kiosk mode is optimized for a dedicated monitor/TV. */
body.kiosk-mode { height:100vh; min-height:0; overflow:hidden; padding:10px; }
.kiosk-mode .shell { width:100%; height:100%; max-width:none; display:flex; flex-direction:column; min-height:0; }
.kiosk-mode .topbar { margin-bottom:9px; flex:0 0 auto; }
.kiosk-mode .brand-logo { width:42px; height:42px; }
.kiosk-mode .brand { font-size:20px; }
.kiosk-mode .subtitle { font-size:11px; }
.kiosk-mode .weather-bar { flex:0 0 auto; margin:0 0 9px; padding:8px 12px; }
.kiosk-mode .dashboard-grid { flex:1 1 auto; min-height:0; grid-template-columns:minmax(0,1.75fr) minmax(340px,.78fr); gap:10px; }
.kiosk-mode .radar-panel { min-height:0; display:flex; flex-direction:column; }
.kiosk-mode .radar-panel .panel-head { padding:11px 16px; flex:0 0 auto; }
.kiosk-mode .radar-wrap { flex:1 1 auto; min-height:0; padding:7px; }
.kiosk-mode #radar { width:auto; height:100%; max-height:none; max-width:100%; }
.kiosk-mode .featured-panel { min-height:0; height:100%; overflow:auto; }
.kiosk-mode .featured-panel .panel-head { padding:12px 16px; }
.kiosk-mode .featured-content { padding:16px; }
.kiosk-mode .route-line { margin:19px 0 16px; padding:13px 0; }
.kiosk-mode .route-progress { margin-top:-5px; }
.kiosk-mode .metric { padding:10px; }
.kiosk-mode .list-panel, .kiosk-mode .footer { display:none; }
.kiosk-mode .radar-legend { left:23px; bottom:17px; }

@media (max-width: 1000px) {
  body.kiosk-mode { height:auto; min-height:100vh; overflow:auto; }
  .kiosk-mode .shell { height:auto; }
  .kiosk-mode .dashboard-grid { grid-template-columns:1fr; }
  .kiosk-mode .featured-panel { height:auto; overflow:visible; }
  .kiosk-mode #radar { width:min(100%,720px); height:auto; }
}

/* Build 6 UI foundation: classic radar, top navigation, and balanced Admin layout. */
.brand-home { display:inline-block; color:inherit; text-decoration:none; border-radius:12px; }
.brand-home:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media (hover:hover) and (pointer:fine) {
  .brand-home:hover .brand-logo { box-shadow:0 0 0 1px rgba(240,181,74,.62), 0 8px 24px rgba(0,0,0,.32); }
  .brand-home:hover .brand { filter:brightness(1.08); }
}
.top-nav-link { display:inline-flex; align-items:center; justify-content:center; min-height:29px; padding:6px 10px; border:1px solid #5f4b2d; border-radius:8px; background:#101a20; color:#dbc38f; text-decoration:none; font-size:9px; font-weight:900; letter-spacing:.12em; }
@media (hover:hover) and (pointer:fine) { .top-nav-link:hover { border-color:#a97a35; color:#ffe4a8; } }
.top-nav-link:focus-visible, .view-button:focus-visible, .admin-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Radar themes are intentionally scoped to the instrument surface so SkyTrace chrome can remain navy/gold. */
.radar-panel.radar-theme-classic-green { --radar-green:#76ff9b; --radar-green-strong:#b6ffc8; --radar-green-muted:#4f9f68; --radar-line:#174a2b; background:linear-gradient(180deg,#050b07 0%,#010302 100%); border-color:#1b4c31; box-shadow:0 16px 45px rgba(0,0,0,.34), inset 0 0 50px rgba(31,108,59,.035); }
.radar-panel.radar-theme-classic-green .panel-head { background:linear-gradient(180deg,rgba(4,12,7,.98),rgba(2,7,4,.98)); border-bottom-color:#163d28; }
.radar-panel.radar-theme-classic-green .panel-head h1 { color:#dcffe5; }
.radar-panel.radar-theme-classic-green .panel-head p { color:#72a883; }
.radar-panel.radar-theme-classic-green .range-chip { border-color:#2f7550; color:#9dffb5; background:rgba(67,208,111,.08); }
.radar-panel.radar-theme-classic-green .radar-wrap { background:radial-gradient(circle at 50% 48%,rgba(31,119,61,.07) 0%,rgba(5,17,9,.035) 42%,rgba(0,0,0,0) 74%); }
.radar-panel.radar-theme-classic-green .scope-bg { fill:#010402; stroke:#235f3d; stroke-width:1.25; }
.radar-panel.radar-theme-classic-green .scope-grid circle,
.radar-panel.radar-theme-classic-green .scope-grid line { stroke:#17492c; opacity:.82; }
.radar-panel.radar-theme-classic-green .cardinals text { fill:#65a779; }
.radar-panel.radar-theme-classic-green .reference-dot { fill:var(--radar-green); filter:drop-shadow(0 0 8px rgba(118,255,155,.78)); }
.radar-panel.radar-theme-classic-green .radar-legend { color:#609774; }
.radar-panel.radar-theme-classic-green .radar-legend .legend-dot { background:var(--radar-green); box-shadow:0 0 8px rgba(118,255,155,.35); }
.radar-panel.radar-theme-classic-green .aircraft-marker .marker-ring,
.radar-panel.radar-theme-classic-green .aircraft-marker.traffic-airline .marker-ring,
.radar-panel.radar-theme-classic-green .aircraft-marker.traffic-cargo .marker-ring,
.radar-panel.radar-theme-classic-green .aircraft-marker.traffic-helicopter .marker-ring,
.radar-panel.radar-theme-classic-green .aircraft-marker.traffic-general_aviation .marker-ring { fill:#061109; stroke:#70e891; }
.radar-panel.radar-theme-classic-green .aircraft-marker.traffic-airline .marker-ring { stroke:#8cffaa; }
.radar-panel.radar-theme-classic-green .aircraft-marker.traffic-cargo .marker-ring { stroke:#65d984; }
.radar-panel.radar-theme-classic-green .aircraft-marker.traffic-helicopter .marker-ring { stroke:#9bffc0; }
.radar-panel.radar-theme-classic-green .aircraft-marker.traffic-general_aviation .marker-ring { stroke:#58b875; }
.radar-panel.radar-theme-classic-green .plane-glyph,
.radar-panel.radar-theme-classic-green .traffic-helicopter .plane-glyph { fill:#8dffab; stroke:#001b08; }
.radar-panel.radar-theme-classic-green .aircraft-marker .selection-halo { fill:rgba(130,255,160,.055); stroke:rgba(174,255,194,.9); filter:drop-shadow(0 0 9px rgba(103,255,145,.62)); }
.radar-panel.radar-theme-classic-green .aircraft-marker.selected .marker-ring { fill:#15331e; stroke:#c8ffd4; stroke-width:2.35; }
.radar-panel.radar-theme-classic-green .label-bg { fill:rgba(0,8,3,.94); stroke:#285d3b; }
.radar-panel.radar-theme-classic-green .aircraft-marker.selected .label-bg { fill:rgba(7,29,13,.98); stroke:#9dfeb6; }
.radar-panel.radar-theme-classic-green .aircraft-marker text.callsign { fill:#b7fbc7; stroke:#000c04; }
.radar-panel.radar-theme-classic-green .aircraft-marker.selected text.callsign { fill:#e0ffe7; }
.radar-panel.radar-theme-classic-green .label-leader { stroke:#3e8055; }
.radar-panel.radar-theme-classic-green .aircraft-marker.selected .label-leader { stroke:#9cfcb5; }

/* Blue & gold restores the Build 5 SkyTrace radar palette while keeping Build 6+ layout improvements. */
.radar-panel.radar-theme-blue-gold { background:linear-gradient(180deg,rgba(15,29,41,.96),rgba(9,22,32,.96)); border-color:var(--line); box-shadow:var(--shadow); }
.radar-panel.radar-theme-blue-gold .panel-head { background:transparent; border-bottom-color:var(--line-soft); }
.radar-panel.radar-theme-blue-gold .panel-head h1 { color:var(--text); }
.radar-panel.radar-theme-blue-gold .panel-head p { color:var(--muted); }
.radar-panel.radar-theme-blue-gold .range-chip { border-color:#76572a; color:#ffd98b; background:var(--accent-soft); }
.radar-panel.radar-theme-blue-gold .radar-wrap { background:radial-gradient(circle at 50% 48%,rgba(27,76,107,.08) 0%,rgba(7,19,29,.02) 48%,rgba(0,0,0,0) 76%); }

/* Keep the management surface balanced on desktop while remaining single-column on smaller screens. */
.admin-shell { width:min(1280px,100%); }
.admin-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; }
.admin-card { min-width:0; }
.admin-card-tracking, .admin-card-update, .admin-card-weather, .admin-card-backups { min-height:100%; }
.status-row strong { min-width:0; text-align:right; overflow-wrap:anywhere; }
@media (max-width:1000px) {
  .admin-grid { grid-template-columns:1fr; }
  .admin-card.wide { grid-column:auto; }
}

/* Build 7 Admin refinement: Update Center sits beside Tracking Reference; theme selection lives with display reference settings. */
.admin-card-tracking .setup-help { margin-top:12px; }
.admin-card-update .card-body, .admin-card-tracking .card-body { height:100%; }


/* Build 8 overhead intelligence and flight trails. */
.display-mode-link.active { border-color:#b88232; color:#ffe5aa; background:#1a1b18; box-shadow:inset 0 0 0 1px rgba(240,181,74,.08); }
.approach-intelligence { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:15px 0 2px; }
.approach-intelligence > div { min-width:0; padding:10px 9px; border:1px solid #233d4c; border-radius:10px; background:#091923; }
.approach-intelligence span { display:block; margin-bottom:5px; color:#638797; font-size:7px; font-weight:900; letter-spacing:.1em; }
.approach-intelligence strong { color:#e5edf1; font-size:16px; line-height:1; }
.approach-intelligence small { margin-left:3px; color:#7894a3; font-size:8px; font-weight:800; }
.flight-chip.state-approaching { border-color:#2b7750; color:#a9f4c6; background:rgba(62,192,126,.08); }
.flight-chip.state-receding { border-color:#5b5060; color:#b7a5bc; background:rgba(117,91,126,.06); }
.flight-chip.state-crossing { border-color:#436a77; color:#a9d7e5; background:rgba(62,141,164,.07); }
.flight-chip.state-unknown { color:#7f98a5; }
.flight-trail { fill:none; stroke:#6fa17d; stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; opacity:.22; pointer-events:none; }
.flight-trail.priority { opacity:.42; stroke-width:1.35; }
.flight-trail.selected { opacity:.88; stroke-width:2.0; }
.radar-panel.radar-theme-classic-green .flight-trail { stroke:#66d985; }
.radar-panel.radar-theme-classic-green .flight-trail.selected { stroke:#c6ffd5; filter:drop-shadow(0 0 4px rgba(105,255,145,.34)); }
.radar-panel.radar-theme-blue-gold .flight-trail { stroke:#b78c45; }
.radar-panel.radar-theme-blue-gold .flight-trail.selected { stroke:#ffe2a2; filter:drop-shadow(0 0 4px rgba(240,181,74,.34)); }
body.overhead-mode .radar-panel .panel-head h1 { letter-spacing:.02em; }
body.overhead-mode .range-chip { font-weight:950; }
body.overhead-mode .aircraft-marker:not(.overhead-candidate):not(.selected) { opacity:.38; }
@media (max-width:650px) { .approach-intelligence { grid-template-columns:1fr; } }

/* Build 8 worldwide airport selector. */
.airport-picker { position:relative; }
.airport-picker-meta { margin-top:7px; color:#6f8b99; font-size:9px; line-height:1.45; }
.airport-results { position:absolute; z-index:20; left:0; right:0; top:calc(100% - 2px); max-height:360px; overflow:auto; border:1px solid #2b4655; border-radius:10px; background:#08151e; box-shadow:0 18px 42px rgba(0,0,0,.48); }
.airport-result { display:grid; grid-template-columns:minmax(64px,auto) minmax(0,1fr) auto; gap:12px; align-items:center; width:100%; min-height:58px; padding:10px 12px; border:0; border-bottom:1px solid #172b36; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.airport-result:last-child { border-bottom:0; }
.airport-result-code { color:#f0c66f; font-size:11px; font-weight:950; letter-spacing:.08em; white-space:nowrap; }
.airport-result-main { min-width:0; }
.airport-result-main strong { display:block; overflow:hidden; color:#dfe9ee; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.airport-result-main small { display:block; margin-top:4px; overflow:hidden; color:#7794a2; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.airport-result-type { color:#587584; font-size:7px; font-weight:900; letter-spacing:.08em; white-space:nowrap; }
.airport-result-empty { padding:14px; color:#7896a5; font-size:10px; }
@media (hover:hover) and (pointer:fine) { .airport-result:hover { background:#0d202c; } }
.airport-result:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
body.overhead-mode .flight-trail:not(.overhead-candidate):not(.selected) { opacity:.07; }
@media (max-width:650px) {
  .airport-result { grid-template-columns:minmax(58px,auto) minmax(0,1fr); }
  .airport-result-type { display:none; }
}

/* Build 9 saved tracking locations and admin-only U.S. address search. */
.address-picker { position:relative; }
.inline-search-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; }
.inline-search-row .btn { min-height:38px; white-space:nowrap; }
.saved-location-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.saved-location-heading > div:first-child { min-width:0; }
.location-save-controls { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:8px; width:min(560px,100%); flex:0 1 560px; }
.location-save-controls input { min-width:0; }
.saved-location-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.saved-location-item { display:flex; align-items:center; justify-content:space-between; gap:14px; min-width:0; padding:12px 13px; border:1px solid #18313f; border-radius:11px; background:#091720; }
.saved-location-item.active { border-color:#70572f; background:linear-gradient(90deg,rgba(240,181,74,.055),rgba(9,23,32,.96)); }
.saved-location-info { min-width:0; display:flex; flex-direction:column; gap:4px; }
.saved-location-title { display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-width:0; }
.saved-location-title strong { overflow:hidden; color:#e3edf1; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.saved-location-info small { overflow:hidden; color:#6f8e9e; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.location-badge { display:inline-flex; align-items:center; min-height:19px; padding:2px 6px; border:1px solid #36515f; border-radius:999px; color:#8ba7b4; font-size:7px; font-weight:900; letter-spacing:.09em; }
.location-badge.active-badge { border-color:#7a5b2e; color:#f3cc7d; background:rgba(240,181,74,.07); }
.saved-location-actions { display:flex; flex:0 0 auto; gap:7px; }
.saved-location-actions .btn { min-height:32px; padding:6px 9px; }
@media (max-width:900px) {
  .saved-location-heading { align-items:stretch; flex-direction:column; }
  .location-save-controls { width:100%; flex-basis:auto; }
  .saved-location-list { grid-template-columns:1fr; }
}
@media (max-width:650px) {
  .inline-search-row, .location-save-controls { grid-template-columns:1fr; }
  .saved-location-item { align-items:flex-start; flex-direction:column; }
  .saved-location-actions { width:100%; }
  .saved-location-actions .btn { flex:1 1 auto; }
}

/* Build 10 address autocomplete and anchor airports. */
.anchor-count { flex:0 0 auto; min-width:68px; padding:7px 10px; border:1px solid #35505e; border-radius:999px; color:#f0c66f; background:#0a1821; font-size:9px; font-weight:950; letter-spacing:.08em; text-align:center; }
.anchor-picker { margin-bottom:14px; }
.anchor-picker .airport-results { top:calc(100% - 2px); }
.address-picker .airport-result-code { min-width:64px; }
@media (max-width:650px) {
  .anchor-count { align-self:flex-start; }
}


/* Build 11 composable flight filters. */
.filter-state-badge { flex:0 0 auto; min-width:96px; padding:7px 10px; border:1px solid #35505e; border-radius:999px; color:#91a9b5; background:#091821; font-size:9px; font-weight:950; letter-spacing:.08em; text-align:center; }
.filter-state-badge.active { border-color:#76572a; color:#f5cd78; background:rgba(240,181,74,.075); }
.filter-state-badge.off { border-color:#4b4f55; color:#8c969d; background:#10161a; }
.filter-sections { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.filter-section { min-width:0; padding:14px; border:1px solid #1d3543; border-radius:12px; background:#081720; }
.filter-section .form-grid { grid-template-columns:1fr; gap:12px; }
.filter-check-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.filter-check, .filter-anchor-check { display:flex; align-items:flex-start; gap:9px; min-width:0; padding:9px 10px; border:1px solid #1e3948; border-radius:9px; background:#091923; cursor:pointer; }
.filter-check.single { margin-top:8px; }
.filter-check input, .filter-anchor-check input { flex:0 0 auto; margin:2px 0 0; accent-color:#d99b36; }
.filter-check span, .filter-anchor-check span { min-width:0; }
.filter-check strong, .filter-anchor-check strong { display:block; color:#dbe6eb; font-size:10px; }
.filter-check small, .filter-anchor-check small { display:block; margin-top:3px; color:#6f8d9b; font-size:8px; line-height:1.35; }
.filter-range-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:7px; align-items:center; }
.filter-range-row span { color:#607e8e; font-size:9px; font-weight:800; text-align:center; }
.filter-anchor-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.filter-anchor-options .notice { grid-column:1/-1; margin:0; }
.filter-inline { color:#d4ae65; font-weight:800; }
@media (max-width:1050px) { .filter-sections { grid-template-columns:1fr; } .filter-section .form-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:700px) { .filter-check-grid, .filter-anchor-options, .filter-section .form-grid { grid-template-columns:1fr; } }


/* Build 12 cargo/geography filters and compact Admin maintenance panels. */
.admin-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.admin-card-heading > div { min-width:0; }
.btn.compact { flex:0 0 auto; min-height:32px; padding:6px 10px; }
.diagnostics-card.collapsed .card-subtitle { margin-bottom:0; }
.diagnostics-body { margin-top:2px; }
.backup-list-meta { min-height:16px; margin:-6px 0 8px; color:#6f8d9b; font-size:9px; font-weight:800; letter-spacing:.04em; }
.backup-list-scroll { max-height:318px; overflow-y:auto; overscroll-behavior:contain; padding-right:4px; scrollbar-gutter:stable; }
.backup-list-scroll .backup-item { margin-right:2px; }
@media (max-width:650px) { .admin-card-heading { align-items:stretch; flex-direction:column; } .btn.compact { align-self:flex-start; } .backup-list-scroll { max-height:380px; } }


/* Build 22 encrypted complete-backup controls. */
.recovery-section { margin-top:18px; padding-top:18px; border-top:1px solid #1d3543; }
.recovery-section h3 { margin:0 0 7px; color:#dce8ee; font-size:13px; letter-spacing:.02em; }
.recovery-section .setup-help { margin:0 0 12px; }
.recovery-section .action-row { margin-top:12px; margin-bottom:14px; }
.recovery-section .backup-list-meta { margin-top:0; }
.recovery-passphrase-grid { margin-top:12px; }
.backup-actions { display:flex; flex-wrap:wrap; gap:7px; align-items:center; justify-content:flex-end; }
@media (max-width:650px) { .backup-actions { justify-content:flex-start; } }

/* Build 23 restore and migration preflight */
.recovery-preflight-grid { grid-template-columns:minmax(220px,1.4fr) minmax(220px,1fr); }
.recovery-preflight-note { margin-top:10px; line-height:1.45; }
.recovery-guide { margin-top:12px; border:1px solid #1d3543; border-radius:10px; background:#091720; padding:10px 12px; }
.recovery-guide summary { cursor:pointer; color:#dce8ee; font-weight:700; }
.recovery-guide-body { margin-top:10px !important; }
.recovery-guide-body p { margin:8px 0; }
@media (max-width:760px) { .recovery-preflight-grid { grid-template-columns:1fr; } }


/* Build 26 geographic map view. */
.map-wrap { position:relative; padding:12px; }
.map-viewport { position:relative; width:100%; height:min(68vh,720px); min-height:520px; overflow:hidden; border-radius:13px; border:1px solid #1f3a49; background:#07131d; cursor:grab; touch-action:none; user-select:none; }
.map-viewport.dragging { cursor:grabbing; }
.map-viewport::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(rgba(4,14,21,.04),rgba(3,12,18,.08)); box-shadow:inset 0 0 34px rgba(0,0,0,.14); }
.map-viewport.layer-satellite::after,
.map-viewport.layer-terrain::after { background:transparent; box-shadow:none; }
.map-tiles { position:absolute; inset:0; z-index:0; overflow:hidden; background:#07131d; }
.map-tile { position:absolute; width:256px; height:256px; max-width:none; pointer-events:none; }
.map-viewport.layer-street .map-tile { filter:saturate(.92) brightness(.90) contrast(1.04); }
.map-viewport.layer-satellite .map-tile,
.map-viewport.layer-terrain .map-tile { filter:none; }
.map-tile.tile-error { visibility:hidden; }
.map-aircraft-canvas { position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; }
#mapOverlay { position:absolute; inset:0; z-index:3; width:100%; height:100%; overflow:visible; pointer-events:none; }
.map-range-path { fill:rgba(27,84,112,.07); stroke:#4f91ad; stroke-width:1.4; stroke-dasharray:7 6; vector-effect:non-scaling-stroke; }
.map-reference-ring { fill:#07131d; stroke:#ffc85d; stroke-width:2.1; filter:drop-shadow(0 1px 3px rgba(0,0,0,.95)) drop-shadow(0 0 6px rgba(240,181,74,.55)); }
.map-reference-dot { fill:#ffd078; stroke:#020609; stroke-width:1.5; }
.map-reference-label-bg { fill:rgba(3,10,15,.98); stroke:#d8a94e; stroke-width:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.9)); }
.map-reference-label { fill:#fff4d8; font-size:10px; font-weight:950; paint-order:stroke; stroke:#020609; stroke-width:2.4px; }
.map-anchor path { fill:#6d9aaa; stroke:#e6f5fa; stroke-width:1.1; opacity:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.85)); }
.map-anchor.primary path { fill:#d9a84b; stroke:#fff0c8; }
.map-anchor-label-bg { fill:rgba(3,10,15,.96); stroke:#536e7a; stroke-width:.8; filter:drop-shadow(0 1px 2px rgba(0,0,0,.85)); }
.map-anchor.primary .map-anchor-label-bg { stroke:#d3a34a; }
.map-anchor text { fill:#f5fbfd; font-size:9px; font-weight:950; paint-order:stroke; stroke:#020609; stroke-width:2px; }
.map-anchor.primary text { fill:#fff0c8; }
.map-flight-trail { fill:none; stroke:#7eb1c3; stroke-width:1.2; opacity:.32; vector-effect:non-scaling-stroke; }
.map-flight-trail.priority { stroke:#d4a54f; opacity:.48; }
.map-flight-trail.selected { stroke:#ffe1a0; stroke-width:2.1; opacity:.92; filter:drop-shadow(0 0 4px rgba(240,181,74,.5)); }
.map-aircraft-marker { pointer-events:auto; cursor:pointer; outline:none; }
.map-marker-ring { fill:#061019; stroke:#e3ad46; stroke-width:2; vector-effect:non-scaling-stroke; filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)); }
.map-aircraft-marker.traffic-helicopter .map-marker-ring { stroke:#8ddcf5; }
.map-aircraft-marker.traffic-cargo .map-marker-ring { stroke:#f0a04b; }
.map-aircraft-marker.selected .map-marker-ring { fill:#061019; stroke:#fff0c7; stroke-width:2.8; }
.map-selection-halo { fill:rgba(240,181,74,.13); stroke:#ffd98b; stroke-width:1.8; stroke-dasharray:3 3; filter:drop-shadow(0 0 9px rgba(240,181,74,.85)); }
.map-plane-glyph { fill:#ffc65d; stroke:#020609; stroke-width:1.05; paint-order:stroke; vector-effect:non-scaling-stroke; }
.map-aircraft-marker.traffic-helicopter .map-plane-glyph { fill:#b7ecff; }
.map-label-bg { fill:rgba(3,10,15,.985); stroke:#728b98; stroke-width:1.1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.9)); }
.map-aircraft-marker.selected .map-label-bg { fill:#f0b54a; stroke:#fff0c5; stroke-width:1.35; }
.map-callsign { fill:#ffffff; font-size:9.8px; font-weight:950; paint-order:stroke; stroke:#020609; stroke-width:2.4px; letter-spacing:.01em; }
.map-aircraft-marker.selected .map-callsign { fill:#07131d; stroke:#f0b54a; stroke-width:.8px; }
.map-controls { position:absolute; z-index:4; top:14px; left:14px; display:grid; gap:5px; }
.map-controls button { width:36px; height:36px; display:grid; place-items:center; border:1px solid #38505e; border-radius:8px; background:rgba(7,20,29,.94); color:#e9d2a2; cursor:pointer; font-size:19px; font-weight:900; box-shadow:0 5px 16px rgba(0,0,0,.28); }
.map-controls button.map-reset { width:48px; font-size:7px; letter-spacing:.08em; }
.map-controls button:hover:not(:disabled) { border-color:#a77938; color:#ffe4aa; }
.map-controls button:disabled { opacity:.38; cursor:not-allowed; }
.map-layer-controls { position:absolute; z-index:4; top:14px; right:14px; display:flex; padding:3px; gap:3px; border:1px solid rgba(56,80,94,.9); border-radius:9px; background:rgba(7,20,29,.92); box-shadow:0 5px 16px rgba(0,0,0,.28); }
.map-layer-controls button { min-height:30px; padding:0 10px; border:1px solid transparent; border-radius:6px; background:transparent; color:#8fa9b5; cursor:pointer; font-size:8px; line-height:1; font-weight:900; letter-spacing:.08em; }
.map-layer-controls button:hover { color:#f0d39a; border-color:#3f5b69; }
.map-layer-controls button.active { color:#ffdda0; border-color:#9d7335; background:rgba(126,88,34,.28); }
.map-status { position:absolute; z-index:4; left:60px; top:15px; max-width:calc(100% - 390px); padding:7px 10px; border:1px solid rgba(74,111,129,.58); border-radius:8px; background:rgba(6,19,28,.86); color:#8eb0bf; font-size:8px; font-weight:900; letter-spacing:.09em; pointer-events:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.map-attribution { position:absolute; z-index:4; right:8px; bottom:7px; max-width:72%; padding:3px 6px; border-radius:5px; background:rgba(4,12,18,.78); color:#7995a3; font-size:8px; line-height:1.25; text-align:right; pointer-events:auto; }
.map-attribution a { color:#9fb8c4; }
body.map-mode .radar-panel { border-color:#31505f; }
.kiosk-mode.map-mode .map-wrap { flex:1 1 auto; min-height:0; padding:7px; }
.kiosk-mode.map-mode .map-viewport { height:100%; min-height:0; }
@media (max-width:1000px) { .map-viewport { height:620px; } }
@media (max-width:650px) { .map-wrap { padding:8px; } .map-viewport { height:66vh; min-height:430px; } .map-layer-controls { top:auto; right:8px; bottom:31px; } .map-layer-controls button { padding:0 7px; font-size:7px; } .map-status { max-width:calc(100% - 74px); } .map-attribution { max-width:88%; font-size:7px; } }
/* Build 32: mobile basemap brightness activation hotfix.
   Use the same proven width breakpoint as SkyTrace's mobile layout instead of relying on
   hover/pointer capability reporting, which can vary on Android/Samsung Chrome. */
@media screen and (max-width:900px) {
  .map-viewport::after { background:transparent; box-shadow:none; }
  .map-tiles { color-scheme:only light; }
  .map-tile { opacity:1 !important; mix-blend-mode:normal !important; }
  .map-viewport.layer-street .map-tile { filter:brightness(1.40) saturate(1.06) contrast(1.03); }
  .map-viewport.layer-satellite .map-tile { filter:brightness(1.32) saturate(1.10) contrast(1.04); }
  .map-viewport.layer-terrain .map-tile { filter:brightness(1.34) saturate(1.06) contrast(1.03); }
}

/* Build 33: map overlay legibility. Keep basemap rendering unchanged; strengthen only vector overlays. */
@media screen and (max-width:900px) {
  .map-callsign { font-size:10.4px; }
  .map-reference-label { font-size:10.4px; }
  .map-anchor text { font-size:9.4px; }
}

/* Build 34: mobile map interaction and overlay hotfix. Critical contrast is also
   written inline by app.js so SVG label readability does not depend on browser CSS handling. */
@media screen and (max-width:900px) {
  .map-label-bg, .map-reference-label-bg, .map-anchor-label-bg { shape-rendering:geometricPrecision; }
  .map-callsign, .map-reference-label, .map-anchor text { text-rendering:geometricPrecision; }
}


/* Build 35: Mobile Map Readability & Touch.
   Flightradar-style information hierarchy: aircraft remain immediately visible,
   flight labels sit on opaque high-contrast cards, and selected traffic receives
   unmistakable emphasis without changing the underlying basemap sources. */
.map-viewport {
  overscroll-behavior:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
#mapOverlay { touch-action:none; }
.map-aircraft-marker { touch-action:none; }
.map-marker-hit { fill:transparent; stroke:none; pointer-events:all; }
.map-marker-ring {
  fill:rgba(3,10,15,.94);
  stroke:#ffd15f;
  stroke-width:2.4;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.98)) drop-shadow(0 0 2px rgba(255,209,95,.38));
}
.map-aircraft-marker.traffic-helicopter .map-marker-ring { stroke:#b9edff; }
.map-aircraft-marker.traffic-cargo .map-marker-ring { stroke:#ffae58; }
.map-aircraft-marker.selected .map-marker-ring {
  fill:#11100a;
  stroke:#fff4d4;
  stroke-width:3.2;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,1)) drop-shadow(0 0 7px rgba(255,204,91,.95));
}
.map-selection-halo {
  fill:rgba(240,181,74,.12);
  stroke:#ffd877;
  stroke-width:2.2;
  stroke-dasharray:none;
  filter:drop-shadow(0 0 12px rgba(240,181,74,.9));
}
.map-plane-glyph {
  fill:#ffd15f;
  stroke:#000;
  stroke-width:1.45;
  stroke-linejoin:round;
  paint-order:stroke fill;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,1));
}
.map-aircraft-marker.traffic-helicopter .map-plane-glyph { fill:#c9f2ff; }
.map-aircraft-marker.traffic-cargo .map-plane-glyph { fill:#ffb45f; }
.map-aircraft-marker.selected .map-plane-glyph { fill:#fff4cf; }
.map-label-leader {
  stroke:rgba(235,246,250,.88);
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.95));
  pointer-events:none;
}
.map-aircraft-marker.selected .map-label-leader { stroke:#ffd875; stroke-width:1.45; }
.map-label-bg {
  fill:rgba(2,8,12,.965);
  stroke:rgba(225,238,244,.88);
  stroke-width:1.1;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.98));
}
.map-aircraft-marker.selected .map-label-bg {
  fill:rgba(31,23,8,.985);
  stroke:#ffd15f;
  stroke-width:1.6;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,1)) drop-shadow(0 0 5px rgba(240,181,74,.48));
}
.map-callsign {
  fill:#fff;
  font-size:11px;
  font-weight:950;
  paint-order:stroke;
  stroke:#000;
  stroke-width:2.8px;
  letter-spacing:.015em;
  pointer-events:none;
}
.map-aircraft-marker.selected .map-callsign { fill:#fff3cf; stroke:#100b02; stroke-width:2.5px; }
.map-label-secondary {
  fill:#c9dce4;
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.015em;
  paint-order:stroke;
  stroke:#000;
  stroke-width:2px;
  pointer-events:none;
}
.map-aircraft-marker.selected .map-label-secondary { fill:#ffd98a; stroke:#100b02; }
.map-viewport.layer-satellite .map-marker-ring,
.map-viewport.layer-terrain .map-marker-ring {
  fill:rgba(0,5,8,.97);
  stroke-width:2.7;
}
.map-viewport.layer-satellite .map-label-bg,
.map-viewport.layer-terrain .map-label-bg {
  fill:rgba(0,5,8,.985);
  stroke:rgba(242,249,252,.95);
}
.map-viewport.layer-satellite .map-plane-glyph,
.map-viewport.layer-terrain .map-plane-glyph { stroke-width:1.65; }
.map-reference-ring,
.map-anchor path { filter:drop-shadow(0 2px 3px rgba(0,0,0,1)) drop-shadow(0 0 3px rgba(0,0,0,.9)); }

@media screen and (max-width:900px) {
  .map-callsign { font-size:11.8px; stroke-width:3.2px; }
  .map-label-secondary { font-size:9.2px; stroke-width:2.2px; }
  .map-reference-label { font-size:11px; stroke-width:3px; }
  .map-anchor text { font-size:10px; stroke-width:2.5px; }
  .map-controls button { width:40px; height:40px; }
  .map-layer-controls button { min-height:34px; }
}


/* Build 36: Mobile Flight Information Legibility.
   Build 35 proved the gesture and marker changes, but the heavy SVG text outline
   could visually merge glyphs on high-density mobile displays. Build 36 moves
   contrast responsibility to the opaque information card and renders clean,
   larger system-font text with no outline around the letters. */
.map-label-bg {
  fill:#061019;
  stroke:#dbe8ed;
  stroke-width:1.25;
  opacity:1;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,1));
}
.map-aircraft-marker.selected .map-label-bg {
  fill:#171006;
  stroke:#ffd15f;
  stroke-width:1.8;
  opacity:1;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,1)) drop-shadow(0 0 4px rgba(240,181,74,.42));
}
.map-callsign {
  fill:#ffffff;
  stroke:none;
  paint-order:normal;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:12.8px;
  font-weight:850;
  letter-spacing:.01em;
  text-rendering:geometricPrecision;
}
.map-aircraft-marker.selected .map-callsign {
  fill:#fff5dc;
  stroke:none;
  font-size:14.2px;
  font-weight:900;
}
.map-label-secondary {
  fill:#d8e5ea;
  stroke:none;
  paint-order:normal;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:10.6px;
  font-weight:750;
  letter-spacing:.005em;
  text-rendering:geometricPrecision;
}
.map-aircraft-marker.selected .map-label-secondary {
  fill:#ffd98a;
  stroke:none;
  font-size:11.6px;
  font-weight:800;
}
.map-reference-label,
.map-anchor text {
  stroke:none !important;
  paint-order:normal !important;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:850;
}
.map-reference-label-bg,
.map-anchor-label-bg { opacity:1; }

@media screen and (max-width:900px) {
  .map-callsign { font-size:14.4px; }
  .map-aircraft-marker.selected .map-callsign { font-size:16px; }
  .map-label-secondary { font-size:11.8px; }
  .map-aircraft-marker.selected .map-label-secondary { font-size:12.6px; }
  .map-reference-label { font-size:12.2px; }
  .map-anchor text { font-size:11.2px; }
}

/* Build 37: Mobile Navigation & Map UI Polish.
   Desktop navigation remains unchanged. Phones/tablets receive a compact sticky
   header, thumb-friendly bottom-sheet menu and selected-flight detail sheet. */
.mobile-current-view,
.mobile-menu-button,
.mobile-menu-backdrop,
.mobile-menu-sheet,
.mobile-flight-sheet-grabber,
.mobile-flight-sheet-close { display:none; }

@media screen and (max-width:900px) {
  body.display-body { padding-top:0; }
  body.mobile-menu-open { overflow:hidden; }

  .display-body .topbar {
    position:sticky;
    z-index:60;
    top:0;
    align-items:center;
    min-height:62px;
    margin:0 -12px 14px;
    padding:8px 12px;
    border-bottom:1px solid rgba(61,88,104,.72);
    background:rgba(4,13,20,.94);
    box-shadow:0 8px 24px rgba(0,0,0,.28);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  .display-body .brand-row { gap:9px; }
  .display-body .brand-logo { width:40px; height:40px; }
  .display-body .brand { font-size:18px; letter-spacing:.13em; }
  .display-body .brand-tagline,
  .display-body .subtitle { display:none; }
  .display-body .top-status { margin-left:auto; flex-wrap:nowrap; justify-content:flex-end; gap:7px; }
  .display-body .top-status #sourceLabel,
  .display-body .top-status .separator,
  .display-body .top-status #clockLabel,
  .display-body .top-status .top-nav-link,
  .display-body .top-status #kioskButton { display:none; }
  .display-body .top-status .status-dot { width:9px; height:9px; flex:0 0 auto; }

  .mobile-current-view {
    display:inline-flex;
    min-height:30px;
    align-items:center;
    padding:0 8px;
    border:1px solid #34505f;
    border-radius:999px;
    background:#081721;
    color:#adc2cc;
    font-size:8px;
    font-weight:900;
    letter-spacing:.11em;
  }
  .mobile-menu-button {
    position:relative;
    display:inline-flex;
    min-height:38px;
    align-items:center;
    gap:7px;
    padding:0 11px;
    border:1px solid #76572a;
    border-radius:11px;
    background:linear-gradient(180deg,#17242c,#0c171d);
    color:#ffe0a0;
    box-shadow:0 4px 14px rgba(0,0,0,.28);
    font-size:9px;
    font-weight:950;
    letter-spacing:.09em;
    cursor:pointer;
  }
  .mobile-menu-button-icon { display:grid; gap:3px; width:15px; }
  .mobile-menu-button-icon i { display:block; width:15px; height:2px; border-radius:999px; background:#f0c36f; }
  .mobile-menu-badge {
    position:absolute;
    top:-6px;
    right:-6px;
    display:grid;
    min-width:19px;
    height:19px;
    place-items:center;
    padding:0 4px;
    border:2px solid #071018;
    border-radius:999px;
    background:#f0b54a;
    color:#171006;
    font-size:8px;
    font-weight:950;
    letter-spacing:0;
  }

  .mobile-menu-backdrop {
    position:fixed;
    z-index:78;
    inset:0;
    display:block;
    background:rgba(0,5,9,.68);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
  }
  .mobile-menu-backdrop[hidden] { display:none; }
  .mobile-menu-sheet {
    position:fixed;
    z-index:80;
    left:0;
    right:0;
    bottom:0;
    display:block;
    max-height:min(86dvh,760px);
    overflow:auto;
    padding:8px 14px calc(16px + env(safe-area-inset-bottom));
    border:1px solid #34505e;
    border-bottom:0;
    border-radius:22px 22px 0 0;
    background:linear-gradient(180deg,#0b1c27 0%,#061019 100%);
    box-shadow:0 -20px 55px rgba(0,0,0,.58);
    transform:translateY(105%);
    visibility:hidden;
    transition:transform .2s ease, visibility .2s step-end;
  }
  .mobile-menu-sheet.open {
    transform:translateY(0);
    visibility:visible;
    transition:transform .2s ease, visibility 0s;
  }
  .mobile-menu-grabber,
  .mobile-flight-sheet-grabber {
    width:46px;
    height:5px;
    margin:2px auto 10px;
    border-radius:999px;
    background:#426171;
  }
  .mobile-menu-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 2px 10px; }
  .mobile-menu-eyebrow { color:#6f90a0; font-size:8px; font-weight:950; letter-spacing:.18em; }
  .mobile-menu-head h2 { margin:2px 0 0; color:#f2f6f8; font-size:21px; line-height:1.1; }
  .mobile-menu-close,
  .mobile-flight-sheet-close {
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border:1px solid #3a5665;
    border-radius:12px;
    background:#0a1720;
    color:#dbe6eb;
    font-size:25px;
    line-height:1;
    cursor:pointer;
  }
  .mobile-menu-live-row {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:13px;
    padding:10px 11px;
    border:1px solid #243d4b;
    border-radius:12px;
    background:#07151e;
  }
  .mobile-menu-live-dot { width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:var(--warn); box-shadow:0 0 12px rgba(240,181,74,.45); }
  .mobile-menu-live-dot.live { background:var(--good); box-shadow:0 0 12px rgba(106,215,165,.52); }
  .mobile-menu-live-dot.error { background:var(--danger); box-shadow:0 0 12px rgba(255,107,115,.55); }
  .mobile-menu-live-row div { min-width:0; }
  .mobile-menu-live-row strong { display:block; overflow:hidden; color:#dce9ee; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-menu-live-row span:last-child { display:block; overflow:hidden; margin-top:2px; color:#7896a5; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }

  .mobile-menu-section { padding:12px 0; border-top:1px solid #18303d; }
  .mobile-menu-section-title { margin:0 2px 8px; color:#607f8e; font-size:8px; font-weight:950; letter-spacing:.15em; }
  .mobile-view-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .mobile-view-link {
    min-width:0;
    min-height:94px;
    padding:11px 9px;
    border:1px solid #294553;
    border-radius:13px;
    background:#081721;
    color:#c8d6dc;
    text-decoration:none;
  }
  .mobile-view-link.active { border-color:#a57735; background:linear-gradient(180deg,rgba(240,181,74,.16),rgba(25,24,18,.96)); box-shadow:inset 0 0 0 1px rgba(240,181,74,.08); }
  .mobile-view-icon { display:block; margin-bottom:7px; color:#e2b65f; font-size:19px; line-height:1; }
  .mobile-view-link strong { display:block; font-size:11px; }
  .mobile-view-link small { display:block; margin-top:4px; color:#6f8c9a; font-size:8px; line-height:1.3; }
  .mobile-view-link.active small { color:#a7946e; }

  .mobile-menu-row {
    display:flex;
    width:100%;
    min-height:58px;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 11px;
    border:1px solid #24404e;
    border-radius:12px;
    background:#081720;
    color:inherit;
    text-align:left;
    text-decoration:none;
  }
  .mobile-menu-action { cursor:pointer; }
  .mobile-menu-row > span:first-child { min-width:0; }
  .mobile-menu-row strong { display:block; color:#dde8ed; font-size:11px; }
  .mobile-menu-row small { display:block; margin-top:3px; color:#6d8a99; font-size:8px; line-height:1.35; }
  .mobile-row-badge { flex:0 0 auto; padding:5px 7px; border:1px solid #40515a; border-radius:999px; color:#8398a3; font-size:7px; font-weight:950; letter-spacing:.07em; }
  .mobile-row-badge.active { border-color:#7d5c2d; background:rgba(240,181,74,.1); color:#f5ca78; }
  .mobile-row-chevron { flex:0 0 auto; color:#b79252; font-size:24px; line-height:1; }
  .mobile-map-layer-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:8px; }
  .mobile-map-layer-row button {
    min-height:42px;
    border:1px solid #2d4958;
    border-radius:11px;
    background:#081721;
    color:#87a1ae;
    font-size:8px;
    font-weight:950;
    letter-spacing:.08em;
    cursor:pointer;
  }
  .mobile-map-layer-row button.active { border-color:#9d7335; background:rgba(126,88,34,.28); color:#ffdda0; }
  .mobile-system-section { padding-bottom:2px; }
  .mobile-menu-system-meta { display:flex; justify-content:space-between; gap:10px; padding:10px 4px 0; color:#527080; font-size:8px; font-weight:800; }

  /* Map selected-flight details become a draggable bottom sheet on mobile. */
  body.map-mode .featured-panel {
    --mobile-sheet-drag:0px;
    position:fixed;
    z-index:68;
    left:8px;
    right:8px;
    bottom:max(8px,env(safe-area-inset-bottom));
    max-height:min(72dvh,650px);
    min-height:0;
    overflow:auto;
    border-color:#49606b;
    border-radius:19px;
    background:linear-gradient(180deg,#0c1c27 0%,#07131c 100%);
    box-shadow:0 18px 55px rgba(0,0,0,.62);
    transform:translateY(calc(112% + var(--mobile-sheet-drag)));
    visibility:hidden;
    pointer-events:none;
    transition:transform .23s cubic-bezier(.2,.78,.25,1), visibility .23s step-end;
  }
  body.map-mode.mobile-flight-sheet-open .featured-panel {
    transform:translateY(var(--mobile-sheet-drag));
    visibility:visible;
    pointer-events:auto;
    transition:transform .23s cubic-bezier(.2,.78,.25,1), visibility 0s;
  }
  body.map-mode .featured-panel.dragging { transition:none; }
  body.map-mode .mobile-flight-sheet-grabber { display:block; margin-top:9px; margin-bottom:1px; cursor:grab; touch-action:none; }
  body.map-mode .mobile-flight-sheet-grabber:active { cursor:grabbing; }
  body.map-mode .mobile-flight-sheet-close { display:grid; }
  body.map-mode .featured-panel-head {
    position:sticky;
    z-index:2;
    top:0;
    padding:11px 14px 12px;
    background:rgba(10,24,34,.97);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  body.map-mode .featured-panel .featured-content { padding:14px; }
  body.map-mode .featured-panel .flight-number { font-size:30px; }
  body.map-mode .featured-panel .distance-badge { min-width:64px; width:64px; height:64px; border-radius:14px; }
  body.map-mode .featured-panel .route-line { margin:20px 0 16px; padding:14px 0; }
  body.map-mode .featured-panel .route-code { font-size:22px; }
  body.map-mode .featured-panel .metric { padding:11px; }
  body.map-mode .featured-panel .metric strong { font-size:20px; }

  /* The mobile status becomes a small glanceable pill rather than an instruction banner. */
  .map-status {
    left:60px;
    top:12px;
    max-width:min(205px,calc(100% - 132px));
    padding:6px 9px;
    border-radius:999px;
    background:rgba(5,16,24,.92);
    font-size:7.5px;
    letter-spacing:.07em;
  }
}

@media screen and (max-width:520px) {
  .display-body .brand-logo { width:38px; height:38px; }
  .display-body .brand { font-size:17px; }
  .mobile-current-view { padding:0 7px; }
  .mobile-menu-button { padding:0 9px; }
  .mobile-view-link { min-height:88px; padding:10px 8px; }
  .mobile-view-link small { font-size:7.5px; }
  body.map-mode .featured-panel { left:6px; right:6px; bottom:max(6px,env(safe-area-inset-bottom)); }
}

/* Build 40: nationwide viewport traffic + mobile radar cleanup.
   The tracking radius remains a monitoring/analytics zone; map-context traffic
   beyond that radius is intentionally quieter until selected. */
.map-aircraft-marker.map-context:not(.selected) { opacity:.9; }
.map-aircraft-marker.overview.map-context:not(.selected) { opacity:.86; }
.map-aircraft-marker.overview .map-plane-glyph { shape-rendering:geometricPrecision; }
.map-aircraft-marker.overview.tracked:not(.selected) .map-plane-glyph { opacity:1 !important; }
.map-aircraft-marker.overview.tracked:not(.selected) .map-marker-ring { opacity:.88; }

@media screen and (max-width:900px) {
  /* Build 40 radar targets are aircraft-first: compact symbols, clean opaque
     tags, and no thick text outline that turns callsigns into bright blobs. */
  .aircraft-marker.mobile-compact .marker-ring {
    fill:#061109;
    stroke-width:1.05;
    filter:none;
  }
  .aircraft-marker.mobile-compact .plane-glyph {
    stroke:#001206;
    stroke-width:.42;
    paint-order:stroke fill;
    filter:none;
  }
  .aircraft-marker.mobile-compact .selection-halo {
    stroke-width:1.15;
    stroke-dasharray:2.5 2.5;
    filter:none;
  }
  .aircraft-marker.mobile-compact .label-bg {
    fill:#031108;
    stroke:#4f9f68;
    stroke-width:.7;
    opacity:.98;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.8));
  }
  .aircraft-marker.mobile-compact.selected .label-bg {
    fill:#0a2112;
    stroke:#a8ffc0;
    stroke-width:.9;
  }
  .aircraft-marker.mobile-compact text.callsign,
  .radar-panel.radar-theme-classic-green .aircraft-marker.mobile-compact text.callsign {
    fill:#c7f8d3;
    stroke:none;
    paint-order:normal;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:9.4px;
    font-weight:850;
    letter-spacing:0;
    text-rendering:geometricPrecision;
  }
  .aircraft-marker.mobile-compact.selected text.callsign,
  .radar-panel.radar-theme-classic-green .aircraft-marker.mobile-compact.selected text.callsign {
    fill:#effff3;
    font-size:9.8px;
    font-weight:900;
  }
  .aircraft-marker.mobile-compact .label-leader {
    stroke:#73c98b;
    stroke-width:.65;
    opacity:.82;
  }

  /* Wide mobile maps can now carry many aircraft. Keep context targets compact
     while preserving a generous selected target and the existing close-zoom
     Build 36 label treatment. */
  .map-aircraft-marker.overview.map-context:not(.selected) .map-plane-glyph { opacity:.82; }
  .map-aircraft-marker.overview.map-context:not(.selected) .map-marker-ring { display:none; }
}

/* Build 47: Global Map & Mobile Experience Stabilization. */
@media screen and (max-width:900px) {
  /* Keep the brand readable on OLED/dark mobile displays. */
  .display-body .brand {
    background:linear-gradient(90deg,#ffffff 0%,#e8eef2 42%,#ffd27c 61%,#f0a24a 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:brightness(1.08);
    text-shadow:0 1px 12px rgba(240,181,74,.10);
  }

  /* The close control and title remain reachable while the menu body scrolls. */
  .mobile-menu-sheet { overscroll-behavior:contain; }
  .mobile-menu-head {
    position:sticky;
    z-index:4;
    top:-8px;
    margin:0 -14px;
    padding:8px 16px 10px;
    background:linear-gradient(180deg,rgba(11,28,39,.995),rgba(11,28,39,.96));
    border-bottom:1px solid rgba(34,58,72,.78);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .mobile-row-badge { min-width:62px; text-align:center; }

  /* Three deliberate mobile sheet heights: swipe the grabber up/down to step. */
  body.map-mode .featured-panel {
    max-height:none;
    height:min(58dvh,590px);
    transition:height .20s ease, transform .23s cubic-bezier(.2,.78,.25,1), visibility .23s step-end;
  }
  body.map-mode .featured-panel[data-sheet-mode="peek"] { height:min(30dvh,300px); }
  body.map-mode .featured-panel[data-sheet-mode="half"] { height:min(58dvh,590px); }
  body.map-mode .featured-panel[data-sheet-mode="full"] { height:min(88dvh,820px); }
  body.map-mode .featured-panel.dragging { transition:none; }

  /* Use the desktop three-metric idea on phones without three giant rows. */
  body.map-mode .featured-panel .approach-intelligence {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    margin:12px 0 2px;
  }
  body.map-mode .featured-panel .approach-intelligence > div { padding:8px 7px; }
  body.map-mode .featured-panel .approach-intelligence span {
    margin-bottom:4px;
    font-size:6.3px;
    line-height:1.25;
    letter-spacing:.055em;
  }
  body.map-mode .featured-panel .approach-intelligence strong { font-size:15px; }
  body.map-mode .featured-panel .approach-intelligence small { font-size:7px; }

  /* Fit more useful flight information above the fold. */
  body.map-mode .featured-panel .featured-content { padding:12px 13px 14px; }
  body.map-mode .featured-panel .flight-title-row { gap:10px; }
  body.map-mode .featured-panel .flight-chips { margin-top:12px; }
  body.map-mode .featured-panel .route-line { margin:15px 0 13px; padding:12px 0; }
  body.map-mode .featured-panel .metrics-grid { gap:8px; }
  body.map-mode .featured-panel .metric { padding:9px; }
  body.map-mode .featured-panel .metric strong { font-size:18px; }
  body.map-mode .featured-panel .bearing-line { margin-top:12px; }

  /* Make route progress read as part of the established blue/gold system. */
  body.map-mode .featured-panel .route-progress-track { height:6px; background:#102b39; }
  body.map-mode .featured-panel .route-progress-track span {
    background:linear-gradient(90deg,#d69a38,#ffd27c);
    box-shadow:0 0 10px rgba(240,181,74,.22);
  }

  /* The radius chip is now just the value on phones; keep it compact. */
  body.map-mode .radar-panel .range-chip {
    flex:0 0 auto;
    min-width:72px;
    padding:7px 9px;
    text-align:center;
    line-height:1.15;
  }
}

@media screen and (max-width:650px) {
  /* Override the older one-column closest-approach rule. */
  body.map-mode .featured-panel .approach-intelligence { grid-template-columns:repeat(3,minmax(0,1fr)); }
}