:root {
    --accent: #6d5cff;
    --accent2: #29d7ff;
    --bg: rgba(7, 8, 16, 0.94);
    --panel: rgba(255,255,255,.065);
    --line: rgba(255,255,255,.09);
    --text: #f7f8ff;
    --muted: #969bb1;
    --scale: 1;
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; color:var(--text); background:transparent; user-select:none; }
button, input, select { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.carplay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; transform:scale(var(--scale)); transition:transform .18s ease; }
.carplay.position-left { justify-content:flex-start; padding-left:3vw; }
.carplay.position-right { justify-content:flex-end; padding-right:3vw; }
.shell { width:920px; height:590px; overflow:hidden; border:1px solid rgba(255,255,255,.10); border-radius:28px; background:linear-gradient(145deg, rgba(16,18,31,.98), rgba(5,6,12,.98)); box-shadow:0 35px 110px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05); pointer-events:auto; position:relative; }
.shell::before { content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:var(--accent); filter:blur(150px); opacity:.15; left:-180px; top:-180px; pointer-events:none; }
.shell::after { content:""; position:absolute; width:360px; height:360px; border-radius:50%; background:var(--accent2); filter:blur(160px); opacity:.10; right:-180px; bottom:-210px; pointer-events:none; }
.topbar { height:72px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; padding:0 22px; border-bottom:1px solid var(--line); position:relative; z-index:2; }
.brand { display:flex; align-items:center; gap:11px; }
.brandMark { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:linear-gradient(135deg,var(--accent),var(--accent2)); font-weight:900; font-size:19px; box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 35%,transparent); }
.brand strong, .brand span { display:block; line-height:1.05; }
.brand strong { font-size:12px; letter-spacing:.17em; }
.brand span { font-size:8px; letter-spacing:.35em; color:var(--muted); margin-top:3px; }
.vehicleHeader { text-align:center; }
.vehicleHeader strong { display:block; font-size:12px; }
.vehicleHeader span { display:block; color:var(--muted); font-size:9px; margin-top:3px; letter-spacing:.14em; }
.topActions { display:flex; align-items:center; justify-content:flex-end; gap:12px; color:#b8bbcb; font-size:11px; }
.iconButton { width:34px; height:34px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:white; border-radius:11px; font-size:19px; }
.content { height:calc(100% - 72px); display:grid; grid-template-columns:88px 1fr; position:relative; z-index:1; }
.dock { border-right:1px solid var(--line); padding:17px 12px; display:flex; flex-direction:column; gap:9px; }
.dockApp { border:0; min-height:64px; border-radius:16px; color:#7f8499; background:transparent; transition:.18s; }
.dockApp span { display:block; font-size:19px; margin-bottom:4px; }
.dockApp small { font-size:8px; }
.dockApp:hover, .dockApp.active { color:white; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.dockApp.active span { color:var(--accent2); }
.pages { padding:20px; overflow:hidden; }
.page { display:none; height:100%; overflow:auto; padding-right:3px; }
.page.active { display:block; animation:pageIn .22s ease; }
@keyframes pageIn { from {opacity:0; transform:translateY(5px)} to {opacity:1; transform:none} }
.page::-webkit-scrollbar { width:4px; } .page::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:3px; }
.glass { background:var(--panel); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.heroCard { height:260px; border-radius:23px; padding:30px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; position:relative; }
.heroCard::after { content:""; position:absolute; right:-90px; top:-110px; width:350px; height:350px; border-radius:50%; border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); box-shadow:0 0 0 38px color-mix(in srgb,var(--accent) 5%,transparent), 0 0 0 82px color-mix(in srgb,var(--accent2) 4%,transparent); }
.eyebrow { color:var(--accent2); font-size:8px; letter-spacing:.21em; font-weight:800; }
h1 { font-size:31px; line-height:1.03; letter-spacing:-.04em; margin:10px 0; }
h1 em { font-style:normal; background:linear-gradient(90deg,var(--accent),var(--accent2)); color:transparent; -webkit-background-clip:text; background-clip:text; }
.heroCopy { max-width:420px; position:relative; z-index:2; }
.heroCopy p { max-width:360px; font-size:11px; line-height:1.55; color:var(--muted); margin:0 0 18px; }
.primary { border:0; color:white; padding:10px 15px; border-radius:11px; font-weight:700; font-size:10px; background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#181a35)); box-shadow:0 9px 25px color-mix(in srgb,var(--accent) 24%,transparent); }
.speedOrb { width:150px; height:150px; border-radius:50%; display:grid; place-content:center; text-align:center; border:1px solid rgba(255,255,255,.13); background:radial-gradient(circle at center,color-mix(in srgb,var(--accent) 17%,transparent),rgba(0,0,0,.16) 65%); position:relative; z-index:2; box-shadow:inset 0 0 35px rgba(255,255,255,.02); }
.speedOrb strong { font-size:47px; line-height:.9; letter-spacing:-.06em; } .speedOrb span { margin-top:8px; color:var(--accent2); font-size:8px; letter-spacing:.2em; }
.homeGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:11px; }
.statCard { padding:13px 15px; border-radius:15px; }
.statCard span { color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.14em; } .statCard strong { float:right; font-size:11px; }
.meter { height:3px; border-radius:3px; background:rgba(255,255,255,.07); margin-top:11px; overflow:hidden; } .meter i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .25s; }
.nowPlayingCompact { height:73px; border-radius:17px; margin-top:11px; padding:10px; display:flex; align-items:center; gap:12px; cursor:pointer; }
.compactArt { width:51px; height:51px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,#181b2c),#10121b); background-size:cover; background-position:center; font-size:20px; }
.compactText { min-width:0; flex:1; } .compactText small { display:block; font-size:7px; letter-spacing:.15em; color:var(--accent2); } .compactText strong, .compactText span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .compactText strong { font-size:11px; margin-top:3px; } .compactText span { font-size:8px; color:var(--muted); margin-top:2px; }
.equalizer { width:32px; display:flex; gap:2px; align-items:center; justify-content:center; height:32px; } .equalizer i { width:3px; height:8px; border-radius:3px; background:var(--accent2); animation:eq 1s ease-in-out infinite alternate; } .equalizer i:nth-child(2){animation-delay:.2s;height:17px}.equalizer i:nth-child(3){animation-delay:.4s;height:12px}.equalizer i:nth-child(4){animation-delay:.6s;height:20px}@keyframes eq{to{height:4px;opacity:.5}}
.sectionHeading { display:flex; justify-content:space-between; align-items:center; margin:3px 2px 16px; } .sectionHeading h2 { margin:4px 0 0; font-size:25px; letter-spacing:-.03em; }
.syncBadge { padding:7px 9px; border-radius:8px; border:1px solid color-mix(in srgb,var(--accent2) 22%,transparent); color:var(--accent2); font-size:7px; letter-spacing:.14em; background:color-mix(in srgb,var(--accent2) 7%,transparent); }
.musicLayout { display:grid; grid-template-columns:1.05fr .95fr; gap:13px; }
.playerCard, .linkCard { border-radius:21px; padding:18px; }
.artwork { width:100%; height:185px; border-radius:17px; display:grid; place-items:center; font-size:42px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 44%,#171925),#0b0c12); background-size:cover; background-position:center; box-shadow:inset 0 0 50px rgba(0,0,0,.25); }
.trackMeta { padding:13px 2px 7px; } .trackMeta small { color:var(--accent2); font-size:7px; letter-spacing:.16em; } .trackMeta h3 { margin:4px 0 2px; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .trackMeta p { margin:0; color:var(--muted); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.playerControls { display:flex; gap:8px; margin-top:7px; }.roundButton { width:39px; height:39px; border-radius:13px; border:0; background:var(--accent); color:white; font-weight:800; }.roundButton.secondary { background:rgba(255,255,255,.07); border:1px solid var(--line); }
.volumeRow { display:grid; grid-template-columns:30px 1fr 24px; gap:8px; align-items:center; margin-top:12px; color:var(--muted); font-size:8px; }.volumeRow input { accent-color:var(--accent); width:100%; }.volumeRow strong { color:white; }
.linkCard { align-self:start; min-height:238px; padding:24px; }.linkCard h3 { margin:7px 0; font-size:20px; }.linkCard p { color:var(--muted); font-size:10px; line-height:1.55; }
.urlRow { display:flex; gap:8px; margin-top:18px; }.urlRow input { min-width:0; flex:1; height:40px; border:1px solid var(--line); border-radius:11px; background:rgba(0,0,0,.2); color:white; padding:0 11px; outline:none; font-size:9px; }.urlRow input:focus { border-color:color-mix(in srgb,var(--accent) 60%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent); }
.hint { display:flex; flex-wrap:wrap; gap:8px 13px; color:#7f8498; font-size:7px; margin-top:17px; }.youtubeMount { position:absolute; width:1px; height:1px; overflow:hidden; opacity:.01; pointer-events:none; }
.vehiclePanel { border-radius:22px; padding:21px; }.vehicleIdentity { display:flex; gap:15px; align-items:center; margin-bottom:18px; }.carGlyph { width:62px; height:62px; display:grid; place-items:center; border-radius:19px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 32%,#131522),#0c0d13); color:var(--accent2); font-size:23px; }.vehicleIdentity small{font-size:7px;letter-spacing:.16em;color:var(--accent2)}.vehicleIdentity h3{margin:5px 0 2px;font-size:19px}.vehicleIdentity p{margin:0;color:var(--muted);font-size:9px;letter-spacing:.12em}
.controlGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.controlGrid button { height:116px; border-radius:17px; border:1px solid var(--line); color:white; text-align:left; padding:16px; background:rgba(255,255,255,.045); transition:.17s; }.controlGrid button:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 40%,transparent); background:color-mix(in srgb,var(--accent) 9%,rgba(255,255,255,.04)); }.controlGrid button span { display:block; color:var(--accent2); font-size:19px; margin-bottom:14px; }.controlGrid button strong,.controlGrid button small{display:block}.controlGrid button strong{font-size:11px}.controlGrid button small{font-size:8px;color:var(--muted);margin-top:3px}
.playlist { display:grid; gap:9px; }.playlistEmpty { color:var(--muted); display:grid; place-items:center; height:280px; border:1px dashed var(--line); border-radius:20px; font-size:10px; }.trackRow { display:grid; grid-template-columns:50px 1fr auto; gap:12px; align-items:center; padding:9px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.045); }.trackThumb { width:50px; height:50px; border-radius:11px; background:linear-gradient(135deg,var(--accent),#141622); background-size:cover; background-position:center; display:grid; place-items:center; }.trackRow strong,.trackRow small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trackRow strong{font-size:10px}.trackRow small{font-size:8px;color:var(--muted);margin-top:3px}.trackActions{display:flex;gap:6px}.trackActions button,.ghostButton{border:1px solid var(--line);background:rgba(255,255,255,.05);color:white;border-radius:9px;padding:8px 10px;font-size:8px}
.settingsGrid { display:grid; gap:11px; }.settingCard { min-height:85px; border-radius:17px; padding:16px 18px; display:flex; justify-content:space-between; align-items:center; color:white; }.settingCard strong,.settingCard small{display:block}.settingCard strong{font-size:11px}.settingCard small{font-size:8px;color:var(--muted);margin-top:4px}.settingCard input[type=color]{width:46px;height:32px;border:0;background:transparent}.settingCard input[type=range]{width:180px;accent-color:var(--accent)}.settingCard select{background:#11131c;color:white;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:9px}.settingCard.reset{width:100%;border:1px solid rgba(255,100,120,.14);background:rgba(255,80,100,.04);text-align:left}.settingCard.reset b{color:#ff8393;font-size:9px}
.toast { position:absolute; left:50%; bottom:25px; transform:translate(-50%,15px); padding:10px 14px; border-radius:10px; background:#171925; border:1px solid var(--line); color:white; font-size:9px; opacity:0; pointer-events:none; transition:.2s; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1000px){.shell{width:820px;height:530px}.heroCard{height:230px}.artwork{height:150px}}

/* Eclipse CarPlay 2.0 additions */
:root { --brightness:1; --wallpaper:none; }
.shell { filter:brightness(var(--brightness)); background-image:linear-gradient(145deg,rgba(16,18,31,.94),rgba(5,6,12,.97)),var(--wallpaper); background-size:cover; background-position:center; }
html[data-night="true"] .shell { filter:brightness(calc(var(--brightness) * .72)); }
.dock { overflow-y:auto; scrollbar-width:none; }
.dock::-webkit-scrollbar { display:none; }
.dockApp { min-height:48px; flex:0 0 48px; }
.dockApp span { font-size:16px; margin-bottom:2px; }
.heroActions,.buttonGroup { display:flex; gap:8px; align-items:center; }
.buttonGroup.wide { margin-top:10px; }
.ghostButton.active { border-color:color-mix(in srgb,var(--accent) 55%,transparent); background:color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.05)); }
.topPill { border:1px solid var(--line); background:rgba(255,255,255,.04); color:white; border-radius:10px; padding:7px 9px; font-size:9px; }
.warningStrip { margin-top:10px; padding:9px 12px; border-radius:11px; color:#ffcc73; border:1px solid rgba(255,184,70,.2); background:rgba(255,155,30,.08); font-size:9px; }
.trackProgress { display:grid; grid-template-columns:34px 1fr 38px; gap:7px; align-items:center; color:var(--muted); font-size:7px; margin-top:8px; }
.trackProgress input { width:100%; accent-color:var(--accent2); }
.stack { display:grid; gap:10px; align-content:start; }
.eqCard { padding:15px; border-radius:18px; }
.miniSliders { display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; margin-top:10px; }
.miniSliders label { color:var(--muted); font-size:7px; display:grid; gap:4px; }
.miniSliders input { width:100%; accent-color:var(--accent); }
.twoColumnLists,.navGrid,.phoneGrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.miniHeading { display:flex; justify-content:space-between; align-items:center; margin:3px 2px 8px; color:var(--muted); font-size:8px; letter-spacing:.12em; }
.compactList,.destinationList { display:grid; gap:7px; }
.compactRow,.radioRow,.messageRow { border:1px solid var(--line); border-radius:12px; padding:10px 11px; background:rgba(255,255,255,.04); color:white; display:flex; align-items:center; justify-content:space-between; text-align:left; }
.compactRow strong,.compactRow small,.radioRow strong,.radioRow small,.messageRow strong,.messageRow small { display:block; }
.compactRow strong,.radioRow strong,.messageRow strong { font-size:9px; }
.compactRow small,.radioRow small,.messageRow small { font-size:7px; color:var(--muted); margin-top:2px; }
.compactRow button,.destinationRow button { border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.06); color:white; padding:6px 8px; font-size:8px; }
.emptyMini { padding:18px; color:var(--muted); font-size:8px; border:1px dashed var(--line); border-radius:12px; text-align:center; }
.navSearch,.librarySearch { padding:10px; border-radius:15px; display:flex; gap:8px; }
.navSearch input,.librarySearch input,.settingCard input[type=text] { flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.2); color:white; padding:9px 11px; font-size:9px; outline:none; }
.destinationRow { border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.045); padding:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.destinationRow>div:first-child { display:flex; align-items:center; gap:9px; min-width:0; }
.destinationRow b { width:42px; height:42px; display:grid; place-items:center; border-radius:11px; background:color-mix(in srgb,var(--accent) 13%,transparent); color:var(--accent2); font-size:7px; }
.destinationRow strong,.destinationRow small { display:block; }
.destinationRow strong { font-size:9px; }.destinationRow small { color:var(--muted); font-size:7px; margin-top:3px; }
.destinationRow>div:last-child { display:flex; gap:5px; }
.modeGrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.toggleCard { min-height:74px; border-radius:15px; padding:14px; display:flex; align-items:center; justify-content:space-between; }
.toggleCard strong,.toggleCard small { display:block; }.toggleCard strong{font-size:10px}.toggleCard small{font-size:8px;color:var(--muted);margin-top:3px}.toggleCard input{accent-color:var(--accent);width:18px;height:18px}
.cameraCards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cameraCard { min-height:170px; border-radius:20px; padding:22px; color:white; text-align:left; }
.cameraCard span,.cameraCard strong,.cameraCard small { display:block; }.cameraCard span{font-size:34px;color:var(--accent2)}.cameraCard strong{font-size:15px;margin-top:18px}.cameraCard small{font-size:9px;color:var(--muted);line-height:1.5;margin-top:5px}
.sensorPanel { margin-top:12px; border-radius:18px; padding:16px; display:grid; grid-template-columns:105px 1fr; gap:11px 14px; align-items:center; }
.sensorPanel div span{font-size:7px;color:var(--muted);display:block}.sensorPanel div strong{font-size:13px}.sensorMeter{height:8px;background:rgba(255,255,255,.06);border-radius:8px;overflow:hidden}.sensorMeter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4ade80,#facc15,#ef4444);transition:.12s}.sensorMeter.reverse i{margin-left:auto}
html[data-sensor-danger="true"] .sensorPanel { box-shadow:0 0 0 1px rgba(239,68,68,.25),0 0 25px rgba(239,68,68,.12); }
.sportGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sportGauge { border-radius:18px; min-height:130px; padding:18px; display:flex; flex-direction:column; justify-content:center; }
.sportGauge span{font-size:7px;letter-spacing:.15em;color:var(--muted)}.sportGauge strong{font-size:28px;margin:7px 0;letter-spacing:-.04em}.sportGauge small{font-size:7px;color:var(--accent2)}
.activeCall { min-height:92px; border-radius:17px; padding:16px; display:flex; justify-content:space-between; align-items:center; }
.activeCall small,.activeCall strong,.activeCall span { display:block; }.activeCall small{font-size:7px;color:var(--accent2)}.activeCall strong{font-size:13px;margin:4px 0}.activeCall span{font-size:8px;color:var(--muted)}
.callButtons{display:flex;gap:7px}.callButtons button{border:1px solid var(--line);background:rgba(255,255,255,.06);color:white;border-radius:9px;padding:8px 10px;font-size:8px}
.emergencyGrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.emergencyGrid button{border:1px solid var(--line);background:rgba(255,255,255,.045);color:white;border-radius:16px;padding:16px;text-align:left;font-size:18px}.emergencyGrid strong,.emergencyGrid small{display:block}.emergencyGrid strong{font-size:10px;margin-top:10px}.emergencyGrid small{font-size:7px;color:var(--muted);margin-top:3px}
.serviceGrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.serviceCard{border-radius:17px;padding:18px}.serviceCard span,.serviceCard strong,.serviceCard small{display:block}.serviceCard span{font-size:7px;color:var(--muted);letter-spacing:.12em}.serviceCard strong{font-size:20px;margin:7px 0}.serviceCard small{font-size:8px;color:var(--muted)}
.warningPanel { margin-top:11px; border-radius:17px; padding:14px; }.warningList{display:grid;gap:7px}.warningItem{padding:9px 10px;border-radius:10px;background:rgba(255,166,0,.08);color:#ffd084;font-size:8px}
.lyricsCard { margin-top:12px; border-radius:18px; padding:16px; display:grid; gap:9px; }.lyricsCard h3{margin:3px 0;font-size:12px}.lyricsCard textarea{height:90px;resize:none;border:1px solid var(--line);border-radius:11px;background:rgba(0,0,0,.2);color:white;padding:10px;font-size:8px;outline:none}
.notificationList { display:grid; gap:8px; }.notificationRow{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.045);padding:12px;display:flex;justify-content:space-between;gap:10px}.notificationRow strong,.notificationRow small{display:block}.notificationRow strong{font-size:10px}.notificationRow small{font-size:8px;color:var(--muted);margin-top:3px}.notificationRow time{font-size:7px;color:var(--accent2)}
.bootScreen,.sleepScreen { position:absolute; inset:0; z-index:20; background:radial-gradient(circle at center,color-mix(in srgb,var(--accent) 20%,#06070d),#05060b 68%); display:grid; place-items:center; text-align:center; }
.bootScreen>div{width:82px;height:82px;border-radius:26px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-size:43px;font-weight:900;box-shadow:0 0 55px color-mix(in srgb,var(--accent) 35%,transparent)}.bootScreen strong{font-size:26px;letter-spacing:.25em;margin-left:.25em}.bootScreen span{font-size:8px;letter-spacing:.35em;color:var(--muted)}.bootScreen i{width:160px;height:3px;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--accent2));animation:boot 1.5s ease both}@keyframes boot{from{transform:scaleX(0);opacity:.3}to{transform:scaleX(1);opacity:1}}
.sleepScreen { z-index:18; background:rgba(2,3,7,.96); }.sleepScreen strong{display:block;font-size:54px;letter-spacing:-.06em}.sleepScreen span{display:block;font-size:8px;letter-spacing:.2em;color:var(--muted);margin-top:7px}
.cameraOverlay { position:absolute; inset:0; z-index:50; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 35%,rgba(0,0,0,.18)); }.cameraTitle{position:absolute;left:50%;top:5%;transform:translateX(-50%);background:rgba(8,9,14,.72);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:9px 14px;text-align:center}.cameraTitle strong,.cameraTitle span{display:block}.cameraTitle strong{font-size:11px}.cameraTitle span{font-size:7px;color:#b6b9c8;margin-top:2px;letter-spacing:.12em}.sensorOverlay{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);display:flex;gap:12px}.sensorOverlay span{background:rgba(8,9,14,.75);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:7px 10px;font-size:8px;color:white}
@media(max-width:1000px){.dockApp{min-height:42px;flex-basis:42px}.sportGrid{grid-template-columns:repeat(3,1fr)}.cameraCard{min-height:140px}.twoColumnLists{gap:8px}}

/* Eclipse CarPlay 3.0 premium modules */
.blindChip{display:none;border:1px solid rgba(255,199,80,.28);background:rgba(255,166,0,.1);color:#ffd57d;border-radius:9px;padding:6px 8px;font-size:7px;font-weight:800;letter-spacing:.08em}.blindChip.visible{display:inline-flex}.blindChip.warning{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.55);color:#ffb1b1;animation:blindPulse .55s ease-in-out infinite alternate}@keyframes blindPulse{to{box-shadow:0 0 14px rgba(239,68,68,.3)}}
.homeFeatureGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.miniFeature{padding:12px 14px;border-radius:15px;min-height:58px}.miniFeature span,.miniFeature strong,.miniFeature small{display:block}.miniFeature span{font-size:7px;letter-spacing:.12em;color:var(--accent2)}.miniFeature strong{font-size:10px;margin-top:4px}.miniFeature small{font-size:7px;color:var(--muted);margin-top:3px}
.guidanceCard{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:17px;margin-bottom:10px;border-color:rgba(255,255,255,.08)}.guidanceCard strong,.guidanceCard small{display:block}.guidanceCard strong{font-size:12px;margin:4px 0}.guidanceCard small{font-size:8px;color:var(--muted)}.guidanceCard.activeGuidance{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent),0 0 30px color-mix(in srgb,var(--accent) 8%,transparent)}
.assistPanel{display:flex;justify-content:space-between;gap:18px;align-items:center;border-radius:18px;padding:15px;margin-top:12px}.assistPanel h3{margin:4px 0;font-size:22px}.assistPanel p{margin:0;color:var(--muted);font-size:8px}.assistControls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}.assistControls input[type=number]{width:62px;background:rgba(0,0,0,.25);border:1px solid var(--line);color:white;border-radius:9px;padding:8px}.assistControls>span,.assistControls label{font-size:7px;color:var(--muted)}.assistControls input[type=checkbox]{accent-color:var(--accent)}
.tpmsPanel,.serviceHistoryPanel,.integrationPanel{margin-top:11px;border-radius:17px;padding:14px}.tpmsGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.tyreCard{border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.04);padding:11px}.tyreCard span,.tyreCard strong,.tyreCard small{display:block}.tyreCard span{font-size:7px;color:var(--muted)}.tyreCard strong{font-size:13px;margin:5px 0}.tyreCard small{font-size:7px;color:#8de7a7}.tyreCard.low small{color:#ffd57d}.tyreCard.critical{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}.tyreCard.critical small{color:#ff9b9b}
.appGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.appTile{min-height:100px;border-radius:18px;padding:15px;text-align:left;color:white}.appTile span,.appTile strong,.appTile small{display:block}.appTile span{font-size:26px;color:var(--accent2)}.appTile strong{font-size:10px;margin-top:9px}.appTile small{font-size:7px;color:#86efac;margin-top:3px}.appTile.offline{opacity:.52}.appTile.offline small{color:#ffb36b}.integrationList{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.integrationRow{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:11px;padding:9px 10px;background:rgba(255,255,255,.03);font-size:8px}.integrationRow span{font-size:7px}.integrationRow .connected{color:#86efac}.integrationRow .disconnected{color:#ff9b9b}
.garageList{display:grid;gap:9px}.garageRow{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:16px;padding:13px 14px}.garageRow div:first-child span,.garageRow div:first-child strong,.garageRow div:first-child small{display:block}.garageRow div:first-child span{font-size:7px;color:var(--accent2);letter-spacing:.12em}.garageRow div:first-child strong{font-size:11px;margin:3px 0}.garageRow div:first-child small{font-size:8px;color:var(--muted)}.garageMeta{margin-left:auto;font-size:8px;color:var(--muted)}
.statsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cameraOverlay .sensorOverlay{flex-wrap:wrap;justify-content:center;max-width:520px}.cameraOverlay .sensorOverlay span:nth-child(n+3){color:var(--accent2);font-weight:800}
@media(max-width:1000px){.appGrid{grid-template-columns:repeat(3,1fr)}.statsGrid{grid-template-columns:repeat(2,1fr)}.tpmsGrid{grid-template-columns:repeat(2,1fr)}.integrationList{grid-template-columns:1fr 1fr}.homeFeatureGrid{grid-template-columns:1fr}.assistPanel{align-items:flex-start;flex-direction:column}.assistControls{justify-content:flex-start}}
.recentNav{margin-top:12px;border-radius:17px;padding:13px}.phoneExtra{margin-top:12px}.brandMark,.bootLogo{background-repeat:no-repeat;background-position:center;background-size:cover}

/* V3.1 audio tuning / seek improvements */
.eqHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.eqStatus{font-size:7px;letter-spacing:.12em;color:#888da1}.eqStatus.active{color:#45d483}.miniSliders label>span{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}.miniSliders label b{font-size:7px;font-weight:700;color:#8b91a7;letter-spacing:.03em}.eqResetBtn{margin-top:10px;width:100%}.trackProgress input:disabled{opacity:.38;cursor:not-allowed}.trackProgress input:not(:disabled){cursor:pointer}


/* ========================================================================== */
/* ECLIPSE CARPLAY 4.0 // ULTRA — CINEMATIC AUTOMOTIVE UI                    */
/* ========================================================================== */
:root{
    --accent:#7658ff;
    --accent2:#27dcff;
    --ultra-bg:#050711;
    --ultra-bg2:#0a0e1c;
    --ultra-card:rgba(14,18,32,.72);
    --ultra-card-2:rgba(21,25,43,.60);
    --ultra-line:rgba(255,255,255,.105);
    --ultra-line-hot:color-mix(in srgb,var(--accent2) 34%,rgba(255,255,255,.08));
    --ultra-shadow:0 20px 65px rgba(0,0,0,.46);
    --ultra-radius:20px;
}

html,body{
    font-family:"Segoe UI Variable Display","Segoe UI",Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
    text-rendering:geometricPrecision;
}

.carplay{perspective:1600px;}
.shell{
    width:960px;
    height:610px;
    border-radius:30px;
    border:1px solid rgba(255,255,255,.13);
    background:
        linear-gradient(135deg,rgba(12,15,29,.985),rgba(4,6,13,.99) 58%,rgba(7,10,20,.99)),
        var(--ultra-bg);
    box-shadow:
        0 45px 140px rgba(0,0,0,.76),
        0 0 0 1px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(255,255,255,.025);
    filter:brightness(var(--brightness,1));
    isolation:isolate;
}
.shell::before{
    width:560px;height:560px;left:-250px;top:-330px;
    opacity:.22;filter:blur(145px);
    background:radial-gradient(circle,var(--accent),transparent 69%);
    animation:ultraAuraA 9s ease-in-out infinite alternate;
}
.shell::after{
    width:520px;height:520px;right:-280px;bottom:-330px;
    opacity:.17;filter:blur(145px);
    background:radial-gradient(circle,var(--accent2),transparent 70%);
    animation:ultraAuraB 11s ease-in-out infinite alternate;
}
.fxBackdrop,.fxSweep{position:absolute;inset:0;pointer-events:none;z-index:0;}
.fxBackdrop{
    opacity:.42;
    background-image:
        linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px),
        var(--wallpaper,none);
    background-size:32px 32px,32px 32px,cover;
    background-position:center;
    mix-blend-mode:screen;
}
.fxBackdrop::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(circle at 48% 28%,transparent 0 25%,rgba(3,5,12,.27) 68%,rgba(2,3,8,.67) 100%);
}
.fxSweep{
    opacity:.18;
    background:linear-gradient(105deg,transparent 0 42%,rgba(255,255,255,.05) 49%,transparent 56%);
    transform:translateX(-60%);
    animation:ultraSweep 12s ease-in-out infinite;
}
@keyframes ultraSweep{0%,72%{transform:translateX(-75%)}100%{transform:translateX(75%)}}
@keyframes ultraAuraA{to{transform:translate(48px,32px) scale(1.08)}}
@keyframes ultraAuraB{to{transform:translate(-46px,-28px) scale(1.10)}}

.topbar{
    height:70px;
    padding:0 20px;
    border-bottom:1px solid rgba(255,255,255,.075);
    background:linear-gradient(180deg,rgba(15,18,34,.84),rgba(7,10,20,.58));
    backdrop-filter:blur(26px) saturate(135%);
    box-shadow:0 8px 30px rgba(0,0,0,.18);
}
.topbar::after{
    content:"";position:absolute;left:20px;right:20px;bottom:-1px;height:1px;
    background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);
    opacity:.24;
}
.brand{gap:12px;}
.brandMark{
    width:39px;height:39px;border-radius:13px;
    position:relative;overflow:hidden;
    background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent2) 76%,var(--accent)));
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 9px 28px color-mix(in srgb,var(--accent) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.28);
}
.brandMark::after{content:"";position:absolute;inset:1px;border-radius:11px;background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 46%);pointer-events:none}
.brand strong{font-size:12px;letter-spacing:.20em;text-shadow:0 0 20px rgba(255,255,255,.13)}
.brand span{font-size:6.5px;letter-spacing:.32em;color:#7f88a4;margin-top:4px}
.vehicleHeader{padding:8px 17px;border-radius:13px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.055);justify-self:center;min-width:150px}
.vehicleHeader strong{font-size:11px;letter-spacing:.035em}.vehicleHeader span{font-size:7px;letter-spacing:.20em;color:#8992ad}
.topActions{gap:9px;color:#9ca6c2}
.topPill,.iconButton{
    border:1px solid rgba(255,255,255,.11)!important;
    background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.12);
    transition:.18s ease;
}
.topPill:hover,.iconButton:hover{border-color:var(--ultra-line-hot)!important;transform:translateY(-1px);background:color-mix(in srgb,var(--accent) 12%,rgba(255,255,255,.05))!important}
.iconButton{width:36px;height:36px;border-radius:12px}

.content{height:calc(100% - 70px);grid-template-columns:82px 1fr;z-index:2;}
.dock{
    position:relative;
    padding:14px 10px;
    gap:5px;
    border-right:1px solid rgba(255,255,255,.07);
    background:linear-gradient(180deg,rgba(8,11,22,.72),rgba(5,7,14,.52));
    backdrop-filter:blur(22px);
}
.dock::after{content:"";position:absolute;top:15px;bottom:15px;right:-1px;width:1px;background:linear-gradient(transparent,color-mix(in srgb,var(--accent2) 28%,transparent),transparent);opacity:.45}
.dockApp{
    min-height:43px;
    flex:1 1 43px;
    max-height:47px;
    border-radius:13px;
    position:relative;
    color:#68718c;
    overflow:hidden;
    transition:color .2s ease,background .2s ease,transform .2s ease,border-color .2s ease;
    border:1px solid transparent;
}
.dockApp::before{
    content:"";position:absolute;left:0;top:50%;width:3px;height:18px;border-radius:0 4px 4px 0;
    background:linear-gradient(var(--accent2),var(--accent));transform:translateY(-50%) scaleY(0);opacity:0;
    box-shadow:0 0 15px var(--accent2);transition:.2s ease;
}
.dockApp span{font-size:16px;margin:0 0 2px;transition:.2s ease}
.dockApp small{font-size:6px;letter-spacing:.04em;font-weight:650}
.dockApp:hover{color:#dfe6ff;background:rgba(255,255,255,.045);transform:translateX(1px)}
.dockApp.active{
    color:#fff;
    background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.035)),rgba(255,255,255,.035));
    border-color:color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.05));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 7px 18px rgba(0,0,0,.16);
}
.dockApp.active::before{transform:translateY(-50%) scaleY(1);opacity:1}
.dockApp.active span{color:var(--accent2);text-shadow:0 0 15px color-mix(in srgb,var(--accent2) 58%,transparent);transform:scale(1.07)}

.pages{padding:16px 17px 17px 18px;}
.page{padding-right:7px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.page::-webkit-scrollbar{width:5px}.page::-webkit-scrollbar-track{background:transparent}.page::-webkit-scrollbar-thumb{background:linear-gradient(var(--accent),var(--accent2));border-radius:10px;opacity:.45}
.page.active{animation:ultraPageIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes ultraPageIn{from{opacity:0;transform:translateY(8px) scale(.994);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}

.glass{
    background:linear-gradient(145deg,rgba(24,28,47,.70),rgba(10,13,25,.66));
    border:1px solid rgba(255,255,255,.095);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 12px 36px rgba(0,0,0,.16);
    backdrop-filter:blur(18px) saturate(125%);
    position:relative;
}
.glass::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(125deg,rgba(255,255,255,.045),transparent 31%,transparent 72%,color-mix(in srgb,var(--accent2) 5%,transparent));
}

.eyebrow{font-size:7px;letter-spacing:.25em;color:var(--accent2);text-shadow:0 0 17px color-mix(in srgb,var(--accent2) 36%,transparent)}
.sectionHeading{margin:2px 2px 13px}.sectionHeading h2{font-size:27px;font-weight:760;letter-spacing:-.045em;margin-top:3px;text-shadow:0 5px 24px rgba(0,0,0,.24)}
.miniHeading{border-bottom:1px solid rgba(255,255,255,.055);padding-bottom:8px;margin-bottom:8px}.miniHeading strong{font-size:7px!important;letter-spacing:.19em!important;color:#8d96b2!important}

.primary,.ghostButton,.roundButton,.callButtons button,.emergencyGrid button,.controlGrid button,.appTile,.cameraCard{
    transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,filter .16s ease;
}
.primary{
    background:linear-gradient(125deg,var(--accent),color-mix(in srgb,var(--accent2) 48%,var(--accent)));
    border:1px solid rgba(255,255,255,.16);
    border-radius:12px;
    box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 27%,transparent),inset 0 1px 0 rgba(255,255,255,.20);
    padding:10px 16px;
}
.primary:hover{transform:translateY(-1px);filter:brightness(1.10);box-shadow:0 13px 34px color-mix(in srgb,var(--accent) 36%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
.primary:active,.ghostButton:active,.roundButton:active{transform:scale(.975)}
.ghostButton{
    color:#dce3f8;
    border:1px solid rgba(255,255,255,.105);
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
    border-radius:11px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.ghostButton:hover,.ghostButton.active{border-color:color-mix(in srgb,var(--accent2) 35%,rgba(255,255,255,.09));background:color-mix(in srgb,var(--accent) 13%,rgba(255,255,255,.035));color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.15)}

input[type=text],input[type=number],select,textarea,.urlRow input,.navSearch input,.librarySearch input,.settingCard input[type=text]{
    border:1px solid rgba(255,255,255,.10)!important;
    background:linear-gradient(180deg,rgba(3,5,12,.50),rgba(5,7,16,.32))!important;
    color:#eef2ff!important;
    box-shadow:inset 0 1px 8px rgba(0,0,0,.18)!important;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus{
    border-color:color-mix(in srgb,var(--accent2) 55%,rgba(255,255,255,.1))!important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 9%,transparent),inset 0 1px 8px rgba(0,0,0,.20)!important;
    outline:none;
}
input[type=range]{accent-color:var(--accent);height:12px;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 75%,#fff),color-mix(in srgb,var(--accent2) 72%,#fff) 42%,rgba(255,255,255,.105) 42%);box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;margin-top:-4.5px;background:#fff;border:3px solid var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 17%,transparent),0 0 14px color-mix(in srgb,var(--accent2) 38%,transparent)}
input[type=checkbox]{accent-color:var(--accent);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 28%,transparent))}

.heroCard{
    height:238px;border-radius:24px;padding:28px 30px;
    background:
      radial-gradient(circle at 83% 47%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 30%),
      linear-gradient(130deg,rgba(28,32,54,.82),rgba(10,13,25,.72));
    border-color:rgba(255,255,255,.11);
}
.heroCard::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 44%);pointer-events:none}
.heroCard::after{right:-62px;top:-84px;width:320px;height:320px;border:1px solid color-mix(in srgb,var(--accent2) 28%,transparent);box-shadow:0 0 0 32px color-mix(in srgb,var(--accent) 5%,transparent),0 0 0 72px color-mix(in srgb,var(--accent2) 3%,transparent);animation:ultraRing 9s linear infinite}
@keyframes ultraRing{to{transform:rotate(360deg)}}
.heroCopy{max-width:455px}.heroCopy h1{font-size:35px;font-weight:760;letter-spacing:-.052em;margin:8px 0 10px}.heroCopy p{font-size:10px;max-width:405px;color:#9099b5;line-height:1.62}
.heroCopy h1 em{background:linear-gradient(90deg,#fff 0%,var(--accent2) 36%,var(--accent) 82%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent2) 16%,transparent))}
.speedOrb{
    width:156px;height:156px;
    border:1px solid rgba(255,255,255,.13);
    background:radial-gradient(circle,color-mix(in srgb,var(--accent) 15%,rgba(5,7,16,.75)),rgba(5,7,14,.90) 64%);
    box-shadow:inset 0 0 42px color-mix(in srgb,var(--accent) 8%,transparent),0 0 50px color-mix(in srgb,var(--accent) 12%,transparent);
}
.speedOrb::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent2);border-right-color:color-mix(in srgb,var(--accent) 60%,transparent);filter:drop-shadow(0 0 7px var(--accent2));animation:ultraSpin 7s linear infinite}
.speedOrb::after{content:"";position:absolute;inset:9px;border-radius:50%;border:1px dashed rgba(255,255,255,.13)}
@keyframes ultraSpin{to{transform:rotate(360deg)}}
.speedOrb strong{font-size:51px;font-weight:770;text-shadow:0 0 26px color-mix(in srgb,var(--accent) 25%,transparent)}
.speedOrb span{font-weight:800;letter-spacing:.25em}

.homeGrid{gap:9px;margin-top:9px}.statCard{padding:12px 14px;border-radius:15px;overflow:hidden}.statCard::after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:linear-gradient(transparent,var(--accent2),transparent);opacity:.45}.statCard strong{font-size:12px}.meter{height:4px;background:rgba(255,255,255,.055)}.meter i{background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 12px color-mix(in srgb,var(--accent2) 33%,transparent)}
.homeFeatureGrid{gap:9px;margin-top:9px}.miniFeature{border-radius:15px;background:linear-gradient(135deg,rgba(19,23,40,.66),rgba(7,10,19,.60));overflow:hidden}.miniFeature::after{content:"";position:absolute;right:-25px;bottom:-32px;width:80px;height:80px;border-radius:50%;background:var(--accent);opacity:.07;filter:blur(20px)}
.nowPlayingCompact{height:67px;margin-top:9px;border-radius:16px;background:linear-gradient(105deg,rgba(25,29,48,.80),rgba(8,11,22,.74));border-color:rgba(255,255,255,.10);transition:.2s ease}.nowPlayingCompact:hover{transform:translateY(-1px);border-color:var(--ultra-line-hot);box-shadow:0 13px 32px rgba(0,0,0,.25)}
.compactArt{border:1px solid rgba(255,255,255,.11);box-shadow:0 8px 18px rgba(0,0,0,.22)}.equalizer i{background:linear-gradient(var(--accent2),var(--accent));box-shadow:0 0 8px color-mix(in srgb,var(--accent2) 45%,transparent)}

.musicLayout{gap:11px}.playerCard,.linkCard,.eqCard{border-radius:21px}.playerCard{padding:16px;background:linear-gradient(150deg,rgba(24,28,47,.82),rgba(7,10,19,.72))}.artwork{height:178px;border-radius:18px;border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 42px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05);position:relative;overflow:hidden}.artwork::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(3,5,12,.36));pointer-events:none}.trackMeta h3{font-size:16px}.trackProgress{align-items:center}.trackProgress input{height:14px}.roundButton{width:41px;height:41px;border-radius:14px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent2) 42%,var(--accent)));box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 26%,transparent),inset 0 1px 0 rgba(255,255,255,.17)}.roundButton.secondary{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));border-color:rgba(255,255,255,.10)}.roundButton:hover{transform:translateY(-1px);border-color:var(--ultra-line-hot)}
.linkCard{padding:21px;min-height:224px}.linkCard h3{font-size:21px;letter-spacing:-.035em}.eqCard{padding:16px;background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 6%,rgba(20,24,41,.72)),rgba(7,10,19,.72))}.eqStatus{border:1px solid rgba(255,255,255,.08);padding:5px 7px;border-radius:7px;background:rgba(0,0,0,.15)}.eqStatus.active{color:#69f0a0;border-color:rgba(105,240,160,.18);box-shadow:0 0 18px rgba(105,240,160,.07)}
.twoColumnLists{gap:10px}.compactList,.playlist,.destinationList{display:grid;gap:7px}
.compactList>* , .playlist>* , .destinationList>*{
    border-color:rgba(255,255,255,.085)!important;
    background:linear-gradient(110deg,rgba(255,255,255,.052),rgba(255,255,255,.018))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    transition:.16s ease;
}
.compactList>*:hover,.playlist>*:hover,.destinationList>*:hover{border-color:var(--ultra-line-hot)!important;background:color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.035))!important;transform:translateX(2px)}

.navSearch,.recentNav,.guidanceCard,.vehiclePanel,.sensorPanel,.assistPanel,.activeCall,.warningPanel,.lyricsCard,.tpmsPanel,.serviceHistoryPanel,.integrationPanel,.librarySearch{border-radius:18px!important}
.guidanceCard.activeGuidance{border-color:color-mix(in srgb,var(--accent2) 28%,rgba(255,255,255,.08));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent2) 10%,transparent),0 12px 34px color-mix(in srgb,var(--accent) 10%,rgba(0,0,0,.18))}
.navSearch,.librarySearch{background:linear-gradient(180deg,rgba(20,24,42,.65),rgba(8,11,21,.62));box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 28px rgba(0,0,0,.12)}

.vehiclePanel{overflow:hidden;background:radial-gradient(circle at 16% 50%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 30%),linear-gradient(140deg,rgba(21,25,44,.76),rgba(7,10,20,.70))}.carGlyph{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.04)),rgba(255,255,255,.025));border:1px solid color-mix(in srgb,var(--accent2) 20%,rgba(255,255,255,.08));color:var(--accent2);font-size:24px;box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 15%,transparent)}
.controlGrid button{border:1px solid rgba(255,255,255,.085)!important;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.022))!important;border-radius:15px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.controlGrid button:hover{border-color:var(--ultra-line-hot)!important;background:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.035))!important;transform:translateY(-2px);box-shadow:0 11px 24px rgba(0,0,0,.18)}
.controlGrid button span{color:var(--accent2);text-shadow:0 0 13px color-mix(in srgb,var(--accent2) 34%,transparent)}
.toggleCard{border-radius:16px!important;transition:.18s ease}.toggleCard:hover{border-color:var(--ultra-line-hot);transform:translateY(-1px)}

.cameraCard{border:1px solid rgba(255,255,255,.10)!important;background:radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--accent2) 10%,transparent),transparent 37%),linear-gradient(145deg,rgba(22,26,45,.78),rgba(7,10,20,.70))!important;border-radius:20px!important}.cameraCard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent2) 35%,rgba(255,255,255,.10))!important;box-shadow:0 16px 38px rgba(0,0,0,.24),0 0 28px color-mix(in srgb,var(--accent2) 6%,transparent)}.cameraCard span{color:var(--accent2);filter:drop-shadow(0 0 11px color-mix(in srgb,var(--accent2) 42%,transparent))}
.sensorMeter{height:5px!important;background:rgba(255,255,255,.055)!important}.sensorMeter i{background:linear-gradient(90deg,var(--accent),var(--accent2))!important;box-shadow:0 0 12px color-mix(in srgb,var(--accent2) 38%,transparent)}

.sportGrid{gap:9px}.sportGauge{min-height:118px;border-radius:18px;overflow:hidden;background:linear-gradient(150deg,rgba(24,28,47,.74),rgba(7,10,20,.67))}.sportGauge::after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;right:-32px;bottom:-35px;background:var(--accent);opacity:.07;filter:blur(15px)}.sportGauge strong{font-size:29px;font-weight:770;text-shadow:0 0 22px color-mix(in srgb,var(--accent) 15%,transparent)}.sportGauge span{color:#818ba8}.sportGauge small{color:var(--accent2);font-weight:700}.assistPanel{background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 9%,rgba(18,22,38,.75)),rgba(7,10,20,.70));border-color:color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.07))}

.phoneGrid,.serviceGrid,.statsGrid{gap:9px}.activeCall{background:radial-gradient(circle at 85% 50%,color-mix(in srgb,var(--accent2) 8%,transparent),transparent 30%),linear-gradient(135deg,rgba(20,24,42,.76),rgba(7,10,20,.68))}.callButtons button{border-radius:11px!important}.callButtons button:hover{border-color:var(--ultra-line-hot);background:color-mix(in srgb,var(--accent) 12%,rgba(255,255,255,.04));transform:translateY(-1px)}
.emergencyGrid button{border-radius:17px!important;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.02))!important}.emergencyGrid button:hover{border-color:rgba(255,93,116,.25)!important;background:rgba(255,60,90,.07)!important;transform:translateY(-2px)}

.serviceCard{border-radius:17px;overflow:hidden;background:linear-gradient(145deg,rgba(22,26,44,.74),rgba(8,11,21,.67))}.serviceCard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent2),transparent);opacity:.22}.serviceCard strong{font-size:21px;font-weight:750}.serviceCard:hover{border-color:var(--ultra-line-hot);transform:translateY(-1px)}
.tyreCard{background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018));border-color:rgba(255,255,255,.085)}.warningItem{border:1px solid rgba(255,188,86,.11);background:linear-gradient(90deg,rgba(255,166,0,.09),rgba(255,166,0,.035));border-radius:11px}

.appGrid{gap:9px}.appTile{border:1px solid rgba(255,255,255,.09)!important;background:radial-gradient(circle at 85% 0%,color-mix(in srgb,var(--accent2) 10%,transparent),transparent 38%),linear-gradient(145deg,rgba(22,26,45,.76),rgba(7,10,20,.68))!important;border-radius:19px!important;overflow:hidden;position:relative}.appTile::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform:scaleX(0);transform-origin:left;transition:.2s ease}.appTile:hover{transform:translateY(-3px);border-color:var(--ultra-line-hot)!important;box-shadow:0 16px 35px rgba(0,0,0,.20)}.appTile:hover::after{transform:scaleX(1)}.appTile span{color:var(--accent2)!important;text-shadow:0 0 14px color-mix(in srgb,var(--accent2) 28%,transparent)}
.integrationRow{background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.018));border-color:rgba(255,255,255,.075)}

.garageRow{border:1px solid rgba(255,255,255,.09);background:linear-gradient(120deg,rgba(22,26,44,.72),rgba(8,11,21,.66));transition:.18s ease}.garageRow:hover{border-color:var(--ultra-line-hot);transform:translateX(2px);box-shadow:0 11px 26px rgba(0,0,0,.15)}

.playlist{gap:8px}.lyricsCard textarea{border-radius:13px!important;background:rgba(2,4,10,.34)!important}.notificationRow{border-radius:15px;background:linear-gradient(110deg,rgba(255,255,255,.05),rgba(255,255,255,.018));border-color:rgba(255,255,255,.085);transition:.16s ease}.notificationRow:hover{border-color:var(--ultra-line-hot);transform:translateX(2px)}

.settingsGrid{gap:9px}.settingCard{border-radius:17px!important;background:linear-gradient(145deg,rgba(22,26,44,.72),rgba(8,11,21,.64));transition:.18s ease}.settingCard:hover{border-color:var(--ultra-line-hot);transform:translateY(-1px);box-shadow:0 11px 27px rgba(0,0,0,.14)}.settingCard strong{font-weight:700}.settingCard select{border-radius:10px!important}.settingCard input[type=color]{width:43px;height:34px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,.10);padding:3px}
.settingCard.reset{border-color:rgba(255,82,112,.11)!important}.settingCard.reset:hover{border-color:rgba(255,82,112,.28)!important;background:rgba(255,50,85,.055)}

.syncBadge{border-radius:9px;padding:7px 10px;background:color-mix(in srgb,var(--accent2) 7%,rgba(255,255,255,.02));border-color:color-mix(in srgb,var(--accent2) 20%,rgba(255,255,255,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.blindChip{border-radius:9px;backdrop-filter:blur(12px)}
.warningStrip{border-radius:13px!important;box-shadow:0 9px 22px rgba(0,0,0,.13)}
.toast{border-radius:13px!important;background:linear-gradient(135deg,rgba(18,22,38,.95),rgba(6,9,18,.96))!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 18px 45px rgba(0,0,0,.40),0 0 24px color-mix(in srgb,var(--accent) 8%,transparent)!important;backdrop-filter:blur(22px)}

.bootScreen{
    background:
      radial-gradient(circle at center,color-mix(in srgb,var(--accent) 16%,transparent),transparent 38%),
      linear-gradient(145deg,#080b17,#02040a 74%);
}
.bootScreen::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:35px 35px;opacity:.55}
.bootScreen>div{width:91px;height:91px;border-radius:27px;border:1px solid rgba(255,255,255,.20);box-shadow:0 0 70px color-mix(in srgb,var(--accent) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.22);z-index:1}.bootScreen strong,.bootScreen span,.bootScreen i{z-index:1}.bootScreen strong{font-size:25px;text-shadow:0 0 24px rgba(255,255,255,.13)}.bootScreen i{height:2px;box-shadow:0 0 13px var(--accent2)}
.sleepScreen{background:radial-gradient(circle at center,rgba(16,20,35,.92),rgba(2,3,8,.985) 70%);backdrop-filter:blur(30px)}

.cameraOverlay{background:linear-gradient(180deg,rgba(1,3,8,.28),transparent 26%,transparent 70%,rgba(1,3,8,.36)),repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 4px)}.cameraTitle,.sensorOverlay span{backdrop-filter:blur(18px);border-color:rgba(255,255,255,.14);box-shadow:0 10px 28px rgba(0,0,0,.24)}

html[data-night="true"] .shell{background:linear-gradient(145deg,rgba(7,9,18,.995),rgba(1,3,8,.998));}
html[data-night="true"] .glass{background:linear-gradient(145deg,rgba(14,17,30,.78),rgba(4,6,13,.78));}

@media(max-width:1000px){
  .shell{width:920px;height:590px;border-radius:26px}
  .content{grid-template-columns:76px 1fr}.pages{padding:14px 15px}.dock{padding:12px 8px}.dockApp{min-height:40px;max-height:44px}
  .heroCard{height:224px;padding:25px}.heroCopy h1{font-size:32px}.speedOrb{width:142px;height:142px}.speedOrb strong{font-size:46px}
}

@media(prefers-reduced-motion:reduce){
  .shell::before,.shell::after,.fxSweep,.heroCard::after,.speedOrb::before,.equalizer i{animation:none!important}
  *{scroll-behavior:auto!important}
}