/* ═══════════════════════════════════════════════════════════════
   SpeedGuard Nairobi — CSS
   Developed by Accadius · accadius.co.ke
   Light / Dark mode via [data-theme]
═══════════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ── */
:root,
[data-theme="dark"] {
  --bg-deep:       #080d1a;
  --bg-card:       #0e1628;
  --bg-panel:      #121c32;
  --accent-cyan:   #00e5ff;
  --accent-green:  #00ff88;
  --accent-amber:  #ffb300;
  --accent-red:    #ff3d3d;
  --accent-crimson:#cc0000;
  --text-primary:  #e8f4ff;
  --text-dim:      #6a8aaa;
  --text-muted:    #3a5070;
  --border:        rgba(0,229,255,0.12);
  --glow-cyan:     0 0 20px rgba(0,229,255,0.4);
  --glow-green:    0 0 20px rgba(0,255,136,0.4);
  --glow-red:      0 0 30px rgba(255,61,61,0.6);
  --font-hud:      'Orbitron', 'Courier New', monospace;
  --font-data:     'Rajdhani', 'Arial Narrow', sans-serif;
  --font-body:     'Inter', 'Helvetica Neue', Arial, sans-serif;
  --r-card:        12px;
  --nav-bg:        rgba(8,13,26,0.97);
  --status-bg:     rgba(14,22,40,0.97);
  --shadow:        0 2px 16px rgba(0,0,0,0.4);
}

[data-theme="light"] {
  --bg-deep:       #f0f4fa;
  --bg-card:       #ffffff;
  --bg-panel:      #e8eef7;
  --accent-cyan:   #0062cc;
  --accent-green:  #00994d;
  --accent-amber:  #c87800;
  --accent-red:    #cc2200;
  --accent-crimson:#991100;
  --text-primary:  #0a1428;
  --text-dim:      #3a5070;
  --text-muted:    #8899aa;
  --border:        rgba(0,98,204,0.18);
  --glow-cyan:     0 0 12px rgba(0,98,204,0.2);
  --glow-green:    0 0 12px rgba(0,153,77,0.2);
  --glow-red:      0 0 12px rgba(204,34,0,0.25);
  --nav-bg:        rgba(255,255,255,0.97);
  --status-bg:     rgba(255,255,255,0.97);
  --shadow:        0 2px 16px rgba(0,0,0,0.1);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { width:100%; height:100%; background:var(--bg-deep); color:var(--text-primary); font-family:var(--font-body); overflow-x:hidden; -webkit-tap-highlight-color:transparent; transition:background 0.3s, color 0.3s; }

/* ── SPLASH ── */
.splash { position:fixed; inset:0; z-index:9999; background:var(--bg-deep); display:flex; align-items:center; justify-content:center; transition:opacity 0.6s; }
.splash.fade-exit { opacity:0; pointer-events:none; }
.splash-inner { text-align:center; }
.splash-logo { position:relative; width:120px; height:120px; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; }
.radar-ring { position:absolute; border-radius:50%; border:1.5px solid var(--accent-cyan); animation:radarPulse 2s ease-out infinite; }
.r1 { width:60px; height:60px; animation-delay:0s; }
.r2 { width:90px; height:90px; animation-delay:0.4s; }
.r3 { width:120px; height:120px; animation-delay:0.8s; }
@keyframes radarPulse { 0%{transform:scale(0.6);opacity:0.8} 100%{transform:scale(1.2);opacity:0} }
.shield-icon { font-size:48px; z-index:1; }
.splash-title { font-family:var(--font-hud); font-size:28px; font-weight:900; letter-spacing:6px; color:var(--accent-cyan); }
.splash-sub { font-family:var(--font-data); font-size:14px; letter-spacing:10px; color:var(--text-dim); margin:6px 0 24px; }
.splash-loader { width:180px; height:3px; background:rgba(128,128,128,0.2); border-radius:2px; margin:0 auto 12px; overflow:hidden; }
.loader-bar { height:100%; width:0; background:linear-gradient(90deg,var(--accent-cyan),var(--accent-green)); border-radius:2px; animation:loaderFill 2s ease forwards; }
@keyframes loaderFill { from{width:0} to{width:100%} }
.splash-credit { font-family:var(--font-body); font-size:11px; color:var(--text-muted); }

/* ── APP ── */
.app { min-height:100vh; display:flex; flex-direction:column; background:var(--bg-deep); padding-bottom:64px; }
.hidden { display:none !important; }

/* ── STATUS BAR ── */
.status-bar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px 8px; background:var(--status-bg); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; box-shadow:var(--shadow); }
.app-brand { font-family:var(--font-hud); font-size:13px; font-weight:700; color:var(--accent-cyan); letter-spacing:2px; }
.status-indicators { display:flex; align-items:center; gap:8px; }
.theme-toggle { background:none; border:1px solid var(--border); border-radius:8px; padding:4px 8px; font-size:16px; cursor:pointer; transition:all 0.2s; color:var(--text-dim); }
.theme-toggle:active { background:var(--bg-card); }
.status-dot { font-family:var(--font-hud); font-size:9px; font-weight:700; letter-spacing:1px; padding:3px 8px; border-radius:10px; transition:all 0.3s; }
.gps-on  { background:rgba(0,255,136,0.12); color:var(--accent-green); border:1px solid var(--accent-green); }
.gps-off { background:rgba(128,128,128,0.08); color:var(--text-dim); border:1px solid var(--border); }
.tracking-badge { font-family:var(--font-hud); font-size:9px; font-weight:700; letter-spacing:1px; padding:3px 10px; border-radius:10px; transition:all 0.3s; }
.tracking-badge.on  { background:rgba(0,255,136,0.12); color:var(--accent-green); border:1px solid var(--accent-green); animation:trackPulse 2s ease infinite; }
.tracking-badge.off { background:rgba(128,128,128,0.06); color:var(--text-muted); border:1px solid rgba(128,128,128,0.2); }
@keyframes trackPulse { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* ── PAGES ── */
.page { display:none; flex-direction:column; overflow-y:auto; flex:1; padding-bottom:24px; }
.page.active { display:flex; }

/* ── TRIP CONTROLS TOP ── */
.trip-controls-top { display:flex; gap:8px; align-items:center; padding:10px 14px 0; }
.btn-trip-start, .btn-trip-end { flex:1; display:flex; align-items:center; gap:10px; padding:12px 14px; border:none; border-radius:12px; cursor:pointer; transition:all 0.25s; text-align:left; }
.btn-trip-start { background:linear-gradient(135deg,#005fa3,#0080c8); box-shadow:0 4px 20px rgba(0,128,200,0.35); }
.btn-trip-end   { background:linear-gradient(135deg,#7a0000,#cc0000); box-shadow:0 4px 20px rgba(200,0,0,0.35); animation:tripEndPulse 2s ease infinite; }
@keyframes tripEndPulse { 0%,100%{box-shadow:0 4px 20px rgba(200,0,0,0.35)} 50%{box-shadow:0 4px 28px rgba(200,0,0,0.6)} }
.btn-trip-start:active,.btn-trip-end:active { transform:scale(0.97); }
.btn-trip-icon { font-size:22px; flex-shrink:0; }
.btn-trip-text { display:flex; flex-direction:column; }
.btn-trip-main { font-family:var(--font-hud); font-size:12px; font-weight:700; color:#fff; letter-spacing:1px; }
.btn-trip-sub  { font-family:var(--font-body); font-size:10px; color:rgba(255,255,255,0.65); margin-top:1px; }
.btn-trip-test { padding:12px 14px; border-radius:12px; background:var(--bg-card); border:1px solid var(--border); color:var(--text-dim); font-size:18px; cursor:pointer; transition:all 0.2s; flex-shrink:0; }
.btn-trip-test:active { background:var(--bg-panel); }

/* ── TRIP BAR ── */
.trip-bar { display:flex; align-items:center; justify-content:space-between; padding:7px 14px; background:rgba(0,255,136,0.06); border-bottom:1px solid rgba(0,255,136,0.2); }
.trip-bar-left { display:flex; align-items:center; gap:7px; }
.trip-dot { width:8px; height:8px; border-radius:50%; background:var(--accent-green); animation:trackPulse 1.5s ease infinite; }
.trip-elapsed { font-family:var(--font-hud); font-size:14px; font-weight:700; color:var(--accent-green); }
.trip-label   { font-family:var(--font-hud); font-size:9px; letter-spacing:1.5px; color:rgba(0,200,100,0.6); }
.trip-bar-right { display:flex; gap:12px; }
.trip-stat    { font-family:var(--font-data); font-size:12px; font-weight:600; color:var(--text-dim); }

/* ── INNER TABS (map / list) ── */
.inner-tabs { display:flex; gap:0; margin:10px 14px 0; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.inner-tab { flex:1; padding:9px; background:var(--bg-card); border:none; color:var(--text-dim); font-family:var(--font-data); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; border-right:1px solid var(--border); }
.inner-tab:last-child { border-right:none; }
.inner-tab.active { background:var(--accent-cyan); color:#fff; }
[data-theme="light"] .inner-tab.active { color:#0a1428; }
.inner-tab:active { opacity:0.8; }

/* ── HOME TAB PANELS ── */
.home-tab-panel { display:none; flex-direction:column; }
.home-tab-panel.active { display:flex; }

/* ── SPEED MAP ── */
.speed-map-wrap { margin:10px 14px 0; border-radius:var(--r-card); overflow:hidden; border:1px solid var(--border); height:220px; }
.speed-map { width:100%; height:100%; }

/* ── SPEED RING ── */
.main-display { display:flex; align-items:center; justify-content:center; padding:20px 20px 12px; transition:all 0.3s; }
.speed-ring-outer { width:190px; height:190px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--border); background:radial-gradient(circle,var(--bg-card),var(--bg-deep)); box-shadow:var(--glow-cyan),inset 0 0 30px rgba(0,0,0,0.3); transition:border-color 0.3s,box-shadow 0.3s; }
.speed-ring-inner { width:164px; height:164px; border-radius:50%; background:radial-gradient(circle,var(--bg-panel) 60%,var(--bg-deep) 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(128,128,128,0.08); }
.speed-value-wrap { display:flex; align-items:baseline; gap:2px; }
.speed-value { font-family:var(--font-hud); font-size:52px; font-weight:900; color:var(--text-primary); line-height:1; transition:color 0.3s; }
.speed-value.pulse { animation:valuePulse 0.2s ease; }
@keyframes valuePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.speed-unit  { font-family:var(--font-data); font-size:14px; font-weight:600; color:var(--text-dim); letter-spacing:1px; }
.speed-label { font-family:var(--font-hud); font-size:10px; letter-spacing:3px; color:var(--text-muted); margin-top:3px; }
.main-display.safe .speed-ring-outer     { border-color:rgba(0,229,255,0.25); }
.main-display.warning .speed-ring-outer  { border-color:var(--accent-cyan); box-shadow:0 0 24px rgba(0,229,255,0.4),inset 0 0 30px rgba(0,0,0,0.3); }
.main-display.approach .speed-ring-outer { border-color:var(--accent-amber); box-shadow:0 0 24px rgba(255,179,0,0.35),inset 0 0 30px rgba(0,0,0,0.3); }
.main-display.alert .speed-ring-outer    { border-color:var(--accent-amber); animation:ringPulseAmber 0.8s ease infinite; }
.main-display.danger .speed-ring-outer   { border-color:var(--accent-red); animation:ringPulseRed 0.5s ease infinite; }
.main-display.critical .speed-ring-outer { border-color:var(--accent-crimson); animation:ringPulseRed 0.3s ease infinite; }
.main-display.alert .speed-value    { color:var(--accent-amber); }
.main-display.danger .speed-value   { color:var(--accent-red); }
.main-display.critical .speed-value { color:var(--accent-crimson); }
@keyframes ringPulseAmber { 0%,100%{box-shadow:0 0 24px rgba(255,179,0,0.35)} 50%{box-shadow:0 0 48px rgba(255,179,0,0.7)} }
@keyframes ringPulseRed   { 0%,100%{box-shadow:var(--glow-red)} 50%{box-shadow:0 0 64px rgba(255,61,61,0.85)} }

/* ── ALERT BANNER ── */
.alert-banner { margin:0 14px 10px; padding:13px 14px; border-radius:var(--r-card); display:flex; align-items:center; gap:12px; border:1.5px solid; animation:bannerIn 0.3s ease; transition:all 0.3s; }
@keyframes bannerIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.alert-banner.level-warning  { background:rgba(0,229,255,0.07); border-color:rgba(0,229,255,0.4); }
.alert-banner.level-approach { background:rgba(255,179,0,0.07); border-color:rgba(255,179,0,0.5); }
.alert-banner.level-alert    { background:rgba(255,179,0,0.1); border-color:var(--accent-amber); animation:bannerPulse 0.8s ease infinite; }
.alert-banner.level-danger   { background:rgba(255,61,61,0.1); border-color:var(--accent-red);  animation:bannerPulse 0.5s ease infinite; }
.alert-banner.level-critical { background:rgba(204,0,0,0.15); border-color:var(--accent-crimson); animation:bannerPulse 0.3s ease infinite; }
@keyframes bannerPulse { 0%,100%{opacity:1} 50%{opacity:0.7} }
.alert-icon { font-size:26px; flex-shrink:0; }
.alert-text { flex:1; }
.alert-title { font-family:var(--font-hud); font-size:12px; font-weight:700; letter-spacing:1.5px; }
.alert-banner.level-warning .alert-title  { color:var(--accent-cyan); }
.alert-banner.level-approach .alert-title { color:var(--accent-amber); }
.alert-banner.level-alert .alert-title    { color:var(--accent-amber); }
.alert-banner.level-danger .alert-title   { color:var(--accent-red); }
.alert-banner.level-critical .alert-title { color:var(--accent-crimson); }
.alert-detail   { font-family:var(--font-data); font-size:12px; color:var(--text-dim); margin-top:2px; }
.alert-distance { font-family:var(--font-hud); font-size:16px; font-weight:700; color:var(--text-primary); flex-shrink:0; }

/* ── CAMERA CARD ── */
.camera-card { margin:0 14px 10px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-card); padding:13px 14px; animation:cardIn 0.3s ease; }
@keyframes cardIn { from{opacity:0;transform:scale(0.97)} to{opacity:1;transform:scale(1)} }
.card-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.card-icon { font-size:18px; }
.card-title-wrap { flex:1; }
.card-title { font-family:var(--font-data); font-size:14px; font-weight:700; color:var(--text-primary); }
.card-road  { font-family:var(--font-body); font-size:11px; color:var(--text-dim); margin-top:1px; }
.btn-share-snap { margin-left:auto; padding:6px 10px; border-radius:8px; background:rgba(0,229,255,0.08); border:1px solid rgba(0,229,255,0.25); color:var(--accent-cyan); font-size:15px; cursor:pointer; transition:all 0.2s; flex-shrink:0; }
.card-stats { display:flex; align-items:center; justify-content:space-around; margin-bottom:12px; }
.stat-block { text-align:center; flex:1; }
.stat-label { font-family:var(--font-hud); font-size:9px; letter-spacing:1.5px; color:var(--text-muted); margin-bottom:2px; }
.stat-value { font-family:var(--font-hud); font-size:20px; font-weight:700; color:var(--text-primary); }
.stat-value.limit { color:var(--accent-cyan); }
.stat-value.safe     { color:var(--accent-green); }
.stat-value.approach,.stat-value.alert { color:var(--accent-amber); }
.stat-value.danger,.stat-value.critical { color:var(--accent-red); }
.stat-unit { font-family:var(--font-data); font-size:10px; color:var(--text-muted); }
.stat-sep  { width:1px; height:36px; background:var(--border); }
.limit-bar-wrap { padding-top:4px; }
.limit-bar-track { height:6px; background:rgba(128,128,128,0.1); border-radius:3px; position:relative; margin-bottom:4px; overflow:visible; }
.limit-bar-fill  { height:100%; border-radius:3px; transition:width 0.4s ease; background:var(--accent-green); }
.limit-bar-fill.safe { background:var(--accent-green); }
.limit-bar-fill.approach,.limit-bar-fill.alert { background:var(--accent-amber); }
.limit-bar-fill.danger,.limit-bar-fill.critical { background:var(--accent-red); }
.limit-marker { position:absolute; top:-4px; width:2px; height:14px; background:var(--accent-cyan); transform:translateX(-50%); }
.limit-bar-labels { display:flex; justify-content:space-between; font-family:var(--font-hud); font-size:9px; color:var(--text-muted); }

/* ── PRIVACY STRIP ── */
.privacy-strip { display:flex; align-items:center; gap:7px; margin:8px 14px 0; padding:7px 11px; background:rgba(0,255,136,0.04); border-radius:8px; border:1px solid rgba(0,255,136,0.12); }
.privacy-strip-icon { font-size:13px; flex-shrink:0; }
.privacy-strip-text { font-family:var(--font-body); font-size:11px; color:var(--text-muted); }
.privacy-strip-link { background:none; border:none; color:var(--accent-cyan); font-family:var(--font-body); font-size:11px; cursor:pointer; text-decoration:underline; padding:0; }

/* ── CAMERAS LIST ── */
.cameras-section { margin:10px 14px 0; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.section-title { font-family:var(--font-hud); font-size:10px; font-weight:700; color:var(--accent-cyan); letter-spacing:1.5px; }
.camera-count  { font-family:var(--font-data); font-size:12px; color:var(--text-dim); }
.camera-list   { display:flex; flex-direction:column; gap:7px; }
.camera-item { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:11px 13px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.camera-item.nearest { border-color:rgba(0,229,255,0.5); background:rgba(0,229,255,0.04); box-shadow:0 0 14px rgba(0,229,255,0.08); }
.ci-road-tag { display:inline-block; font-family:var(--font-hud); font-size:9px; font-weight:700; letter-spacing:1px; color:var(--accent-cyan); background:rgba(0,229,255,0.08); border:1px solid rgba(0,229,255,0.25); border-radius:4px; padding:2px 7px; margin-bottom:4px; }
.ci-name { font-family:var(--font-data); font-size:13px; font-weight:600; color:var(--text-primary); }
.ci-area { font-family:var(--font-body); font-size:11px; color:var(--text-dim); margin-top:2px; }
.ci-right { text-align:right; flex-shrink:0; }
.ci-limit { font-family:var(--font-hud); font-size:13px; font-weight:700; color:var(--accent-amber); }
.ci-dist  { font-family:var(--font-data); font-size:12px; color:var(--text-muted); margin-top:3px; }
.ci-dist.near { color:var(--accent-cyan); font-weight:600; }

/* ── BOTTOM NAV ── */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; display:flex; align-items:stretch; background:var(--nav-bg); border-top:1px solid var(--border); height:58px; z-index:100; backdrop-filter:blur(12px); }
.nav-btn { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:none; border:none; cursor:pointer; padding:6px 0; transition:all 0.2s; border-top:2px solid transparent; }
.nav-btn.active { border-top-color:var(--accent-cyan); }
.nav-icon { font-size:18px; line-height:1; transition:transform 0.2s; }
.nav-label { font-family:var(--font-hud); font-size:8px; letter-spacing:0.5px; color:var(--text-muted); transition:color 0.2s; }
.nav-btn.active .nav-label { color:var(--accent-cyan); }
.nav-btn.active .nav-icon  { transform:scale(1.1); }
.nav-btn:active { background:rgba(0,229,255,0.04); }

/* ── PAGE HERO ── */
.page-hero { display:flex; flex-direction:column; align-items:center; padding:24px 20px 18px; text-align:center; }
.share-hero    { background:linear-gradient(180deg,rgba(0,229,255,0.05) 0%,transparent 100%); }
.feedback-hero { background:linear-gradient(180deg,rgba(255,179,0,0.05) 0%,transparent 100%); }
.flood-hero    { background:linear-gradient(180deg,rgba(24,95,165,0.08) 0%,transparent 100%); }
.report-hero   { background:linear-gradient(180deg,rgba(255,179,0,0.05) 0%,transparent 100%); }
.hero-icon  { font-size:36px; margin-bottom:6px; }
.hero-title { font-family:var(--font-hud); font-size:18px; font-weight:900; letter-spacing:3px; color:var(--text-primary); }
.hero-sub   { font-family:var(--font-body); font-size:12px; color:var(--text-dim); margin-top:5px; }

/* ── SECTIONS ── */
.fb-section { margin:0 14px 18px; }
.share-section { margin:0 14px 18px; }
.fb-section-label,.share-section-label { font-family:var(--font-hud); font-size:10px; font-weight:700; letter-spacing:1.5px; color:var(--accent-amber); margin-bottom:9px; }

/* ── TOAST ── */
.toast { position:fixed; bottom:72px; left:50%; transform:translateX(-50%); padding:9px 18px; border-radius:18px; font-family:var(--font-data); font-size:13px; font-weight:600; z-index:200; white-space:nowrap; max-width:92vw; animation:toastIn 0.3s ease; transition:opacity 0.4s; }
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.toast.fade-out { opacity:0; }
.toast-info    { background:rgba(0,229,255,0.12); color:var(--accent-cyan); border:1px solid rgba(0,229,255,0.35); }
.toast-success { background:rgba(0,255,136,0.12); color:var(--accent-green); border:1px solid rgba(0,255,136,0.35); }
.toast-warning { background:rgba(255,179,0,0.12); color:var(--accent-amber); border:1px solid rgba(255,179,0,0.35); }
.toast-error   { background:rgba(255,61,61,0.12); color:var(--accent-red); border:1px solid rgba(255,61,61,0.35); }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; z-index:300; background:rgba(0,0,0,0.65); backdrop-filter:blur(4px); display:flex; align-items:flex-end; justify-content:center; animation:overlayIn 0.2s ease; }
@keyframes overlayIn { from{opacity:0} to{opacity:1} }
.modal-sheet { width:100%; max-width:500px; background:var(--bg-panel); border-radius:20px 20px 0 0; border-top:1px solid var(--border); padding:0 18px 28px; animation:sheetIn 0.3s cubic-bezier(0.34,1.56,0.64,1); max-height:80vh; overflow-y:auto; }
@keyframes sheetIn { from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal-handle { width:40px; height:4px; background:rgba(128,128,128,0.2); border-radius:2px; margin:12px auto 14px; }
.modal-title  { font-family:var(--font-hud); font-size:14px; font-weight:700; color:var(--text-primary); letter-spacing:1px; margin-bottom:13px; }
.modal-body   { font-family:var(--font-body); font-size:13px; color:var(--text-dim); line-height:1.6; margin-bottom:14px; }
.modal-body p { margin-bottom:9px; }
.modal-body ol,.modal-body ul { padding-left:16px; }
.modal-body li { margin-bottom:5px; }
.modal-body strong { color:var(--text-primary); }
.modal-platform-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:12px; }
.mpbtn { display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 5px; border-radius:8px; border:none; cursor:pointer; font-family:var(--font-data); font-size:10px; font-weight:600; transition:all 0.2s; }
.mpbtn.whatsapp  { background:rgba(37,211,102,0.12); border:1px solid rgba(37,211,102,0.3); color:#25d366; }
.mpbtn.twitter   { background:rgba(29,161,242,0.10); border:1px solid rgba(29,161,242,0.25); color:#1da1f2; }
.mpbtn.facebook  { background:rgba(66,103,178,0.10); border:1px solid rgba(66,103,178,0.25); color:#4267b2; }
.mpbtn.tiktok    { background:rgba(0,242,234,0.07); border:1px solid rgba(0,242,234,0.2); color:#00f2ea; }
.mpbtn.instagram { background:rgba(225,48,108,0.10); border:1px solid rgba(225,48,108,0.25); color:#e1306c; }
.mpbtn.native    { background:rgba(128,128,128,0.07); border:1px solid rgba(128,128,128,0.15); color:var(--text-dim); }
.modal-close { width:100%; padding:12px; border-radius:12px; background:rgba(128,128,128,0.07); border:1px solid var(--border); color:var(--text-dim); font-family:var(--font-data); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; margin-top:3px; }

/* ── TRIP SUMMARY ── */
.trip-summary-sheet { background:linear-gradient(180deg,var(--bg-panel),var(--bg-deep)); }
.ts-header { text-align:center; padding:6px 0 14px; }
.ts-flag   { font-size:36px; margin-bottom:6px; }
.ts-title  { font-family:var(--font-hud); font-size:16px; font-weight:900; letter-spacing:3px; color:var(--accent-green); }
.ts-stats  { margin-bottom:14px; }
.ts-stat-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid rgba(128,128,128,0.07); }
.ts-stat-label { font-family:var(--font-data); font-size:13px; color:var(--text-dim); }
.ts-stat-val   { font-family:var(--font-hud); font-size:17px; font-weight:700; color:var(--accent-cyan); }
.ts-privacy-note { font-family:var(--font-body); font-size:11px; color:rgba(0,200,100,0.6); text-align:center; margin-bottom:14px; padding:7px; background:rgba(0,200,100,0.05); border-radius:8px; border:1px solid rgba(0,200,100,0.12); }
.ts-actions { display:flex; gap:8px; }
.ts-btn-share { flex:1; padding:12px; border-radius:11px; border:none; cursor:pointer; background:linear-gradient(135deg,#005fa3,#0080c8); color:#fff; font-family:var(--font-hud); font-size:12px; font-weight:700; letter-spacing:1px; }
.ts-btn-close { padding:12px 18px; border-radius:11px; cursor:pointer; background:rgba(128,128,128,0.07); border:1px solid var(--border); color:var(--text-dim); font-family:var(--font-data); font-size:13px; }

/* ── TERMS GATE ── */
.terms-gate { position:fixed; inset:0; z-index:10000; background:var(--bg-deep); display:flex; flex-direction:column; overflow:hidden; }
.terms-gate.terms-overlay-mode { z-index:500; }
.tg-header { background:var(--bg-card); border-bottom:2px solid var(--accent-cyan); padding:18px 18px 14px; text-align:center; position:relative; flex-shrink:0; }
.tg-logo { font-size:32px; margin-bottom:5px; }
.tg-title { font-family:var(--font-hud); font-size:18px; font-weight:900; color:var(--accent-cyan); letter-spacing:3px; margin:0 0 3px; }
.tg-subtitle { font-family:var(--font-body); font-size:12px; color:var(--text-dim); margin:0; }
.tg-body { flex:1; overflow-y:auto; padding:14px 14px 6px; }
.tg-privacy-badge { display:flex; gap:10px; align-items:flex-start; background:rgba(0,255,136,0.07); border:1.5px solid rgba(0,255,136,0.35); border-radius:11px; padding:12px 14px; margin-bottom:16px; }
.tg-privacy-icon { font-size:22px; flex-shrink:0; }
.tg-privacy-text { font-family:var(--font-body); font-size:12px; color:var(--text-primary); line-height:1.5; }
.tg-privacy-text strong { color:var(--accent-green); }
.tg-section-title { font-family:var(--font-hud); font-size:13px; font-weight:900; color:var(--accent-cyan); letter-spacing:2px; margin-bottom:3px; }
.tg-effective,.tg-company { font-family:var(--font-body); font-size:11px; color:var(--text-dim); margin-bottom:2px; }
.tg-regulator { font-family:var(--font-body); font-size:11px; color:var(--accent-amber); margin-bottom:14px; }
.tg-clause { display:flex; gap:10px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid rgba(128,128,128,0.06); }
.tg-clause-num { font-family:var(--font-hud); font-size:13px; font-weight:900; color:var(--accent-cyan); background:rgba(0,229,255,0.08); border:1px solid rgba(0,229,255,0.25); border-radius:6px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tg-clause-body { font-family:var(--font-body); font-size:12px; color:var(--text-dim); line-height:1.55; flex:1; }
.tg-clause-body strong { color:var(--text-primary); }
.tg-footer { background:var(--bg-card); border-top:1px solid var(--border); padding:12px 14px 24px; flex-shrink:0; }
.tg-checkbox-row { display:flex; align-items:flex-start; gap:9px; margin-bottom:9px; cursor:pointer; }
.tg-checkbox-row input[type="checkbox"] { width:18px; height:18px; flex-shrink:0; margin-top:1px; accent-color:var(--accent-cyan); cursor:pointer; }
.tg-check-label { font-family:var(--font-body); font-size:12px; color:var(--text-primary); line-height:1.4; }
.btn-accept-terms { width:100%; padding:13px; border-radius:11px; border:none; cursor:pointer; background:linear-gradient(135deg,#005fa3,#0080c8); color:#fff; font-family:var(--font-hud); font-size:12px; font-weight:700; letter-spacing:1.5px; transition:all 0.25s; margin-top:3px; margin-bottom:7px; box-shadow:0 4px 18px rgba(0,128,200,0.35); }
.btn-accept-terms:disabled { background:rgba(128,128,128,0.15); color:var(--text-muted); box-shadow:none; cursor:not-allowed; }
.btn-decline-terms { width:100%; padding:9px; border-radius:10px; background:transparent; border:1px solid rgba(255,61,61,0.25); color:rgba(255,61,61,0.6); font-family:var(--font-data); font-size:13px; cursor:pointer; transition:all 0.2s; }
.tg-odpc-note { text-align:center; font-family:var(--font-body); font-size:10px; color:var(--text-muted); margin-top:8px; }
.tg-close-btn { position:absolute; top:10px; right:12px; padding:5px 12px; border-radius:7px; background:rgba(0,229,255,0.08); border:1px solid rgba(0,229,255,0.25); color:var(--accent-cyan); font-family:var(--font-data); font-size:12px; cursor:pointer; }

/* ── SHARE PAGE ── */
.record-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-card); padding:14px; }
.record-status { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.record-dot.idle      { width:9px; height:9px; border-radius:50%; background:var(--text-muted); flex-shrink:0; }
.record-dot.recording { width:9px; height:9px; border-radius:50%; background:var(--accent-red); animation:recBlink 0.8s ease infinite; flex-shrink:0; }
@keyframes recBlink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.record-label { font-family:var(--font-hud); font-size:12px; font-weight:700; color:var(--text-primary); }
.record-timer { font-family:var(--font-hud); font-size:12px; color:var(--accent-red); margin-left:auto; }
.record-hint  { font-family:var(--font-body); font-size:12px; color:var(--text-dim); margin-bottom:10px; }
.record-buttons { display:flex; gap:7px; margin-bottom:10px; }
.btn-record { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:10px; border-radius:9px; border:1px solid rgba(255,61,61,0.4); background:rgba(255,61,61,0.1); color:var(--accent-red); font-family:var(--font-hud); font-size:11px; font-weight:700; letter-spacing:1px; cursor:pointer; transition:all 0.2s; }
.btn-rec-stop { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:10px; border-radius:9px; border:1px solid rgba(0,255,136,0.35); background:rgba(0,255,136,0.08); color:var(--accent-green); font-family:var(--font-hud); font-size:11px; font-weight:700; cursor:pointer; transition:all 0.2s; }
.rec-icon { font-size:13px; }
.record-note { font-family:var(--font-body); font-size:11px; color:var(--text-dim); border-top:1px solid var(--border); padding-top:9px; margin-bottom:9px; line-height:1.5; }
.btn-system-record { width:100%; padding:9px; border-radius:8px; background:rgba(0,229,255,0.07); border:1px solid rgba(0,229,255,0.25); color:var(--accent-cyan); font-family:var(--font-data); font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.quick-share-hint { font-family:var(--font-body); font-size:12px; color:var(--text-dim); margin-bottom:10px; }
.share-card-preview { background:linear-gradient(135deg,var(--bg-panel),var(--bg-card)); border:1px solid rgba(0,229,255,0.25); border-radius:var(--r-card); padding:14px; text-align:center; margin-bottom:12px; }
.sc-logo { font-family:var(--font-hud); font-size:10px; color:var(--accent-cyan); letter-spacing:1.5px; margin-bottom:9px; }
.sc-speed-wrap { display:flex; align-items:baseline; justify-content:center; gap:4px; margin-bottom:5px; }
.sc-speed { font-family:var(--font-hud); font-size:44px; font-weight:900; color:var(--text-primary); }
.sc-unit  { font-family:var(--font-data); font-size:13px; color:var(--text-dim); }
.sc-camera   { font-family:var(--font-data); font-size:12px; color:var(--text-dim); margin-bottom:7px; }
.sc-hashtags { font-family:var(--font-body); font-size:10px; color:var(--accent-cyan); opacity:0.6; }
.platform-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.platform-btn { display:flex; flex-direction:column; align-items:center; gap:4px; padding:11px 7px; border-radius:10px; border:none; cursor:pointer; font-family:var(--font-data); font-size:11px; font-weight:600; transition:all 0.2s; }
.platform-icon { font-size:18px; }
.platform-btn.whatsapp  { background:rgba(37,211,102,0.12); border:1px solid rgba(37,211,102,0.3); color:#25d366; }
.platform-btn.twitter   { background:rgba(29,161,242,0.10); border:1px solid rgba(29,161,242,0.25); color:#1da1f2; }
.platform-btn.facebook  { background:rgba(66,103,178,0.10); border:1px solid rgba(66,103,178,0.25); color:#4267b2; }
.platform-btn.instagram { background:rgba(225,48,108,0.10); border:1px solid rgba(225,48,108,0.25); color:#e1306c; }
.platform-btn.tiktok    { background:rgba(0,242,234,0.07); border:1px solid rgba(0,242,234,0.2); color:#00f2ea; }
.platform-btn.native    { background:rgba(128,128,128,0.07); border:1px solid rgba(128,128,128,0.15); color:var(--text-dim); }
.stats-share-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-card); padding:13px 14px; }
.stat-row { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid rgba(128,128,128,0.05); }
.stat-row:last-of-type { border-bottom:none; margin-bottom:10px; }
.st-label { font-family:var(--font-data); font-size:13px; color:var(--text-dim); }
.st-val   { font-family:var(--font-hud); font-size:15px; font-weight:700; color:var(--accent-cyan); }
.btn-share-stats { width:100%; padding:11px; border-radius:9px; background:linear-gradient(135deg,#005fa3,#0080c8); border:none; color:#fff; cursor:pointer; font-family:var(--font-hud); font-size:12px; font-weight:700; letter-spacing:1px; transition:all 0.2s; }

/* ── FLOOD PAGE ── */
.flood-map-container { width:100%; height:320px; border-radius:var(--r-card); border:1px solid var(--border); overflow:hidden; }
.flood-basemap-toggle { display:flex; gap:6px; margin-bottom:8px; }
.basemap-btn { padding:6px 11px; border-radius:8px; background:var(--bg-card); border:1px solid var(--border); color:var(--text-dim); font-family:var(--font-data); font-size:11px; font-weight:600; cursor:pointer; transition:all 0.2s; flex-shrink:0; }
.basemap-btn.active { background:rgba(24,95,165,0.15); border-color:rgba(24,95,165,0.5); color:#378add; }
.flood-map-legend { display:flex; gap:10px; flex-wrap:wrap; margin-top:7px; font-size:11px; color:var(--text-dim); }
.fml-item { display:flex; align-items:center; gap:4px; }
.fml-dot  { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.sim-controls { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-card); padding:13px; }
.sim-row { display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.sim-label { font-family:var(--font-data); font-size:12px; color:var(--text-dim); width:50px; flex-shrink:0; }
.sim-row input[type=range] { flex:1; accent-color:var(--accent-amber); }
.sim-val  { font-family:var(--font-hud); font-size:13px; font-weight:700; color:var(--accent-amber); width:30px; text-align:right; }
.sim-unit { font-family:var(--font-data); font-size:11px; color:var(--text-muted); width:34px; }
.sim-scenario-btns { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.sim-preset { padding:5px 9px; border-radius:7px; border:1px solid rgba(255,179,0,0.2); background:rgba(255,179,0,0.05); color:var(--accent-amber); font-family:var(--font-data); font-size:11px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.sim-preset:active { background:rgba(255,179,0,0.14); }
.btn-run-sim { width:100%; padding:11px; border-radius:9px; border:none; cursor:pointer; background:linear-gradient(135deg,#7a4800,#ba7517); color:#fff; font-family:var(--font-hud); font-size:11px; font-weight:700; letter-spacing:1.5px; transition:all 0.2s; }
.season-outlook-cards { display:flex; flex-direction:column; gap:9px; }
.season-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-card); padding:13px; }
.season-card.active-season { border-color:rgba(163,45,45,0.4); background:rgba(163,45,45,0.04); }
.sc-season { font-family:var(--font-hud); font-size:12px; font-weight:700; color:var(--text-primary); }
.sc-months { font-family:var(--font-data); font-size:11px; color:var(--text-dim); margin:2px 0 5px; }
.sc-status { font-family:var(--font-hud); font-size:11px; font-weight:700; letter-spacing:1px; margin-bottom:5px; padding:3px 9px; border-radius:5px; display:inline-block; }
.sc-status.above { background:rgba(163,45,45,0.1); color:#a32d2d; }
.sc-status.below { background:rgba(24,95,165,0.08); color:#185fa5; }
.sc-detail { font-family:var(--font-body); font-size:12px; color:var(--text-dim); line-height:1.5; }

/* ── REPORT PAGE ── */
.report-location-card { display:flex; align-items:center; gap:10px; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:13px; }
.rlc-icon { font-size:22px; flex-shrink:0; }
.rlc-coords { font-family:var(--font-hud); font-size:12px; color:var(--accent-cyan); }
.rlc-accuracy { font-family:var(--font-body); font-size:10px; color:var(--text-dim); margin-top:2px; }
.rlc-refresh { width:34px; height:34px; border-radius:7px; background:rgba(0,229,255,0.08); border:1px solid rgba(0,229,255,0.25); color:var(--accent-cyan); font-size:17px; cursor:pointer; flex-shrink:0; }
.speed-limit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.speed-limit-btn { padding:11px 7px; border-radius:9px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-dim); font-family:var(--font-hud); font-size:15px; font-weight:700; cursor:pointer; transition:all 0.2s; text-align:center; }
.speed-limit-btn.active { background:rgba(255,179,0,0.12); border-color:rgba(255,179,0,0.5); color:var(--accent-amber); }
.report-privacy-note { font-family:var(--font-body); font-size:12px; color:var(--text-dim); background:rgba(0,229,255,0.04); border:1px solid rgba(0,229,255,0.12); border-radius:8px; padding:11px; line-height:1.5; }
.report-privacy-note strong { color:var(--accent-cyan); }
.btn-submit-report { width:100%; padding:14px; border-radius:11px; border:none; cursor:pointer; background:linear-gradient(135deg,#005fa3,#0080c8); color:#fff; font-family:var(--font-hud); font-size:12px; font-weight:700; letter-spacing:1.5px; box-shadow:0 4px 18px rgba(0,128,200,0.35); transition:all 0.2s; }
.report-submit-note { font-family:var(--font-body); font-size:11px; color:var(--text-muted); text-align:center; margin-top:7px; }

/* ── FEEDBACK PAGE ── */
.star-rating { display:flex; gap:7px; justify-content:center; margin-bottom:5px; }
.star { font-size:34px; cursor:pointer; color:var(--text-muted); transition:color 0.15s,transform 0.15s; }
.star.active { color:var(--accent-amber); transform:scale(1.1); }
.rating-label { text-align:center; font-family:var(--font-data); font-size:13px; color:var(--text-dim); }
.fb-type-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.fb-type-btn { padding:9px 7px; border-radius:9px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-dim); font-family:var(--font-data); font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s; text-align:center; }
.fb-type-btn.active { background:rgba(255,179,0,0.1); border-color:rgba(255,179,0,0.45); color:var(--accent-amber); }
.fb-textarea { width:100%; min-height:100px; resize:vertical; background:var(--bg-card); border:1px solid var(--border); border-radius:9px; color:var(--text-primary); font-family:var(--font-body); font-size:13px; padding:11px 13px; outline:none; transition:border-color 0.2s; -webkit-appearance:none; }
.fb-textarea:focus { border-color:rgba(255,179,0,0.45); }
.fb-char-count { text-align:right; font-family:var(--font-hud); font-size:10px; color:var(--text-muted); margin-top:3px; }
.fb-input { width:100%; padding:11px 13px; border-radius:9px; background:var(--bg-card); border:1px solid var(--border); color:var(--text-primary); font-family:var(--font-body); font-size:13px; outline:none; transition:border-color 0.2s; -webkit-appearance:none; }
.fb-input:focus { border-color:rgba(255,179,0,0.45); }
.fb-social-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.fb-social-btn { display:flex; align-items:center; gap:7px; padding:11px 13px; border-radius:9px; border:none; font-family:var(--font-data); font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.fb-social-btn.twitter  { background:rgba(29,161,242,0.10); border:1px solid rgba(29,161,242,0.25); color:#1da1f2; }
.fb-social-btn.whatsapp { background:rgba(37,211,102,0.10); border:1px solid rgba(37,211,102,0.25); color:#25d366; }
.fb-social-btn.facebook { background:rgba(66,103,178,0.10); border:1px solid rgba(66,103,178,0.25); color:#4267b2; }
.fb-social-btn.tiktok   { background:rgba(0,242,234,0.07); border:1px solid rgba(0,242,234,0.2); color:#00f2ea; }
.email-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-card); padding:14px; }
.email-addr { font-family:var(--font-hud); font-size:13px; font-weight:700; color:var(--accent-cyan); margin-bottom:12px; text-align:center; letter-spacing:0.3px; }
.email-actions { display:flex; gap:7px; }
.btn-email      { flex:1; padding:11px; border-radius:9px; border:none; cursor:pointer; background:linear-gradient(135deg,#005fa3,#0080c8); color:#fff; font-family:var(--font-data); font-size:12px; font-weight:600; transition:all 0.2s; }
.btn-email-copy { flex:1; padding:11px; border-radius:9px; cursor:pointer; background:var(--bg-panel); border:1px solid var(--border); color:var(--text-dim); font-family:var(--font-data); font-size:12px; font-weight:600; transition:all 0.2s; }
.store-grid { display:flex; flex-direction:column; gap:7px; }
.store-btn { display:flex; align-items:center; gap:13px; padding:13px 14px; border-radius:var(--r-card); border:none; cursor:pointer; font-family:var(--font-data); text-align:left; transition:all 0.2s; }
.store-btn.google { background:rgba(52,168,83,0.1); border:1px solid rgba(52,168,83,0.3); }
.store-btn.apple  { background:rgba(128,128,128,0.07); border:1px solid rgba(128,128,128,0.15); }
.store-icon { font-size:26px; flex-shrink:0; }
.store-name { font-size:14px; font-weight:700; color:var(--text-primary); }
.store-sub  { font-size:11px; color:var(--text-dim); margin-top:1px; }
.btn-view-terms { width:100%; padding:11px; border-radius:9px; cursor:pointer; background:rgba(0,229,255,0.05); border:1px solid rgba(0,229,255,0.2); color:var(--accent-cyan); font-family:var(--font-data); font-size:13px; font-weight:600; transition:all 0.2s; }

/* ── DEVELOPER CREDIT ── */
.dev-credit { text-align:center; font-family:var(--font-body); font-size:11px; color:var(--text-muted); padding:8px 14px; margin-bottom:4px; }
.dev-credit a { color:var(--accent-cyan); text-decoration:underline; background:none; border:none; cursor:pointer; font-size:11px; }

/* ── LEAFLET THEME OVERRIDES ── */
[data-theme="dark"] .leaflet-popup-content-wrapper { background:#0e1628; color:#e8f4ff; border:1px solid rgba(0,229,255,0.2); border-radius:10px; }
[data-theme="dark"] .leaflet-popup-tip { background:#0e1628; }
[data-theme="dark"] .leaflet-control-zoom a { background:#0e1628; color:#e8f4ff; border-color:rgba(0,229,255,0.2); }
[data-theme="light"] .leaflet-popup-content-wrapper { background:#fff; color:#0a1428; }
[data-theme="light"] .leaflet-control-zoom a { background:#fff; color:#0a1428; border-color:rgba(0,0,0,0.2); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,229,255,0.15); border-radius:2px; }

/* ═══════════════════════════════════════════════════════════════
   🇰🇪 KENYAN FLAG ELEMENTS
   Black #000000 · White #FFFFFF · Red #BB0000 · Green #006600
═══════════════════════════════════════════════════════════════ */

/* ── Colour tokens ── */
.ke-black { background: #000000; }
.ke-white { background: #ffffff; }
.ke-red   { background: #bb0000; }
.ke-green { background: #006600; }

/* ── SPLASH FLAG STRIPS (top & bottom) ── */
.ke-flag-strips {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.ke-flag-strips.top    { top: 0; }
.ke-flag-strips.bottom { bottom: 0; }

.ke-strip {
  width: 100%;
  height: 5px;
}
/* White strips are thinner — they're the edge lines on the real flag */
.ke-strip.ke-white { height: 2px; opacity: 0.85; }

/* Entrance animations — strips slide in from edges */
.ke-flag-strips.top    .ke-strip { animation: stripSlideDown 0.6s ease both; }
.ke-flag-strips.bottom .ke-strip { animation: stripSlideUp   0.6s ease both; }

.ke-flag-strips.top .ke-strip:nth-child(1) { animation-delay: 0.1s; }
.ke-flag-strips.top .ke-strip:nth-child(2) { animation-delay: 0.15s; }
.ke-flag-strips.top .ke-strip:nth-child(3) { animation-delay: 0.2s; }
.ke-flag-strips.top .ke-strip:nth-child(4) { animation-delay: 0.25s; }
.ke-flag-strips.top .ke-strip:nth-child(5) { animation-delay: 0.3s; }

.ke-flag-strips.bottom .ke-strip:nth-child(1) { animation-delay: 0.3s; }
.ke-flag-strips.bottom .ke-strip:nth-child(2) { animation-delay: 0.25s; }
.ke-flag-strips.bottom .ke-strip:nth-child(3) { animation-delay: 0.2s; }
.ke-flag-strips.bottom .ke-strip:nth-child(4) { animation-delay: 0.15s; }
.ke-flag-strips.bottom .ke-strip:nth-child(5) { animation-delay: 0.1s; }

@keyframes stripSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes stripSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Splash needs position:relative for the strips to anchor correctly */
.splash {
  position: fixed !important;
  flex-direction: column;
  justify-content: center;
}
.splash-inner { position: relative; z-index: 3; }

/* ── MADE IN KENYA BADGE (splash) ── */
.made-in-kenya {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px auto 8px;
  padding: 8px 18px;
  border-radius: 24px;
  background: rgba(0, 102, 0, 0.15);
  border: 1px solid rgba(187, 0, 0, 0.35);
  width: fit-content;
  animation: badgePop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.8s both;
}
@keyframes badgePop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.ke-flag-mini {
  width: 45px;
  height: 30px;
  border-radius: 3px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.5);
  flex-shrink: 0;
}

.made-in-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.made-in-text {
  font-family: var(--font-data);
  font-size: 13px;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}
.made-in-text strong { color: #ffffff; }
.made-in-code {
  font-family: var(--font-hud);
  font-size: 11px;
  color: #bb0000;
  letter-spacing: 2px;
  margin-top: 2px;
}
[data-theme="light"] .made-in-code  { color: #880000; }
[data-theme="light"] .made-in-text  { color: #0a1428; }
[data-theme="light"] .made-in-text strong { color: #000; }

/* ── ACCENT BAR (always visible under status bar) ── */
.ke-accent-bar {
  display: flex;
  flex-direction: row;
  height: 4px;
  width: 100%;
  position: sticky;
  top: 44px;   /* below status bar */
  z-index: 99;
  overflow: hidden;
}
.ke-accent-stripe { flex: 1; }
.ke-accent-stripe.ke-white { flex: 0 0 2px; opacity: 0.7; }

/* ── HOME PAGE KENYA CHIP ── */
.home-kenya-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 14px 0;
  padding: 7px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg,
    rgba(0,0,0,0.08) 0%,
    rgba(187,0,0,0.08) 40%,
    rgba(0,102,0,0.08) 100%
  );
  border: 1px solid rgba(187,0,0,0.25);
  position: relative;
  overflow: hidden;
}

/* Subtle left border in flag colours */
.home-kenya-chip::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #000 33%, #bb0000 33% 66%, #006600 66%);
}

.hkc-flag {
  width: 28px;
  height: 19px;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  flex-shrink: 0;
}

.hkc-text {
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text-dim);
  flex: 1;
}
.hkc-text strong { color: var(--text-primary); }

.hkc-strips {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.hkc-s {
  display: block;
  width: 18px;
  height: 4px;
  border-radius: 2px;
}

/* ── Light mode adjustments ── */
[data-theme="light"] .home-kenya-chip {
  background: linear-gradient(135deg,
    rgba(0,0,0,0.04),
    rgba(187,0,0,0.06),
    rgba(0,102,0,0.06)
  );
  border-color: rgba(187,0,0,0.2);
}
[data-theme="light"] .ke-accent-bar { box-shadow: 0 1px 0 rgba(0,0,0,0.08); }
[data-theme="light"] .made-in-kenya {
  background: rgba(0,102,0,0.06);
  border-color: rgba(0,0,0,0.15);
}

/* ═══════════════════════════════════════════════════════════════
   FLOOD NOTIFICATION CONSENT DIALOG
═══════════════════════════════════════════════════════════════ */
.notif-consent-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: overlayIn 0.25s ease;
}
.notif-consent-overlay.hidden { display: none; }

.notif-consent-sheet {
  width: 100%; max-width: 500px;
  background: var(--bg-panel);
  border-radius: 20px 20px 0 0;
  border-top: 2px solid #1976d2;
  padding: 0 20px 36px;
  animation: sheetIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.ncs-icon {
  font-size: 44px; text-align: center;
  margin: 18px 0 8px;
}
.ncs-title {
  font-family: var(--font-hud); font-size: 18px; font-weight: 700;
  color: #1976d2; text-align: center; letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.ncs-body {
  font-family: var(--font-body); font-size: 13px; color: var(--text-dim);
  margin-bottom: 8px;
}
.ncs-list {
  list-style: none; padding: 0; margin: 0 0 14px;
}
.ncs-list li {
  font-family: var(--font-body); font-size: 13px; color: var(--text-primary);
  padding: 7px 0; border-bottom: 1px solid rgba(128,128,128,0.08);
  line-height: 1.4;
}
.ncs-list li strong { color: var(--accent-cyan); }
.ncs-list li:last-child { border-bottom: none; }

.ncs-privacy {
  font-family: var(--font-body); font-size: 11px; color: var(--text-dim);
  background: rgba(0,255,136,0.05);
  border: 1px solid rgba(0,255,136,0.15);
  border-radius: 8px; padding: 9px 12px; margin-bottom: 18px;
  line-height: 1.5;
}
.ncs-privacy strong { color: var(--accent-green); }

.ncs-actions { display: flex; gap: 10px; margin-bottom: 10px; }
.ncs-btn-yes {
  flex: 2; padding: 14px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #1565c0, #1976d2);
  color: #fff; font-family: var(--font-hud); font-size: 13px;
  font-weight: 700; letter-spacing: 1px;
  box-shadow: 0 4px 16px rgba(25,118,210,0.4);
  transition: all 0.2s;
}
.ncs-btn-yes:active { transform: scale(0.97); }
.ncs-btn-no {
  flex: 1; padding: 14px; border-radius: 12px; cursor: pointer;
  background: rgba(128,128,128,0.08);
  border: 1px solid var(--border);
  color: var(--text-dim); font-family: var(--font-data); font-size: 13px;
  font-weight: 600; transition: all 0.2s;
}
.ncs-note {
  font-family: var(--font-body); font-size: 10px; color: var(--text-muted);
  text-align: center; margin: 0;
}

/* ── Notification toggle on flood page ── */
.notif-pref-row {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  flex-wrap: wrap;
}
.notif-toggle-btn {
  padding: 7px 14px; border-radius: 20px; border: none; cursor: pointer;
  font-family: var(--font-hud); font-size: 11px; font-weight: 700;
  letter-spacing: 0.8px; transition: all 0.25s; flex-shrink: 0;
}
.notif-toggle-btn.on {
  background: rgba(25,118,210,0.15);
  border: 1px solid rgba(25,118,210,0.5);
  color: #1976d2;
  box-shadow: 0 0 12px rgba(25,118,210,0.2);
}
.notif-toggle-btn.off {
  background: rgba(128,128,128,0.08);
  border: 1px solid rgba(128,128,128,0.2);
  color: var(--text-muted);
}
.notif-pref-hint {
  font-family: var(--font-body); font-size: 11px; color: var(--text-muted);
  flex: 1;
}

/* ── Live data badge on flood map legend ── */
.fml-live-badge {
  font-family: var(--font-hud); font-size: 9px; font-weight: 700;
  letter-spacing: 1px; color: var(--accent-green);
  padding: 2px 8px; border-radius: 8px;
  background: rgba(0,255,136,0.1);
  border: 1px solid rgba(0,255,136,0.3);
  animation: trackPulse 2.5s ease infinite;
  margin-left: auto;
}

/* ── L.polygon support in local map engine ── */
/* (polygon rendering is handled inside leaflet-local.js already) */

/* ═══════════════════════════════════════════════════════════════
   APP ICON IN SPLASH & STATUS BAR
═══════════════════════════════════════════════════════════════ */
.splash-app-icon {
  width: 110px;
  height: 110px;
  border-radius: 22px;
  object-fit: cover;
  z-index: 1;
  position: relative;
  box-shadow: 0 4px 24px rgba(0, 229, 255, 0.35), 0 2px 8px rgba(0,0,0,0.5);
  animation: iconPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}
@keyframes iconPop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Keep radar rings sizing correct around the icon */
.splash-logo .radar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--accent-cyan);
  animation: radarPulse 2s ease-out infinite;
}

.topbar-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 4px;
  position: relative;
  top: -1px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ═══════════════════════════════════════════════════════════════
   ARCGIS JS API MAP OVERRIDES
   Integrates ArcGIS MapView containers with the app dark/light theme
═══════════════════════════════════════════════════════════════ */

/* Speed camera map container */
.speed-map-wrap {
  margin: 10px 14px 0;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--border);
  height: 230px;
  position: relative;
}
.speed-map {
  width: 100%;
  height: 100%;
}

/* Flood map container */
.flood-map-container {
  width: 100%;
  height: 340px;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

/* Make ArcGIS MapView fill the container */
.esri-view,
.esri-view .esri-view-surface,
.esri-view canvas {
  border-radius: inherit;
}

/* ArcGIS attribution bar — match app theme */
.esri-attribution {
  background: rgba(0,0,0,0.55) !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 9px !important;
  padding: 2px 6px !important;
}
[data-theme="light"] .esri-attribution {
  background: rgba(255,255,255,0.75) !important;
  color: rgba(0,0,0,0.55) !important;
}

/* ArcGIS zoom widget — match dark HUD theme */
.esri-ui-corner .esri-widget--button {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  width: 30px !important;
  height: 30px !important;
  font-size: 16px !important;
  border-radius: 6px !important;
}
.esri-ui-corner .esri-widget--button:hover {
  background: var(--bg-panel) !important;
}
.esri-ui-corner {
  gap: 4px !important;
}

/* ArcGIS popup — match dark card style */
.esri-popup__main-container {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-card) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  max-width: 220px !important;
}
.esri-popup__header-title {
  color: var(--accent-cyan) !important;
  font-family: var(--font-data) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.esri-popup__content {
  color: var(--text-dim) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
.esri-popup__button {
  color: var(--text-dim) !important;
  background: transparent !important;
}
.esri-popup__pointer-direction {
  background: var(--bg-card) !important;
}
[data-theme="light"] .esri-popup__main-container {
  background: #fff !important;
  border-color: rgba(0,0,0,0.12) !important;
}
[data-theme="light"] .esri-popup__header-title {
  color: var(--accent-cyan) !important;
}
[data-theme="light"] .esri-popup__content {
  color: #333 !important;
}

/* Remove ArcGIS loading spinner bg */
.esri-view .esri-loading-indicator {
  background: transparent !important;
}

/* ArcGIS compass widget — hide (not needed for mobile) */
.esri-compass { display: none !important; }

/* Basemap toggle buttons */
.flood-basemap-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.basemap-btn {
  padding: 5px 11px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.basemap-btn.active {
  background: rgba(24,95,165,0.18);
  border-color: rgba(24,95,165,0.55);
  color: #4a9ee0;
}
.basemap-btn:active { transform: scale(0.95); }

/* ═══════════════════════════════════════════════════════════════
   PSV / VEHICLE MODE
═══════════════════════════════════════════════════════════════ */

/* ── Vehicle selector row (below trip buttons) ── */
.vehicle-selector-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 0;
}

.vehicle-select-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-data);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.vehicle-select-btn:active {
  background: var(--bg-panel);
  transform: scale(0.98);
}
.vsb-label { font-weight: 600; flex: 1; }
.vsb-limit {
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-amber);
  margin-left: auto;
  flex-shrink: 0;
}

.vehicle-selector-hint {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── PSV Share Alert Row ── */
.psv-share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 14px 0;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(187, 0, 0, 0.12);
  border: 1.5px solid rgba(187, 0, 0, 0.4);
  animation: bannerIn 0.3s ease;
}
.psv-share-icon { font-size: 18px; flex-shrink: 0; }
.psv-share-text {
  font-family: var(--font-data);
  font-size: 13px;
  color: #ff6060;
  flex: 1;
}
.psv-share-btn {
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(187,0,0,0.2);
  border: 1px solid rgba(187,0,0,0.5);
  color: #ff6060;
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}
.psv-share-btn:active { background: rgba(187,0,0,0.35); }

/* ── Vehicle Modal Sheet ── */
.vehicle-modal-sheet {
  max-height: 88vh;
  overflow-y: auto;
}

.vm-header { padding: 4px 0 14px; }
.vm-title {
  font-family: var(--font-hud);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.vm-subtitle {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}

.vm-vehicles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.vm-vehicle-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
}
.vm-vehicle-card:active { transform: scale(0.98); }
.vm-vehicle-card.selected {
  border-color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.06);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.08);
}
.vm-vehicle-card.selected::after {
  content: '✓';
  font-size: 16px;
  color: var(--accent-cyan);
  font-weight: 700;
  margin-left: auto;
  flex-shrink: 0;
}

.vm-emoji {
  font-size: 26px;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}
.vm-info { flex: 1; }
.vm-name {
  font-family: var(--font-data);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
}
.vm-desc {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.vm-psv-tag {
  font-family: var(--font-hud);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #bb0000;
  background: rgba(187, 0, 0, 0.12);
  border: 1px solid rgba(187, 0, 0, 0.3);
  border-radius: 4px;
  padding: 1px 6px;
}

/* Speed limit badge colours */
.vm-limit-badge {
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.vm-limit-badge.private {
  background: rgba(0,128,200,0.14);
  color: #4aabff;
  border: 1px solid rgba(0,128,200,0.35);
}
.vm-limit-badge.psv {
  background: rgba(187,0,0,0.14);
  color: #ff5555;
  border: 1px solid rgba(187,0,0,0.35);
}
.vm-limit-badge.hire {
  background: rgba(15,157,88,0.14);
  color: #34c77b;
  border: 1px solid rgba(15,157,88,0.3);
}
.vm-limit-badge.hgv {
  background: rgba(100,100,100,0.14);
  color: var(--text-dim);
  border: 1px solid rgba(100,100,100,0.25);
}

/* Legal note at bottom of modal */
.vm-legal-note {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(255,179,0,0.06);
  border: 1px solid rgba(255,179,0,0.18);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.vm-legal-note strong { color: var(--accent-amber); }

/* ═══════════════════════════════════════════════════════════════
   AUDIO TOGGLE BUTTON
═══════════════════════════════════════════════════════════════ */
.audio-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-dim);
}
.audio-toggle.audio-off { opacity: 0.5; }
.audio-toggle:active    { background: var(--bg-card); }

/* ═══════════════════════════════════════════════════════════════
   SPLASH — FULL IMAGE MODE
═══════════════════════════════════════════════════════════════ */
.splash {
  position: fixed !important;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f6ff;
  z-index: 9999;
  transition: opacity 0.6s;
}
.splash.fade-exit { opacity: 0; pointer-events: none; }

.splash-logo {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.splash-full-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING TOUR
═══════════════════════════════════════════════════════════════ */
.tour-sheet {
  padding: 0 20px 28px;
  border-top: 3px solid #0080c8;
  position: relative;
  text-align: center;
}

.tour-progress-track {
  width: 100%;
  height: 3px;
  background: var(--bg-panel);
  border-radius: 2px;
  margin: 14px 0 6px;
  overflow: hidden;
}
.tour-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: #0080c8;
  transition: width 0.35s ease, background 0.3s;
}

.tour-skip {
  position: absolute;
  top: 22px;
  right: 20px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
}
.tour-skip:active { color: var(--text-dim); }

.tour-icon-wrap {
  margin: 8px 0 10px;
}
.tour-icon {
  font-size: 56px;
  display: block;
  animation: iconPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes tourSlideIn {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
.tour-title {
  font-family: var(--font-hud);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #0080c8;
  margin: 0 0 10px;
  animation: tourSlideIn 0.35s ease;
}
.tour-body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.65;
  margin: 0 0 18px;
  animation: tourSlideIn 0.35s ease 0.05s both;
}
.tour-body b { color: var(--text-primary); font-weight: 600; }

.tour-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}
.tour-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: all 0.25s;
  border: none;
  padding: 0;
  display: inline-block;
}
.tour-dot.active {
  width: 22px;
  border-radius: 4px;
  background: #0080c8;
}

.tour-btn-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.tour-btn-next {
  flex: 1;
  max-width: 280px;
  padding: 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: #0080c8;
  color: #fff;
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(0,128,200,0.35);
}
.tour-btn-next:active { transform: scale(0.97); }

.tour-btn-prev {
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-data);
  font-size: 13px;
  transition: all 0.2s;
}
.tour-btn-prev:active { background: var(--bg-card); }

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES (default)
═══════════════════════════════════════════════════════════════ */

/* In light mode, the inner tabs get a border look */
[data-theme="light"] .inner-tab.active {
  background: var(--accent-cyan);
  color: #0a1428;
}

/* Status bar border contrast */
[data-theme="light"] .status-bar {
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Trip bar on light mode */
[data-theme="light"] .trip-bar {
  background: rgba(0,153,77,0.06);
  border-bottom: 1px solid rgba(0,153,77,0.15);
}

/* Camera items on light mode */
[data-theme="light"] .camera-item {
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Speed ring on light mode */
[data-theme="light"] .speed-ring-outer {
  background: radial-gradient(circle, #ffffff, #edf4ff);
  box-shadow: 0 0 24px rgba(0,128,200,0.15), inset 0 0 20px rgba(0,0,0,0.04);
}
[data-theme="light"] .speed-ring-inner {
  background: radial-gradient(circle, #f8fbff 60%, #edf3fc 100%);
}
[data-theme="light"] .speed-value { color: #0a1428; }

/* ═══════════════════════════════════════════════════════════════
   FLOATING SHARE FAB
═══════════════════════════════════════════════════════════════ */
.fab-backdrop {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(0,0,0,0.35);
  animation: overlayIn 0.2s ease;
}
.fab-backdrop.hidden { display: none; }

.share-fab {
  position: fixed;
  bottom: 72px;
  left: 50%; transform: translateX(-50%);
  z-index: 200;
  width: calc(100% - 28px);
  max-width: 420px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px 16px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  animation: sheetIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.share-fab.hidden { display: none; }

.fab-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none;
  color: var(--text-muted); font-size: 18px;
  cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.fab-close:active { background: var(--bg-card); }

.fab-title {
  font-family: var(--font-hud); font-size: 13px;
  font-weight: 700; letter-spacing: 1px;
  color: var(--text-primary); margin-bottom: 14px;
  text-align: center;
}

.fab-icons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.fab-icon-btn {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 10px 4px; border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer; transition: all 0.18s;
  font-family: var(--font-data); font-size: 10px;
  color: var(--text-dim);
}
.fab-icon-btn span:first-child { font-size: 22px; }
.fab-icon-btn:active { transform: scale(0.93); }
.fab-icon-btn.whatsapp  { border-color:rgba(37,211,102,0.3);  color:#25d366; }
.fab-icon-btn.twitter   { border-color:rgba(29,161,242,0.25); color:#1da1f2; }
.fab-icon-btn.facebook  { border-color:rgba(66,103,178,0.25); color:#4267b2; }
.fab-icon-btn.instagram { border-color:rgba(225,48,108,0.25); color:#e1306c; }
.fab-icon-btn.tiktok    { border-color:rgba(0,242,234,0.2);   color:#00f2ea; }
.fab-icon-btn.native    { border-color:var(--border);          color:var(--text-dim); }

.fab-divider {
  height: 1px; background: var(--border); margin-bottom: 10px;
}
.fab-full-btn {
  width: 100%; padding: 11px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); font-family: var(--font-data);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.2s; text-align: center;
}
.fab-full-btn:active { background: var(--bg-panel); }

/* Share FAB nav button pulse when open */
.nav-share-btn.active .nav-icon { transform: scale(1.15) rotate(15deg); }

/* ═══════════════════════════════════════════════════════════════
   REPORT PAGE — TABS & HAZARD TYPES
═══════════════════════════════════════════════════════════════ */
.report-type-tabs {
  display: flex; gap: 6px;
  margin: 0 14px 12px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.rtt-btn {
  flex-shrink: 0;
  padding: 7px 13px; border-radius: 20px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-dim); font-family: var(--font-data);
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.rtt-btn:active { transform: scale(0.95); }
.rtt-btn.active {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: #0a1428;
}
[data-theme="dark"] .rtt-btn.active { color: #0a1428; }

.report-fields { display: block; }
.report-fields.hidden { display: none; }

/* Social share grid on report page */
.report-submit-label {
  font-family: var(--font-hud); font-size: 10px;
  font-weight: 700; letter-spacing: 1.5px;
  color: var(--accent-amber); margin-bottom: 9px;
}
.report-social-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
  margin-bottom: 2px;
}
.rsb {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 10px 6px; border-radius: 10px;
  border: none; cursor: pointer; transition: all 0.2s;
  font-family: var(--font-data); font-size: 11px; font-weight: 600;
}
.rsb span:first-child { font-size: 20px; }
.rsb:active { transform: scale(0.94); }
.rsb.whatsapp  { background:rgba(37,211,102,0.12); border:1px solid rgba(37,211,102,0.3);  color:#25d366; }
.rsb.twitter   { background:rgba(29,161,242,0.10); border:1px solid rgba(29,161,242,0.25); color:#1da1f2; }
.rsb.facebook  { background:rgba(66,103,178,0.10); border:1px solid rgba(66,103,178,0.25); color:#4267b2; }
.rsb.tiktok    { background:rgba(0,242,234,0.07);  border:1px solid rgba(0,242,234,0.2);   color:#00f2ea; }

/* Share Full Modal */
.share-full-sheet { max-height: 82vh; overflow-y: auto; }