:root{
  --bg:#071018;--panel:rgba(10,24,35,.82);--panel-strong:rgba(8,19,29,.94);
  --line:rgba(128,207,255,.14);--text:#f6fbff;--muted:#8ba2b2;--cyan:#18d5ff;
  --blue:#198cff;--green:#27e69b;--yellow:#ffc546;--red:#ff4c65;--shadow:0 18px 55px rgba(0,0,0,.38);
  --safe-bottom:max(14px,env(safe-area-inset-bottom));--safe-top:max(12px,env(safe-area-inset-top));
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select{font:inherit}.hidden{display:none!important}.app{width:100%;height:100%;position:relative;isolation:isolate}
#map{position:absolute;inset:0;background:#09131c;z-index:0}.map-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(2,8,13,.52),transparent 27%,transparent 70%,rgba(2,8,13,.8))}
.glass{background:linear-gradient(145deg,rgba(12,28,41,.92),rgba(5,17,27,.78));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#123348 0,#071018 48%,#03070b 100%);z-index:99;transition:.5s}
.boot.out{opacity:0;transform:scale(1.05)}.boot-logo,.brand-mark{display:grid;place-items:center;color:#021017;font-weight:1000;background:linear-gradient(145deg,#55e8ff,#168eff);box-shadow:0 0 35px rgba(24,213,255,.38);clip-path:polygon(20% 0,100% 0,80% 100%,0 100%)}
.boot-logo{width:86px;height:78px;font-size:48px}.boot h1{letter-spacing:.22em;margin:22px 0 3px;font-size:25px}.boot h1 b,.brand em{color:var(--cyan);font-style:normal}.boot p{margin:0;color:var(--muted);font-size:11px;letter-spacing:.28em}
.boot-line{width:180px;height:3px;background:#102533;margin-top:35px;overflow:hidden}.boot-line i{display:block;height:100%;width:45%;background:var(--cyan);animation:load 1.1s infinite}@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(320%)}}
.topbar{position:absolute;z-index:10;left:18px;right:18px;top:var(--safe-top);height:64px;border-radius:18px;display:flex;align-items:center;padding:0 13px;gap:13px}
.icon-btn{border:0;background:transparent;color:var(--text);width:38px;height:38px;border-radius:12px;font-size:26px;cursor:pointer}.icon-btn:hover{background:rgba(255,255,255,.07)}
.hamburger,.hamburger:before,.hamburger:after{display:block;width:19px;height:2px;background:#cfeeff;border-radius:4px;content:"";position:relative}.hamburger:before{position:absolute;top:-6px}.hamburger:after{position:absolute;top:6px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-mark{width:34px;height:32px;font-size:20px}.brand-mark.large{width:50px;height:45px;font-size:27px}.brand strong{display:block;font-size:14px;letter-spacing:.08em;white-space:nowrap}.brand small{display:block;font-size:8px;color:var(--muted);letter-spacing:.18em;margin-top:2px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.weather-chip{border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);border-radius:12px;height:38px;padding:0 10px;display:flex;gap:7px;align-items:center;cursor:pointer}.weather-chip b{font-size:13px}.avatar{border:1px solid rgba(24,213,255,.35);background:linear-gradient(145deg,#15344a,#0a1f30);color:#9eeeff;width:38px;height:38px;border-radius:50%;font-weight:800}
.search-panel{position:absolute;z-index:9;top:calc(var(--safe-top) + 76px);left:50%;transform:translateX(-50%);width:min(610px,calc(100% - 36px));border-radius:18px;padding:10px}
.search-row{height:48px;display:flex;align-items:center;gap:10px}.search-dot{width:11px;height:11px;border:3px solid var(--cyan);border-radius:50%;box-shadow:0 0 9px var(--cyan);margin-left:5px}.search-row input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:15px}.search-row input::placeholder{color:#7790a2}.inline-btn,.go-btn{border:0;border-radius:11px;height:35px;cursor:pointer}.inline-btn{width:35px;background:rgba(255,255,255,.06);color:#9deeff}.go-btn{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#001018;font-weight:900;padding:0 16px}
.quick-destinations{display:flex;gap:7px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}.quick-destinations button{flex:1;border:0;background:rgba(255,255,255,.035);color:#a7bac7;border-radius:9px;padding:7px;font-size:11px;cursor:pointer}.quick-destinations span{color:var(--cyan)}
.search-results{position:absolute;left:0;right:0;top:68px;border-radius:14px;padding:7px;background:var(--panel-strong);border:1px solid var(--line);box-shadow:var(--shadow);max-height:260px;overflow:auto}.search-result{width:100%;text-align:left;border:0;border-bottom:1px solid rgba(255,255,255,.06);background:transparent;color:var(--text);padding:11px;border-radius:9px;cursor:pointer}.search-result:hover{background:rgba(24,213,255,.07)}.search-result b,.search-result small{display:block}.search-result small{color:var(--muted);margin-top:3px}
.left-stack{position:absolute;z-index:5;left:18px;top:calc(var(--safe-top) + 166px);display:grid;gap:10px}.speed-card{width:150px;border-radius:20px;padding:13px;display:flex;align-items:center;justify-content:space-between}.speed-card>div:first-child{text-align:center}.speed-card span{display:block;font-size:8px;color:var(--muted);letter-spacing:.13em}.speed-card strong{display:block;font-size:43px;line-height:42px}.speed-card small{font-size:9px;color:#99b2c3}.speed-limit{width:53px;height:62px;border:4px solid #f3f6f7;border-radius:12px;background:#15191c;color:#fff;text-align:center;padding:3px}.speed-limit span{font-size:7px;color:#fff;line-height:9px}.speed-limit b{font-size:23px}
.road-status{border-radius:14px;padding:10px 12px;display:flex;align-items:center;gap:9px;width:150px}.status-light{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}.road-status b,.road-status small{display:block}.road-status b{font-size:11px}.road-status small{font-size:8px;color:var(--muted);margin-top:2px}
.map-controls{position:absolute;z-index:5;right:18px;top:calc(var(--safe-top) + 166px);display:grid;gap:9px}.map-btn{width:44px;height:44px;border-radius:14px;color:#b7d0df;font-size:20px;cursor:pointer}.map-btn.primary{background:linear-gradient(145deg,#0a9ed1,#0877dc);color:white;border-color:#4adfff}
.route-card{position:absolute;z-index:7;left:50%;transform:translateX(-50%);bottom:170px;width:min(610px,calc(100% - 36px));border-radius:20px;padding:14px}.route-head{display:flex;gap:12px;align-items:center}.turn-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:rgba(24,213,255,.12);color:var(--cyan);font-size:26px}.route-head>div:nth-child(2){flex:1}.route-head span,.route-head strong{display:block}.route-head span{font-size:11px;color:var(--muted)}.route-head strong{font-size:15px;margin-top:2px}.route-head button{border:0;background:transparent;color:#9bb0bf;font-size:24px}.route-stats{display:flex;align-items:center;gap:18px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}.route-stats div b,.route-stats div small{display:block}.route-stats div b{font-size:16px}.route-stats div small{font-size:8px;color:var(--muted);margin-top:2px}.start-btn{margin-left:auto;border:0;border-radius:11px;background:linear-gradient(135deg,var(--cyan),var(--blue));color:#001018;font-weight:900;padding:11px 18px}
.hazard-rail{position:absolute;z-index:5;left:50%;transform:translateX(-50%);bottom:88px;width:min(710px,calc(100% - 36px));display:flex;gap:9px;overflow-x:auto;scrollbar-width:none}.hazard-card{min-width:150px;border-radius:15px;color:var(--text);padding:10px 12px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}.hazard-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;font-weight:900}.hazard-icon.camera{background:rgba(255,197,70,.13);color:var(--yellow)}.hazard-icon.police{background:rgba(25,140,255,.14);color:#55b4ff}.hazard-icon.crash{background:rgba(255,76,101,.14);color:var(--red)}.hazard-icon.weather{background:rgba(24,213,255,.12);color:var(--cyan)}.hazard-card b,.hazard-card small{display:block}.hazard-card b{font-size:11px}.hazard-card small{font-size:8px;color:var(--muted);margin-top:3px}
.bottom-nav{position:absolute;z-index:12;left:50%;transform:translateX(-50%);bottom:var(--safe-bottom);width:min(610px,calc(100% - 24px));height:66px;border-radius:22px;display:flex;align-items:center;justify-content:space-around;padding:0 8px}.bottom-item{border:0;background:transparent;color:#698393;display:grid;gap:3px;place-items:center;cursor:pointer;min-width:55px}.bottom-item span{font-size:19px}.bottom-item small{font-size:9px}.bottom-item.active{color:var(--cyan)}.report-main{border:0;background:transparent;color:var(--cyan);display:grid;place-items:center;gap:2px;transform:translateY(-15px);cursor:pointer}.report-main span{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:linear-gradient(145deg,#17d8ff,#087fe9);color:#00131d;font-size:31px;font-weight:300;border:5px solid #0b1a25;box-shadow:0 0 25px rgba(24,213,255,.35)}.report-main small{font-size:8px;font-weight:800}
.drawer{position:absolute;z-index:30;top:10px;bottom:10px;left:10px;width:min(355px,calc(100% - 28px));border-radius:24px;padding:18px;transform:translateX(calc(-100% - 20px));transition:.28s}.drawer.open{transform:none}.drawer-head{display:flex;align-items:center;gap:12px;padding-bottom:17px;border-bottom:1px solid rgba(255,255,255,.07)}.drawer-head h2,.drawer-head p{margin:0}.drawer-head h2{font-size:18px}.drawer-head p{font-size:9px;color:var(--muted);letter-spacing:.1em;margin-top:4px}.drawer-head .icon-btn{margin-left:auto}.drawer nav{display:grid;gap:7px;margin-top:16px}.nav-item{border:0;background:transparent;color:#9db0be;border-radius:14px;display:flex;align-items:center;gap:13px;padding:11px;text-align:left}.nav-item>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.04);font-size:18px}.nav-item b,.nav-item small{display:block}.nav-item b{font-size:13px}.nav-item small{font-size:9px;color:#667e8d;margin-top:3px}.nav-item.active,.nav-item:hover{background:rgba(24,213,255,.07);color:#dffaff}.nav-item.active>span{color:var(--cyan);background:rgba(24,213,255,.11)}
.drawer-card{position:absolute;left:18px;right:18px;bottom:72px;border:1px solid rgba(39,230,155,.2);background:rgba(39,230,155,.06);border-radius:15px;padding:12px;display:flex;gap:10px;align-items:center}.shield{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(39,230,155,.15);color:var(--green)}.drawer-card b,.drawer-card small{display:block}.drawer-card b{font-size:11px}.drawer-card small{font-size:8px;color:#81a397;margin-top:3px}.drawer-note{position:absolute;bottom:15px;left:20px;right:20px;color:#5e7482;font-size:8px;text-align:center}.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:25}
.sheet{position:absolute;z-index:40;left:50%;bottom:10px;transform:translateX(-50%);width:min(610px,calc(100% - 20px));border-radius:24px;padding:15px 17px 22px;max-height:84vh;overflow:auto}.sheet-handle{width:42px;height:4px;border-radius:5px;background:#405663;margin:0 auto 13px}.sheet-head{display:flex;align-items:start;justify-content:space-between}.sheet-head h2,.sheet-head p{margin:0}.sheet-head h2{font-size:19px}.sheet-head p{font-size:10px;color:var(--muted);margin-top:4px}.sheet-close,.modal-head button{border:0;background:rgba(255,255,255,.05);color:#9eb1bf;width:34px;height:34px;border-radius:11px;font-size:23px}
.report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:17px}.report-grid button{border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.035);color:#b9ccd8;border-radius:14px;padding:12px 4px;font-size:9px}.report-grid button span{display:grid;place-items:center;margin:0 auto 7px;width:34px;height:34px;border-radius:11px;background:rgba(24,213,255,.08);color:var(--cyan);font-size:17px}.report-grid button:hover{border-color:rgba(24,213,255,.4);background:rgba(24,213,255,.08)}
.report-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.report-options label{font-size:9px;color:var(--muted)}.report-options select,.report-options input{display:block;width:100%;margin-top:5px;border:1px solid rgba(255,255,255,.08);background:#0a1823;color:var(--text);border-radius:10px;padding:10px;outline:0}
.weather-hero{display:flex;align-items:center;gap:18px;margin:18px 0}.weather-hero>span{font-size:55px}.weather-hero strong,.weather-hero b{display:block}.weather-hero strong{font-size:42px}.weather-hero b{font-size:12px;color:#9ab1c0}.weather-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.weather-metrics div{border-radius:13px;background:rgba(255,255,255,.035);padding:12px}.weather-metrics span,.weather-metrics b{display:block}.weather-metrics span{font-size:8px;color:var(--muted)}.weather-metrics b{font-size:13px;margin-top:5px}.forecast-list{display:flex;gap:8px;overflow-x:auto;margin-top:13px}.forecast-item{min-width:95px;background:rgba(255,255,255,.035);border-radius:13px;padding:10px}.forecast-item b,.forecast-item span,.forecast-item small{display:block}.forecast-item b{font-size:10px}.forecast-item span{font-size:20px;margin:7px 0}.forecast-item small{font-size:8px;color:var(--muted)}
.modal{position:absolute;z-index:35;left:50%;top:50%;transform:translate(-50%,-50%);width:min(610px,calc(100% - 24px));max-height:76vh;overflow:auto;border-radius:23px;padding:18px}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:0}.modal-content{margin-top:15px}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.info-card{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);padding:13px;border-radius:14px}.info-card b,.info-card small{display:block}.info-card small{color:var(--muted);font-size:9px;margin-top:4px}.list-row{display:flex;justify-content:space-between;gap:10px;padding:11px 3px;border-bottom:1px solid rgba(255,255,255,.06)}.list-row div b,.list-row div small{display:block}.list-row div small{color:var(--muted);font-size:9px;margin-top:3px}.list-row>span{color:var(--cyan);font-size:11px}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}.setting-row b,.setting-row small{display:block}.setting-row small{color:var(--muted);font-size:9px;margin-top:3px}.toggle{width:45px;height:25px;border-radius:20px;background:#263b48;border:0;padding:3px}.toggle i{display:block;width:19px;height:19px;border-radius:50%;background:#8ba0ad;transition:.2s}.toggle.on{background:#087fb3}.toggle.on i{transform:translateX(20px);background:#c9f8ff}
.toast{position:absolute;z-index:60;left:50%;bottom:100px;transform:translateX(-50%);border-radius:13px;padding:11px 16px;color:#dff8ff;font-size:11px;white-space:nowrap}
.report-marker{width:34px;height:34px;border-radius:12px 12px 12px 3px;transform:rotate(-45deg);display:grid;place-items:center;border:2px solid rgba(255,255,255,.85);box-shadow:0 5px 16px rgba(0,0,0,.4)}.report-marker i{transform:rotate(45deg);font-style:normal;font-size:15px;font-weight:900}.report-marker.camera{background:#e2a818;color:#201600}.report-marker.police{background:#168ae8}.report-marker.crash{background:#e63852}.report-marker.hazard{background:#f36b27}.report-marker.construction{background:#f79021}.report-marker.weather{background:#14a9ca}.report-marker.animal{background:#8a62d6}.report-marker.closure{background:#cc3148}
.user-puck{width:28px;height:28px;border-radius:50%;background:#17c9ff;border:5px solid white;box-shadow:0 0 0 8px rgba(23,201,255,.2),0 5px 16px rgba(0,0,0,.45)}
.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{display:none}
@media(max-width:680px){
 .topbar{left:10px;right:10px}.brand small{display:none}.search-panel{top:calc(var(--safe-top) + 73px);width:calc(100% - 20px)}.quick-destinations{display:none}.left-stack{top:calc(var(--safe-top) + 142px);left:10px}.map-controls{top:calc(var(--safe-top) + 142px);right:10px}.speed-card{width:137px}.road-status{width:137px}
 .hazard-rail{bottom:84px;width:calc(100% - 20px)}.hazard-card{min-width:135px}.route-card{bottom:153px;width:calc(100% - 20px)}.report-grid{grid-template-columns:repeat(4,1fr)}.bottom-nav{width:calc(100% - 14px)}
}
@media(max-width:390px){.brand strong{font-size:12px}.weather-chip{padding:0 7px}.avatar{display:none}.report-grid{grid-template-columns:repeat(3,1fr)}}