:root{--bg:#03070c;--panel:rgba(5,13,22,.88);--panel2:rgba(9,20,31,.92);--line:rgba(255,255,255,.1);--text:#f6fbff;--muted:#8998a8;--cyan:#40eaff;--green:#2ce6aa;--blue:#378fff;--danger:#ff5368;--shadow:0 18px 55px rgba(0,0,0,.32)}
:root[data-theme=light]{--bg:#edf4f8;--panel:rgba(255,255,255,.9);--panel2:rgba(248,252,255,.96);--line:rgba(15,35,55,.14);--text:#102030;--muted:#617180;--shadow:0 18px 50px rgba(27,56,80,.18)}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);overflow:hidden}button,input{font:inherit}.app-shell{position:relative;width:100%;height:100dvh;min-height:600px;overflow:hidden;background:#07111a}#map{position:absolute;inset:0}.glass{background:linear-gradient(145deg,var(--panel),rgba(2,8,15,.78));border:1px solid var(--line);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.topbar{position:absolute;top:max(8px,env(safe-area-inset-top));left:9px;right:9px;height:58px;border-radius:20px;display:flex;align-items:center;gap:8px;padding:0 9px 0 12px;z-index:12;transition:transform .36s cubic-bezier(.22,1,.36,1),opacity .28s ease,filter .28s ease;will-change:transform}.topbar.hidden-state{transform:translate3d(0,calc(-100% + 14px),0);opacity:.86;filter:saturate(.9)}.topbar.hidden-state.expanded{transform:translate3d(0,0,0);opacity:1;filter:none}.topbar-tab{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);height:8px;width:42px;border-radius:0 0 8px 8px;background:var(--green);opacity:.65}.brand{display:flex;gap:8px;align-items:center;min-width:0}.brand-mark{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#27e4bf,#197eff);font-size:19px}.brand b{display:block;font-size:11px;letter-spacing:2.5px}.brand small{display:block;font-size:6px;color:#6fe6d2;letter-spacing:1.6px;margin-top:1px}.device-status{margin-left:auto;display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:11px;background:rgba(7,18,30,.7);border:1px solid var(--line);white-space:nowrap}.device-status span{width:6px;height:6px;border-radius:50%;background:#758392}.device-status span.on{background:var(--green);box-shadow:0 0 12px var(--green)}.device-status label{font-size:7px;color:var(--muted)}.top-actions{display:flex;gap:5px}.icon-btn,.map-btn,.voice-btn,.mini-btn,.small-action{border:1px solid var(--line);background:rgba(8,22,35,.84);color:#fff;cursor:pointer}.icon-btn{width:35px;height:35px;border-radius:12px;font-size:14px}
.nav-card{position:absolute;top:73px;left:9px;right:9px;min-height:68px;border-radius:20px;z-index:5;display:flex;align-items:center;gap:10px;padding:9px 10px;transition:opacity .25s,transform .25s}.nav-card.minimized{opacity:.18;transform:translateY(-6px)}.turn-icon{font-size:32px;font-weight:700;line-height:1}.nav-copy{min-width:0}.nav-card strong{font-size:23px;display:block;line-height:1}.nav-card span{display:block;color:var(--text);opacity:.85;margin-top:4px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:245px}.progress{height:3px;margin-top:6px;width:150px;background:#243342;border-radius:4px;overflow:hidden}.progress i{display:block;width:44%;height:100%;background:linear-gradient(90deg,var(--green),var(--cyan));border-radius:4px}.mini-btn{margin-left:auto;border-radius:50%;width:29px;height:29px;font-size:17px;flex:none}.destination-card{position:absolute;top:147px;left:9px;right:60px;min-height:50px;border-radius:17px;z-index:5;padding:8px 10px;display:flex;gap:8px;align-items:center}.flag{font-size:16px}.dest-copy{min-width:0}.destination-card b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.destination-card small{display:block;color:var(--muted);font-size:8px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.map-controls{position:absolute;right:9px;top:147px;z-index:6;display:flex;flex-direction:column;gap:5px}.map-btn{width:38px;height:38px;border-radius:13px;font-weight:700;font-size:12px}.map-type{position:absolute;right:53px;top:147px;z-index:8;padding:4px;border-radius:13px;display:none}.map-type.open{display:flex}.map-type button{border:0;background:transparent;color:#c9d3de;padding:7px 8px;border-radius:9px;font-size:9px}.map-type button.active{background:#18344b;color:#fff}.weather-card{position:absolute;left:9px;bottom:118px;z-index:4;border-radius:14px;padding:6px 9px;display:flex;align-items:center;gap:7px}.weather-card b,.accuracy-card b{display:block;font-size:10px}.weather-card small,.accuracy-card small{display:block;color:var(--muted);font-size:7px;margin-top:1px}.sun{font-size:15px}.divider{width:1px;height:19px;background:var(--line);margin:0 2px}.accuracy-card{position:absolute;left:9px;bottom:78px;z-index:4;border-radius:12px;padding:6px 8px;display:flex;gap:6px;align-items:center}.pulse{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #2ce6aa12,0 0 10px var(--green)}.speed-card{position:absolute;right:8px;bottom:76px;z-index:4;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 50% 45%,#111f2d 0,#06101a 64%,rgba(6,16,26,.25) 65%);border:2px solid rgba(57,231,190,.2);box-shadow:0 0 26px rgba(38,229,164,.13);display:grid;place-items:center}.speed-ring{width:79px;height:79px;border-radius:50%;border:6px solid #1b3140;border-top-color:var(--green);border-right-color:var(--cyan);display:grid;place-items:center}.speed-ring strong{display:block;text-align:center;font-size:26px;line-height:1}.speed-ring span{display:block;text-align:center;color:#9cabb9;font-size:8px}.limit{position:absolute;right:-2px;top:25px;background:#fff;color:#0b1621;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;font-size:8px;font-weight:800;border:3px solid var(--danger)}.voice-btn{position:absolute;right:9px;bottom:180px;width:38px;height:38px;border-radius:50%;z-index:4;font-size:11px}
.ride-panel{position:absolute;left:6px;right:6px;bottom:6px;border-radius:22px;padding:7px 7px calc(7px + env(safe-area-inset-bottom));z-index:10;overflow:hidden;max-height:230px;transition:max-height .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,background .35s ease;will-change:max-height,transform}.ride-panel.collapsed{max-height:50px;transform:translate3d(0,0,0)}.ride-panel:not(.collapsed){max-height:min(230px,34dvh);transform:translate3d(0,0,0)}.handle{display:block;margin:0 auto 5px;width:42px;height:5px;border:0;border-radius:8px;background:#7d8b9b;opacity:.7;cursor:pointer;font-size:0}.ride-panel .handle{position:relative;transition:transform .3s ease,opacity .25s ease}.ride-panel.collapsed .handle:after{content:'⌃';display:block;position:relative;top:-10px;color:#dce7ef;font-size:11px}.ride-panel:not(.collapsed) .handle:after{content:'⌄';display:block;position:relative;top:-10px;color:#dce7ef;font-size:11px}.ride-head{display:flex;justify-content:space-between;align-items:center;padding:0 4px 5px;gap:7px}.ride-head b{display:block;font-size:12px}.ride-head small{display:block;color:var(--muted);font-size:7px;margin-top:1px}.ride-head-actions{display:flex;align-items:center;gap:5px}.small-action{padding:5px 7px;border-radius:8px;font-size:8px}.live{color:var(--green);font-size:7px;display:flex;align-items:center;gap:4px;white-space:nowrap}.live i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}.nav-state{display:flex;align-items:center;gap:5px;margin:0 2px 5px;padding:5px 7px;border-radius:10px;background:#071523aa;border:1px solid rgba(255,255,255,.07)}.nav-state>span{color:#778797;font-size:7px}.nav-state b{font-size:7px}.nav-state small{margin-left:auto;color:var(--muted);font-size:6px}.nav-state.started{border-color:#2ce6aa33;background:#09201999}.nav-state.started>span{color:var(--green)}.riders{display:flex;gap:5px;overflow-x:auto;padding:0 1px 6px;scrollbar-width:none}.riders::-webkit-scrollbar{display:none}.rider{min-width:61px;padding:6px 4px;border-radius:12px;background:rgba(8,22,35,.72);border:1px solid var(--line);text-align:center}.rider.me{border-color:#328fff66;background:#0b1f33}.avatar{width:29px;height:29px;margin:auto;border-radius:50%;display:grid;place-items:center;border:2px solid;font-size:11px}.rider b{display:block;font-size:7px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rider small{display:block;color:var(--muted);font-size:6px;margin-top:1px;white-space:nowrap}.panel-actions{display:grid;grid-template-columns:1.5fr .75fr .9fr .9fr;gap:5px}.panel-actions button{height:30px;border-radius:10px;border:1px solid var(--line);background:#102233;color:#eef5fa;font-weight:750;font-size:7px}.panel-actions .primary-action{background:linear-gradient(100deg,#22e5a4,#2b8cff);color:#03101a;border:0}.panel-actions .primary-action:disabled{opacity:.7}.panel-actions .danger{color:#ff8190}.ride-panel.collapsed .nav-state,.ride-panel.collapsed .riders,.ride-panel.collapsed .panel-actions{opacity:0;transform:translateY(10px);pointer-events:none}.ride-panel:not(.collapsed) .nav-state,.ride-panel:not(.collapsed) .riders,.ride-panel:not(.collapsed) .panel-actions{opacity:1;transform:translateY(0);transition:opacity .25s ease .08s,transform .32s ease .08s}.nav-state,.riders,.panel-actions{transition:opacity .2s ease,transform .25s ease}
.toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(20px);opacity:0;z-index:100;padding:9px 12px;border-radius:12px;background:#081522ee;border:1px solid var(--line);transition:.25s;pointer-events:none;font-size:10px;max-width:82%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,-50%)}.modal{position:fixed;inset:0;background:rgba(0,0,0,.67);z-index:50;display:grid;place-items:center;padding:15px}.modal.hidden{display:none}.modal-card{width:min(420px,100%);border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,var(--panel2),var(--panel));box-shadow:0 30px 100px #000b;padding:19px;position:relative}.modal-card h1{font-size:28px;line-height:1.04;margin:9px 0}.modal-card h2{margin:0 0 14px;font-size:20px}.modal-card p,.hint{color:var(--muted);font-size:11px;line-height:1.5}.modal-logo{width:47px;height:47px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#24e5a4,#287cff);font-size:23px}.modal-card em{font-style:normal;color:#3de8be}.primary,.secondary{width:100%;height:44px;border-radius:13px;border:0;margin-top:8px;font-weight:800;cursor:pointer;font-size:12px}.primary{background:linear-gradient(100deg,#22e5a4,#2b8cff);color:#03101a}.secondary{background:#142638;color:#dfe9f2;border:1px solid var(--line)}label{display:block;color:#a8b4c1;font-size:10px;margin:11px 0}input{display:block;width:100%;height:41px;margin-top:5px;border:1px solid var(--line);border-radius:11px;background:#07131f;color:#fff;padding:0 11px;outline:none}input:focus{border-color:#2de5bf}.modal-close{position:absolute;right:13px;top:10px;border:0;background:none;color:#a8b4c1;font-size:22px}.setting-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:11px 0;color:var(--text);font-size:11px}.setting-row input{width:38px;height:19px;margin:0}.device-box{margin-top:11px;padding:10px;border-radius:12px;background:#07131f;border:1px solid var(--line)}.device-box b{display:block;font-size:10px}.device-box small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.share-card{text-align:center}.share-kicker{font-size:7px;letter-spacing:2px;color:#5de7c5}.qr-wrap{margin:12px auto 8px;width:224px;height:224px;padding:4px;border-radius:18px;background:#fff;display:grid;place-items:center}.qr-wrap canvas,.qr-wrap img{display:block;max-width:100%;width:220px;height:220px!important;object-fit:contain}.qr-wrap img{background:#fff}.trip-code{font-size:25px;font-weight:900;letter-spacing:6px;color:#42e9c0}.share-card p{max-width:290px;margin:7px auto}.share-url{font-size:7px;color:#718292;word-break:break-all;margin:7px auto;max-width:320px}.hero-modal{text-align:left}@media(min-width:700px){.app-shell{width:430px;margin:auto;height:100dvh;border-left:1px solid #173044;border-right:1px solid #173044}}@media(max-height:700px){.nav-card{top:69px}.destination-card,.map-controls,.map-type{top:137px}.weather-card{bottom:94px}.accuracy-card{bottom:58px}.speed-card{bottom:56px}.voice-btn{bottom:143px}.ride-panel.collapsed{max-height:48px}.ride-panel:not(.collapsed){max-height:205px}.nav-card{min-height:62px}.nav-card strong{font-size:20px}.destination-card{min-height:44px}.speed-card{width:78px;height:78px}.speed-ring{width:66px;height:66px}.speed-ring strong{font-size:22px}.limit{width:22px;height:22px}}

/* v4 premium control layout */
.map-controls{top:147px;right:9px;gap:7px}
.map-btn{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-size:13px;box-shadow:0 10px 26px rgba(0,0,0,.22);transition:transform .18s ease,background .2s ease,border-color .2s ease}
.map-btn:active{transform:scale(.92)}
.settings-map-btn{background:linear-gradient(145deg,rgba(12,31,47,.96),rgba(5,15,25,.92));color:#dffefa;border-color:rgba(64,234,255,.18);font-size:15px}
.map-type{right:57px;top:147px;max-width:calc(100vw - 70px);overflow:auto;scrollbar-width:none;opacity:0;transform:translateX(8px) scale(.98);pointer-events:none;transition:opacity .2s ease,transform .25s cubic-bezier(.22,1,.36,1)}
.map-type::-webkit-scrollbar{display:none}.map-type.open{display:flex;opacity:1;transform:translateX(0) scale(1);pointer-events:auto}

/* Bottom strip: compact by default, fluid when expanded */
.ride-panel{bottom:max(6px,env(safe-area-inset-bottom));left:6px;right:6px;padding:6px 7px calc(6px + env(safe-area-inset-bottom));max-height:52px;border-radius:19px;transform:translateZ(0);transition:max-height .48s cubic-bezier(.22,1,.36,1),border-radius .32s ease,box-shadow .35s ease}
.ride-panel.collapsed{max-height:52px;border-radius:18px}.ride-panel:not(.collapsed){max-height:min(300px,40dvh);border-radius:22px}
.ride-panel .handle{width:48px;height:5px;margin:0 auto 4px;position:relative;z-index:3;touch-action:manipulation}
.ride-panel .handle:after{font-size:10px!important;top:-10px!important}
.ride-head{min-height:34px;padding:0 4px 2px;transition:opacity .25s ease,transform .3s ease}
.ride-panel.collapsed .ride-head{transform:translateY(-1px)}
.ride-panel.collapsed .nav-state,.ride-panel.collapsed .riders,.ride-panel.collapsed .panel-actions{display:none}
.ride-panel:not(.collapsed) .nav-state,.ride-panel:not(.collapsed) .riders,.ride-panel:not(.collapsed) .panel-actions{display:flex}
.ride-panel:not(.collapsed) .riders{display:flex}

/* Settings popup */
.settings-sheet{width:min(430px,100%);padding:18px 15px 15px;max-height:min(86dvh,650px);overflow:auto}
.settings-kicker{font-size:7px;letter-spacing:2.4px;color:#51e9c8;margin-bottom:5px}
.settings-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.settings-title-row h2{margin:0;font-size:22px}.settings-title-row p{margin:4px 0 0;color:var(--muted);font-size:9px}.settings-live{display:flex;align-items:center;gap:5px;font-size:8px;color:var(--green);padding:6px 8px;border-radius:999px;background:rgba(44,230,170,.08);border:1px solid rgba(44,230,170,.14)}.settings-live i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.settings-trip-card{margin:14px 0 9px;padding:10px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,rgba(20,46,65,.72),rgba(7,18,29,.72));display:flex;align-items:center;gap:10px}.settings-trip-icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#22e5a4,#2b8cff);color:#03101a;font-weight:900}.settings-trip-card b{display:block;font-size:12px}.settings-trip-card small{display:block;color:var(--muted);font-size:8px;margin-top:2px}
.settings-share{width:100%;display:grid;grid-template-columns:38px 1fr 20px;align-items:center;text-align:left;gap:9px;padding:10px;border:1px solid rgba(64,234,255,.15);border-radius:15px;background:linear-gradient(145deg,rgba(14,37,54,.9),rgba(7,18,29,.9));color:var(--text);cursor:pointer;transition:transform .18s ease,border-color .2s ease}.settings-share:active{transform:scale(.985)}.settings-share>span{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(44,230,170,.1);color:var(--green);font-size:19px}.settings-share b{display:block;font-size:10px}.settings-share small{display:block;color:var(--muted);font-size:7px;margin-top:2px}.settings-share>strong{font-size:19px;color:#8292a1;text-align:center}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.setting-tile{position:relative;min-height:58px;padding:9px;border:1px solid var(--line);border-radius:13px;background:rgba(7,18,29,.62)}.setting-tile>span{display:block;font-size:9px;font-weight:700}.setting-tile>small{position:absolute;right:9px;bottom:9px;color:var(--muted);font-size:7px}.setting-tile input[type=number]{width:70px;height:28px;margin-top:7px;font-size:11px;padding:0 8px}.toggle-tile{display:flex;align-items:center;justify-content:space-between;gap:7px}.toggle-tile input[type=checkbox]{width:34px;height:18px;margin:0;accent-color:#2ce6aa}
.settings-sheet .device-box{display:flex;align-items:center;justify-content:space-between;margin-top:9px}.settings-sheet .device-box>span{font-size:7px;color:var(--green);padding:5px 7px;border-radius:999px;background:rgba(44,230,170,.08)}.settings-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.settings-actions .secondary{margin-top:0;height:39px}

/* Share QR: hard bounds prevent canvas/image overflow */
.share-card{width:min(430px,100%);padding:20px 14px 15px;overflow:hidden}.share-card h2{font-size:23px;margin:5px 25px 10px}.qr-wrap{position:relative;width:min(260px,78vw);height:min(260px,78vw);min-width:220px;min-height:220px;margin:13px auto 10px;padding:12px;border-radius:24px;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.9)}.qr-wrap canvas,.qr-wrap img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;background:#fff;image-rendering:pixelated}.qr-wrap canvas{padding:0}.trip-code{font-size:22px;line-height:1;letter-spacing:5px;margin-top:5px}.share-card p{font-size:10px;line-height:1.4;margin:7px auto;max-width:300px}.share-url{width:100%;max-width:350px;min-height:35px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(7,18,29,.62);font-size:7px;color:#91a3b3;margin:8px auto;display:flex;align-items:center;justify-content:center}.share-card .primary,.share-card .secondary{height:43px;margin-top:7px}

:root[data-theme=light] .map-btn,:root[data-theme=light] .settings-share,:root[data-theme=light] .settings-trip-card,:root[data-theme=light] .setting-tile,:root[data-theme=light] .device-box{background:rgba(255,255,255,.9);color:var(--text)}
@media(max-height:700px){.map-controls,.map-type{top:137px}.ride-panel.collapsed{max-height:48px}.ride-panel:not(.collapsed){max-height:220px}.qr-wrap{min-width:200px;min-height:200px;width:min(230px,72vw);height:min(230px,72vw)}}
/* QR stability: the QR image is always contained inside the dedicated frame. */
.qr-wrap{isolation:isolate;box-sizing:border-box;position:relative;display:flex!important;align-items:center!important;justify-content:center!important;padding:12px!important;}
.qr-wrap img{position:absolute!important;inset:12px!important;width:calc(100% - 24px)!important;height:calc(100% - 24px)!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center!important;margin:0!important;padding:0!important;border:0!important;}
.qr-loading{position:relative;z-index:2;color:#52606d;font-size:10px;text-align:center;line-height:1.4;padding:18px;}

/* RideFlow v5: device-aware responsive shell + top control popup */
.top-brand{position:absolute;top:max(10px,env(safe-area-inset-top));left:10px;right:10px;height:48px;z-index:11;border-radius:17px;display:flex;align-items:center;gap:8px;padding:5px 7px 5px 8px;pointer-events:auto}
.top-brand .brand-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;background:linear-gradient(145deg,#27e4bf,#197eff);color:#03101a;font-weight:900}
.top-brand>div:nth-child(2){min-width:0}.top-brand b{display:block;font-size:10px;letter-spacing:2.3px}.top-brand small{display:block;font-size:5.5px;letter-spacing:1.4px;color:#69e5d2;margin-top:1px}.brand-status{margin-left:auto;display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;background:rgba(4,14,23,.55);border:1px solid var(--line);font-size:7px;color:var(--muted);white-space:nowrap}.brand-status i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.brand-action{width:34px;height:34px;border-radius:11px;border:1px solid var(--line);background:rgba(8,22,35,.78);color:#fff;font-size:19px;line-height:1;cursor:pointer}.brand-action:active{transform:scale(.94)}
.nav-card{top:68px}.destination-card{top:142px}.map-controls{top:143px}.map-type{top:143px}
.control-popup{position:absolute;top:66px;left:10px;right:10px;z-index:30;border-radius:22px;padding:13px;opacity:0;transform:translateY(-12px) scale(.97);pointer-events:none;transition:opacity .22s ease,transform .32s cubic-bezier(.22,1,.36,1);max-height:min(70dvh,500px);overflow:auto}.control-popup.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.control-popup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:2px 2px 10px}.control-popup-head span{display:block;font-size:6px;letter-spacing:2px;color:#51e9c8}.control-popup-head b{display:block;font-size:17px;margin-top:3px}.control-popup-head small{display:block;color:var(--muted);font-size:8px;margin-top:2px}.popup-close{width:31px;height:31px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);font-size:20px;cursor:pointer}.control-actions{display:grid;grid-template-columns:1fr;gap:7px}.control-action{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);border-radius:15px;background:rgba(7,18,29,.72);color:var(--text);padding:9px;cursor:pointer;transition:transform .18s ease,border-color .2s ease}.control-action:active{transform:scale(.985)}.control-action:disabled{opacity:.45;cursor:not-allowed}.control-action strong{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(64,234,255,.08);color:var(--cyan);font-size:18px}.control-action b{display:block;font-size:10px}.control-action small{display:block;color:var(--muted);font-size:7px;margin-top:2px}.control-action.primary-control strong{background:linear-gradient(145deg,#22e5a4,#2b8cff);color:#03101a}.control-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px}.mini-control{height:42px;border-radius:13px;border:1px solid var(--line);background:rgba(7,18,29,.65);color:var(--text);font-size:8px;cursor:pointer}.mini-control span{font-size:14px;margin-right:3px}.mini-control b{font-size:8px}
:root[data-theme=light] .control-action,:root[data-theme=light] .mini-control,:root[data-theme=light] .brand-action{background:rgba(255,255,255,.88);color:var(--text)}

/* Desktop/tablet: use the full viewport instead of a phone-sized shell. */
@media (min-width:900px){
  .app-shell{width:100%;max-width:none;margin:0;border:0;min-height:100dvh}
  .top-brand{left:24px;right:auto;width:360px;height:56px;top:18px;border-radius:20px;padding:7px 9px}
  .top-brand b{font-size:12px}.top-brand small{font-size:6px}.brand-action{width:38px;height:38px}
  .nav-card{top:92px;left:24px;right:auto;width:min(520px,40vw);min-height:78px}
  .destination-card{top:181px;left:24px;right:auto;width:min(430px,34vw)}
  .map-controls{top:100px;right:24px}.map-btn{width:46px;height:46px;border-radius:15px}
  .map-type{top:100px;right:80px}
  .control-popup{top:84px;left:auto;right:24px;width:390px;max-height:min(78dvh,680px);border-radius:24px}
  .control-actions{grid-template-columns:1fr 1fr}.control-action:last-child{grid-column:1/-1}
  .ride-panel{left:50%;right:auto;transform:translateX(-50%) translateZ(0);width:min(980px,calc(100vw - 48px));bottom:18px;padding:8px 10px 10px;border-radius:22px}
  .ride-panel.collapsed{max-height:58px}.ride-panel:not(.collapsed){max-height:min(360px,42dvh)}
  .ride-panel .handle{margin-bottom:5px}.riders{justify-content:center}.panel-actions{grid-template-columns:2fr 1fr 1fr 1fr}
  .weather-card{left:24px;bottom:120px}.accuracy-card{left:24px;bottom:76px}.speed-card{right:36px;bottom:105px}.voice-btn{right:36px;bottom:44px}
  .share-card{width:min(520px,92vw)}
}
@media (min-width:1400px){
  .top-brand{left:32px}.nav-card{left:32px}.destination-card{left:32px}.map-controls{right:32px}.control-popup{right:32px}.ride-panel{width:min(1120px,calc(100vw - 64px))}
}
@media (max-width:899px){.control-popup{left:8px;right:8px}.top-brand{right:68px}.brand-action{display:none}}
@media (max-width:420px){.top-brand{left:7px;right:56px}.top-brand{height:44px}.top-brand .brand-mark{width:30px;height:30px}.brand-status{padding:5px 6px}.nav-card{top:63px}.destination-card{top:132px}.map-controls{top:132px}.map-type{top:132px}.control-popup{top:58px}}

/* RideFlow UX refinement: directional guidance owns the top edge; brand is secondary. */
.nav-card{top:max(8px,env(safe-area-inset-top));z-index:22;transition:top .28s ease,transform .28s ease,opacity .22s ease}
.top-brand{top:calc(max(8px,env(safe-area-inset-top)) + 82px);z-index:14;transition:top .28s cubic-bezier(.22,1,.36,1),opacity .22s ease}
.destination-card{top:calc(max(8px,env(safe-area-inset-top)) + 145px);z-index:13}
.map-controls{top:calc(max(8px,env(safe-area-inset-top)) + 146px);z-index:15}
.map-type{top:calc(max(8px,env(safe-area-inset-top)) + 146px);z-index:16}
.weather-card{z-index:14}
.accuracy-card{z-index:14;left:auto;right:10px;bottom:120px}
.control-popup{z-index:40;backdrop-filter:blur(28px) saturate(1.35)}
.control-popup::before,.settings-sheet::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 38%);opacity:.55}
.control-popup>*{position:relative;z-index:1}

/* A more premium settings/control center */
.control-popup{padding:16px;border:1px solid rgba(119,231,255,.16);box-shadow:0 30px 90px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.025);background:linear-gradient(145deg,rgba(7,18,29,.96),rgba(3,9,16,.94))}
.control-popup-head{padding-bottom:14px}.control-popup-head b{font-size:18px;letter-spacing:-.2px}.control-popup-head span{font-size:7px;font-weight:800}.control-actions{grid-template-columns:repeat(3,1fr);gap:8px}.control-action{min-height:76px;display:grid;grid-template-columns:34px 1fr;align-content:center;padding:10px}.control-action:last-child{grid-column:auto}.control-action strong{width:34px;height:34px}.control-action b{font-size:10px}.control-action small{font-size:7px;line-height:1.3}.control-action.primary-control{background:linear-gradient(145deg,rgba(28,70,72,.85),rgba(8,30,37,.9));border-color:rgba(34,229,164,.25)}
.control-settings-grid{margin-top:9px}.control-setting{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08);transition:background .2s,border-color .2s}.control-setting:hover{background:rgba(255,255,255,.055);border-color:rgba(79,225,255,.22)}

/* Responsive device-aware layout */
@media(max-width:899px){
  .top-brand{left:10px;right:10px;width:auto;max-width:none;height:48px}
  .nav-card{left:10px;right:10px;width:auto;min-height:62px}
  .destination-card{left:10px;right:10px;width:auto}
  .accuracy-card{right:10px;left:auto;bottom:118px}
  .weather-card{left:10px;bottom:118px}
  .speed-card{right:10px;bottom:175px}
  .control-popup{top:calc(max(8px,env(safe-area-inset-top)) + 64px);left:10px;right:10px;max-height:calc(100dvh - 84px)}
}
@media(min-width:900px){
  .nav-card{top:18px;left:24px;right:auto;width:min(520px,40vw)}
  .top-brand{top:18px;left:auto;right:24px;width:330px;height:54px}
  .destination-card{top:108px;left:24px;right:auto;width:min(430px,34vw)}
  .map-controls{top:108px;right:24px}.map-type{top:108px;right:82px}
  .accuracy-card{right:210px;left:auto;bottom:105px}
  .weather-card{right:24px;left:auto;bottom:105px}
  .speed-card{right:24px;bottom:176px}.voice-btn{right:24px;bottom:112px}
  .control-popup{top:82px;right:24px;width:470px;left:auto}
}
@media(min-width:1400px){
  .nav-card{left:32px}.destination-card{left:32px}.top-brand{right:32px}.map-controls{right:32px}.map-type{right:90px}.weather-card{right:32px}.accuracy-card{right:220px}.control-popup{right:32px}
}

/* Light theme applies consistently to every UI surface. */
:root[data-theme="light"]{--bg:#eef3f7;--panel:rgba(255,255,255,.92);--panel2:rgba(255,255,255,.97);--line:rgba(24,45,62,.12);--text:#152532;--muted:#61717f;--cyan:#087aa7;--green:#0c9b73}
:root[data-theme="light"] body{background:#eef3f7}
:root[data-theme="light"] .glass,.light-theme .glass{background:rgba(255,255,255,.9);box-shadow:0 16px 45px rgba(36,57,73,.14),0 1px 0 rgba(255,255,255,.9) inset;color:var(--text)}
:root[data-theme="light"] .top-brand,.root[data-theme="light"] .control-popup{color:var(--text)}
:root[data-theme="light"] .brand-status{background:rgba(241,246,249,.9);color:var(--muted)}
:root[data-theme="light"] .brand-action,.root[data-theme="light"] .control-action,.root[data-theme="light"] .mini-control{background:rgba(248,251,253,.94);color:var(--text)}
:root[data-theme="light"] .control-popup{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(242,248,251,.98));border-color:rgba(21,94,122,.14);box-shadow:0 30px 90px rgba(48,74,92,.2)}
:root[data-theme="light"] .control-setting{background:rgba(236,243,247,.72);border-color:rgba(20,50,68,.1)}
:root[data-theme="light"] .settings-share{background:linear-gradient(145deg,#fff,#edf7fa)}
:root[data-theme="light"] .share-url{background:rgba(239,245,248,.92);color:#38505f}
:root[data-theme="light"] .qr-wrap{box-shadow:0 14px 40px rgba(30,55,70,.18),0 0 0 1px rgba(20,50,68,.1)}

/* Touch targets stay compact but never become difficult to tap. */
@media(pointer:coarse){.map-btn{min-width:44px;min-height:44px}.popup-close,.brand-action{min-width:40px;min-height:40px}.control-action{min-height:72px}}

/* Final map-first layout: remove persistent RideFlow banner and restore compact sensor controls. */
.top-brand{display:none !important;}

/* Direction guidance owns the very top edge on every device. */
.nav-card{top:max(8px,env(safe-area-inset-top)) !important;z-index:30 !important;}
.destination-card{top:calc(max(8px,env(safe-area-inset-top)) + 74px) !important;z-index:24 !important;}
.map-controls{top:calc(max(8px,env(safe-area-inset-top)) + 75px) !important;z-index:25 !important;}
.map-type{top:calc(max(8px,env(safe-area-inset-top)) + 75px) !important;z-index:31 !important;}

/* Keep the sensor widgets low and out of the central navigation area. */
.weather-card{left:10px !important;right:auto !important;bottom:118px !important;z-index:18 !important;}
.accuracy-card{left:auto !important;right:10px !important;bottom:118px !important;z-index:18 !important;}
.speed-card{left:auto !important;right:10px !important;bottom:175px !important;z-index:18 !important;}
.voice-btn{right:10px !important;bottom:278px !important;z-index:18 !important;}

/* The settings popup remains available through the gear control, but never blocks the map until opened. */
.control-popup{top:calc(max(8px,env(safe-area-inset-top)) + 68px) !important;}

@media (min-width:900px){
  .nav-card{top:18px !important;left:24px !important;right:auto !important;width:min(520px,40vw) !important;}
  .destination-card{top:108px !important;left:24px !important;right:auto !important;width:min(430px,34vw) !important;}
  .map-controls{top:108px !important;right:24px !important;}
  .map-type{top:108px !important;right:82px !important;}
  .weather-card{left:24px !important;right:auto !important;bottom:105px !important;}
  .accuracy-card{left:auto !important;right:24px !important;bottom:105px !important;}
  .speed-card{right:24px !important;bottom:176px !important;}
  .voice-btn{right:24px !important;bottom:112px !important;}
  .control-popup{top:82px !important;right:24px !important;left:auto !important;}
}
@media (min-width:1400px){
  .nav-card{left:32px !important;}
  .destination-card{left:32px !important;}
  .map-controls{right:32px !important;}
  .map-type{right:90px !important;}
  .weather-card{left:32px !important;}
  .accuracy-card{right:32px !important;}
  .speed-card{right:32px !important;}
  .voice-btn{right:32px !important;}
  .control-popup{right:32px !important;}
}

/* Small screens: keep the map dominant and leave safe-area room for the bottom panel. */
@media (max-width:899px){
  .nav-card{left:10px !important;right:10px !important;width:auto !important;min-height:62px !important;}
  .destination-card{left:10px !important;right:58px !important;width:auto !important;}
  .map-controls{right:10px !important;}
  .map-type{right:55px !important;}
  .weather-card{left:10px !important;bottom:118px !important;}
  .accuracy-card{right:10px !important;bottom:118px !important;}
  .speed-card{right:10px !important;bottom:175px !important;}
  .control-popup{left:10px !important;right:10px !important;top:calc(max(8px,env(safe-area-inset-top)) + 68px) !important;max-height:calc(100dvh - 84px) !important;}
}
@media (max-width:420px){
  .nav-card{left:7px !important;right:7px !important;}
  .destination-card{left:7px !important;right:55px !important;}
  .map-controls{right:7px !important;}
  .map-type{right:52px !important;}
  .weather-card{left:7px !important;bottom:118px !important;}
  .accuracy-card{right:7px !important;bottom:118px !important;}
  .speed-card{right:7px !important;bottom:175px !important;}
}

/* === Final sensor dock + complete theme synchronization === */
.app-shell{--ride-lift:62px;}
.weather-card,.accuracy-card,.speed-card,.voice-btn{
  transition:bottom .42s cubic-bezier(.22,1,.36,1),background .3s ease,border-color .3s ease,box-shadow .3s ease,color .3s ease;
}
.weather-card{bottom:calc(var(--ride-lift) + 10px) !important;}
.accuracy-card{bottom:calc(var(--ride-lift) + 10px) !important;}
.speed-card{bottom:calc(var(--ride-lift) + 10px) !important;}
.voice-btn{bottom:calc(var(--ride-lift) + 112px) !important;}

/* Speedometer is deliberately theme-aware instead of being permanently dark. */
.speed-card{
  background:radial-gradient(circle at 50% 45%,var(--speed-inner,#111f2d) 0,var(--speed-core,#06101a) 64%,transparent 65%);
  border-color:var(--speed-border,rgba(57,231,190,.28));
  box-shadow:0 0 26px var(--speed-glow,rgba(38,229,164,.16));
}
.speed-ring{border-color:var(--speed-track,#1b3140);border-top-color:var(--green);border-right-color:var(--cyan);}
.speed-ring strong{color:var(--speed-text,#fff)}
.speed-ring span{color:var(--speed-muted,#9cabb9)}
.limit{background:var(--limit-bg,#fff);color:var(--limit-text,#0b1621)}

/* Riders, navigation state and action buttons follow the selected theme completely. */
.rider{background:var(--rider-bg,rgba(8,22,35,.72));color:var(--text);border-color:var(--line);}
.rider.me{background:var(--rider-me-bg,rgba(11,31,51,.92));border-color:rgba(50,143,255,.42);}
.nav-state{background:var(--navstate-bg,rgba(7,21,35,.67));border-color:var(--line);}
.nav-state.started{background:var(--navstate-started-bg,rgba(9,32,25,.68));border-color:rgba(44,230,170,.25);}
.panel-actions button{background:var(--action-bg,#102233);color:var(--action-text,#eef5fa);border-color:var(--line);}
.small-action,.map-btn,.mini-btn,.voice-btn{background:var(--button-bg,rgba(8,22,35,.84));color:var(--button-text,#fff);border-color:var(--line);}
.map-type button{color:var(--button-text,#d8e2eb)}
.map-type button.active{background:var(--button-active,#18344b);color:var(--button-active-text,#fff)}

:root[data-theme="dark"]{
  --speed-inner:#111f2d;--speed-core:#06101a;--speed-border:rgba(57,231,190,.28);--speed-glow:rgba(38,229,164,.16);
  --speed-text:#fff;--speed-muted:#9cabb9;--rider-bg:rgba(8,22,35,.72);--rider-me-bg:rgba(11,31,51,.92);
  --navstate-bg:rgba(7,21,35,.67);--navstate-started-bg:rgba(9,32,25,.68);--action-bg:#102233;--action-text:#eef5fa;
  --button-bg:rgba(8,22,35,.84);--button-text:#fff;--button-active:#18344b;--button-active-text:#fff;--limit-bg:#fff;--limit-text:#0b1621;
}
:root[data-theme="light"]{
  --speed-inner:#ffffff;--speed-core:#eaf2f6;--speed-border:rgba(12,155,115,.24);--speed-glow:rgba(12,155,115,.16);
  --speed-text:#122535;--speed-muted:#61717f;--rider-bg:rgba(255,255,255,.88);--rider-me-bg:rgba(226,243,255,.96);
  --navstate-bg:rgba(238,245,249,.9);--navstate-started-bg:rgba(224,249,241,.94);--action-bg:#f5f9fb;--action-text:#152532;
  --button-bg:rgba(255,255,255,.94);--button-text:#152532;--button-active:#dcecf3;--button-active-text:#123044;--limit-bg:#fff;--limit-text:#102030;
}
:root[data-theme="light"] .speed-card{border-width:2px;}
:root[data-theme="light"] .speed-ring{border-color:#d5e1e7;}
:root[data-theme="light"] .limit{box-shadow:0 2px 8px rgba(30,55,70,.16);}
:root[data-theme="light"] .pulse{box-shadow:0 0 0 4px rgba(12,155,115,.10),0 0 10px var(--green);}
:root[data-theme="light"] .handle:after{color:#38505f !important;}
:root[data-theme="light"] .voice-btn{box-shadow:0 12px 30px rgba(36,57,73,.16);}

/* The map controls and sensor dock remain visually separate from the navigation route. */
@media (max-width:899px){
  .weather-card,.accuracy-card{bottom:calc(var(--ride-lift) + 10px) !important;}
  .speed-card{right:10px !important;bottom:calc(var(--ride-lift) + 10px) !important;}
  .weather-card{left:10px !important;}
  .accuracy-card{right:10px !important;left:auto !important;}
  .voice-btn{right:10px !important;bottom:calc(var(--ride-lift) + 112px) !important;}
}
@media (min-width:900px){
  .weather-card{left:24px !important;right:auto !important;bottom:calc(var(--ride-lift) + 10px) !important;}
  .accuracy-card{right:24px !important;left:auto !important;bottom:calc(var(--ride-lift) + 10px) !important;}
  .speed-card{right:24px !important;bottom:calc(var(--ride-lift) + 10px) !important;}
  .voice-btn{right:24px !important;bottom:calc(var(--ride-lift) + 112px) !important;}
}
@media (min-width:1400px){
  .weather-card{left:32px !important;}
  .accuracy-card{right:32px !important;}
  .speed-card{right:32px !important;}
  .voice-btn{right:32px !important;}
}

/* ===== Ride mode: cinematic, recording-friendly navigation view ===== */
.weather-card.sensor-dock-left{
  left:10px !important;
  right:auto !important;
  bottom:calc(var(--ride-lift) + 10px) !important;
  z-index:18 !important;
  min-height:42px;
}
.weather-card .accuracy-inline{display:flex;align-items:center;gap:5px;min-width:0}
.accuracy-card{display:none !important;}
.speed-card{
  appearance:none;-webkit-appearance:none;border:2px solid var(--speed-border,rgba(57,231,190,.28));
  color:var(--speed-text,#fff);padding:0;cursor:pointer;touch-action:manipulation;
  right:10px !important;bottom:calc(var(--ride-lift) + 10px) !important;
  z-index:19 !important;transition:bottom .42s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1),opacity .25s,background .3s,border-color .3s,box-shadow .3s;
}
.speed-card:active{transform:scale(.94)}
.speed-card::after{content:'RIDE';position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);font-size:6px;letter-spacing:1.8px;color:var(--muted);opacity:.75;font-weight:800;pointer-events:none}
.ride-mode-banner{
  position:absolute;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:50;
  min-height:104px;border-radius:24px;padding:10px 46px 10px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;overflow:hidden;
  opacity:0;transform:translateY(28px) scale(.985);pointer-events:none;
  transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1),background .3s,border-color .3s,box-shadow .3s;
}
.ride-mode-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(44,230,170,.12),transparent 35%,rgba(55,143,255,.1));pointer-events:none}
.ride-mode-banner.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.ride-mode-main,.ride-mode-stats{position:relative;z-index:1}
.ride-mode-main{display:flex;align-items:center;gap:13px;min-width:0}
.ride-mode-speed strong{display:block;font-size:48px;line-height:.82;letter-spacing:-2px}
.ride-mode-speed span{display:block;font-size:8px;color:var(--muted);letter-spacing:1.4px;margin-top:5px;font-weight:800}
.ride-mode-divider{width:1px;height:48px;background:var(--line)}
.ride-mode-eta small{display:block;font-size:7px;letter-spacing:1.5px;color:var(--green);font-weight:900}
.ride-mode-eta b{display:block;font-size:23px;line-height:1.05;margin-top:3px}
.ride-mode-eta span{display:block;font-size:8px;color:var(--muted);margin-top:3px}
.ride-mode-stats{display:flex;align-items:center;gap:13px}
.ride-mode-stats span{min-width:45px;text-align:center}
.ride-mode-stats b{display:block;font-size:14px;line-height:1.05}
.ride-mode-stats small{display:block;font-size:6px;color:var(--muted);letter-spacing:1.2px;margin-top:4px;font-weight:800}
.ride-mode-exit{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--button-bg,rgba(8,22,35,.8));color:var(--button-text,#fff);font-size:18px;line-height:1;cursor:pointer;z-index:2}

/* Cinematic ride mode intentionally leaves only the directional banner and live stats. */
:root.ride-mode .destination-card,
:root.ride-mode .map-controls,
:root.ride-mode .map-type,
:root.ride-mode .weather-card,
:root.ride-mode .accuracy-card,
:root.ride-mode .speed-card,
:root.ride-mode .voice-btn,
:root.ride-mode .ride-panel,
:root.ride-mode .control-popup{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;transform:scale(.96) !important;}
:root.ride-mode .ride-mode-banner{visibility:visible}
:root.ride-mode .nav-card{z-index:60;box-shadow:0 20px 60px rgba(0,0,0,.28)}

/* Light-mode parity for every ride-mode surface. */
:root[data-theme="light"] .ride-mode-banner{background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(235,246,250,.96));color:var(--text);box-shadow:0 20px 60px rgba(35,58,74,.18),inset 0 1px 0 rgba(255,255,255,.95)}
:root[data-theme="light"] .ride-mode-exit{background:rgba(244,249,252,.96);color:var(--text)}
:root[data-theme="light"] .speed-card{color:var(--speed-text);}
:root[data-theme="light"] .speed-card::after{color:#61717f}
:root[data-theme="light"] .weather-card{background:rgba(255,255,255,.94);color:var(--text)}

@media (max-width:560px){
  .weather-card.sensor-dock-left{max-width:calc(100vw - 120px);padding:6px 8px;gap:5px}
  .weather-card b{font-size:9px}.weather-card small{font-size:6px}.sun{font-size:13px}
  .ride-mode-banner{left:7px;right:7px;min-height:96px;padding-left:11px;padding-right:42px;gap:7px;border-radius:21px}
  .ride-mode-speed strong{font-size:42px}.ride-mode-main{gap:9px}.ride-mode-eta b{font-size:19px}.ride-mode-stats{gap:7px}.ride-mode-stats span{min-width:35px}.ride-mode-stats b{font-size:11px}.ride-mode-stats small{font-size:5px;letter-spacing:.8px}
}
@media (max-width:390px){
  .weather-card.sensor-dock-left{max-width:calc(100vw - 105px)}
  .weather-card .divider:nth-of-type(2),.weather-card .accuracy-inline small{display:none}
  .ride-mode-stats span:nth-child(3){display:none}.ride-mode-speed strong{font-size:38px}.ride-mode-eta b{font-size:17px}
}
@media (min-width:900px){
  .weather-card.sensor-dock-left{left:24px !important;bottom:calc(var(--ride-lift) + 10px) !important}
  .speed-card{right:24px !important;bottom:calc(var(--ride-lift) + 10px) !important}
  .ride-mode-banner{left:50%;right:auto;transform:translate(-50%,28px) scale(.985);width:min(1100px,calc(100vw - 48px));bottom:18px}
  .ride-mode-banner.open{transform:translate(-50%,0) scale(1)}
}
@media (min-width:1400px){
  .weather-card.sensor-dock-left{left:32px !important}.speed-card{right:32px !important}
  .ride-mode-banner{width:min(1240px,calc(100vw - 64px))}
}

/* ===== RideFlow final polish: true theme parity + native map rotation + rider profiles ===== */
:root[data-theme="light"] .glass{
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,247,250,.88));
  border-color:rgba(15,35,55,.12);
  box-shadow:0 18px 50px rgba(27,56,80,.16),inset 0 1px 0 rgba(255,255,255,.96);
}
:root[data-theme="light"] .top-brand,
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .control-popup,
:root[data-theme="light"] .settings-sheet,
:root[data-theme="light"] .ride-panel,
:root[data-theme="light"] .nav-card,
:root[data-theme="light"] .destination-card,
:root[data-theme="light"] .weather-card,
:root[data-theme="light"] .ride-mode-banner{
  color:var(--text);
}
:root[data-theme="light"] .control-action,
:root[data-theme="light"] .mini-control,
:root[data-theme="light"] .control-setting,
:root[data-theme="light"] .settings-share,
:root[data-theme="light"] .setting-tile,
:root[data-theme="light"] .settings-trip-card,
:root[data-theme="light"] .device-box,
:root[data-theme="light"] .nav-state,
:root[data-theme="light"] .panel-actions button,
:root[data-theme="light"] .rider,
:root[data-theme="light"] .small-action,
:root[data-theme="light"] .map-btn,
:root[data-theme="light"] .voice-btn{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(238,246,249,.9));
  color:var(--text);
  border-color:rgba(15,35,55,.12);
}
:root[data-theme="light"] .nav-state.started{background:linear-gradient(145deg,rgba(230,252,244,.96),rgba(218,246,237,.92));}
:root[data-theme="light"] .rider.me{background:linear-gradient(145deg,#eaf6ff,#dcefff);border-color:rgba(50,143,255,.35)}
:root[data-theme="light"] .map-type{background:rgba(255,255,255,.96);border-color:rgba(15,35,55,.12)}
:root[data-theme="light"] .map-type button{color:var(--text)}
:root[data-theme="light"] .map-type button.active{background:#dcecf3;color:#123044}
:root[data-theme="light"] .popup-close,
:root[data-theme="light"] .modal-close{background:rgba(226,237,243,.9);color:var(--text);border-color:rgba(15,35,55,.12)}
:root[data-theme="light"] .settings-sheet .device-box>span{background:rgba(44,180,145,.10)}

/* Native Google Maps rotation control is intentionally enabled in JS. */
.gm-control-active[aria-label*="Rotate"],.gm-control-active[title*="Rotate"]{border-radius:12px!important;}

/* Rider cards are interactive profiles. */
.rider{appearance:none;-webkit-appearance:none;color:var(--text);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;background:var(--rider-bg,rgba(8,22,35,.72));}
.rider:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.rider:active{transform:scale(.97)}
.rider-profile-card{width:min(380px,calc(100vw - 28px));text-align:center;padding:22px 18px 18px}
.profile-avatar{width:72px;height:72px;margin:4px auto 10px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--blue);background:linear-gradient(145deg,#0c2133,#07121d);font-size:28px;box-shadow:0 12px 30px rgba(0,0,0,.2)}
:root[data-theme="light"] .profile-avatar{background:linear-gradient(145deg,#f3fbff,#dceff6)}
.profile-kicker{font-size:7px;letter-spacing:2px;color:var(--green);font-weight:900}.rider-profile-card h2{margin:4px 0 5px;font-size:23px}.profile-status{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(44,230,170,.10);border:1px solid rgba(44,230,170,.18);color:var(--green);font-size:7px;font-weight:900;letter-spacing:1px}
.profile-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.profile-stat-grid>div{padding:12px 8px;border-radius:14px;border:1px solid var(--line);background:var(--panel2)}.profile-stat-grid span{display:block;color:var(--muted);font-size:7px;text-transform:uppercase;letter-spacing:1px}.profile-stat-grid b{display:block;margin-top:4px;font-size:13px}.profile-device{margin-top:9px;padding:9px;border-radius:11px;background:var(--panel2);color:var(--muted);font-size:8px}

/* Ride mode ETA: speed is dominant, timing is compact and glanceable. */
.ride-mode-speed strong{font-size:56px!important;letter-spacing:-2.5px}
.ride-mode-eta b{font-size:18px!important;line-height:1.05}
.ride-mode-eta span{font-size:7px!important;display:block}
.ride-mode-eta span strong{font-size:9px;color:var(--text);margin-left:3px}
@media(max-width:560px){.ride-mode-speed strong{font-size:50px!important}.ride-mode-eta b{font-size:16px!important}.ride-mode-eta span{font-size:6px!important}}