:root{color-scheme:dark;--vynk-blue: #2f80ff;--electric-blue: #4da3ff;--cyan-glow: #5ac8fa;--indigo-accent: #6c63ff;--connected-green: #32d583;--warning-amber: #f5b546;--critical-red: #ef5b5b;--bg-1: #0b0f14;--bg-2: #111827;--surface-1: #151d2a;--surface-2: #1b2432;--surface-3: #233044;--divider: #2a3648;--text-primary: #f3f6fb;--text-secondary: #b7c1d1;--text-tertiary: #7f8da3;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--radius-control: 12px;--radius-card: 16px;--radius-hero: 20px;--radius-pill: 999px;--motion-micro: .14s;--motion-panel: .22s;--motion-modal: .26s;--car-touch-min: 56px;--native-safe-bottom: 86px;--focus-ring: 0 0 0 3px rgb(77 163 255 / 45%);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-variant-numeric:tabular-nums}@media(prefers-reduced-motion:reduce){:root{--motion-micro: 0ms;--motion-panel: 0ms;--motion-modal: 0ms}}:root[data-contrast=high]{--surface-1: #101721;--surface-2: #172333;--divider: #64748b;--text-secondary: #e2e8f0;--text-tertiary: #cbd5e1}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg-1);color:var(--text-primary)}body{min-width:760px;min-height:440px;font:15px/1.4 Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;user-select:none}button,select,input{color:inherit;font:inherit}button{border:0;cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:none;box-shadow:var(--focus-ring)}button:active{transform:scale(.98)}[hidden]{display:none!important}.app-shell{position:relative;display:grid;grid-template:58px 1fr / 96px 1fr;width:100%;height:100%;padding-bottom:var(--native-safe-bottom);background:radial-gradient(circle at 62% -15%,#19345d 0,transparent 37%),var(--bg-1)}.sidebar{z-index:30;grid-row:1 / 3;display:flex;flex-direction:column;gap:12px;padding:14px 10px;border-right:1px solid var(--divider);background:#0b0f14eb;backdrop-filter:blur(20px)}.vynk-wordmark{min-height:48px;padding:0;color:var(--electric-blue);background:transparent;font-size:19px;font-weight:850;letter-spacing:.12em}.sidebar-items{display:flex;flex:1;flex-direction:column;gap:6px}.sidebar-button{display:flex;min-height:var(--car-touch-min);flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px;border-radius:var(--radius-control);color:var(--text-tertiary);background:transparent;transition:color var(--motion-micro),background var(--motion-micro)}.sidebar-button:hover,.sidebar-button.active{color:var(--text-primary);background:var(--surface-2)}.sidebar-button.active{color:var(--electric-blue);box-shadow:inset 3px 0 var(--vynk-blue)}.sidebar-label{max-width:78px;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.icon{width:23px;height:23px;fill:currentColor}.topbar{z-index:25;grid-column:2;display:flex;align-items:center;justify-content:flex-end;padding:0 18px;border-bottom:1px solid rgb(42 54 72 / 70%);background:#0b0f14d1;backdrop-filter:blur(18px)}.topbar-status{display:flex;align-items:center;gap:14px;color:var(--text-secondary);font-size:13px}.topbar-time{color:var(--text-primary);font-size:17px}.status-pill,.provider-pill,.tester-marker{display:inline-flex;min-height:26px;align-items:center;padding:3px 10px;border:1px solid var(--divider);border-radius:var(--radius-pill);background:var(--surface-2);font-size:11px;font-weight:700;letter-spacing:.04em}.status-pill[data-status=connected]{color:var(--connected-green);border-color:#32d58361}.status-pill[data-status=warning]{color:var(--warning-amber)}.status-pill[data-status=offline]{color:var(--text-tertiary)}.tester-marker{min-height:34px;color:#06101a;border-color:var(--cyan-glow);background:var(--cyan-glow);font-weight:900;letter-spacing:.08em}.surface-host{position:relative;grid-column:2;grid-row:2;min-width:0;min-height:0;overflow:hidden}.surface{position:absolute;overflow:hidden;border:1px solid var(--divider);border-radius:var(--radius-card);background:linear-gradient(145deg,#1b2432f5,#111827f5);box-shadow:0 12px 30px #0003;transition:left var(--motion-panel),top var(--motion-panel),width var(--motion-panel),height var(--motion-panel)}.surface[data-failure=true]{border-color:var(--critical-red)}.surface-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 0}.surface-title{margin:0;font-size:clamp(17px,1.55vw,24px);line-height:1.15}.surface-subtitle{margin:8px 0 0;color:var(--text-secondary)}.surface-meta{color:var(--text-tertiary);font-size:12px}.metric-grid{display:grid;gap:10px}.metric{min-width:0;padding:12px;border:1px solid rgb(42 54 72 / 80%);border-radius:12px;background:#0b0f145c}.metric-label{display:block;color:var(--text-tertiary);font-size:11px;text-transform:uppercase;letter-spacing:.05em}.metric-value{margin-top:3px;font-size:clamp(17px,1.8vw,28px)}.metric-unit{margin-left:3px;color:var(--text-tertiary);font-size:11px}.mirror-video-host,.mirror-video-host>*{width:100%;height:100%}.mirror-video-host canvas,.mirror-video-host video{display:block;width:100%;height:100%;object-fit:contain;background:#05070a}.mirror-state,.privacy-curtain{position:absolute;inset:0;display:grid;place-content:center;padding:32px;text-align:center;background:radial-gradient(circle,#18263b,#090d13 70%)}.privacy-curtain{gap:10px;z-index:5}.privacy-icon{color:var(--electric-blue);font-size:42px}.privacy-title{font-size:26px}.privacy-copy{color:var(--text-secondary)}.navigation-surface{background:#101823}.route-map{position:absolute;inset:0}.maneuver-card{position:absolute;top:14px;left:14px;display:flex;max-width:min(62%,560px);align-items:center;gap:16px;padding:14px 18px;border:1px solid rgb(77 163 255 / 30%);border-radius:var(--radius-card);background:#0b0f14e0;backdrop-filter:blur(18px)}.maneuver-arrow{color:var(--electric-blue);font-size:clamp(28px,4vw,52px);line-height:1}.maneuver-distance{display:block;color:var(--electric-blue);font-size:13px}.maneuver-text{max-width:420px;margin:1px 0 0;overflow:hidden;font-size:clamp(16px,2vw,27px);text-overflow:ellipsis;white-space:nowrap}.destination-strip{position:absolute;right:14px;bottom:78px;left:14px;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:#0b0f14d9;backdrop-filter:blur(14px)}.destination-label{color:var(--text-tertiary);font-size:11px;text-transform:uppercase}.destination-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.route-footer{position:absolute;right:14px;bottom:14px;left:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.route-footer .metric{padding:8px 10px;background:#0b0f14e0}.route-footer .metric-value{font-size:clamp(14px,1.4vw,20px)}.navigation-empty{position:absolute;inset:0;display:grid;place-content:center;padding:25px;text-align:center;background:#0a0f16b3}.safety-bubble{position:absolute;top:14px;right:14px;max-width:38%;padding:10px 15px;border:1px solid var(--warning-amber);border-radius:var(--radius-pill);color:var(--warning-amber);background:#1e1607e5;font-weight:700}.safety-bubble[data-severity=warning]{color:#fff;border-color:var(--critical-red);background:#521414eb}.safety-bubble[data-size=large]{padding:15px 20px;font-size:18px}.media-surface{display:flex;flex-direction:column}.media-content{display:flex;min-height:0;flex:1;align-items:center;gap:18px;padding:16px 18px}.media-art{width:min(38%,230px);aspect-ratio:1;flex:none;border-radius:var(--radius-card);background:linear-gradient(135deg,var(--indigo-accent),var(--vynk-blue));background-position:center;background-size:cover;box-shadow:0 14px 40px #00000059}.media-copy{min-width:0}.media-track{display:block;overflow:hidden;font-size:clamp(22px,3.2vw,42px);text-overflow:ellipsis;white-space:nowrap}.media-artist{display:block;overflow:hidden;margin-top:8px;color:var(--text-secondary);font-size:clamp(14px,1.6vw,21px);text-overflow:ellipsis;white-space:nowrap}.media-progress{height:4px;margin:0 20px;overflow:hidden;border-radius:4px;background:var(--divider)}.media-progress-value{width:0;height:100%;background:var(--electric-blue)}.media-controls{display:flex;justify-content:center;gap:14px;padding:14px 18px 18px}.round-button{display:grid;width:var(--car-touch-min);height:var(--car-touch-min);place-content:center;border-radius:50%;color:var(--text-primary);background:var(--surface-3)}.media-toggle{color:#07111d;background:var(--text-primary)}.media-previous .icon{transform:rotate(180deg)}.parked-banner{position:absolute;top:14px;right:14px;padding:6px 10px;border-radius:var(--radius-pill);color:var(--warning-amber);background:#f5b5461f;font-size:11px}.vehicle-metrics{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 18px}.vehicle-surface>.surface-meta{display:block;padding:0 18px 14px}.driver-surface{display:grid;grid-template-columns:1.05fr .4fr 1.6fr 1fr;align-items:center;gap:12px;padding:15px 20px}.driver-speed{font-size:clamp(42px,7vw,88px);line-height:.9}.driver-speed-unit{margin-left:6px;color:var(--text-tertiary)}.gear-block{text-align:center}.driver-gear{display:block;color:var(--electric-blue);font-size:clamp(32px,5vw,60px)}.driver-route-block{min-width:0;display:grid;grid-template:auto auto / 52px 1fr;align-items:center}.driver-route-block .maneuver-arrow{grid-row:1 / 3}.driver-maneuver{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.driver-distance{color:var(--electric-blue)}.driver-route-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.drive-surface{display:grid;grid-template:auto 1fr auto auto / 1fr}.drive-hero{display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,80px)}.drive-hero-speed{font-size:clamp(68px,11vw,138px);line-height:.8;letter-spacing:-.06em}.drive-speed-unit{margin-left:8px;color:var(--text-tertiary)}.drive-state{display:grid;gap:6px}.drive-hero-gear{color:var(--electric-blue);font-size:clamp(38px,6vw,76px)}.drive-soc{font-size:clamp(20px,2.4vw,33px)}.drive-range{color:var(--text-secondary)}.drive-turn-card,.drive-destination-card,.drive-safety-card{display:flex;min-width:0;align-items:center;gap:12px;margin:5px 16px;padding:11px 14px;border:1px solid var(--divider);border-radius:12px;background:#0b0f146b}.drive-next-turn,.drive-destination{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drive-route-summary{margin-left:auto;color:var(--text-secondary)}.drive-safety-card{border-color:#f5b54647}.speed-limit-sign{display:grid;width:58px;height:58px;flex:none;place-content:center;border:4px solid var(--critical-red);border-radius:50%;background:#fff;color:#111;text-align:center}.speed-limit-label{display:none}.speed-limit-value{font-size:22px}.drive-quick-controls{display:flex;gap:7px;padding:8px 16px 14px}.drive-quick-controls button,.secondary-button,.primary-button{min-height:var(--car-touch-min);padding:0 18px;border-radius:var(--radius-control);background:var(--surface-3)}.primary-button{color:#06101a;background:var(--electric-blue);font-weight:800}.tpms-vehicle{position:relative;height:calc(100% - 48px);margin:8px 16px 16px}.vehicle-silhouette{position:absolute;inset:13% 33%;display:grid;place-content:center;border:2px solid var(--divider);border-radius:42% 42% 28% 28%;color:var(--text-tertiary);font-size:10px}.tire{position:absolute;width:31%;color:var(--text-secondary);font-size:10px}.tire-value{display:block;color:var(--text-primary);font-size:clamp(11px,1.4vw,17px)}.tire[data-warning=warning] .tire-value{color:var(--critical-red)}.tire[data-warning=attention] .tire-value{color:var(--warning-amber)}.tire-frontLeft{top:15%;left:0}.tire-frontRight{top:15%;right:0;text-align:right}.tire-rearLeft{bottom:15%;left:0}.tire-rearRight{right:0;bottom:15%;text-align:right}.launcher-surface{padding:20px}.launcher-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}.launcher-button{min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px solid var(--divider);border-radius:var(--radius-card);background:var(--surface-2)}.launcher-button:hover{border-color:var(--electric-blue);background:var(--surface-3)}.launcher-button .icon{width:32px;height:32px;color:var(--electric-blue)}.diagnostics-metrics{grid-template-columns:repeat(3,minmax(0,1fr));padding:16px}.clock-surface,.weather-surface,.assist-surface,.briefing-surface,.trip-surface{display:grid;place-content:center;padding:20px;text-align:center}.clock-time,.weather-temperature{font-size:clamp(38px,7vw,88px)}.clock-date,.weather-state{color:var(--text-secondary)}.home-quick-actions{z-index:20;position:absolute;right:24px;bottom:calc(var(--native-safe-bottom) + 18px);left:120px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;pointer-events:none}.home-quick-button{min-height:70px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgb(77 163 255 / 22%);border-radius:var(--radius-card);color:var(--text-primary);background:#151d2ae0;box-shadow:0 14px 32px #00000040;backdrop-filter:blur(16px);pointer-events:auto}.home-quick-button .icon{color:var(--electric-blue)}.overlay-host{position:absolute;inset:0;z-index:100;pointer-events:none}.overlay-host>*{pointer-events:auto}.audio-resume-prompt{position:absolute;z-index:180;right:22px;bottom:calc(var(--native-safe-bottom) + 18px);min-height:var(--car-touch-min);max-width:min(420px,48vw);padding:10px 16px;border:1px solid rgb(255 184 77 / 55%);border-radius:var(--radius-pill);color:var(--text-primary);background:#442b0af5;box-shadow:0 12px 32px #00000059}.audio-resume-prompt[hidden]{display:none}.media-action-state{min-height:24px;color:var(--warning-amber);text-align:center}.media-action-state[hidden]{display:none}.modal-panel{position:absolute;top:0;right:0;width:min(560px,58vw);height:calc(100% - var(--native-safe-bottom));overflow:hidden;border-left:1px solid var(--divider);background:#0e141dfa;box-shadow:-20px 0 50px #0006;backdrop-filter:blur(28px);animation:panel-in var(--motion-panel) ease-out}@keyframes panel-in{0%{transform:translate(24px);opacity:0}}.panel-header{display:flex;height:66px;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--divider)}.panel-title{margin:0;font-size:22px}.panel-close{min-width:var(--car-touch-min);min-height:44px;padding:0 12px;border-radius:var(--radius-control);color:var(--text-secondary);background:var(--surface-2)}.settings-body{height:calc(100% - 66px);overflow:auto;padding:12px 18px 32px}.settings-section{padding:8px 0 18px}.settings-section-title{margin:8px 4px;color:var(--electric-blue);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.settings-row{display:flex;min-height:var(--car-touch-min);width:100%;align-items:center;justify-content:space-between;gap:18px;padding:8px 12px;border-bottom:1px solid rgb(42 54 72 / 60%);color:var(--text-primary);background:transparent;text-align:left}.settings-label{min-width:0;flex:1}.settings-select{max-width:52%;min-height:42px;padding:0 30px 0 10px;border:1px solid var(--divider);border-radius:10px;background:var(--surface-2)}.settings-toggle{width:48px;height:27px;appearance:none;border-radius:var(--radius-pill);background:var(--surface-3);transition:background var(--motion-micro)}.settings-toggle:after{content:"";display:block;width:21px;height:21px;margin:3px;border-radius:50%;background:#fff;transition:transform var(--motion-micro)}.settings-toggle:checked{background:var(--vynk-blue)}.settings-toggle:checked:after{transform:translate(21px)}.settings-range{min-width:130px;accent-color:var(--vynk-blue)}.settings-output,.settings-value{color:var(--text-secondary)}.settings-chevron{color:var(--text-tertiary);font-size:28px}.pairing-content{height:calc(100% - 66px);display:flex;overflow:auto;flex-direction:column;align-items:center;padding:20px 32px 40px;text-align:center}.pairing-lead{color:var(--text-secondary)}.pairing-qr{width:min(240px,38vh);aspect-ratio:1;margin:8px;padding:10px;border-radius:14px;background:#fff;image-rendering:pixelated}.pairing-or{margin-top:8px;color:var(--text-tertiary);font-size:12px}.pairing-code{margin:3px 0;color:var(--electric-blue);font-size:38px;letter-spacing:.14em}.pairing-expiration{color:var(--warning-amber)}.pairing-steps{width:100%;margin:18px 0;padding-left:28px;color:var(--text-secondary);text-align:left}.pairing-step{padding:4px}.pairing-tester-note{padding:10px 12px;border-radius:10px;color:var(--text-tertiary);background:var(--surface-1);font-size:12px}.pairing-success-mark{display:grid;width:76px;height:76px;place-content:center;margin:22px 0;border-radius:50%;color:#06110c;background:var(--connected-green);font-size:38px}.pairing-detail{display:flex;width:100%;min-height:52px;align-items:center;gap:18px;border-bottom:1px solid var(--divider);text-align:left}.diagnostics-hud{position:absolute;top:72px;right:16px;width:min(400px,48vw);overflow:hidden;border:1px solid rgb(90 200 250 / 35%);border-radius:var(--radius-card);background:#050a11f0;box-shadow:0 16px 48px #0000007a;backdrop-filter:blur(18px)}.hud-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--divider);color:var(--cyan-glow)}.hud-close{width:40px;height:40px;border-radius:9px;background:var(--surface-2)}.hud-grid{display:grid;grid-template-columns:repeat(2,1fr)}.hud-row{display:flex;min-height:37px;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px;border-right:1px solid rgb(42 54 72 / 50%);border-bottom:1px solid rgb(42 54 72 / 50%)}.hud-label{color:var(--text-tertiary);font-size:10px}.hud-value{font-size:12px}.hud-copy{width:calc(100% - 20px);min-height:46px;margin:10px}.fatal-state{width:100%;height:100%;display:grid;place-content:center;padding:30px;text-align:center;background:radial-gradient(circle,#1b2d49,var(--bg-1) 70%)}.fatal-state h1{color:var(--electric-blue);letter-spacing:.14em}.fatal-state p{max-width:640px;color:var(--text-secondary)}.text-hidden{font-size:0}@media(max-width:980px),(max-height:600px){body{font-size:13px}.app-shell{grid-template:48px 1fr / 78px 1fr}.sidebar{padding:8px 6px}.sidebar-button{min-height:48px}.sidebar-label{font-size:9px}.topbar-phone,.topbar-network{display:none}.topbar-status{gap:7px}.surface{border-radius:11px}.home-quick-actions{left:95px;right:14px;gap:7px}.quick-label{font-size:11px}.modal-panel{width:min(590px,72vw)}.route-footer .metric-label{display:none}}:root[data-reduce-motion=true] *,:root[data-reduce-motion=true] *:before,:root[data-reduce-motion=true] *:after{animation-duration:0ms!important;transition-duration:0ms!important}