.vehicle-card{position:relative;flex:none;height:350px;min-height:0;overflow:hidden;isolation:isolate;background:#030405;border-bottom:1px solid #ffffff17;color:#fff;text-align:left}
.vehicle-scene{position:absolute;z-index:0;width:100%;height:auto;bottom:21px;left:0;pointer-events:none;user-select:none;mask-image:linear-gradient(transparent,#000 12%,#000 80%,transparent)}
.vehicle-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#0000 55%,#03040599 84%,#030405 100%);pointer-events:none}
.vehicle-heading{position:absolute;z-index:4;left:19px;right:64px;top:19px}.vehicle-heading h2{font-size:21px;line-height:1.3;font-weight:550;letter-spacing:-.6px;margin:0 0 7px}.vehicle-heading p{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;margin:0;min-height:16px;line-height:16px;font-size:11px;color:#8e9393;letter-spacing:.1px}.vehicle-heading p i{display:block;align-self:center;width:5px;height:5px;background:#30d158;border-radius:50%;flex:none}.vehicle-demo{display:inline-block;margin-top:9px;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#a1a7a7;border:1px solid #ffffff20;padding:2px 6px;border-radius:4px}
.vehicle-settings{position:absolute;z-index:7;right:17px;top:17px;width:39px;height:39px;border-radius:50%;border:1px solid #ffffff20;background:linear-gradient(#242626,#141616);color:#fff;box-shadow:inset 0 1px 1px #ffffff0c;display:grid;place-items:center;padding:10px}.vehicle-settings svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.vehicle-range-block{position:absolute;top:100px;left:19px;z-index:4}.vehicle-range-copy{display:flex;align-items:baseline;gap:5px}.vehicle-range-copy strong{font-size:43px;font-weight:500;line-height:1.1;letter-spacing:-1.6px;font-variant-numeric:tabular-nums}.vehicle-range-copy span{font-size:17px;color:#b9bdbd;font-weight:300}.vehicle-battery{margin-top:9px;height:4px;width:66px;border-radius:4px;background:#ffffff26;overflow:hidden}.vehicle-battery span{display:block;width:78%;height:100%;background:#30d158;border-radius:4px;transition:width .5s}
.vehicle-bottom{position:absolute;z-index:4;left:17px;right:17px;bottom:17px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}.vehicle-state{flex:none;border:1px solid #ffffff09;border-radius:30px;background:#ffffff0e;color:#b9bcbc;padding:5px 9px;font-size:10px;line-height:1.2}.vehicle-weather-copy{text-align:right;min-width:0}.vehicle-weather-copy strong{display:block;font-size:10px;color:#c0c6c7;font-weight:400;line-height:1.5}.vehicle-weather-copy small{display:block;font-size:8px;color:#757e80;margin-top:2px}
.vehicle-weather-layer{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}.vehicle-particles{position:absolute;inset:0}.vehicle-particles i{position:absolute;left:var(--x);top:-15%;opacity:.6;will-change:transform;animation-delay:var(--delay);animation-duration:var(--duration);animation-iteration-count:infinite;animation-timing-function:linear}
.vehicle-card[data-weather=snow] .vehicle-particles i{width:var(--size);height:var(--size);border-radius:50%;background:#e7f3ff;filter:blur(.4px);animation-name:vehicle-snowfall}.vehicle-card[data-weather=snow] .vehicle-particles i:nth-child(4n){filter:blur(1.2px);opacity:.45}
.vehicle-card[data-weather=rain] .vehicle-particles i,.vehicle-card[data-weather=storm] .vehicle-particles i{height:20px;width:1px;background:linear-gradient(transparent,#afcde6);animation-name:vehicle-rainfall}
.vehicle-atmosphere{position:absolute;inset:0;opacity:0;transition:opacity 1.3s;pointer-events:none}.vehicle-card[data-weather=clear] .vehicle-atmosphere{opacity:.5;background:radial-gradient(ellipse at 85% 26%,#ffdd7b27,transparent 60%)}
.vehicle-card[data-weather=cloudy] .vehicle-atmosphere{opacity:.35;background:radial-gradient(ellipse at 20% 50%,#a1b2cd44,transparent 65%);animation:vehicle-clouds 15s ease-in-out infinite alternate}
.vehicle-card[data-weather=fog] .vehicle-atmosphere{opacity:.6;background:linear-gradient(0deg,transparent,#c2d4e23c 25%,transparent 65%),radial-gradient(ellipse at 0 65%,#e1eafa55,transparent 70%);animation:vehicle-fog 10s ease-in-out infinite alternate;filter:blur(5px)}
.vehicle-card[data-weather=storm] .vehicle-atmosphere{opacity:0;background:#b7d3ff;animation:vehicle-lightning 11s linear infinite}
.vehicle-ground{position:absolute;bottom:35px;left:-10%;width:120%;height:37%;opacity:0;pointer-events:none;transition:opacity 1s}.vehicle-card[data-weather=snow] .vehicle-ground{display:none}
.vehicle-card[data-weather=rain] .vehicle-ground,.vehicle-card[data-weather=storm] .vehicle-ground{opacity:.35;background:radial-gradient(ellipse at 55% 70%,#7495bd55,transparent 65%);animation:vehicle-wet 4s ease-in-out infinite alternate}
.vehicle-settings-panel{position:absolute;z-index:6;top:63px;left:15px;right:15px;padding:17px;border:1px solid #ffffff25;border-radius:17px;background:#172022f5;backdrop-filter:blur(20px);box-shadow:0 12px 30px #0008}.vehicle-settings-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;font-size:13px}.vehicle-settings-panel header button{border:0;background:none;color:#b7c6c9;font-size:22px;padding:0 3px}.vehicle-settings-panel label{font-size:10px;display:block;margin:0 0 7px;color:#a4b7ba}.vehicle-settings-panel select{display:block;width:100%;padding:9px;border:1px solid #ffffff20;background:#0c1417;color:#f2f5f5;border-radius:8px;font:inherit;font-size:11px}.vehicle-settings-panel p{font-size:10px;line-height:1.8;color:#8d9fa3;margin:11px 0 0}
@keyframes vehicle-snowfall{to{transform:translate3d(27px,430px,0) rotate(120deg)}}@keyframes vehicle-rainfall{from{transform:translate3d(20px,0,0) rotate(12deg)}to{transform:translate3d(-55px,440px,0) rotate(12deg)}}@keyframes vehicle-clouds{to{transform:translateX(18px)}}@keyframes vehicle-fog{to{transform:translateX(20px);opacity:.85}}@keyframes vehicle-wet{to{opacity:.6}}@keyframes vehicle-lightning{0%,72%,73%,75%,100%{opacity:0}72.3%,74.3%{opacity:.13}}
@media(max-height:760px) and (min-width:601px){.vehicle-card{height:300px}.vehicle-scene{bottom:12px}.vehicle-range-block{top:94px}.vehicle-range-copy strong{font-size:38px}}
@media(max-width:600px){.search-panel{max-height:calc(100dvh - 118px);overflow:hidden}.vehicle-card{height:255px}.vehicle-heading{top:15px;left:15px}.vehicle-heading h2{font-size:18px}.vehicle-heading p{font-size:9px}.vehicle-demo{font-size:8px;margin-top:6px}.vehicle-settings{right:13px;top:13px;width:33px;height:33px;padding:8px}.vehicle-range-block{top:85px;left:15px}.vehicle-range-copy strong{font-size:35px}.vehicle-range-copy span{font-size:13px}.vehicle-scene{bottom:11px;width:100%}.vehicle-bottom{left:13px;right:13px;bottom:12px}.vehicle-weather-copy strong{font-size:9px}.vehicle-weather-copy small{font-size:7px}.vehicle-card~.category-cards{border-radius:0}.search-panel .results{display:block;min-height:0;max-height:130px}.vehicle-settings-panel{top:52px}}
@media(prefers-reduced-motion:reduce){.vehicle-card *{animation:none!important;transition:none!important}.vehicle-particles{display:none}}
.sidebar-collapsed .vehicle-card *{animation-play-state:paused}
@media(max-height:520px){.vehicle-card{height:190px}.vehicle-scene{width:70%;left:auto;right:0;bottom:0}.vehicle-heading{top:12px}.vehicle-heading h2{font-size:17px}.vehicle-heading p{font-size:9px}.vehicle-range-block{top:88px}.vehicle-range-copy strong{font-size:32px}.vehicle-bottom{bottom:10px}.search-panel{overflow-y:auto}.vehicle-settings-panel{position:fixed;top:65px;max-height:calc(100dvh - 130px);overflow:auto}}
/* Live 3D replaces the original raster scene. */
.vehicle-webgl{height:240px;width:100%;left:0;right:auto;bottom:22px;pointer-events:auto;user-select:none;mask-image:none;touch-action:none}
.vehicle-webgl canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.vehicle-webgl canvas:active{cursor:grabbing}
.vehicle-scene-note{position:absolute;left:0;right:0;bottom:51px;z-index:3;text-align:center;font-size:8px;letter-spacing:.4px;color:#889396;pointer-events:none}
.vehicle-card[data-scene-state=error] .vehicle-scene-note{bottom:110px;font-size:11px;padding:0 20px;color:#c0b4a8}
.vehicle-settings-panel{max-height:calc(100% - 80px);overflow-y:auto}.vehicle-settings-panel .vehicle-light-label{margin-top:14px}.vehicle-settings-panel a{color:#9ebfc6;text-decoration:none;font-size:9px}
@media(max-height:760px) and (min-width:601px){.vehicle-webgl{height:205px;bottom:16px}.vehicle-scene-note{bottom:45px}}
@media(max-width:600px){.vehicle-webgl{height:185px;width:100%;left:0;bottom:14px}.vehicle-scene-note{bottom:41px;font-size:7px}}
@media(max-height:520px){.vehicle-webgl{width:73%;height:155px;left:auto;right:0;bottom:4px}.vehicle-scene-note{left:35%;bottom:40px}.vehicle-settings-panel{position:absolute;max-height:calc(100% - 65px)}}
/* Reference framing: one continuous black stage, with the car grounded below the readout. */
.vehicle-card{height:400px;background:#030405}
.vehicle-webgl{inset:0;width:100%;height:100%;mask-image:linear-gradient(to bottom,transparent 18%,#000 36%,#000 86%,transparent 100%)}
.vehicle-shade{background:linear-gradient(180deg,#030405 0%,#030405e8 20%,#03040500 43%,#03040500 78%,#030405 100%)}
.vehicle-range-block{top:106px}.vehicle-range-copy strong{font-size:46px;font-weight:500}.vehicle-range-copy span{color:#c8caca;font-size:18px}.vehicle-battery{width:72px}
.vehicle-heading h2{font-weight:500;letter-spacing:-.5px}.vehicle-demo{border:0;padding:0;color:#6e7474;font-size:8px;letter-spacing:.7px}


.vehicle-bottom{bottom:17px}.vehicle-scene-note{bottom:53px;color:#9da3a3}
@media(max-height:760px) and (min-width:601px){.vehicle-card{height:350px}.vehicle-webgl{height:100%;bottom:0}.vehicle-range-block{top:95px}.vehicle-range-copy strong{font-size:42px}}
@media(max-width:600px){.vehicle-card{height:330px}.vehicle-webgl{inset:0;width:100%;height:100%}.vehicle-range-block{top:94px}.vehicle-range-copy strong{font-size:39px}.vehicle-bottom{bottom:14px}.vehicle-range-copy span{font-size:16px}}
@media(max-height:520px){.vehicle-card{height:230px}.vehicle-webgl{inset:0;width:100%;height:100%}.vehicle-range-block{top:78px}.vehicle-range-copy strong{font-size:30px}.vehicle-heading h2{font-size:16px}}

/* Dim the weather atmosphere without altering its restored animation or placement. */
.vehicle-weather-layer{filter:brightness(.72)}

/* Snow uses the textured 3D ground; no flat white patches or atmosphere wash. */
.vehicle-card[data-weather=snow] .vehicle-atmosphere{opacity:0;background:none;transition:none}

/* A light foreground veil; distance fog is rendered in 3D. */
.vehicle-card[data-weather=fog] .vehicle-atmosphere{opacity:.20;animation:vehicle-fog-subtle 14s ease-in-out infinite alternate}
@keyframes vehicle-fog-subtle{to{transform:translateX(16px);opacity:.28}}

/* Two independent surfaces share the existing sidebar collapse motion. */
.search-panel{background:transparent;border:0;box-shadow:none;backdrop-filter:none;overflow:visible;gap:12px;clip-path:none}
.list-card{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;border:1px solid #ffffff20;border-radius:28px;background:linear-gradient(160deg,#232623ed,#131614f5);box-shadow:inset 0 1px 0 #ffffff0c,0 16px 60px #0003;backdrop-filter:blur(26px)}
.vehicle-card{height:300px;border:1px solid #ffffff20;border-radius:28px;box-shadow:0 16px 60px #0003}
.vehicle-heading p{color:#fff}
.vehicle-heading{top:22px}.vehicle-range-block{top:58px}
@media(max-height:760px) and (min-width:601px){.vehicle-card{height:262.5px}.vehicle-range-block{top:54px}}
@media(max-width:600px){.vehicle-card{height:247.5px}.search-panel{gap:10px;overflow:visible}.list-card{border-radius:25px;flex-shrink:0}.vehicle-range-block{top:48px}.list-card .results{max-height:90px}.list-card .empty-state{min-height:60px;padding:12px;display:flex}}
@media(max-height:520px){.vehicle-card{height:172.5px}.vehicle-range-block{top:42px}.search-panel{overflow-y:auto}.list-card{flex-shrink:0}}

/* Compact range and charge readout in the former settings corner. */
.vehicle-card .vehicle-range-block{top:17px;right:17px;left:auto;display:flex;flex-direction:column;align-items:flex-end}
.vehicle-card .vehicle-range-copy{gap:3px}
.vehicle-card .vehicle-range-copy strong{font-size:28px;letter-spacing:-1px}
.vehicle-card .vehicle-range-copy span{font-size:12px}
.vehicle-card .vehicle-battery{width:66px;margin-top:6px}.vehicle-card .vehicle-battery span{width:0}
.vehicle-heading{right:115px}
@media(max-width:600px){.vehicle-card .vehicle-range-block{top:13px;right:13px}.vehicle-card .vehicle-range-copy strong{font-size:25px}.vehicle-card .vehicle-range-copy span{font-size:11px}.vehicle-heading{right:105px}}

/* Keep the status dot and vehicle name on one centered line. */
.vehicle-heading #vehicle-model{display:block;min-width:0;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateY(-4px)}