:root{
  --bg:#030810;--panel:rgba(2,8,20,.97);--border:rgba(0,200,255,.13);
  --c:#00d4ff;--g:#39ff14;--w:#ff6b35;--d:#ff2020;--gold:#ffd700;
  --tx:#b8dce8;--dim:rgba(184,220,232,.38);
  --f:'Rajdhani',sans-serif;--m:'Share Tech Mono',monospace;
  --glow:0 0 16px rgba(0,212,255,.35);
  --pw:290px;--nw:310px
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{overscroll-behavior:none;-webkit-overflow-scrolling:touch}
.maplibregl-marker{z-index:5!important}
.maplibregl-popup{z-index:50!important}
.maplibregl-canvas-container{z-index:0!important}
.maplibregl-control-container{z-index:3!important}
/* Pitch/compass control — visible above bottom bar on mobile */
.maplibregl-ctrl-bottom-right{z-index:101!important}
/* Hide Carto attribution globally — integrated into NAXI branding */
.maplibregl-ctrl-attrib{display:none!important}
@media(max-width:600px){
  .maplibregl-ctrl-bottom-right{bottom:calc(68px + env(safe-area-inset-bottom,0px))!important;right:8px!important}
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl{
    background:rgba(7,21,37,.9)!important;border:1px solid rgba(0,212,255,.25)!important;
    border-radius:8px!important;box-shadow:0 2px 12px rgba(0,0,0,.4)!important;
  }
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl button{
    width:36px!important;height:36px!important;
  }
}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--tx);font-family:var(--f);
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
#map{background:#0d1b2a;position:fixed;inset:0;z-index:1}
#top{position:fixed;top:0;left:0;right:0;height:56px;z-index:300;
  display:flex;align-items:center;gap:10px;padding:0 16px;
  background:linear-gradient(rgba(3,8,16,.99),rgba(3,8,16,.7));
  border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:height .3s,opacity .3s,padding .3s}
.tl{display:flex;align-items:center;gap:8px;flex-shrink:0;cursor:default}
.naxi-logo-wrap{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0}
.naxi-logo-img{height:32px;width:auto;object-fit:contain;filter:brightness(1.1)}
.naxi-logo-fallback{color:#00d4ff;font-weight:900;font-size:14px;letter-spacing:1px}
@keyframes naxi-dot-orbit{from{transform:rotate(0deg) translateX(18px)}to{transform:rotate(360deg) translateX(18px)}}
.naxi-wordmark{display:flex;flex-direction:column;line-height:1;align-items:flex-start}
.naxi-word-main{font-weight:800;font-size:22px;letter-spacing:5px;color:#fff;
  text-shadow:0 0 14px rgba(0,212,255,.4)}
.naxi-word-sub{font-weight:400;font-size:10px;letter-spacing:5px;color:rgba(0,212,255,.45);margin-top:3px}
.ts{color:var(--border);margin:0 2px;flex-shrink:0}
.tb{font-weight:300;font-size:14px;letter-spacing:4px;color:var(--dim);flex-shrink:0}
#tmode{flex:1;display:flex;align-items:center;justify-content:center}
.tmbtn{height:32px;padding:0 18px;background:transparent;color:var(--dim);
  font-family:var(--f);font-size:13px;font-weight:600;letter-spacing:2px;
  cursor:pointer;border:1px solid var(--border);transition:all .25s cubic-bezier(.4,0,.2,1)}
.tmbtn:first-child{border-radius:4px 0 0 4px}
.tmbtn:last-child{border-radius:0 4px 4px 0;border-left:none}
.tmbtn:last-child.on{border-left:1px solid var(--c)}
.tmbtn.on{border-color:var(--c);color:var(--c);background:rgba(0,212,255,.1);box-shadow:var(--glow)}
.tmbtn:not(.on):hover{color:rgba(0,212,255,.6);border-color:rgba(0,212,255,.3)}
#tclk{font-family:var(--m);font-size:13px;color:var(--c);letter-spacing:1px;flex-shrink:0}
#tlive{display:flex;align-items:center;gap:4px;font-family:var(--m);font-size:12px;color:var(--g);letter-spacing:2px;flex-shrink:0}
.ldot{width:5px;height:5px;border-radius:50%;background:var(--g);animation:ldp 1.4s infinite}
@keyframes ldp{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(57,255,20,.6)}50%{opacity:.4;box-shadow:0 0 0 5px rgba(57,255,20,0)}}
.tbtn{width:28px;height:28px;border-radius:4px;border:1px solid var(--border);
  background:transparent;color:var(--dim);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.tbtn.on,.tbtn:hover{border-color:var(--c);color:var(--c)}
#opanel{position:fixed;top:56px;left:0;bottom:88px;width:var(--pw);z-index:100;
  display:flex;flex-direction:column;
  background:var(--panel);border-right:1px solid var(--border);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:transform .3s}
#opanel.hid{transform:translateX(calc(-1 * var(--pw)))}
#optog{position:fixed;top:60px;left:var(--pw);z-index:101;width:18px;height:42px;
  background:var(--panel);border:1px solid var(--border);border-left:none;
  border-radius:0 5px 5px 0;cursor:pointer;display:flex;align-items:center;
  justify-content:center;color:var(--dim);font-size:11px;transition:all .3s}
#optog:hover{color:var(--c)}
.ophead{padding:10px 13px 8px;border-bottom:1px solid var(--border);flex-shrink:0}
.ophl{font-family:var(--m);font-size:12px;color:var(--dim);letter-spacing:3px;margin-bottom:6px}
.sleg{display:flex;gap:8px;flex-wrap:wrap}
.sli{display:flex;align-items:center;gap:3px;font-family:var(--m);font-size:12px;color:var(--dim)}
.slid{width:16px;height:2px;border-radius:1px}
.scrl{flex:1;overflow-y:auto;padding:5px;scroll-behavior:smooth}
.scrl::-webkit-scrollbar{width:3px}
.scrl::-webkit-scrollbar-track{background:rgba(0,212,255,.02)}
.scrl::-webkit-scrollbar-thumb{background:rgba(0,212,255,.18);border-radius:3px}
.scrl::-webkit-scrollbar-thumb:hover{background:rgba(0,212,255,.35)}
.crow{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:5px;
  cursor:pointer;transition:all .15s;border-bottom:1px solid rgba(0,212,255,.05);
  border-left:3px solid transparent}
.crow:hover{background:rgba(0,212,255,.07);border-left-color:rgba(0,212,255,.4)}
.crow:active{background:rgba(0,212,255,.12)}
.crdot{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.crname{flex:1;font-size:17px;color:var(--tx)}
.crstatus{font-family:var(--m);font-size:12px;letter-spacing:1px}
.creta{font-family:var(--m);font-size:12px;color:var(--c)}
.camsep{padding:5px 13px;font-family:var(--m);font-size:12px;color:var(--dim);flex-shrink:0;
  letter-spacing:3px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:rgba(0,212,255,.02);flex-shrink:0}
.camrow{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;
  transition:all .15s;border-bottom:1px solid rgba(0,212,255,.04);border-left:3px solid transparent}
.camrow:hover{background:rgba(0,212,255,.07);border-left-color:rgba(0,212,255,.3)}
.camrow:active{background:rgba(0,212,255,.12)}
.cdot{width:8px;height:8px;border-radius:2px;flex-shrink:0;transition:box-shadow .3s}
.cn2{flex:1;font-size:14px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdesc{font-family:var(--m);font-size:12px;color:var(--dim)}
#npanel{position:fixed;top:56px;left:0;bottom:0;width:var(--nw);z-index:200;
  background:var(--panel);border-right:1px solid var(--border);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:flex;flex-direction:column;
  overflow-x:hidden;overflow-y:auto;
  transform:translateX(calc(-1 * var(--nw)));transition:transform .3s}
#npanel.show{transform:translateX(0)}
#gpsbar{padding:7px 13px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:7px;font-family:var(--m);font-size:11px;flex-shrink:0}
.gpsd{width:8px;height:8px;border-radius:50%;background:#555;flex-shrink:0}
.gpsd.on{background:var(--g);box-shadow:0 0 6px var(--g)}.gpsd.off{background:var(--w)}
#gpslbl{color:var(--dim);letter-spacing:1px}
#rushbar{padding:6px 13px;border-bottom:1px solid rgba(255,107,53,.25);
  background:rgba(255,107,53,.08);font-family:var(--m);font-size:12px;
  color:var(--w);letter-spacing:2px;display:none;align-items:center;gap:6px;flex-shrink:0}
#rushbar.show{display:flex}
.dbox{padding:13px 14px 8px;border-bottom:1px solid var(--border);flex-shrink:0}
.dlbl{font-family:var(--m);font-size:12px;color:var(--dim);letter-spacing:2px;margin-bottom:6px}
.dinprow{display:flex;gap:5px;margin-bottom:8px}
.dinp{flex:1;height:40px;background:rgba(0,212,255,.05);border:1px solid var(--border);
  border-radius:5px;color:var(--tx);font-family:var(--f);font-size:17px;padding:0 12px;outline:none}
.dinp:focus{border-color:var(--c);box-shadow:0 0 8px rgba(0,212,255,.15)}.dinp::placeholder{color:var(--dim);font-size:14px}
.dicobtn{width:34px;height:34px;border-radius:5px;border:1px solid var(--border);
  background:rgba(0,212,255,.07);color:var(--c);cursor:pointer;font-size:18px;
  display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.dicobtn:hover{background:rgba(0,212,255,.18)}
.mbar{display:flex;gap:4px;padding:8px 12px;flex-shrink:0}
.mbtn{flex:1;min-height:40px;border-radius:4px;border:1px solid var(--border);
  background:transparent;color:var(--dim);font-family:var(--f);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.mbtn.on{border-color:var(--c);color:var(--c);background:rgba(0,212,255,.1);box-shadow:0 0 8px rgba(0,212,255,.15)}
.mbtn:not(.on):hover{border-color:rgba(0,212,255,.35);color:rgba(0,212,255,.65)}
#bcalc{margin:0 14px 8px;width:calc(100% - 28px);height:40px;border-radius:6px;
  border:1px solid rgba(0,212,255,.5);
  background:linear-gradient(135deg,rgba(0,212,255,.14),rgba(0,130,180,.08));
  color:var(--c);font-family:var(--m);font-size:13px;letter-spacing:3px;
  cursor:pointer;transition:all .2s;
  box-shadow:0 0 14px rgba(0,212,255,.1),inset 0 1px 0 rgba(255,255,255,.05)}
#bcalc:hover{background:linear-gradient(135deg,rgba(0,212,255,.26),rgba(0,180,230,.16));border-color:var(--c);box-shadow:0 0 22px rgba(0,212,255,.3),inset 0 1px 0 rgba(255,255,255,.1)}
#bcalc:active{transform:scale(.97);box-shadow:0 0 8px rgba(0,212,255,.2)}
#bcalc:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
#bcalc:hover:not(:disabled){background:rgba(0,212,255,.24)}
#bcalc:disabled{opacity:.4;cursor:not-allowed}
#nresult{flex:1;overflow-y:auto;padding:0 8px 8px}
#nresult::-webkit-scrollbar{width:2px}
.reslbl{padding:6px 4px 4px;font-family:var(--m);font-size:12px;color:var(--dim);letter-spacing:3px;display:flex;align-items:center;gap:5px}
.rlive{width:5px;height:5px;border-radius:50%;background:var(--g);display:inline-block;animation:ldp 1.4s infinite}
.nrc{border-radius:7px;border:1px solid var(--border);background:rgba(0,5,16,.92);overflow:hidden;margin-bottom:6px;cursor:pointer;transition:all .2s}
.nrc:hover{background:rgba(0,10,28,.98);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.4)}.nrc.sel{border-color:var(--c)!important;box-shadow:0 0 14px rgba(0,212,255,.18)}
.nrcbar{height:3px}
.nrcbody{padding:10px 12px 9px}
.nbadges{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:6px}
.nbdg{padding:2px 7px;border-radius:3px;font-family:var(--m);font-size:12px;letter-spacing:1px;font-weight:700;border:1px solid}
.nrctop{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}
.nrcmain{font-size:19px;font-weight:700;color:#fff}
.nrcdist{font-family:var(--m);font-size:12px;color:var(--dim);margin-top:1px}
.nrcdelay{font-family:var(--m);font-size:11px;color:var(--w);margin-top:2px}
.nrcetadiff{font-family:var(--m);font-size:12px;color:rgba(255,107,53,.7);margin-top:2px}
.nrceta{text-align:right;flex-shrink:0}
.nrcmin{font-size:24px;font-weight:700;line-height:1}
.nrcml{font-family:var(--m);font-size:12px;color:var(--dim);letter-spacing:2px}
.nwarns{margin-top:5px;border-top:1px solid rgba(255,255,255,.05);padding-top:4px}
.nw{display:flex;align-items:center;gap:5px;padding:2px 0;font-size:12px}
.nwn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nwd{font-family:var(--m);font-size:12px;color:var(--w);flex-shrink:0}
.nwclean{padding:3px 0;font-family:var(--m);font-size:11px;color:var(--g);letter-spacing:1px}
.nrcbtns{display:flex;gap:4px;margin-top:6px}
.bnnav{flex:1;height:28px;border-radius:4px;border:1px solid var(--c);
  background:rgba(0,212,255,.1);color:var(--c);font-family:var(--f);
  font-size:12px;font-weight:700;letter-spacing:1.5px;cursor:pointer;transition:all .2s;
  animation:bnnav-glow 2s ease-in-out infinite}
.bnnav:hover{background:rgba(0,212,255,.28);box-shadow:0 0 16px rgba(0,212,255,.3)}
@keyframes bnnav-glow{0%,100%{box-shadow:0 0 6px rgba(0,212,255,.15)}50%{box-shadow:0 0 12px rgba(0,212,255,.3)}}
.bnnav.alt{border-color:rgba(0,212,255,.3);background:transparent;color:var(--dim);animation:none}
.bngm{height:28px;width:28px;border-radius:4px;border:1px solid var(--border);
  background:transparent;color:var(--dim);font-size:16px;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center}
.bngm:hover{border-color:var(--c);color:var(--c)}
#nav3d{position:fixed;bottom:0;left:0;right:0;z-index:500;
  background:linear-gradient(transparent,rgba(3,8,18,.9) 18%,rgba(3,8,18,.99) 100%);display:none;
  padding-bottom:env(safe-area-inset-bottom,0px)}
#nav3d.show{display:block}
#simband{background:rgba(255,107,53,.15);border-bottom:1px solid rgba(255,107,53,.4);
  padding:6px 12px 6px 16px;font-family:var(--m);font-size:12px;color:var(--w);letter-spacing:2px;
  display:none;align-items:center;gap:7px;flex-wrap:wrap}
#simband.show{display:flex}
.simblink{width:6px;height:6px;border-radius:50%;background:var(--w);animation:ldp 1s infinite;flex-shrink:0}
#simspeed{display:flex;align-items:center;gap:5px;margin-left:auto}
.sslbl{font-family:var(--m);font-size:12px;color:var(--dim);letter-spacing:2px;flex-shrink:0}
.ssbtn{height:24px;padding:0 11px;border-radius:3px;border:1px solid var(--border);
  background:transparent;color:var(--dim);font-family:var(--m);font-size:11px;cursor:pointer;transition:all .15s}
.ssbtn.on{border-color:var(--g);color:var(--g);background:rgba(57,255,20,.1)}
#hudwarn{padding:5px 16px 0;border-top:1px solid rgba(255,255,255,.06);display:none}
#hudwarn.show{display:block}
#nturn{display:flex;align-items:center;gap:16px;padding:14px 18px 8px;border-top:1px solid rgba(0,212,255,.2)}
#narrow-wrap{width:62px;height:62px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;color:var(--c);
  filter:drop-shadow(0 0 10px rgba(0,212,255,.55));
  transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
#narrow-wrap.pop{transform:scale(1.18)}
#narrow{width:56px;height:56px;display:flex;align-items:center;justify-content:center}
#turn-bar-wrap{height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin:3px 0 5px;overflow:hidden}
#turn-bar{height:100%;width:0%;border-radius:2px;background:var(--g);transition:width .25s ease,background .4s ease}
#nnext{font-family:var(--m);font-size:11px;color:var(--dim);margin-top:4px;letter-spacing:.8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.75}
.swap-row{display:flex;align-items:center;gap:8px;padding:5px 0 3px}
.swap-line{flex:1;height:1px;background:var(--border)}
.swap-btn{width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,212,255,.3);
  background:rgba(0,212,255,.07);color:var(--c);font-size:14px;cursor:pointer;
  transition:all .18s;flex-shrink:0;line-height:1}
.swap-btn:hover{background:rgba(0,212,255,.22);border-color:var(--c);transform:rotate(180deg)}
#iorig-wrap{position:relative}
#aclist-orig{top:calc(100% + 2px);left:0;right:0}
.hwrow{display:flex;align-items:center;gap:8px;padding:3px 0;
  font-family:var(--m);font-size:11px;color:var(--w);letter-spacing:.8px}
.hwrow-icon{font-size:13px;flex-shrink:0}
.hwrow-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hwrow-delay{color:var(--d);font-weight:700;flex-shrink:0}
@keyframes modal-pop{0%{opacity:0;transform:scale(.9) translateY(8px)}100%{opacity:1;transform:scale(1) translateY(0)}}
#ninfo{flex:1;min-width:0}
#ndist{font-family:var(--m);font-size:32px;color:#fff;line-height:1;letter-spacing:-1px;font-weight:700}
#ndist small{font-size:12px;color:var(--dim);letter-spacing:2px;margin-left:3px}
#ninstr{font-size:19px;font-weight:600;color:var(--tx);margin-top:2px;white-space:normal;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#nstats{display:flex;margin:0 18px;padding:5px 0 8px;border-top:1px solid rgba(255,255,255,.05)}
.nst{flex:1;text-align:center;padding:4px 0}.nst+.nst{border-left:1px solid var(--border)}
.nstv{font-family:var(--m);font-size:26px;color:var(--c);line-height:1}
.nstl{font-family:var(--m);font-size:11px;color:var(--dim);letter-spacing:2px;margin-top:1px}
.nst.spd .nstv{color:var(--g)}
#bstopnav{margin:0 18px 10px;width:calc(100% - 36px);height:34px;border-radius:5px;
  border:1px solid rgba(255,80,80,.35);background:rgba(255,32,32,.07);color:#ff9999;
  font-family:var(--f);font-size:13px;font-weight:700;letter-spacing:2px;cursor:pointer;transition:all .2s}
#bstopnav:hover{background:rgba(255,32,32,.18);border-color:rgba(255,80,80,.6);box-shadow:0 0 12px rgba(255,32,32,.25);color:#ffbbbb}
#simprog{position:fixed;top:56px;left:0;right:0;height:3px;z-index:501;background:rgba(0,212,255,.08);display:none}
#simprog.show{display:block}
#simprogfill{height:100%;background:linear-gradient(90deg,var(--c),var(--g));width:0%;transition:width .3s linear;box-shadow:0 0 8px var(--c)}
#reroute{position:fixed;top:56px;left:0;right:0;z-index:600;background:rgba(255,107,53,.93);
  padding:7px 14px;text-align:center;font-family:var(--f);font-size:14px;font-weight:700;
  letter-spacing:2px;color:#fff;display:none;pointer-events:none}
#reroute.show{display:block}
#spdbub{position:fixed;top:56px;left:10px;z-index:400;width:66px;height:66px;
  border-radius:50%;background:rgba(3,8,18,.95);border:2.5px solid var(--g);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 0 18px rgba(57,255,20,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:spd-breathe 3s ease-in-out infinite}
#spdbub.show{display:flex}
@keyframes spd-breathe{0%,100%{box-shadow:0 0 14px rgba(57,255,20,.25)}50%{box-shadow:0 0 22px rgba(57,255,20,.45)}}
#spdval{font-family:var(--m);font-size:26px;color:var(--g);line-height:1}
#spdunit{font-family:var(--m);font-size:11px;color:var(--dim);letter-spacing:1px}
/* P1: Speed limit sign — classic red circle */
#speed-limit{position:fixed;top:56px;left:84px;z-index:400;width:44px;height:44px;
  border-radius:50%;background:#fff;border:4px solid #ff2020;display:none;
  align-items:center;justify-content:center;font-family:var(--m);font-size:18px;
  font-weight:800;color:#1a1a1a;box-shadow:0 2px 10px rgba(0,0,0,.5);transition:all .3s}
#speed-limit.show{display:flex}
#speed-limit.over{animation:sl-flash .5s ease infinite;border-color:#ff0000;
  box-shadow:0 0 16px rgba(255,0,0,.6)}
@keyframes sl-flash{0%,100%{background:#fff}50%{background:#ffe0e0}}
/* P7: Radar warning row in HUD */
.hwrow-radar{background:rgba(255,107,53,.08)!important;border-left:2px solid #ff6b35}
#brectr{position:fixed;top:56px;right:10px;z-index:400;width:38px;height:38px;
  border-radius:7px;border:1px solid var(--border);background:var(--panel);
  color:var(--c);cursor:pointer;font-size:19px;display:none;
  align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s}
#brectr.show{display:flex;animation:rectr-attention .6s ease}
#brectr:hover{background:rgba(0,212,255,.12);border-color:var(--c);box-shadow:0 0 12px rgba(0,212,255,.3)}
@keyframes rectr-attention{0%{transform:scale(.8);opacity:.5}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
/* Nav-mode fullscreen button — at brectr position by default, slides left when brectr shows */
#nav-fs{position:fixed;top:56px;right:10px;z-index:399;width:38px;height:38px;
  border-radius:7px;border:1px solid var(--border);background:var(--panel);
  color:var(--dim);cursor:pointer;font-size:16px;display:none;
  align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:right .3s cubic-bezier(.34,1.56,.64,1),top .2s}
#nav-fs:hover,#nav-fs:active{color:var(--c);border-color:var(--c);background:rgba(0,212,255,.12)}
#brectr.show ~ #nav-fs{right:56px}
body[data-mode="nav"] #nav-fs{display:none}
#top.navmode ~ #nav-fs{display:flex}
body.fs-active #nav-fs{display:none!important}
#toast{position:fixed;top:58px;left:50%;transform:translateX(-50%) translateY(-12px);z-index:700;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s cubic-bezier(.34,1.56,.64,1);
  background:rgba(0,180,220,.93);border:1px solid var(--c);border-radius:8px;
  padding:7px 18px;font-size:16px;font-weight:600;color:#fff;
  box-shadow:0 4px 18px rgba(0,212,255,.4);max-width:88vw;text-align:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ── Route Camera — Smart Hybrid Cam ─────────────────── */
#routecam{position:fixed;bottom:350px;right:16px;z-index:510;
  width:320px;border-radius:12px;overflow:hidden;display:none;
  background:rgba(3,8,16,.97);
  border:1.5px solid rgba(0,212,255,.3);
  box-shadow:0 4px 20px rgba(0,0,0,.7),0 0 12px rgba(0,212,255,.15);
  transition:width .3s,border-color .5s,box-shadow .5s;cursor:pointer}
#routecam.show{display:block;animation:rcam-in .4s cubic-bezier(.34,1.56,.64,1)}
#routecam.expanded{width:520px}
@keyframes rcam-in{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* Mode colors — border + glow shift */
#routecam[data-cam-mode="cruise"]{border-color:rgba(0,212,255,.35);
  box-shadow:0 4px 20px rgba(0,0,0,.7),0 0 14px rgba(0,212,255,.15)}
#routecam[data-cam-mode="scout"]{border-color:rgba(255,215,0,.5);
  box-shadow:0 4px 20px rgba(0,0,0,.7),0 0 16px rgba(255,215,0,.2);
  animation:rcam-in .4s cubic-bezier(.34,1.56,.64,1),rc-scout-glow 2.5s ease-in-out infinite}
#routecam[data-cam-mode="alert"]{border-color:rgba(255,60,60,.6);
  box-shadow:0 4px 20px rgba(0,0,0,.7),0 0 20px rgba(255,32,32,.3);
  animation:rcam-in .4s cubic-bezier(.34,1.56,.64,1),rc-alert-glow 1.2s ease-in-out infinite}
@keyframes rc-scout-glow{0%,100%{box-shadow:0 4px 20px rgba(0,0,0,.7),0 0 14px rgba(255,215,0,.15)}
  50%{box-shadow:0 4px 20px rgba(0,0,0,.7),0 0 24px rgba(255,215,0,.35)}}
@keyframes rc-alert-glow{0%,100%{box-shadow:0 4px 20px rgba(0,0,0,.7),0 0 16px rgba(255,32,32,.25)}
  50%{box-shadow:0 4px 20px rgba(0,0,0,.7),0 0 30px rgba(255,32,32,.55)}}

/* Video container */
#routecam-vid{width:100%;height:190px;background:#060e18;position:relative;overflow:hidden;transition:height .3s ease}
#routecam.expanded #routecam-vid{height:320px}
#routecam-vid video,#routecam-vid video-js{width:100%!important;height:100%!important;object-fit:contain}
#routecam-vid video-js .vjs-tech{object-fit:contain;width:100%;height:100%}

/* Corner brackets — surveillance HUD feel */
#rc-corners{position:absolute;inset:6px;z-index:1;pointer-events:none;opacity:.45;transition:opacity .3s}
.rc-c{position:absolute;width:14px;height:14px;border-color:rgba(0,212,255,.6);border-style:solid;border-width:0;transition:border-color .5s}
.rc-tl{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px;border-radius:2px 0 0 0}
.rc-tr{top:0;right:0;border-top-width:1.5px;border-right-width:1.5px;border-radius:0 2px 0 0}
.rc-bl{bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px;border-radius:0 0 0 2px}
.rc-br{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px;border-radius:0 0 2px 0}
#routecam[data-cam-mode="scout"] .rc-c{border-color:rgba(255,215,0,.6)}
#routecam[data-cam-mode="alert"] .rc-c{border-color:rgba(255,60,60,.7)}
#routecam:hover #rc-corners{opacity:.9}

/* Scan line — visible in scout mode, sweeps down */
#rc-scanline{position:absolute;left:0;right:0;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent 5%,rgba(255,215,0,.5) 50%,transparent 95%);
  opacity:0;top:0}
#routecam[data-cam-mode="scout"] #rc-scanline{opacity:1;animation:rc-scan 2.8s linear infinite}
@keyframes rc-scan{0%{top:-2px}100%{top:calc(100% + 2px)}}

/* Mode badge — top-left REC-style */
#rc-badge{position:absolute;top:8px;left:8px;z-index:3;
  font-family:var(--m);font-size:10px;letter-spacing:1.5px;font-weight:700;
  padding:3px 8px;border-radius:4px;pointer-events:none;
  background:rgba(0,212,255,.15);color:rgba(0,212,255,.85);border:1px solid rgba(0,212,255,.3);
  text-shadow:0 1px 4px rgba(0,0,0,.8);transition:all .4s}
#routecam[data-cam-mode="scout"] #rc-badge{
  background:rgba(255,215,0,.12);color:#ffd700;border-color:rgba(255,215,0,.3);
  animation:rc-badge-pulse 1.4s ease-in-out infinite}
#routecam[data-cam-mode="alert"] #rc-badge{
  background:rgba(255,32,32,.18);color:#ff5555;border-color:rgba(255,60,60,.4);
  animation:rc-badge-pulse .7s ease-in-out infinite}
@keyframes rc-badge-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* Info bar */
#routecam-info{padding:8px 12px;display:flex;align-items:center;gap:8px;
  border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.3)}
#routecam-status{width:10px;height:10px;border-radius:3px;flex-shrink:0;transition:background .3s}
#rc-info-text{flex:1;min-width:0}
#routecam-name{font-family:var(--m);font-size:12px;color:#fff;
  letter-spacing:.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rc-reason{font-family:var(--m);font-size:10px;letter-spacing:.8px;
  color:rgba(0,212,255,.55);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .4s}
#routecam[data-cam-mode="scout"] #rc-reason{color:rgba(255,215,0,.55)}
#routecam[data-cam-mode="alert"] #rc-reason{color:rgba(255,80,80,.7)}

/* Close button */
#routecam-close{position:absolute;top:8px;right:8px;z-index:4;width:28px;height:28px;
  border-radius:50%;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.8);font-size:14px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;opacity:.6;transition:opacity .2s}
#routecam:hover #routecam-close{opacity:1}
/* Dynamic dock — JS positions routecam above nav3d HUD on mobile */
#routecam.rc-nav-docked{top:auto!important;right:8px!important;bottom:200px;transition:bottom .25s ease,width .3s ease}

/* Mobile */
@media(max-width:600px){
  #routecam{width:160px;right:6px}
  #routecam-vid{height:100px}
  #routecam.expanded{width:300px}
  #routecam.expanded #routecam-vid{height:190px}
  #routecam-close{opacity:.7;width:32px;height:32px;font-size:15px;top:4px;right:4px}
  #rc-badge{font-size:8px;padding:2px 6px;letter-spacing:1px}
  #routecam-name{font-size:11px}
  #rc-reason{font-size:9px}
  .rc-c{width:10px;height:10px}
  #rc-corners{inset:4px}
}
/* Small desktop */
@media(min-width:601px) and (max-height:700px){
  #routecam{bottom:300px;width:260px}
  #routecam-vid{height:150px}
  #routecam.expanded{width:420px}
  #routecam.expanded #routecam-vid{height:240px}
}
/* ── Mobile route preview bar ──────────────────────────── */
#route-preview-bar{position:fixed;bottom:calc(68px + env(safe-area-inset-bottom,0px));left:8px;right:8px;
  z-index:520;border-radius:12px;padding:10px 12px;
  background:rgba(3,8,16,.95);border:1.5px solid rgba(0,212,255,.3);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 4px 20px rgba(0,0,0,.6),0 0 12px rgba(0,212,255,.1);
  display:flex;align-items:center;gap:8px;
  transform:translateY(20px);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s}
#route-preview-bar.show{transform:translateY(0);opacity:1}
.rpb-info{flex:1;min-width:0}
.rpb-name{display:block;font-family:var(--m);font-size:11px;color:#fff;letter-spacing:.8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rpb-stats{display:block;font-family:var(--m);font-size:10px;color:var(--c);letter-spacing:.5px;margin-top:2px}
.rpb-back,.rpb-go{font-family:var(--m);font-size:10px;letter-spacing:1px;border:none;
  border-radius:8px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.rpb-back{background:rgba(255,255,255,.08);color:var(--dim);border:1px solid rgba(255,255,255,.1)}
.rpb-go{background:linear-gradient(135deg,rgba(0,212,255,.25),rgba(0,180,216,.15));
  color:#00d4ff;border:1px solid rgba(0,212,255,.4);
  box-shadow:0 0 8px rgba(0,212,255,.15)}

#uarrow{width:60px;height:60px;overflow:visible;display:block}
#uarrow .ua-pulse{transform-origin:center;animation:ua-ring 2s ease-out infinite}
#uarrow .ua-pulse2{transform-origin:center;animation:ua-ring 2s ease-out infinite;animation-delay:.67s}
#uarrow .ua-pulse3{transform-origin:center;animation:ua-ring 2s ease-out infinite;animation-delay:1.33s}
@keyframes ua-ring{
  0%{r:16;opacity:.8;stroke-width:2.5}
  100%{r:38;opacity:0;stroke-width:.3}
}
#uarrow .ua-body{filter:drop-shadow(0 0 12px rgba(0,212,255,1)) drop-shadow(0 0 24px rgba(0,212,255,.6)) drop-shadow(0 0 40px rgba(0,212,255,.25))}
#botbar{position:fixed;bottom:0;left:0;right:0;height:calc(76px + env(safe-area-inset-bottom,0px));z-index:100;
  background:linear-gradient(rgba(3,8,16,.75),rgba(3,8,16,.99));
  border-top:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;align-items:center;padding:0 12px env(safe-area-inset-bottom,0px);gap:10px;transition:all .3s}
#botbar.navmode{opacity:0;pointer-events:none}
#radio{display:flex;align-items:center;gap:9px;flex-shrink:0}
.rlogo{width:44px;height:44px;border-radius:50%;flex-shrink:0;position:relative;
  display:flex;align-items:center;justify-content:center}
.rlogo-ring{position:absolute;border-radius:50%;border:1.5px solid rgba(0,212,255,0);
  animation:naxi-ring-pulse 2.4s ease-in-out infinite;pointer-events:none}
.rlogo-ring:nth-child(1){inset:-3px;animation-delay:0s}
.rlogo-ring:nth-child(2){inset:-7px;animation-delay:.8s}
.rlogo-inner{position:relative;width:36px;height:36px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(0,212,255,.18),rgba(0,0,40,.95));
  border:1px solid rgba(0,212,255,.35);
  box-shadow:0 0 10px rgba(0,212,255,.2);
  display:flex;align-items:center;justify-content:center}
#rtitle{font-size:16px;font-weight:700;color:#fff;max-width:120px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#rsub{font-family:var(--m);font-size:12px;color:var(--dim);letter-spacing:1px;max-width:120px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#eq{display:none;align-items:flex-end;gap:1px;height:18px}
.eb{width:2px;background:var(--c);border-radius:2px;animation:ea .5s ease-in-out infinite alternate}
.eb:nth-child(1){height:4px;animation-duration:.38s}.eb:nth-child(2){height:11px;animation-duration:.52s}
.eb:nth-child(3){height:17px;animation-duration:.33s}.eb:nth-child(4){height:8px;animation-duration:.58s}
.eb:nth-child(5){height:14px;animation-duration:.44s}
@keyframes ea{from{transform:scaleY(.12)}to{transform:scaleY(1)}}
#eq.play{display:flex}
#btr{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);
  background:transparent;color:var(--c);font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
#btr:hover{background:rgba(0,212,255,.08);border-color:var(--c)}
#btr.loading{opacity:.5;cursor:wait}
.sp{flex:1}
#binc{height:38px;padding:0 10px;border-radius:5px;border:1px solid rgba(255,107,53,.4);
  background:rgba(255,107,53,.08);color:var(--w);font-size:12px;font-weight:700;
  letter-spacing:1px;cursor:pointer;transition:all .2s;display:none;align-items:center;gap:5px}
@media(max-width:600px){#binc{display:flex}}
#binc:hover{background:rgba(255,107,53,.2);box-shadow:0 0 12px rgba(255,107,53,.25);border-color:rgba(255,107,53,.6)}
#binc.disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
#bgsp{background:rgba(38,198,218,.12);border:1px solid rgba(38,198,218,.4);color:#26c6da;
  border-radius:7px;padding:8px 12px;font-family:var(--f);font-weight:700;font-size:16px;
  cursor:pointer;letter-spacing:1px;transition:all .2s;height:38px;display:flex;align-items:center}
#bgsp:hover{background:rgba(38,198,218,.22);box-shadow:0 0 14px rgba(38,198,218,.3);border-color:rgba(38,198,218,.7)}
#bgsp:active{transform:scale(.95)}
#baqi{background:rgba(80,240,230,.1);border:1px solid rgba(80,240,230,.35);color:#50f0e6;
  border-radius:7px;padding:8px 10px;font-family:var(--f);font-weight:700;font-size:14px;
  cursor:pointer;letter-spacing:1px;transition:all .2s;height:38px;display:flex;align-items:center}
#baqi:hover{background:rgba(80,240,230,.2);box-shadow:0 0 14px rgba(80,240,230,.3);border-color:rgba(80,240,230,.6)}
#baqi:active{transform:scale(.95)}
#baqi.on{background:rgba(80,240,230,.25);border-color:#50f0e6;box-shadow:0 0 12px rgba(80,240,230,.4)}

/* ── Weather widget ─────────────────────────────────── */
#wx-widget{position:fixed;top:62px;right:12px;z-index:150;
  background:rgba(7,21,37,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(80,240,230,.3);border-radius:12px;
  padding:6px 12px;cursor:pointer;transition:all .3s;
  font-family:var(--f);color:#fff;display:none;min-width:0;
  box-shadow:0 0 12px rgba(80,240,230,.15)}
@keyframes wx-appear{from{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
#wx-widget.wx-entered{animation:wx-appear .5s ease-out}
#wx-widget:hover{border-color:rgba(0,212,255,.3);background:rgba(7,21,37,.95)}
#wx-widget.open{padding:10px 14px;border-radius:14px}
#wx-pill{display:flex;align-items:center;gap:6px;white-space:nowrap}
#wx-icon{font-size:20px}
#wx-temp{font-size:16px;font-weight:700}
#wx-label{font-size:11px;color:var(--dim);font-family:var(--m);letter-spacing:.5px}
#wx-detail{margin-top:0;font-size:12px;color:var(--dim);line-height:1.7;
  max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s,margin .3s}
#wx-widget.open #wx-detail{max-height:300px;opacity:1;margin-top:8px}
#wx-forecast{display:flex;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}
.wx-fc{text-align:center;flex:1;font-size:11px}
.wx-fc-time{color:var(--dim);font-family:var(--m);font-size:10px;letter-spacing:.5px}
.wx-fc-icon{font-size:16px;margin:2px 0}
.wx-fc-temp{font-weight:700;font-size:12px}
#wx-close{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--dim);
  font-size:14px;cursor:pointer;display:none;padding:2px}
#wx-widget.open #wx-close{display:block}
#wx-src{font-size:9px;color:rgba(255,255,255,.2);margin-top:6px;font-style:italic}
@media(max-width:600px){#wx-widget{top:62px;bottom:auto;right:8px}}
/* Hide weather widget during navigation to avoid overlap with recenter/speed */
body[data-mode="nav"] #wx-widget{display:none!important}
body[data-mode="nav"] #wx-fx{opacity:0!important}

/* ── Weather particle overlay ───────────────────────── */
#wx-fx{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1s}
#wx-fx.on{opacity:1}
/* Rain */
#wx-fx.rain .wx-drop,#wx-fx.heavyrain .wx-drop,#wx-fx.drizzle .wx-drop,#wx-fx.thunder .wx-drop{display:block}
.wx-drop{display:none;position:absolute;width:1.5px;background:linear-gradient(transparent,rgba(174,194,224,.5));
  border-radius:0 0 2px 2px;animation:wxRain linear infinite}
@keyframes wxRain{0%{transform:translateY(-20px)}100%{transform:translateY(105vh)}}
/* Snow */
#wx-fx.snow .wx-flake,#wx-fx.heavysnow .wx-flake{display:block}
.wx-flake{display:none;position:absolute;width:4px;height:4px;background:rgba(255,255,255,.7);
  border-radius:50%;animation:wxSnow linear infinite;filter:blur(0.5px)}
@keyframes wxSnow{0%{transform:translateY(-20px) rotate(0deg)}100%{transform:translateY(105vh) rotate(360deg)}}
/* Fog */
#wx-fx.fog::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(180,190,200,.12) 0%,rgba(180,190,200,.18) 40%,rgba(180,190,200,.08) 100%);
  animation:wxFog 8s ease-in-out infinite alternate}
@keyframes wxFog{0%{opacity:.6}100%{opacity:1}}
/* Overcast — subtle darkening */
#wx-fx.overcast::after{content:'';position:absolute;inset:0;background:rgba(40,50,60,.08)}
/* Thunder — periodic flash */
#wx-fx.thunder::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);
  animation:wxFlash 4s ease-in-out infinite}
@keyframes wxFlash{0%,94%,100%{background:rgba(255,255,255,0)}95%{background:rgba(255,255,255,.15)}97%{background:rgba(255,255,255,0)}98%{background:rgba(255,255,255,.08)}}
#bshare{background:rgba(0,180,216,.15);border:1px solid rgba(0,180,216,.4);color:#00d4ff;
  border-radius:7px;padding:8px 12px;font-family:var(--f);font-weight:700;font-size:16px;
  cursor:pointer;letter-spacing:1px;transition:all .2s;height:38px;display:none;align-items:center}
@media(max-width:600px){#bshare{display:flex}}
#bshare:hover{background:rgba(0,180,216,.25);box-shadow:0 0 14px rgba(0,212,255,.3);border-color:rgba(0,212,255,.7)}
#bshare:active{transform:scale(.95)}
#binc:active{transform:scale(.95)}
#brand{flex-shrink:0;text-align:center}
.bpow{font-family:var(--m);font-size:12px;color:var(--dim);letter-spacing:2px}
.blmk{font-size:16px;font-weight:800;color:#00d4ff;letter-spacing:1.5px;text-decoration:none;text-shadow:0 0 8px rgba(0,212,255,.4);transition:all .2s}
.blmk:hover{text-shadow:0 0 16px rgba(0,212,255,.7);color:#4de8ff}
#sbar{position:fixed;bottom:76px;left:0;right:0;z-index:99;height:16px;
  background:rgba(3,8,16,.94);border-top:1px solid rgba(0,212,255,.05);
  display:flex;align-items:center;padding:0 12px;gap:12px;
  font-family:var(--m);font-size:11px;color:var(--dim);letter-spacing:.8px;transition:all .3s}
#sbar.navmode{opacity:0;pointer-events:none}
.si{display:flex;align-items:center;gap:3px}.si b{color:var(--c)}
#gpsi.on b{color:var(--g)}
#incmodal{position:fixed;inset:0;z-index:800;display:flex;align-items:center;
  justify-content:center;background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .2s}
#incmodal.open{opacity:1;pointer-events:all}
#incmodal .mbox{transform:scale(.92) translateY(10px);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
#incmodal.open .mbox{transform:scale(1) translateY(0)}
.mbox{width:290px;background:rgba(2,10,22,.99);border:1px solid var(--border);
  border-radius:11px;padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.9);
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto}
.mtit{font-size:18px;font-weight:700;color:#fff;letter-spacing:2px;margin-bottom:2px}
.msub{font-family:var(--m);font-size:12px;color:var(--dim);letter-spacing:2px;margin-bottom:10px}
.mloc{font-family:var(--m);font-size:12px;color:var(--c);letter-spacing:.8px;
  padding:4px 8px;border:1px solid rgba(0,212,255,.2);border-radius:4px;
  background:rgba(0,212,255,.04);margin-bottom:8px}
.minfo{font-family:var(--m);font-size:11px;color:var(--dim);letter-spacing:1px;
  margin-bottom:8px;padding:4px 8px;border:1px solid rgba(255,107,53,.2);
  border-radius:4px;background:rgba(255,107,53,.04);line-height:1.5}
.itypes{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:8px}
.itbtn{padding:5px 3px;border-radius:5px;border:1px solid var(--border);
  background:transparent;color:var(--dim);font-size:11px;cursor:pointer;transition:all .2s;text-align:center}
.itbtn:hover,.itbtn.sel{border-color:var(--w);color:var(--w);background:rgba(255,107,53,.1)}
.itbtn.sel{transform:scale(1.04);box-shadow:0 0 8px rgba(255,107,53,.2)}
.itbtn:active{transform:scale(.95)}
.itic{font-size:17px;display:block;margin-bottom:1px}
.mta{width:100%;height:46px;background:rgba(0,212,255,.04);border:1px solid var(--border);
  border-radius:4px;color:var(--tx);font-size:16px;padding:5px 7px;resize:none;outline:none;margin-bottom:8px;font-family:var(--f)}
.mta:focus{border-color:var(--c)}
.mbtns{display:flex;gap:5px}
.mbcan{flex:1;height:30px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--dim);font-size:12px;font-weight:600;cursor:pointer}
.mbsnd{flex:2;height:30px;border-radius:4px;border:1px solid var(--w);background:rgba(255,107,53,.12);color:var(--w);font-size:12px;font-weight:700;cursor:pointer}
.maplibregl-popup-content{background:rgba(2,10,22,.97)!important;border:1px solid var(--border)!important;
  border-radius:8px!important;padding:0!important;box-shadow:0 0 28px rgba(0,212,255,.35)!important;
  color:var(--tx)!important;overflow:hidden;min-width:340px}
.maplibregl-popup-tip{border-top-color:rgba(2,10,22,.97)!important;border-bottom-color:rgba(2,10,22,.97)!important}
.maplibregl-popup-close-button{color:rgba(184,220,232,.6)!important;font-size:22px!important;
  background:rgba(0,0,0,.4)!important;border-radius:0 8px 0 4px!important;width:30px!important;height:30px!important;z-index:1}
.campop-vid{position:relative;width:100%;background:#060e18;border-radius:8px 8px 0 0;overflow:hidden}
.campop-vid video,.campop-vid video-js,.campop-vid img{width:100%;display:block;max-height:280px}
.campop-vid video-js{background:#060e18;border-radius:8px 8px 0 0}
.campop-vid video-js .vjs-tech{object-fit:contain;max-height:280px;width:100%}
/* Video.js chrome — all hidden for live camera streams */
.vjs-default-skin .vjs-control-bar{display:none!important}
.vjs-default-skin .vjs-big-play-button{display:none!important}
.vjs-default-skin .vjs-loading-spinner{display:none!important}
.vjs-default-skin .vjs-error-display{display:none!important}
.vjs-default-skin .vjs-text-track-settings{display:none!important}
.vjs-default-skin .vjs-modal-dialog{display:none!important}
.vjs-default-skin .vjs-poster{display:none!important}
.cpcov{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.cpcov-chip{font-size:10px;padding:2px 7px;border-radius:4px;background:rgba(0,212,255,.1);
  border:1px solid rgba(0,212,255,.2);color:rgba(0,212,255,.8);font-family:var(--m);letter-spacing:.5px;
  transition:all .2s;cursor:default}
.cpcov-chip:hover{background:rgba(0,212,255,.2);border-color:rgba(0,212,255,.45);color:#00d4ff}
.cov-tip .maplibregl-popup-content{background:rgba(7,21,37,.95);color:#e0eaf5;font-size:12px;
  font-family:var(--m);padding:6px 10px;border:1px solid rgba(0,212,255,.2);border-radius:6px;
  letter-spacing:.5px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cov-tip .maplibregl-popup-tip{border-top-color:rgba(7,21,37,.95)}
.vloader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.75);font-size:24px;flex-direction:column;gap:5px}
.vloader small{font-family:var(--m);font-size:11px;color:var(--dim);letter-spacing:2px}
.campop-info{padding:10px 14px 12px}
.cpn{font-size:17px;font-weight:700;color:#fff;margin-bottom:3px}
.cps{font-family:var(--m);font-size:11px;letter-spacing:2px;margin-bottom:4px}
.cpf{color:var(--g)}.cpm{color:var(--gold)}.cph{color:var(--w)}.cpb{color:var(--d)}.cpu{color:var(--dim)}
.cpd{font-size:11px;color:var(--dim);line-height:1.4}
.ipp{font-size:16px;font-weight:700;color:#fff;margin-bottom:2px;padding:10px 12px 2px}
.ipsc{font-family:var(--m);font-size:11px;color:var(--dim);letter-spacing:2px;padding:0 12px 6px;border-bottom:1px solid rgba(255,255,255,.06)}
.ipbody{padding:8px 12px 10px}
.ipdesc{font-size:11px;color:var(--dim);margin-bottom:6px;line-height:1.4}
.ipvb{display:flex;gap:3px}
.ivb{flex:1;height:23px;border-radius:3px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid;transition:all .2s}
.ivc{border-color:rgba(57,255,20,.35);background:rgba(57,255,20,.06);color:var(--g)}
.ivd{border-color:rgba(255,32,32,.35);background:rgba(255,32,32,.06);color:var(--d)}
@keyframes cam_blk{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.5}}
@keyframes cam_hvy{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
@keyframes cam_mod{0%,100%{transform:scale(1)}60%{transform:scale(1.25)}}
@keyframes inc_pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
@keyframes cam-pulse{
  0%,100%{box-shadow:0 0 10px rgba(0,212,255,.3),0 0 20px rgba(0,212,255,.1);border-color:rgba(0,212,255,.55)}
  50%{box-shadow:0 0 16px rgba(0,212,255,.6),0 0 32px rgba(0,212,255,.25);border-color:rgba(0,212,255,.85)}
}
.acwrap{position:relative}
.aclist{position:absolute;top:100%;left:0;right:0;z-index:1000;
  background:rgba(2,8,20,.99);border:1px solid var(--border);border-top:none;
  border-radius:0 0 5px 5px;max-height:180px;overflow-y:auto;display:none}
.aclist.open{display:block}
.acli{padding:6px 10px;cursor:pointer;font-size:13px;color:var(--tx);
  border-bottom:1px solid rgba(0,212,255,.06);transition:background .12s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acli:hover,.acli.focus{background:rgba(0,212,255,.12);color:#fff}
.acli span{font-family:var(--m);font-size:11px;color:var(--dim);display:block;margin-top:1px}
.hc{position:fixed;width:16px;height:16px;z-index:50;pointer-events:none}
.hc.tl{top:60px;left:0;border-top:1px solid rgba(0,212,255,.5);border-left:1px solid rgba(0,212,255,.5)}
.hc.tr{top:60px;right:0;border-top:1px solid rgba(0,212,255,.5);border-right:1px solid rgba(0,212,255,.5)}
audio{display:none}
@media(max-width:600px){
  :root{--pw:85vw;--nw:96vw}
  .tb{display:none}
  .tmbtn{padding:0 10px;font-size:11px;letter-spacing:1px}
  #tclk{font-size:11px}
  #tlive{display:none}
  #opanel{bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  #ndist{font-size:26px}
  #ninstr{font-size:17px}
  #narrow{font-size:40px;min-width:48px}
  .nstv{font-size:24px}
  #spdbub{width:52px;height:52px}
  #spdval{font-size:17px}
  #brand{display:none}
  /* ALL mobile: icon-only buttons — clean, no truncated text */
  #bgsp,#bshare,#binc,#baqi{font-size:0;padding:6px 10px;letter-spacing:0;height:36px;
    min-width:36px;justify-content:center;border-radius:8px}
  #bgsp svg,#bshare svg,#binc svg,#baqi svg{width:16px;height:16px;margin-right:0}
  #rvol{display:none}
  #botbar{height:calc(62px + env(safe-area-inset-bottom,0px));gap:5px;padding:0 6px env(safe-area-inset-bottom,0px)}
  #sbar{bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  /* M14: Toast below header on notch phones */
  #toast{top:62px}
  .naxi-word-main{font-size:17px;letter-spacing:3px}
  .naxi-word-sub{font-size:8px;letter-spacing:3px}
  
  /* B03 fix: nav button glow clipped by backdrop-filter on npanel */
  #npanel{overflow:visible;padding-bottom:env(safe-area-inset-bottom,0px)}
  #nresult{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  #bcalc{margin:0 18px 8px;width:calc(100% - 36px);box-shadow:0 0 10px rgba(0,212,255,.15),inset 0 1px 0 rgba(255,255,255,.05)}
  
  /* GSP panel — full width on mobile */
  #gsp-panel{width:92vw;bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .gsp-tab{padding:12px 8px;font-size:12px}
  .gsp-route{padding:12px;gap:10px}
  .gsp-badge{min-width:44px;height:34px;font-size:15px;border-radius:8px}
  .gsp-rname{font-size:14px}
  .gsp-rstops{font-size:11px}
  .gsp-close{font-size:24px;width:36px;height:36px;display:flex;align-items:center;justify-content:center}
  
  /* GSP info — centered above bottom bar instead of left:350px */
  .gsp-info{left:8px;right:8px;bottom:calc(72px + env(safe-area-inset-bottom,0px));max-width:none}
  
  /* Camera popup — responsive width, compact on mobile */
  .maplibregl-popup-content{min-width:200px!important;max-width:calc(100vw - 24px)!important}
  .campop-vid video,.campop-vid video-js,.campop-vid img{max-height:150px}
  .campop-vid video-js .vjs-tech{max-height:150px}
  .campop-info{padding:5px 8px 6px}
  .cpn{font-size:13px;margin-bottom:2px}
  .cps{font-size:10px;letter-spacing:1.5px}
  .cpdir-wrap{gap:3px;padding:4px 0}
  .cpdir-row{font-size:10px;gap:4px}
  .cpdir-badge{font-size:9px;padding:1px 4px}
  .cpcov-chip{font-size:9px;padding:1px 5px}
  .cp-ts{font-size:9px}
  
  /* Transit panel — taller on mobile for better browsing */
  #transit-panel{max-height:55vh;margin:4px 6px}
  
  /* Incident modal — bigger touch targets */
  .itbtn{padding:10px 5px;font-size:13px}
  .itic{font-size:22px}
  .mta{height:60px;font-size:16px}
  .mbcan,.mbsnd{height:40px;font-size:14px}
  
  /* Autocomplete dropdown — wider on mobile */
  .aclist{max-height:50vh}
  .acli{padding:12px 10px;font-size:15px}
  
  /* Swap button — bigger touch target */
  .swap-btn{width:36px;height:36px;font-size:16px}
  /* Hide desktop-only pick-on-map button (mobile users tap map directly) */
  .dicobtn-desktop{display:none!important}
  
  /* Icon buttons — minimum 44px touch area */
  .dicobtn{width:40px;height:40px;font-size:20px}
  .tbtn{width:32px;height:32px}
  
  /* Toast — wider on mobile */
  #toast{max-width:94vw;font-size:14px;padding:8px 14px}
  
  /* M3: Stop button — minimum 44px touch target */
  #bstopnav{height:44px;font-size:14px;border-radius:7px}
  
  /* M4: Sim speed buttons — bigger touch targets */
  .ssbtn{height:34px;padding:0 14px;font-size:12px;border-radius:5px}
  
  /* Nav HUD mobile polish */
  #nav3d.show{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  #nturn{padding:10px 14px 6px;gap:12px}
  #nstats{margin:0 14px;padding:4px 0 6px}
  /* Hide botbar during active navigation — maximize map */
  #botbar.navmode{display:none!important}
  #sbar.navmode{display:none!important}
  
  /* Share modal inner */
  .share-inner{padding:20px!important;max-height:calc(100vh - 40px)!important;overflow-y:auto!important}
  
  /* Route card action buttons — minimum 36px touch target */
  .bnnav{height:36px;font-size:13px;border-radius:6px}
  .bngm{height:36px;width:36px;font-size:18px;border-radius:6px}
  
  /* Route preview bar — bigger touch targets */
  .rpb-back,.rpb-go{padding:10px 14px;font-size:11px}
}
@media(max-width:380px){
  .tmbtn{padding:0 7px;font-size:12px}
  #tclk{display:none}
  .tbtn{width:24px;height:24px}
}

/* ── LANDSCAPE NAVIGATION — phone in car holder ──────────── */
@media(orientation:landscape) and (max-height:500px){
  /* Panels — narrow in landscape to maximize map */
  :root{--pw:220px;--nw:300px}
  #opanel{top:42px;bottom:38px;width:var(--pw)}
  #npanel{top:42px;width:var(--nw)}
  
  /* Panel toggle — show mobile toggle in landscape, hide desktop optog */
  #panel-tog{display:flex!important;top:50px}
  #optog{display:none!important}
  
  /* Compact header in all modes */
  #top{height:42px;padding:0 10px;gap:6px}
  .naxi-word-main{font-size:16px;letter-spacing:3px}
  .naxi-word-sub{display:none}
  .tb{display:none}
  .tmbtn{height:28px;padding:0 12px;font-size:11px}
  #tclk{font-size:10px}
  #tlive{font-size:10px}
  .tbtn{width:24px;height:24px;font-size:14px}
  
  /* Nav panel — compact inputs */
  .dbox{padding:8px 10px 4px}
  .dlbl{font-size:10px;margin-bottom:3px}
  .dinp{height:34px;font-size:14px;padding:0 8px}
  .dicobtn{width:32px;height:32px;font-size:16px}
  .swap-btn{width:28px;height:28px;font-size:13px}
  .mbar{padding:4px 8px;gap:3px}
  .mbtn{min-height:32px;font-size:11px}
  #bcalc{height:36px;margin:0 10px 6px;width:calc(100% - 20px);font-size:12px;letter-spacing:2px}
  #nresult{padding:0 6px 6px}
  .nrcbody{padding:6px 8px}
  .nrcmain{font-size:15px}
  .nrcdist{font-size:11px}
  .nrcmin{font-size:20px}
  .nrcml{font-size:10px}
  .bnnav{height:30px;font-size:11px}
  .bngm{height:30px;width:30px}
  
  /* Corridor/camera list — compact */
  .crow{padding:6px 8px;gap:6px;font-size:13px}
  .camrow{padding:5px 8px;gap:6px;font-size:13px}
  .camsep{font-size:10px;padding:6px 8px}
  
  /* Show PRIJAVI and PODELI in landscape (hidden by default, only max-width:600 shows them) */
  #binc,#bshare{display:flex!important}
  /* Compact bottom bar in landscape */
  #botbar{height:auto;padding:4px 8px;gap:4px;flex-wrap:nowrap}
  #radio{display:none} /* hide radio to save space in landscape */
  #bgsp,#bshare,#binc,#baqi{font-size:0;padding:4px 8px;height:30px;letter-spacing:0;min-width:32px;justify-content:center}
  #bgsp svg,#bshare svg,#binc svg,#baqi svg{width:14px;height:14px;margin-right:0}
  #bfs{padding:3px 6px}
  #brand{display:none}
  .sp{display:none}
  /* Hide header in nav mode — maximize map */
  #top.navmode{height:0;padding:0;overflow:hidden;opacity:0;border:none}
  #simprog.show{top:0}
  #reroute.show{top:0}
  #spdbub.show{top:6px}
  #speed-limit.show{top:6px;left:72px;width:36px;height:36px;font-size:14px;border-width:3px}
  #brectr.show{top:6px}
  
  /* Nav HUD — compact horizontal strip */
  #nav3d.show{
    background:linear-gradient(transparent,rgba(3,8,18,.85) 8%,rgba(3,8,18,.98));
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  #simband{padding:3px 10px;font-size:10px}
  #simband #simband-msg{display:none}
  .ssbtn{height:20px;padding:0 8px;font-size:10px}
  #hudwarn{padding:2px 10px}
  
  /* Turn section — horizontal layout */
  #nturn{
    display:flex;align-items:center;gap:10px;
    padding:6px 12px 4px;
  }
  #narrow-wrap{width:48px;height:48px}
  #narrow{width:44px;height:44px}
  #ndist{font-size:22px}
  #ndist small{font-size:10px}
  #ninstr{font-size:14px;-webkit-line-clamp:1}
  #nnext{display:none}
  #turn-bar-wrap{margin:2px 0 3px}
  
  /* Stats — compact row */
  #nstats{margin:0 12px;padding:3px 0 4px}
  .nstv{font-size:20px}
  .nstl{font-size:9px;letter-spacing:1px}
  
  /* Stop button — small, side position */
  #bstopnav{
    position:fixed;bottom:6px;right:8px;z-index:502;
    width:auto;height:28px;margin:0;padding:0 12px;
    font-size:11px;letter-spacing:1px;border-radius:14px;
  }
  
  /* Speed bubble — bigger in landscape for glanceable reading */
  #spdbub.show{
    width:58px;height:58px;left:6px;
  }
  #spdval{font-size:22px}
  #spdunit{font-size:9px}
  
  /* Recenter — bigger touch target */
  #brectr.show{width:42px;height:42px;right:6px;font-size:20px}
  /* Fullscreen toggle — at brectr position, slides when brectr shows */
  #nav-fs{top:6px;right:6px;width:42px;height:42px;font-size:18px}
  #brectr.show ~ #nav-fs{right:54px}
  /* FS exit button — top-right corner in landscape */
  body.fs-active #bfs-exit{top:6px;right:6px;left:auto!important;width:42px;height:42px}
  /* Recenter stacks below X in landscape FS */
  body.fs-active #brectr{top:54px!important;right:6px!important}
  /* Route camera — right side in landscape, clear of HUD */
  body.fs-active #routecam{right:6px!important;width:200px!important;top:auto!important}
  body.fs-active #routecam #routecam-vid{height:100px!important}
  body.fs-active #routecam.expanded{width:340px!important}
  body.fs-active #routecam.expanded #routecam-vid{height:200px!important}
  
  /* Toast — lower position, not behind header */
  #toast{top:8px}
  
  /* GSP panel in landscape — side panel, narrower */
  #gsp-panel{width:280px;top:42px;bottom:0}
  .gsp-tab{padding:10px 6px;font-size:11px}
  
  /* Camera popup — compact */
  .maplibregl-popup-content{min-width:240px!important}
  
  /* Status bar — align with compact botbar */
  #sbar{bottom:38px}
  
  /* Route preview bar — above compact botbar */
  #route-preview-bar{bottom:44px}
  
  /* Map controls — above compact botbar */
  .maplibregl-ctrl-bottom-right{bottom:44px!important}
  
  /* Route camera — right side in landscape */
  #routecam{right:6px;width:180px}
  #routecam-vid{height:105px}
  #routecam.expanded{width:320px}
  #routecam.expanded #routecam-vid{height:190px}
  
  /* Transit panel — shorter in landscape */
  #transit-panel{max-height:35vh}
}

/* ── PORTRAIT MOBILE NAVIGATION — taller, narrower ──────── */
@media(orientation:portrait) and (max-width:600px){
  #top.navmode{height:32px;padding:0 8px}
  #top.navmode .tl{display:none}
  #top.navmode #tmode{display:none}
  #top.navmode #tclk{display:none}
  #top.navmode .tbtn{display:none}
  #top.navmode #tlive{font-size:10px}
  #simprog.show{top:32px}
  #reroute.show{top:32px}
  #spdbub.show{top:36px;width:56px;height:56px}
  #spdval{font-size:20px}
  #speed-limit.show{top:36px;left:70px;width:38px;height:38px;font-size:15px;border-width:3px}
  #brectr.show{top:36px}
  #nav-fs{top:36px;right:10px}
  #brectr.show ~ #nav-fs{right:56px}
  /* Nav HUD — slightly bigger touch targets in portrait */
  #bstopnav{height:48px;font-size:14px;border-radius:8px;margin:0 14px 12px;width:calc(100% - 28px)}
  /* Route camera — positioned by JS dock system (_syncRCPos) */
  #routecam{right:8px;width:160px;z-index:450}
  #routecam-vid{height:100px}
  #routecam.expanded{width:280px}
  #routecam.expanded #routecam-vid{height:200px}
}
/* ── ARRIVAL PANEL ─────────────────────────── */
#arrival-panel{position:absolute;bottom:0;left:0;right:0;padding:16px 14px calc(16px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(transparent,rgba(3,8,16,.95) 20%);text-align:center;
  animation:arriveIn .5s ease-out}
@keyframes arriveIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
#arrival-panel .arr-title{font-family:var(--m);font-size:14px;letter-spacing:3px;color:#39ff14;margin-bottom:12px}
#arrival-panel .arr-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#arrival-panel .arr-btn{padding:10px 18px;border-radius:8px;font-family:var(--m);font-size:12px;
  letter-spacing:2px;cursor:pointer;transition:all .2s;min-height:44px;display:flex;align-items:center;justify-content:center}
#arrival-panel .arr-btn:active{transform:scale(.95)}
#arrival-panel .arr-repeat{border:1px solid rgba(0,212,255,.4);background:rgba(0,212,255,.12);color:#00d4ff}
#arrival-panel .arr-new{border:1px solid rgba(255,215,0,.4);background:rgba(255,215,0,.1);color:#ffd700}
#arrival-panel .arr-close{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:var(--dim)}
@media(max-width:600px){
  #arrival-panel .arr-btns{gap:8px}
  #arrival-panel .arr-btn{flex:1;min-width:0;padding:12px 8px;font-size:11px;letter-spacing:1px}
}
@media(orientation:landscape) and (max-height:500px){
  #arrival-panel{padding:8px 10px env(safe-area-inset-bottom,0px)}
  #arrival-panel .arr-title{font-size:12px;letter-spacing:2px;margin-bottom:6px}
  #arrival-panel .arr-btn{padding:6px 12px;min-height:36px;font-size:11px}
}
/* ── TRANSIT PANEL ───────────────────────── */
#transit-panel{display:none;background:#071525;border-radius:8px;
  border:1px solid rgba(0,180,216,.2);margin:6px 8px;overflow-y:auto;max-height:45vh;flex-shrink:0}
#transit-panel.show{display:block}
.tp-hdr{padding:8px 12px;background:rgba(0,180,216,.08);
  border-bottom:1px solid rgba(0,180,216,.15);font-family:var(--m);
  font-size:12px;letter-spacing:2px;color:var(--c);display:flex;align-items:center;gap:8px}
.tp-loading{padding:12px;text-align:center;font-family:var(--m);font-size:12px;color:var(--dim)}
.tp-section{padding:8px 12px;border-bottom:1px solid rgba(0,212,255,.05)}
.tp-section:last-child{border-bottom:none}
.tp-slbl{font-family:var(--m);font-size:11px;letter-spacing:2px;color:var(--dim);margin-bottom:6px}
.tp-route{display:flex;align-items:center;gap:6px;padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.04)}
.tp-route:last-child{border-bottom:none}
.tp-badge{padding:3px 7px;border-radius:4px;font-weight:700;font-size:14px;
  font-family:var(--f);min-width:30px;text-align:center;flex-shrink:0}
.tp-stop-name{font-size:14px;font-weight:600;flex:1;color:var(--tx)}
.tp-walk{font-family:var(--m);font-size:12px;color:var(--dim);white-space:nowrap}
.tp-direct-row{display:flex;align-items:flex-start;gap:8px;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.04)}
.tp-direct-row:last-child{border-bottom:none}
.tp-stops{font-size:13px;color:var(--dim);line-height:1.5}
.tp-stops b{color:var(--tx);font-weight:600}
.tp-none{padding:10px 12px;font-size:14px;color:var(--dim);text-align:center}

/* S7: Offline banner */

/* ─── GSP Transit Browser ─── */
#gsp-overlay{position:fixed;inset:0;z-index:800;display:none;pointer-events:none}
#gsp-overlay.open{display:block;pointer-events:none}
#gsp-panel{position:fixed;top:56px;left:0;bottom:88px;width:340px;z-index:801;
  background:rgba(7,21,37,.97);border-right:1px solid rgba(38,198,218,.15);
  transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:auto}
#gsp-overlay.open #gsp-panel{transform:translateX(0)}
.gsp-hdr{padding:14px 16px;border-bottom:1px solid rgba(38,198,218,.15);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.gsp-title{font-family:var(--m);font-size:14px;font-weight:700;letter-spacing:2px;color:#26c6da}
.gsp-close{background:none;border:none;color:rgba(255,255,255,.5);font-size:18px;cursor:pointer}
.gsp-close:hover{color:#fff}
.gsp-tabs{display:flex;border-bottom:1px solid rgba(38,198,218,.08);flex-shrink:0}
.gsp-tab{flex:1;padding:8px;text-align:center;font-family:var(--m);font-size:11px;
  cursor:pointer;color:var(--dim);border-bottom:2px solid transparent;transition:all .2s}
.gsp-tab.active{color:#26c6da;border-bottom-color:#26c6da}
.gsp-tab:hover{color:#fff}
.gsp-list{flex:1;overflow-y:auto;padding:8px}
.gsp-route{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  cursor:pointer;transition:all .15s;margin-bottom:2px}
.gsp-route:hover{background:rgba(38,198,218,.08)}
.gsp-route:active{background:rgba(38,198,218,.15);transform:scale(.98)}
.gsp-route.active{background:rgba(38,198,218,.15);box-shadow:inset 3px 0 0 #26c6da}
.gsp-badge{min-width:38px;height:28px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-family:var(--m);font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.gsp-rname{font-size:12px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsp-rstops{font-size:10px;color:var(--dim)}
.gsp-info{position:fixed;bottom:98px;left:350px;z-index:802;background:rgba(7,21,37,.95);
  border:1px solid rgba(38,198,218,.2);border-radius:10px;padding:12px 16px;
  font-family:var(--m);display:none;max-width:280px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:auto}
.gsp-info.show{display:block}
.gsp-info-name{font-size:14px;font-weight:700;color:#26c6da;margin-bottom:4px}
.gsp-info-meta{font-size:11px;color:var(--dim);line-height:1.5}
/* Stop marker — wrapper pattern (outer=MapLibre transform, inner=our hover) */
.gsp-stop-wrap{cursor:pointer}
.gsp-stop-mkr{
  width:14px;height:14px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.9);
  box-shadow:0 0 8px rgba(38,198,218,.6),0 0 0 3px rgba(38,198,218,.15);
  animation:gspStopPop .4s cubic-bezier(.175,.885,.32,1.275);
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;
}
.gsp-stop-wrap:hover .gsp-stop-mkr{transform:scale(1.5);box-shadow:0 0 14px rgba(38,198,218,.9),0 0 0 5px rgba(38,198,218,.2);}
.gsp-stop-mkr.terminal{width:18px;height:18px;border-width:3px;box-shadow:0 0 12px rgba(255,215,0,.7),0 0 0 4px rgba(255,215,0,.2);}
.gsp-stop-wrap:hover .gsp-stop-mkr.terminal{transform:scale(1.4);box-shadow:0 0 18px rgba(255,215,0,.9),0 0 0 6px rgba(255,215,0,.25);}
@keyframes gspStopPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.gsp-stop-pop .maplibregl-popup-content{background:rgba(7,21,37,.95);color:#e0eaf5;
  padding:0;border:1px solid rgba(38,198,218,.2);border-radius:8px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gsp-stop-pop .maplibregl-popup-tip{border-top-color:rgba(7,21,37,.95)}

/* ═══════════════════════════════════════════════════════════
   NAXI NAVIGATOR — PREMIUM POLISH v1.0
   Cinematic micro-interactions. Extreme attention to detail.
═══════════════════════════════════════════════════════════ */

/* ── App intro veil ─────────────────────────────────────── */
#app-veil{
  position:fixed;inset:0;z-index:9995;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  transition:opacity .65s cubic-bezier(.4,0,.2,1) .1s,visibility .65s .1s;
}
#app-veil.gone{opacity:0;visibility:hidden;pointer-events:none;}
.veil-wordmark{
  font-family:var(--f);font-size:clamp(18px,4.5vw,28px);font-weight:900;letter-spacing:8px;color:#fff;
  text-shadow:0 0 24px rgba(0,212,255,.7),0 0 48px rgba(0,212,255,.2);
  animation:veilPulse 1.8s ease-in-out infinite;
}
.veil-sub{font-family:var(--m);font-size:10px;letter-spacing:5px;color:rgba(0,212,255,.4);animation:veilPulse 1.8s ease-in-out .4s infinite;}
.veil-bar{width:140px;height:1px;background:rgba(0,212,255,.1);border-radius:1px;overflow:hidden;margin-top:6px;}
.veil-fill{height:100%;width:0%;background:var(--c);box-shadow:0 0 8px var(--c),0 0 16px rgba(0,212,255,.25);}
@keyframes veilPulse{0%,100%{opacity:1}50%{opacity:.4}}
.veil-footer{
  display:flex;align-items:center;gap:10px;
  position:absolute;bottom:48px;left:50%;transform:translateX(-50%);
}
.vf-line{width:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,215,0,.2),transparent);
  animation:vfLine 2.8s ease-in-out infinite}
@keyframes vfLine{0%,100%{opacity:.4;width:20px}50%{opacity:1;width:30px}}
.vf-bolt{filter:drop-shadow(0 0 3px rgba(255,215,0,.8));animation:vfBolt 2.8s ease-in-out infinite}
@keyframes vfBolt{0%,100%{filter:drop-shadow(0 0 2px rgba(255,215,0,.4));opacity:.7}50%{filter:drop-shadow(0 0 6px rgba(255,215,0,1)) drop-shadow(0 0 14px rgba(255,215,0,.4));opacity:1}}
.vf-label{font-family:var(--m);font-size:8px;letter-spacing:3px;color:rgba(255,255,255,.25);
  animation:vfLbl 2.8s ease-in-out infinite}
@keyframes vfLbl{0%,100%{color:rgba(255,255,255,.18);letter-spacing:3px}50%{color:rgba(255,215,0,.45);letter-spacing:3.5px}}
.vf-brand{font-family:var(--m);font-size:9px;font-weight:800;letter-spacing:3.5px;
  color:rgba(255,255,255,.35);text-shadow:0 0 10px rgba(255,215,0,.1);
  animation:vfBrd 2.8s ease-in-out infinite}
@keyframes vfBrd{0%,100%{color:rgba(255,255,255,.28);text-shadow:none}50%{color:rgba(255,215,0,.6);text-shadow:0 0 12px rgba(255,215,0,.25)}}

/* ── Universal press feedback ───────────────────────────── */
.tbtn,.mbtn,.bnnav,.mbcan,.mbsnd,.dicobtn,.ssbtn,.swap-btn,.itbtn,
#bcalc,#bgsp,#bshare,#binc,#baqi,#bstopnav,#btr,#optog,.crow,.camrow,.gsp-route,.gsp-tab,.gsp-close{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .08s ease,opacity .08s ease;
}
.tbtn:active,.mbtn:active,.bnnav:active,.mbcan:active,.mbsnd:active,.dicobtn:active,
.ssbtn:active,.swap-btn:active,.itbtn:active,#btr:active,.gsp-close:active,
#bcalc:active:not(:disabled),#bgsp:active,#bshare:active,#binc:active:not(.disabled),#baqi:active,
#bstopnav:active,.crow:active,.camrow:active,.gsp-route:active,.gsp-tab:active{
  transform:scale(0.93)!important;opacity:.82;
}

/* ── NAXI wordmark glow breathe ─────────────────────────── */
.naxi-word-main{animation:nmBreath 5s ease-in-out infinite;}
@keyframes nmBreath{0%,100%{text-shadow:0 0 12px rgba(0,212,255,.3)}50%{text-shadow:0 0 22px rgba(0,212,255,.65),0 0 38px rgba(0,212,255,.15)}}

/* ── Top bar glass shimmer ──────────────────────────────── */
#top{overflow:hidden;}
#top::after{
  content:'';position:absolute;top:0;left:-120%;width:50%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.05),transparent);
  animation:topShimmer 8s ease-in-out 2s infinite;
}
@keyframes topShimmer{0%{left:-120%}100%{left:220%}}

/* ── Mode toggle premium ────────────────────────────────── */
.tmbtn{position:relative;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1)!important;}
.tmbtn.on::after{
  content:'';position:absolute;bottom:0;left:20%;right:20%;height:1.5px;
  background:var(--c);box-shadow:0 0 6px var(--c),0 0 12px rgba(0,212,255,.35);
}
.tmbtn::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(0,212,255,.07),transparent 70%);
  opacity:0;transition:opacity .18s;
}
.tmbtn:hover::before,.tmbtn.on::before{opacity:1;}

/* ── LIVE dot ───────────────────────────────────────────── */
.ldot{animation:livePulse 2s cubic-bezier(.4,0,.6,1) infinite!important;}
@keyframes livePulse{
  0%{opacity:1;box-shadow:0 0 0 0 rgba(57,255,20,.7)}
  60%{opacity:.5;box-shadow:0 0 0 8px rgba(57,255,20,0)}
  100%{opacity:1;box-shadow:0 0 0 0 rgba(57,255,20,0)}
}

/* ── Corridor rows ──────────────────────────────────────── */
.crow{position:relative;overflow:hidden;transition:background .15s,border-left-color .15s!important;}
.crow::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,212,255,.06),transparent 60%);
  opacity:0;transition:opacity .15s;
}
.crow:hover::before{opacity:1;}
.crow:hover .crname{color:#fff;}
.crow:hover .crstatus{filter:brightness(1.35);}

/* ── Camera rows ────────────────────────────────────────── */
.camrow{position:relative;transition:background .12s!important;}
.camrow::after{
  content:'';position:absolute;left:0;top:20%;bottom:20%;width:0;
  background:rgba(0,212,255,.6);border-radius:0 1px 1px 0;
  transition:width .12s ease;pointer-events:none;
}
.camrow:hover::after{width:2px;}
.camrow:hover .cn2{color:#fff;}

/* ── Camera status dot animations ──────────────────────── */
.cdot{transition:box-shadow .4s ease;}

/* ── Camera popup badge ─────────────────────────────────── */
.cps{padding:2px 8px;border-radius:3px;display:inline-block;}
.cpf{background:rgba(57,255,20,.07);}
.cpm{background:rgba(255,215,0,.08);}
.cph{background:rgba(255,107,53,.1);}
.cpb{background:rgba(255,32,32,.1);animation:cpbFlicker 1.6s ease-in-out infinite;}
@keyframes cpbFlicker{0%,100%{opacity:1}50%{opacity:.5}}

/* ── Popup cinematic entry ──────────────────────────────── */
.maplibregl-popup-content{animation:popReveal .25s cubic-bezier(.16,1,.3,1)!important;}
@keyframes popReveal{from{opacity:0;transform:scale(.9) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ── Input premium focus ────────────────────────────────── */
.dinp{transition:border-color .18s,box-shadow .18s,background .18s;}
.dinp:focus{
  border-color:rgba(0,212,255,.7)!important;
  box-shadow:0 0 0 1px rgba(0,212,255,.15),0 0 16px rgba(0,212,255,.08),inset 0 1px 0 rgba(255,255,255,.03)!important;
  background:rgba(0,212,255,.05)!important;
}

/* ── Calc button sheen ──────────────────────────────────── */
#bcalc{position:relative;overflow:hidden;}
#bcalc::before{
  content:'';position:absolute;top:0;left:-80%;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:calcSheen 4s ease-in-out 1.5s infinite;
}
@keyframes calcSheen{0%{left:-80%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:160%;opacity:0}}

/* ── Route cards stagger ────────────────────────────────── */
.nrc{animation:cardRise .35s cubic-bezier(.16,1,.3,1) both;}
.nrc:nth-child(2){animation-delay:.06s}
.nrc:nth-child(3){animation-delay:.12s}
.nrc:nth-child(4){animation-delay:.18s}
@keyframes cardRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.nrc{transition:transform .18s ease,box-shadow .18s ease!important;}
.nrc:not(.sel):hover{
  transform:translateY(-2px)!important;
  box-shadow:0 10px 32px rgba(0,0,0,.6),0 0 0 1px rgba(0,212,255,.09)!important;
}
.nrc.sel{
  box-shadow:0 0 0 1px rgba(0,212,255,.25),0 8px 24px rgba(0,0,0,.5)!important;
}

/* ── Nav mode toggle button glow ────────────────────────── */
.bnnav{position:relative;overflow:hidden;}
.bnnav::after{
  content:'';position:absolute;top:0;left:-60%;width:35%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.12),transparent);
  animation:navBtnSheen 3.5s ease-in-out infinite;
}
@keyframes navBtnSheen{0%{left:-60%}100%{left:140%}}

/* ── HUD instruction crossfade ──────────────────────────── */
#ninstr{transition:opacity .12s ease,transform .12s ease;}
#ninstr.cx{opacity:0;transform:translateX(-6px);}

/* ── HUD distance color coding ──────────────────────────── */
#ndist{transition:color .3s ease;font-feature-settings:'tnum' 1;}
#ndist.d-warn{color:#ffd700!important;}
#ndist.d-crit{color:var(--d)!important;animation:distFlash .65s ease-in-out infinite;}
@keyframes distFlash{0%,100%{opacity:1}50%{opacity:.55}}

/* ── HUD turn arrow pop ──────────────────────────────────── */
#narrow-wrap{filter:drop-shadow(0 0 8px rgba(0,212,255,.45));}
#narrow-wrap.pop{animation:arrowPop .32s cubic-bezier(.34,1.56,.64,1)!important;}
@keyframes arrowPop{0%{transform:scale(1)}45%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ── Progress bar animated gradient ────────────────────── */
#simprogfill{
  background:linear-gradient(90deg,#00d4ff,#39e8ff,#39ff14,#00d4ff);
  background-size:300% 100%;
  animation:progFlow 2s linear infinite;
  box-shadow:0 0 10px rgba(0,212,255,.45);
}
@keyframes progFlow{0%{background-position:100% 50%}100%{background-position:-200% 50%}}

/* ── Speed bubble color states ──────────────────────────── */
#spdbub{transition:border-color .5s ease,box-shadow .5s ease;}
#spdbub.spd-ok  {border-color:var(--g)!important;box-shadow:0 0 20px rgba(57,255,20,.3)!important;}
#spdbub.spd-mid {border-color:#ffd700!important;box-shadow:0 0 20px rgba(255,215,0,.25)!important;}
#spdbub.spd-warn{border-color:var(--w)!important;box-shadow:0 0 22px rgba(255,107,53,.3)!important;animation:spd-breathe 1.8s ease-in-out infinite!important;}
#spdval{font-feature-settings:'tnum' 1;transition:color .4s ease;}
#spdbub.spd-ok #spdval  {color:var(--g)!important;}
#spdbub.spd-mid #spdval {color:#ffd700!important;}
#spdbub.spd-warn #spdval{color:var(--w)!important;}

/* ── Reroute banner entrance ────────────────────────────── */
#reroute.show{animation:rerouteIn .3s cubic-bezier(.34,1.56,.64,1);}
@keyframes rerouteIn{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}

/* ── Toast premium ──────────────────────────────────────── */
#toast{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)!important;}
#toast.show{animation:toastIn .32s cubic-bezier(.34,1.45,.64,1)!important;}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-16px) scale(.9)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

/* ── Incident modal ─────────────────────────────────────── */
.itbtn{transition:all .16s cubic-bezier(.4,0,.2,1)!important;}
.itbtn.sel{box-shadow:0 0 12px rgba(255,107,53,.25),inset 0 0 0 1px rgba(255,107,53,.4)!important;}

/* ── Status bar items ───────────────────────────────────── */
#sbar{transition:opacity .3s;}
.si b{transition:color .4s ease;}

/* ── GPS dot pulse (status bar) ─────────────────────────── */
#gpsi.on b{animation:gpsDot 2.5s ease-in-out infinite;}
@keyframes gpsDot{0%,100%{text-shadow:0 0 0 rgba(57,255,20,0)}50%{text-shadow:0 0 8px rgba(57,255,20,.9)}}

/* ── Recenter button entrance ───────────────────────────── */
#brectr.show{animation:rctIn .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes rctIn{from{transform:scale(0) rotate(90deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}

/* ── Swap button rotation ───────────────────────────────── */
.swap-btn{transition:transform .28s cubic-bezier(.34,1.56,.64,1),background .18s,border-color .18s!important;}
.swap-btn:hover{transform:rotate(180deg)!important;}

/* ── Bottom nav bar buttons ─────────────────────────────── */
#bgsp,#bshare,#binc,#baqi{transition:all .18s cubic-bezier(.4,0,.2,1)!important;position:relative;overflow:hidden;}
#bgsp:hover,#bshare:hover,#baqi:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.4);}
#bgsp::before,#bshare::before,#baqi::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.08),transparent 65%);
  opacity:0;transition:opacity .18s;
}
#bgsp:hover::before,#bshare:hover::before,#baqi:hover::before{opacity:1;}

/* ── Radio player ───────────────────────────────────────── */
.rlogo-inner{transition:box-shadow .3s ease;}
#eq.play .eb{animation:ea .5s ease-in-out infinite alternate!important;}
#btr{transition:all .18s ease!important;}
#btr:hover{transform:scale(1.1);}

/* ── Camera popup direction rows ─────────────────────── */
.cpdir-wrap{
  margin:6px 0 4px;display:flex;flex-direction:column;gap:4px;
  border-top:1px solid rgba(0,212,255,.1);padding-top:6px;
}
.cpdir-row{display:flex;align-items:center;gap:6px;font-family:var(--m);font-size:11px;}
.cpdir-arrow{font-size:13px;line-height:1;flex-shrink:0;width:14px;text-align:center;}
.cpdir-label{flex:1;color:rgba(255,255,255,.65);letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cpdir-badge{font-size:10px;letter-spacing:1.5px;padding:1px 6px;border-radius:3px;border:1px solid;flex-shrink:0;}
.cp-ts{font-family:var(--m);font-size:10px;color:rgba(255,255,255,.25);margin-top:6px;letter-spacing:.5px;}

/* ── GSP drag handle ────────────────────────────────────── */
.gsp-drag-handle{
  display:none;
  align-items:center;justify-content:center;
  height:22px;flex-shrink:0;cursor:grab;
  background:transparent;
}
.gsp-drag-handle:active{cursor:grabbing;}
.gsp-drag-pip{
  width:38px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.18);
  transition:background .18s,transform .18s;
}
.gsp-drag-handle:hover .gsp-drag-pip{background:rgba(255,255,255,.35);transform:scaleX(1.1);}

/* ── GSP route rows ─────────────────────────────────────── */
.gsp-route{transition:all .14s ease!important;}
.gsp-route:hover{transform:translateX(3px);}
.gsp-route.active{transform:translateX(3px);}
.gsp-badge{transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;}
.gsp-route:hover .gsp-badge,.gsp-route.active .gsp-badge{
  transform:scale(1.08);
  box-shadow:0 0 12px rgba(255,255,255,.15);
}

/* ── GSP stop pop animation ─────────────────────────────── */
.gsp-stop-wrap{animation:stopReveal .38s cubic-bezier(.16,1,.3,1) both!important;}
@keyframes stopReveal{from{opacity:0}to{opacity:1}}

/* ── Info box entrance ──────────────────────────────────── */
.gsp-info.show{animation:gspInfoIn .3s cubic-bezier(.16,1,.3,1)!important;}
@keyframes gspInfoIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Share modal ────────────────────────────────────────── */
.share-inner{animation:shareIn .3s cubic-bezier(.16,1,.3,1)!important;}
@keyframes shareIn{from{opacity:0;transform:scale(.93) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ── Nav panel slide in ─────────────────────────────────── */
#npanel.show{animation:nPanIn .3s cubic-bezier(.16,1,.3,1);}
@keyframes nPanIn{from{transform:translateX(-20px);opacity:.7}to{transform:none;opacity:1}}

/* ── HUD scan line on nav3d ─────────────────────────────── */
#nav3d::before{
  content:'';position:absolute;left:0;right:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.18) 30%,rgba(0,212,255,.35) 50%,rgba(0,212,255,.18) 70%,transparent);
  animation:hudScan 5s linear infinite;
}
@keyframes hudScan{0%{top:-1px;opacity:0}4%{opacity:1}96%{opacity:.3}100%{top:calc(100% + 1px);opacity:0}}

/* ── Mobile: GSP as bottom sheet ───────────────────────── */
@media(max-width:600px){
  .gsp-drag-handle{display:flex;}
  #gsp-panel{
    top:auto!important;
    left:0!important;right:0!important;
    bottom:0!important;
    width:100%!important;
    height:65vh;
    border-radius:18px 18px 0 0!important;
    border-right:none!important;
    border-top:1px solid rgba(38,198,218,.2)!important;
    transform:translateY(100%)!important;
    transition:transform .38s cubic-bezier(.16,1,.3,1),height .38s cubic-bezier(.16,1,.3,1)!important;
  }
  #gsp-overlay.open #gsp-panel{transform:translateY(0)!important;}

  /* ── State B: route active — mini strip, map fully interactive ── */
  #gsp-overlay.open #gsp-panel.route-active{
    height:auto!important;
    min-height:72px!important;
    max-height:88px!important;
    overflow:hidden!important;
  }
  #gsp-panel.route-active .gsp-tabs,
  #gsp-panel.route-active .gsp-list,
  #gsp-panel.route-active .gsp-hdr,
  #gsp-panel.route-active .gsp-search,
  #gsp-panel.route-active #gsp-filter-bar{display:none!important;}
  #gsp-panel.route-active .gsp-mini-info{display:flex!important;}
  #gsp-panel.route-active .gsp-drag-pip{background:rgba(0,212,255,.5)!important;}

  /* ── Overlay: dim+blur for list, TRANSPARENT for route-active ── */
  #gsp-overlay.open{
    background:rgba(0,0,0,.45);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    pointer-events:auto!important;
  }
  /* Route active: overlay lets clicks through to map */
  #gsp-overlay.open.route-active-overlay{
    background:transparent!important;
    backdrop-filter:none!important;
    pointer-events:none!important;
  }
  /* But the panel itself still captures events */
  #gsp-overlay.open.route-active-overlay #gsp-panel{
    pointer-events:auto!important;
  }

  .gsp-info{
    left:8px!important;right:8px!important;
    bottom:calc(65vh + 8px)!important;
    max-width:none!important;
  }
  .gsp-info.route-active-info{
    bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
  }
  #gsp-overlay{transition:background .38s ease,backdrop-filter .38s ease;}
}

/* ── GSP Mini Info (route-active strip) ──────────────── */
.gsp-mini-info{
  display:none;
  align-items:center;gap:10px;
  padding:10px 14px;
  min-height:48px;
}
.gsp-mini-badge{
  min-width:42px;height:30px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--m);font-size:14px;font-weight:700;color:#fff;flex-shrink:0;
}
.gsp-mini-text{flex:1;min-width:0;}
.gsp-mini-name{font-size:13px;font-weight:600;color:#e0eaf5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsp-mini-meta{font-size:10px;color:var(--dim);margin-top:1px}
.gsp-mini-close{
  background:none;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.6);
  width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .15s;
}
.gsp-mini-close:hover{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}

/* ── GSP Search Input ────────────────────────────────── */
.gsp-search{
  padding:8px 12px 4px;flex-shrink:0;
}
.gsp-search input{
  width:100%;height:40px;border-radius:8px;border:1px solid rgba(38,198,218,.15);
  background:rgba(0,0,0,.3);color:#e0eaf5;font-family:var(--m);font-size:16px;
  padding:0 12px 0 34px;outline:none;transition:border-color .2s;
  -webkit-appearance:none;
}
.gsp-search input::placeholder{color:var(--dim);opacity:1}
.gsp-search input:focus{border-color:rgba(38,198,218,.5)}
.gsp-search-icon{
  position:absolute;left:22px;top:50%;transform:translateY(-50%);
  font-size:13px;pointer-events:none;opacity:.4;
}
.gsp-search{position:relative;}

/* ── Fullscreen mode ──────────────────────────────────── */
/* ── Mobile panel toggle ─────────────────────────────── */
#panel-tog{
  position:fixed;z-index:202;
  top:70px;left:0;
  width:24px;height:48px;border:1px solid var(--border);
  border-left:none;border-radius:0 8px 8px 0;
  background:var(--panel);color:var(--dim);font-size:14px;
  cursor:pointer;display:none;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:left .3s,color .2s,opacity .3s}
#panel-tog:hover{color:var(--c);border-color:rgba(0,212,255,.4);background:rgba(7,21,37,.95)}
#panel-tog.panel-open{left:var(--pw)}
body[data-mode="ov"] #panel-tog.panel-open{left:var(--pw)}
body[data-mode="nav"] #panel-tog.panel-open{left:var(--nw)}
/* Hide panel toggle during active navigation — nav has its own UI */
body[data-mode="nav"] #panel-tog{opacity:0;pointer-events:none}
@media(max-width:600px){#panel-tog{display:flex;width:32px;height:56px;font-size:16px}#optog{display:none!important}
  #opanel{z-index:200}}
@media(min-width:601px){#panel-tog{display:none}}
body.fs-active #top{display:none!important}
body.fs-active #sbar{display:none!important}
body.fs-active #opanel{top:0!important;bottom:0!important}
body.fs-active #npanel{top:0!important;bottom:0!important}
body.fs-active #brectr{top:58px!important;right:10px!important}
body.fs-active #simprog.show{top:0!important}
body.fs-active #spdbub.show{top:10px!important;left:10px!important}
body.fs-active #reroute.show{top:0!important}
body.fs-active #wx-widget{display:none!important}
body.fs-active #wx-fx{display:none!important}
body.fs-active #bfs-exit{display:flex!important}
body.fs-active #toast{top:14px!important}
body.fs-active #nav-fs{display:none!important}
/* Route camera in fullscreen */
/* Desktop FS — stays right side, above HUD (min-height excludes landscape phones) */
@media(min-width:601px) and (min-height:501px){
  body.fs-active #routecam{bottom:350px!important;right:16px!important;width:320px!important;top:auto!important}
  body.fs-active #routecam #routecam-vid{height:190px!important}
  body.fs-active #routecam.expanded{width:520px!important}
  body.fs-active #routecam.expanded #routecam-vid{height:320px!important}
}
/* Mobile portrait FS — JS dock handles bottom position */
@media(max-width:600px) and (orientation:portrait){
  body.fs-active #routecam{right:8px!important;width:170px!important}
  body.fs-active #routecam #routecam-vid{height:105px!important}
  body.fs-active #routecam.expanded{width:280px!important}
  body.fs-active #routecam.expanded #routecam-vid{height:190px!important}
}
/* Mobile landscape FS — JS dock handles bottom position */
@media(max-width:960px) and (orientation:landscape) and (max-height:500px){
  body.fs-active #routecam{right:6px!important;width:200px!important;top:auto!important}
  body.fs-active #routecam #routecam-vid{height:100px!important}
  body.fs-active #routecam.expanded{width:340px!important}
  body.fs-active #routecam.expanded #routecam-vid{height:200px!important}
}
/* Desktop fullscreen: hide botbar. Mobile: keep it compact for GSP/Share/etc access */
@media(min-width:601px){body.fs-active #botbar{display:none!important}}
@media(max-width:600px){
  body.fs-active #botbar{height:auto!important;padding:4px 6px env(safe-area-inset-bottom,0px)!important;
    background:rgba(3,8,16,.85)!important;gap:4px!important}
  body.fs-active #botbar #radio{display:none!important}
  body.fs-active #botbar .sp{display:none!important}
  body.fs-active #botbar #brand{display:none!important}
  body.fs-active #botbar #bfs{display:none!important}
  body.fs-active #panel-tog{display:flex!important;top:10px!important}
  body.fs-active .maplibregl-ctrl-bottom-right{bottom:calc(48px + env(safe-area-inset-bottom,0px))!important}
}
#bfs-exit{display:none;position:fixed;top:10px;right:10px;z-index:9998;
  width:38px;height:38px;border-radius:10px;
  background:rgba(3,8,16,.85);border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.7);font-size:18px;cursor:pointer;
  align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s}
#bfs-exit:hover{background:rgba(3,8,16,.95);color:#fff;border-color:rgba(255,255,255,.5)}

/* P28: #bfs button styles (removed inline) */
#bfs{background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);color:var(--dim);
  border-radius:7px;padding:4px 8px;font-size:16px;cursor:pointer;display:flex;align-items:center}
#bfs svg{stroke:var(--dim);transition:stroke .2s}
#bfs:hover svg{stroke:var(--c)}
/* B04: Fullscreen active state — class-based, no inline style residue */
#bfs.fs-on{color:#00d4ff;border-color:rgba(0,212,255,.4)}
#bfs.fs-on svg{stroke:#00d4ff}

/* P25: Bottom bar SVG icon alignment */
#binc svg,#bgsp svg,#baqi svg,#bshare svg{vertical-align:-2px;margin-right:3px}

/* P4: Corridor row click feedback */
.crow:active{background:rgba(0,212,255,.18)!important;transition:none!important;}

/* P14: Camera popup minimum width */
.cam-popup .maplibregl-popup-content{min-width:280px}

/* P22: Firefox backdrop-filter fallback */
@supports not (backdrop-filter:blur(1px)){
  #top{background:rgba(3,8,16,.97)!important}
  #opanel,#npanel{background:rgba(2,8,20,.99)!important}
  #gsp-panel{background:rgba(7,21,37,.99)!important}
  #bfs-exit{background:rgba(3,8,16,.97)!important}
  #toast{background:rgba(3,8,16,.95)!important}
}

/* P13: Arrival panel entrance */
@keyframes arriveIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Arrival panel buttons — minimum touch targets on mobile */
@media(max-width:600px){
  #arrival-panel button{padding:12px 18px!important;font-size:13px!important;border-radius:8px!important}
}

/* P10: Nav panel empty state */
#nresult:empty::after{
  content:'Unesite polaziste i odrediste, pa kliknite IZRACUNAJ RUTU';
  display:block;padding:24px 16px;text-align:center;
  font-family:var(--m);font-size:11px;color:var(--dim);letter-spacing:1px;line-height:1.8;
}