/* Edge Config Lab v0.9.34 · Visual Studio. Presentation-only.
 * No vehicle/network interaction. Preferences and photos stay on the device.
 */
.vs-section{border:1px solid var(--border);border-radius:18px;background:var(--surface);padding:22px;margin:17px 0 22px;box-shadow:0 12px 24px #0002}
.vs-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:8px}
.vs-section-head h2{margin:3px 0 0}.vs-section p{line-height:1.6}
.vs-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:16px}
.vs-group{background:var(--elevated);border:1px solid var(--border);border-radius:14px;padding:18px;min-width:0}
.vs-group h3{margin:0 0 16px}
.vs-group label{display:block;color:var(--text);font-size:13px;font-weight:700;margin:10px 0 7px}
.vs-group label:has(input[type="checkbox"]){display:flex;align-items:center;gap:9px;font-weight:600}
.vs-group input[type="checkbox"]{accent-color:var(--accent)}
.vs-group .field{display:block;width:100%;max-width:100%;margin:7px 0 12px}
.vs-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vs-two input[type="color"]{display:block;width:100%;height:47px;margin-top:7px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:9px}
.vs-checks{display:flex;gap:14px;flex-wrap:wrap}
.vs-actions{display:flex;gap:8px;flex-wrap:wrap}
.vs-preview-panel{display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:flex-start;min-height:120px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:12px;margin:14px 0;background:linear-gradient(120deg,var(--surface),transparent),repeating-linear-gradient(135deg,transparent 0 9px,#ffffff08 10px 11px);padding:16px}
.vs-preview-panel>span{font-size:11px;color:var(--muted);letter-spacing:.05em}.vs-preview-panel>strong{font-size:clamp(20px,2vw,26px);letter-spacing:.05em}
.vs-gauge-control{border-top:1px solid var(--border);padding:12px 0}.vs-gauge-control:first-child{border-top:0}
.vs-gauge-control>strong{font-size:13px}
.vs-gauge-fields{display:grid;grid-template-columns:minmax(85px,1fr) 55px 85px;gap:7px;align-items:end}
.vs-gauge-fields>label{margin:0;min-width:0;font-size:11px}
.vs-gauge-fields select,.vs-gauge-fields input[type=number]{width:100%;font-size:12px;margin:5px 0 0;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text)}
.vs-gauge-fields input[type=color]{height:34px;width:100%;margin:4px 0 0;padding:3px;background:var(--surface);border:1px solid var(--border);border-radius:8px}
.vs-gauge-sample{--vs-gauge-color:var(--accent);margin-top:15px;border:1px solid var(--vs-gauge-color);border-radius:14px;background:var(--surface);padding:16px;max-width:100%;position:relative;overflow:hidden}
.vs-gauge-sample-label{font-size:11px;letter-spacing:.1em;font-weight:750;color:var(--muted)}
.vs-gauge-sample-value{font-size:30px;font-weight:900;margin:10px 0 16px;position:relative;z-index:1}
.vs-gauge-sample-value small{font-size:13px;color:var(--muted)}
.vs-gauge-sample-bar{height:7px;border-radius:10px;background:var(--border);overflow:hidden}
.vs-gauge-sample-bar i{display:block;width:46%;height:100%;background:var(--vs-gauge-color)}
.vs-more{margin:19px 0 10px;border-top:1px solid var(--border);padding-top:17px}
.vs-more>summary{font-size:15px;font-weight:800;cursor:pointer}
.vs-more .vs-group>label{display:flex;align-items:center;gap:9px;margin:14px 0}
.vs-light-strip{height:29px;border:1px solid var(--border);border-radius:9px;padding:4px 10px;margin-top:13px;font-size:12px;color:var(--muted)}
.vs-garage-flex{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(210px,.8fr);gap:20px;align-items:stretch;margin-top:16px}
.vs-garage-options label:not(.button){font-size:12px;color:var(--muted);font-weight:750}
.vs-garage-options .field{width:100%;display:block;margin:6px 0 15px}
.vs-photo-label{display:inline-flex;margin:3px 8px 5px 0;cursor:pointer}
.vs-hero-photo{position:relative;min-height:220px;border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#151b27}
.vs-hero-photo img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.vs-vehicle-placeholder{display:flex;flex-direction:column;gap:10px;text-align:center;padding:16px}
.vs-vehicle-placeholder strong,#vs-dashboard-photo>strong{font-size:clamp(22px,3vw,35px);letter-spacing:.16em;color:#f7f8fc;text-shadow:0 3px 10px #0009}
.vs-vehicle-placeholder strong em,#vs-dashboard-photo em{color:#ff454d;font-style:normal}
.vs-vehicle-placeholder span{font-size:12px;color:#b4c4d6}
.vs-scene-studio{background:radial-gradient(ellipse at 50% 2%,#668ba244,transparent 57%),linear-gradient(140deg,#0c1520,#2d3542)}
.vs-scene-midnight{background:radial-gradient(circle at 85% 10%,#ffffff19,transparent 30%),linear-gradient(150deg,#070b13,#151f35)}
.vs-scene-neon{background:radial-gradient(circle at 15% 60%,#36bfe055,transparent 55%),linear-gradient(130deg,#1c073c,#071b30)}
.vs-scene-track{background:linear-gradient(140deg,#121922,#202a35 60%,#38414a);background-image:repeating-linear-gradient(115deg,transparent 0 23px,#ffffff08 24px 28px),linear-gradient(140deg,#111923,#252c34)}
.vs-dashboard-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;border:1px solid var(--border);border-radius:18px;padding:20px;margin-bottom:23px;overflow:hidden}
.vs-dashboard-hero .vs-hero-content{z-index:1;min-width:0;align-self:center}
.vs-dashboard-hero h2{margin:9px 0;font-size:clamp(23px,3vw,34px)}
.vs-dashboard-hero p{color:#cdd6e3;font-size:13px}
.vs-dashboard-hero .vs-hero-photo{min-height:170px;border-color:#ffffff18}
.vs-dashboard-hero .button{background:#202b39;color:#fff}
.vs-dashboard-hero .vs-hero-photo img{height:100%;object-fit:cover}
.vs-garage-photo-card{width:100%;height:112px;margin:0 0 12px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;background:#1a2532;position:relative}
.vs-garage-photo-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.vs-garage-photo-card span{font-size:23px;font-weight:900;letter-spacing:.16em}
.vs-garage-card-tag{position:absolute;right:6px;bottom:6px;padding:3px 7px;background:#121826cc;border-radius:7px;color:#fff;font-size:10px;font-weight:900}
html[data-vs-texture="carbon"] body{background-image:repeating-linear-gradient(45deg,#ffffff07 0 2px,transparent 2px 10px),repeating-linear-gradient(-45deg,#00000015 0 2px,transparent 2px 10px),radial-gradient(circle at 15% -18%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 45%)}
html[data-vs-texture="honeycomb"] body{background-image:repeating-linear-gradient(30deg,#ffffff08 0 1px,transparent 1px 24px),repeating-linear-gradient(150deg,#ffffff08 0 1px,transparent 1px 24px),radial-gradient(circle at 70% -5%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 55%)}
html[data-vs-texture="metal"] body{background-image:repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 3px)}
html[data-vs-texture="glass"] body{background-image:linear-gradient(115deg,#ffffff09,transparent 45%,#ffffff06),radial-gradient(circle at 20% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 55%)}
html[data-vs-glass="on"] .card,html[data-vs-glass="on"] .vs-section{backdrop-filter:blur(9px);background:color-mix(in srgb,var(--surface) 86%,transparent)}
html[data-vs-glow="on"] .card,html[data-vs-glow="on"] .vs-section{box-shadow:0 6px 32px color-mix(in srgb,var(--accent) 14%,transparent)}
/* Individual read-only gauge visuals. Existing value / availability labels remain accessible. */
.dg-gauge{--vs-gauge-color:var(--accent);--vs-progress:0}
.dg-gauge[data-visual-style="digital"] .dg-gauge-value{font-variant-numeric:tabular-nums}
.dg-gauge[data-visual-style="analog"]:after,.vs-gauge-sample[data-visual-style="analog"]:after{
 content:"";position:absolute;right:15px;top:53px;width:79px;height:79px;border-radius:50%;
 background:conic-gradient(var(--vs-gauge-color) calc(var(--vs-progress,46) * 1%),var(--border) 0);
 -webkit-mask:radial-gradient(transparent 52%,#000 55%);mask:radial-gradient(transparent 52%,#000 55%);opacity:.82;pointer-events:none
}
.dg-gauge[data-visual-style="analog"] .dg-gauge-value{font-size:clamp(25px,3.5vw,38px);margin-right:70px}
.dg-gauge[data-visual-style="led"]{border-color:var(--vs-gauge-color)}
.dg-gauge[data-visual-style="led"] .dg-meter{height:12px;box-shadow:0 0 10px color-mix(in srgb,var(--vs-gauge-color) 30%,transparent)}
.dg-gauge[data-visual-style="led"] .dg-meter>span{background:repeating-linear-gradient(90deg,var(--vs-gauge-color) 0 8px,transparent 8px 11px)}
.dg-gauge[data-visual-style="bars"]{border-left:5px solid var(--vs-gauge-color)}
.dg-gauge[data-visual-style="bars"] .dg-meter{height:15px}
.dg-gauge[data-visual-style="bars"] .dg-meter>span{background:repeating-linear-gradient(90deg,var(--vs-gauge-color) 0 10px,transparent 10px 13px)}
.dg-gauge[data-visual-style="minimal"]{background:transparent;border-color:transparent;border-bottom-color:var(--border);border-radius:0}
.dg-gauge[data-visual-style="minimal"] .dg-meter{height:3px;opacity:.55}
.dg-gauge[data-visual-style="st"]{border-color:color-mix(in srgb,var(--vs-gauge-color) 60%,var(--border));background:linear-gradient(140deg,var(--surface),color-mix(in srgb,var(--vs-gauge-color) 11%,var(--surface)))}
.dg-gauge[data-visual-style="st"] .dg-gauge-value{color:var(--vs-gauge-color);font-style:italic;font-size:clamp(27px,4vw,42px)}
.dg-gauge .dg-meter>span{background:var(--vs-gauge-color)}
.dg-gauge.vs-warning{border-color:#ff9f3d!important;box-shadow:0 0 0 2px #ff9f3d29}
.dg-gauge.vs-warning .dg-availability{color:#ffb84e}
.vs-gauge-sample[data-visual-style="led"] .vs-gauge-sample-bar{height:11px}
.vs-gauge-sample[data-visual-style="bars"]{border-left:5px solid var(--vs-gauge-color)}
.vs-gauge-sample[data-visual-style="bars"] .vs-gauge-sample-bar{height:15px}
.vs-gauge-sample[data-visual-style="minimal"]{border:0;border-bottom:2px solid var(--vs-gauge-color);border-radius:0}
.vs-gauge-sample[data-visual-style="st"] .vs-gauge-sample-value{font-style:italic;color:var(--vs-gauge-color)}
html[data-vs-lights="connected"] .vs-light-strip{border-color:#35d99d;box-shadow:inset 0 0 19px #35d99d35}
html[data-vs-lights="demo"] .vs-light-strip{border-color:#af80ff;box-shadow:inset 0 0 19px #af80ff35}
html[data-vs-lights="warning"] .vs-light-strip{border-color:#ffaa46;box-shadow:inset 0 0 19px #ffaa465c}
html[data-vs-lights="connected"] .topbar{border-bottom:2px solid #35d99d}
html[data-vs-lights="demo"] .topbar{border-bottom:2px solid #af80ff}
html[data-vs-lights="warning"] .topbar{border-bottom:2px solid #ffaa46}
.vs-home-hidden{display:none!important}
html[data-vs-motion="on"] .vs-section,html[data-vs-motion="on"] .vs-dashboard-hero{animation:vs-enter .35s ease both}
html[data-vs-motion="on"] .button{transition:transform .16s ease}
html[data-vs-motion="on"] .button:hover{transform:translateY(-2px)}
@keyframes vs-enter{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}
.vs-startup{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;pointer-events:none;background:#0a0f17;animation:vs-splash 1.35s ease both}
.vs-startup span{color:#f7f9ff;font-size:clamp(28px,6vw,48px);letter-spacing:.14em;font-weight:900;text-align:center;padding:20px}
.vs-startup strong{color:#fb4654}
@keyframes vs-splash{0%,40%{opacity:1}100%{opacity:0;visibility:hidden}}
@media(max-width:960px){.vs-columns,.vs-garage-flex{grid-template-columns:1fr}.vs-section{padding:15px}.vs-dashboard-hero{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.vs-dashboard-hero{grid-template-columns:1fr}.vs-dashboard-hero .vs-hero-photo{min-height:115px}.vs-gauge-fields{grid-template-columns:minmax(78px,1fr) 52px 78px}.vs-section-head{flex-direction:column}.vs-garage-flex{gap:12px}}
@media(prefers-reduced-motion:reduce){
 html[data-vs-motion="on"] .vs-section,html[data-vs-motion="on"] .vs-dashboard-hero,.vs-startup{animation:none!important;transition:none!important}
 html[data-vs-motion="on"] .button{transition:none!important}
}


/* Additional Theme Creator controls: shape and opacity. */
html[data-vs-buttons="square"] .button{border-radius:3px!important}
html[data-vs-buttons="pill"] .button{border-radius:999px!important}
html[data-vs-buttons="rounded"] .button{border-radius:11px}
html[data-vs-glass="on"] .card,html[data-vs-glass="on"] .vs-section{
 background:color-mix(in srgb,var(--surface) calc(var(--vs-panel-opacity, .88) * 100%),transparent)
}
/* Vertical level indicator complements the performance-bar gauge face. */
.dg-gauge[data-visual-style="bars"]::after{
 content:"";pointer-events:none;position:absolute;top:50px;right:18px;height:83px;width:11px;
 border:1px solid color-mix(in srgb,var(--vs-gauge-color) 35%,var(--border));border-radius:6px;
 background:linear-gradient(to top,var(--vs-gauge-color) calc(var(--vs-progress,0) * 1%),var(--border) 0);
}
.vs-vehicle-placeholder[hidden],#vs-dashboard-photo>strong[hidden]{display:none!important}


/* v0.9.35 — consolidated Display Preferences after removing "Pick your look". */
.vs-display-settings{margin-top:18px}
.vs-display-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.65fr);gap:24px;align-items:start;margin-top:13px}
.vs-display-settings .vs-display-label{font-size:14px;font-weight:800;color:var(--text)}
.vs-display-settings .field{width:100%;max-width:100%}
.vs-display-settings .gauge-layout-preview-shell{max-width:520px}
.vs-display-settings h3{font-size:16px;margin:0 0 15px}
.vs-display-settings .actionrow{margin-top:20px}
@media(max-width:730px){.vs-display-grid{grid-template-columns:1fr;gap:20px}.vs-display-settings{margin-bottom:18px}}

/* v0.9.36: the old vs-startup implementation is fully replaced by ST Startup Experience.
   Remaining legacy CSS was intentionally left unused for compatibility with earlier screenshots. */