/* Compact desktop driving menu; all original live controls keep their IDs. */
body.drive-ui { --drive-blue:#13a9ff; --drive-line:rgba(110,171,213,.32); --drive-muted:#93adc1; }
.drive-ui .panel { border-color:var(--drive-line); background:linear-gradient(135deg,rgba(13,28,39,.95),rgba(5,14,23,.91)); box-shadow:0 8px 28px #0005,inset 0 1px 0 #ffffff08; }
.drive-ui #title { width:360px; top:18px; left:22px; height:62px; padding:10px 13px; gap:12px; z-index:36; }
.drive-ui #title h1 { font-size:16px; white-space:nowrap; letter-spacing:.35px; }
.drive-ui #title h1 span { color:var(--drive-blue); }
.drive-ui #title p { max-width:282px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:10px; }
.drive-ui #menuBtn { flex-shrink:0; background:linear-gradient(#235276,#132c42); width:37px; height:36px; }
.drive-menu-open #title { border-bottom:0; border-radius:15px 15px 0 0; box-shadow:none; }
.drive-ui #mapPanel { left:22px; top:80px; width:360px; max-height:calc(100dvh - 98px); padding:0 12px 12px; border-top:0; border-radius:0 0 15px 15px; resize:none; z-index:35; scrollbar-width:thin; scrollbar-color:#2c4f69 transparent; }
.drive-ui #mapPanel button,.drive-ui #mapPanel select { font-family:inherit; }
.drive-ui #mapPanel button:focus-visible,.drive-ui #mapPanel select:focus-visible,.drive-ui #menuBtn:focus-visible { outline:2px solid #9fe1ff; outline-offset:2px; }
#mapPanel [data-menu-icon] { display:inline-flex; flex:0 0 22px; color:var(--drive-blue); }
#mapPanel svg,.driveMapTitle svg { width:22px; height:22px; }
#mapPanel .menuHome { display:flex; align-items:center; gap:10px; width:100%; min-height:34px; padding:5px 10px; border:1px solid #235779; border-radius:8px; background:linear-gradient(100deg,#17354c,#0b253a); color:#dce9f5; text-align:left; font-size:11px; font-weight:600; cursor:pointer; }
.menuChevron { margin-left:auto; font-size:22px; line-height:1; color:#a4c9e5; }
.menuSectionTitle { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:600; color:#dce7f1; min-height:29px; letter-spacing:.1px; }
.menuTextAction { margin-left:auto; border:0; background:none; color:var(--drive-blue); font-size:10px; padding:4px 0 4px 8px; cursor:pointer; white-space:nowrap; }
.drive-ui .carGroup { border:1px solid #25506e; border-radius:11px; padding:0 9px 3px; margin:0 0 6px; background:linear-gradient(145deg,#13293c99,#08121cc0); overflow:hidden; }
.drive-ui .carGroup[hidden] { display:none; }
.drive-ui .carGroup .subcap { margin:0; height:29px; gap:7px; font-size:11px; letter-spacing:0; color:#e0eaf4; }
.drive-ui .carGroup .subcap em { margin-left:auto; font-size:9px; color:#8aaac4; }
.drive-ui #carList,.drive-ui #carListBrand { gap:8px; padding:2px 1px 3px; scrollbar-width:none; scroll-snap-type:x mandatory; }
.drive-ui .carRow::-webkit-scrollbar { display:none; }
.drive-ui .carCard { position:relative; flex:0 0 calc((100% - 16px)/3); min-width:0; border-radius:8px; background:#0c1a26; border-color:#3b53665e; padding:0 0 5px; scroll-snap-align:start; }
.drive-ui .carCard img { width:100%; height:auto; aspect-ratio:1.6; object-fit:contain; background:#d9dde1; border-radius:6px 6px 0 0; }
.drive-ui .carCard b { font-size:9px; padding:5px 5px 0; line-height:1.3; height:29px; overflow:hidden; font-weight:500; }
.drive-ui .carCard i { font-size:8px; min-height:12px; padding:1px 5px 0; overflow:hidden; white-space:nowrap; color:#8ba7bd; }
.drive-ui .carCard.sel { border-color:#1babff; box-shadow:0 0 10px #007ed444,inset 0 0 0 1px #12a9ff4d; }
.drive-ui .carCard.sel::after { content:'✓'; position:absolute; top:4px; right:4px; background:#09609f; color:#ddf5ff; width:14px; height:14px; border:1px solid #76cdff; border-radius:50%; text-align:center; font-size:10px; line-height:12px; }
.drive-ui .carCard.sel i { margin:2px 5px 0; padding:0 5px; border-radius:3px; background:#087ce3; color:white; width:max-content; max-width:calc(100% - 10px); }
.drive-ui .carCard:hover { border-color:#84cff7; }
.carPager { display:flex; align-items:center; justify-content:space-between; min-height:19px; gap:10px; }
.carPager button { border:0; background:transparent; color:#aec7db; cursor:pointer; font-size:21px; line-height:16px; width:22px; height:20px; }
.carPager button:disabled { opacity:.25; cursor:default; }
.carPageDots { display:flex; justify-content:center; align-items:center; gap:6px; }
.carPageDots button { width:6px; height:6px; padding:0; border-radius:50%; background:#354858; }
.carPageDots button.active { background:#13a9ff; box-shadow:0 0 5px #13a9ff55; }
.car-catalog-open #carList,.car-catalog-open #carListBrand { flex-wrap:wrap; }
.car-catalog-open .carPager { display:none; }
#carStudioPreview { position:fixed; z-index:45; border:1px solid #4b718d; border-radius:14px; overflow:hidden; box-shadow:0 18px 65px #0009; pointer-events:none; background:#101d29; }
#carStudioPreview[hidden] { display:none; }
#carStudioPreview img { display:block; width:100%; aspect-ratio:1.6; object-fit:contain; background:#d9dde1; }
#carStudioPreview div { padding:11px 16px 13px; }
#carStudioPreview b { display:block; font-size:15px; font-weight:600; }
#carStudioPreview span { display:block; margin-top:3px; font-size:10px; color:#92acc1; }
.driveMenuSection { border-bottom:1px solid #558aaa22; padding-bottom:6px; }
.drive-ui #mapList { display:grid; grid-template-columns:repeat(2,1fr); gap:5px; }
.drive-ui #timeList { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.drive-ui .mapBtn { border-color:#395268; background:linear-gradient(#102333,#0b1824); padding:6px 7px; min-height:27px; font-size:10px; border-radius:7px; }
.drive-ui .mapBtn.sel { background:linear-gradient(#16456a,#0b2541); border-color:#29aaff; box-shadow:inset 0 0 7px #0b80d77a,0 0 5px #0ba2ff33; }
.drive-ui #sunList .fxRow,.drive-ui .timeSlider { display:grid; grid-template-columns:100px minmax(0,1fr) 42px; gap:7px; align-items:center; min-height:22px; margin:0; padding:0; }
.drive-ui #sunList .fxRow label,.drive-ui .timeSlider label { font-size:10px; color:#cbdce9; }
.drive-ui #sunList .fxRow span,.drive-ui #hourLabel { font-size:10px; text-align:right; color:#d8e7f3; font-variant-numeric:tabular-nums; }
.drive-ui #sunList input[type=range],.drive-ui #hourSlider { width:100%; min-width:0; height:4px; accent-color:#1ba8ff; cursor:pointer; }
#driveAssistToggles { display:flex; justify-content:space-between; gap:12px; padding:3px 2px 8px; }
#driveAssistToggles label { display:flex; align-items:center; gap:9px; font-size:10px; cursor:pointer; }
#driveAssistToggles input { appearance:none; width:27px; height:14px; border-radius:10px; background:#344757; border:1px solid #688aa1; position:relative; cursor:pointer; }
#driveAssistToggles input:checked { background:#008df1; border-color:#37b8ff; }
#driveAssistToggles input::after { content:''; width:10px; height:10px; position:absolute; top:1px; left:1px; border-radius:50%; background:#e3f5ff; }
#driveAssistToggles input:checked::after { left:14px; }
.driveSettingRow { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:27px; font-size:10px; color:#cbdce9; }
.driveSettingRow #gearList { display:flex; gap:4px; }
.driveSettingRow .mapBtn { min-height:23px; padding:4px 9px; }
.driveSettingRow select { width:159px; padding:3px 8px; color:#e1effa; background:#0b1a29; border:1px solid #385772; border-radius:8px; font-size:10px; }
.driveAdvanced { margin-top:5px; }
.driveAdvanced summary { display:flex; align-items:center; gap:7px; font-size:11px; color:#abc4d8; padding:7px 0 0; cursor:pointer; list-style:none; }
.driveAdvanced summary::-webkit-details-marker { display:none; }
.driveAdvanced[open] .menuChevron { transform:rotate(180deg); }
.drive-ui #minimap:not(.full) { right:22px; top:22px; padding:0 10px 10px; border-radius:15px; }
.driveMapTitle { display:flex; align-items:center; gap:8px; height:37px; font-size:10px; letter-spacing:.5px; color:#d1e1ee; border-bottom:1px solid #6fa7cb30; margin-bottom:6px; }
.driveMapTitle svg { color:var(--drive-blue); }
.drive-ui #minimap .where { font-size:10px; text-align:left; margin:8px 0 0; }
.drive-ui #speedo { border-radius:18px; border-color:#329bd38c; bottom:23px; min-width:380px; gap:20px; padding:11px 20px; }
.drive-ui #gearBox { order:-1; min-width:35px; }
.drive-ui #speedWrap { min-width:70px; }
.drive-ui #speed { font-size:36px; }
.drive-ui #speed small { display:block; font-size:9px; font-weight:400; }
.drive-ui #gear { color:#62c4ff; font-size:32px; }
.drive-ui #rpmWrap { width:155px; }
.drive-ui #rpmBar { height:7px; }
.drive-ui #ignBox { align-self:flex-start; }
.drive-ui #ignBox small { font-size:7px; letter-spacing:.3px; }
.drive-ui #ignLamp { width:18px; height:7px; }
.drive-ui #stats { right:22px; bottom:22px; border-radius:12px; font-size:10px; min-width:196px; opacity:1; padding:10px 13px; line-height:1.6; }
.driveLiveInfo { display:flex; justify-content:space-between; gap:22px; color:#d1e2ef; border-bottom:1px solid #648aab33; padding-bottom:5px; margin-bottom:4px; }
.driveRenderDetails { margin-top:4px; }
.driveRenderDetails summary { cursor:pointer; color:#7e9ab0; font-size:9px; }
#streamStatus { position:fixed; bottom:108px; left:50%; transform:translateX(-50%); max-width:min(420px,90vw); padding:7px 14px; color:#daedff; background:#081827ed; border:1px solid #467698; border-radius:20px; z-index:25; font:500 12px/1.4 system-ui,sans-serif; pointer-events:none; text-align:center; }
#streamStatus[hidden] { display:none; }
.drive-ui #freeCamHint { bottom:3px; padding:2px 12px; font-size:9px; background:transparent; border:0; }
@media(max-width:1100px) and (min-width:901px) { .drive-ui #title,.drive-ui #mapPanel { width:326px; left:12px; } .drive-ui #title h1 { font-size:14px; } .drive-ui #stats { right:12px; } }
@media(max-height:800px) and (min-width:901px) { .drive-ui .carCard b { height:26px; font-size:8.5px; } .drive-ui .carCard img { max-height:53px; } .drive-ui .carGroup .subcap { height:25px; } .menuSectionTitle { min-height:25px; } .drive-ui #sunList .fxRow,.drive-ui .timeSlider { min-height:20px; } }
html.touch-ui .driveMapTitle { display:none; }
html.touch-ui .drive-ui #speedo { min-width:0; padding:8px 12px; gap:10px; }
html.touch-ui .drive-ui #speed { font-size:29px; }
html.touch-ui .drive-ui #rpmWrap { width:96px; }
html.touch-ui .drive-ui #gear { font-size:22px; }
/* Fit the full driving controls beside the road even on a 768 px laptop display. */
.drive-ui #mapPanel { padding-bottom:9px; }
.drive-ui .carGroup { padding:0 8px 1px; margin-bottom:4px; }
.drive-ui .carGroup .subcap { height:24px; }
.drive-ui .carCard { padding-bottom:2px; }
.drive-ui .carCard img { height:53px; }
.drive-ui .carCard b { height:17px; line-height:12px; padding:3px 4px 0; white-space:nowrap; text-overflow:ellipsis; }
.drive-ui .carCard i { height:11px; min-height:11px; line-height:10px; padding-top:0; }
.drive-ui .carCard.sel i { margin-top:0; }
.carPager { min-height:15px; }
.carPager > button { height:15px; font-size:18px; }
.menuSectionTitle { min-height:24px; }
.driveMenuSection { padding-bottom:4px; }
.drive-ui .mapBtn { min-height:24px; padding:4px 7px; }
.drive-ui #sunList .fxRow,.drive-ui .timeSlider { min-height:20px; }
#driveAssistToggles { padding:2px 2px 4px; }
.driveSettingRow { min-height:25px; }
.driveAdvanced { margin-top:2px; }
.driveAdvanced summary { padding-top:4px; }
.drive-ui #freeCamHint[hidden] { display:none; }
@media(max-height:800px) and (min-width:901px) {
  .drive-ui #title { top:10px; height:56px; }
  .drive-ui #mapPanel { top:66px; max-height:calc(100dvh - 76px); }
  .drive-ui .carCard img { height:46px; }
  .drive-ui .carGroup .subcap { height:22px; }
  .menuSectionTitle { min-height:22px; }
  .drive-ui #sunList .fxRow,.drive-ui .timeSlider { min-height:18px; }
  .drive-ui .mapBtn { min-height:22px; padding-top:3px; padding-bottom:3px; }
  .driveSettingRow { min-height:23px; }
}