*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0c0e18; --panel: rgba(8,10,20,.92); --panel-solid: #0c0f1e;
  --border: rgba(255,255,255,.07); --accent: #00c8ff; --accent2: #ff6b35;
  --green: #00e676; --text: #d8e0f0; --text-dim: #596080; --radius: 10px;
  --sp-width: 390px;
}
body { background:var(--bg); font-family:'Segoe UI',system-ui,sans-serif; color:var(--text); overflow:hidden; }
#map { position:fixed; inset:0; z-index:0; }

/* ── Top bar ─────────────────────────────────────────────── */
#topbar {
  position:fixed; top:12px; left:50%; transform:translateX(-50%);
  z-index:1000; display:flex; align-items:center; gap:8px;
  width:min(520px, calc(100vw - 240px));
}
#search-wrap { flex:1; position:relative; }
#search-input {
  width:100%; padding:10px 16px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--panel); color:var(--text);
  font-size:14px; outline:none; backdrop-filter:blur(14px); transition:border-color .2s;
}
#search-input:focus { border-color:var(--accent); }
#search-input::placeholder { color:var(--text-dim); }
#search-results {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; backdrop-filter:blur(14px);
  display:none; z-index:10;
}
#search-results.open { display:block; }
.search-item { padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--border); }
.search-item:last-child { border-bottom:none; }
.search-item:hover { background:rgba(0,200,255,.06); }
.si-name { font-size:13px; font-weight:600; }
.si-type { font-size:11px; color:var(--text-dim); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#btn-pin {
  flex-shrink:0; padding:9px 13px; font-size:16px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); cursor:pointer; color:var(--text);
  backdrop-filter:blur(14px); transition:border-color .2s, background .2s;
}
#btn-pin.active { border-color:var(--accent2); background:rgba(255,107,53,.15); }
#pin-hint {
  position:fixed; top:56px; left:50%; transform:translateX(-50%);
  background:var(--accent2); color:#fff; padding:6px 16px;
  border-radius:99px; font-size:13px; font-weight:600;
  pointer-events:none; white-space:nowrap;
}
#pin-hint.hidden { display:none; }

/* ── Layer panel ─────────────────────────────────────────── */
#layer-panel {
  position:fixed; left:12px; top:60px; z-index:1000;
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px;
  backdrop-filter:blur(14px); min-width:168px;
  max-height:calc(100vh - 80px); overflow-y:auto;
  scrollbar-width:none;
}
#layer-panel::-webkit-scrollbar { display:none; }
.panel-title { font-size:11px; letter-spacing:2px; color:var(--text-dim);
  margin-bottom:12px; text-transform:uppercase; font-weight:700; }
.layer-section { margin-bottom:14px; }
.layer-section:last-child { margin-bottom:0; }
.section-label { font-size:9px; color:var(--text-dim); letter-spacing:1.5px;
  text-transform:uppercase; margin-bottom:7px; }
.base-btns { display:flex; gap:4px; }
.base-btn { flex:1; padding:5px 3px; font-size:11px; text-align:center;
  border:1px solid var(--border); border-radius:6px; cursor:pointer;
  color:var(--text-dim); transition:all .15s; user-select:none; }
.base-btn:hover { border-color:rgba(0,200,255,.4); color:var(--text); }
.base-btn.active { border-color:var(--accent); color:var(--accent); background:rgba(0,200,255,.08); }
.toggle-row { display:flex; align-items:center; gap:8px; padding:4px 0;
  cursor:pointer; user-select:none; }
.toggle-row input[type=checkbox] { display:none; }
.toggle-track { width:30px; height:16px; background:#1e2133; border-radius:99px;
  position:relative; flex-shrink:0; transition:background .2s; }
.toggle-row input:checked + .toggle-track { background:var(--accent); }
.toggle-thumb { position:absolute; width:12px; height:12px; background:#fff;
  border-radius:50%; top:2px; left:2px; transition:left .2s; }
.toggle-row input:checked + .toggle-track .toggle-thumb { left:16px; }
.toggle-icon { font-size:14px; }
.toggle-label { flex:1; color:var(--text); font-size:12px; }

/* ── Stats ───────────────────────────────────────────────── */
#stats-panel {
  position:fixed; right:12px; top:12px; z-index:1000;
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:8px 14px;
  backdrop-filter:blur(14px); display:flex; gap:16px;
}
.stat { text-align:center; }
.stat-val { font-size:17px; font-weight:700; color:var(--accent); display:block; }
.stat-lbl { font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; }

/* ── Zoom badge ──────────────────────────────────────────── */
#zoom-badge {
  position:fixed; top:60px; right:12px; z-index:1000;
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:6px 12px;
  backdrop-filter:blur(14px); font-size:11px; color:var(--text-dim);
}
#zoom-badge.hidden { display:none; }

/* ── Radar timeline ──────────────────────────────────────── */
#radar-panel {
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  z-index:1000; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:9px 14px;
  backdrop-filter:blur(14px); display:flex; align-items:center;
  gap:10px; min-width:300px; transition:opacity .3s;
}
#radar-panel.hidden { opacity:0; pointer-events:none; }
#radar-play { background:var(--accent); border:none; border-radius:6px;
  width:30px; height:26px; cursor:pointer; font-size:12px; color:#000; flex-shrink:0; }
#radar-slider { flex:1; accent-color:var(--accent); cursor:pointer; }
#radar-time { font-size:11px; color:var(--text-dim); white-space:nowrap; min-width:85px; text-align:right; }

/* ── Side panel ──────────────────────────────────────────── */
#side-panel {
  position:fixed; top:0; right:0; bottom:0; width:var(--sp-width);
  z-index:1001; background:var(--panel-solid); border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
}
#side-panel.open { transform:translateX(0); }
.sp-header { padding:14px 14px 10px; border-bottom:1px solid var(--border);
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-shrink:0; }
.sp-loc { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
#sp-flag { font-size:26px; flex-shrink:0; }
#sp-name { font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sp-coords { font-size:11px; color:var(--text-dim); margin-top:2px; }
.sp-actions { display:flex; gap:6px; align-items:flex-start; flex-shrink:0; }
#sp-pin-btn { padding:5px 10px; background:rgba(255,107,53,.12); border:1px solid var(--accent2);
  border-radius:6px; color:var(--accent2); font-size:12px; cursor:pointer; font-weight:600;
  white-space:nowrap; transition:background .15s; }
#sp-pin-btn:hover { background:rgba(255,107,53,.22); }
#sp-close { padding:5px 8px; background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:18px; }
.sp-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0;
  overflow-x:auto; scrollbar-width:none; }
.sp-tabs::-webkit-scrollbar { display:none; }
.sp-tab { flex-shrink:0; padding:9px 12px; font-size:11px; font-weight:600;
  color:var(--text-dim); background:none; border:none; cursor:pointer;
  border-bottom:2px solid transparent; transition:color .15s, border-color .15s; }
.sp-tab:hover { color:var(--text); }
.sp-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.sp-body { flex:1; overflow:hidden; position:relative; }
.sp-tab-content { position:absolute; inset:0; overflow-y:auto; padding:14px;
  display:none; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent; }
.sp-tab-content.active { display:block; }
.sp-tab-content::-webkit-scrollbar { width:4px; }
.sp-tab-content::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:4px; }
.sp-loading { display:flex; align-items:center; justify-content:center;
  height:120px; color:var(--text-dim); font-size:13px; }

/* ── Panel components ────────────────────────────────────── */
.sp-section-title { font-size:9px; color:var(--text-dim); text-transform:uppercase;
  letter-spacing:1.5px; margin:14px 0 8px; }
.sp-section-title:first-child { margin-top:0; }

/* Overview */
.ov-header-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.ov-localtime { font-size:14px; font-weight:700; color:var(--accent); letter-spacing:.5px; }
.ov-coords-chip { font-size:10px; color:var(--text-dim); background:rgba(255,255,255,.04);
  padding:3px 8px; border-radius:99px; border:1px solid var(--border); }
.ov-current { display:flex; align-items:center; gap:14px; margin-bottom:12px;
  padding-bottom:12px; border-bottom:1px solid var(--border); }
.ov-icon { font-size:44px; }
.ov-temp-block { flex:1; }
.ov-temp { font-size:34px; font-weight:700; line-height:1; }
.ov-feel { font-size:12px; color:var(--text-dim); margin-top:2px; }
.ov-cloud { font-size:11px; color:var(--text-dim); margin-top:2px; }
.ov-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:11px; }
.ov-cell { background:rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius:8px; padding:8px; }
.ov-cell-label { font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; }
.ov-cell-value { font-size:15px; font-weight:700; margin-top:2px; }
.ov-cell-sub { font-size:10px; color:var(--text-dim); }
.ov-sun { display:flex; gap:6px; margin-bottom:12px; }
.sun-item { flex:1; background:rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius:8px; padding:7px; text-align:center; }
.sun-item .sun-icon { font-size:16px; }
.sun-item .sun-time { font-size:12px; font-weight:700; margin-top:2px; }
.sun-item .sun-label { font-size:9px; color:var(--text-dim); }
.wiki-box { background:rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius:8px; padding:12px; }
.wiki-desc { font-size:11px; color:var(--accent); font-style:italic; margin-bottom:6px; }
.wiki-title { font-size:12px; font-weight:700; color:var(--accent); margin-bottom:5px; }
.wiki-text { font-size:12px; color:var(--text-dim); line-height:1.6; }
.wiki-link { font-size:11px; color:var(--accent); text-decoration:none; display:inline-block; margin-top:6px; }
.wiki-link:hover { text-decoration:underline; }
.wiki-thumb { width:100%; border-radius:6px; margin-bottom:7px; max-height:110px; object-fit:cover; }

/* Weather tab */
.wx-chart-wrap { height:120px; margin-bottom:4px; }
.wx-source-badge { font-size:9px; color:var(--text-dim); text-align:right; margin-bottom:10px; }
.wx-now-grid { display:flex; gap:7px; margin-bottom:12px; }
.wx-now-src { flex:1; background:rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius:8px; padding:10px; }
.wx-now-label { font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; }
.wx-now-temp { font-size:22px; font-weight:700; line-height:1; margin-bottom:4px; }
.wx-now-detail { font-size:11px; color:var(--text-dim); margin-top:3px; line-height:1.4; }
.wx-daily { display:flex; gap:3px; overflow-x:auto; padding-bottom:4px; }
.wx-day { flex:0 0 auto; min-width:44px; text-align:center; background:rgba(255,255,255,.03);
  border:1px solid var(--border); border-radius:8px; padding:7px 3px; }
.wx-day .d-name { font-size:8px; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); }
.wx-day .d-icon { font-size:15px; margin:3px 0; }
.wx-day .d-max { font-size:11px; font-weight:700; }
.wx-day .d-min { font-size:10px; color:var(--text-dim); }
.wx-day .d-detail { font-size:9px; color:var(--text-dim); margin-top:2px; }
.d-precip-bar { height:3px; background:rgba(255,255,255,.08); border-radius:2px; margin:3px 2px 1px; }
.d-precip-fill { height:100%; background:var(--accent); border-radius:2px; }
.d-precip-pct { font-size:8px; color:#64b5f6; }
.wx-met-rows { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.wx-met-row { display:flex; gap:8px; font-size:11px; padding:4px 0;
  border-bottom:1px solid var(--border); }
.wx-met-t { color:var(--accent); font-weight:700; min-width:36px; }
.wx-footer { font-size:9px; color:var(--text-dim); text-align:right; margin-top:10px; padding-top:6px; border-top:1px solid var(--border); }

/* Per-day detail */
.wx-day.wx-day-active { border-color:var(--accent); background:rgba(0,200,255,.08); }
.wx-day .d-date { font-size:8px; color:var(--text-dim); margin-bottom:1px; }
.wx-day-detail { margin-top:10px; background:rgba(255,255,255,.02); border:1px solid var(--border);
  border-radius:8px; overflow:hidden; }
.wx-day-detail.hidden { display:none; }
.wxd-header { display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; background:rgba(0,200,255,.06); border-bottom:1px solid var(--border);
  font-size:11px; font-weight:600; flex-wrap:wrap; gap:4px; }
.wxd-table { overflow-x:auto; }
.wxd-th, .wxd-row { display:grid; grid-template-columns:4.5rem repeat(7,1fr);
  font-size:10px; padding:4px 8px; gap:2px; }
.wxd-th { color:var(--text-dim); border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.03); position:sticky; top:0; }
.wxd-row { border-bottom:1px solid rgba(255,255,255,.03); }
.wxd-row:last-child { border-bottom:none; }
.wxd-row:hover { background:rgba(255,255,255,.03); }
.wxd-now { background:rgba(0,200,255,.06) !important; border-left:2px solid var(--accent); }

/* Air Quality */
.aq-gauge { display:flex; flex-direction:column; align-items:center; padding:12px 0; }
.aq-circle { width:80px; height:80px; border-radius:50%; margin:0 auto 8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:3px solid currentColor; }
.aq-val { font-size:22px; font-weight:700; }
.aq-unit { font-size:9px; color:var(--text-dim); }
.aq-label { font-size:13px; font-weight:600; margin-bottom:3px; }
.aq-uv { font-size:11px; color:var(--text-dim); }
.aq-grid2 { display:flex; flex-direction:column; gap:5px; }
.aq-row { display:flex; align-items:center; gap:7px; }
.aq-lbl { font-size:11px; color:var(--text-dim); min-width:38px; }
.aq-bar { flex:1; height:5px; background:rgba(255,255,255,.07); border-radius:3px; overflow:hidden; }
.aq-bar-fill { height:100%; border-radius:3px; transition:width .4s; }
.aq-num { font-size:11px; min-width:75px; text-align:right; }
.aq-pollen { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.aq-pollen-item { background:rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius:6px; padding:5px 9px; font-size:11px; }
.aq-pollen-name { color:var(--text-dim); font-size:9px; text-transform:capitalize; }
.aq-pollen-val { font-weight:700; }

/* Aviation tab */
.av-filter-bar { display:flex; gap:5px; margin-bottom:10px; flex-wrap:wrap; }
.av-filter { padding:4px 9px; border-radius:99px; font-size:10px; font-weight:700;
  border:1px solid var(--border); cursor:pointer; color:var(--text-dim);
  transition:all .15s; user-select:none; }
.av-filter.active { border-color:var(--accent); color:var(--accent); background:rgba(0,200,255,.08); }
.av-filter.mil.active { border-color:#e53935; color:#e53935; background:rgba(229,57,53,.08); }
.av-item { display:flex; align-items:center; gap:9px; padding:7px 0;
  border-bottom:1px solid var(--border); cursor:pointer; }
.av-item:last-child { border-bottom:none; }
.av-item:hover { background:rgba(255,255,255,.02); margin:0 -14px; padding:7px 14px; }
.av-icon-wrap { font-size:17px; flex-shrink:0; position:relative; }
.av-mil-badge { position:absolute; top:-4px; right:-4px; background:#e53935;
  color:#fff; font-size:7px; border-radius:3px; padding:1px 2px; font-weight:700; }
.av-callsign { font-size:13px; font-weight:700; }
.av-route { font-size:10px; color:var(--text-dim); margin-top:1px; }
.av-right { margin-left:auto; text-align:right; }
.av-alt { font-size:12px; font-weight:600; color:var(--accent); }
.av-spd { font-size:10px; color:var(--text-dim); }
.av-empty { padding:30px; text-align:center; color:var(--text-dim); font-size:13px; }

/* Maritime tab */
.vs-item { display:flex; align-items:center; gap:9px; padding:7px 0;
  border-bottom:1px solid var(--border); cursor:pointer; }
.vs-item:last-child { border-bottom:none; }
.vs-item:hover { background:rgba(255,255,255,.02); margin:0 -14px; padding:7px 14px; }
.vs-icon { font-size:18px; flex-shrink:0; }
.vs-name { font-size:12px; font-weight:700; }
.vs-detail { font-size:10px; color:var(--text-dim); margin-top:1px; }
.vs-right { margin-left:auto; text-align:right; }
.vs-speed { font-size:12px; font-weight:600; color:var(--green); }
.vs-dest { font-size:10px; color:var(--text-dim); }
.vs-empty { padding:30px; text-align:center; color:var(--text-dim); font-size:13px; }
.vs-nokey { background:rgba(255,107,53,.08); border:1px solid rgba(255,107,53,.3);
  border-radius:8px; padding:14px; font-size:12px; line-height:1.6; color:var(--text-dim); }
.vs-nokey a { color:var(--accent2); }

/* News */
.news-location-header { background:rgba(0,200,255,.06); border:1px solid rgba(0,200,255,.15);
  border-radius:8px; padding:10px 12px; margin-bottom:12px; }
.news-location-label { font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; }
.news-location-name { font-size:16px; font-weight:700; color:var(--text); margin:3px 0 2px; }
.news-location-note { font-size:10px; color:var(--text-dim); }
.news-item { border-bottom:1px solid var(--border); padding:10px 0; }
.news-item:last-child { border-bottom:none; }
.news-item-local { border-left:2px solid var(--accent); padding-left:8px; }
.news-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.news-source { font-size:9px; color:var(--accent); text-transform:uppercase;
  letter-spacing:1px; font-weight:700; }
.news-time { font-size:9px; color:var(--text-dim); }
.news-title { font-size:13px; font-weight:600; line-height:1.4; margin-bottom:3px; }
.news-title a { color:inherit; text-decoration:none; }
.news-title a:hover { color:var(--accent); text-decoration:underline; }
.news-desc { font-size:11px; color:var(--text-dim); line-height:1.5; }
.news-empty { padding:30px; text-align:center; color:var(--text-dim); font-size:13px; }

/* Zone popup */
.zone-popup h3 { font-size:14px; margin-bottom:8px; }
.zone-badge { display:inline-block; padding:2px 8px; border-radius:99px;
  font-size:10px; font-weight:700; margin-bottom:8px; }
.zone-popup p { font-size:12px; color:var(--text-dim); line-height:1.6; margin-bottom:6px; }
.zone-since { font-size:10px; color:var(--text-dim); }

/* Country hover tooltip */
.country-tooltip { background:rgba(8,10,20,.9); border:1px solid var(--border);
  border-radius:6px; padding:5px 10px; font-size:12px; font-weight:600;
  color:var(--text); pointer-events:none; }

/* Pin marker */
.pin-marker { font-size:28px; line-height:1; cursor:pointer;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7)); }

/* Satellite marker */
.sat-marker { font-size:13px; line-height:1; cursor:pointer;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.8)); transition:transform .2s; }
.sat-marker:hover { transform:scale(1.5); }

/* Vessel marker */
.vessel-marker { cursor:pointer; font-size:16px; }

/* Aircraft popup */
.ac-popup h3 { font-size:14px; color:#fff; margin-bottom:8px; }
.ac-row { display:flex; justify-content:space-between; font-size:11px;
  border-top:1px solid rgba(255,255,255,.07); padding:4px 0; }
.ac-row .key { color:var(--text-dim); }
.ac-row .val { color:var(--text); font-weight:600; }
.ac-route { margin:8px 0; padding:8px; background:rgba(0,200,255,.06);
  border-radius:6px; font-size:11px; }
.ac-route .route-airports { font-weight:700; font-size:12px; }
.ac-route .route-op { color:var(--text-dim); margin-top:2px; }
.ac-btn-row { display:flex; gap:6px; margin-top:8px; }
.ac-trail-btn, .ac-route-btn { flex:1; padding:6px; border:none;
  border-radius:6px; font-size:11px; cursor:pointer; font-weight:600; }
.ac-trail-btn { background:var(--accent2); color:#fff; }
.ac-route-btn { background:rgba(0,200,255,.15); color:var(--accent); border:1px solid rgba(0,200,255,.3); }
.ac-mil-label { display:inline-block; background:#c62828; color:#fff;
  padding:2px 7px; border-radius:4px; font-size:10px; font-weight:700;
  margin-bottom:6px; }

/* Station marker */
.station-marker { background:rgba(8,10,20,.88); border:1px solid var(--border);
  border-radius:8px; padding:3px 7px; font-size:11px; font-weight:700;
  white-space:nowrap; backdrop-filter:blur(8px); cursor:pointer; }

/* Leaflet overrides */
.leaflet-popup-content-wrapper {
  background:rgba(8,10,20,.95) !important; border:1px solid var(--border) !important;
  border-radius:var(--radius) !important; color:var(--text) !important;
  box-shadow:0 4px 24px rgba(0,0,0,.7) !important;
}
.leaflet-popup-tip { background:rgba(8,10,20,.95) !important; }
.leaflet-popup-close-button { color:var(--text-dim) !important; }
.leaflet-control-zoom a { background:var(--panel) !important; color:var(--text) !important; border-color:var(--border) !important; }
.leaflet-bar { border:1px solid var(--border) !important; border-radius:var(--radius) !important; overflow:hidden; }
.leaflet-control-attribution { background:rgba(0,0,0,.6) !important; color:var(--text-dim) !important; font-size:9px !important; }
.ac-marker { transition:transform .5s ease; }