/* ── Reset ── */
* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#0f172a; color:#fff; height:100dvh;
  display:flex; flex-direction:column; overflow:hidden;
}

/* ── Header ── */
header {
  display:flex; align-items:center; gap:6px;
  padding: env(safe-area-inset-top, 0px) 12px 8px;
  padding-top: max(8px, env(safe-area-inset-top, 8px));
  background:rgba(15,23,42,0.95);
  border-bottom:1px solid #1e293b;
  flex-shrink:0; flex-wrap:nowrap;
  backdrop-filter: blur(8px);
  z-index: 200;
}
.logo { font-size:1rem; font-weight:800; color:#4ade80; white-space:nowrap; flex:1; }

/* ── Map: takes all remaining space ── */
#map { flex:1; min-height:0; width:100%; }

/* ── Floating overlays base offset: below header ── */
/* header height ~52px + safe-area */
:root { --hdr: 52px; }

/* ── Offline banner (fixed, overlays map) ── */
#offlineBanner {
  display:none;
  position:fixed;
  top: calc(var(--hdr) + env(safe-area-inset-top, 0px));
  left:0; right:0;
  background:#7c2d12; color:#fed7aa;
  text-align:center; font-size:.75rem; font-weight:600;
  padding:6px 12px;
  z-index: 135;
}
#offlineBanner.show-offline { display:block; }

/* ── SW update banner ── */
#updateBanner {
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  background:#1e3a5f; color:#e2e8f0;
  text-align:center; font-size:.85rem; font-weight:600;
  padding:10px 16px;
  z-index:2999;
  direction:rtl;
  gap:12px;
  align-items:center;
  justify-content:center;
}
#updateBanner.show { display:flex; }
#updateBanner button {
  background:#60a5fa; color:#0f172a;
  border:none; border-radius:6px;
  padding:6px 14px; font-weight:700; font-size:.85rem;
  cursor:pointer;
}
#updateBanner button:active { opacity:.7; }

/* ── PWA install banner ── */
#installBanner {
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  background:#1a3a2a; color:#bbf7d0;
  font-size:.85rem; font-weight:600;
  padding:10px 16px;
  z-index:2998;
  direction:rtl;
  gap:10px;
  align-items:center;
  justify-content:center;
}
#installBanner.show { display:flex; }
#installBanner button {
  border:none; border-radius:6px;
  padding:6px 14px; font-weight:700; font-size:.85rem;
  cursor:pointer;
}
#installBanner #btnInstall { background:#4ade80; color:#0f172a; }
#installBanner #btnInstallDismiss { background:transparent; color:#86efac; font-size:1rem; padding:4px 8px; }
#installBanner button:active { opacity:.7; }

/* ── iOS install banner ── */
#iosInstallBanner {
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  background:#1a3a2a;
  color:#bbf7d0;
  font-size:.85rem;
  padding:18px 20px 22px;
  z-index:2998;
  direction:rtl;
  border-top:2px solid #4ade80;
  border-radius:16px 16px 0 0;
  box-shadow:0 -4px 24px rgba(0,0,0,.4);
  animation:iosSlideUp .35s ease-out;
}
@keyframes iosSlideUp {
  from { transform:translateY(100%); }
  to   { transform:translateY(0); }
}
#iosInstallBanner.show { display:block; }
#btnIosDismiss {
  position:absolute; top:10px; left:12px;
  background:transparent; border:none;
  color:#86efac; font-size:1.2rem; cursor:pointer;
  padding:4px 8px;
}
#btnIosDismiss:active { opacity:.7; }
.ios-install-title {
  font-size:1rem; font-weight:700;
  margin-bottom:12px;
  color:#4ade80;
}
.ios-install-steps {
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:12px;
}
.ios-step {
  display:flex; align-items:center; gap:10px;
}
.ios-step-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; min-width:24px;
  background:#4ade80; color:#0f172a;
  border-radius:50%; font-weight:800; font-size:.8rem;
}
.ios-step strong { color:#fff; }
.ios-install-note {
  font-size:.75rem; color:#86efac; opacity:.8;
  text-align:center; margin-top:4px;
}

/* ── Search bar (fixed, overlays map) ── */
.searchbar {
  position:fixed;
  top: calc(var(--hdr) + env(safe-area-inset-top, 0px));
  left:0; right:0;
  display:flex; align-items:center; gap:6px;
  padding:6px 10px;
  background:rgba(15,23,42,0.97);
  border-bottom:1px solid #1e293b;
  z-index: 140;
  backdrop-filter: blur(8px);
}
body.is-offline .searchbar { top: calc(var(--hdr) + 28px + env(safe-area-inset-top, 0px)); }
.searchbar input {
  flex:1; background:#1e293b; border:1px solid #334155; border-radius:8px;
  color:#e2e8f0; padding:6px 10px; font-size:.82rem; outline:none;
  direction:rtl;
}
.searchbar input::placeholder { color:#475569; }
.searchbar button {
  background:#1e293b; color:#94a3b8; border:1px solid #334155;
  padding:6px 10px; border-radius:8px; font-size:.82rem;
}
#searchResults {
  position:absolute; top:100%; right:10px; left:10px; z-index:2000;
  background:#1e293b; border:1px solid #334155; border-radius:10px;
  max-height:200px; overflow-y:auto; display:none;
}
.search-result {
  padding:9px 12px; font-size:.78rem; color:#e2e8f0; cursor:pointer;
  border-bottom:1px solid #334155; direction:rtl; text-align:right;
}
.search-result:last-child { border-bottom:none; }
.search-result:hover { background:#334155; }

/* ── Live GPS HUD (fixed floating pill) ── */
.gps-hud {
  position:fixed;
  top: calc(var(--hdr) + env(safe-area-inset-top, 0px) + 8px);
  left:50%; transform:translateX(-50%);
  z-index: 120;
  padding:5px 14px;
  border-radius:20px;
  font-size:.74rem; font-weight:600;
  text-align:center; pointer-events:none;
  background:rgba(10,22,40,0.88);
  color:#64748b;
  border:1px solid rgba(30,41,59,0.8);
  backdrop-filter: blur(6px);
  white-space:nowrap;
  max-width:calc(100vw - 32px);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition:background .3s, color .3s, border-color .3s;
}
.gps-hud.safe   { background:rgba(5,46,22,0.92); color:#4ade80; border-color:rgba(22,101,52,0.8); }
.gps-hud.unsafe { background:rgba(69,10,10,0.92); color:#fca5a5; border-color:rgba(153,27,27,0.8); }
.hud-nav-btn {
  pointer-events:all; margin-right:8px; padding:2px 10px;
  background:#1e40af; color:#bfdbfe; border:none; border-radius:6px;
  font-size:.72rem; font-weight:700; cursor:pointer; vertical-align:middle;
}

/* ── Buttons ── */
button {
  border:none; border-radius:8px; padding:7px 10px; font-size:0.77rem;
  font-weight:600; cursor:pointer; transition:all .15s;
  white-space:nowrap; touch-action:manipulation; line-height:1.2;
}
button:active { opacity:.7; transform:scale(.96); }

.btn-green        { background:#4ade80; color:#111; }
.btn-green.on     { background:#f97316; color:#fff; }
.btn-purple       { background:#a78bfa; color:#111; }
.btn-purple.on    { background:#7c3aed; color:#fff; }
.btn-icon         { background:#1e293b; color:#94a3b8; border:1px solid #334155; padding:7px 9px; }
.btn-icon.on      { background:#334155; color:#e2e8f0; border-color:#60a5fa; }
.btn-zone         { background:#1e40af; color:#bfdbfe; }
.btn-zone.off     { background:#1e293b; color:#475569; border:1px solid #334155; }

.scenario-group { display:flex; gap:4px; }
.btn-sc         { background:#1e293b; color:#94a3b8; border:1.5px solid #334155; font-size:0.75rem; }
.btn-sc.on      { border-color:#facc15; color:#facc15; background:#1c1400; }

/* ── Floating Action Buttons ── */
#fabContainer {
  position:fixed;
  bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  z-index: 500;
  display:flex; flex-direction:column; gap:10px; align-items:center;
  transition: bottom 0.3s ease;
}
/* When route bar is visible, lift FABs above it */
.rbar.show + #fabContainer {
  bottom: calc(130px + env(safe-area-inset-bottom, 0px));
}

.fab {
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  padding:0; font-size:1.1rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  border:none; cursor:pointer;
  transition: all .15s;
}
.fab:active { transform:scale(.9); opacity:.8; }

.fab-shelter  { background:#4ade80; color:#111; }
.fab-shelter.on { background:#f97316; color:#fff; }
.fab-route    { background:#a78bfa; color:#111; }
.fab-route.on { background:#7c3aed; color:#fff; }
.fab-gps      { background:#1e293b; color:#94a3b8; border:1.5px solid #334155; }
.fab-gps.on   { background:#1e3a5f; color:#60a5fa; border-color:#60a5fa; }
.fab-autoroute { background:#ef4444; color:#fff; }
.fab-alert { background:#f59e0b; color:#111; }
.fab-alert:active { background:#d97706; }
.fab-lock { background:#1e293b; color:#94a3b8; border:1.5px solid #334155; }
.fab-lock.locked { background:#ef4444; color:#fff; border-color:#ef4444; animation: lock-pulse 1.5s infinite; }
@keyframes lock-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); }
  50%       { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}

/* Alias: JS toggles .on on #btnShelter and #btnRoute via existing class logic */
#btnShelter.on { background:#f97316; color:#fff; }
#btnRoute.on   { background:#7c3aed; color:#fff; }
#btnGPS.on     { background:#1e3a5f; color:#60a5fa; border-color:#60a5fa; }

/* ── Route bar (fixed floating pill) ── */
.rbar {
  display:none;
  position:fixed;
  bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  left:50%; transform:translateX(-50%);
  z-index: 490;
  flex-direction:column; gap:6px;
  padding:10px 14px;
  background:rgba(22,10,45,0.95);
  border:1px solid #4c1d95;
  border-radius:18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
  max-width:calc(100vw - 100px);
  min-width:260px;
}
.rbar.show { display:flex; }
.rstat     { font-size:0.77rem; color:#c4b5fd; text-align:center; }
.rstat b   { color:#e9d5ff; }
.ok        { color:#4ade80; font-weight:700; }
.bad       { color:#f87171; font-weight:700; }
.rbtns     { display:flex; gap:5px; flex-wrap:wrap; justify-content:center; }

#btnUndo  { background:#374151; color:#fff; }
#btnClear { background:#ef4444; color:#fff; }
#btnCheck { background:#facc15; color:#111; font-weight:700; }
#btnGPX   { background:#a78bfa; color:#111; font-weight:700; }
#btnShare { background:#0ea5e9; color:#fff; font-weight:700; padding:7px 10px; }
#btnWhatsApp { background:#25D366; color:#fff; font-weight:700; }
#btnFacebook { background:#1877F2; color:#fff; font-weight:700; }

/* ── Info bar (fixed, slim bottom strip) ── */
.ibar {
  position:fixed;
  bottom:0; left:0; right:0;
  padding: 4px 12px;
  padding-bottom: max(4px, env(safe-area-inset-bottom, 4px));
  background:rgba(15,23,42,0.9);
  border-top:1px solid #1e293b;
  font-size:0.72rem; color:#64748b;
  display:flex; justify-content:space-between;
  z-index: 100;
  backdrop-filter: blur(4px);
}
.ibar b { color:#4ade80; }

/* ── Mode hints ── */
.mhint {
  position:fixed; bottom:calc(190px + env(safe-area-inset-bottom, 0px));
  left:50%; transform:translateX(-50%);
  padding:7px 16px; border-radius:20px; font-size:.78rem; font-weight:600;
  z-index:1000; pointer-events:none; white-space:nowrap; display:none;
}
.mhint.show { display:block; }
#hS { background:#f97316; color:#fff; }
#hR { background:#7c3aed; color:#fff; }

/* ── Side menu ── */
#sideMenu {
  position:fixed; inset:0;
  z-index: 2500;
  background:rgba(0,0,0,0);
  visibility:hidden;
  transition: background 0.25s ease, visibility 0.25s;
}
#sideMenu.open {
  background:rgba(0,0,0,0.55);
  visibility:visible;
}
#sideMenuPanel {
  position:absolute; top:0; right:0;
  height:100%; width:240px;
  background:#1e293b;
  padding: max(16px, env(safe-area-inset-top, 16px)) 12px 20px;
  display:flex; flex-direction:column; gap:4px;
  transform:translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow-y:auto;
  box-shadow: -4px 0 24px rgba(0,0,0,.5);
}
#sideMenu.open #sideMenuPanel {
  transform:translateX(0);
}
.side-menu-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 4px 12px;
  border-bottom:1px solid #334155;
  margin-bottom:6px;
  direction:rtl;
}
.side-menu-title {
  font-size:1rem; font-weight:700; color:#e2e8f0;
}
#btnCloseSideMenu {
  background:transparent; color:#64748b; border:none;
  font-size:1.1rem; padding:4px 8px; border-radius:6px;
}
#btnCloseSideMenu:hover { color:#e2e8f0; background:#334155; }

#sideMenuPanel .side-menu-item {
  width:100%; background:transparent; color:#cbd5e1;
  display:flex; align-items:center; gap:12px;
  padding:12px 10px; border-radius:10px;
  font-size:0.88rem; font-weight:500;
  text-align:right; direction:rtl;
  border:none; transition:background .15s;
}
#sideMenuPanel .side-menu-item i { width:18px; text-align:center; color:#64748b; }
#sideMenuPanel .side-menu-item:hover,
#sideMenuPanel .side-menu-item:active { background:#334155; }
#sideMenuPanel .side-menu-item.on { color:#60a5fa; background:rgba(59,130,246,.1); }
#sideMenuPanel .side-menu-item.on i { color:#60a5fa; }
#sideMenuPanel .side-menu-item.off { color:#475569; }

/* ── Panels ── */
.ov {
  position:fixed; inset:0; background:rgba(0,0,0,.72);
  z-index:3000; display:flex; align-items:center; justify-content:center; padding:14px;
  opacity:0; visibility:hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.ov.open { opacity:1; visibility:visible; }
.panel {
  background:#1e293b; border-radius:16px; padding:20px; width:340px;
  max-width:100%; display:flex; flex-direction:column; gap:13px;
  max-height:92dvh; overflow-y:auto;
  transform: translateY(20px);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ov.open .panel { transform: translateY(0); }
.panel h2 { font-size:.94rem; color:#e2e8f0; }
.field    { display:flex; flex-direction:column; gap:5px; }
.field label { font-size:.77rem; color:#94a3b8; }
input[type=range] { width:100%; accent-color:#4ade80; }
.vd { font-size:.9rem;  color:#4ade80; font-weight:700; }
.fn { font-size:.71rem; color:#64748b; line-height:1.4; }
.emergency-input {
  background:#1e293b; color:#e2e8f0; border:1px solid #334155;
  border-radius:6px; padding:8px 10px; font-size:.82rem;
  direction:ltr; text-align:left; margin-top:2px;
}
.emergency-input::placeholder { color:#475569; }
.rcalc { background:#0f172a; border-radius:8px; padding:10px; text-align:center; font-size:.82rem; color:#94a3b8; }
.rcalc b { color:#facc15; }
.pa { display:flex; gap:8px; justify-content:flex-end; }
.btn-save   { background:#4ade80; color:#111; font-weight:700; }
.btn-cancel { background:#334155; color:#fff; }

/* ── Pace presets ── */
.pace-wrap { display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.pp {
  background:#0f172a; border:1.5px solid #334155; color:#94a3b8;
  padding:5px 8px; font-size:0.7rem; border-radius:8px; cursor:pointer;
  text-align:center; line-height:1.35; min-width:56px;
}
.pp:hover { border-color:#4ade80; color:#4ade80; }
.pp.sel   { background:#4ade80; color:#111; border-color:#4ade80; font-weight:700; }

/* ── Export ── */
.platform    { background:#0f172a; border-radius:10px; padding:12px; }
.platform h3 { font-size:.84rem; color:#e2e8f0; margin-bottom:6px; }
.platform ol { padding-left:18px; font-size:.74rem; color:#94a3b8; line-height:1.7; }
.btn-dl {
  background:#a78bfa; color:#111; font-weight:700;
  width:100%; padding:10px; font-size:.87rem; border-radius:10px;
}

/* ── Leaflet popup overrides ── */
.leaflet-popup-content-wrapper {
  background:#1e293b; color:#e2e8f0; border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,.55);
}
.leaflet-popup-tip     { background:#1e293b; }
.leaflet-popup-content { margin:10px 14px; }
.ppbtn {
  background:#ef4444; color:#fff; border:none; border-radius:6px;
  padding:4px 10px; font-size:.74rem; cursor:pointer; margin-top:6px;
}

/* ── Shelter list item ── */
.shelter-item {
  background:#0f172a; border-radius:10px; padding:10px 12px;
  display:flex; align-items:center; gap:10px; margin-bottom:6px; cursor:pointer;
}
.shelter-item:active { opacity:.75; }
.shelter-item-info { flex:1; }
.shelter-item-name { font-size:.82rem; color:#e2e8f0; }
.shelter-item-dist { font-size:.72rem; margin-top:2px; }
.shelter-item-dist.safe-dist   { color:#4ade80; }
.shelter-item-dist.unsafe-dist { color:#f87171; }
.shelter-item-nav {
  background:#1e40af; color:#bfdbfe; border:none; border-radius:6px;
  padding:5px 9px; font-size:.72rem; font-weight:700; cursor:pointer;
}

/* ── Route slot ── */
.route-slot {
  background:#0f172a; border-radius:10px; padding:10px 12px;
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
}
.route-slot-name { flex:1; font-size:.82rem; color:#e2e8f0; }
.route-slot-meta { font-size:.7rem; color:#64748b; }
.route-slot-empty { font-size:.78rem; color:#334155; font-style:italic; }
.btn-rt-load { background:#4ade80; color:#111; font-size:.72rem; padding:5px 9px; }
.btn-rt-del  { background:#ef4444; color:#fff;  font-size:.72rem; padding:5px 9px; }

/* ── Toggle switch ── */
.toggle-switch { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-track {
  position:absolute; inset:0; background:#334155; border-radius:24px; cursor:pointer;
  transition:background .2s;
}
.toggle-track::after {
  content:''; position:absolute; width:18px; height:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:transform .2s;
}
.toggle-switch input:checked + .toggle-track { background:#4ade80; }
.toggle-switch input:checked + .toggle-track::after { transform:translateX(20px); }

/* ── About tabs ── */
.about-tabs {
  display:flex; gap:6px; border-bottom:1px solid #334155; padding-bottom:10px;
}
.about-tab {
  flex:1; background:#0f172a; border:1.5px solid #334155; color:#64748b;
  border-radius:8px; padding:7px; font-size:.78rem; cursor:pointer;
  transition:all .15s;
}
.about-tab.active { background:#1e40af; border-color:#3b82f6; color:#bfdbfe; font-weight:700; }

.changelog-list {
  list-style:none; padding:0; display:flex; flex-direction:column; gap:7px;
}
.changelog-list li { font-size:.75rem; color:#94a3b8; line-height:1.5; display:flex; align-items:baseline; gap:6px; }
.changelog-list li b { color:#e2e8f0; }
.cv {
  font-size:.66rem; font-weight:700; color:#64748b; background:#0f172a;
  border:1px solid #334155; border-radius:4px; padding:1px 5px;
  white-space:nowrap; flex-shrink:0;
}

/* ── About / Disclaimer panel ── */
.panel-about {
  max-width:360px; gap:14px; direction:rtl; text-align:right;
}
.about-logo {
  font-size:1.4rem; font-weight:800; color:#4ade80; text-align:center;
}
.about-tag {
  font-size:.72rem; color:#64748b; text-align:center; margin-top:-8px;
}
.about-block {
  background:#0f172a; border-radius:10px; padding:14px; display:flex;
  flex-direction:column; gap:8px;
}
.about-block-title {
  font-size:.8rem; font-weight:700; color:#facc15; margin-bottom:2px;
}
.about-block p {
  font-size:.74rem; color:#94a3b8; line-height:1.55; margin:0;
}
.about-block p b { color:#e2e8f0; }
.btn-agree {
  background:#4ade80; color:#111; font-weight:800; font-size:.9rem;
  padding:12px; border-radius:12px; width:100%; border:none; cursor:pointer;
  transition:all .15s;
}
.btn-agree:active { opacity:.75; transform:scale(.97); }

/* ── Invite button ── */
.btn-invite {
  background: #0ea5e9; color: #fff; font-weight: 800; font-size: .88rem;
  padding: 11px; border-radius: 12px; width: 100%; border: none; cursor: pointer;
  transition: all .15s;
}
.btn-invite:active { opacity: .75; transform: scale(.97); }

/* ── Light mode ── */
body.light { background: #f8fafc; color: #1e293b; }
body.light header { background: rgba(255,255,255,0.95); border-color: #e2e8f0; }
body.light .btn-icon { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
body.light .btn-icon.on { background: #e2e8f0; color: #1e293b; border-color: #93c5fd; }
body.light .btn-sc { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
body.light .btn-sc.on { background: #fef9c3; border-color: #ca8a04; color: #92400e; }
body.light .btn-zone.off { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; }
body.light .gps-hud { background: rgba(240,249,255,0.92); color: #475569; border-color: rgba(226,232,240,0.8); }
body.light .gps-hud.safe   { background: rgba(240,253,244,0.92); color: #15803d; border-color: rgba(187,247,208,0.8); }
body.light .gps-hud.unsafe { background: rgba(255,241,242,0.92); color: #be123c; border-color: rgba(254,205,211,0.8); }
body.light .rbar  { background: rgba(245,243,255,0.97); border-color: #ddd6fe; }
body.light .rstat { color: #6d28d9; }
body.light .rstat b { color: #4c1d95; }
body.light #btnUndo { background: #e2e8f0; color: #1e293b; }
body.light .ibar { background: rgba(248,250,252,0.95); border-color: #e2e8f0; }
body.light .ibar b { color: #16a34a; }
body.light .panel { background: #ffffff; }
body.light .panel h2 { color: #1e293b; }
body.light .field label { color: #475569; }
body.light .vd { color: #16a34a; }
body.light .fn { color: #94a3b8; }
body.light .rcalc { background: #f8fafc; color: #475569; }
body.light .pp { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
body.light .platform { background: #f8fafc; }
body.light .platform h3 { color: #1e293b; }
body.light .platform ol { color: #475569; }
body.light .about-block { background: #f8fafc; }
body.light .about-block p,
body.light .changelog-list li { color: #475569; }
body.light .about-block p b,
body.light .changelog-list li b { color: #1e293b; }
body.light .about-tabs { border-color: #e2e8f0; }
body.light .about-tab { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
body.light .about-tab.active { background: #1e40af; border-color: #3b82f6; color: #bfdbfe; }
body.light .about-block-title { color: #ca8a04; }
body.light .about-tag { color: #94a3b8; }
body.light .cv { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
body.light .shelter-item,
body.light .route-slot { background: #f8fafc; }
body.light .shelter-item-name,
body.light .route-slot-name { color: #1e293b; }
body.light .route-slot-meta,
body.light .route-slot-empty { color: #94a3b8; }
body.light .searchbar { background: rgba(255,255,255,0.97); border-color: #e2e8f0; }
body.light .searchbar input { background: #f1f5f9; border-color: #e2e8f0; color: #1e293b; }
body.light #searchResults { background: #ffffff; border-color: #e2e8f0; }
body.light .search-result { color: #1e293b; border-color: #e2e8f0; }
body.light .search-result:hover { background: #f1f5f9; }
body.light .leaflet-popup-content-wrapper,
body.light .leaflet-popup-tip { background: #ffffff; }
body.light .leaflet-popup-content-wrapper { color: #1e293b; }
body.light .btn-cancel { background: #e2e8f0; color: #1e293b; }
body.light .toggle-track { background: #e2e8f0; }
body.light #sideMenuPanel { background: #ffffff; border-left: 1px solid #e2e8f0; }
body.light .side-menu-title { color: #1e293b; }
body.light #sideMenuPanel .side-menu-item { color: #374151; }
body.light #sideMenuPanel .side-menu-item i { color: #94a3b8; }
body.light #sideMenuPanel .side-menu-item:hover { background: #f1f5f9; }
body.light .side-menu-header { border-color: #e2e8f0; }

/* ── Donate block ── */
.donate-block {
  margin-top:16px;
  border-top:1px solid #1e293b;
  padding-top:16px;
  text-align:center;
}
.donate-text {
  font-size:.82rem; color:#64748b;
  line-height:1.6; margin-bottom:12px;
}
.donate-buttons {
  display:flex; gap:10px;
  justify-content:center;
}
.donate-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 20px;
  border-radius:8px;
  font-size:.85rem; font-weight:700;
  text-decoration:none;
  transition:opacity .15s;
}
.donate-btn:active { opacity:.7; }
.donate-bit {
  background:#1dd4a0; color:#0f172a;
}
.donate-paybox {
  background:#4f8df7; color:#fff;
}
.donate-phone {
  font-size:.75rem; color:#475569;
  margin-top:10px;
}
.donate-phone span {
  font-weight:700; color:#94a3b8;
  letter-spacing:.03em;
}
body.light .donate-block { border-color:#e2e8f0; }
body.light .donate-text { color:#94a3b8; }
body.light .donate-phone { color:#94a3b8; }

/* ── Red Alert overlay ── */
#alertOverlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(127,29,29,0.97);
  z-index:9999;
  direction:rtl;
  overflow-y:auto;
  animation:alertFlash .3s ease-out;
}
#alertOverlay.show { display:flex; align-items:center; justify-content:center; }
#alertOverlay.drill { background:rgba(30,58,95,0.97); }
@keyframes alertFlash {
  0%   { opacity:0; transform:scale(1.05); }
  100% { opacity:1; transform:scale(1); }
}
.alert-content {
  text-align:center; padding:32px 24px;
  max-width:400px; width:100%;
}
.alert-siren-icon {
  font-size:4rem; color:#fbbf24;
  animation:alertPulse 1s ease-in-out infinite;
  margin-bottom:16px;
}
#alertOverlay.drill .alert-siren-icon { color:#60a5fa; }
@keyframes alertPulse {
  0%,100% { transform:scale(1); opacity:1; }
  50%     { transform:scale(1.15); opacity:.7; }
}
.alert-title {
  font-size:2rem; font-weight:900;
  color:#fff; margin-bottom:8px;
}
.alert-subtitle {
  font-size:1.1rem; color:#fecaca;
  margin-bottom:24px; line-height:1.5;
}
#alertOverlay.drill .alert-subtitle { color:#bfdbfe; }
.alert-timer-label {
  font-size:.85rem; color:#fca5a5;
  margin-bottom:4px; text-transform:uppercase;
  letter-spacing:.05em;
}
#alertOverlay.drill .alert-timer-label { color:#93c5fd; }
.alert-timer {
  font-size:4.5rem; font-weight:900;
  font-variant-numeric:tabular-nums;
  color:#fff; line-height:1;
  margin-bottom:16px;
}
.alert-timer.warning { color:#fbbf24; }
.alert-timer.critical { color:#ef4444; animation:alertBlink .5s infinite; }
.alert-timer.expired { color:#ef4444; }
@keyframes alertBlink {
  0%,100% { opacity:1; }
  50%     { opacity:.3; }
}
.alert-progress {
  width:100%; height:8px;
  background:rgba(255,255,255,.15);
  border-radius:4px; overflow:hidden;
  margin-bottom:28px;
}
.alert-progress-fill {
  height:100%; width:100%;
  background:#4ade80;
  border-radius:4px;
  transition:width 1s linear;
}
.alert-progress-fill.warning { background:#fbbf24; }
.alert-progress-fill.critical { background:#ef4444; }
.alert-btn {
  display:block; width:100%;
  padding:14px; border:none; border-radius:12px;
  font-size:1.1rem; font-weight:700;
  cursor:pointer; margin-bottom:10px;
}
.alert-btn:active { opacity:.8; }
.alert-btn-nav {
  background:#4ade80; color:#0f172a;
}
.alert-btn-stop {
  background:rgba(255,255,255,.15); color:#fff;
}
#alertOverlay.drill .alert-btn-stop { background:rgba(255,255,255,.1); }

/* ── Onboarding overlay ── */
#onboardOverlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(15,23,42,0.95);
  z-index:9998;
  direction:rtl;
  backdrop-filter:blur(8px);
}
#onboardOverlay.show { display:flex; align-items:center; justify-content:center; }
.onboard-content {
  text-align:center; padding:32px 24px;
  max-width:380px; width:100%;
}
.onboard-step {
  display:none;
  animation:onboardFade .4s ease-out;
}
.onboard-step.active { display:block; }
@keyframes onboardFade {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.onboard-icon {
  font-size:3.5rem; color:#4ade80;
  margin-bottom:20px;
}
.onboard-heading {
  font-size:1.4rem; font-weight:800;
  color:#fff; margin-bottom:12px;
}
.onboard-text {
  font-size:1rem; color:#94a3b8;
  line-height:1.6; margin-bottom:28px;
}
.onboard-text i { color:#4ade80; }
.onboard-dots {
  display:flex; gap:8px;
  justify-content:center;
  margin-bottom:24px;
}
.onboard-dot {
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  transition:all .3s;
}
.onboard-dot.active {
  background:#4ade80; width:28px;
  border-radius:5px;
}
.onboard-buttons {
  display:flex; gap:12px;
  justify-content:center;
}
.onboard-btn-next {
  background:#4ade80; color:#0f172a;
  border:none; border-radius:10px;
  padding:12px 32px;
  font-size:1rem; font-weight:700;
  cursor:pointer;
}
.onboard-btn-next:active { opacity:.8; }
.onboard-btn-skip {
  background:transparent; color:#64748b;
  border:1px solid #334155; border-radius:10px;
  padding:12px 24px;
  font-size:1rem; font-weight:600;
  cursor:pointer;
}
.onboard-btn-skip:active { opacity:.7; }

/* ── Drill button + picker in menu ── */
#btnDrill {
  color:#f59e0b !important;
  border-top:1px solid rgba(245,158,11,.15);
  margin-top:4px;
}
#btnDrill i { color:#f59e0b !important; }
body.light #btnDrill { color:#d97706 !important; }
body.light #btnDrill i { color:#d97706 !important; }
.drill-picker {
  display:flex; flex-direction:column; gap:6px;
  padding:4px 12px 8px;
}
.drill-option {
  border:none; border-radius:8px;
  padding:10px 14px;
  font-size:.85rem; font-weight:700;
  cursor:pointer; text-align:right;
  direction:rtl;
}
.drill-option:active { opacity:.7; }
#drillRockets {
  background:rgba(239,68,68,.15); color:#ef4444;
}
#drillMissiles {
  background:rgba(245,158,11,.15); color:#f59e0b;
}
body.light #drillRockets { background:rgba(239,68,68,.1); }
body.light #drillMissiles { background:rgba(245,158,11,.1); }

/* ── Alert scenario badge ── */
.alert-scenario {
  display:inline-block;
  background:rgba(255,255,255,.15);
  border-radius:20px;
  padding:4px 14px;
  font-size:.8rem; font-weight:600;
  color:#fde68a;
  margin-bottom:16px;
  letter-spacing:.02em;
}
#alertOverlay.missiles .alert-scenario {
  background:rgba(245,158,11,.2);
  color:#fbbf24;
}
#alertOverlay.drill .alert-scenario {
  color:#93c5fd;
  background:rgba(96,165,250,.15);
}

/* ── Missiles scenario — amber instead of red ── */
#alertOverlay.missiles {
  background:rgba(120,53,15,0.97);
}
#alertOverlay.missiles .alert-siren-icon { color:#fbbf24; }
#alertOverlay.missiles .alert-subtitle { color:#fde68a; }
#alertOverlay.missiles .alert-timer-label { color:#fcd34d; }
#alertOverlay.missiles.drill {
  background:rgba(30,58,95,0.97);
}