/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --bg:        #080b0f;
  --panel:     #0d1117;
  --card:      #131820;
  --card-hi:   #181f2a;
  --border:    #1c2433;
  --border-hi: #2a3548;

  --txt:       #dde3ed;
  --txt2:      #7a8698;
  --txt3:      #44505f;

  --safe:      #00d084;
  --warn:      #ffb930;
  --danger:    #ff4757;
  --idp:       #7b68ee;
  --accent:    #4a9eff;
  --fire:      #ff6b35;

  --safe-bg:   rgba(0,208,132,.10);
  --warn-bg:   rgba(255,185,48,.10);
  --danger-bg: rgba(255,71,87,.10);
  --idp-bg:    rgba(123,104,238,.10);
  --accent-bg: rgba(74,158,255,.10);

  --h:  52px;
  --b:  38px;
  --lw: 296px;
  --rw: 310px;

  --font-title: 'Syne', sans-serif;
  --font-mono:  'DM Mono', monospace;
  --font-ui:    'DM Sans', sans-serif;

  --r:  6px;
  --r2: 10px;
  --trans: .18s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--txt); font-family: var(--font-ui); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }

/* ── Layout ────────────────────────────────────────────────────────────────── */
#shell {
  display: grid;
  grid-template-rows: var(--h) 1fr var(--b);
  grid-template-columns: var(--lw) 1fr var(--rw);
  height: 100vh; width: 100vw;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
#header {
  grid-column: 1 / -1;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 16px; gap: 14px; z-index: 1000;
}
#logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#logo svg { width: 28px; height: 28px; }
#logo-text { font-family: var(--font-title); font-weight: 800; font-size: 15px; letter-spacing: .02em; }
#logo-sub  { font-family: var(--font-mono); font-size: 9px; color: var(--txt2); letter-spacing: .12em; text-transform: uppercase; margin-top: 1px; }
.hdr-sep   { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }
#hdr-space { flex: 1; }

.status-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  border: 1px solid var(--border); background: var(--card);
  letter-spacing: .04em; text-transform: uppercase;
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  animation: pulse 2s infinite;
}
.dot-safe   { background: var(--safe);   box-shadow: 0 0 6px var(--safe); }
.dot-warn   { background: var(--warn);   box-shadow: 0 0 6px var(--warn); }
.dot-danger { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.dot-off    { background: var(--txt3); animation: none !important; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

#threat-badge {
  padding: 4px 12px; border-radius: 20px;
  font-family: var(--font-title); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--danger); color: var(--danger); background: var(--danger-bg);
}
#threat-badge.warn { border-color:var(--warn); color:var(--warn); background:var(--warn-bg); }
#threat-badge.safe { border-color:var(--safe); color:var(--safe); background:var(--safe-bg); }

#sync-info { font-family:var(--font-mono); font-size:10px; color:var(--txt2); text-align:right; line-height:1.5; }
#sync-info span { color: var(--txt3); }

#btn-sync {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r);
  background: var(--accent-bg); border: 1px solid rgba(74,158,255,.25);
  color: var(--accent); font-family: var(--font-mono); font-size: 11px;
  cursor: pointer; letter-spacing: .06em; text-transform: uppercase;
  transition: var(--trans);
}
#btn-sync:hover { background: rgba(74,158,255,.2); border-color: var(--accent); }
#btn-sync.syncing { opacity:.6; pointer-events:none; }
#btn-sync.syncing svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Panel base ────────────────────────────────────────────────────────────── */
#panel-left {
  grid-column: 1; grid-row: 2;
  background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden; z-index: 100;
}
#panel-right {
  grid-column: 3; grid-row: 2;
  background: var(--panel); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden; z-index: 100;
}

/* ── Map ───────────────────────────────────────────────────────────────────── */
#map-wrap { grid-column: 2; grid-row: 2; position: relative; }
#map { width: 100%; height: 100%; }
.mapboxgl-ctrl-attrib { display: none !important; }
.mapboxgl-ctrl-group { background: var(--card) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
.mapboxgl-ctrl-group button { background: var(--card) !important; }
.mapboxgl-ctrl-group button:hover { background: var(--card-hi) !important; }
.mapboxgl-ctrl-group button .mapboxgl-ctrl-icon { filter: invert(1) opacity(.65); }
.mapboxgl-ctrl-scale { background: rgba(13,17,23,.85) !important; border-color: var(--border) !important; color: var(--txt2) !important; font-family: var(--font-mono) !important; font-size: 9px !important; }

#map-controls {
  position: absolute; top: 12px; left: 12px; z-index: 500;
  display: flex; flex-direction: column; gap: 5px;
}
.layer-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: var(--r);
  background: rgba(13,17,23,.88); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px;
  cursor: pointer; user-select: none; color: var(--txt3);
  transition: var(--trans); backdrop-filter: blur(6px); letter-spacing:.04em;
}
.layer-toggle.active { color: var(--txt); border-color: var(--border-hi); }
.layer-toggle .sw { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

#map-coords {
  position: absolute; bottom: 112px; left: 12px; z-index: 500;
  padding: 4px 8px; border-radius: var(--r);
  background: rgba(13,17,23,.85); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px; color: var(--txt3);
  backdrop-filter: blur(4px);
}

#sync-overlay {
  position: absolute; top: 10px; right: 10px; z-index: 600;
  background: rgba(13,17,23,.92); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 10px 14px;
  font-family: var(--font-mono); font-size: 10px;
  display: none; flex-direction: column; gap: 5px;
  backdrop-filter: blur(8px); min-width: 180px;
}
#sync-overlay.show { display: flex; }
.sync-row { display: flex; justify-content: space-between; gap: 16px; }
.sync-src { color: var(--txt2); }
.sync-ok   { color: var(--safe); }
.sync-err  { color: var(--danger); }
.sync-pend { color: var(--warn); }

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.panel-tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.tab {
  flex: 1; padding: 10px 4px; text-align: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--txt3);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: var(--trans); margin-bottom: -1px;
}
.tab:hover { color: var(--txt2); }
.tab.active { color: var(--txt); border-bottom-color: var(--accent); }
.tab-content { display: none; flex: 1; overflow-y: auto; flex-direction: column; }
.tab-content.active { display: flex; }

/* ── Section / card ────────────────────────────────────────────────────────── */
.psec { padding: 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.stitle {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt3); margin-bottom: 8px;
}
.list-wrap { flex: 1; overflow-y: auto; padding: 10px; }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 10px 12px;
  margin-bottom: 8px; transition: var(--trans); cursor: pointer;
}
.card:last-child { margin-bottom: 0; }
.card:hover { border-color: var(--border-hi); background: var(--card-hi); }

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.card-title { font-family: var(--font-ui); font-size: 12px; font-weight: 500; line-height: 1.3; }
.badge {
  flex-shrink: 0; padding: 2px 7px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
}
.bd   { background:var(--danger-bg); color:var(--danger); border:1px solid rgba(255,71,87,.2); }
.bw   { background:var(--warn-bg);   color:var(--warn);   border:1px solid rgba(255,185,48,.2); }
.bs   { background:var(--safe-bg);   color:var(--safe);   border:1px solid rgba(0,208,132,.2); }
.bi   { background:var(--idp-bg);    color:var(--idp);    border:1px solid rgba(123,104,238,.2); }
.bf   { background:rgba(255,107,53,.1); color:var(--fire); border:1px solid rgba(255,107,53,.2); }
.ba   { background:var(--accent-bg); color:var(--accent); border:1px solid rgba(74,158,255,.2); }

.card-meta { font-family:var(--font-mono); font-size:10px; color:var(--txt2); display:flex; gap:10px; flex-wrap:wrap; line-height:1.6; }
.card-meta strong { color: var(--txt); }

.alert-card { border-left: 3px solid var(--danger); background: linear-gradient(90deg,rgba(255,71,87,.05),transparent); }
.alert-card.w { border-left-color:var(--warn); background:linear-gradient(90deg,rgba(255,185,48,.05),transparent); }
.alert-card.s { border-left-color:var(--safe); background:linear-gradient(90deg,rgba(0,208,132,.05),transparent); }
.alert-loc { font-family:var(--font-mono); font-size:10px; color:var(--accent); }

/* IDP bar */
.ibar { margin: 4px 0 8px; }
.ibar-lbl { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10px; color:var(--txt2); margin-bottom:4px; }
.ibar-track { height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.ibar-fill  { height:100%; border-radius:2px; transition:width .6s ease; }

/* corridor */
.corr-card { border-left:3px solid var(--idp); background:linear-gradient(90deg,var(--idp-bg),transparent); }

/* stats */
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px; }
.stat-card  { background:var(--card); border:1px solid var(--border); border-radius:var(--r2); padding:10px 12px; text-align:center; }
.stat-val   { font-family:var(--font-title); font-size:22px; font-weight:700; line-height:1.1; margin-bottom:3px; }
.stat-lbl   { font-family:var(--font-mono); font-size:9px; color:var(--txt3); letter-spacing:.08em; text-transform:uppercase; }

.type-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); }
.type-row:last-child { border-bottom:none; }
.type-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.type-name { flex:1; font-family:var(--font-ui); font-size:11px; }
.type-cnt  { font-family:var(--font-mono); font-size:11px; color:var(--txt2); }
.type-fat  { font-family:var(--font-mono); font-size:10px; color:var(--danger); min-width:40px; text-align:right; }

/* zones */
.zone-row {
  display:flex; align-items:center; gap:8px;
  padding:7px 12px; border-bottom:1px solid var(--border);
  transition:var(--trans); cursor:pointer;
}
.zone-row:hover { background:var(--card); }
.zdot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.zone-name { flex:1; font-family:var(--font-ui); font-size:12px; }
.ztoggle {
  width:30px; height:16px; border-radius:8px; background:var(--border);
  position:relative; cursor:pointer; transition:var(--trans); flex-shrink:0;
}
.ztoggle.on { background:var(--safe); }
.ztoggle::after {
  content:''; position:absolute; top:2px; left:2px;
  width:12px; height:12px; border-radius:50%; background:#fff;
  transition:var(--trans);
}
.ztoggle.on::after { transform:translateX(14px); }

/* detail */
#detail-empty {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  color:var(--txt3); font-family:var(--font-mono); font-size:11px;
  text-align:center; padding:20px;
}
#detail-empty svg { opacity:.2; }
.det-hdr { padding:14px 14px 10px; border-bottom:1px solid var(--border); }
.det-tbadge { display:inline-block; padding:3px 10px; border-radius:3px; font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.det-title  { font-family:var(--font-title); font-size:14px; font-weight:700; line-height:1.3; margin-bottom:4px; }
.det-loc    { font-family:var(--font-mono); font-size:10px; color:var(--accent); }
.det-body   { padding:12px 14px; flex:1; overflow-y:auto; }
.det-row    { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); }
.det-row:last-child { border-bottom:none; }
.det-key    { font-family:var(--font-mono); font-size:10px; color:var(--txt3); width:90px; flex-shrink:0; padding-top:1px; }
.det-val    { font-family:var(--font-ui); font-size:11px; line-height:1.5; flex:1; }
.det-notes  { font-family:var(--font-ui); font-size:11px; color:var(--txt2); line-height:1.6; padding:10px; background:var(--card); border-radius:var(--r); margin-top:10px; }

/* ticker */
#ticker {
  grid-column:1/-1; grid-row:3;
  background:var(--card); border-top:1px solid var(--border);
  display:flex; align-items:center; overflow:hidden;
}
#ticker-label {
  flex-shrink:0; padding:0 14px;
  font-family:var(--font-title); font-size:9px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--danger); border-right:1px solid var(--border);
  height:100%; display:flex; align-items:center;
  background:var(--danger-bg); z-index:2;
}
#ticker-track { overflow:hidden; flex:1; height:100%; }
#ticker-inner {
  display:flex; align-items:center; white-space:nowrap;
  height:100%; animation:tick 80s linear infinite;
}
#ticker-inner:hover { animation-play-state:paused; }
.titem {
  display:inline-flex; align-items:center; gap:8px;
  padding:0 28px; font-family:var(--font-mono); font-size:10px;
  color:var(--txt2); border-right:1px solid var(--border);
}
.tdot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.tsrc { color:var(--txt3); font-size:9px; }
@keyframes tick { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── Live counter bar ──────────────────────────────────────────────────────── */
#live-counter-bar {
  position: absolute; bottom: 78px; left: 0; right: 0; height: 22px; z-index: 499;
  background: rgba(8,11,15,.9); border-top: 1px solid var(--border);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; padding: 0 14px; gap: 8px;
  font-family: var(--font-mono); font-size: 9px; color: var(--txt3);
  letter-spacing: .04em;
}
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--txt3); flex-shrink: 0; vertical-align: middle;
}
.live-dot-on {
  background: var(--safe); box-shadow: 0 0 0 0 rgba(0,208,132,.6);
  animation: livebeat 1.6s ease-in-out infinite;
}
@keyframes livebeat {
  0%   { box-shadow: 0 0 0 0   rgba(0,208,132,.6); }
  70%  { box-shadow: 0 0 0 6px rgba(0,208,132,0);  }
  100% { box-shadow: 0 0 0 0   rgba(0,208,132,0);  }
}
/* ── Cluster marker legend ──────────────────────────────────────────────── */
.sw-cluster { border-radius: 50% !important; border: 1.5px dashed currentColor; background: transparent !important; }

/* ── Ticker modal ───────────────────────────────────────────────────────── */
#ticker-modal {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
#ticker-modal.hidden { display: none; }
#ticker-modal-box {
  background: var(--panel); border: 1px solid var(--border-hi);
  border-radius: var(--r2); width: 500px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px); display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.75);
  animation: slideUp .2s ease;
}
@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#ticker-modal-hdr {
  padding: 14px 16px 12px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 10px; flex-shrink: 0;
}
#ticker-modal-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
#ticker-modal-foot {
  padding: 12px 16px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; flex-shrink: 0;
}
.tm-src-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; }
.tm-title { font-family: var(--font-title); font-size: 14px; font-weight: 700; line-height: 1.3; }
.tm-explain {
  font-family: var(--font-ui); font-size: 12px; line-height: 1.75;
  color: var(--txt); padding: 12px 14px; border-radius: var(--r);
  background: rgba(74,158,255,.06); border: 1px solid rgba(74,158,255,.12);
  margin-bottom: 12px; white-space: pre-wrap; word-break: break-word;
}
.tm-explain.loading { color: var(--txt3); font-style: italic; }
.tm-ai-lbl {
  display: inline-block; padding: 1px 6px; border-radius: 2px;
  font-family: var(--font-mono); font-size: 8px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  background: rgba(74,158,255,.15); color: var(--accent);
  border: 1px solid rgba(74,158,255,.25); margin-bottom: 8px; display: block;
}
.titem { cursor: pointer; }
.titem:hover { background: rgba(255,255,255,.04); }
/* ── Sentinel panel in ticker modal ────────────────────────────────────── */
#tm-sentinel { margin-top: 14px; }
.tm-sentinel-hdr {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt3); margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.tm-sentinel-hdr::before {
  content:''; display:inline-block; width:6px; height:6px;
  border-radius:50%; background: var(--accent); flex-shrink:0;
}
.tm-sentinel-grid { display: flex; gap: 10px; align-items: flex-start; }
.tm-sentinel-img-wrap {
  width: 110px; height: 110px; flex-shrink: 0;
  border-radius: var(--r); overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.tm-sentinel-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.tm-sentinel-no-img { font-size: 9px; color: var(--txt3); text-align: center; padding: 8px; line-height: 1.5; }
.tm-sentinel-meta { flex: 1; min-width: 0; }
.tm-sentinel-badge {
  display: inline-block; padding: 1px 6px; border-radius: 2px;
  font-family: var(--font-mono); font-size: 8px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  background: rgba(74,158,255,.12); color: var(--accent);
  border: 1px solid rgba(74,158,255,.2); margin-bottom: 6px;
}
.tm-sentinel-date { font-size: 11px; color: var(--txt); margin-bottom: 3px; }
.tm-sentinel-cloud { font-size: 10px; color: var(--txt2); margin-bottom: 6px; }
.tm-sentinel-name { font-size: 9px; color: var(--txt3); margin-bottom: 8px; word-break: break-all; }
.tm-sentinel-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--accent); text-decoration: none;
  padding: 4px 8px; border: 1px solid rgba(74,158,255,.3);
  border-radius: var(--r); background: rgba(74,158,255,.06);
}
.tm-sentinel-link:hover { background: rgba(74,158,255,.14); }
.tm-sentinel-also { font-size: 9px; color: var(--txt3); margin-top: 6px; }
.tm-sentinel-loading { font-size: 10px; color: var(--txt3); font-style: italic; padding: 6px 0; }
/* ── Map style cycle button ────────────────────────────────────────────*/
.style-cycle-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r);
  background: rgba(74,158,255,.12); border: 1px solid rgba(74,158,255,.30);
  font-family: var(--font-mono); font-size: 10px; letter-spacing:.04em;
  cursor: pointer; color: var(--accent);
  transition: var(--trans); backdrop-filter: blur(6px);
}
.style-cycle-btn:hover { background: rgba(74,158,255,.22); }
/* ── Critical fire blink ──────────────────────────────────────────────────*/
@keyframes fire-blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.fire-critical { animation: fire-blink .7s infinite; }
/* ── City labels on map ──────────────────────────────────────────────────*/
.city-label {
  background: none; border: none;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,.75); text-shadow: 0 0 4px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.7);
  white-space: nowrap; pointer-events: none;
}
.city-label-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.6); margin-right: 4px; vertical-align: middle;
}
/* ── Fullscreen image modal ─────────────────────────────────────────────*/
#img-fullscreen {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.92); display: flex;
  align-items: center; justify-content: center;
  cursor: zoom-out; flex-direction: column; gap: 14px;
}
#img-fullscreen.hidden { display: none; }
#img-fullscreen img { max-width: 92vw; max-height: 82vh; border-radius: var(--r2); box-shadow: 0 20px 60px rgba(0,0,0,.8); }
.img-fs-controls {
  display: flex; gap: 10px; align-items: center;
}
.img-fs-btn {
  padding: 6px 14px; border-radius: var(--r); border: 1px solid var(--border-hi);
  background: var(--card); color: var(--txt); font-family: var(--font-mono); font-size: 10px;
  cursor: pointer; transition: var(--trans); letter-spacing: .04em;
}
.img-fs-btn:hover { background: var(--card-hi); border-color: var(--accent); }
.img-fs-btn.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.img-fs-legend {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; color: var(--txt2);
}
/* inline Sentinel in fire detail */
.fire-sentinel-wrap {
  margin: 6px 0 8px; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--border); background: var(--card); position: relative;
  cursor: zoom-in; max-height: 180px; display: flex; align-items: center; justify-content: center;
}
.fire-sentinel-wrap img { width: 100%; max-height: 180px; object-fit: cover; display: block; }
.fire-sentinel-overlay {
  position: absolute; top: 4px; right: 4px;
  display: flex; gap: 4px; flex-wrap: wrap;
}
.fire-sentinel-badge {
  padding: 2px 6px; border-radius: 3px; font-family: var(--font-mono); font-size: 8px;
  background: rgba(13,17,23,.85); color: var(--accent); border: 1px solid var(--border-hi);
  backdrop-filter: blur(4px);
}
.ir-legend { display: flex; gap: 8px; padding: 5px 8px; flex-wrap: wrap; background: rgba(13,17,23,.7); border-top: 1px solid var(--border); }
.ir-legend span { font-family: var(--font-mono); font-size: 8px; color: var(--txt2); }

/* ── Fire detail popup ───────────────────────────────────────────────────*/
.fire-section-hdr {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt3); margin: 10px 0 6px;
}
.fire-ai-box {
  background: rgba(74,158,255,.07); border: 1px solid rgba(74,158,255,.2);
  border-radius: var(--r); padding: 8px 10px;
  font-size: 11px; line-height: 1.6; color: var(--txt); margin: 4px 0 8px;
}
.fire-action-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fire-action-btn {
  font-family: var(--font-mono); font-size: 9px; padding: 4px 8px;
  border: 1px solid var(--border-hi); border-radius: var(--r);
  background: var(--card); color: var(--txt2); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.fire-action-btn:hover { background: var(--card-hi); color: var(--txt); border-color: var(--accent); }
/* relative time tooltip */
.rel-time { cursor: default; border-bottom: 1px dotted var(--border-hi); position: relative; }
.rel-time::after {
  content: attr(data-full); position: absolute; bottom: calc(100% + 5px); left: 50%;
  transform: translateX(-50%); background: var(--card); border: 1px solid var(--border-hi);
  border-radius: var(--r); padding: 3px 8px; font-size: 9px; white-space: nowrap;
  color: var(--txt2); pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1000;
}
.rel-time:hover::after { opacity: 1; }

/* ── Temporal bar ──────────────────────────────────────────────────────────── */
#temporal-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 78px; z-index: 500;
  background: rgba(8,11,15,.94); border-top: 1px solid var(--border-hi);
  backdrop-filter: blur(10px); display: flex; align-items: stretch;
}
#temp-label {
  padding: 0 14px; flex-shrink: 0; width: 96px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.tlbl-ico { font-size: 20px; line-height: 1; }
.tlbl-ttl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: var(--txt3); text-transform: uppercase; }
#temp-label-sub { font-family: var(--font-mono); font-size: 9px; color: var(--accent); }
#temporal-days { display: flex; flex: 1; overflow: hidden; min-width: 0; }
.tday {
  flex: 1; padding: 8px 10px; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; border-right: 1px solid var(--border);
  border-top: 3px solid transparent; transition: background var(--trans);
}
.tday:hover  { background: rgba(255,255,255,.03); }
.tday.act    { background: rgba(255,255,255,.055); }
.tday-head   { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; margin-bottom: 1px; }
.tday-lbl    { font-family: var(--font-title); font-size: 13px; font-weight: 700; flex-shrink: 0; }
.tday-date   { font-family: var(--font-mono); font-size: 8px; color: var(--txt3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tday-count  { font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1.1; }
.tday-frp    { font-family: var(--font-mono); font-size: 8px; color: var(--txt3); margin-top: 1px; }
.tday-bw     { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.tday-bf     { height: 100%; border-radius: 2px; transition: width .55s ease; }

/* popup */
.mapboxgl-popup-content {
  background:var(--panel)!important; border:1px solid var(--border)!important;
  border-radius:var(--r2)!important; box-shadow:0 8px 32px rgba(0,0,0,.6)!important;
  color:var(--txt)!important; font-family:var(--font-ui)!important; padding:0!important;
  min-width:200px; font-size:12px;
}
.mapboxgl-popup-tip { border-top-color:var(--border)!important; border-bottom-color:var(--border)!important; }
.mapboxgl-popup-close-button { color:var(--txt2)!important; top:4px!important; right:6px!important; font-size:16px!important; background:none!important; border:none!important; }
/* ── Map legend ───────────────────────────────────────────────────────────────────── */
#map-legend {
  position:absolute; bottom:90px; right:10px; z-index:600;
  background:rgba(8,11,15,.82); backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:var(--r2);
  padding:10px 12px; min-width:190px; pointer-events:auto;
}
#map-legend .leg-title {
  font-family:var(--font-mono); font-size:9px; letter-spacing:.12em;
  color:var(--txt3); text-transform:uppercase; margin-bottom:7px;
}
.leg-row { display:flex; align-items:center; gap:7px; margin-bottom:4px; font-size:10px; color:var(--txt2); }
.leg-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.leg-dot.blink { animation:fire-blink .7s infinite; }
.leg-sq  { width:10px; height:10px; flex-shrink:0; border-radius:2px; opacity:.7; }
.leg-arr { flex-shrink:0; font-size:12px; line-height:1; color:var(--idp); }
.leg-sep { border:none; border-top:1px solid var(--border); margin:5px 0; }
/* ── Combat zone detail panel ────────────────────────────────────── */
.det-section { margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.det-section:last-child { border-bottom:none; margin-bottom:0; }
.det-section-title {
  font-family:var(--font-mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--txt3); margin-bottom:8px;
  display:flex; align-items:center; gap:6px;
}
.det-section-title::before {
  content:''; display:inline-block; width:5px; height:5px;
  border-radius:50%; background:currentColor; flex-shrink:0;
}
.det-fire-stats { display:flex; gap:8px; margin-top:6px; }
.det-fire-stat {
  flex:1; padding:7px; background:var(--card);
  border-radius:var(--r); border:1px solid var(--border); text-align:center;
}
.det-fire-stat-val { font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--fire); line-height:1; }
.det-fire-stat-lbl { font-size:8px; color:var(--txt3); margin-top:2px; line-height:1.3; }
.det-fire-trend { margin-top:8px; font-family:var(--font-mono); font-size:10px; color:var(--txt2); }
.det-article-item { padding:6px 0; border-bottom:1px solid var(--border); }
.det-article-item:last-child { border-bottom:none; }
.det-article-title {
  font-size:11px; color:var(--txt); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.det-article-meta { font-family:var(--font-mono); font-size:8px; color:var(--txt3); margin-top:2px; }
.det-article-item a { text-decoration:none; color:inherit; }
.det-article-item:hover .det-article-title { color:var(--accent); }
.det-ai-box {
  font-family:var(--font-ui); font-size:11px; line-height:1.7; color:var(--txt);
  padding:9px 11px; border-radius:var(--r);
  background:rgba(74,158,255,.06); border:1px solid rgba(74,158,255,.12);
  white-space:pre-wrap; word-break:break-word;
}
.det-ai-box.loading { color:var(--txt3); font-style:italic; }
.det-sentinel-wrap {
  margin-top:7px; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--border); background:var(--card); position:relative;
}
.det-sentinel-img { width:100%; height:150px; object-fit:cover; display:block; opacity:0; transition:opacity .3s; }
.det-sentinel-img.loaded { opacity:1; }
.det-sentinel-toolbar {
  display:flex; gap:5px; align-items:center; padding:5px 7px;
  background:rgba(8,11,15,.75); border-top:1px solid var(--border);
}
.det-sentinel-btn {
  padding:2px 7px; border-radius:3px; font-family:var(--font-mono); font-size:8px;
  letter-spacing:.06em; cursor:pointer; border:1px solid var(--border);
  background:transparent; color:var(--txt2); transition:var(--trans);
}
.det-sentinel-btn.act { background:rgba(74,158,255,.18); border-color:var(--accent); color:var(--accent); }
.det-sentinel-btn:hover:not(.act) { background:rgba(255,255,255,.06); }
.det-sentinel-meta-line {
  flex:1; font-family:var(--font-mono); font-size:8px; color:var(--txt3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


/* ── Combat zones ─────────────────────────────────────────────────────────────── */
.combat-badge {
  display:inline-block; padding:1px 7px; border-radius:10px;
  font-size:9px; font-weight:700; letter-spacing:.08em; margin-bottom:6px;
}

/* ── Routes nationales ─────────────────────────────────────────────────────────────── */
.route-badge {
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  color:var(--txt2); background:var(--card); border-radius:var(--r);
  padding:2px 8px; display:inline-block; margin-bottom:4px;
}

/* ── Satellite badge on fires ────────────────────────────────────────────────────────── */
.sat-badge {
  display:inline-block; padding:1px 6px; border-radius:8px;
  font-size:8px; font-weight:700; letter-spacing:.06em;
  vertical-align:middle; margin-left:4px;
}
.sat-snpp   { background:rgba(74,158,255,.2);  color:#4a9eff; }
.sat-noaa20 { background:rgba(255,107,53,.2);  color:#ff6b35; }

/* ── Flight trail + route ───────────────────────────────────────────────── */
.flight-detail-route {
  display:flex; align-items:center; gap:6px; margin-bottom:8px;
  font-size:12px; font-weight:600; color:var(--accent);
  background:var(--accent-bg); border-radius:var(--r); padding:7px 10px;
}
.flight-detail-route span { color:var(--txt2); font-size:11px; font-weight:400; }
.flight-detail-eta {
  font-size:10px; color:var(--warn); background:var(--warn-bg);
  border-radius:var(--r); padding:3px 8px; display:inline-block; margin-top:2px;
}

.pi  { padding:12px 14px; }
.pt  { font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt3); margin-bottom:5px; }
.ph  { font-family:var(--font-title); font-size:13px; font-weight:700; margin-bottom:8px; line-height:1.3; }
.pr  { font-family:var(--font-mono); font-size:10px; color:var(--txt2); margin-bottom:3px; }
.pr strong { color:var(--txt); }
.pb {
  display:block; width:100%; padding:6px; margin-top:10px;
  background:var(--accent-bg); border:1px solid rgba(74,158,255,.25);
  color:var(--accent); font-family:var(--font-mono); font-size:10px;
  border-radius:var(--r); cursor:pointer; text-align:center;
  letter-spacing:.06em; text-transform:uppercase; transition:var(--trans);
}
.pb:hover { background:rgba(74,158,255,.2); }

/* misc */
.loader { display:flex; align-items:center; justify-content:center; padding:30px; color:var(--txt3); font-family:var(--font-mono); font-size:10px; gap:8px; }
.ldot { width:5px; height:5px; border-radius:50%; background:var(--accent); animation:ld 1.2s ease-in-out infinite; }
.ldot:nth-child(2){animation-delay:.2s} .ldot:nth-child(3){animation-delay:.4s}
@keyframes ld { 0%,80%,100%{opacity:.15;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }
.empty { padding:20px; text-align:center; font-family:var(--font-mono); font-size:10px; color:var(--txt3); }
.mapbtn {
  display:block; width:100%; padding:6px; margin-top:12px;
  background:var(--accent-bg); border:1px solid rgba(74,158,255,.25);
  color:var(--accent); font-family:var(--font-mono); font-size:10px;
  border-radius:var(--r); cursor:pointer; text-align:center;
  letter-spacing:.06em; text-transform:uppercase; transition:var(--trans);
}
.mapbtn:hover { background:rgba(74,158,255,.2); }

/* ── Alert detail slide-in ──────────────────────────────────────────────── */
#alert-detail {
  /* Overlay exactly the right panel — position:fixed so it escapes #map-wrap */
  position: fixed; top: var(--h); right: 0; bottom: var(--b); width: var(--rw);
  z-index: 200; background: var(--panel); border-left: 1px solid var(--border-hi);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden; box-shadow: -10px 0 40px rgba(0,0,0,.55);
}
#alert-detail.open { transform: translateX(0); }
.ad-header {
  padding: 14px 16px 12px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 10px; flex-shrink: 0;
}
.ad-close {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--border); color: var(--txt2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: var(--trans); margin-top: 2px;
}
.ad-close:hover { background: var(--card-hi); color: var(--txt); border-color: var(--border-hi); }
.ad-type-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; }
.ad-title { font-family: var(--font-title); font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.ad-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge-verified {
  padding: 2px 7px; border-radius: 3px; font-family: var(--font-mono);
  font-size: 8px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  background: rgba(0,208,132,.12); color: var(--safe); border: 1px solid rgba(0,208,132,.25);
}
.badge-press {
  padding: 2px 7px; border-radius: 3px; font-family: var(--font-mono);
  font-size: 8px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  background: rgba(255,185,48,.12); color: var(--warn); border: 1px solid rgba(255,185,48,.25);
}
.ad-body { flex: 1; overflow-y: auto; padding: 10px 14px; }
.ad-row { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.ad-row:last-child { border-bottom: none; }
.ad-key { font-family: var(--font-mono); font-size: 10px; color: var(--txt3); width: 96px; flex-shrink: 0; padding-top: 1px; line-height: 1.5; }
.ad-val { font-family: var(--font-ui); font-size: 11px; line-height: 1.5; flex: 1; word-break: break-word; }
.ad-val a { color: var(--accent); text-decoration: none; }
.ad-val a:hover { text-decoration: underline; }
.ad-actions {
  display: flex; gap: 8px; padding: 12px 14px;
  border-top: 1px solid var(--border); flex-shrink: 0; background: var(--card);
}
.ad-btn {
  flex: 1; padding: 8px 6px; border-radius: var(--r); border: 1px solid;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; text-align: center; transition: var(--trans);
}
.ad-btn-map  { background: var(--accent-bg); border-color: rgba(74,158,255,.3); color: var(--accent); }
.ad-btn-map:hover  { background: rgba(74,158,255,.2); }
.ad-btn-link { background: var(--safe-bg); border-color: rgba(0,208,132,.25); color: var(--safe); }
.ad-btn-link:hover { background: rgba(0,208,132,.15); }
.ad-btn-pdf  { background: rgba(255,185,48,.08); border-color: rgba(255,185,48,.25); color: var(--warn); }
.ad-btn-pdf:hover  { background: rgba(255,185,48,.15); }
/* translation result block */
.ad-translation {
  margin-top: 14px; padding: 12px; border-radius: var(--r);
  background: rgba(74,158,255,.06); border: 1px solid rgba(74,158,255,.18);
}
.ad-translation-lbl {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.ad-translation-lbl .ai-badge {
  padding: 1px 6px; border-radius: 2px;
  background: rgba(74,158,255,.15); color: var(--accent);
  border: 1px solid rgba(74,158,255,.25); font-size: 8px;
}
.ad-translation-text {
  font-family: var(--font-ui); font-size: 12px; line-height: 1.65;
  color: var(--txt); white-space: pre-wrap; word-break: break-word;
}
.ad-btn-translate {
  background: rgba(74,158,255,.08); border-color: rgba(74,158,255,.25); color: var(--accent);
}
.ad-btn-translate:hover { background: rgba(74,158,255,.18); }
.ad-btn-translate:disabled { opacity: .45; cursor: not-allowed; }
/* news cards in left panel */
.news-card { border-left: 3px solid var(--warn); background: linear-gradient(90deg,rgba(255,185,48,.05),transparent); }
.news-domain { font-family: var(--font-mono); font-size: 9px; color: var(--warn); margin-top: 3px; }
/* ── Presse panel — article cards ────────────────────────────────────────── */
.news-item {
  display: block; padding: 9px 11px; margin: 6px 8px;
  background: var(--card); border-radius: var(--r);
  border: 1px solid var(--border); cursor: pointer;
  transition: border-color var(--trans), background var(--trans);
}
.news-item:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05); }
.news-item-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; margin-bottom: 5px;
}
.news-item-title {
  font-family: var(--font-ui); font-size: 11px; font-weight: 500;
  color: var(--txt); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; flex: 1;
}
.news-item-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 8px;
  letter-spacing: .07em; padding: 2px 6px; border-radius: 3px;
  font-weight: 700; text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
}
.nb-okapi   { background: rgba(0,208,132,.12); color: #00d084; border: 1px solid rgba(0,208,132,.25); }
.nb-rfi     { background: rgba(74,158,255,.12); color: var(--accent); border: 1px solid rgba(74,158,255,.25); }
.nb-actcd   { background: rgba(255,150,50,.12); color: #ff9632; border: 1px solid rgba(255,150,50,.25); }
.nb-gdelt   { background: rgba(120,120,140,.12); color: #888898; border: 1px solid rgba(120,120,140,.2); }
.nb-other   { background: rgba(255,185,48,.10); color: var(--warn); border: 1px solid rgba(255,185,48,.2); }
.news-item-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
}
.news-item-domain { font-family: var(--font-mono); font-size: 8px; color: var(--txt3); }
.news-item-time   { font-family: var(--font-mono); font-size: 8px; color: var(--txt3); }
#news-load-more {
  display: none; width: calc(100% - 24px); margin: 4px 12px 12px;
  padding: 7px; background: rgba(255,255,255,.05); border: 1px solid var(--border);
  border-radius: var(--r1); color: var(--txt2); font-family: var(--font-ui);
  font-size: 11px; cursor: pointer; transition: background var(--trans);
}
#news-load-more:hover { background: rgba(255,255,255,.09); }
.ticker-skeleton {
  display: inline-flex; align-items: center; padding: 0 18px;
  height: 32px; color: var(--txt3); font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .1em;
  animation: ticker-pulse 1.4s ease-in-out infinite;
}
@keyframes ticker-pulse { 0%,100%{opacity:.3} 50%{opacity:.8} }
.news-empty {
  padding: 28px 16px; text-align: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--txt3); line-height: 1.8;
}

/* inline source trust badges */
.src-badge { display: inline-block; padding: 1px 5px; border-radius: 2px; font-family: var(--font-mono); font-size: 8px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.src-verified { background: rgba(0,208,132,.10); color: var(--safe); border: 1px solid rgba(0,208,132,.2); }
.src-press    { background: rgba(255,185,48,.10); color: var(--warn); border: 1px solid rgba(255,185,48,.2); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE  (< 768 px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Layout: map full-screen, panels hidden by default ── */
  #shell {
    grid-template-columns: 1fr;
    grid-template-rows: 44px 1fr 36px;
  }
  #panel-left, #panel-right {
    /* Become full-screen slide-over drawers */
    position: fixed;
    top: 44px; bottom: 36px;
    width: min(320px, 92vw);
    z-index: 800;
    transform: translateX(-110%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    border: none;
    box-shadow: 4px 0 32px rgba(0,0,0,.7);
    /* keep grid-row/col intact but override placement */
    grid-column: unset !important;
    grid-row: unset !important;
  }
  #panel-left  { left: 0; }
  #panel-right { right: 0; left: auto; transform: translateX(110%); }
  #panel-left.mob-open  { transform: translateX(0); }
  #panel-right.mob-open { transform: translateX(0); }

  /* Backdrop for open panel */
  #mob-backdrop {
    display: none;
    position: fixed; inset: 0; z-index: 799;
    background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  }
  #mob-backdrop.show { display: block; }

  /* Map column: span full width */
  #map-wrap { grid-column: 1; grid-row: 2; }

  /* ── Header compacted ── */
  #header { padding: 0 10px; gap: 8px; }
  #logo-sub { display: none; }
  #logo-text { font-size: 13px; }
  #hdr-space { display: none; }
  #sync-info { display: none; }
  .hdr-sep { display: none; }
  .status-pill { padding: 3px 7px; font-size: 9px; gap: 4px; }
  .status-pill span { display: none; }          /* show only dots */
  #threat-badge { font-size: 10px; padding: 3px 8px; }
  #btn-sync { padding: 5px 10px; font-size: 10px; }
  #btn-sync span { display: none; }

  /* ── Floating panel buttons ── */
  .mob-fab {
    position: fixed;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--card); border: 1px solid var(--border-hi);
    color: var(--txt); font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 700;
    box-shadow: 0 4px 18px rgba(0,0,0,.55);
    transition: background var(--trans), transform var(--trans);
    top: 56px;
  }
  .mob-fab:active { transform: scale(.93); }
  #mob-fab-left  { left: 10px; }
  #mob-fab-right { right: 10px; }
  .mob-fab.panel-open { background: var(--accent-bg); border-color: var(--accent); }

  /* ── Layer toggles: 2-column grid ── */
  #map-controls {
    top: auto; bottom: 116px; left: 50%;
    transform: translateX(-50%);
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4px; width: calc(100vw - 20px); max-width: 340px;
  }
  .layer-toggle {
    font-size: 9px; padding: 5px 8px; justify-content: center;
    text-align: center; backdrop-filter: blur(8px);
  }

  /* ── Alert detail: full width ── */
  #alert-detail {
    top: 44px; bottom: 36px;
    width: 100vw; left: 0; right: 0;
  }
  .ad-close {
    width: 34px; height: 34px; font-size: 16px;
    border: 1.5px solid var(--border-hi);
  }
  .ad-title { font-size: 13px; }

  /* ── Temporal bar: compact (height 50px, hide labels) ── */
  #temporal-bar { height: 50px; }
  #temp-label { width: 44px; padding: 0 6px; }
  .tlbl-ttl, #temp-label-sub { display: none; }
  .tlbl-ico { font-size: 18px; }
  .tday { padding: 6px 4px; }
  .tday-date { display: none; }
  .tday-lbl  { font-size: 11px; }
  .tday-frp  { display: none; }
  .tday-count { font-size: 11px; }
  .tday-bw   { margin-top: 2px; }

  /* ── Live counter bar ── */
  #live-counter-bar { bottom: 50px; font-size: 9px; padding: 0 8px; }

  /* ── Mapbox popup: full-width on mobile ── */
  .mapboxgl-popup { max-width: calc(100vw - 20px) !important; }
  .mapboxgl-popup-content { min-width: unset; width: calc(100vw - 24px); max-width: 360px; }

  /* ── Ticker compact ── */
  #ticker { height: 36px; }
  .titem  { padding: 0 14px; font-size: 9px; gap: 6px; }
  .tsrc   { display: none; }
  #ticker-label { padding: 0 8px; font-size: 8px; letter-spacing: .08em; }

  /* ── map-coords hidden on mobile ── */
  #map-coords { display: none; }

  /* ── Ticker modal: full width ── */
  #ticker-modal-box { width: 100vw; max-width: 100vw; border-radius: var(--r2) var(--r2) 0 0; }
  #ticker-modal { align-items: flex-end; padding-bottom: 0; }

  /* ── Style cycle button: smaller ── */
  .style-cycle-btn { font-size: 9px; padding: 4px 8px; }
}

/* print styles */
@media print {
  body { background: #fff !important; color: #111 !important; overflow: auto !important; }
  #shell { display: block !important; height: auto !important; }
  #header, #panel-left, #panel-right, #map-wrap > #map,
  #map-controls, #sync-overlay, #map-coords, #temporal-bar, #ticker { display: none !important; }
  #map-wrap { display: block !important; position: static !important; grid-column: unset !important; }
  #alert-detail {
    position: static !important; transform: none !important; width: 100% !important;
    width: 100% !important; box-shadow: none !important;
    border: none !important; display: block !important;
    color: #111 !important; background: #fff !important;
  }
  .ad-actions, .ad-close { display: none !important; }
  .ad-row { border-bottom: 1px solid #ddd !important; }
  .ad-key { color: #666 !important; }
  .ad-val a { color: #0066cc !important; }
  .badge-verified, .badge-press, .badge, .bd, .bw, .bs, .bf, .ba { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}