*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width:100%; height:100%; font-family:'Inter','Segoe UI',Arial,sans-serif; background:#0a0e1a; overflow:hidden;
  /* Prevent browser-level pinch-to-zoom on the page. Using touch-action at the
     CSS compositor level means zero JS event interference — Mapbox's own touch
     handlers on the map canvas work normally. 'manipulation' allows single-tap
     and pan but blocks multi-finger page zoom and double-tap zoom. */
  touch-action: manipulation;
}
#map { position:absolute; inset:0;
  /* Override body's 'manipulation' so Mapbox gets full touch freedom on the
     canvas. 'pan-x pan-y' allows all finger combinations — Mapbox intercepts
     pinch/rotate itself at the canvas level and never lets them bubble to the
     page zoom handler. */
  touch-action: pan-x pan-y;
}

/* ── Top Bar ── */
#topbar {
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:stretch; gap:0;
  /* Base height + safe area top inset for notch / Dynamic Island */
  height:calc(36px + var(--sat, env(safe-area-inset-top, 0px)));
  padding-top:var(--sat, env(safe-area-inset-top, 0px));
  background:rgba(10,14,26,0.98);
  border-bottom:1px solid #1e2d55;
  backdrop-filter:blur(8px); flex-wrap:nowrap; overflow:hidden;
}
/* lp-wordmark — hidden, replaced by circle badge */
#topbar h1 { display:none; }
#lp-wordmark { display:none; }

/* ── Topbar left section ── */
.tb-left {
  display:flex; align-items:center; gap:6px;
  padding:0 8px 0 6px; flex-shrink:0;
  border-right:1px solid rgba(79,195,247,0.1);
}
.tb-logo {
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#4FC3F7,#1565C0);
  display:flex; align-items:center; justify-content:center;
}
.tb-logo svg { display:block; }

/* ── Ticker container ── */
.tb-ticker {
  flex:1; overflow:hidden; position:relative;
  display:flex; align-items:center; min-width:0;
}
.tb-ticker::before, .tb-ticker::after {
  content:''; position:absolute; top:0; bottom:0;
  width:20px; z-index:2; pointer-events:none;
}
.tb-ticker::before {
  left:0;
  background:linear-gradient(90deg, rgba(10,14,26,0.98) 0%, transparent 100%);
}
.tb-ticker::after {
  right:0;
  background:linear-gradient(270deg, rgba(10,14,26,0.98) 0%, transparent 100%);
}

/* Scrolling track */
.tb-track {
  display:flex; align-items:center;
  white-space:nowrap;
  animation:tbScroll 38s linear infinite;
  will-change:transform;
}
.tb-track:hover { animation-play-state:paused; }
@keyframes tbScroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* ── Ticker items ── */
.tb-item {
  display:inline-flex; align-items:center; gap:7px;
  padding:0 13px; height:36px;
  border-right:1px solid rgba(79,195,247,0.07);
  cursor:pointer; transition:background .15s;
  flex-shrink:0; position:relative;
}
.tb-item:hover { background:rgba(79,195,247,0.05); }
.tb-item::before {
  content:''; position:absolute;
  left:0; top:7px; bottom:7px; width:2px; border-radius:1px;
}
.tb-item.p1::before { background:#FF4444; }
.tb-item.p2::before { background:#FF8800; }
.tb-item.p3::before { background:#FFD600; }
.tb-item.p4::before { background:rgba(79,195,247,0.45); }
.tb-item.p5::before { background:rgba(176,190,197,0.2); }

.tb-icon { font-size:.82rem; line-height:1; flex-shrink:0; }

.tb-text { display:flex; flex-direction:column; gap:0; line-height:1; }
.tb-label {
  font-family:'Space Grotesk',sans-serif;
  font-size:.52rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  color:rgba(160,174,192,0.5); line-height:1.2;
}
.tb-value {
  font-family:'Space Grotesk',sans-serif;
  font-size:.72rem; font-weight:700; line-height:1.25;
  display:flex; align-items:center; gap:5px;
}
.tb-extra {
  font-family:'Inter',sans-serif;
  font-size:.6rem; font-weight:400;
  color:rgba(160,174,192,0.55); flex-shrink:0;
}
.tb-sep {
  width:2px; height:2px; border-radius:50%;
  background:rgba(160,174,192,0.25); flex-shrink:0;
}

/* Inline pill badge */
.tb-pill {
  display:inline-flex; align-items:center;
  font-family:'Space Grotesk',sans-serif;
  font-size:.5rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase;
  padding:1px 5px; border-radius:3px; flex-shrink:0;
}
.tb-pill.danger  { background:rgba(255,68,68,0.2);  color:#FF4444; border:1px solid rgba(255,68,68,0.35); }
.tb-pill.warning { background:rgba(255,136,0,0.18); color:#FF8800; border:1px solid rgba(255,136,0,0.35); }
.tb-pill.caution { background:rgba(255,214,0,0.15); color:#FFD600; border:1px solid rgba(255,214,0,0.28); }
.tb-pill.safe    { background:rgba(105,240,174,0.1);color:#69F0AE; border:1px solid rgba(105,240,174,0.3); }
.tb-pill.info    { background:rgba(79,195,247,0.1); color:#4FC3F7; border:1px solid rgba(79,195,247,0.3); }

/* Mini score + bar */
.tb-score { display:inline-flex; align-items:center; gap:5px; }
.tb-score-num {
  font-family:'Space Grotesk',sans-serif;
  font-size:.72rem; font-weight:800;
}
.tb-bar {
  width:36px; height:3px;
  background:rgba(255,255,255,0.08);
  border-radius:2px; overflow:hidden; flex-shrink:0;
}
.tb-bar-fill { height:100%; border-radius:2px; }

/* ── Topbar right: LIVE indicator ── */
.tb-right {
  display:flex; align-items:center; gap:5px;
  padding:0 10px; flex-shrink:0;
  border-left:1px solid rgba(79,195,247,0.1);
}
.tb-live-dot {
  width:6px; height:6px; border-radius:50%;
  background:#69F0AE; box-shadow:0 0 5px #69F0AE;
  animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100%{ opacity:1; box-shadow:0 0 5px #69F0AE; }
  50%    { opacity:.45; box-shadow:0 0 2px #69F0AE; }
}
.tb-live-label {
  font-family:'Space Grotesk',sans-serif;
  font-size:.58rem; font-weight:700;
  letter-spacing:.07em; color:#69F0AE; text-transform:uppercase;
}

/* ── Map top offset adjustment for slimmer topbar ── */
/* On native iOS, topbar grows by --sat (safe area top) so map/panel must follow */
#map { top:calc(36px + var(--sat, env(safe-area-inset-top, 0px))) !important; }
#panel { top:calc(36px + var(--sat, env(safe-area-inset-top, 0px))) !important; }
#panel-overlay { top:calc(36px + var(--sat, env(safe-area-inset-top, 0px))) !important; }
#mt-assess-overlay { top:calc(36px + var(--sat, env(safe-area-inset-top, 0px))) !important; }
#mt-locations-overlay { top:calc(36px + var(--sat, env(safe-area-inset-top, 0px))) !important; }
#mt-modal-overlay { top:calc(36px + var(--sat, env(safe-area-inset-top, 0px))) !important; }

@media(max-width:480px) {
  .tb-extra { display:none; } /* hide secondary text on small screens */
}

@keyframes blink { 0%,100%{opacity:1}50%{opacity:.4} }

/* ── Side Panel / Drawer ── */
/* Overlay backdrop (mobile only) */
#panel-overlay {
  display:none; position:fixed; inset:0; z-index:28;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(2px);
}
#panel-overlay.visible { display:block; }

#panel {
  position:fixed; top:0; left:0; bottom:0; z-index:31;
  width:272px; max-width:85vw;
  background:rgba(10,14,26,0.97); border-right:1px solid #1e2d55;
  overflow-y:auto; backdrop-filter:blur(12px);
  box-shadow:4px 0 32px rgba(0,0,0,0.6);
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  /* Pad panel content below home indicator on native iOS */
  padding-bottom:var(--sab, env(safe-area-inset-bottom, 0px));
}
#panel.open { transform:translateX(0); }

/* panel-header styles moved to accordion/logo section */

/* Desktop: panel slides in from left same as mobile */
@media(min-width:768px) {
  #panel {
    top:0; width:300px; border-radius:0;
    border-right:1px solid rgba(255,255,255,0.09);
    max-height:100vh;
    transform:translateX(-100%);
  }
  #panel.open { transform:translateX(0); }
  #panel-overlay { display:none; }
  #panel-overlay.visible { display:block; }
  #menu-btn { display:flex !important; }
}
/* .psec styles moved to accordion section */
.ptitle { font-size:.72rem; font-weight:700; letter-spacing:.09em; color:#4FC3F7; text-transform:uppercase; margin-bottom:7px; font-family:'Space Grotesk',sans-serif; }
.ptitle-sub { font-size:.6rem; font-weight:700; letter-spacing:.08em; color:#4FC3F7; opacity:0.7; text-transform:uppercase; margin:10px 0 5px; font-family:'Space Grotesk',sans-serif; border-top:1px solid rgba(79,195,247,0.15); padding-top:8px; }
.trow { display:flex; align-items:center; justify-content:space-between; padding:3px 0; }
.tlabel { font-size:.75rem; color:#A0AEC0; display:flex; align-items:center; gap:6px; }
.swatch { width:10px;height:10px;border-radius:2px;flex-shrink:0; }
.tog { position:relative;width:36px;height:20px; }
.tog input { opacity:0;width:0;height:0; }
.sl { position:absolute;inset:0;background:#334;border-radius:20px;cursor:pointer;transition:.2s; }
.sl::before { content:'';position:absolute;height:14px;width:14px;left:3px;bottom:3px;background:#667;border-radius:50%;transition:.2s; }
input:checked+.sl { background:rgba(79,195,247,0.3); border:1px solid rgba(79,195,247,0.5); }
input:checked+.sl::before { transform:translateX(16px);background:#4FC3F7; }

/* drip speed control */
.speed-row { display:flex; align-items:center; gap:8px; padding:4px 0; }
.speed-row label { font-size:.72rem; color:#9ab; white-space:nowrap; min-width:80px; }
.speed-row input[type=range] { flex:1; accent-color:#f5c542; cursor:pointer; }
.speed-val { font-size:.7rem; color:#eee; min-width:32px; text-align:right; }

.frow { display:flex; align-items:center; gap:7px; padding:3px 0; font-size:.7rem; color:#9ab; }
.fdot { width:7px;height:7px;border-radius:50%;background:#334;flex-shrink:0; }
.fdot.ok  { background:#33ee66;box-shadow:0 0 5px #33ee66; }
.fdot.err { background:#ff4444;box-shadow:0 0 5px #ff4444; }
.fname { flex:1;font-weight:600;color:#ccd; }

#strike-list { max-height:190px; overflow-y:auto; }
.si {
  display:flex; align-items:center; gap:6px; padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,0.04); font-size:.68rem; color:#9ab;
  cursor:pointer;
}
.si:hover { background:rgba(255,255,255,0.03); }
.si:last-child { border-bottom:none; }
.sbadge { font-size:.57rem;font-weight:800;padding:1px 5px;border-radius:4px;letter-spacing:.05em;flex-shrink:0; }
.b-CG{background:rgba(255,68,68,.25);color:#ff8888;border:1px solid #ff444460;}
.b-IC{background:rgba(68,170,255,.2);color:#88ccff;border:1px solid #44aaff50;}
.b-FI{background:rgba(255,170,0,.2);color:#ffcc66;border:1px solid #ffaa0050;}
.b-X {background:rgba(150,150,150,.2);color:#aaa;border:1px solid #66666650;}

/* Hamburger menu button — inline in topbar */
#menu-btn {
  background:none; border:none; color:#aac;
  font-size:1.2rem; cursor:pointer; padding:4px 8px;
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  transition:.15s; flex-shrink:0; order:-1;
}
#menu-btn:hover { background:rgba(255,255,255,0.08); color:#fff; }
#showtog { display:none !important; }  /* legacy — replaced by menu-btn */

/* Display mode toggle */
.mode-toggle { display:flex; gap:0; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,0.12); margin-top:4px; }
.mtbtn { flex:1; padding:3px 8px; background:rgba(255,255,255,0.05); color:#aaa; border:none; cursor:pointer; font-size:.63rem; transition:.15s; }
.mtbtn:hover { background:rgba(255,255,255,0.12); color:#fff; }
.mtbtn.active { background:rgba(79,195,247,0.25); color:#4FC3F7; font-weight:600; }
.mode-btn { flex:1; padding:5px 8px; font-size:.72rem; background:rgba(255,255,255,0.04); color:#778; border:none; cursor:pointer; transition:.15s; white-space:nowrap; }
.mode-btn.active { background:rgba(79,195,247,0.18); color:#4FC3F7; font-weight:600; }
.mode-btn:hover:not(.active) { background:rgba(255,255,255,0.08); color:#aab; }

/* Strike Hazard Grid legend — full width under topbar */
#radar-legend {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(10, 14, 26, 0.97);
  border-top: 1px solid #1e2d55;
  padding: 4px 14px 3px;
  pointer-events: none;
  display: none;
  z-index: 21;
  /* Clear home indicator on native iOS */
  padding-bottom:calc(3px + var(--sab, env(safe-area-inset-bottom, 0px)));
}
#radar-legend .rl-bar {
  height:8px; border-radius:2px; margin-bottom:3px;
  background: linear-gradient(to right,
    #00ffc8, #00ff90, #00ee60, #00dd22, #11bb00,
    #55cc00, #88dd00, #bbee00, #ddee00, #ffee00, #ffcc00,
    #ffa000, #ff6400, #ff3200, #f50a00, #e10000,
    #c80000, #af0000, #9b0000, #91001e, #82005a,
    #6e00b4, #5a00e6, #9614f0, #dc28dc, #ff3cb4,
    #ff5aa0, #ff8cc8, #ffc3e6, #ffebf8, #ffffff);
}
#radar-legend .rl-labels {
  display:flex; justify-content:space-between;
  font-size:.60rem; color:#A0AEC0; letter-spacing:.02em; font-family:'Inter',sans-serif;
}
/* Strike Hazard Grid animation controls — kept in panel (history/sync settings) */
#radar-anim {
  margin-top:6px; display:none;
}
#radar-anim.visible { display:block; }

/* Bottom animation bar — fixed outside panel */
#anim-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:22;
  background:rgba(10,14,26,0.97); border-top:1px solid #1e2d55;
  backdrop-filter:blur(8px);
  /* Extra bottom padding clears home indicator / rounded corners on native iOS */
  padding:10px 14px calc(12px + var(--sab, env(safe-area-inset-bottom, 0px)));
  display:flex; flex-direction:column; gap:5px;
}
#anim-bar.radar-off .anim-bar-controls { opacity:0.35; pointer-events:none; }
#anim-bar-label {
  font-size:.78rem; color:#7986CB; text-align:left; font-family:'Space Grotesk',sans-serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0; flex:1;
}
#anim-bar-slider {
  width:calc(100% - 24px); accent-color:#4FC3F7; cursor:pointer;
  margin:2px 12px; display:block;
  touch-action:none;
}
#anim-bar-row {
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.anim-bar-spacer { flex:1; }

#anim-bar-top {
  display:flex; align-items:center; justify-content:space-between;
  gap:6px; flex-wrap:nowrap; min-width:0;
}
#anim-bar-settings {
  display:flex; align-items:center; gap:3px; flex-shrink:0;
}
/* anim-bar always full width */
/* Ultra-narrow screens (Galaxy Fold, etc.) */
@media(max-width:360px) {
  #anim-bar { padding:8px 10px 10px; gap:4px; }
  #anim-bar-label { font-size:.62rem; }
  #anim-bar-settings label { font-size:.58rem; }
  #anim-bar-settings select { font-size:.58rem; padding:1px 3px; max-width:58px; }
  .anim-btn { font-size:.68rem; padding:4px 7px; }
  #anim-bar-row { gap:6px; }
}
/* Shrink anim slider on very small screens */
#radar-anim-slider {
  width:100%; accent-color:#4FC3F7; margin:4px 0;
  cursor:pointer;
}
/* Loading progress overlay — shown over slider during preload */
.storm-attr-marker {
  display:block;
  /* SVG is rendered inline — no background needed */
}

/* ── Grid Risk Inspector ──────────────────────────────────────────────── */
#inspector-crosshair {
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none; z-index:35;
  display:none;
}
#inspector-crosshair.active { display:block; }
#inspector-crosshair svg {
  filter:drop-shadow(0 0 5px rgba(79,195,247,0.85));
}
#inspector-readout {
  position:fixed; left:50%; z-index:36;
  transform:translateX(-50%);
  display:none; flex-direction:column;
  align-items:center; gap:0;
  pointer-events:none;
}
#inspector-readout.active { display:flex; }
#inspector-card {
  background:rgba(8,12,24,0.96);
  border:1px solid rgba(79,195,247,0.25);
  border-radius:10px; backdrop-filter:blur(12px);
  padding:7px 14px; min-width:150px; text-align:center;
  box-shadow:0 4px 20px rgba(0,0,0,0.6);
  transition:border-color .2s;
}
#inspector-risk-label {
  font-size:.70rem; font-weight:700;
  letter-spacing:.08em; margin-bottom:2px;
}
#inspector-intensity-row {
  font-size:.58rem; color:#6888aa; letter-spacing:.04em;
}
#inspector-intensity-val { font-weight:600; color:#90caf9; }
#inspector-connector {
  width:1px; height:16px;
  background:linear-gradient(to bottom,rgba(79,195,247,0.5),transparent);
}
#inspector-btn {
  display:none; /* shown only when radarEnabled */
}
#inspector-btn.visible { display:inline-flex; align-items:center; gap:4px; }
#inspector-btn.active  {
  background:rgba(79,195,247,0.2);
  color:#4FC3F7;
  border-color:rgba(79,195,247,0.45);
}
#slider-toggle-btn.active {
  background:rgba(79,195,247,0.2);
  color:#4FC3F7;
  border-color:rgba(79,195,247,0.45);
}

/* ── Geolocate button ─────────────────────────────────────────────── */
#geolocate-btn {
  display:inline-flex; align-items:center;
}
#geolocate-btn.active {
  background:rgba(79,195,247,0.2);
  color:#4FC3F7;
  border-color:rgba(79,195,247,0.45);
}
#geolocate-btn.locating {
  color:#f5c542;
  border-color:rgba(245,197,66,0.45);
  background:rgba(245,197,66,0.1);
}

/* ── Geo toast notification ──────────────────────────────────────── */
#lp-geo-toast {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:#0f1629; border:1px solid rgba(79,195,247,0.3);
  color:#A0AEC0; font-size:.72rem; font-family:'Inter',sans-serif;
  padding:8px 16px; border-radius:8px; z-index:9999;
  display:none; align-items:center; gap:8px;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
  white-space:nowrap; pointer-events:none;
  animation:lp-toast-in 0.2s ease;
}
#lp-geo-toast.error { border-color:rgba(255,100,100,0.4); color:#ff8888; }
#lp-geo-toast.show  { display:flex; }
@keyframes lp-toast-in {
  from { opacity:0; transform:translateX(-50%) translateY(8px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0);   }
}
body.light-mode #lp-geo-toast {
  background:#F0F4F8; border-color:rgba(21,101,192,0.3);
  color:#334; box-shadow:0 4px 20px rgba(0,0,0,0.15);
}
body.light-mode #lp-geo-toast.error { border-color:rgba(200,30,30,0.35); color:#c01010; }

/* ── Map-pick pin-drop toast ── */
#mt-map-pick-toast {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:rgba(10,14,26,0.96); border:1px solid rgba(79,195,247,0.45);
  color:#E3F2FD; font-size:.78rem; font-family:'Inter',sans-serif;
  padding:10px 16px; border-radius:10px; z-index:9000;
  display:none; align-items:center; gap:10px;
  box-shadow:0 4px 24px rgba(0,0,0,0.6);
  white-space:nowrap; pointer-events:auto;
  animation:lp-toast-in 0.2s ease;
}
#mt-map-pick-toast.mt-show { display:flex; }
#mt-map-pick-toast button {
  background:none; border:none; color:rgba(160,174,192,0.6);
  font-size:.9rem; cursor:pointer; padding:0 2px; line-height:1;
  transition:color .15s;
}
#mt-map-pick-toast button:hover { color:#E3F2FD; }
body.light-mode #mt-map-pick-toast {
  background:rgba(240,244,248,0.98); border-color:rgba(21,101,192,0.4);
  color:#1a237e; box-shadow:0 4px 20px rgba(0,0,0,0.18);
}

/* ── Geolocation map marker ───────────────────────────────────────── */
.lp-geo-marker {
  width:54px; height:54px;
  pointer-events:none;
  position:relative;
}
.lp-geo-pulse {
  position:absolute; inset:0;
  border-radius:50%;
  background:rgba(79,195,247,0.18);
  border:1.5px solid rgba(79,195,247,0.5);
  animation:lp-geo-pulse 2.4s ease-out infinite;
}
.lp-geo-pulse2 {
  position:absolute; inset:0;
  border-radius:50%;
  background:transparent;
  border:1.5px solid rgba(79,195,247,0.25);
  animation:lp-geo-pulse 2.4s ease-out infinite 0.8s;
}
@keyframes lp-geo-pulse {
  0%   { transform:scale(0.55); opacity:0.9; }
  100% { transform:scale(1.55); opacity:0;   }
}
.lp-geo-core {
  position:absolute;
  width:21px; height:21px;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
}

/* ── Storm Attribute Modal ─────────────────────────────────────────────── */
#storm-modal-overlay {
  position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,0); /* transparent click-catcher */
  display:none;
}
#storm-modal-overlay.active { display:block; }
#storm-modal {
  position:fixed; z-index:901;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(360px, calc(100vw - 32px));
  background:rgba(8,12,24,0.97);
  border:1px solid rgba(79,195,247,0.22);
  border-radius:16px;
  backdrop-filter:blur(14px);
  padding:18px 18px 14px;
  box-shadow:0 8px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(79,195,247,0.07);
  font-family:'Inter',system-ui,sans-serif;
  color:#e8eaf6;
  display:none;
  animation:sm-fadein .15s ease;
}
#storm-modal.active { display:block; }
@keyframes sm-fadein {
  from { opacity:0; transform:translate(-50%,-50%) scale(.96); }
  to   { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.sm-header {
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.sm-cell-badge {
  font-size:.72rem; font-weight:700; letter-spacing:.06em;
  padding:3px 8px; border-radius:6px; font-family:monospace;
  border:1px solid currentColor;
}
.sm-title {
  flex:1; font-size:.78rem; font-weight:600; color:#90caf9; letter-spacing:.03em;
}
.sm-close {
  background:none; border:none; color:#556; font-size:1.1rem;
  cursor:pointer; padding:0 2px; line-height:1; transition:color .15s;
}
.sm-close:hover { color:#90caf9; }
.sm-risk-label {
  font-size:.68rem; font-weight:700; letter-spacing:.08em;
  text-align:right; margin-bottom:4px;
}
.sm-spectrum-wrap { position:relative; margin-bottom:12px; }
.sm-spectrum-ramp {
  height:8px; border-radius:2px;
  /* Exact same gradient as #radar-legend .rl-bar */
  background: linear-gradient(to right,
    #00ffc8, #00ff90, #00ee60, #00dd22, #11bb00,
    #55cc00, #88dd00, #bbee00, #ddee00, #ffee00, #ffcc00,
    #ffa000, #ff6400, #ff3200, #f50a00, #e10000,
    #c80000, #af0000, #9b0000, #91001e, #82005a,
    #6e00b4, #5a00e6, #9614f0, #dc28dc, #ff3cb4,
    #ff5aa0, #ff8cc8, #ffc3e6, #ffebf8, #ffffff);
}
.sm-spectrum-mask {
  position:absolute; top:0; right:0; bottom:0;
  background:rgba(8,12,24,0.82); border-radius:0 2px 2px 0;
  transition:width .3s ease;
}
.sm-spectrum-needle {
  position:absolute; top:-3px; width:2px; height:14px;
  background:#fff; border-radius:1px;
  box-shadow:0 0 4px rgba(255,255,255,0.8);
  transform:translateX(-50%);
  transition:left .3s ease;
}
.sm-spectrum-labels {
  display:flex; justify-content:space-between;
  font-size:.55rem; color:#A0AEC0; margin-top:3px; letter-spacing:.02em;
}
.sm-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px;
}
.sm-stat {
  background:rgba(255,255,255,0.04); border-radius:8px;
  padding:8px 10px; border:1px solid rgba(255,255,255,0.06);
}
.sm-stat-val {
  font-size:1.1rem; font-weight:700; color:#e8eaf6; line-height:1.1;
}
.sm-stat-lbl {
  font-size:.58rem; color:#6888aa; letter-spacing:.04em; margin-top:2px;
}
.sm-motion {
  background:rgba(255,255,255,0.04); border-radius:8px;
  padding:8px 12px; border:1px solid rgba(255,255,255,0.06);
  margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.sm-motion-icon { font-size:1rem; }
.sm-motion-text { flex:1; font-size:.72rem; color:#a0aec0; }
.sm-motion-val  { font-size:.78rem; font-weight:600; color:#e8eaf6; }
.sm-footer {
  font-size:.60rem; color:#445566; text-align:center; margin-top:2px;
  padding-top:8px; border-top:1px solid rgba(255,255,255,0.06);
}
#radar-load-bar-wrap {
  display:none; position:relative; width:calc(100% - 24px); height:14px;
  margin:4px 12px; border-radius:4px; overflow:hidden;
  background:rgba(0,60,100,0.4); border:1px solid rgba(0,180,255,0.2);
}
#radar-load-bar {
  height:100%; width:0%; background:linear-gradient(90deg,#1565C0,#4FC3F7);
  transition:width 0.15s ease; border-radius:4px;
}
#radar-load-label {
  position:absolute; top:0; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.58rem; color:#cceeff; font-weight:600; letter-spacing:.03em;
  pointer-events:none;
}
#radar-anim-label {
  font-size:.60rem; color:#88aacc; text-align:center;
  margin-bottom:4px; min-height:1em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
#radar-anim-btns {
  display:flex; gap:5px; justify-content:center; margin-bottom:2px;
}
.anim-btn {
  background:rgba(79,195,247,0.08); border:1px solid rgba(79,195,247,0.22);
  color:#A0AEC0; border-radius:6px; padding:5px 14px;
  font-size:.76rem; cursor:pointer; transition:.15s; font-family:'Inter',sans-serif;
}
.anim-btn:hover { background:rgba(79,195,247,0.18); color:#fff; }
.anim-btn.active { background:rgba(79,195,247,0.28); color:#4FC3F7; border-color:#4FC3F7; }
#radar-anim-live {
  font-size:.60rem; color:#4FC3F7; text-align:center;
  margin-top:3px; cursor:pointer;
}
#radar-anim-live:hover { color:#88ddff; }



::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-thumb{background:#334;border-radius:4px;}

/* ── Light Mode ─────────────────────────────────────────────────────── */
body.light-mode { background:#F0F4F8; }
/* Map style intentionally unchanged in light mode */

body.light-mode #topbar {
  background:rgba(255,255,255,0.98);
  border-bottom:1px solid #D0DCE8;
}
body.light-mode #lp-wordmark { color:#0a0e1a; }
body.light-mode #lp-wordmark .lp-ping { color:#1565C0; }
body.light-mode #lp-icon { background:#e8edf5; box-shadow:0 2px 8px rgba(21,101,192,0.15); }
body.light-mode #menu-btn { color:#4A5568; }
body.light-mode #menu-btn:hover { background:rgba(0,0,0,0.06); color:#0a0e1a; }

body.light-mode #radar-legend {
  background:rgba(240,244,248,0.97);
  border-top:1px solid #D0DCE8;
}
body.light-mode #radar-legend .rl-labels { color:#5070A0; }

body.light-mode #panel {
  background:rgba(248,251,255,0.99);
  border-right:1px solid #D0DCE8;
}
/* light-mode panel-header: see logo section */
body.light-mode .psec { border-bottom:1px solid #E8EEF6; }
body.light-mode .ptitle { color:#1565C0; }
body.light-mode .ptitle-sub { color:#1565C0; border-top-color:rgba(21,101,192,0.15); }
body.light-mode .tlabel { color:#4A5568; }
body.light-mode .sl { background:#D0DCE8; }
body.light-mode input:checked+.sl { background:rgba(21,101,192,0.25); border:1px solid rgba(21,101,192,0.4); }
body.light-mode input:checked+.sl::before { background:#1565C0; }
body.light-mode .mode-btn { background:rgba(0,0,0,0.04); color:#4A5568; border-color:#D0DCE8; }
body.light-mode .mode-btn.active { background:rgba(21,101,192,0.1); color:#1565C0; border-color:rgba(21,101,192,0.3); }

body.light-mode #anim-bar {
  background:rgba(255,255,255,0.98);
  border-top:1px solid #D0DCE8;
}
body.light-mode #anim-bar-label { color:#5060A0; }
body.light-mode .anim-btn {
  background:rgba(0,0,0,0.04); border:1px solid #D0DCE8; color:#4A5568;
}
body.light-mode .anim-btn:hover { background:rgba(21,101,192,0.1); color:#1565C0; }
body.light-mode .anim-btn.active { background:rgba(21,101,192,0.15); color:#1565C0; border-color:rgba(21,101,192,0.4); }
body.light-mode #geolocate-btn.active { background:rgba(21,101,192,0.15); color:#1565C0; border-color:rgba(21,101,192,0.4); }

body.light-mode #anim-bar-settings label { color:#5060A0; }
body.light-mode #radar-frame-limit {
  background:#F0F4F8; color:#1565C0; border-color:#D0DCE8;
}
body.light-mode #anim-bar-slider { accent-color:#1565C0; }
body.light-mode #radar-anim-slider { accent-color:#1565C0; }
body.light-mode #radar-opacity { accent-color:#1565C0; }
body.light-mode .speed-val { color:#0a0e1a; }
body.light-mode .frow { color:#4A5568; }
body.light-mode .fname { color:#0a0e1a; }
body.light-mode .si { color:#4A5568; border-bottom-color:#E8EEF6; }
body.light-mode #panel-overlay { background:rgba(0,0,0,0.3); }

/* Light mode toggle row (special gold highlight) */
#lm-toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 13px;
  background:rgba(245,197,24,0.05);
  border:1px solid rgba(245,197,24,0.15);
  border-radius:8px;
  margin:8px 13px 0;
}
#lm-toggle-row .lm-row-inner { display:flex; align-items:center; gap:8px; }
#lm-toggle-row .lm-icon { font-size:14px; }
#lm-toggle-row .lm-label {
  font-size:.75rem; font-weight:600; color:#F5C518;
  font-family:'Inter',sans-serif;
}
#lm-toggle-row .lm-sub { font-size:.62rem; color:#7986CB; margin-top:1px; }
/* When active */
body.light-mode #lm-toggle-row {
  background:rgba(21,101,192,0.06);
  border-color:rgba(21,101,192,0.2);
}
body.light-mode #lm-toggle-row .lm-label { color:#1565C0; }
body.light-mode #lm-toggle-row .lm-sub { color:#7090A0; }
/* Light mode tog uses gold when off, blue when on */
#t-light-mode:checked + .sl { background:rgba(79,195,247,0.3); border:1px solid rgba(79,195,247,0.5); }
#t-light-mode:checked + .sl::before { background:#4FC3F7; }


/* ─── Alert popup (mapbox) ─── */
.alert-popup .mapboxgl-popup-content {
  background:#0d1528;
  border:1px solid rgba(79,195,247,0.25);
  border-radius:10px;
  padding:0;
  overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,0.7);
  min-width:220px;
  max-width:280px;
  font-family:'Inter',sans-serif;
}
.alert-popup .mapboxgl-popup-tip { border-top-color:#0d1528; }

/* ─── Strike popup ─── */
.strike-popup .mapboxgl-popup-content {
  background:rgba(10,14,26,0.96);
  border:1px solid rgba(79,195,247,0.18);
  border-radius:12px;
  padding:0;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,0.75);
  font-family:'Inter','Space Grotesk',sans-serif;
  min-width:130px;
  max-width:180px;
  backdrop-filter:blur(8px);
}
.strike-popup .mapboxgl-popup-tip { border-top-color:rgba(10,14,26,0.96); }
.strike-popup .mapboxgl-popup-close-button { display:none; }
.spop-inner {
  padding:11px 14px 10px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.spop-badge {
  font-size:.85rem; font-weight:700; letter-spacing:.08em;
  padding:3px 12px; border-radius:999px;
  text-transform:uppercase;
}
.spop-badge.cg { background:rgba(255,68,68,.22); color:#ff7070; border:1px solid rgba(255,68,68,.4); }
.spop-badge.ic { background:rgba(68,170,255,.18); color:#77ccff; border:1px solid rgba(68,170,255,.35); }
.spop-badge.fi { background:rgba(180,180,180,.15); color:#aaa;   border:1px solid rgba(180,180,180,.25); }
.spop-time {
  font-size:.78rem; color:#7986CB; font-weight:500; letter-spacing:.02em;
}

body.light-mode .strike-popup .mapboxgl-popup-content {
  background:rgba(240,244,248,0.97);
  border-color:rgba(21,101,192,0.2);
  box-shadow:0 4px 20px rgba(0,0,0,0.18);
}
body.light-mode .strike-popup .mapboxgl-popup-tip { border-top-color:rgba(240,244,248,0.97); }
body.light-mode .spop-time { color:#5060A0; }
body.light-mode .spop-badge.cg { background:rgba(255,68,68,.1); color:#cc2222; border-color:rgba(255,68,68,.3); }
body.light-mode .spop-badge.ic { background:rgba(21,101,192,.1); color:#1565C0; border-color:rgba(21,101,192,.3); }

.apop-header {
  padding:10px 13px 8px;
  display:flex; align-items:center; gap:8px;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.apop-icon { font-size:1.2rem; }
.apop-label { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.82rem; flex:1; }
.apop-body { padding:9px 13px 11px; }
.apop-expiry { font-size:.72rem; color:#A0AEC0; margin-bottom:9px; }
.apop-expiry span { color:#F5C518; font-weight:600; }
.apop-btn {
  display:block; width:100%;
  background:rgba(79,195,247,0.12);
  border:1px solid rgba(79,195,247,0.35);
  border-radius:6px;
  color:#4FC3F7;
  font-family:'Inter',sans-serif;
  font-size:.72rem; font-weight:600;
  padding:6px 10px;
  cursor:pointer;
  text-align:center;
  transition:.15s;
}
.apop-btn:hover { background:rgba(79,195,247,0.22); border-color:#4FC3F7; }
.apop-wrap { touch-action:manipulation; user-select:none; }

/* ─── Full warning modal ─── */
#warn-modal {
  display:none;
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(4px);
  align-items:center; justify-content:center;
}
#warn-modal.open { display:flex; }
#warn-modal-inner {
  background:#0a0e1a;
  border:1px solid rgba(79,195,247,0.2);
  border-radius:14px;
  width:min(660px,94vw);
  max-height:82vh;
  display:flex; flex-direction:column;
  box-shadow:0 8px 48px rgba(0,0,0,0.8);
  overflow:hidden;
  font-family:'Inter',sans-serif;
}
#warn-modal-header {
  padding:14px 18px;
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  flex-shrink:0;
}
#warn-modal-icon { font-size:1.4rem; }
#warn-modal-title {
  font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:1rem;
  flex:1; color:#fff;
}
#warn-modal-meta { font-size:.72rem; color:#A0AEC0; margin-top:2px; }
#warn-modal-close {
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:6px;
  color:#A0AEC0; cursor:pointer;
  font-size:.9rem; padding:4px 9px;
  transition:.15s; flex-shrink:0;
}
#warn-modal-close:hover { background:rgba(255,255,255,0.12); color:#fff; }
#warn-modal-body {
  padding:16px 18px;
  overflow-y:auto;
  flex:1;
}
#warn-modal-text {
  font-family:'Courier New',Courier,monospace;
  font-size:.72rem;
  line-height:1.65;
  color:#CBD5E0;
  white-space:pre-wrap;
  word-break:break-word;
}
#warn-modal-footer {
  padding:12px 18px;
  border-top:1px solid rgba(255,255,255,0.07);
  display:flex; justify-content:flex-end;
  flex-shrink:0;
}
#warn-modal-footer button {
  background:rgba(79,195,247,0.12);
  border:1px solid rgba(79,195,247,0.35);
  border-radius:6px;
  color:#4FC3F7;
  font-family:'Inter',sans-serif;
  font-size:.75rem; font-weight:600;
  padding:7px 16px; cursor:pointer;
  transition:.15s;
}
#warn-modal-footer button:hover { background:rgba(79,195,247,0.22); }

/* light mode overrides */
body.light-mode .alert-popup .mapboxgl-popup-content {
  background:#F0F4F8;
  border-color:rgba(21,101,192,0.25);
  box-shadow:0 4px 24px rgba(0,0,0,0.15);
}
body.light-mode .alert-popup .mapboxgl-popup-tip { border-top-color:#F0F4F8; }
body.light-mode .apop-expiry { color:#4A5568; }
body.light-mode .apop-btn { background:rgba(21,101,192,0.08); border-color:rgba(21,101,192,0.3); color:#1565C0; }
body.light-mode .apop-btn:hover { background:rgba(21,101,192,0.15); }
body.light-mode #warn-modal-inner { background:#F0F4F8; border-color:rgba(21,101,192,0.2); }
body.light-mode #warn-modal-title { color:#0a0e1a; }
body.light-mode #warn-modal-meta { color:#4A5568; }
body.light-mode #warn-modal-text { color:#2D3748; }
body.light-mode #warn-modal-close { color:#4A5568; }
body.light-mode #warn-modal-footer button { background:rgba(21,101,192,0.08); border-color:rgba(21,101,192,0.3); color:#1565C0; }

/* ─── Accordion panel sections ─── */
.psec { border-bottom:1px solid #1e2d55; }
.psec:last-child { border-bottom:none; }
.psec-title {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 13px;
  cursor:pointer;
  user-select:none;
  transition:background .15s;
}
.psec-title:hover { background:rgba(79,195,247,0.06); }
.psec-title .ptitle {
  margin-bottom:0;
  pointer-events:none;
}
.psec-chevron {
  font-size:.6rem;
  color:#4FC3F7;
  opacity:0.7;
  transition:transform .22s ease;
  flex-shrink:0;
  margin-left:6px;
}
.psec.open .psec-chevron { transform:rotate(90deg); }
.psec-body {
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
  padding:0 13px;
}
.psec.open .psec-body {
  max-height:700px;
  padding:0 13px 10px;
}
/* light mode */
body.light-mode .psec { border-bottom-color:#E8EEF6; }
body.light-mode .psec-title:hover { background:rgba(21,101,192,0.05); }
body.light-mode .psec-chevron { color:#1565C0; }

/* ─── Ramp Debug Dev Tool ───────────────────────────────────────────────────── */
.dev-badge {
  display:inline-block;
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.06em;
  padding:1px 5px;
  border-radius:3px;
  background:#ff6b35;
  color:#fff;
  margin-left:7px;
  vertical-align:middle;
  position:relative;
  top:-1px;
}
#ramp-preview-canvas {
  width:100%;
  height:22px;
  border-radius:4px;
  display:block;
  border:1px solid rgba(255,255,255,0.1);
  margin:8px 0 2px;
}
.ramp-band-tick-row {
  display:flex;
  justify-content:space-between;
  font-size:.52rem;
  color:rgba(255,255,255,0.3);
  margin-bottom:6px;
  padding:0 1px;
}
.ramp-ctrl-row {
  display:flex;
  align-items:center;
  gap:5px;
  margin:3px 0;
}
.ramp-ctrl-row label {
  font-size:.63rem;
  color:rgba(255,255,255,0.5);
  width:108px;
  flex-shrink:0;
  line-height:1.2;
}
.ramp-ctrl-row input[type=range] {
  flex:1;
  accent-color:#ff6b35;
  height:3px;
}
.ramp-ctrl-row .ramp-val {
  font-size:.63rem;
  color:#ff9a6c;
  width:32px;
  text-align:right;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.ramp-section-lbl {
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:rgba(255,255,255,0.28);
  margin:8px 0 2px;
}
.ramp-output-box {
  font-family:'Courier New',monospace;
  font-size:.6rem;
  background:rgba(0,0,0,0.38);
  color:#a8e6cf;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:4px;
  padding:7px 8px;
  white-space:pre;
  overflow-x:auto;
  margin:6px 0 4px;
  line-height:1.5;
  display:none;
}
.ramp-btn-row {
  display:flex;
  gap:6px;
  margin:8px 0 4px;
}
.ramp-btn {
  flex:1;
  padding:5px 0;
  border:none;
  border-radius:4px;
  font-size:.63rem;
  font-weight:600;
  cursor:pointer;
  letter-spacing:.03em;
  transition:opacity .15s;
}
.ramp-btn:hover { opacity:.82; }
.ramp-btn-copy  { background:#ff6b35; color:#fff; }
.ramp-btn-reset { background:rgba(255,255,255,0.11); color:rgba(255,255,255,0.65); }
/* ramp debug section needs more room */
#psec-ramp-debug.open .psec-body { max-height:1000px; }
/* light mode */
body.light-mode .dev-badge { background:#c94310; }
body.light-mode .ramp-ctrl-row label { color:rgba(0,0,0,0.5); }
body.light-mode .ramp-ctrl-row .ramp-val { color:#b33d00; }
body.light-mode .ramp-section-lbl { color:rgba(0,0,0,0.32); }
body.light-mode .ramp-output-box { background:rgba(0,0,0,0.05); color:#185a34; border-color:rgba(0,0,0,0.12); }
body.light-mode .ramp-btn-reset { background:rgba(0,0,0,0.08); color:rgba(0,0,0,0.55); }
body.light-mode .ramp-band-tick-row { color:rgba(0,0,0,0.28); }
body.light-mode #ramp-preview-canvas { border-color:rgba(0,0,0,0.1); }


/* ── Panel Header Logo ─────────────────────────────────────── */
#panel-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  position: sticky;
  top: 0;
  background: rgba(10,14,26,0.98);
  z-index: 1;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #1e2d55;
}
#panel-logo-row {
  display: flex;
  align-items: center;
  padding: 12px 14px 8px;
}
#panel-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
#panel-logo-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: rgba(10,14,26,0.7);
  border-radius: 10px;
  border: 1px solid rgba(79,195,247,0.15);
  box-shadow: 0 2px 12px rgba(79,195,247,0.12);
}
#panel-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
#panel-logo-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .01em;
}
#panel-logo-name .wm-lightning { color: #ffffff; }
#panel-logo-name .wm-ping      { color: #4FC3F7; }
#panel-logo-sub {
  font-family: 'Inter', sans-serif;
  font-size: .6rem;
  font-weight: 400;
  color: #7986CB;
  letter-spacing: .03em;
  margin-top: 1px;
}
#panel-header-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(79,195,247,0.2) 0%, rgba(79,195,247,0.06) 60%, transparent 100%);
  margin: 0;
}

/* light mode */
body.light-mode #panel-header {
  background: rgba(240,244,248,0.98);
  border-bottom-color: #D0DCF0;
}
body.light-mode #panel-logo-icon {
  background: #e8edf5;
  border-color: rgba(21,101,192,0.15);
}
body.light-mode #panel-logo-name .wm-lightning { color: #0a0e1a; }
body.light-mode #panel-logo-name .wm-ping      { color: #1565C0; }
body.light-mode #panel-logo-sub  { color: #5070A0; }
body.light-mode #panel-header-divider { background: linear-gradient(90deg, rgba(21,101,192,0.18) 0%, rgba(21,101,192,0.06) 60%, transparent 100%); }

/* ── Swipe edge hint (mobile) ───────────────────────────────── */
#swipe-edge-hint {
  display: none;
}
@media (max-width: 767px) {
  #swipe-edge-hint {
    display: block;
    position: fixed;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 60px;
    background: linear-gradient(180deg, transparent, #4FC3F7, transparent);
    border-radius: 0 4px 4px 0;
    opacity: 0.35;
    z-index: 9998;
    pointer-events: none;
    transition: opacity .3s;
  }
  #swipe-edge-hint.hidden { opacity: 0; }
}
/* ═══════════════════════════════════════════════════════════
   MONITORING TOOLKIT
═══════════════════════════════════════════════════════════ */

/* ── Panel section: compact summary (no tall list) ── */
#psec-monitor.open .psec-body { max-height: 400px; }

/* ── MT panel compact summary row ── */
.mt-panel-summary {
  display:flex; align-items:center; justify-content:flex-end;
  gap:8px; padding:2px 0 4px;
}
.mt-panel-summary-label {
  font-family:'Inter',sans-serif; font-size:.68rem;
  color:rgba(160,174,192,0.7); flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mt-panel-summary-btns { display:flex; gap:5px; flex-shrink:0; }
.mt-panel-btn {
  padding:5px 10px; border-radius:6px; font-size:.68rem; font-weight:600;
  font-family:'Inter',sans-serif; cursor:pointer; border:1px solid;
  transition:all .15s; white-space:nowrap;
}
.mt-panel-btn-view {
  background:rgba(79,195,247,0.1); border-color:rgba(79,195,247,0.3); color:#4FC3F7;
}
.mt-panel-btn-view:hover { background:rgba(79,195,247,0.18); border-color:rgba(79,195,247,0.55); }
.mt-panel-btn-add {
  background:rgba(105,240,174,0.1); border-color:rgba(105,240,174,0.3); color:#69F0AE;
}
.mt-panel-btn-add:hover { background:rgba(105,240,174,0.18); border-color:rgba(105,240,174,0.55); }

/* ── Locations modal overlay ── */
#mt-locations-overlay {
  display:none; position:fixed; inset:0; z-index:450;
  background:rgba(4,8,18,0.82); backdrop-filter:blur(5px);
  align-items:flex-end; justify-content:center;
}
#mt-locations-overlay.mt-show { display:flex; }

#mt-locations-sheet {
  width:100%; max-width:480px;
  background:rgba(10,14,26,0.98);
  border-radius:16px 16px 0 0;
  border:1px solid rgba(79,195,247,0.18); border-bottom:none;
  max-height:88vh; overflow-y:auto;
  animation:mt-slide-up .22s ease;
}
#mt-locations-sheet::-webkit-scrollbar { width:3px; }
#mt-locations-sheet::-webkit-scrollbar-thumb { background:rgba(79,195,247,0.2); border-radius:2px; }

/* Location list inside the modal gets padding */
.mt-locs-modal-list { padding:0 12px 16px; }

/* Compact add button inside modal header */
.mt-locs-add-btn {
  width:auto; padding:6px 14px; margin-top:0;
  font-size:.76rem;
}

/* light-mode overrides */
body.light-mode #mt-locations-sheet { background:rgba(240,244,248,0.99); border-color:rgba(21,101,192,0.2); }
body.light-mode .mt-panel-summary-label { color:rgba(74,85,104,0.75); }
body.light-mode .mt-panel-btn-view { background:rgba(21,101,192,0.07); border-color:rgba(21,101,192,0.3); color:#1565C0; }
body.light-mode .mt-panel-btn-add { background:rgba(27,94,32,0.07); border-color:rgba(27,94,32,0.3); color:#2E7D32; }

/* ── Location count badge ── */
.mt-badge {
  display:inline-block; font-size:.52rem; font-weight:700;
  letter-spacing:.04em; padding:1px 6px; border-radius:10px;
  background:rgba(79,195,247,0.2); color:#4FC3F7;
  border:1px solid rgba(79,195,247,0.35);
  margin-left:5px; vertical-align:middle; position:relative; top:-1px;
  font-family:'Inter',sans-serif;
}

/* ── Empty state ── */
.mt-empty {
  text-align:center; padding:16px 10px;
  color:rgba(160,174,192,0.6); font-size:.72rem;
  border:1px dashed rgba(79,195,247,0.18); border-radius:8px;
  margin:4px 0 8px; line-height:1.55;
}
.mt-empty-icon { font-size:1.6rem; margin-bottom:5px; opacity:.45; }

/* ── Add Location button ── */
.mt-add-btn {
  width:100%; padding:9px 0; margin-top:4px;
  background:rgba(79,195,247,0.08);
  border:1px solid rgba(79,195,247,0.28);
  color:#4FC3F7; border-radius:7px;
  font-family:'Inter',sans-serif; font-size:.82rem; font-weight:600;
  cursor:pointer; transition:all .15s; letter-spacing:.03em;
}
.mt-add-btn:hover { background:rgba(79,195,247,0.16); border-color:rgba(79,195,247,0.5); }

/* ── Location card ── */
.mt-loc-card {
  background:rgba(15,22,41,0.7);
  border:1px solid rgba(79,195,247,0.14);
  border-radius:9px; margin-bottom:7px; overflow:hidden;
  cursor:pointer; transition:border-color .18s;
}
.mt-loc-card:hover { border-color:rgba(79,195,247,0.3); }
.mt-loc-card.mt-open { border-color:rgba(79,195,247,0.4); }

.mt-card-header {
  display:flex; align-items:center; gap:8px; padding:9px 11px;
}
.mt-card-icon { font-size:1.25rem; flex-shrink:0; line-height:1; }
.mt-card-info { flex:1; min-width:0; }
.mt-card-name {
  font-family:'Space Grotesk',sans-serif; font-size:.88rem;
  font-weight:600; color:#e8eaf6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mt-card-coords { font-size:.58rem; color:rgba(160,174,192,0.55); margin-top:1px; }
.mt-card-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* visibility dot */
.mt-vis-btn {
  width:9px; height:9px; border-radius:50%;
  background:#4FC3F7; border:none; padding:0; cursor:pointer;
  flex-shrink:0; transition:opacity .15s; outline:none;
}
.mt-vis-btn.off { background:rgba(160,174,192,0.3); }

/* threat badge */
.mt-threat-badge {
  font-size:.66rem; font-weight:700; font-family:'Space Grotesk',sans-serif;
  padding:3px 7px; border-radius:4px; letter-spacing:.04em; white-space:nowrap;
}
.mt-badge-allclear  { background:rgba(68,204,136,0.12); color:#44cc88; border:1px solid rgba(68,204,136,0.28); }
.mt-badge-awareness { background:rgba(187,238,0,0.1);  color:#bbee00; border:1px solid rgba(187,238,0,0.28); }
.mt-badge-caution   { background:rgba(255,238,0,0.1);  color:#ffee00; border:1px solid rgba(255,238,0,0.28); }
.mt-badge-warning   { background:rgba(255,160,0,0.12); color:#ffa000; border:1px solid rgba(255,160,0,0.32); }
.mt-badge-danger    { background:rgba(225,0,0,0.12);   color:#e10000; border:1px solid rgba(225,0,0,0.32); }
.mt-badge-extreme   { background:rgba(255,90,160,0.12);color:#ff5aa0; border:1px solid rgba(255,90,160,0.32); }

/* remove btn */
.mt-remove-btn {
  background:none; border:none; color:rgba(160,174,192,0.4);
  cursor:pointer; font-size:.85rem; line-height:1; padding:2px 3px;
  border-radius:3px; transition:color .15s; flex-shrink:0;
}
.mt-remove-btn:hover { color:#ff6b6b; }

/* ── Detail panel ── */
.mt-card-detail {
  display:none; border-top:1px solid rgba(79,195,247,0.1);
  padding:9px 10px; background:rgba(5,8,20,0.4);
}
.mt-loc-card.mt-open .mt-card-detail { display:block; }

.mt-detail-title {
  font-family:'Space Grotesk',sans-serif; font-size:.58rem; font-weight:700;
  letter-spacing:.1em; color:rgba(121,134,203,0.85); text-transform:uppercase;
  margin-bottom:7px;
}

/* WTS score bar */
.mt-wts-row { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.mt-wts-track {
  flex:1; height:7px; background:rgba(255,255,255,0.06);
  border-radius:4px; overflow:hidden;
}
.mt-wts-fill { height:100%; border-radius:4px; transition:width .5s ease; }
.mt-wts-num {
  font-family:'Space Grotesk',sans-serif; font-size:.8rem;
  font-weight:700; min-width:38px; text-align:right;
}

/* status + trend row */
.mt-status-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:9px;
}
.mt-status-lbl {
  font-family:'Space Grotesk',sans-serif; font-size:.68rem; font-weight:700;
}
.mt-trend-pill {
  font-size:.58rem; font-weight:600; padding:2px 6px; border-radius:10px;
  display:flex; align-items:center; gap:2px;
}
.mt-trend-rising  { background:rgba(225,0,0,0.1);   color:#ff6060; border:1px solid rgba(225,0,0,0.22); }
.mt-trend-steady  { background:rgba(79,195,247,0.07);color:#4FC3F7; border:1px solid rgba(79,195,247,0.18); }
.mt-trend-falling { background:rgba(68,204,136,0.09);color:#44cc88; border:1px solid rgba(68,204,136,0.22); }

/* sparkline */
.mt-sparkline {
  display:flex; gap:3px; align-items:flex-end;
  height:22px; margin-bottom:9px;
}
.mt-spark-bar { flex:1; border-radius:2px 2px 0 0; min-height:2px; }

/* threat list */
.mt-threat-list { display:flex; flex-direction:column; gap:4px; margin-bottom:7px; }
.mt-threat-item {
  background:rgba(255,255,255,0.025); border:1px solid rgba(79,195,247,0.08);
  border-radius:6px; padding:6px 8px;
  display:flex; align-items:flex-start; gap:6px;
}
.mt-threat-dot { width:7px; height:7px; border-radius:50%; margin-top:3px; flex-shrink:0; }
.mt-threat-body { flex:1; min-width:0; }
.mt-threat-cat { font-family:'Space Grotesk',sans-serif; font-size:.62rem; font-weight:700; }
.mt-threat-loc { font-size:.58rem; color:#7986CB; margin-top:2px; }
.mt-threat-motion { font-size:.56rem; color:rgba(160,174,192,0.55); margin-top:1px; font-style:italic; }
.mt-threat-dir { font-size:.62rem; font-weight:600; color:#7986CB; text-align:right; white-space:nowrap; flex-shrink:0; }

/* no threat state */
.mt-no-threat {
  text-align:center; padding:10px; font-size:.65rem;
  color:rgba(68,204,136,0.7); font-style:italic;
}

/* full assessment button */
.mt-assess-btn {
  width:100%; margin-top:7px;
  background:rgba(79,195,247,0.07); border:1px solid rgba(79,195,247,0.22);
  color:#4FC3F7; border-radius:6px; padding:6px;
  font-size:.63rem; font-weight:600; cursor:pointer;
  font-family:'Space Grotesk',sans-serif; letter-spacing:.04em;
  transition:background .15s;
}
.mt-assess-btn:hover { background:rgba(79,195,247,0.14); }

.mt-last-updated { font-size:.56rem; color:rgba(160,174,192,0.4); text-align:right; }

/* ── ADD LOCATION MODAL ── */
#mt-modal-overlay {
  display:none; position:fixed; inset:0; z-index:400;
  background:rgba(4,8,18,0.82); backdrop-filter:blur(5px);
  align-items:flex-end; justify-content:center;
}
#mt-modal-overlay.mt-show { display:flex; }

#mt-modal-sheet {
  width:100%; max-width:440px;
  background:rgba(10,14,26,0.98);
  border-radius:16px 16px 0 0;
  border:1px solid rgba(79,195,247,0.18); border-bottom:none;
  max-height:92vh; overflow-y:auto;
  animation:mt-slide-up .22s ease;
}
#mt-modal-sheet::-webkit-scrollbar { width:3px; }
#mt-modal-sheet::-webkit-scrollbar-thumb { background:rgba(79,195,247,0.2); border-radius:2px; }
@keyframes mt-slide-up {
  from { transform:translateY(50px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
.mt-modal-handle {
  width:34px; height:4px; border-radius:2px;
  background:rgba(79,195,247,0.22); margin:10px auto 0;
}
.mt-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 15px 10px; border-bottom:1px solid rgba(79,195,247,0.1);
}
.mt-modal-title {
  font-family:'Space Grotesk',sans-serif; font-size:.95rem; font-weight:700;
  color:#4FC3F7; letter-spacing:.06em; text-transform:uppercase;
}
.mt-modal-close {
  background:none; border:none; color:rgba(160,174,192,0.5);
  font-size:1.15rem; cursor:pointer; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:5px; transition:all .15s;
}
.mt-modal-close:hover { background:rgba(255,255,255,0.07); color:#e8eaf6; }
.mt-modal-body { padding:13px 15px 20px; }

/* form fields */
.mt-field { margin-bottom:12px; }
.mt-label {
  font-family:'Space Grotesk',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.09em; color:#7986CB; text-transform:uppercase;
  margin-bottom:5px; display:block;
}
.mt-input {
  width:100%; background:rgba(15,22,41,0.8);
  border:1px solid rgba(79,195,247,0.18); color:#e8eaf6;
  border-radius:7px; padding:10px 12px;
  font-family:'Inter',sans-serif; font-size:.88rem;
  outline:none; transition:border-color .15s;
}
.mt-input:focus { border-color:rgba(79,195,247,0.45); }
.mt-input::placeholder { color:rgba(160,174,192,0.35); }

/* icon picker */
.mt-icon-grid {
  display:grid; grid-template-columns:repeat(8,1fr); gap:5px;
}
.mt-icon-opt {
  background:rgba(15,22,41,0.7); border:1px solid rgba(79,195,247,0.1);
  border-radius:6px; padding:5px; font-size:1rem;
  cursor:pointer; text-align:center; transition:all .15s;
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  user-select:none;
}
.mt-icon-opt:hover { background:rgba(79,195,247,0.1); border-color:rgba(79,195,247,0.3); }
.mt-icon-opt.mt-selected { background:rgba(79,195,247,0.15); border-color:#4FC3F7; }

/* or divider */
.mt-or-div {
  display:flex; align-items:center; gap:8px; margin:10px 0;
}
.mt-or-div::before,.mt-or-div::after {
  content:''; flex:1; height:1px; background:rgba(79,195,247,0.1);
}
.mt-or-div span { font-size:.62rem; color:rgba(160,174,192,0.4); }

/* method buttons */
.mt-method-row { display:flex; gap:7px; margin-bottom:12px; }
.mt-method-btn {
  flex:1; padding:8px 5px;
  background:rgba(15,22,41,0.7); border:1px solid rgba(79,195,247,0.15);
  color:#7986CB; border-radius:7px;
  font-family:'Inter',sans-serif; font-size:.65rem; font-weight:600;
  cursor:pointer; transition:all .15s;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-align:center; line-height:1.3;
}
.mt-method-btn .mt-mb-icon { font-size:1.1rem; }
.mt-method-btn:hover { background:rgba(79,195,247,0.1); border-color:rgba(79,195,247,0.35); color:#4FC3F7; }
.mt-method-btn.mt-method-active { background:rgba(79,195,247,0.14); border-color:#4FC3F7; color:#4FC3F7; }

/* coord row */
.mt-coord-row { display:flex; gap:8px; margin-bottom:12px; }
.mt-coord-row .mt-field { flex:1; margin-bottom:0; }

/* monitor option row */
.mt-opt-row {
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(15,22,41,0.6); border:1px solid rgba(79,195,247,0.12);
  border-radius:8px; padding:9px 11px; margin-bottom:10px;
}
.mt-opt-info { flex:1; }
.mt-opt-title { font-size:.73rem; font-weight:600; color:#e8eaf6; display:flex; align-items:center; gap:6px; }
.mt-opt-sub { font-size:.6rem; color:rgba(160,174,192,0.5); margin-top:2px; }

/* radius slider */
.mt-radius-row { margin-bottom:12px; }
.mt-radius-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.mt-radius-hdr span:first-child {
  font-family:'Space Grotesk',sans-serif; font-size:.6rem; font-weight:700;
  letter-spacing:.09em; color:#7986CB; text-transform:uppercase;
}
.mt-radius-val { font-size:.7rem; font-weight:600; color:#4FC3F7; font-family:'Space Grotesk',sans-serif; }
.mt-radius-slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:2px; outline:none;
  background:linear-gradient(90deg, #4FC3F7 100%, rgba(79,195,247,0.18) 100%);
}
.mt-radius-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:#4FC3F7; cursor:pointer;
  box-shadow:0 0 5px rgba(79,195,247,0.45);
}

/* save button */
.mt-save-btn {
  width:100%; padding:11px;
  background:linear-gradient(135deg,#1565C0,#4FC3F7);
  border:none; border-radius:8px; color:#fff;
  font-family:'Space Grotesk',sans-serif; font-size:.76rem;
  font-weight:700; letter-spacing:.06em; cursor:pointer;
  transition:opacity .15s; margin-top:2px;
}
.mt-save-btn:hover { opacity:.88; }
.mt-save-btn:disabled { opacity:.45; cursor:default; }

/* geocode results */
.mt-search-results {
  display:none; position:absolute; left:0; right:0; top:calc(100% + 2px);
  background:#0f1629; border:1px solid rgba(79,195,247,0.28);
  border-radius:8px; z-index:600; max-height:200px; overflow-y:auto;
  box-shadow:0 8px 28px rgba(0,0,0,0.7);
}
.mt-search-results.mt-show { display:block; }
.mt-search-result-item {
  padding:9px 12px; font-size:.72rem; color:#A0AEC0; cursor:pointer;
  border-bottom:1px solid rgba(79,195,247,0.07); transition:background .12s;
}
.mt-search-result-item:last-child { border-bottom:none; }
.mt-search-result-item:hover { background:rgba(79,195,247,0.1); color:#e8eaf6; }
.mt-search-result-item .mt-result-main { font-size:.72rem; color:#e8eaf6; }
.mt-search-result-item .mt-result-sub  { font-size:.6rem; color:rgba(160,174,192,0.5); margin-top:2px; }
.mt-search-wrap { position:relative; }

/* picked coord display */
.mt-picked-coord {
  display:none; font-size:.64rem; color:#4FC3F7;
  text-align:center; padding:5px 8px;
  background:rgba(79,195,247,0.06); border-radius:5px; margin-top:6px;
}
.mt-picked-coord.mt-show { display:block; }

/* ── FULL ASSESSMENT MODAL ── */
#mt-assess-overlay {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(4,8,18,0.85); backdrop-filter:blur(5px);
  align-items:center; justify-content:center; padding:12px;
}
#mt-assess-overlay.mt-show { display:flex; }

#mt-assess-modal {
  width:100%; max-width:400px;
  background:rgba(8,12,24,0.98);
  border:1px solid rgba(79,195,247,0.2); border-radius:14px;
  max-height:90vh; overflow-y:auto;
  animation:mt-slide-up .2s ease;
  box-shadow:0 8px 48px rgba(0,0,0,0.7);
}
#mt-assess-modal::-webkit-scrollbar { width:3px; }
#mt-assess-modal::-webkit-scrollbar-thumb { background:rgba(79,195,247,0.2); border-radius:2px; }

.mt-assess-header {
  display:flex; flex-direction:column; gap:6px;
  padding:12px 16px 10px 14px; border-bottom:1px solid rgba(79,195,247,0.1);
  position:sticky; top:0; background:rgba(8,12,24,0.98); z-index:1;
  position:sticky; /* kept */ 
}
/* Row 1: icon + name/geo/coords + X close button */
.mt-assess-header-row1 {
  display:flex; align-items:flex-start; gap:10px; width:100%;
}
.mt-assess-loc-icon { font-size:1.6rem; flex-shrink:0; margin-top:1px; }
.mt-assess-loc-info { flex:1; min-width:0; }
.mt-assess-loc-name {
  font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:700; color:#e8eaf6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mt-assess-loc-geo { font-size:.75rem; color:#4FC3F7; margin-top:2px; font-style:italic; min-height:.9rem; }
.mt-assess-loc-sub { font-size:.7rem; color:rgba(160,174,192,0.5); margin-top:1px; }
.mt-assess-close-btn { flex-shrink:0; align-self:flex-start; }
/* Row 2: centered threat badge */
.mt-assess-header-row2 {
  display:flex; justify-content:center; width:100%;
}
.mt-assess-header-row2 .mt-threat-badge { font-size:.8rem; padding:4px 14px; }

.mt-assess-body { padding:14px 16px; }
.mt-imm-risk-badge {
  display:inline-block; margin-top:8px; padding:3px 10px;
  border-radius:4px; font-size:.72rem; font-weight:700;
  letter-spacing:.05em; font-family:'Space Grotesk',sans-serif;
}

/* WTS ring */
.mt-ring-wrap { display:flex; flex-direction:column; align-items:center; margin:0 0 16px; }
.mt-ring-svg-wrap { position:relative; width:120px; height:120px; }
.mt-ring-svg-wrap svg { width:100%; height:100%; }
.mt-ring-center {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.mt-ring-num { font-family:'Space Grotesk',sans-serif; font-size:1.9rem; font-weight:700; line-height:1; }
.mt-ring-den { font-size:.56rem; color:rgba(160,174,192,0.5); margin-top:1px; }
.mt-ring-status-lbl {
  font-family:'Space Grotesk',sans-serif; font-size:.76rem; font-weight:700;
  margin-top:7px; letter-spacing:.05em;
}
.mt-ring-trend { font-size:.62rem; color:rgba(160,174,192,0.5); margin-top:3px; }

/* history sparkline section */
.mt-section-hdr {
  font-family:'Space Grotesk',sans-serif; font-size:.6rem; font-weight:700;
  letter-spacing:.1em; color:#7986CB; text-transform:uppercase;
  margin:14px 0 7px; display:flex; align-items:center; gap:8px;
}
.mt-section-hdr::after { content:''; flex:1; height:1px; background:rgba(79,195,247,0.1); }

.mt-spark-history {
  background:rgba(15,22,41,0.6); border:1px solid rgba(79,195,247,0.1);
  border-radius:8px; padding:10px; margin-bottom:14px;
}
.mt-spark-bars {
  display:flex; gap:4px; align-items:flex-end; height:44px; margin-bottom:6px;
}
.mt-spark-b { flex:1; border-radius:2px 2px 0 0; min-height:2px; transition:height .3s; }
.mt-spark-times {
  display:flex; justify-content:space-between;
  font-size:.54rem; color:rgba(160,174,192,0.4);
}

/* full threat cards */
.mt-threat-card {
  background:rgba(15,22,41,0.6); border:1px solid rgba(79,195,247,0.1);
  border-radius:9px; padding:11px; margin-bottom:9px;
}
.mt-tc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mt-tc-cat-badge {
  font-family:'Space Grotesk',sans-serif; font-size:.62rem; font-weight:700;
  letter-spacing:.05em; padding:3px 7px; border-radius:4px;
}
.mt-tc-dist { font-size:.8rem; font-weight:600; font-family:'Space Grotesk',sans-serif; }

.mt-tc-motion-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.mt-compass {
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(79,195,247,0.15); background:rgba(5,8,20,0.6);
  position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.mt-compass-n { position:absolute; top:2px; font-size:.42rem; color:rgba(160,174,192,0.4); }
.mt-compass-needle {
  width:2px; border-radius:1px; position:absolute;
  top:50%; left:50%; transform-origin:bottom center;
}
.mt-tc-motion-info { flex:1; }
.mt-tc-motion-lbl { font-size:.66rem; font-weight:600; }
.mt-tc-motion-sub { font-size:.6rem; color:rgba(160,174,192,0.5); margin-top:2px; }
.mt-tc-motion-detail { font-size:.58rem; color:rgba(160,174,192,0.45); margin-top:1px; }

.mt-tc-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
.mt-tc-stat {
  background:rgba(255,255,255,0.025); border-radius:5px; padding:6px 7px;
}
.mt-tc-stat-lbl { font-size:.55rem; color:rgba(160,174,192,0.45); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
.mt-tc-stat-val { font-size:.72rem; font-weight:600; font-family:'Space Grotesk',sans-serif; }

.mt-tc-contrib { margin-top:8px; }
.mt-tc-contrib-hdr { display:flex; justify-content:space-between; margin-bottom:3px; }
.mt-tc-contrib-lbl { font-size:.6rem; color:rgba(160,174,192,0.5); }
.mt-tc-contrib-val { font-size:.6rem; font-weight:600; font-family:'Space Grotesk',sans-serif; }
.mt-tc-contrib-track { height:4px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; }
.mt-tc-contrib-fill { height:100%; border-radius:2px; }

/* score breakdown */
.mt-breakdown {
  background:rgba(15,22,41,0.6); border:1px solid rgba(79,195,247,0.1);
  border-radius:9px; padding:11px; margin-bottom:14px;
}
.mt-bd-row { margin-bottom:8px; }
.mt-bd-hdr { display:flex; justify-content:space-between; margin-bottom:3px; }
.mt-bd-lbl { font-size:.62rem; color:rgba(160,174,192,0.55); }
.mt-bd-val { font-size:.62rem; font-weight:600; font-family:'Space Grotesk',sans-serif; }
.mt-bd-track { height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden; }
.mt-bd-fill  { height:100%; border-radius:2px; }
.mt-bd-total {
  border-top:1px solid rgba(79,195,247,0.1); margin-top:10px; padding-top:10px;
  display:flex; justify-content:space-between; align-items:center;
}
.mt-bd-total-lbl { font-family:'Space Grotesk',sans-serif; font-size:.68rem; font-weight:700; color:#7986CB; }
.mt-bd-total-val { font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:700; }

/* ── MAP: radius circles & pins ── */
.mt-map-pin-el {
  cursor:pointer; position:relative;
  display:flex; flex-direction:column; align-items:center;
}
.mt-map-pin-icon { font-size:1.5rem; line-height:1; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.7)); }
.mt-map-pin-badge {
  position:absolute; bottom:calc(100% + 1px); left:50%; transform:translateX(-50%);
  font-size:.5rem; font-weight:700; font-family:'Space Grotesk',sans-serif;
  padding:1px 5px; border-radius:8px; white-space:nowrap; letter-spacing:.03em;
  pointer-events:none;
}

/* pulse animation for danger/extreme */
@keyframes mt-ring-pulse {
  0%  { transform:scale(1); opacity:.6; }
  100%{ transform:scale(1.12); opacity:0; }
}
.mt-ring-pulse { animation:mt-ring-pulse 2s ease-out infinite; }

/* ── light mode ── */
body.light-mode .mt-loc-card { background:rgba(240,244,248,0.8); border-color:rgba(21,101,192,0.15); }
body.light-mode .mt-card-name { color:#0a0e1a; }
body.light-mode .mt-card-coords { color:rgba(74,85,104,0.6); }
body.light-mode .mt-card-detail { background:rgba(220,230,245,0.4); border-top-color:rgba(21,101,192,0.12); }
body.light-mode .mt-add-btn { background:rgba(21,101,192,0.07); border-color:rgba(21,101,192,0.25); color:#1565C0; }
body.light-mode .mt-input { background:rgba(240,244,248,0.9); border-color:rgba(21,101,192,0.2); color:#0a0e1a; }
body.light-mode .mt-modal-title { color:#1565C0; }
body.light-mode #mt-modal-sheet { background:rgba(240,244,248,0.99); border-color:rgba(21,101,192,0.2); }
/* ── MT: missing dynamic classes ── */
/* map pin */
.mt-map-pin { display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.mt-pin-icon { font-size:1.6rem; line-height:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.75)); }
.mt-pin-label {
  font-family:'Space Grotesk',sans-serif; font-size:.52rem; font-weight:600;
  background:rgba(8,12,28,0.85); color:#e8eaf6; padding:1px 5px;
  border-radius:4px; margin-top:2px; white-space:nowrap; max-width:80px;
  overflow:hidden; text-overflow:ellipsis; pointer-events:none;
}
.mt-pin-badge {
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  font-size:.5rem; font-weight:700; font-family:'Space Grotesk',sans-serif;
  padding:1px 5px; border-radius:8px; white-space:nowrap;
  pointer-events:none; min-width:18px; text-align:center;
}

/* card sub-elements */
.mt-card-meta { font-size:.68rem; color:rgba(160,174,192,0.5); margin-top:2px; }
.mt-card-score { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; gap:1px; min-width:66px; }
.mt-score-val { font-family:'Space Grotesk',sans-serif; font-size:1.15rem; font-weight:700; line-height:1; }
.mt-score-label { font-size:.58rem; font-weight:700; letter-spacing:.05em; opacity:.85; }
.mt-trend-arrow { font-size:.75rem; opacity:.7; }

/* card action btns */
.mt-btn {
  background:rgba(79,195,247,0.07); border:1px solid rgba(79,195,247,0.2);
  color:#4FC3F7; border-radius:5px; padding:5px 9px;
  font-size:.7rem; font-weight:600; cursor:pointer;
  font-family:'Space Grotesk',sans-serif; letter-spacing:.03em;
  transition:background .15s; white-space:nowrap; flex-shrink:0;
}
.mt-btn:hover { background:rgba(79,195,247,0.15); }
.mt-btn.active { background:rgba(79,195,247,0.2); border-color:rgba(79,195,247,0.5); }
.mt-btn-danger { color:#ff6b6b; border-color:rgba(255,107,107,0.25); background:rgba(255,107,107,0.07); }
.mt-btn-danger:hover { background:rgba(255,107,107,0.16); }
.mt-disabled { opacity:.5; }

/* assessment modal body */
.mt-assess-score-row {
  display:flex; align-items:center; gap:14px; margin-bottom:16px;
  padding:12px; background:rgba(15,22,41,0.5); border-radius:10px;
  border:1px solid rgba(79,195,247,0.1);
}
.mt-big-score {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:72px; height:72px; border-radius:50%;
  border:2px solid currentColor; flex-shrink:0;
}
.mt-big-score-val { font-family:'Space Grotesk',sans-serif; font-size:1.6rem; font-weight:700; line-height:1; }
.mt-big-score-label { font-size:.48rem; font-weight:700; letter-spacing:.07em; margin-top:2px; }
.mt-assess-meta { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.mt-assess-trend { font-family:'Space Grotesk',sans-serif; font-size:.72rem; font-weight:700; }
.mt-sparkline-wrap { display:flex; flex-direction:column; gap:2px; }
.mt-sparkline { display:block; }
.mt-sparkline-label { font-size:.54rem; color:rgba(160,174,192,0.45); }
.mt-compass-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; }
.mt-compass-label { font-size:.52rem; color:rgba(160,174,192,0.5); text-align:center; }

/* assess sections */
.mt-assess-section { margin-bottom:14px; }
.mt-assess-section-title {
  font-family:'Space Grotesk',sans-serif; font-size:.6rem; font-weight:700;
  letter-spacing:.1em; color:#7986CB; text-transform:uppercase;
  margin-bottom:8px; display:flex; align-items:center; gap:8px;
}
.mt-assess-section-title::after { content:''; flex:1; height:1px; background:rgba(79,195,247,0.1); }

/* threat table */
.mt-assess-table-wrap { overflow-x:auto; }
.mt-assess-table {
  width:100%; border-collapse:collapse; font-size:.62rem;
}
.mt-assess-table th {
  padding:5px 7px; text-align:left;
  color:rgba(160,174,192,0.5); font-weight:600; letter-spacing:.06em; font-size:.57rem;
  border-bottom:1px solid rgba(79,195,247,0.1);
}
.mt-assess-table td {
  padding:6px 7px; border-bottom:1px solid rgba(79,195,247,0.06);
  color:#e8eaf6;
}
.mt-assess-table tr:last-child td { border-bottom:none; }

/* WTS scale */
.mt-wts-scale { display:flex; flex-direction:column; gap:4px; }
.mt-scale-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 9px; border-radius:5px; border:1px solid transparent;
  font-size:.62rem; transition:background .2s;
}
.mt-scale-active { border-width:1px; }

/* assess actions */
.mt-assess-actions {
  display:flex; gap:7px; flex-wrap:wrap;
  padding-top:12px; border-top:1px solid rgba(79,195,247,0.1);
  margin-top:4px;
}

/* search results — see primary definition above */

/* ── MT: Assessment modal — simplified layout ── */
.mt-alert-banner {
  display:flex; align-items:flex-start; gap:9px;
  padding:9px 11px; margin-bottom:12px;
  border-radius:8px; border-left:3px solid;
  animation: mt-banner-pulse 2.4s ease-in-out infinite;
}
.mt-alert-banner + .mt-alert-banner { margin-top:-6px; }
.mt-alert-banner-icon { font-size:1rem; line-height:1.3; flex-shrink:0; }
.mt-alert-banner-body { flex:1; min-width:0; }
.mt-alert-banner-title {
  font-family:'Space Grotesk',sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; line-height:1.2;
}
.mt-alert-banner-sub {
  font-size:.57rem; opacity:.75; margin-top:2px; line-height:1.3;
}
@keyframes mt-banner-pulse {
  0%,100% { opacity:1; }
  50%      { opacity:0.72; }
}
body.light-mode .mt-alert-banner { background:rgba(0,0,0,0.04) !important; }

.mt-two-panel { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.mt-panel-imm, .mt-panel-wts { background:rgba(255,255,255,0.03); border-radius:10px; padding:13px 14px; display:flex; flex-direction:column; gap:5px; min-width:0; }
.mt-panel-imm { border:1px solid #69F0AE33; }
.mt-panel-wts { border:1px solid rgba(79,195,247,0.12); }
.mt-panel-label { font-size:.6rem; font-weight:700; letter-spacing:.07em; color:rgba(160,174,192,0.55); text-transform:uppercase; margin-bottom:2px; }
.mt-panel-icon { font-size:1.7rem; line-height:1.1; }
/* Action verb in Immediate Hazard panel — bold, prominent */
.mt-panel-action { font-family:'Space Grotesk',sans-serif; font-size:.88rem; font-weight:800; line-height:1.15; letter-spacing:.03em; text-transform:uppercase; }
.mt-panel-desc { font-size:.67rem; color:rgba(160,174,192,0.65); line-height:1.4; margin-top:3px; }
/* Small driver note inside Hazard Index desc */
.mt-panel-driver { font-size:.65rem; color:rgba(160,174,192,0.45); font-style:italic; }
.mt-panel-score-row { display:flex; align-items:baseline; gap:4px; }
.mt-panel-wts-status { display:flex; align-items:center; gap:6px; font-family:'Space Grotesk',sans-serif; font-size:.82rem; font-weight:700; flex-wrap:wrap; }
.mt-score-block {
  background:rgba(15,22,41,0.6); border:1px solid rgba(79,195,247,0.1);
  border-radius:10px; padding:13px 14px; margin-bottom:12px;
}
.mt-score-top {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.mt-score-label-row { display:flex; align-items:center; flex-wrap:wrap; gap:2px; }
.mt-score-status-icon { font-size:1rem; line-height:1; }
.mt-score-status-txt  { font-family:'Space Grotesk',sans-serif; font-size:.82rem; font-weight:700; }
.mt-score-trend       { font-size:.72rem; font-weight:600; opacity:.9; }
.mt-score-num {
  font-family:'Space Grotesk',sans-serif; font-size:1.95rem; font-weight:700;
  line-height:1; flex-shrink:0;
}
.mt-score-den { font-size:.82rem; opacity:.5; font-weight:400; }
.mt-score-bar-track {
  height:8px; background:rgba(255,255,255,0.07); border-radius:4px; overflow:hidden;
}
.mt-score-bar-fill { height:100%; border-radius:4px; transition:width .5s ease; }

/* Threat section */
.mt-threat-section { margin-bottom:12px; }
.mt-threat-section-hdr {
  font-family:'Space Grotesk',sans-serif; font-size:.58rem; font-weight:700;
  letter-spacing:.1em; color:#7986CB; text-transform:uppercase;
  margin-bottom:8px; display:flex; align-items:center; gap:5px;
}
.mt-threat-section-hdr::after { content:''; flex:1; height:1px; background:rgba(79,195,247,0.1); }
.mt-threat-radius { font-weight:400; opacity:.7; text-transform:none; letter-spacing:0; }

.mt-threat-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; margin-bottom:5px;
  background:rgba(15,22,41,0.5); border:1px solid rgba(79,195,247,0.08);
  border-radius:7px;
}
.mt-tr-left  { display:flex; align-items:center; gap:9px; flex:1; min-width:0; }
.mt-tr-dot   { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.mt-tr-cat   { font-family:'Space Grotesk',sans-serif; font-size:.7rem; font-weight:700; }
.mt-tr-motion{ font-size:.6rem; margin-top:2px; }
.mt-tr-right { flex-shrink:0; text-align:right; }
.mt-tr-dist  { font-family:'Space Grotesk',sans-serif; font-size:.66rem; font-weight:600; color:#e8eaf6; }

.mt-no-threats {
  text-align:center; padding:16px 10px; font-size:.8rem;
  color:rgba(105,240,174,0.8); font-style:italic;
  background:rgba(105,240,174,0.05); border-radius:7px;
  border:1px solid rgba(105,240,174,0.12);
}

/* Hazard trend chart */
.mt-chart-section {
  margin-bottom:14px;
}
.mt-chart-section-hdr {
  font-family:'Space Grotesk',sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:.1em; color:#7986CB; text-transform:uppercase;
  margin-bottom:8px; display:flex; align-items:center; gap:5px;
}
.mt-chart-section-hdr::after { content:''; flex:1; height:1px; background:rgba(79,195,247,0.1); }
.mt-chart-wrap {
  position:relative; width:100%; border-radius:10px; overflow:hidden;
  background:rgba(10,14,26,0.6); border:1px solid rgba(79,195,247,0.10);
}
.mt-chart-canvas {
  display:block; width:100%; height:100px;
}
.mt-chart-no-data {
  text-align:center; padding:28px 10px; font-size:.68rem;
  color:rgba(160,174,192,0.4); font-style:italic;
}
/* Chart time-window button bar */
.mt-chart-time-bar {
  display:flex; gap:4px; margin-bottom:7px; justify-content:flex-end;
}
.mt-chart-time-btn {
  font-family:'Space Grotesk',sans-serif; font-size:.58rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:5px; border:1px solid rgba(79,195,247,0.18);
  background:transparent; color:rgba(160,174,192,0.5);
  cursor:pointer; transition:all .15s ease; line-height:1.6;
}
.mt-chart-time-btn:hover {
  background:rgba(79,195,247,0.08); color:rgba(160,174,192,0.85);
  border-color:rgba(79,195,247,0.3);
}
.mt-chart-time-btn.mt-chart-time-active {
  background:rgba(79,195,247,0.15); color:#4FC3F7;
  border-color:rgba(79,195,247,0.45);
}
/* compact threat list below chart */
.mt-threats-compact { margin-top:10px; }
.mt-threats-compact-hdr {
  font-family:'Space Grotesk',sans-serif; font-size:.55rem; font-weight:700;
  letter-spacing:.08em; color:rgba(121,134,203,0.7); text-transform:uppercase;
  margin-bottom:6px;
}

/* Footer */
.mt-assess-footer {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px;
  padding-top:10px; border-top:1px solid rgba(79,195,247,0.1);
}
.mt-assess-updated { font-size:.68rem; color:rgba(160,174,192,0.45); }

/* light mode */
body.light-mode .mt-score-block    { background:rgba(220,230,245,0.6); border-color:rgba(21,101,192,0.12); }
body.light-mode .mt-threat-row     { background:rgba(220,230,245,0.5); border-color:rgba(21,101,192,0.1); }
body.light-mode .mt-tr-dist        { color:#0a0e1a; }
body.light-mode .mt-assess-updated { color:rgba(74,85,104,0.5); }

/* icon grid selection */
.mt-icon-opt { cursor:pointer; transition:transform .1s, background .12s; }
.mt-icon-opt.mt-selected { background:rgba(79,195,247,0.25) !important; border-color:rgba(79,195,247,0.5) !important; transform:scale(1.1); }

/* picked coord display */
.mt-picked-coord {
  font-size:.62rem; color:#69F0AE; margin-top:5px; text-align:center;
  font-family:'Space Grotesk',sans-serif; min-height:14px;
}

/* light mode overrides */
body.light-mode .mt-btn { background:rgba(21,101,192,0.07); border-color:rgba(21,101,192,0.25); color:#1565C0; }
body.light-mode .mt-card-meta { color:rgba(74,85,104,0.6); }
body.light-mode .mt-assess-table td { color:#0a0e1a; }
body.light-mode .mt-search-results { background:rgba(240,244,248,0.99); border-color:rgba(21,101,192,0.2); }
body.light-mode .mt-search-result-item { color:#1a237e; }
body.light-mode .mt-search-result-item .mt-result-main { color:#0a0e1a; }
body.light-mode .mt-search-result-item:hover { background:rgba(21,101,192,0.08); }

/* ═══════════════════════════════════════════════════════════════════
   MT PANEL SUBSECTIONS  (PR #188 – Current Location Monitoring)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Subsection wrapper ── */
.mt-subsec {
  margin-bottom: 4px;
}
.mt-subsec + .mt-subsec {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 6px;
  margin-top: 2px;
}
.mt-subsec-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 5px 2px;
}
.mt-subsec-title {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
body.light-mode .mt-subsec-title { color: rgba(74,85,104,0.5); }
body.light-mode .mt-subsec + .mt-subsec { border-color: rgba(0,0,0,0.07); }

/* ── Current location card ── */
.mt-curloc-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.light-mode .mt-curloc-card {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}

/* ── Main row (title + toggle) ── */
.mt-curloc-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mt-curloc-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mt-curloc-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}
.mt-curloc-sub {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.38);
}
body.light-mode .mt-curloc-title { color: rgba(10,14,26,0.85); }
body.light-mode .mt-curloc-sub   { color: rgba(74,85,104,0.55); }

/* ── Toggle switch ── */
.mt-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.mt-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.mt-toggle-slider {
  display: block;
  width: 34px;
  height: 18px;
  background: rgba(255,255,255,0.18);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.35);
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.mt-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  transition: transform 0.2s, background 0.2s;
}
.mt-toggle input:checked + .mt-toggle-slider {
  background: rgba(79,195,247,0.55);
  border-color: rgba(79,195,247,0.7);
}
.mt-toggle input:checked + .mt-toggle-slider::after {
  transform: translateX(16px);
  background: #4FC3F7;
}
.mt-toggle-sm .mt-toggle-slider {
  width: 28px;
  height: 15px;
}
.mt-toggle-sm .mt-toggle-slider::after {
  width: 10px;
  height: 10px;
}
.mt-toggle-sm input:checked + .mt-toggle-slider::after {
  transform: translateX(13px);
}
body.light-mode .mt-toggle-slider {
  background: rgba(0,0,0,0.1);
  border-color: rgba(0,0,0,0.15);
}
body.light-mode .mt-toggle-slider::after { background: rgba(0,0,0,0.4); }
body.light-mode .mt-toggle input:checked + .mt-toggle-slider {
  background: rgba(21,101,192,0.45);
  border-color: rgba(21,101,192,0.6);
}
body.light-mode .mt-toggle input:checked + .mt-toggle-slider::after { background: #1565C0; }

/* ── GPS pill ── */
.mt-gps-pill {
  font-size: 0.65rem;
  font-family: 'Space Mono', 'Courier New', monospace;
  color: #4FC3F7;
  background: rgba(79,195,247,0.08);
  border: 1px solid rgba(79,195,247,0.2);
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mt-gps-pill-wait {
  color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
body.light-mode .mt-gps-pill { color: #1565C0; background: rgba(21,101,192,0.06); border-color: rgba(21,101,192,0.18); }

/* ── Score button ── */
.mt-curloc-score-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 5px 9px;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  transition: background 0.15s, border-color 0.15s;
}
.mt-curloc-score-btn:hover { filter: brightness(1.15); }
.mt-curloc-score-num {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}
.mt-curloc-score-den {
  font-size: 0.65rem;
  opacity: 0.55;
  align-self: flex-end;
  margin-bottom: 1px;
}
.mt-curloc-score-label {
  font-size: 0.73rem;
  font-weight: 600;
  flex: 1;
  text-align: left;
  margin-left: 3px;
}
.mt-curloc-score-arrow {
  font-size: 0.55rem;
  opacity: 0.5;
  margin-left: auto;
}
.mt-curloc-score-wait {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.3);
  padding: 4px 0;
}

/* ── Curloc radius row ── */
.mt-curloc-radius-row {
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
body.light-mode .mt-curloc-radius-row { border-bottom-color: rgba(0,0,0,0.06); }

/* ── In-motion row ── */
.mt-motion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.mt-motion-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.mt-motion-icon { font-size: 0.85rem; flex-shrink: 0; }
.mt-motion-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
}
.mt-motion-desc {
  display: block;
  font-size: 0.64rem;
  color: rgba(255,255,255,0.3);
}
body.light-mode .mt-motion-title { color: rgba(10,14,26,0.75); }
body.light-mode .mt-motion-desc  { color: rgba(74,85,104,0.5); }
body.light-mode .mt-motion-row   { border-color: rgba(0,0,0,0.06); }

/* ── Error message ── */
.mt-curloc-error {
  font-size: 0.60rem;
  color: #FF5252;
  background: rgba(255,82,82,0.08);
  border: 1px solid rgba(255,82,82,0.2);
  border-radius: 4px;
  padding: 4px 8px;
}

/* ── GPS pulse marker with hazard ring ── */
/* Outer pulse wrapper — expanded to contain the hazard ring */
.mt-curloc-pulse {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

/* Hazard index ring — colored border circle surrounding the GPS dot */
.mt-curloc-hazard-ring {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2.5px solid rgba(79,195,247,0.55);
  background: rgba(79,195,247,0.08);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

/* Score number badge — sits above the ring, centered at top */
.mt-curloc-hazard-score {
  position: absolute;
  top: -9px; left: 50%; transform: translateX(-50%);
  min-width: 20px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.52rem; font-weight: 700;
  border-radius: 7px;
  padding: 0 4px;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
  transition: background 0.4s ease, color 0.4s ease;
}

/* GPS dot — centered inside the hazard ring */
.mt-curloc-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #4FC3F7;
  box-shadow: 0 0 0 0 rgba(79,195,247,0.6);
  animation: mt-gps-pulse 2s ease-out infinite;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
@keyframes mt-gps-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(79,195,247,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(79,195,247,0.0); }
  100% { box-shadow: 0 0 0 0   rgba(79,195,247,0.0); }
}

/* ── Assessment modal: Live GPS pill (shown only for current location) ── */
.mt-assess-livegps-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.58rem;
  font-weight: 600;
  color: #4FC3F7;
  background: rgba(79,195,247,0.1);
  border: 1px solid rgba(79,195,247,0.3);
  border-radius: 4px;
  padding: 2px 7px;
  animation: mt-livegps-blink 2s ease-in-out infinite;
  margin-left: 6px;
}
@keyframes mt-livegps-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}
body.light-mode .mt-assess-livegps-pill {
  color: #1565C0;
  background: rgba(21,101,192,0.08);
  border-color: rgba(21,101,192,0.25);
}

/* ══════════════════════════════════════════════════════════════
   ACCOUNT PANEL — Side panel psec section
══════════════════════════════════════════════════════════════ */

.ptitle-account { display:flex; align-items:center; gap:6px; }

/* Loading placeholder */
.acct-loading {
  font-size:.65rem; color:rgba(255,255,255,0.25);
  padding:10px 2px; text-align:center;
}

/* ── Logged-out state ── */
.acct-guest-wrap {
  display:flex; flex-direction:column; gap:8px; padding:2px 0;
}
.acct-guest-tagline {
  font-size:.63rem; color:rgba(255,255,255,0.45); line-height:1.5;
  padding:0 2px 2px;
}
.acct-guest-tagline strong { color:rgba(255,255,255,0.65); font-weight:600; }
.acct-btn-row { display:flex; gap:7px; }
.acct-btn {
  flex:1; padding:8px 10px; border-radius:8px; border:none;
  font-family:'Inter',sans-serif; font-size:.72rem; font-weight:600;
  cursor:pointer; transition:background .15s, transform .1s;
  text-align:center; line-height:1;
}
.acct-btn:active { transform:scale(.97); }
.acct-btn-signin {
  background:rgba(79,195,247,0.15); color:#4FC3F7;
  border:1px solid rgba(79,195,247,0.3);
}
.acct-btn-signin:hover { background:rgba(79,195,247,0.22); }
.acct-btn-signup {
  background:linear-gradient(135deg,#4FC3F7,#1565C0); color:#fff;
  border:1px solid transparent;
}
.acct-btn-signup:hover { filter:brightness(1.1); }

/* ── Logged-in state ── */
.acct-user-wrap { display:flex; flex-direction:column; gap:10px; padding:2px 0; }

.acct-user-row {
  display:flex; align-items:center; gap:10px;
}
.acct-avatar {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#4FC3F7,#1565C0);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:700; color:#fff;
  font-family:'Space Grotesk',sans-serif;
}
.acct-user-info { flex:1; min-width:0; }
.acct-user-name {
  font-size:.78rem; font-weight:600; color:rgba(255,255,255,0.9);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.acct-user-email {
  font-size:.6rem; color:rgba(255,255,255,0.4);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Tier badge */
.tier-badge {
  display:inline-flex; align-items:center; gap:3px;
  font-size:.57rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; border-radius:4px;
  padding:2px 6px; flex-shrink:0;
}
.tier-badge-free  { background:rgba(176,190,197,0.12); color:rgba(176,190,197,0.7);  border:1px solid rgba(176,190,197,0.2);  }
.tier-badge-tier1 { background:rgba(79,195,247,0.12);  color:#4FC3F7;                border:1px solid rgba(79,195,247,0.3);   }
.tier-badge-tier2 { background:rgba(255,193,7,0.12);   color:#FFC107;                border:1px solid rgba(255,193,7,0.3);    }
.tier-badge-tier3 { background:rgba(255,82,82,0.12);   color:#FF5252;                border:1px solid rgba(255,82,82,0.3);    }
.tier-badge-tier4 { background:rgba(156,39,176,0.15);  color:#CE93D8;                border:1px solid rgba(156,39,176,0.35);  }

/* Action buttons for logged-in state */
.acct-action-row { display:flex; gap:7px; }
.acct-action-btn {
  flex:1; padding:7px 8px; border-radius:7px; border:none;
  font-family:'Inter',sans-serif; font-size:.67rem; font-weight:600;
  cursor:pointer; transition:background .15s, transform .1s;
  text-align:center;
}
.acct-action-btn:active { transform:scale(.97); }
.acct-settings-btn {
  background:rgba(79,195,247,0.1); color:rgba(255,255,255,0.7);
  border:1px solid rgba(79,195,247,0.2);
}
.acct-settings-btn:hover { background:rgba(79,195,247,0.18); color:#fff; }
.acct-signout-btn {
  background:rgba(255,82,82,0.08); color:rgba(255,82,82,0.75);
  border:1px solid rgba(255,82,82,0.2);
}
.acct-signout-btn:hover { background:rgba(255,82,82,0.15); color:#FF5252; }

/* Sync status line */
.acct-sync-row {
  font-size:.58rem; color:rgba(255,255,255,0.3);
  display:flex; align-items:center; gap:5px;
  padding:0 2px;
}
.acct-sync-dot {
  width:5px; height:5px; border-radius:50%; flex-shrink:0;
  background:rgba(76,175,80,0.7);
}

/* ══════════════════════════════════════════════════════════════
   AUTH MODAL — Login / Sign Up bottom sheet
══════════════════════════════════════════════════════════════ */

#auth-modal-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(3px);
  display:none; align-items:flex-end; justify-content:center;
  touch-action: auto; /* override body's 'manipulation' — allow all touch events on inputs */
}
#auth-modal-overlay.lp-show { display:flex !important; }
#auth-modal-sheet {
  width:100%; max-width:480px;
  background:#0f1629;
  border-top:1px solid rgba(79,195,247,0.15);
  border-radius:20px 20px 0 0;
  padding-bottom:env(safe-area-inset-bottom, 16px);
  animation:slideUpSheet .25s ease;
  max-height:90vh; overflow-y:auto;
  -webkit-overflow-scrolling: touch; /* iOS: native momentum scroll */
  touch-action: pan-y;               /* allow vertical pan inside sheet; unblocks input taps */
}
@keyframes slideUpSheet {
  from { transform:translateY(100%); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
.auth-modal-handle {
  width:40px; height:4px; border-radius:2px;
  background:rgba(255,255,255,0.15);
  margin:12px auto 0; display:block;
}

/* Tab switcher */
.auth-tabs {
  display:flex; margin:16px 20px 0; gap:0;
  background:rgba(255,255,255,0.05); border-radius:10px; padding:3px;
}
.auth-tab {
  flex:1; padding:9px 0; border:none; border-radius:8px;
  font-family:'Inter',sans-serif; font-size:.82rem; font-weight:600;
  cursor:pointer; transition:background .15s, color .15s;
  background:transparent; color:rgba(255,255,255,0.45);
}
.auth-tab.active {
  background:linear-gradient(135deg,#4FC3F7,#1565C0); color:#fff;
}

/* Form body */
.auth-form-body { padding:16px 20px 20px; display:flex; flex-direction:column; gap:14px; }

.auth-field { display:flex; flex-direction:column; gap:5px; }
.auth-label {
  font-size:.67rem; font-weight:600; color:rgba(255,255,255,0.55);
  text-transform:uppercase; letter-spacing:.06em;
}
.auth-input {
  background:rgba(255,255,255,0.06); border:1px solid rgba(79,195,247,0.2);
  border-radius:9px; padding:11px 14px;
  font-family:'Inter',sans-serif; font-size:.82rem; color:#fff;
  outline:none; transition:border-color .15s, background .15s;
  width:100%;
}
.auth-input:focus {
  border-color:rgba(79,195,247,0.55); background:rgba(79,195,247,0.06);
}
.auth-input::placeholder { color:rgba(255,255,255,0.25); }

/* Error message */
.auth-error {
  font-size:.67rem; color:#FF5252;
  background:rgba(255,82,82,0.08); border:1px solid rgba(255,82,82,0.2);
  border-radius:7px; padding:8px 12px; display:none;
}
.auth-error.visible { display:block; }

/* Submit button */
.auth-submit-btn {
  width:100%; padding:13px; border:none; border-radius:10px;
  background:linear-gradient(135deg,#4FC3F7,#1565C0); color:#fff;
  font-family:'Inter',sans-serif; font-size:.92rem; font-weight:700;
  cursor:pointer; transition:filter .15s, transform .1s;
  letter-spacing:.02em;
}
.auth-submit-btn:hover { filter:brightness(1.1); }
.auth-submit-btn:active { transform:scale(.98); }
.auth-submit-btn:disabled {
  opacity:.5; cursor:not-allowed; filter:none; transform:none;
}

/* Switch hint below form */
.auth-switch-hint {
  text-align:center; font-size:.67rem; color:rgba(255,255,255,0.35);
  padding:0 20px 20px;
}
.auth-switch-hint a {
  color:#4FC3F7; text-decoration:none; font-weight:600; cursor:pointer;
}
.auth-switch-hint a:hover { text-decoration:underline; }

/* Terms hint */
.auth-terms {
  text-align:center; font-size:.6rem; color:rgba(255,255,255,0.25);
  padding:0 20px 4px; line-height:1.5;
}

/* ══════════════════════════════════════════════════════════════
   ACCOUNT SETTINGS MODAL — Profile / Password / Delete
══════════════════════════════════════════════════════════════ */

#acct-settings-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(3px);
  display:none; align-items:flex-end; justify-content:center;
  touch-action: auto; /* override body's 'manipulation' — allow all touch events on inputs */
}
#acct-settings-overlay.lp-show { display:flex !important; }
#acct-settings-sheet {
  width:100%; max-width:480px;
  background:#0f1629;
  border-top:1px solid rgba(79,195,247,0.15);
  border-radius:20px 20px 0 0;
  padding-bottom:env(safe-area-inset-bottom, 16px);
  animation:slideUpSheet .25s ease;
  max-height:92vh; overflow-y:auto;
  -webkit-overflow-scrolling: touch; /* iOS: native momentum scroll */
  touch-action: pan-y;               /* allow vertical pan inside sheet; unblocks input taps */
}

/* Modal header (shared pattern) */
.prof-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 12px;
  border-bottom:1px solid rgba(79,195,247,0.08);
}
.prof-title {
  font-family:'Space Grotesk',sans-serif;
  font-size:.9rem; font-weight:700; color:#fff;
}
.prof-close-btn {
  background:transparent; border:none; color:rgba(255,255,255,0.4);
  font-size:1.1rem; cursor:pointer; padding:4px 6px; border-radius:6px;
  transition:color .15s, background .15s; line-height:1;
}
.prof-close-btn:hover { color:#fff; background:rgba(255,255,255,0.08); }

/* Profile body */
.prof-body { padding:16px 20px; display:flex; flex-direction:column; gap:16px; }

/* User identity row */
.prof-identity-row {
  display:flex; align-items:center; gap:12px;
}
.prof-avatar-lg {
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#4FC3F7,#1565C0);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:700; color:#fff;
  font-family:'Space Grotesk',sans-serif;
}
.prof-identity-info { flex:1; min-width:0; }
.prof-identity-name {
  font-size:.88rem; font-weight:600; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.prof-identity-email {
  font-size:.65rem; color:rgba(255,255,255,0.4);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-top:2px;
}
.prof-tier-row { display:flex; align-items:center; gap:7px; margin-top:5px; }

/* Section cards */
.prof-card {
  background:rgba(255,255,255,0.03); border:1px solid rgba(79,195,247,0.1);
  border-radius:12px; padding:14px 16px;
  display:flex; flex-direction:column; gap:10px;
}
.prof-card-title {
  font-size:.63rem; font-weight:700; color:rgba(255,255,255,0.4);
  text-transform:uppercase; letter-spacing:.08em;
}

/* Name field with inline edit */
.prof-name-row {
  display:flex; align-items:center; gap:8px;
}
.prof-name-display {
  flex:1; font-size:.82rem; color:#fff; font-weight:500;
}
.prof-edit-btn {
  background:transparent; border:1px solid rgba(79,195,247,0.25);
  color:rgba(79,195,247,0.8); border-radius:6px;
  padding:4px 9px; font-size:.62rem; font-weight:600;
  cursor:pointer; transition:background .15s, color .15s;
}
.prof-edit-btn:hover { background:rgba(79,195,247,0.1); color:#4FC3F7; }

.prof-name-edit-row {
  display:flex; align-items:center; gap:7px;
}
.prof-name-input {
  flex:1; background:rgba(255,255,255,0.07); border:1px solid rgba(79,195,247,0.3);
  border-radius:8px; padding:8px 12px;
  font-family:'Inter',sans-serif; font-size:.82rem; color:#fff;
  outline:none;
}
.prof-name-input:focus { border-color:rgba(79,195,247,0.6); }
.prof-save-btn {
  background:linear-gradient(135deg,#4FC3F7,#1565C0); color:#fff;
  border:none; border-radius:7px; padding:8px 13px;
  font-size:.7rem; font-weight:700; cursor:pointer; flex-shrink:0;
  transition:filter .15s;
}
.prof-save-btn:hover { filter:brightness(1.1); }
.prof-cancel-btn {
  background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.5);
  border:none; border-radius:7px; padding:8px 10px;
  font-size:.7rem; cursor:pointer; flex-shrink:0;
}

/* Info rows */
.prof-info-row {
  display:flex; justify-content:space-between; align-items:center;
  font-size:.75rem;
}
.prof-info-label { color:rgba(255,255,255,0.4); font-size:.68rem; }
.prof-info-value { color:rgba(255,255,255,0.8); font-weight:500; }

/* Action buttons in profile modal */
.prof-action-btn {
  width:100%; padding:11px; border-radius:10px; border:none;
  font-family:'Inter',sans-serif; font-size:.78rem; font-weight:600;
  cursor:pointer; transition:background .15s, filter .15s, transform .1s;
  text-align:center;
}
.prof-action-btn:active { transform:scale(.98); }
.prof-change-pw-btn {
  background:rgba(79,195,247,0.1); color:#4FC3F7;
  border:1px solid rgba(79,195,247,0.25);
}
.prof-change-pw-btn:hover { background:rgba(79,195,247,0.18); }
.prof-delete-btn {
  background:rgba(255,82,82,0.07); color:rgba(255,82,82,0.7);
  border:1px solid rgba(255,82,82,0.2);
}
.prof-delete-btn:hover { background:rgba(255,82,82,0.14); color:#FF5252; }

/* Password change sub-form */
.prof-pw-form {
  display:flex; flex-direction:column; gap:10px;
}
.prof-pw-field { display:flex; flex-direction:column; gap:4px; }
.prof-pw-label {
  font-size:.63rem; font-weight:600; color:rgba(255,255,255,0.45);
  text-transform:uppercase; letter-spacing:.06em;
}
.prof-pw-input {
  background:rgba(255,255,255,0.06); border:1px solid rgba(79,195,247,0.2);
  border-radius:8px; padding:10px 12px;
  font-family:'Inter',sans-serif; font-size:.82rem; color:#fff;
  outline:none; width:100%;
  transition:border-color .15s;
}
.prof-pw-input:focus { border-color:rgba(79,195,247,0.5); }
.prof-pw-submit-btn {
  width:100%; padding:11px; border:none; border-radius:9px;
  background:linear-gradient(135deg,#4FC3F7,#1565C0); color:#fff;
  font-family:'Inter',sans-serif; font-size:.78rem; font-weight:700;
  cursor:pointer; transition:filter .15s;
}
.prof-pw-submit-btn:hover { filter:brightness(1.1); }
.prof-error {
  font-size:.65rem; color:#FF5252;
  background:rgba(255,82,82,0.08); border:1px solid rgba(255,82,82,0.18);
  border-radius:6px; padding:7px 10px; display:none;
}
.prof-error.visible { display:block; }
.prof-success {
  font-size:.65rem; color:#4CAF50;
  background:rgba(76,175,80,0.08); border:1px solid rgba(76,175,80,0.2);
  border-radius:6px; padding:7px 10px; display:none;
}
.prof-success.visible { display:block; }

/* Delete confirmation */
.prof-delete-confirm {
  display:flex; flex-direction:column; gap:10px;
}
.prof-delete-warning {
  font-size:.72rem; color:rgba(255,82,82,0.85); line-height:1.5;
  background:rgba(255,82,82,0.06); border:1px solid rgba(255,82,82,0.2);
  border-radius:8px; padding:10px 12px;
}
.prof-delete-confirm-btn {
  width:100%; padding:11px; border:none; border-radius:9px;
  background:rgba(255,82,82,0.15); color:#FF5252;
  border:1px solid rgba(255,82,82,0.3);
  font-family:'Inter',sans-serif; font-size:.78rem; font-weight:700;
  cursor:pointer; transition:background .15s;
}
.prof-delete-confirm-btn:hover { background:rgba(255,82,82,0.25); }
.prof-cancel-link {
  text-align:center; font-size:.67rem; color:rgba(255,255,255,0.35);
  cursor:pointer; padding:4px 0;
}
.prof-cancel-link:hover { color:rgba(255,255,255,0.6); }

/* Upgrade CTA for free tier */
.prof-upgrade-cta {
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,rgba(79,195,247,0.08),rgba(21,101,192,0.12));
  border:1px solid rgba(79,195,247,0.2); border-radius:10px;
  padding:12px 14px;
}
.prof-upgrade-icon { font-size:1.2rem; flex-shrink:0; }
.prof-upgrade-text { flex:1; }
.prof-upgrade-title {
  font-size:.75rem; font-weight:700; color:#4FC3F7; line-height:1.3;
}
.prof-upgrade-sub {
  font-size:.62rem; color:rgba(255,255,255,0.4); margin-top:2px;
}
.prof-upgrade-btn {
  background:linear-gradient(135deg,#4FC3F7,#1565C0); color:#fff;
  border:none; border-radius:7px; padding:7px 12px;
  font-size:.67rem; font-weight:700; cursor:pointer; flex-shrink:0;
  white-space:nowrap; transition:filter .15s;
}
.prof-upgrade-btn:hover { filter:brightness(1.1); }

/* Spinner for async ops */
.auth-spinner {
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff; border-radius:50%;
  animation:authSpin .7s linear infinite;
  vertical-align:middle; margin-right:6px;
}
@keyframes authSpin { to { transform:rotate(360deg); } }

/* Bottom safe area spacer */
.auth-bottom-spacer { height:16px; }

/* ═══════════════════════════════════════════════════════════════════════
   AUTH / ACCOUNT — Missing CSS for classes used by auth.js & auth-ui.js
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Logged-out account panel ── */
.acct-lo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 6px;
}
.acct-greet {
  font-size: .82rem;
  font-weight: 700;
  color: #e8eaf6;
  letter-spacing: .01em;
}
.acct-cta-txt {
  font-size: .67rem;
  color: rgba(121,134,203,.7);
  line-height: 1.5;
  margin-bottom: 4px;
}
.acct-btn {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border-radius: 9px;
  font-family: 'Inter', sans-serif;
  font-size: .73rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: filter .15s, transform .1s;
  border: none;
}
.acct-btn:active { transform: scale(.97); }
.acct-btn-p {
  background: linear-gradient(135deg, #4FC3F7, #1565C0);
  color: #fff;
}
.acct-btn-p:hover { filter: brightness(1.1); }
.acct-btn-s {
  background: rgba(79,195,247,0.08);
  color: rgba(79,195,247,0.85);
  border: 1px solid rgba(79,195,247,0.2);
}
.acct-btn-s:hover { background: rgba(79,195,247,0.14); color: #fff; }

/* ── Logged-in account panel ── */
.acct-li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 0 4px;
}
.acct-ucard {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: rgba(79,195,247,0.06);
  border: 1px solid rgba(79,195,247,0.12);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
}
.acct-ucard:hover { background: rgba(79,195,247,0.11); }
.acct-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4FC3F7, #1565C0);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .03em;
}
.acct-info { flex: 1; min-width: 0; }
.acct-name {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-email {
  font-size: .6rem;
  color: rgba(121,134,203,.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.acct-chev {
  font-size: .55rem;
  color: rgba(121,134,203,.45);
  flex-shrink: 0;
}
.acct-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}

/* ── Upgrade button ── */
.acct-up-btn {
  width: 100%;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(255,193,7,0.12), rgba(255,152,0,0.12));
  border: 1px solid rgba(255,193,7,0.25);
  border-radius: 8px;
  color: #FFC107;
  font-family: 'Inter', sans-serif;
  font-size: .67rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: filter .15s, transform .1s;
}
.acct-up-btn:hover { filter: brightness(1.15); }
.acct-up-btn:active { transform: scale(.97); }

/* Manage Subscription button */
.acct-manage-sub-btn {
  width: 100%;
  padding: 8px 12px;
  background: rgba(79,195,247,0.07);
  border: 1px solid rgba(79,195,247,0.22);
  border-radius: 8px;
  color: #4FC3F7;
  font-family: 'Inter', sans-serif;
  font-size: .67rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: filter .15s, transform .1s;
}
.acct-manage-sub-btn:hover { filter: brightness(1.15); }
.acct-manage-sub-btn:active { transform: scale(.97); }

/* ── Account links list ── */
.acct-links {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.acct-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: .68rem;
  color: rgba(255,255,255,.72);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.acct-link:hover {
  background: rgba(79,195,247,0.07);
  color: #e8eaf6;
}
.acct-link-ico {
  font-size: .85rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.acct-sep {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 3px 0;
}
.acct-logout {
  color: rgba(255,82,82,.65) !important;
}
.acct-logout:hover {
  background: rgba(255,82,82,.07) !important;
  color: #FF5252 !important;
}

/* ── Tier badge variants (JS uses t-spark, t-bolt, t-strike, t-storm, t-shield) ── */
.tier-badge.t-spark  { background:rgba(176,190,197,0.12); color:rgba(176,190,197,.8);  border-color:rgba(176,190,197,.2);  }
.tier-badge.t-bolt   { background:rgba(79,195,247,0.12);  color:#4FC3F7;               border-color:rgba(79,195,247,.3);   }
.tier-badge.t-strike { background:rgba(255,193,7,0.12);   color:#FFC107;               border-color:rgba(255,193,7,.3);    }
.tier-badge.t-storm  { background:rgba(255,82,82,0.12);   color:#FF5252;               border-color:rgba(255,82,82,.3);    }
.tier-badge.t-shield { background:rgba(156,39,176,0.15);  color:#CE93D8;               border-color:rgba(156,39,176,.35);  }

/* ── Auth modal inner elements ── */
.auth-link {
  font-size: .65rem;
  color: rgba(79,195,247,.75);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-link:hover { color: #4FC3F7; }
.auth-note {
  font-size: .72rem;
  color: rgba(121,134,203,.55);
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}
.auth-benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(79,195,247,0.04);
  border: 1px solid rgba(79,195,247,0.1);
  border-radius: 10px;
  margin-bottom: 14px;
}
.auth-benefit-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .76rem;
  color: rgba(232,234,246,.8);
  line-height: 1.45;
}
.auth-benefit-ico {
  font-size: .95rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Profile modal header ── */
.prof-hdr {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: center;
}
.prof-av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4FC3F7, #1565C0);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .03em;
  margin-bottom: 10px;
  box-shadow: 0 4px 16px rgba(79,195,247,0.2);
}
.prof-name {
  font-size: .95rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  margin-bottom: 3px;
}
.prof-email {
  font-size: .75rem;
  color: rgba(121,134,203,.65);
}

/* ── Profile sections ── */
.prof-sec {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.prof-sec:last-child { border-bottom: none; }
.prof-sec-ttl {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(121,134,203,.55);
  margin-bottom: 10px;
}
.prof-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  gap: 12px;
}
.prof-row:last-child { border-bottom: none; }
.prof-row-lbl {
  font-size: .78rem;
  color: rgba(232,234,246,.72);
  flex: 1;
  min-width: 0;
}
.prof-row-act {
  font-size: .73rem;
  color: rgba(79,195,247,.8);
  cursor: pointer;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 5px;
  transition: background .12s;
}
.prof-row-act:hover {
  background: rgba(79,195,247,0.1);
  color: #4FC3F7;
}

/* ── Plan card (inside profile modal) ── */
.plan-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 13px 14px;
}
.plan-card-paid {
  background: rgba(79,195,247,0.06);
  border-color: rgba(79,195,247,.18);
}
.plan-name {
  font-size: .92rem;
  font-weight: 700;
  color: rgba(255,255,255,.88);
}
.plan-feat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}
.prof-feat-row {
  font-size: .74rem;
  color: rgba(232,234,246,.65);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.pfc {
  color: #69F0AE;
  font-weight: 700;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   NOTIFICATION PORTAL  (.np-*)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Auth gate ──────────────────────────────────────────────────── */
.np-auth-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  text-align: center;
}
.np-auth-gate-ico {
  font-size: 2rem;
  line-height: 1;
}
.np-auth-gate-txt {
  font-size: .75rem;
  color: rgba(232,234,246,.65);
  line-height: 1.5;
  max-width: 220px;
}
.np-auth-gate-btn {
  margin-top: 4px;
  background: #4FC3F7;
  color: #0a0e1a;
  border: none;
  border-radius: 6px;
  padding: 9px 16px;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.np-auth-gate-btn:hover { background: #81d4fa; }

/* ── No locations ───────────────────────────────────────────────── */
.np-no-loc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  text-align: center;
  font-size: .75rem;
  color: rgba(232,234,246,.65);
  line-height: 1.5;
}
.np-no-loc-ico { font-size: 1.8rem; line-height: 1; }
.np-add-btn {
  margin-top: 4px;
  background: rgba(79,195,247,.15);
  color: #4FC3F7;
  border: 1px solid rgba(79,195,247,.35);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: .73rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
.np-add-btn:hover {
  background: rgba(79,195,247,.25);
  border-color: rgba(79,195,247,.6);
}

/* ── Location selector ──────────────────────────────────────────── */
.np-loc-wrap {
  padding: 10px 12px 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 4px;
  position: relative;
}
.np-loc-label {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(232,234,246,.4);
  margin-bottom: 6px;
}
.np-loc-selector {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.np-loc-selector:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(79,195,247,.4);
}
.np-loc-icon { font-size: 1.1rem; flex-shrink: 0; }
.np-loc-info { flex: 1; min-width: 0; }
.np-loc-name {
  font-size: .8rem;
  font-weight: 600;
  color: rgba(232,234,246,.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-loc-coords {
  font-size: .63rem;
  color: rgba(232,234,246,.45);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-loc-caret {
  font-size: .55rem;
  color: rgba(232,234,246,.4);
  flex-shrink: 0;
}
/* Hidden native select overlaid for accessibility */
.np-loc-select-hidden {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 1rem; /* prevents iOS zoom */
}

/* ── Alert groups ───────────────────────────────────────────────── */
.np-group {
  margin: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding-bottom: 4px;
}
.np-group:last-of-type { border-bottom: none; }

.np-group-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(232,234,246,.88);
  padding: 8px 12px 6px;
  cursor: pointer;
  user-select: none;
  border-radius: 5px;
  transition: background .12s;
}
.np-group-hdr:hover { background: rgba(255,255,255,.04); }
.np-group-hdr-chevron {
  margin-left: auto;
  font-size: .55rem;
  color: rgba(232,234,246,.4);
  transition: transform .2s ease;
  display: inline-block;
}
.np-group-hdr.collapsed .np-group-hdr-chevron {
  transform: rotate(-90deg);
}
.np-group-body {
  overflow: hidden;
  transition: max-height .25s ease, opacity .2s ease;
  max-height: 600px;
  opacity: 1;
}
.np-group-body.collapsed {
  max-height: 0;
  opacity: 0;
}

/* ── Rows ───────────────────────────────────────────────────────── */
.np-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  gap: 8px;
  transition: background .12s;
  border-radius: 5px;
}
.np-row:hover { background: rgba(255,255,255,.03); }

/* Column-layout row (for threshold + slider) */
.np-row-col {
  flex-direction: column;
  align-items: stretch;
}
.np-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.np-row-label {
  font-size: .77rem;
  color: rgba(232,234,246,.92);
  font-weight: 500;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}
.np-row-sub {
  font-size: .65rem;
  color: rgba(232,234,246,.55);
  margin-top: 2px;
  line-height: 1.3;
}

/* ── Hazard slider ──────────────────────────────────────────────── */
.np-slider-wrap {
  margin-top: 10px;
  padding: 0 2px;
  transition: opacity .2s;
}
.np-slider-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.np-slider-lbl {
  font-size: .65rem;
  color: rgba(232,234,246,.45);
  font-weight: 500;
}
.np-slider-val {
  font-size: .82rem;
  font-weight: 700;
  color: #4FC3F7;
  min-width: 28px;
  text-align: right;
}
/* Range input styling */
.np-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  border: none;
  background: rgba(79,195,247,.18); /* overridden inline */
}
.np-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4FC3F7;
  cursor: pointer;
  border: 2px solid #0a0e1a;
  box-shadow: 0 0 0 2px rgba(79,195,247,.3);
  transition: box-shadow .15s;
}
.np-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 4px rgba(79,195,247,.25);
}
.np-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4FC3F7;
  cursor: pointer;
  border: 2px solid #0a0e1a;
  box-shadow: 0 0 0 2px rgba(79,195,247,.3);
}
.np-slider-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.np-slider-tick {
  font-size: .57rem;
  color: rgba(232,234,246,.3);
}

/* ── Divider ────────────────────────────────────────────────────── */
.np-divider {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 2px 12px;
}

/* ── Footer note ────────────────────────────────────────────────── */
.np-footer-note {
  font-size: .63rem;
  color: rgba(232,234,246,.3);
  text-align: center;
  padding: 10px 16px 6px;
  line-height: 1.4;
}

/* ── Prevent iOS WKWebView auto-zoom on input focus ──────────────────────────
   iOS zooms in when a focused input has font-size < 16px. Setting font-size to
   at least 16px on all inputs/textareas/selects prevents this entirely.
   font-size is reset to 1rem (16px) here; visual size is controlled by
   transforms or padding elsewhere if needed. */
input, textarea, select {
  font-size: max(16px, 1em);
  /* Disable tap callout and text selection on interactive controls */
  -webkit-tap-highlight-color: transparent;
}