:root {
  --bg: #0b1220;
  --bg2: #111827;
  --panel: #152033;
  --card: #1a2744;
  --surface: #0f1b2d;
  --line: rgba(255,255,255,.08);
  --text: #e5edf7;
  --muted: #9fb0c7;
  --accent: #38bdf8;
  --red: #ef4444;
  --amber: #f59e0b;
  --slate: #64748b;
  --green: #22c55e;
  --purple: #a855f7;
}
html[data-theme="dark"] {
  --bg: #0b1220;
  --bg2: #111827;
  --panel: #152033;
  --card: #1a2744;
  --surface: #0f1b2d;
  --line: rgba(255,255,255,.08);
  --text: #e5edf7;
  --muted: #9fb0c7;
  --accent: #38bdf8;
}
html[data-theme="light"] {
  --bg: #eef2f7;
  --bg2: #ffffff;
  --panel: #ffffff;
  --card: #f8fafc;
  --surface: #f1f5f9;
  --line: rgba(15,23,42,.1);
  --text: #0f172a;
  --muted: #475569;
  --accent: #2563eb;
}
html[data-theme="graphite"] {
  --bg: #111111;
  --bg2: #1f2933;
  --panel: #171717;
  --card: #242424;
  --surface: #202020;
  --line: rgba(255,255,255,.12);
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --accent: #f59e0b;
}
html[data-theme="ocean"] {
  --bg: #071826;
  --bg2: #0f2a3a;
  --panel: #0c2433;
  --card: #12384a;
  --surface: #0b3145;
  --line: rgba(125,211,252,.16);
  --text: #e0f2fe;
  --muted: #93c5fd;
  --accent: #2dd4bf;
}
html[data-theme="forest"] {
  --bg: #07140f;
  --bg2: #12231a;
  --panel: #0f1f17;
  --card: #173224;
  --surface: #12291d;
  --line: rgba(134,239,172,.14);
  --text: #ecfdf5;
  --muted: #a7f3d0;
  --accent: #84cc16;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, -apple-system, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
  overflow-x: hidden;
}
.shell { padding: 14px; }

/* ── Topbar ── */
.topbar { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:14px; }
.topbar h1 { margin:0 0 4px; font-size:26px; }
.topbar p { margin:0; color:var(--muted); max-width:800px; font-size:14px; }
.topbar-actions { display:flex; gap:8px; align-items:center; }
.topbar-link {
  border:1px solid var(--line); background:var(--panel); color:var(--text);
  padding:8px 14px; border-radius:10px; cursor:pointer; font-size:13px;
  text-decoration:none; transition:border-color .2s;
}
.topbar-link:hover { border-color:var(--accent); color:var(--accent); }
.topbar-select {
  padding:8px 10px; font-size:13px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface);
  color:var(--text); cursor:pointer; font-weight:600;
}
button {
  border:1px solid var(--line); background:var(--panel);
  color:var(--text); padding:8px 14px; border-radius:10px; cursor:pointer;
  font-size:13px; transition: border-color .2s;
}
button:hover { border-color:var(--accent); }
.auto-refresh-badge {
  background:var(--accent); color:#000; font-size:11px; font-weight:700;
  padding:4px 10px; border-radius:999px;
}
.mock-banner {
  background:rgba(245,158,11,.18); border:1px solid rgba(245,158,11,.5);
  color:#f59e0b; font-size:11px; font-weight:700; padding:5px 12px;
  border-radius:8px; letter-spacing:.5px;
}
.map-mode-btn {
  border:1px solid var(--accent); color:var(--accent);
  background:rgba(56,189,248,.08); font-weight:700;
}
.map-mode-btn.raw-mode {
  border-color:var(--amber); color:var(--amber);
  background:rgba(245,158,11,.08);
}
.compact-only { display:none; }

/* ── Settings ── */
.settings-overlay {
  position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,.34); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:flex-end;
  padding:72px 18px 18px;
}
.settings-dialog {
  width:min(430px, calc(100vw - 36px));
  max-height:calc(100vh - 92px);
  overflow:auto;
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.44);
}
.settings-header {
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:18px 20px 14px; border-bottom:1px solid var(--line);
}
.settings-header h2 { margin:0; font-size:20px; }
.settings-header p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.settings-close {
  width:34px; height:34px; padding:0; border-radius:10px;
  font-size:22px; line-height:1;
}
.settings-content { padding:18px 20px 20px; display:grid; gap:16px; }
.settings-section {
  border:1px solid var(--line); border-radius:12px;
  padding:14px; background:rgba(255,255,255,.025);
}
html[data-theme="light"] .settings-section { background:rgba(15,23,42,.025); }
.settings-section h3 {
  margin:0 0 10px; font-size:12px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.6px;
}
.settings-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
}
.settings-option {
  text-align:left; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--text);
  padding:10px 12px; min-height:46px; font-weight:700;
}
.settings-option span {
  display:block; color:var(--muted); font-size:11px; font-weight:500; margin-top:3px;
}
.settings-option.active {
  border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset;
  color:var(--accent);
}
.settings-select {
  width:100%; max-width:260px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  font-weight:700;
}
.settings-toggle-row {
  display:flex; align-items:center; gap:10px; padding:9px 0;
  border-top:1px solid var(--line);
}
.settings-toggle-row:first-child { border-top:0; padding-top:0; }
.settings-toggle-row input { accent-color:var(--accent); }
.settings-toggle-row span { font-size:13px; }

/* ── Source-type badges ── */
.stype-badge {
  display:inline-block; font-size:9px; font-weight:800; letter-spacing:.6px;
  padding:2px 6px; border-radius:4px; margin-left:5px; vertical-align:middle;
  text-transform:uppercase;
}
.stype-official    { background:rgba(56,189,248,.15); color:#38bdf8; border:1px solid rgba(56,189,248,.3); }
.stype-community   { background:rgba(249,115,22,.15); color:#f97316; border:1px solid rgba(249,115,22,.3); }
.stype-news        { background:rgba(100,116,139,.15); color:#94a3b8; border:1px solid rgba(100,116,139,.3); }
.stype-aviation    { background:rgba(56,189,248,.1);  color:#7dd3fc; border:1px solid rgba(56,189,248,.2); }
.stype-mock        { background:rgba(245,158,11,.15); color:#f59e0b; border:1px solid rgba(245,158,11,.4); }

/* ── Stale indicator ── */
.stale-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--amber); margin-right:4px; }

/* ── Source health row ── */
.source-row { margin-bottom:8px; border-bottom:1px solid var(--line); padding-bottom:7px; }
.source-row:last-child { border-bottom:none; margin-bottom:0; }
.source-meta { font-size:11px; color:var(--muted); margin-top:2px; }
.source-bar { height:3px; border-radius:2px; margin-top:4px; background:var(--line); }
.source-bar-fill { height:100%; border-radius:2px; transition:width .4s; }

/* ── Stats ── */
.stats {
  display:grid; grid-template-columns:repeat(7,minmax(100px,1fr));
  gap:10px; margin-bottom:14px;
}
.stat-card, .panel {
  background:rgba(255,255,255,0.03); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:16px; padding:12px;
}
html[data-theme="light"] .stat-card, html[data-theme="light"] .panel { background:rgba(255,255,255,0.9); }
.stat-card .label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.stat-card .value { margin-top:2px; font-size:22px; font-weight:700; }

/* ── Date filter bar ── */
.date-filter-bar {
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  flex-wrap:wrap; padding:8px 14px;
  background:rgba(255,255,255,.02); border:1px solid var(--line);
  border-radius:12px;
}
html[data-theme="light"] .date-filter-bar { background:rgba(255,255,255,.7); }
.dfb-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
.dfb-pills { display:flex; gap:5px; flex-wrap:wrap; }
.dfb-pill {
  padding:4px 13px; border-radius:999px; font-size:12px; font-weight:600;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  cursor:pointer; transition:all .15s;
}
.dfb-pill.active { background:var(--accent); color:#000; border-color:var(--accent); }
.dfb-pill:hover:not(.active) { border-color:var(--accent); color:var(--text); }
.dfb-custom { display:flex; align-items:center; gap:6px; }
.dfb-input {
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  border-radius:8px; padding:4px 8px; font-size:12px; font-family:inherit;
}
html[data-theme="light"] .dfb-input { color:var(--text); background:#fff; }
.dfb-info { font-size:12px; color:var(--accent); margin-left:auto; font-weight:600; }
.hidden { display:none !important; }

/* ── Grid ── */
.content-grid {
  display:grid; grid-template-columns:280px 1fr 340px;
  gap:14px; height:calc(100vh - 230px);
}
.sidebar { display:flex; flex-direction:column; gap:12px; overflow:auto; }
.map-col { display:flex; flex-direction:column; gap:0; }
.map-panel { flex:1; min-height:400px; position:relative; }
#map {
  width:100%; height:100%; min-height:400px;
  border-radius:16px 16px 0 0; border:1px solid var(--line);
  border-bottom:none; overflow:hidden;
}

/* Map style picker — floats over the top-right of the map. Sits above
   the Leaflet tile pane but below the marker pane so popups/tooltips
   still overlap it correctly. */
.map-style-control {
  position:absolute; top:12px; right:12px; z-index:500;
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; padding:4px;
  max-width:min(420px, calc(100% - 24px));
  background:rgba(0,0,0,0.55); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
}
[data-theme="light"] .map-style-control {
  background:rgba(255,255,255,0.85);
  border-color:rgba(0,0,0,0.08);
}
.map-style-chip {
  appearance:none; border:none; background:transparent;
  color:var(--text); font:600 11px/1 system-ui, -apple-system, sans-serif;
  letter-spacing:0.3px; padding:6px 9px; border-radius:7px;
  cursor:pointer; transition:background 120ms ease, color 120ms ease;
}
.map-style-chip:hover { background:rgba(255,255,255,0.08); }
[data-theme="light"] .map-style-chip:hover { background:rgba(0,0,0,0.06); }
.map-style-chip.active {
  background:var(--accent); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18);
}

/* ── Timeline ── */
.timeline-panel {
  background:var(--panel); border:1px solid var(--line);
  border-radius:0 0 16px 16px; padding:10px 16px 12px;
}
.timeline-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.timeline-header span { font-size:12px; color:var(--muted); font-weight:600; }
.timeline-controls { display:flex; gap:6px; }
.timeline-btn { padding:4px 10px; font-size:11px; border-radius:8px; }
#timelineSlider {
  width:100%; height:6px; -webkit-appearance:none; appearance:none;
  background:var(--line); border-radius:3px; outline:none; cursor:pointer;
}
#timelineSlider::-webkit-slider-thumb {
  -webkit-appearance:none; width:16px; height:16px;
  border-radius:50%; background:var(--accent); cursor:grab;
  box-shadow:0 0 8px rgba(56,189,248,.5);
}
.timeline-range { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:4px; }

/* ── Feed ── */
.feed, .source-summary, .source-health, .filters { display:flex; flex-direction:column; gap:8px; }
.feed-item, .source-item { padding:10px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02); cursor:pointer; transition:border-color .15s; }
.feed-item:hover { border-color:var(--accent); }
.feed-item h3 { margin:0 0 4px; font-size:14px; }
.meta { color:var(--muted); font-size:12px; line-height:1.4; }
.feed-insight-row {
  display:flex; flex-wrap:wrap; gap:4px; margin:0 0 6px;
}
.feed-insight-badge {
  display:inline-flex; align-items:center; height:18px;
  border:1px solid var(--line); border-radius:6px;
  padding:0 6px; font-size:10px; font-weight:800;
  color:var(--accent); background:rgba(56,189,248,.08);
}
.feed-insight-badge.source {
  color:var(--green); background:rgba(34,197,94,.08);
  border-color:rgba(34,197,94,.25);
}
.feed-insight-badge.update {
  color:var(--amber); background:rgba(245,158,11,.08);
  border-color:rgba(245,158,11,.25);
}
.feed-insight-badge.raw {
  color:var(--muted); background:rgba(100,116,139,.08);
}

/* ── Badges ── */
.badge {
  display:inline-block; padding:3px 8px; border-radius:999px;
  font-size:11px; margin-bottom:4px; border:1px solid transparent; font-weight:600;
}
.badge.high   { background:rgba(220,38,38,.15); color:var(--red); border-color:rgba(220,38,38,.3); }
.badge.medium { background:rgba(245,158,11,.15); color:var(--amber); border-color:rgba(245,158,11,.3); }
.badge.low    { background:rgba(100,116,139,.15); color:var(--slate); border-color:rgba(100,116,139,.3); }
.badge.cyber  { background:rgba(168,85,247,.15); color:var(--purple); border-color:rgba(168,85,247,.3); }
.filter-chip { display:flex; align-items:center; gap:8px; font-size:13px; }
.filter-chip input { accent-color:var(--accent); }

/* ── Confidence bar ── */
.conf-bar { height:4px; background:var(--line); border-radius:2px; margin-top:4px; overflow:hidden; }
.conf-bar-fill { height:100%; border-radius:2px; transition:width .3s; }

/* ── Pulse animation on high-severity markers ── */
@keyframes pulse-ring {
  0% { box-shadow:0 0 0 0 rgba(239,68,68,.6); }
  70% { box-shadow:0 0 0 10px rgba(239,68,68,0); }
  100% { box-shadow:0 0 0 0 rgba(239,68,68,0); }
}
.marker-pulse { animation: pulse-ring 2s infinite; }

/* ── Detail overlay ── */
.detail-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; z-index:9999;
  backdrop-filter:blur(4px);
}
.detail-overlay.hidden { display:none; }
.detail-card {
  background:var(--panel); border:1px solid var(--line);
  border-radius:20px; padding:28px; max-width:560px; width:90%;
  max-height:80vh; overflow-y:auto; position:relative;
}
.detail-card h2 { margin:0 0 12px; font-size:20px; }
.detail-card .close-btn {
  position:absolute; top:14px; right:16px;
  background:none; border:none; color:var(--muted);
  font-size:22px; cursor:pointer;
}
.detail-card .close-btn:hover { color:var(--text); }
.detail-card .detail-row { margin-bottom:8px; }
.detail-card .detail-label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.detail-card .detail-value { font-size:14px; margin-top:2px; }
.detail-card .tags-row { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.detail-card .tag-chip {
  background:rgba(56,189,248,.12); color:var(--accent);
  padding:2px 8px; border-radius:6px; font-size:11px; font-weight:600;
}
.detail-card .detail-details {
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:12px; padding:12px; margin-top:12px; font-size:13px;
  line-height:1.5; color:var(--muted); max-height:200px; overflow-y:auto;
}
.detail-card .detail-link {
  display:inline-block; margin-top:12px; color:var(--accent);
  text-decoration:none; font-weight:600; font-size:13px;
}
.detail-card .detail-link:hover { text-decoration:underline; }

/* ── Right-panel tabs ── */
.right-panel-wrap { display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden; }
.panel-tabs { display:flex; border-bottom:1px solid var(--line); margin-bottom:12px; }
.panel-tab {
  flex:1; padding:9px 4px; font-size:12px; font-weight:700; letter-spacing:.3px;
  background:none; border:none; border-bottom:2px solid transparent;
  color:var(--muted); cursor:pointer; transition:all .15s;
}
.panel-tab:hover { color:var(--text); }
.panel-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
#panelFeed, #panelTravel {
  padding:0 2px; flex:1; min-height:0; overflow-y:auto;
}

/* ── Travel controls ── */
.travel-controls { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
#travelContinent, #travelCountry, #travelCity {
  width:100%; padding:9px 12px; font-size:13px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  outline:none; transition:border-color .15s; box-sizing:border-box;
  cursor:pointer;
}
#travelContinent:focus, #travelCountry:focus, #travelCity:focus { border-color:var(--accent); }
#travelCountry:disabled, #travelCity:disabled { opacity:.45; cursor:not-allowed; }
.travel-row { display:flex; gap:8px; }
.travel-row select {
  flex:1; padding:7px 10px; font-size:12px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer;
}
.travel-news-toggle {
  display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); cursor:pointer;
}
.travel-news-toggle input { accent-color:var(--accent); cursor:pointer; }
.travel-assess-btn {
  padding:9px; font-size:13px; font-weight:700; border-radius:10px;
  border:1px solid var(--accent); background:rgba(56,189,248,.1); color:var(--accent);
  cursor:pointer; transition:background .15s;
}
.travel-assess-btn:hover { background:rgba(56,189,248,.2); }
.travel-assess-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ── Travel result card ── */
.travel-result { display:flex; flex-direction:column; gap:10px; }
.travel-result.hidden { display:none; }

.travel-score-row {
  display:flex; align-items:center; gap:16px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px;
}
.travel-gauge {
  flex-shrink:0; width:72px; height:72px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; position:relative;
}
.travel-gauge-inner { position:relative; z-index:1; text-align:center; line-height:1; }
.travel-gauge-sub { font-size:9px; font-weight:600; color:var(--muted); letter-spacing:.5px; margin-top:2px; }

.travel-verdict-col { flex:1; }
.travel-verdict-label {
  font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; display:inline-block; margin-bottom:6px;
}
.verdict-generally_ok    { background:rgba(34,197,94,.15); color:#22c55e; border:1px solid rgba(34,197,94,.3); }
.verdict-caution         { background:rgba(245,158,11,.15); color:#f59e0b; border:1px solid rgba(245,158,11,.3); }
.verdict-elevated_risk   { background:rgba(249,115,22,.15); color:#f97316; border:1px solid rgba(249,115,22,.3); }
.verdict-defer_nonessential_travel { background:rgba(239,68,68,.15); color:#ef4444; border:1px solid rgba(239,68,68,.3); }

.travel-sev-bar { display:flex; gap:8px; font-size:11px; color:var(--muted); margin-top:4px; }
.travel-sev-bar span { font-weight:700; }

.travel-section {
  background:rgba(255,255,255,.02); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; font-size:13px;
}
.travel-section-label { font-size:10px; font-weight:700; letter-spacing:.6px; color:var(--muted); text-transform:uppercase; margin-bottom:6px; }
.travel-section p { margin:0; line-height:1.55; color:var(--text); }
.travel-list { margin:0; padding-left:16px; }
.travel-list li { margin-bottom:4px; color:var(--text); line-height:1.4; }

.travel-news-card {
  background:rgba(56,189,248,.04); border:1px solid rgba(56,189,248,.2);
  border-radius:12px; padding:12px 14px; font-size:13px;
}
.travel-news-card .travel-section-label { color:var(--accent); }
.travel-news-headline { font-weight:700; margin-bottom:6px; font-size:13px; }
.travel-news-body { color:var(--muted); line-height:1.5; }
.travel-meta { font-size:11px; color:var(--muted); text-align:right; }

/* ── News ticker ── */
.news-ticker {
  display:flex; align-items:stretch; height:36px; margin-bottom:10px;
  background:rgba(239,68,68,.07); border:1px solid rgba(239,68,68,.22);
  border-radius:10px; overflow:hidden;
}
.news-ticker.hidden { display:none; }
.ticker-badge {
  flex-shrink:0; display:flex; align-items:center;
  padding:0 14px; background:#ef4444; color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.8px; white-space:nowrap;
}
.ticker-track-wrap {
  flex:1; overflow:hidden; position:relative; cursor:pointer;
}
.ticker-track {
  display:inline-flex; align-items:center; height:36px;
  white-space:nowrap; will-change:transform;
  animation:ticker-scroll 40s linear infinite;
}
.ticker-track:hover { animation-play-state:paused; }
@keyframes ticker-scroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.ticker-item {
  display:inline-flex; align-items:center; gap:6px;
  padding:0 22px; font-size:12px; font-weight:600;
  border-right:1px solid rgba(239,68,68,.15); cursor:pointer;
  transition:background .15s;
}
.ticker-item:hover { background:rgba(239,68,68,.1); }
.ticker-dot { font-size:14px; }
.ticker-cat {
  font-size:9px; font-weight:800; letter-spacing:.6px;
  padding:1px 6px; border-radius:4px; background:rgba(255,255,255,.08);
}
.ticker-ago { font-size:10px; color:var(--muted); margin-left:4px; }
.ticker-close {
  flex-shrink:0; background:none; border:none; border-left:1px solid rgba(239,68,68,.2);
  color:var(--muted); font-size:16px; padding:0 10px; cursor:pointer;
  border-radius:0; transition:color .15s;
}
.ticker-close:hover { color:var(--red); border-color:transparent; }

/* ── Responsive ── */
@media (max-width:1200px) {
  .content-grid { grid-template-columns:1fr; height:auto; }
  #map { min-height:400px; }
  .stats { grid-template-columns:repeat(3,1fr); }
}