/* Match the Flight Intel application's zinc surfaces and sky accents. */
:root {
  --bg: #000;
  --panel: rgba(24, 24, 27, .5);
  --line: rgba(63, 63, 70, .5);
  --muted: #a1a1aa;
  --cyan: #38bdf8;
  --text: #f4f4f5;
}
html, body { background: #000; font-family: Inter, Arial, sans-serif; }
.embedded, .embedded body, .embedded main { background: #000; }
main { max-width: 1600px; padding: 40px 24px; }
.embedded main { padding: 0 0 4px; }
.title-row { padding: 12px 0 28px; margin-bottom: 0; gap: 32px; }
.title-row h1 { font-size: clamp(32px, 4vw, 52px); font-weight: 300; letter-spacing: -.035em; line-height: 1.15; }
h1 span { color: inherit; }
.eyebrow { color: #38bdf8; font-size: 11px; font-weight: 500; letter-spacing: .16em; margin-bottom: 14px; }
.subtitle { color: #a1a1aa; font-size: 16px; line-height: 1.7; margin-top: 16px; }
h2, .map-toolbar h2, .wx-aside-head h2 { font-weight: 300; color: #f4f4f5; }
.update { max-width: 280px; }
.update p { color: #71717a; font-size: 11px; }
button { background: #18181b; border-color: #3f3f46; border-radius: 999px; padding: 11px 18px; transition: background .2s, border-color .2s, color .2s; }
button:hover { background: #27272a; border-color: #0ea5e9; }
.primary { background: #0ea5e9; border-color: #0ea5e9; color: white; font-weight: 500; }
.primary:hover { background: #0284c7; border-color: #0284c7; }
input, select { background: #09090b; border-color: #3f3f46; border-radius: 12px; min-height: 46px; color: #e4e4e7; }
label { color: #a1a1aa; font-size: 12px; font-weight: 500; }
input[type=checkbox], input[type=range], .heat-controls input[type=checkbox], .heat-controls input[type=range] { accent-color: #0ea5e9; }
.coverage { border: 1px solid #0ea5e933; background: #0ea5e90d; border-radius: 12px; color: #a1a1aa; padding: 14px 18px; font-size: 12px; line-height: 1.7; margin-bottom: 24px; }
.metrics { gap: 16px; border: 0; background: none; border-radius: 0; overflow: visible; }
.metrics section, .metrics section:last-child { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 22px 24px; }
.metrics span { color: #a1a1aa; font-size: 12px; }
.metrics strong { font-family: Inter, Arial, sans-serif; font-size: 36px; font-weight: 300; line-height: 1.8; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.metrics small { color: #71717a; font-size: 11px; }
#day { font-size: clamp(22px, 2.1vw, 30px); }
.gnss-filters { display: grid; gap: 20px; padding: 24px; margin: 24px 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); align-items: start; }
.gnss-filters small { font-size: 11px; color: #71717a; }
.panel { border-radius: 16px; padding: 24px; background: var(--panel); }
.airport-panel { margin-top: 0; }
.airport-panel form { gap: 12px; }
.airport-results button { border-radius: 12px; background: #18181b; border-color: #3f3f46; }
.airport-results button:hover { background: #0ea5e91a; border-color: #0ea5e980; }
#airport-summary { color: #a1a1aa; font-size: 13px; line-height: 1.8; }
.map-workspace { border-radius: 16px; background: #09090b; margin-top: 24px; grid-template-columns: minmax(0, 1fr) 320px; }
.map-toolbar { padding: 24px; background: #18181b80; }
.map-toolbar .eyebrow { font-size: 10px; margin-bottom: 8px; }
.map-toolbar h2 { font-size: 24px; }
.tag { color: #38bdf8; border-color: #0ea5e94d; background: #0ea5e91a; border-radius: 999px; font-size: 11px; padding: 6px 12px; }
.heat-controls, .weather-controls, .heat-legend, .wx-legend { background: #09090b; border-color: var(--line); padding: 16px 20px; }
.analysis-legend { background: #09090b; }
.analysis-legend p { color: #a1a1aa; font-size: 12px; }
.heat-controls { gap: 14px; }
.heat-controls label { color: #a1a1aa; font-size: 12px; margin-bottom: 0; }
.heat-label { display: none; }
.weather-controls .wx-heading { width: 100%; color: #71717a; font-size: 10px; letter-spacing: .14em; }
.heat-scale-heading span, .heat-legend p, .heat-levels, .wx-legend { color: #a1a1aa; font-size: 12px; }
.heat-scale-heading strong { font-weight: 500; }
.heat-ticks { font-size: 11px; }
.weather-aside { background: #18181b60; }
.wx-aside-head { padding: 24px 20px; }
.wx-aside-head h2 { font-size: 20px; }
.wx-empty, .wx-empty .wx-sub, .wx-aside-foot, .wx-sub, .wx-note, .wx-kicker { color: #a1a1aa; }
.wx-empty-icon { color: #38bdf8; }
.wx-card, .wx-card.wx-jam, .wx-card.wx-adv-focus { background: #18181b; border-color: #3f3f4680; border-radius: 12px; }
.wx-grid { background: #27272a; border-color: #27272a; border-radius: 10px; }
.wx-grid>div, .wx-raw { background: #09090b; border-color: #27272a; }
.wx-grid small, .wx-adv small { color: #a1a1aa; }
.wx-temp { color: #38bdf8; }
.wx-adv { border-color: #27272a; }
.gnss-detail { margin: 24px 0; }
.detail-grid { gap: 16px; margin-top: 20px; }
.detail-grid>div { padding: 16px; background: #09090b; border: 1px solid var(--line); border-radius: 12px; }
.detail-grid strong { font-weight: 400; }
.sources { margin-top: 24px; }
.source-grid { gap: 24px; }
.source-card { border-left-color: #0ea5e94d; }
.source-card b { font-weight: 500; }
details, summary { color: #a1a1aa; }
summary { color: #e4e4e7; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-tooltip { background: #18181b; color: #f4f4f5; border-color: #3f3f46; }
.cell-popup .popup-context { background: #0ea5e91a; border-radius: 10px; }
.nav { background: #09090b; border-color: var(--line); }
.brand-symbol { background: #0ea5e91a; border-color: #0ea5e94d; border-radius: 12px; color: #38bdf8; }
@media(max-width:1100px) { .map-workspace { grid-template-columns: 1fr; } .weather-aside { border-left: 0; border-top: 1px solid var(--line); } .weather-panel { min-height: 0; } }
@media(max-width:760px) {
  .title-row { gap: 20px; padding-top: 0; }
  .update { flex-wrap: wrap; }
  .metrics { gap: 12px; }
  .metrics section, .metrics section:last-child { padding: 16px; }
  .metrics strong { font-size: 30px; }
  #day { font-size: 22px; }
  .panel, .gnss-filters { padding: 18px; }
  .gnss-filters { gap: 16px; }
  .map-toolbar { padding: 20px; }
  .heat-legend { grid-template-columns: 1fr; gap: 16px; }
}
@media(max-width:420px) { .metrics { grid-template-columns: 1fr; } .detail-grid { grid-template-columns: 1fr; } .subtitle { font-size: 14px; } }