:root {
  color-scheme: dark;
  --bg: #0b1119;
  --panel: #111923;
  --panel-2: #17212d;
  --line: rgba(255,255,255,.09);
  --text: #ecf2f8;
  --muted: #8fa0b2;
  --accent: #ff7a1a;
  --accent-soft: rgba(255,122,26,.16);
  --danger: #ff4d4d;
  --good: #43d17d;
  --warn: #f5b84b;
  --blue: #55b7ff;
  --sidebar-width: 360px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); }
body { overflow: hidden; }
button, input { font: inherit; }
a { color: #b7c7d8; text-decoration: none; }
a:hover { color: #fff; }

#appShell {
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas: "topbar topbar" "sidebar map";
}

.topbar {
  grid-area: topbar;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 18px;
  background: rgba(10,16,24,.98);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  z-index: 1000;
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 230px; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(255,126,29,.24), rgba(255,77,77,.12));
  border: 1px solid rgba(255,130,33,.26); border-radius: 10px; font-size: 20px;
}
.brand-title { font-weight: 800; letter-spacing: .02em; font-size: 17px; line-height: 1.05; }
.brand-subtitle { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .13em; }

.topbar-stats { display: flex; align-items: center; gap: 22px; }
.stat { display: flex; flex-direction: column; align-items: flex-end; min-width: 52px; }
.stat-value { font-size: 18px; font-weight: 800; line-height: 1; }
.stat-label { color: var(--muted); font-size: 9px; letter-spacing: .12em; margin-top: 5px; font-weight: 700; }
.live-indicator {
  display: flex; align-items: center; gap: 8px; color: #b8c8d8; font-size: 10px;
  letter-spacing: .11em; font-weight: 800; padding-left: 4px;
}
.pulse { width: 8px; height: 8px; background: var(--good); border-radius: 50%; box-shadow: 0 0 0 0 rgba(67,209,125,.55); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(67,209,125,0); } 100% { box-shadow: 0 0 0 0 rgba(67,209,125,0); } }

.sidebar {
  grid-area: sidebar;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: rgba(14,22,32,.985);
  border-right: 1px solid var(--line);
  z-index: 800;
  overflow: hidden;
}
.sidebar-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.panel-section { padding: 17px 18px; border-bottom: 1px solid var(--line); }
.search-section { padding-top: 16px; }
.section-kicker { color: #6f8295; font-weight: 800; letter-spacing: .14em; font-size: 9px; }
.section-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-heading-row.compact { margin-bottom: 10px; }
h2 { margin: 2px 0 0; font-size: 17px; letter-spacing: -.01em; }

.search-box {
  margin-top: 9px; display: grid; grid-template-columns: 24px 1fr 26px; align-items: center;
  background: #0b121b; border: 1px solid #263442; border-radius: 9px; padding: 0 8px;
}
.search-box:focus-within { border-color: rgba(85,183,255,.65); box-shadow: 0 0 0 3px rgba(85,183,255,.08); }
.search-box span { color: #708195; font-size: 19px; text-align: center; }
.search-box input { width: 100%; color: var(--text); background: transparent; border: 0; outline: 0; padding: 10px 6px; font-size: 13px; }
.search-clear { border: 0; background: transparent; color: #708195; cursor: pointer; font-size: 19px; }
.search-clear:hover { color: white; }

.layer-list { display: flex; flex-direction: column; gap: 5px; }
.layer-row {
  display: grid; grid-template-columns: 18px 22px 1fr; align-items: center; gap: 9px;
  padding: 8px 7px; border-radius: 8px; cursor: pointer;
}
.layer-row:hover { background: rgba(255,255,255,.035); }
.layer-row input { accent-color: var(--accent); width: 15px; height: 15px; }
.layer-row strong { display: block; font-size: 12px; font-weight: 700; }
.layer-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.layer-swatch { width: 17px; height: 17px; display: inline-grid; place-items: center; }
.perimeter-swatch { border: 2px solid #ff6b35; background: rgba(255,82,47,.18); border-radius: 3px; }
.history-swatch { border: 1px solid #a99cff; background: rgba(139,124,255,.12); border-radius: 3px; }
.layer-block { border-radius: 6px; }
.layer-subcontrols { display: none; align-items: center; gap: 8px; margin: -2px 8px 7px 47px; }
.layer-block.history-enabled .layer-subcontrols { display: flex; }
.layer-subcontrols label { color: var(--muted); font-size: 9px; white-space: nowrap; }
.layer-subcontrols select { flex: 1; min-width: 0; color: var(--text); background: #101a24; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; padding: 5px 7px; font-size: 10px; outline: none; }
.layer-subcontrols select:focus { border-color: rgba(169,156,255,.55); }
.incident-swatch { width: 10px; height: 10px; margin-left: 3px; border-radius: 50%; background: #ff552f; box-shadow: 0 0 0 4px rgba(255,85,47,.15); }
.aircraft-swatch::before { content: "✈"; color: #55b7ff; font-size: 16px; }
.trail-swatch { height: 2px; background: repeating-linear-gradient(90deg,#55b7ff 0 4px,transparent 4px 7px); }
.hotspot-swatch { width: 9px; height: 9px; margin-left: 4px; border-radius: 50%; background: #ffcc4d; box-shadow: 0 0 0 4px rgba(255,204,77,.12); }

.mini-button, .icon-button, .map-tool {
  color: #c9d5df; background: #111b26; border: 1px solid #2a3847; border-radius: 7px; cursor: pointer;
}
.mini-button { padding: 6px 8px; font-size: 10px; font-weight: 700; }
.mini-button:hover, .icon-button:hover, .map-tool:hover { background: #182534; color: white; }
.icon-button { width: 36px; height: 36px; }

.status-grid { margin-top: 9px; display: flex; flex-direction: column; gap: 8px; }
.status-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #bec9d4; }
.status-pill { min-width: 62px; text-align: center; padding: 4px 6px; border-radius: 999px; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.status-pill.ok { color: #79e6a4; background: rgba(67,209,125,.1); border: 1px solid rgba(67,209,125,.2); }
.status-pill.error { color: #ff8f8f; background: rgba(255,77,77,.1); border: 1px solid rgba(255,77,77,.2); }
.status-pill.pending { color: #c8a96b; background: rgba(245,184,75,.09); border: 1px solid rgba(245,184,75,.18); }
.status-pill.off { color: #91a0af; background: rgba(145,160,175,.08); border: 1px solid rgba(145,160,175,.16); }
.last-updated { margin-top: 11px; color: #718396; font-size: 10px; line-height: 1.4; }

.count-badge { min-width: 28px; height: 23px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; color: #cbd7e2; background: #1a2632; border: 1px solid #2c3b49; font-size: 10px; font-weight: 800; }
.result-list { display: flex; flex-direction: column; gap: 6px; }
.empty-state { padding: 10px 0 3px; color: #718396; font-size: 11px; line-height: 1.45; }
.result-card {
  width: 100%; text-align: left; color: inherit; background: #101923; border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; padding: 10px 11px; cursor: pointer;
}
.result-card:hover { background: #15202b; border-color: rgba(255,255,255,.13); }
.result-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.result-title { font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-chip { flex: 0 0 auto; border-radius: 999px; padding: 3px 6px; font-size: 8px; font-weight: 900; letter-spacing: .04em; }
.result-chip.fire { color: #ff9c78; background: rgba(255,107,53,.1); }
.result-chip.air { color: #82c9ff; background: rgba(85,183,255,.1); }
.result-meta { margin-top: 5px; color: #8fa0b2; font-size: 10px; line-height: 1.45; }
.result-meta strong { color: #c7d3df; font-weight: 700; }

.disclaimer p { margin: 8px 0 0; color: #7e8fa1; font-size: 10px; line-height: 1.5; }
.sidebar-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 11px 12px; color: #56697c; border-top: 1px solid var(--line); font-size: 9px; }
.sidebar-footer a { color: #708398; }

.map-wrap { grid-area: map; position: relative; min-width: 0; min-height: 0; background: #17202b; }
#map { width: 100%; height: 100%; background: #d9e1e5; }
.leaflet-control-attribution { background: rgba(255,255,255,.86) !important; color: #3d4a55 !important; font-size: 9px !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #111923; color: #e8eef4; box-shadow: 0 12px 40px rgba(0,0,0,.32); }
.leaflet-popup-content-wrapper { border: 1px solid rgba(255,255,255,.1); border-radius: 9px; }
.leaflet-popup-content { margin: 12px 13px; min-width: 210px; }
.popup-title { margin: 0 0 7px; font-size: 14px; font-weight: 850; }
.popup-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 10px; }
.popup-grid .k { color: #8092a4; }
.popup-grid .v { color: #d7e0e8; text-align: right; font-weight: 650; }
.popup-note { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.08); color: #8fa0b2; font-size: 9px; line-height: 1.4; }

.map-toolbar { position: absolute; top: 12px; right: 12px; z-index: 600; display: flex; flex-direction: column; gap: 7px; }
.map-tool { width: 38px; height: 38px; font-size: 18px; box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.map-message { position: absolute; z-index: 650; left: 50%; top: 16px; transform: translateX(-50%); max-width: min(560px, calc(100% - 110px)); padding: 9px 12px; border-radius: 8px; background: rgba(17,25,35,.94); border: 1px solid rgba(255,255,255,.12); color: #cbd6df; font-size: 11px; box-shadow: 0 8px 30px rgba(0,0,0,.24); }
.hidden { display: none !important; }
.map-legend { position: absolute; z-index: 550; right: 12px; bottom: 25px; display: flex; gap: 12px; align-items: center; padding: 7px 9px; background: rgba(15,23,33,.9); border: 1px solid rgba(255,255,255,.09); border-radius: 7px; color: #a8b5c1; font-size: 9px; box-shadow: 0 6px 24px rgba(0,0,0,.2); }
.map-legend span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend-box { width: 12px; height: 9px; display: inline-block; border-radius: 2px; }
.legend-box.perimeter { background: rgba(255,82,47,.25); border: 1px solid #ff6b35; }
.legend-box.history { background: rgba(139,124,255,.12); border: 1px solid #a99cff; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.legend-dot.incident { background: #ff552f; }
.legend-dot.hotspot { background: #ffcc4d; }
.legend-plane { color: #55b7ff; font-size: 11px; }

.fire-marker { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #ff4e2f; color: white; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 2px 10px rgba(80,20,8,.5); font-size: 10px; }
.aircraft-marker { width: 30px; height: 30px; display: grid; place-items: center; }
.aircraft-glyph { width: 24px; height: 24px; display: grid; place-items: center; color: #0e3752; background: #69c0ff; border: 2px solid white; border-radius: 50%; box-shadow: 0 3px 12px rgba(0,0,0,.38); font-size: 13px; transform-origin: center; }
.aircraft-label { position: absolute; left: 27px; top: 5px; color: #e9f5ff; background: rgba(11,25,36,.84); border: 1px solid rgba(105,192,255,.26); border-radius: 4px; padding: 2px 4px; font-size: 8px; font-weight: 800; white-space: nowrap; text-shadow: 0 1px 1px #000; }
.hotspot-marker { border-radius: 50%; background: rgba(255,193,45,.7); border: 1px solid rgba(255,111,35,.8); box-shadow: 0 0 10px rgba(255,146,37,.55); }

.mobile-only { display: none; }

@media (max-width: 820px) {
  #appShell { grid-template-columns: 1fr; grid-template-rows: 58px 1fr; grid-template-areas: "topbar" "map"; }
  .topbar { height: 58px; padding: 0 10px; gap: 8px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-title { font-size: 14px; }
  .brand-subtitle { display: none; }
  .topbar-stats { gap: 10px; margin-left: auto; }
  .stat { min-width: 32px; }
  .stat-value { font-size: 14px; }
  .stat-label { font-size: 7px; margin-top: 3px; }
  .live-indicator { display: none; }
  .mobile-only { display: block; }
  .sidebar { position: fixed; top: 58px; left: 0; bottom: 0; width: min(88vw, 370px); transform: translateX(-102%); transition: transform .22s ease; box-shadow: 18px 0 50px rgba(0,0,0,.35); }
  .sidebar.open { transform: translateX(0); }
  .map-wrap { grid-area: map; }
  .map-legend { max-width: calc(100% - 24px); overflow-x: auto; bottom: 20px; }
}

@media (max-width: 520px) {
  .topbar-stats .stat:nth-child(3) { display: none; }
  .map-message { top: 10px; max-width: calc(100% - 105px); left: 10px; transform: none; }
  .map-legend { left: 10px; right: auto; }
}