: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{display:grid;min-height:58px;place-items:center;padding:0;background:transparent}.vynk-wordmark-image{display:block;width:58px;height:58px;border-radius:14px;object-fit:contain}.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}.app-shell[data-controls-hidden=true] .sidebar,.app-shell[data-controls-hidden=true] .topbar,.app-shell[data-controls-hidden=true] .layout-quick-switch{opacity:0;pointer-events:none}.surface-host[data-mode=CAR],.surface-host[data-mode=SMART_SPLIT]{margin-bottom:92px}.surface{position:absolute;overflow:hidden;container-type:size;border:1px solid var(--divider);border-radius:var(--radius-card);background:linear-gradient(145deg,#1b2432f5,#111827f5);box-shadow:0 12px 30px #0003;transition:transform var(--motion-panel),width var(--motion-panel),height var(--motion-panel)}.surface[data-interactive=true]{will-change:transform,width,height;transition:none}.surface[data-failure=true]{border-color:var(--critical-red)}.surface[data-freshness=stale]{border-color:#f5b5467a}.surface[data-freshness=expired]{border-color:#7f8da38a}.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)}.pairing-brand-mark{display:block;width:72px;height:72px;margin:0 auto 12px;border-radius:18px;object-fit:contain}.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-surface[data-content-fit=FILL] .mirror-video-host canvas,.mirror-surface[data-content-fit=FILL] .mirror-video-host video{object-fit:cover}.mirror-surface[data-content-fit=FIT] .mirror-video-host canvas,.mirror-surface[data-content-fit=FIT] .mirror-video-host video{object-fit:contain}.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;opacity:1;transform:scale(1);transform-origin:center;transition:opacity .18s ease-out,transform .18s ease-out,visibility 0ms linear}.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)}.lane-guidance{display:flex;gap:6px;margin-top:8px;align-items:center}.lane-chip{display:inline-grid;min-width:34px;min-height:30px;place-items:center;padding:2px 7px;border:1px solid rgb(154 168 190 / 28%);border-radius:8px;color:var(--text-secondary);background:#111924db;font-size:21px;line-height:1}.lane-chip[data-recommended=true]{border-color:#4da3ffb8;color:#fff;background:#2f80ff57;box-shadow:inset 0 -2px #4da3ff9e}.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;z-index:3;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)}.route-distance-control{min-height:44px;text-align:left;transition:border-color var(--motion-micro),background var(--motion-micro)}.route-distance-control:hover:not(:disabled){border-color:#4da3ff9e;background:#142a46eb}.route-distance-control:disabled{cursor:default;opacity:.82}.route-distance-control[data-camera-mode=overview],.route-distance-control[data-camera-mode=free]{border-color:#4da3ff94}.route-age{flex:none;color:var(--warning-amber);font-size:11px}.route-overview-summary{position:absolute;z-index:4;right:14px;bottom:142px;left:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;border:1px solid rgb(77 163 255 / 30%);border-radius:12px;background:#0b0f14e0;backdrop-filter:blur(14px)}.route-overview-copy{min-width:0;overflow:hidden;color:var(--text-secondary);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.navigation-status{position:absolute;z-index:4;top:14px;right:14px;display:flex;align-items:center;gap:9px;max-width:min(34%,260px);padding:7px 11px;border:1px solid rgb(77 163 255 / 28%);border-radius:var(--radius-pill);background:#0b0f14d1;color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.03em;backdrop-filter:blur(14px)}.navigation-status-copy{min-width:0;overflow:hidden;text-overflow:ellipsis}.navigation-status-action{flex:none;color:#f3f6fb;font-weight:800;text-decoration:underline;text-underline-offset:2px}.navigation-empty{position:absolute;z-index:1;inset:0;display:grid;place-content:center;padding:25px;text-align:center;background:#0a0f1694;backdrop-filter:blur(3px)}.navigation-empty[data-state=provider-loading]{background:#0a0f16b8}.navigation-empty[data-state=no-route] .surface-subtitle{max-width:440px}.navigation-shortcut{display:inline-flex;min-height:var(--car-touch-min);align-items:center;justify-content:center;margin:14px auto 0;padding:0 16px;border:1px solid rgb(77 163 255 / 34%);border-radius:var(--radius-pill);color:#f3f6fb;background:#142235d6;text-decoration:none}.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}@container (max-width: 599px){.navigation-surface .maneuver-card{right:14px;max-width:none}.navigation-surface .navigation-status{top:98px;right:14px;left:14px;max-width:none}.navigation-surface .safety-bubble{top:98px;right:14px;left:14px;max-width:none;overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.navigation-surface .destination-strip{bottom:134px}.navigation-surface .route-footer{grid-template-columns:repeat(2,minmax(0,1fr))}}.navigation-surface .provider-attribution{max-width:min(42%,260px);overflow:hidden;flex:none;text-overflow:ellipsis;white-space:nowrap}.navigation-surface[data-responsive-variant=STANDARD_MAP] .maneuver-card{max-width:calc(100% - 28px)}.navigation-surface[data-responsive-variant=STANDARD_MAP] .lane-guidance,.navigation-surface[data-responsive-variant=STANDARD_MAP] .destination-label,.navigation-surface[data-responsive-variant=STANDARD_MAP] .destination-name{display:none}.navigation-surface[data-responsive-variant=STANDARD_MAP] .destination-strip{inset:auto 12px 68px auto;padding:0;background:transparent;backdrop-filter:none}.navigation-surface[data-responsive-variant=STANDARD_MAP] .route-footer{grid-template-columns:repeat(3,minmax(0,1fr))}.navigation-surface[data-responsive-variant=STANDARD_MAP] .route-footer .metric:nth-child(4){display:none}.navigation-surface:is([data-responsive-variant=COMPACT],[data-responsive-variant=ROUTE_BAR]){background:radial-gradient(circle at 22% 5%,#264167d9,#0d141efa 68%)}.navigation-surface:is([data-responsive-variant=COMPACT],[data-responsive-variant=ROUTE_BAR]) .route-map{visibility:hidden;opacity:0;transform:scale(.99);pointer-events:none;transition-delay:0ms,0ms,.18s}.navigation-surface[data-responsive-variant=COMPACT] .maneuver-card{right:12px;left:12px;max-width:none;padding:12px 14px;border-color:#4da3ff42;background:#0b0f1494}.navigation-surface[data-responsive-variant=COMPACT] .maneuver-arrow{font-size:clamp(30px,8cqw,48px)}.navigation-surface[data-responsive-variant=COMPACT] .maneuver-text{font-size:clamp(15px,5cqw,23px)}.navigation-surface[data-responsive-variant=COMPACT] .lane-guidance{display:none}.navigation-surface[data-responsive-variant=COMPACT] .destination-strip{right:12px;bottom:66px;left:12px;padding:8px 10px;background:#0b0f1485}.navigation-surface[data-responsive-variant=COMPACT] .destination-label{display:none}.navigation-surface[data-responsive-variant=COMPACT] .route-footer{right:12px;bottom:10px;left:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.navigation-surface[data-responsive-variant=COMPACT] .route-footer .metric:nth-child(3),.navigation-surface[data-responsive-variant=COMPACT] .route-footer .metric:nth-child(4){display:none}.navigation-surface[data-responsive-variant=COMPACT] .route-footer .metric{min-height:46px;padding:6px 9px}.navigation-surface[data-responsive-variant=COMPACT] .navigation-status{inset:auto 12px 118px;max-width:none}.navigation-surface[data-responsive-variant=COMPACT] .safety-bubble{inset:auto 12px 118px;max-width:none;overflow:hidden;padding:6px 10px;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.navigation-surface[data-responsive-variant=ROUTE_BAR]{min-height:74px;border-radius:14px}.navigation-surface[data-responsive-variant=ROUTE_BAR] .maneuver-card{inset:6px 252px 6px 8px;max-width:none;gap:9px;padding:6px 10px;overflow:hidden;border:0;background:transparent;backdrop-filter:none}.navigation-surface[data-responsive-variant=ROUTE_BAR] .maneuver-arrow{font-size:clamp(25px,5cqh,36px)}.navigation-surface[data-responsive-variant=ROUTE_BAR] .maneuver-distance{display:inline;margin-right:8px;font-size:12px}.navigation-surface[data-responsive-variant=ROUTE_BAR] .maneuver-text{display:inline;max-width:none;font-size:clamp(14px,2.2cqh,20px)}.navigation-surface[data-responsive-variant=ROUTE_BAR] .lane-guidance,.navigation-surface[data-responsive-variant=ROUTE_BAR] .safety-bubble{display:none}.navigation-surface[data-responsive-variant=ROUTE_BAR] .destination-strip{inset:6px 8px 6px auto;width:124px;justify-content:flex-end;padding:5px;background:transparent;backdrop-filter:none}.navigation-surface[data-responsive-variant=ROUTE_BAR] .destination-label,.navigation-surface[data-responsive-variant=ROUTE_BAR] .destination-name{display:none}.navigation-surface[data-responsive-variant=ROUTE_BAR] .provider-attribution{max-width:100%;padding:2px 7px;font-size:9px}.navigation-surface[data-responsive-variant=ROUTE_BAR] .route-footer{inset:6px 136px 6px auto;width:220px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.navigation-surface[data-responsive-variant=ROUTE_BAR] .route-footer .metric{height:100%;display:none;place-content:center;padding:5px 8px}.navigation-surface[data-responsive-variant=ROUTE_BAR] .route-footer .metric:nth-child(-n+2){display:grid}.navigation-surface[data-responsive-variant=ROUTE_BAR] .route-footer .metric-label{display:none}.navigation-surface[data-responsive-variant=ROUTE_BAR] .maneuver-card{right:364px}.navigation-surface[data-responsive-variant=ROUTE_BAR] .navigation-empty{justify-content:start;padding:10px 16px;text-align:left}.navigation-surface[data-responsive-variant=ROUTE_BAR] .navigation-empty h2,.navigation-surface[data-responsive-variant=ROUTE_BAR] .navigation-empty p{margin:0}.navigation-surface[data-responsive-variant=ROUTE_BAR] .navigation-empty p{color:var(--text-tertiary);font-size:11px}.navigation-surface[data-responsive-variant=ROUTE_BAR] .navigation-status{top:6px;right:8px;left:auto;max-width:124px;padding:4px 7px;font-size:9px;text-align:right}@container (max-width: 479px){.navigation-surface[data-responsive-variant=ROUTE_BAR] .maneuver-card{right:246px}.navigation-surface[data-responsive-variant=ROUTE_BAR] .route-footer{right:88px;width:152px}.navigation-surface[data-responsive-variant=ROUTE_BAR] .destination-strip{width:74px}.navigation-surface[data-responsive-variant=ROUTE_BAR] .navigation-status{max-width:74px}.navigation-surface[data-responsive-variant=ROUTE_BAR] .maneuver-text{font-size:13px}}.navigation-surface[data-transient-overview=true]{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:none!important;z-index:65!important;border-radius:var(--radius-card)!important;box-shadow:0 22px 70px #0000009e!important}.surface-host[data-layout*=turn-peek] .navigation-surface,.navigation-surface.turn-peek{transition-duration:var(--motion-panel);transition-timing-function:ease-out}.surface[data-snap]:is(.navigation-surface,.mirror-surface){border-color:#4da3ff66;background-color:#0c121bf0;box-shadow:0 18px 48px #0000007a,0 0 0 1px #ffffff0a;backdrop-filter:blur(18px)}.surface[data-snap].navigation-surface:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#080c120f;pointer-events:none}.layout-editor{position:absolute;inset:0;z-index:70;pointer-events:none}.layout-editor>*{pointer-events:auto}.split-divider{position:absolute;top:12px;bottom:12px;width:48px;padding:0;transform:translate(-50%);touch-action:none;cursor:col-resize;background:transparent}.split-divider:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:4px;transform:translate(-50%);border-radius:var(--radius-pill);background:var(--electric-blue);box-shadow:0 0 0 6px #2f80ff29,0 0 22px #2f80ff73}.split-divider:after{content:"↔";position:absolute;top:50%;left:50%;display:grid;width:42px;height:42px;place-content:center;transform:translate(-50%,-50%);border:1px solid rgb(255 255 255 / 20%);border-radius:50%;color:#07111d;background:var(--electric-blue);box-shadow:0 10px 24px #00000059;font-size:18px;font-weight:900}.floating-move-handle,.floating-resize-handle{position:absolute;padding:0;touch-action:none;background:transparent}.floating-move-handle{z-index:1;cursor:move;border:2px solid var(--electric-blue);border-radius:var(--radius-card);box-shadow:inset 0 0 0 4px #2f80ff1f}.floating-move-handle:before{content:"•••";position:absolute;top:7px;left:50%;min-width:48px;padding:2px 9px;transform:translate(-50%);border-radius:var(--radius-pill);color:var(--text-primary);background:#050a11e0;letter-spacing:.15em}.floating-resize-handle{z-index:2;width:58px;height:58px;transform:translate(-100%,-100%);clip-path:polygon(0 100%,100% 0,100% 100%);cursor:nwse-resize;background:linear-gradient(135deg,transparent 66%,var(--electric-blue) 67%)}.layout-editor-actions{position:absolute;right:18px;bottom:18px;display:flex;gap:8px;padding:7px;border:1px solid rgb(77 163 255 / 30%);border-radius:var(--radius-card);background:#0b0f14f0;box-shadow:0 14px 34px #00000061;backdrop-filter:blur(18px)}.layout-editor-actions .split-control{min-height:var(--car-touch-min)}.layout-editor-actions .split-control:last-child{color:#07111d;border-color:var(--electric-blue);background:var(--electric-blue)}.layout-coachmark{position:absolute;z-index:68;bottom:16px;left:50%;min-height:44px;max-width:min(460px,calc(100% - 32px));padding:9px 16px;transform:translate(-50%);border:1px solid rgb(77 163 255 / 32%);border-radius:var(--radius-pill);color:var(--text-secondary);background:#0b0f14f0;box-shadow:0 12px 30px #0000005c}.surface-host[data-editing=true] .surface{outline:1px solid rgb(77 163 255 / 26%);outline-offset:-4px}.media-surface{display:flex;flex-direction:column}.media-surface .surface-header{padding-right:168px}.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;max-width:150px;overflow:hidden;padding:6px 10px;border-radius:var(--radius-pill);color:var(--warning-amber);background:#f5b5461f;font-size:11px;text-overflow:ellipsis;white-space:nowrap}@container (max-width: 359px){.media-surface .surface-header{align-items:flex-start;padding:12px 14px 0}.media-surface .surface-title{max-width:118px;font-size:18px}.media-surface .media-state{padding-top:3px;font-size:11px}.media-surface .parked-banner{display:none}.media-surface .media-content{gap:10px;padding:8px 14px}.media-surface .media-art{width:64px;border-radius:10px}.media-surface .media-track{font-size:19px}.media-surface .media-artist{margin-top:2px;font-size:12px}.media-surface .media-progress{margin:0 14px}.media-surface .media-controls{gap:8px;padding:8px 12px 10px}.media-surface .round-button{width:44px;height:44px}}.vehicle-metrics{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 18px}.vehicle-surface>.surface-meta{display:block;padding:0 18px 14px}@container (max-height: 299px){.vehicle-surface .surface-header{padding:12px 14px 0}.vehicle-surface .vehicle-metrics{gap:6px;padding:8px 14px 6px}.vehicle-surface .metric{padding:8px 10px}.vehicle-surface>.surface-meta{padding:0 14px 8px;font-size:10px}}@container (max-height: 199px){.vehicle-surface .vehicle-metrics{grid-template-columns:repeat(4,minmax(0,1fr));padding-top:6px}.vehicle-surface .metric{padding:7px}.vehicle-surface .metric-label{font-size:9px}.vehicle-surface .metric-value{font-size:17px}.vehicle-surface>.surface-meta{overflow:hidden;padding-bottom:5px;text-overflow:ellipsis;white-space:nowrap}}.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;flex-wrap:wrap;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)}.split-controls{z-index:45;position:absolute;right:18px;bottom:calc(var(--native-safe-bottom) + 14px);left:114px;display:flex;min-width:0;gap:8px;padding:8px;overflow-x:auto;border:1px solid rgb(77 163 255 / 25%);border-radius:var(--radius-card);background:#0b0f14e5;box-shadow:0 14px 36px #00000052;backdrop-filter:blur(18px);scrollbar-width:none}.split-controls::-webkit-scrollbar{display:none}.split-control,.layout-control{min-width:max-content;min-height:var(--car-touch-min);padding:0 16px;border:1px solid var(--divider);border-radius:var(--radius-control);color:var(--text-secondary);background:var(--surface-2);font-size:12px;font-weight:700}.split-control:first-child{color:var(--text-primary);border-color:#ef5b5b47}.split-control.active,.layout-control.active{color:#06101a;border-color:var(--electric-blue);background: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}.pairing-panel{top:58px;height:calc(100% - 58px - var(--native-safe-bottom))}@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}.split-controls{right:12px;bottom:calc(var(--native-safe-bottom) + 10px);left:90px;gap:6px;padding:6px}.split-control{min-height:var(--car-touch-min);padding:0 12px;font-size:11px}.quick-label{font-size:11px}.modal-panel{width:min(590px,72vw)}.route-footer .metric-label{display:none}}@media(max-height:540px){.topbar{padding:0 10px}.topbar-temperature{display:none}.surface-header{padding:11px 13px 0}.maneuver-card{top:9px;left:9px;padding:10px 13px}.route-footer{right:9px;bottom:9px;left:9px}.drive-hero-speed{font-size:clamp(58px,9vw,100px)}.drive-turn-card,.drive-destination-card,.drive-safety-card{margin:3px 10px;padding:8px 10px}}: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}
