/* Local fonts and vector instruments. No remote assets or font requests. */
:root { color-scheme: dark; --bg:#090f13; --surface:#111a20; --raised:#18232b; --line:#2b3943; --text:#f1f5f4; --muted:#a6b6c0; --dim:#687e8a; --accent:#8befc4; --blue:#8fcfff; --warn:#ffd080; --danger:#ff7979; font-family:"DejaVu Sans","Segoe UI",Arial,sans-serif; font-synthesis:none; font-variant-numeric:tabular-nums; }
* { box-sizing:border-box; }
body { margin:0; background:#05090c; color:var(--text); overflow:hidden; }
[hidden] { display:none !important; }
button,input { font:inherit; }
button { cursor:pointer; touch-action:manipulation; }
button:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
button:disabled { opacity:.4; cursor:not-allowed; }
button:not(:disabled):active { transform:translateY(1px); }
h1,h2,h3,h4,p { margin:0; }
svg { display:block; }
.display { position:absolute; width:1920px; height:720px; left:50%; top:50%; margin:-360px 0 0 -960px; transform-origin:center; background:var(--bg); padding:20px 28px; display:grid; grid-template-rows:56px 1fr 172px 66px; gap:18px; overflow:hidden; }
.topbar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"status indicators actions"; align-items:center; gap:18px; }
.topbar > .indicators { grid-area:indicators; justify-self:center; justify-content:center; }
.topbar > .header-status { grid-area:status; min-width:0; justify-self:start; justify-content:flex-start; flex-wrap:wrap; }
.topbar > .drive-quick { grid-area:actions; justify-self:end; }
.indicators { display:flex; align-items:center; gap:13px; }
.indicator { font-size:16px; font-weight:800; letter-spacing:.7px; padding:8px 12px; border:1px solid #28343d; border-radius:6px; color:#637884; }
.indicator.on { color:var(--accent); border-color:#64967f; background:#152e25; }
#icon-brake.on { color:var(--warn); border-color:#88724c; background:#292519; }
.turn-cluster { width:48px; padding:6px; color:#3c505c; }
.turn-cluster svg { width:36px; fill:currentColor; }
.turn-cluster[data-on="true"] { color:var(--accent); }
.header-status { display:flex; align-items:center; gap:16px; }
.recording-badge { font-size:12px; font-weight:800; color:var(--muted); letter-spacing:.5px; }
.recording-badge[data-state="recording"] { color:var(--accent); }
.recording-badge[data-state="error"] { color:var(--danger); }
.log-files { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:12px; max-height:220px; overflow:auto; }
.log-files li { display:flex; gap:20px; align-items:center; color:var(--muted); font-size:14px; }
.log-files a { color:var(--accent); overflow-wrap:anywhere; }
#refresh-logs { margin-top:14px; }
.connection-badge { font-size:13px; font-weight:800; letter-spacing:1px; padding:8px 12px; border:1px solid var(--line); border-radius:6px; color:var(--muted); }
.connection-badge[data-state="live"] { color:var(--accent); border-color:#375e4f; }
.connection-badge[data-state="demo"],.connection-badge[data-state="replay"] { color:var(--warn); border-color:#78603c; }
.connection-badge[data-state="offline"] { color:var(--danger); border-color:#795050; }
#clock-time { font-size:26px; font-weight:750; min-width:82px; }
.primary-instruments { display:grid; grid-template-columns:1fr 1.08fr 1fr; border:1px solid var(--line); border-radius:18px; background:#0d151a; min-height:0; }
.primary-instruments h2,.sensor-card h2 { font-size:19px; font-weight:750; letter-spacing:.15px; }
.tach,.speed { position:relative; min-width:0; }
.tach { border-right:1px solid var(--line); }
.card-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tach .card-heading { position:absolute; inset:18px 24px auto; z-index:1; }
.quality-label { font-size:11px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--dim); white-space:nowrap; }
[data-quality="fault"] .quality-label { color:var(--danger); }
[data-quality="stale"] .quality-label { color:var(--warn); }
[data-quality="live"] > .card-heading .quality-label { font-size:0; width:7px; height:7px; border-radius:50%; background:#4f7d69; }
.tach-dial { position:absolute; height:100%; width:560px; left:50%; transform:translateX(-50%); }
.tach-track { fill:none; stroke:#283740; stroke-width:12px; }
.tach-redzone { fill:none; stroke:#b65c63; stroke-width:12px; }
.tach-progress { fill:none; stroke:var(--accent); stroke-width:12px; transition:stroke-dasharray .1s linear; }
.tach[data-tone="danger"] .tach-progress { stroke:var(--danger); }
.tach-tick { stroke:#70838f; stroke-width:2; }
.tach-tick.red { stroke:#de7b82; }
.tach-number { fill:#c4d1d8; font-size:22px; font-weight:750; text-anchor:middle; dominant-baseline:central; }
.tach-number.red { fill:#ed8a90; }
.tach-readout { position:absolute; top:146px; left:0; width:100%; display:flex; align-items:center; flex-direction:column; }
#rpm-value { font-size:108px; font-weight:800; line-height:1; letter-spacing:-5px; }
.unit { color:var(--muted); font-weight:750; font-size:20px; letter-spacing:.4px; }
.tach-readout .unit { margin-top:5px; }
.tach-caption { position:absolute; bottom:12px; left:0; width:100%; text-align:center; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:1px; }
.tach-caption i { display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--dim); vertical-align:middle; margin:0 8px; }
.speed { display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:1px solid var(--line); }
.speed-label { position:absolute; top:20px; color:var(--muted); text-transform:uppercase; font-size:15px !important; letter-spacing:2px !important; }
.speed-readout { display:flex; align-items:baseline; gap:14px; margin-top:20px; }
#speed-digits { font-size:234px; line-height:1; letter-spacing:-12px; font-weight:800; }
.speed-readout .unit { font-size:25px; }
/* No speed: the reason takes the place of the digits. */
.speed-problem { display:flex; flex-direction:column; align-items:center; gap:10px; max-width:88%; margin-top:20px; text-align:center; }
.speed-problem[hidden] { display:none; }
.speed-problem strong { font-size:44px; line-height:1.05; font-weight:800; letter-spacing:.5px; color:var(--warn,#ffb84d); }
.speed-problem span { font-size:17px; line-height:1.35; color:var(--text); }
.speed-problem small { font-size:15px; line-height:1.35; color:var(--muted); }
.has-speed-problem > .speed-readout { display:none; }
.speed-source { position:absolute; bottom:23px; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:15px; font-weight:700; }
.status-dot { width:7px; height:7px; background:var(--dim); border-radius:50%; }
body[data-speed-live="true"] .speed-source .status-dot { background:var(--accent); }
.speed[data-quality="live"] .quality-label { display:none; }
.warn-banner { position:absolute; z-index:2; top:10px; left:12px; right:12px; padding:9px 14px; border-radius:8px; border:1px solid #795951; background:#2f2020; color:#ffd1bb; text-align:center; font-size:16px; font-weight:800; line-height:1.35; }
.speed:has(.warn-banner:not([hidden])) .speed-label { visibility:hidden; }
.secondary-instruments { display:grid; grid-template-rows:1fr 1fr; min-width:0; padding:0 24px; }
.boost-gauge,.afr-gauge { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.boost-gauge { border-bottom:1px solid var(--line); }
.metric-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px; }
.metric-caption { display:block; font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.8px; text-transform:uppercase; margin-top:8px; }
.metric-reading { display:flex; gap:9px; align-items:baseline; }
.metric-reading > span:first-child { font-size:64px; font-weight:800; letter-spacing:-2.5px; line-height:1; }
.metric-reading .unit { font-size:16px; }
.track { height:7px; background:#2b3943; border-radius:3px; position:relative; }
.fill { width:0; height:100%; background:#9fb8c8; border-radius:inherit; transition:width .1s linear; }
.boost-track .fill { position:absolute; background:var(--accent); left:33.3333%; }
.zero-mark { position:absolute; left:33.3333%; top:-4px; width:2px; height:15px; background:#d2dee5; }
.scale-labels { display:flex; justify-content:space-between; margin-top:9px; color:var(--muted); font-size:13px; font-weight:700; }
.gauge-pointer { position:absolute; width:6px; height:17px; background:var(--text); border-radius:2px; top:-5px; transform:translateX(-50%); transition:left .1s linear; }
.target-marker { position:absolute; width:2px; height:17px; background:var(--accent); top:-5px; }
.afr-meta { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:12px; gap:6px; margin-top:10px; }
.afr-meta b { color:var(--text); font-weight:750; }
.afr-meta i { font-style:normal; font-size:10px; }
.sensor-row { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.sensor-card { border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:18px 20px 12px; }
.sensor-reading { display:flex; align-items:baseline; gap:9px; margin:10px 0 14px; }
.sensor-reading > span:first-child { font-size:56px; font-weight:800; line-height:1; letter-spacing:-2px; }
.sensor-reading .unit { font-size:18px; }
.sensor-card .scale-labels { margin-top:7px; font-size:12px; }
.sensor-card .track { height:5px; }
.sensor-card[data-quality="unavailable"] .track { background:repeating-linear-gradient(90deg,#33424c 0 10px,transparent 10px 16px); }
[data-quality="stale"] > .sensor-reading > span:first-child,[data-quality="unavailable"] > .sensor-reading > span:first-child { color:#8fa2ae; }
[data-quality="fault"] > .sensor-reading > span:first-child { color:var(--danger); font-size:38px; }
.sensor-card[data-tone="danger"] { border-color:#a66660; background:#251b1d; }
.sensor-card[data-tone="danger"] .sensor-reading { color:var(--danger); }
.sensor-card[data-tone="danger"] .fill { background:var(--danger); }
.dashboard-footer { display:flex; align-items:stretch; justify-content:space-between; gap:20px; }
.meth-summary { display:flex; align-items:center; gap:24px; text-align:left; color:var(--text); padding:8px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); min-width:425px; }
.meth-summary:hover { border-color:#738c9c; }
.meth-label { font-weight:800; font-size:13px; letter-spacing:.5px; }
.meth-state-pill { display:block; color:var(--muted); margin-top:5px; font-size:12px; font-weight:750; letter-spacing:.8px; }
.meth-state-pill[data-state="ARMED"],.meth-state-pill[data-state="SPRAYING"] { color:var(--accent); }
.meth-state-pill[data-state="TEST"] { color:var(--warn); }
/* Pump relay closed: the whole tile turns green. Between pulses only the outline stays. */
.meth-summary[data-pump="on"] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 26%,var(--surface)); box-shadow:inset 0 0 0 2px var(--accent); }
.meth-summary[data-pump="on"] :is(.meth-state-pill,.meth-reading b) { color:var(--accent); }
.meth-summary[data-pump="paused"] { border-color:var(--accent); }
.meth-state-pill[data-state="FAULT"] { color:var(--danger); }
.meth-reading { display:flex; align-items:center; gap:6px; }
.meth-reading b { font-size:32px; font-weight:800; }
.meth-reading > span { color:var(--muted); font-size:14px; }
.meth-reading small { display:block; font-size:9px; font-weight:750; }
.meth-detail { font-size:10px; color:var(--muted); line-height:1.6; }
.meth-detail b { color:var(--text); font-size:13px; margin-left:5px; }
#meth-flow-pill { display:block; font-size:11px; }
.open-chevron { font-size:30px; color:var(--muted); margin-left:auto; }
.meth-faults:empty { display:none; }
.meth-faults { font-size:12px; color:var(--danger); font-weight:800; }
.module-strip { display:flex; align-items:center; gap:16px; }
.module-tag { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.5px; }
.module-tag b { font-size:12px; letter-spacing:0; font-weight:700; color:var(--dim); }
.module-tag[data-quality="live"] b { color:var(--accent); }
.dashboard-nav { display:flex; gap:10px; }
.dashboard-nav button { background:#192630; border:1px solid #3a4c59; border-radius:10px; color:var(--text); padding:0 24px; display:flex; align-items:center; gap:12px; font-size:17px; font-weight:750; }
.dashboard-nav button:hover { background:#24343f; border-color:#8aa2b1; }
.dashboard-nav button:first-child { color:var(--accent); background:#1a3028; border-color:#426854; }
.dashboard-nav svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

/* Submenus share the cluster's 1920 × 720 design space, including in the top layer.
   Native dialogs do not inherit the dashboard element's transform. */
.workspace-dialog { position:fixed; inset:auto; left:50%; top:50%; margin:0; width:1864px; height:680px; max-width:none; max-height:none; transform:translate(-50%,-50%) scale(var(--panel-scale,1)); transform-origin:center; background:var(--bg); color:var(--text); border:1px solid #526773; border-radius:18px; padding:0; overflow:hidden; box-shadow:0 24px 80px #0009; }
.workspace-dialog[open] { display:flex; flex-direction:column; }
dialog::backdrop { background:#020609d9; }
.dialog-header { padding:16px 28px; display:flex; flex:none; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); background:#101a21; gap:20px; }
.eyebrow { color:var(--accent); font-size:11px; letter-spacing:2px; font-weight:800; }
.dialog-header h2 { font-size:32px; font-weight:800; letter-spacing:-.6px; margin:5px 0 6px; }
.dialog-header p { font-size:14px; color:var(--muted); line-height:1.4; }
.close-button { display:flex; align-items:center; justify-content:center; gap:24px; min-height:48px; padding:8px 18px; border:1px solid #536774; border-radius:8px; background:#1b2a34; color:var(--text); font-size:16px; font-weight:750; flex:none; }
.close-button span { font-size:24px; font-weight:400; }
.close-button:hover { background:#304450; }
.control-workspace { display:flex; flex:1; overflow:hidden; min-height:0; }
.control-tabs { flex:0 0 236px; padding:24px 16px; border-right:1px solid var(--line); }
.control-tabs button { display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:19px 14px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--muted); font-size:17px; font-weight:750; margin-bottom:8px; }
.control-tabs button span { font-size:12px; color:var(--dim); }
.control-tabs button[aria-selected="true"] { background:#1a3028; border-color:#3a6b55; color:var(--accent); }
.control-tabs p { padding:20px 14px; color:var(--muted); font-size:13px; line-height:1.6; }
.control-panels { overflow:auto; flex:1; min-width:0; padding:18px 28px; }
.control-section > p:first-of-type { font-size:22px; font-weight:750; margin:0 0 10px; }
.control-section button { background:#243742; color:var(--text); border:1px solid #526b7a; border-radius:8px; padding:12px 18px; min-height:48px; font-size:14px; font-weight:800; }
.control-section button:not(:disabled):hover { border-color:var(--accent); background:#304951; }
.control-section button[data-action="meth.arm"][data-value="1"] { background:var(--accent); border-color:var(--accent); color:#092318; }
.control-section .stop-control { background:#40262a; color:#ffb5b0; border-color:#955c5c; }
.control-row { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 18px; }
.control-note { font-size:13px; color:var(--muted); line-height:1.55; margin:10px 0; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:16px; }
.setting-card { border:1px solid var(--line); border-radius:12px; padding:20px; background:var(--surface); }
.setting-card h3,.setting-card h4 { font-size:19px; font-weight:800; margin:0 0 14px; }
.wifi-details { display:grid; grid-template-columns:155px 1fr; gap:16px 12px; margin:22px 0; align-items:center; }
.wifi-details dt { font-size:14px; color:var(--muted); }
.wifi-details dd { margin:0; font-size:22px; font-weight:750; overflow-wrap:anywhere; }
#wifi-code { letter-spacing:4px; color:var(--accent); }
.control-section label { display:block; font-size:15px; font-weight:700; color:var(--muted); margin:14px 0 10px; }
.control-section input { display:inline-block; margin:8px 14px 8px 0; width:132px; background:#0a1116; color:var(--text); border:1px solid #536d7a; padding:8px 12px; border-radius:8px; font-size:26px; font-weight:750; min-height:52px; }
.setting-card label input { display:block; }
.command-result { flex:none; background:#13231f; border-top:1px solid #36584b; color:#c5e8d8; margin:0; padding:17px 28px; font-size:15px; font-weight:700; line-height:1.5; min-height:58px; max-height:90px; overflow:auto; overflow-wrap:anywhere; }
.command-result[data-status="rejected"],.command-result[data-status="unknown"] { color:var(--warn); border-color:#756038; background:#282319; }
.diagnostics-toolbar { display:flex; align-items:center; gap:16px; padding:16px 30px; border-bottom:1px solid var(--line); flex:none; }
.diagnostics-toolbar label { font-size:15px; font-weight:750; }
.diagnostics-toolbar input { padding:10px 14px; background:var(--raised); border:1px solid #536d7a; border-radius:8px; color:white; font-size:16px; width:360px; }
.diagnostics-toolbar > span { color:var(--muted); font-size:11px; font-weight:750; margin-left:auto; }
.diagnostics-body { padding:0 30px 24px; overflow:auto; flex:1; min-height:0; }
table { border-collapse:collapse; width:100%; text-align:left; font-size:15px; }
th { color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:1px; background:#132029; position:sticky; top:0; padding:16px; }
td { padding:13px 16px; border-bottom:1px solid var(--line); }
td:first-child { font-family:"DejaVu Sans Mono",Consolas,monospace; font-size:13px; }
td:nth-child(2) { font-size:19px; font-weight:750; }
tr[data-quality="stale"] td:nth-child(3) { color:var(--warn); }
tr[data-quality="fault"] td:nth-child(3) { color:var(--danger); }
tr[data-quality="live"] td:nth-child(3) { color:var(--accent); }
details { background:var(--surface); border:1px solid var(--line); border-radius:8px; margin-top:16px; padding:16px; }
summary { font-size:16px; font-weight:750; cursor:pointer; }
details p,pre { color:var(--muted); font-size:13px; line-height:1.6; margin-top:14px; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.knock-body { display:flex; flex-direction:column; padding:20px 30px; gap:16px; flex:1; min-height:0; overflow:auto; }
.knock-summary { display:flex; align-items:center; gap:42px; flex:none; }
.klab { display:block; color:var(--muted); font-size:12px; font-weight:750; margin-bottom:5px; }
.knock-big { font-size:56px; font-weight:850; line-height:1; color:var(--accent); }
.knock-summary-item strong { font-size:30px; font-weight:800; }
.knock-status-pill { margin-left:auto; color:var(--accent); padding:12px 18px; border:1px solid #395e4e; border-radius:8px; font-size:17px; font-weight:800; }
.knock-status-pill[data-status="WARNING"],.knock-status-pill[data-status="STALE"] { color:var(--warn); border-color:#88734b; }
.knock-status-pill[data-status="CRITICAL"],.knock-status-pill[data-status="FAULT"] { color:var(--danger); border-color:#906363; }
.knock-graph-wrap { background:#101a21; border:1px solid var(--line); border-radius:12px; padding:10px 16px; flex:1; min-height:200px; display:flex; flex-direction:column; }
.knock-graph { width:100%; min-height:0; flex:1; }
.knock-grid line { stroke:#2d404b; stroke-width:1; }
.knock-axis text { fill:#a3b9c5; font-size:12px; font-weight:700; }
.knock-energy { fill:none; stroke:var(--accent); stroke-width:3; stroke-linejoin:round; }
.knock-baseline { fill:none; stroke:#92aabd; stroke-width:2; stroke-dasharray:5 5; }
.knock-thresh { stroke:var(--warn); stroke-width:2; stroke-dasharray:8 5; }
.knock-thresh-label { fill:var(--warn); font-size:12px; font-weight:800; }
.knock-danger-zone { fill:#f0906210; }
.knock-energy-area { fill:none; }
.knock-current-dot { fill:var(--accent); }
.knock-legend { display:flex; justify-content:center; gap:24px; font-size:10px; font-weight:800; margin:6px 0; }
.knock-legend .energy { color:var(--accent); }.knock-legend .baseline { color:#92aabd; }.knock-legend .threshold { color:var(--warn); }
.knock-stats { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; flex:none; }
.kstat { border-left:2px solid var(--line); padding-left:16px; }
.kval { font-size:24px; font-weight:800; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } }

/* Appearance uses accent tokens; warning and fault colors stay semantic. */
.dashboard-nav button { padding:0 16px; gap:8px; }
.module-strip { gap:12px; }
.display { isolation:isolate; }
.display::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--scene,none); }
[data-scene="midnight"] { --scene:linear-gradient(#090f13,#090f13); }
[data-scene="graphite"] { --scene:linear-gradient(120deg,#292d32,#13171c); }
[data-scene="carbon"] { --scene:repeating-linear-gradient(135deg,#ffffff0c 0 3px,transparent 3px 9px),repeating-linear-gradient(45deg,#ffffff08 0 3px,#090f13 3px 9px); }
[data-scene="glow"] { --scene:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent) 30%,#090f13),#090f13 80%); }
[data-scene="horizon"] { --scene:linear-gradient(165deg,transparent 52%,#213449 52.2%,#0d1723 75%),linear-gradient(195deg,#0c1625 35%,#315774 62%,#10202e 62.2%); }
[data-scene="grid"] { --scene:repeating-linear-gradient(0deg,#8fcfff15 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,#8fcfff15 0 1px,#0b1521 1px 28px); }
[data-scene="contour"] { --scene:repeating-radial-gradient(ellipse at 12% 110%,#b9dfa21c 0 1px,#101910 2px 17px); }
[data-scene="dusk"] { --scene:radial-gradient(ellipse at 80% 120%,#62334f,transparent 65%),linear-gradient(125deg,#171326,#322748); }
[data-scene="image"] { --scene:none; }
.primary-instruments { background:color-mix(in srgb,var(--surface) 80%,#05090c); }
:root[data-finish="image"] .display::before { background-image:linear-gradient(#090f1399,#090f1399),var(--custom-background); background-size:cover; background-position:center; }
.dashboard-nav button:first-child,.control-tabs button[aria-selected="true"] { background:color-mix(in srgb,var(--accent) 13%,var(--bg)); border-color:color-mix(in srgb,var(--accent) 38%,var(--bg)); }
.race-body { display:grid; grid-template-columns:1fr 1.1fr; gap:24px; padding:22px 28px; flex:1; min-height:0; }
.race-main { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px; min-width:0; }
.race-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; }
#race-quality { font-size:13px; color:var(--muted); }
#race-phase[data-phase="invalid"] { color:var(--danger); }
.race-timer { display:flex; align-items:baseline; gap:18px; margin:12px 0 4px; }
.race-timer strong { font-size:112px; font-weight:850; line-height:1.1; letter-spacing:-5px; }
.race-timer span { font-size:15px; color:var(--muted); font-weight:750; }
#race-message { font-size:19px; min-height:27px; }
.race-actions { margin-top:22px; }
.race-actions button:first-child { background:var(--accent); color:#092318; border-color:var(--accent); }
.race-results { display:flex; flex-direction:column; gap:16px; min-width:0; min-height:0; }
.race-splits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.race-splits > div { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:15px 18px; min-height:98px; }
.race-splits span { display:block; color:var(--muted); font-size:12px; font-weight:750; letter-spacing:.6px; }
.race-splits strong { display:block; font-size:33px; font-weight:800; margin-top:7px; }
.race-splits small { display:block; font-size:11px; color:var(--muted); margin-top:4px; }
.race-splits > div:nth-child(2) strong { color:var(--accent); }
.race-history-heading { display:flex; justify-content:space-between; align-items:center; }
.race-history-heading h3 { font-size:18px; }
.race-history-heading button { min-height:40px; font-size:14px; }
.race-history { padding:0; margin:0; list-style:none; overflow:auto; min-height:0; font-size:14px; color:var(--muted); }
.race-history li { padding:9px 0; border-bottom:1px solid var(--line); }
.appearance-body { display:grid; grid-template-columns:1fr 1fr .85fr; gap:20px; padding:22px 28px; flex:1; min-height:0; }
.appearance-tabs { display:flex; gap:10px; margin-left:auto; margin-right:36px; }
.appearance-tabs button { min-height:48px; padding:10px 22px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); font-size:18px; font-weight:750; }
.appearance-tabs button[aria-selected="true"] { color:var(--accent); border-color:var(--accent); }
.appearance-gallery { flex:1; min-height:0; display:flex; flex-direction:column; gap:14px; padding:20px 28px; }
.gallery-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.gallery-heading h3 { font-size:21px; }
.gallery-heading p { font-size:14px; color:var(--muted); margin-top:4px; }
#appearance-current { font-size:16px; color:var(--accent); }
.look-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:14px; flex:1; min-height:0; }
.look-card { display:flex; flex-direction:column; padding:0; overflow:hidden; border:2px solid var(--line); border-radius:12px; color:var(--text); background:var(--surface); text-align:left; min-height:0; }
.look-card[aria-pressed="true"] { border-color:var(--accent); }
.look-art { background:var(--scene); min-height:0; flex:1; display:flex; align-items:center; justify-content:center; gap:46px; padding:8px; }
.mini-gauge { width:82px; height:42px; border:8px solid var(--accent); border-bottom:0; border-radius:90px 90px 0 0; opacity:.85; }
.mini-speed { font-size:44px; font-weight:850; letter-spacing:-2px; line-height:1; text-align:center; }
.mini-speed small { display:block; color:var(--accent); font-size:9px; letter-spacing:2px; margin-top:4px; }
.mini-bars { width:72px; height:32px; border-top:6px solid var(--accent); border-bottom:6px solid var(--accent); opacity:.65; }
.look-caption { position:relative; display:block; padding:10px 16px; border-top:1px solid #ffffff12; }
.look-caption strong { display:block; font-size:21px; }
.look-caption small { display:block; font-size:13px; color:var(--muted); margin-top:2px; }
.look-check { position:absolute; right:16px; top:17px; font-size:24px; color:var(--accent); visibility:hidden; }
.look-card[aria-pressed="true"] .look-check { visibility:visible; }
.background-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px; }
.background-grid button { background:var(--surface); color:var(--text); border:2px solid var(--line); border-radius:8px; overflow:hidden; padding:0; }
.background-grid button[aria-pressed="true"] { border-color:var(--accent); }
.background-grid button > span { display:block; height:36px; background:var(--scene); }
.background-grid strong { display:block; padding:8px; font-size:14px; }
.appearance-gallery > .control-note { margin:0; font-size:13px; min-height:18px; }
.appearance-body .setting-card { min-width:0; padding:20px 24px; }
.appearance-body label { margin:13px 0 7px; }
.appearance-body input,.appearance-body select { background:#0a1116; color:var(--text); border:1px solid #536d7a; border-radius:8px; padding:8px 12px; font:inherit; font-size:17px; min-height:44px; max-width:100%; width:100%; margin:0; }
.appearance-body input[type="file"] { font-size:13px; margin-bottom:10px; }
.appearance-body input[type="color"] { width:65px; height:48px; padding:4px; }
.appearance-body input[type="text"] { font-size:20px; }
.swatches { display:flex; gap:12px; align-items:center; }
.swatches button { background:var(--swatch); min-width:48px; min-height:48px; padding:0; border:3px solid transparent; }
.swatches button[aria-pressed="true"] { outline:2px solid var(--text); outline-offset:3px; }
.appearance-inline { display:flex; gap:16px; align-items:end; margin-bottom:12px; }
.appearance-inline label { flex:1; }
.appearance-inline button { margin-bottom:7px; }
.appearance-body .control-note { font-size:13px; }
.theme-preview { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:30px 20px; text-align:center; margin:25px 0; }
.theme-preview strong { display:block; font-size:84px; margin:8px 0 16px; }
.theme-preview small { font-size:20px; color:var(--muted); }
.theme-preview > span:last-child { font-size:10px; color:var(--muted); letter-spacing:1.4px; }
.theme-preview-track { height:6px; background:var(--accent); margin:0 20px 24px; border-radius:3px; }
.splash-dialog[open] { display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 9%,var(--bg)),var(--bg)); }
.splash-wordmark { text-align:center; display:flex; flex-direction:column; gap:24px; }
.splash-wordmark strong { font-size:80px; letter-spacing:8px; overflow-wrap:anywhere; max-width:1550px; }
.splash-wordmark > span:last-child { color:var(--muted); font-size:14px; letter-spacing:5px; }
#splash-image { width:100%; height:100%; object-fit:contain; }
#splash-skip { position:absolute; bottom:28px; right:28px; }

/* Drive workspace stays in the same scaled 1920 × 720 frame. */
.display,.workspace-dialog { filter:brightness(var(--display-brightness,1)); transition:filter .6s ease; }
:root[data-lighting="night"] .display,:root[data-lighting="night"] .workspace-dialog { --accent:var(--night-accent,#ffc77d); --bg:#080b11; --surface:#101720; }
.drive-quick { display:flex; gap:10px; }
.drive-quick button { background:var(--raised); color:var(--text); border:1px solid var(--line); padding:10px 12px; border-radius:8px; font-size:14px; font-weight:750; min-height:44px; }
.drive-quick b { color:var(--accent); padding-left:7px; }
#alerts-launch[data-warning="true"] { border-color:var(--warn); color:var(--warn); }
.header-status { gap:10px; }
.dashboard-nav { gap:8px; }
.dashboard-nav button { font-size:16px; padding:0 13px; }
.driver-tabs { flex-basis:215px; padding-top:18px; }
.driver-panels { flex:1; min-width:0; min-height:0; }
.driver-panel { height:100%; padding:18px 24px; min-height:0; overflow:auto; }
.driver-panel .settings-grid { margin:0; height:100%; }
.driver-panel .setting-card { padding:16px 20px; }
.driver-panel select { width:100%; background:#0a1116; color:var(--text); font:inherit; font-size:15px; min-height:42px; border:1px solid #536d7a; border-radius:7px; padding:8px; }
.driver-panel .control-row { margin:10px 0 12px; }
.trip-workspace { display:grid; grid-template-columns:1.05fr 1fr; gap:20px; height:100%; }
.trip-counters,.trip-economy { display:flex; flex-direction:column; gap:16px; min-height:0; }
.trip-card { flex:1; }
.trip-workspace .control-note { margin:0; }
.trip-card-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.trip-distance { display:block; font-size:72px; font-weight:850; letter-spacing:-3px; line-height:1.1; margin:10px 0; }
.trip-distance small { font-size:24px; letter-spacing:0; color:var(--muted); }
.trip-card p,.range-card p { font-size:14px; color:var(--muted); }
.range-card .trip-distance { color:var(--accent); }
.economy-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.economy-cards h3 { font-size:17px; }
.economy-cards strong { display:block; font-size:46px; margin:12px 0; }
.economy-cards span { color:var(--muted); font-size:12px; }
.fuel-workspace { display:grid; grid-template-columns:1.4fr 1fr; gap:20px; height:100%; }
.fuel-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 14px; margin:16px 0; }
.fuel-fields label { font-size:12px; margin:0; }
.fuel-fields input,.fuel-inventory input { width:100%; font-size:20px; min-height:42px; padding:6px 10px; margin:5px 0 0; }
.fuel-inventory .control-note { margin:14px 0; }
.fuel-inventory label { margin:18px 0 7px; }
.driver-tabs button { min-height:62px; }
.layout-buttons button[aria-pressed="true"] { background:var(--accent); color:#092318; }
.layout-instruments { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.layout-instruments label { margin:0; font-size:12px; }
.layout-instruments select { margin-top:5px; }
.driver-panel .compact-label { display:flex; align-items:center; gap:16px; margin:12px 0; }
.driver-panel .compact-label input { display:inline-block; width:120px; font-size:20px; min-height:42px; margin:0; }
.driver-panel .compact-label input[type=color] { padding:4px; height:42px; width:64px; }
.brightness-settings { display:flex; gap:30px; margin-top:15px; }
.brightness-settings label { flex:1; }
.brightness-settings input { width:100%; padding:0; min-height:34px; margin:5px 0; accent-color:var(--accent); }
.brightness-settings output { font-size:24px; color:var(--text); }
.alert-workspace { display:grid; grid-template-columns:1fr 1fr; gap:18px; height:100%; }
.alert-setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; border-bottom:1px solid var(--line); padding-bottom:8px; }
.driver-panel .check-label { display:flex; align-items:center; gap:8px; font-size:13px; margin:0; }
.driver-panel .check-label input { width:20px; min-height:20px; height:20px; padding:0; margin:0; accent-color:var(--accent); }
.alert-number-fields { display:flex; gap:8px; }
.alert-number-fields label { font-size:10px; margin:0; }
.alert-number-fields input { width:90px; min-height:38px; font-size:18px; margin:5px 0 0; padding:6px 8px; }
.alert-status-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.alert-status-heading button { font-size:11px; min-height:38px; padding:8px 10px; }
.alert-status-card { display:flex; flex-direction:column; min-height:0; }
#driver-alerts { flex:none; max-height:255px; overflow:auto; }
.driver-alert-row { display:flex; gap:8px; margin:8px 0; }
.driver-alert-row button { font-size:12px; min-height:38px; padding:8px 10px; }
.driver-alert-row button:first-child { flex:1; text-align:left; color:var(--warn); }
#alert-capture { overflow:auto; overflow-wrap:anywhere; min-height:0; max-height:115px; }
#audio-status { margin-top:auto; font-size:12px; }
.health-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:8px; }
.health-cards .setting-card { min-height:96px; }
.health-cards .setting-card[data-quality="good"] { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.health-cards .setting-card[data-quality="warning"] { border-color:var(--warn); }
.health-cards small { display:block; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.4; }
.health-cards span { display:block; color:var(--muted); font-size:13px; }
.health-cards strong { display:block; font-size:25px; margin-top:10px; overflow-wrap:anywhere; }
.display[data-layout="tuning"] .primary-instruments { grid-template-columns:.9fr .85fr 1.35fr; }
.display[data-layout="tuning"] #speed-digits { font-size:190px; }
.display[data-layout="track"] .primary-instruments { grid-template-columns:1.15fr 1.05fr 1fr; }
.display[data-layout="track"] #speed-digits { font-size:165px; }
.display[data-layout="track"] .speed-readout { margin-top:-40px; }
#track-lap-readout { position:absolute; bottom:45px; display:flex; gap:35px; }
#track-lap-readout span { color:var(--muted); font-size:12px; }
#track-lap-readout b { display:block; color:var(--accent); font-size:27px; margin-top:5px; }
.display[data-layout="track"] .speed-source { bottom:10px; font-size:11px; }
#shift-lights { position:absolute; bottom:35px; left:25%; width:50%; display:flex; gap:7px; }
#shift-lights i { height:8px; flex:1; background:var(--line); border-radius:2px; }
#shift-lights i[data-on="true"] { background:var(--accent); }
#shift-lights[data-shift="true"] i { background:var(--warn); }
/* Water/meth: live injection card and the tuning grid (meth-tune.js). */
.meth-live { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0 0 10px; font-size:14px; }
.meth-live dt { color:var(--muted); }
.meth-live dd { margin:0; font-weight:700; }
#meth-live-hold[data-state="on"] { color:var(--accent); }
#meth-live-hold[data-state="held"] { color:var(--warn,#ffb84d); }
#panel-tune > #mt-sync { font-size:15px; font-weight:700; margin:0 0 6px; }
#panel-tune .tl-field { display:flex; flex-direction:column; gap:4px; margin:0; font-size:13px; font-weight:700; min-width:0; }
#panel-tune .tl-field :is(input,select) { display:block; width:100%; margin:0; min-height:40px; padding:6px 10px; font-size:17px; font-weight:750; }
.mt-presets { display:flex; align-items:flex-end; gap:10px; margin:0 0 7px; }
.mt-presets .tl-field { flex:0 1 260px; }
#panel-tune button { min-height:42px; padding:8px 16px; }
.mt-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px 14px; margin-bottom:6px; }
#mt-summary { margin:0 0 6px; line-height:1.4; }
#panel-tune .control-row { margin:0; }
@media (max-aspect-ratio:11/5) and (max-width:900px) { .mt-grid { grid-template-columns:1fr 1fr; } .mt-presets { flex-wrap:wrap; } }
/* Seven sections: slightly shorter rows so the list stays on screen without scrolling. */
#operations-dialog .driver-tabs button { min-height:46px; padding-block:10px; margin-bottom:6px; }
.ops-columns { display:grid; grid-template-columns:1fr 1fr; gap:22px; height:100%; min-height:0; }
.ops-panel .setting-card { min-height:0; }
.ops-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 15px; }
.ops-panel label { font-size:14px; margin:10px 0; }
.ops-panel input { width:100%; min-height:42px; padding:7px 10px; margin:5px 0 0; font-size:19px; }
.ops-panel button { margin:5px 8px 5px 0; }
.ops-panel .control-note { font-size:15px; line-height:1.45; }
.ops-panel .check-label { margin:12px 0; }
.ops-reading { font-size:54px; display:block; margin:30px 0; }
.ops-status-row { display:flex; justify-content:space-between; gap:20px; padding:7px 0; margin:2px 0; border-bottom:1px solid var(--line); font-size:16px; }
.ops-status-row b { text-align:right; max-width:65%; overflow-wrap:anywhere; }
.ops-list { overflow:auto; }
.ops-capabilities { max-height:220px; overflow:auto; }
#acceptance-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#acceptance-list button { display:block; width:100%; text-align:left; font-size:14px; min-height:64px; margin:0; }
.service-item { border-top:1px solid var(--line); padding:14px 0; }
.service-item h4 { margin:0; font-size:20px; }
.configuration-locked { opacity:.55; }
#operations-result { flex-shrink:0; }

/* Compact speaker controls stay inside the fixed 1920 x 720 alert workspace. */
.chime-controls { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.driver-panel .chime-volume { display:flex; align-items:center; gap:12px; margin:0; font-size:13px; }
.driver-panel .chime-volume input { width:160px; min-height:32px; margin:0; padding:0; accent-color:var(--accent); }
.chime-volume output { min-width:42px; font-variant-numeric:tabular-nums; }

/* Visible wheel focus uses the existing accent and stays inside the panel. */
.wheel-focus { outline:3px solid var(--accent) !important; outline-offset:-3px; box-shadow:inset 0 0 0 6px #0008; }
.wheel-editing { outline-style:dashed !important; background:var(--accent) !important; color:#07100e !important; }
#wheel-hint { position:fixed; bottom:6px; left:28px; z-index:100; pointer-events:none; padding:3px 10px; border-radius:6px; background:#07100ef0; color:#e8fff6; font:600 12px system-ui; white-space:nowrap; }
#wheel-hint[hidden] { display:none; }

/* Track and touring collections: lightweight CSS finishes, no canvas or blur. */
[data-scene="pitlane"] { --scene:linear-gradient(115deg,transparent 74%,#d3ea6228 74% 75%,transparent 75% 77%,#d3ea6210 77% 86%,transparent 86%),linear-gradient(140deg,#141b18,#070d0e 70%); }
[data-scene="apexline"] { --scene:linear-gradient(115deg,transparent 76%,#ad354530 76% 78%,#f2f5f218 78% 78.5%,transparent 78.5% 81%,#ad354514 81% 92%,transparent 92%),linear-gradient(155deg,#1b202b,#090d14 75%); }
[data-scene="technical"] { --scene:linear-gradient(115deg,transparent 67%,#85e6ee0c 67% 84%,transparent 84%),repeating-linear-gradient(0deg,#85e6ee0b 0 1px,transparent 1px 36px),repeating-linear-gradient(90deg,#85e6ee0b 0 1px,#0b1721 1px 36px); }
[data-scene="satin"] { --scene:radial-gradient(ellipse at 40% -70%,#62708166,transparent 75%),linear-gradient(125deg,#1d232c,#090d13 55%,#242b36); }
:root { --widget-fill:100%; }
.primary-instruments,.sensor-card,.meth-summary { background:color-mix(in srgb,var(--surface) var(--widget-fill),transparent); }
.sensor-card[data-tone="danger"] { background:#251b1d; }
:root[data-instrument-style="race"] .primary-instruments,
:root[data-instrument-style="race"] .sensor-card,
:root[data-instrument-style="race"] .meth-summary { border-radius:4px; }
:root[data-instrument-style="race"] .primary-instruments h2,
:root[data-instrument-style="race"] .sensor-card h2 { text-transform:uppercase; font-size:17px; letter-spacing:1.2px; font-weight:850; }
:root[data-instrument-style="race"] .tach-progress,
:root[data-instrument-style="race"] .tach-track,
:root[data-instrument-style="race"] .tach-redzone { stroke-width:16px; }
:root[data-instrument-style="race"] #speed-digits,
:root[data-instrument-style="race"] #rpm-value { font-weight:900; }
:root[data-instrument-style="race"] .track,
:root[data-instrument-style="race"] .fill { border-radius:0; }
:root[data-instrument-style="touring"] .primary-instruments,
:root[data-instrument-style="touring"] .sensor-card { border-radius:18px; box-shadow:inset 0 1px #ffffff12,0 8px 20px #0002; }
:root[data-instrument-style="touring"] .primary-instruments h2,
:root[data-instrument-style="touring"] .sensor-card h2 { letter-spacing:.6px; }
.look-collections { display:flex; gap:8px; margin-left:auto; }
.look-collections button { padding:9px 16px; min-height:44px; border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:8px; font-size:15px; font-weight:750; }
.look-collections button span { font-size:11px; margin-left:12px; opacity:.7; }
.look-collections button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
#appearance-current { max-width:360px; text-align:right; }
.look-card[hidden] { display:none; }
.look-card[data-instrument-style="race"] .look-art { border-top:3px solid var(--accent); }
.look-card[data-instrument-style="race"] .mini-gauge { border-radius:3px; height:18px; border-width:0; background:repeating-linear-gradient(90deg,var(--accent) 0 7px,transparent 7px 10px); }
.look-card[data-instrument-style="touring"] .look-art { box-shadow:inset 0 1px #ffffff22; }
.background-grid { grid-template-columns:repeat(12,minmax(0,1fr)); gap:9px; }
.background-grid strong { font-size:13px; }
.appearance-sample .theme-preview { background:var(--scene); padding:14px 20px; margin:14px 0; position:relative; isolation:isolate; }
.appearance-sample .theme-preview::before { content:""; position:absolute; inset:0; background:color-mix(in srgb,var(--surface) var(--widget-fill),transparent); z-index:-1; border-radius:inherit; }
.appearance-sample .theme-preview strong { font-size:64px; margin:8px 0; }
.appearance-sample .theme-preview-track { margin-bottom:14px; }
.transparency-setting label { display:flex; align-items:center; justify-content:space-between; font-weight:750; }
#appearance-transparency-value { color:var(--accent); font-variant-numeric:tabular-nums; }
.appearance-body #appearance-transparency { padding:0; min-height:32px; accent-color:var(--accent); background:transparent; border:0; }
.range-captions { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-bottom:14px; }

/* boot.js: keep the dashboard hidden until an enabled startup splash is covering it. */
:root[data-splash-pending="true"] .display { visibility:hidden; }

/* Steering-wheel tools: keyboard, color picker and Pi file picker. */
.wheel-tool[open] { display:flex; flex-direction:column; }
.wheel-tool-body { flex:1; min-height:0; overflow:auto; padding:18px 28px; display:flex; flex-direction:column; gap:14px; }
.wheel-tool-note { color:var(--muted); font-size:14px; margin-top:4px; }
.wheel-text { display:block; min-height:58px; padding:10px 16px; border:1px solid var(--line); border-radius:8px; background:#0a1116; font:700 34px/1.2 "DejaVu Sans Mono",Consolas,monospace; color:var(--text); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.wheel-keys { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:8px; }
.wheel-key { min-height:56px; padding:4px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); font:750 24px/1 "DejaVu Sans",Arial,sans-serif; }
.wheel-key.wide { grid-column:span 2; font-size:18px; }
.wheel-key.space { grid-column:span 2; font-size:18px; }
.wheel-key.done { background:var(--accent); color:#07100e; border-color:var(--accent); }
.wheel-key[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
.wheel-color-preview { display:flex; align-items:center; gap:14px; }
.wheel-color-preview i { width:48px; height:48px; border-radius:50%; background:var(--chip,#fff); box-shadow:0 0 0 2px #ffffff40,0 0 16px var(--chip,#fff); }
.wheel-color-preview output { font:700 24px "DejaVu Sans Mono",Consolas,monospace; }
.wheel-swatches { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:8px; }
.wheel-swatch { min-height:48px; border-radius:8px; border:2px solid #0007; background:var(--swatch); }
.wheel-swatch[aria-pressed="true"] { outline:3px solid var(--text); outline-offset:2px; }
.wheel-color-sliders { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.wheel-slider { display:grid; grid-template-columns:1fr auto; gap:6px; font-weight:750; }
.wheel-slider input { grid-column:1 / -1; width:100%; accent-color:var(--accent); }
.wheel-slider output { color:var(--accent); }
.wheel-done { align-self:flex-end; min-height:52px; padding:8px 28px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:#07100e; font-size:18px; font-weight:800; }
.wheel-files { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.wheel-file { display:flex; flex-direction:column; gap:6px; padding:10px; text-align:left; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); min-width:0; }
.wheel-file img { width:100%; aspect-ratio:8 / 3; object-fit:cover; border-radius:6px; background:#000; }
.wheel-file strong { font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wheel-file small { color:var(--muted); font-size:12px; }
[data-gauge-slot]:focus { outline:none; }
@media (max-aspect-ratio:11/5) and (max-width:900px) {
  .wheel-keys { gap:4px; }.wheel-key { min-height:44px; font-size:18px; }
  .wheel-swatches { grid-template-columns:repeat(6,minmax(0,1fr)); }.wheel-color-sliders { grid-template-columns:1fr; }
  .wheel-files { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Pointer stays hidden until the mouse actually moves (wheel/keyboard-driven kiosk). */
html.cursor-hidden, html.cursor-hidden * { cursor:none !important; }

/* Bottom nav: icons only, clear of the dash hump in the middle; the name shows when selected. */
.dashboard-nav { margin-left:auto; }
.dashboard-nav button { position:relative; justify-content:center; min-width:66px; padding:0 18px; gap:10px; }
.dashboard-nav button svg { width:28px; height:28px; }
.dashboard-nav .nav-label { display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); white-space:nowrap; padding:5px 12px; border-radius:8px; background:var(--panel,#111a20); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); color:var(--text); font-size:15px; pointer-events:none; z-index:5; }
.dashboard-nav button:last-child .nav-label { left:auto; right:0; transform:none; }
.dashboard-nav button:is(:hover,:focus-visible,.wheel-focus) .nav-label { display:block; }
.dashboard-nav button[data-warning="true"]::after { content:""; position:absolute; top:8px; right:8px; width:10px; height:10px; border-radius:50%; background:#ffb84d; box-shadow:0 0 0 2px var(--bg,#0b1014); }
/* Menus stop above the dash hump that covers the bottom-centre of the screen:
   the same layout, scaled to 608px tall (full width kept) and raised clear of it. */
:root { --hump-fit:.894; }
@media not all and (max-aspect-ratio: 11/5) {
  .workspace-dialog:not(.splash-dialog,.camera-dialog) { width:calc(1864px / var(--hump-fit)); transform:translate(-50%,calc(-50% - 36px * var(--panel-scale,1))) scale(calc(var(--panel-scale,1) * var(--hump-fit))); }
}
/* Interior lights: live preview on the left, one row per choice on the right. */
.interior-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:26px; align-items:start; }
.interior-preview { display:flex; flex-direction:column; gap:14px; padding:18px; border:1px solid var(--line); border-radius:12px; background:#0a0f13; }
.interior-strip { display:flex; justify-content:space-between; align-items:center; height:54px; padding:0 18px; border-radius:27px; border:1px solid var(--line); font-size:16px; font-weight:750;
  background:color-mix(in srgb,var(--glow,transparent) calc(var(--level,0) * 70%),#11181d); box-shadow:0 0 calc(var(--level,0) * 34px) var(--glow,transparent); color:var(--text); }
.interior-strip[data-state="on"] { color:#fff; border-color:transparent; text-shadow:0 1px 4px #000c; }
.interior-strip b { font-size:15px; }
.interior-zones { font-size:13px; color:var(--muted); white-space:pre-wrap; }
.interior-controls { display:flex; flex-direction:column; gap:12px; }
.interior-row { display:grid; grid-template-columns:110px minmax(0,1fr); align-items:center; gap:14px; }
.interior-row > span { font-size:15px; font-weight:750; color:var(--muted); }
.interior-buttons { display:flex; gap:10px; flex-wrap:wrap; }
.interior-buttons button { min-width:96px; min-height:52px; font-size:16px; }
#panel-interior button[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--bg)); }
.interior-swatches { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.interior-swatches button { width:52px; height:52px; min-height:0; padding:0; border-radius:50%; background:var(--swatch) !important; border:2px solid var(--line) !important; }
.interior-swatches button[aria-pressed="true"] { box-shadow:0 0 0 3px var(--bg), 0 0 0 6px #fff; }
.interior-swatches button:is(:focus-visible,.wheel-focus) { outline:4px solid var(--accent) !important; outline-offset:4px; }
.interior-custom { display:flex; align-items:center; gap:8px; margin-left:8px; font-size:14px; color:var(--muted); }
.interior-custom input { width:60px; height:44px; padding:2px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
@media (max-aspect-ratio:11/5) and (max-width:1200px) { .interior-layout { grid-template-columns:1fr; } }
/* Odometer */
.odometer { margin-left:14px; padding-left:14px; border-left:1px solid var(--line); font-variant-numeric:tabular-nums; }
.odometer-set { display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; margin-top:6px; }
.odometer-set strong { font-size:18px; margin-right:auto; }
.odometer-set #trip-total { flex-basis:100%; margin:0; font-size:12px; }
.odometer-set button { min-height:44px; padding:6px 14px; }
.odometer-set label { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); }
.odometer-set input { width:130px; min-height:44px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); font-size:16px; }
/* Terminal tab and three-column Wi-Fi tab. */
.terminal-line { display:flex; gap:10px; }
.terminal-line input { flex:1; min-width:0; font:15px ui-monospace,Consolas,monospace; min-height:44px; padding:6px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); }
.terminal-output { flex:1; min-height:120px; max-height:300px; overflow:auto; margin:0; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#05080a; color:#cfe8d8; font:13px/1.45 ui-monospace,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
#panel-wifi .settings-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-aspect-ratio:11/5) and (max-width:1200px) { #panel-wifi .settings-grid { grid-template-columns:1fr; } }
/* Quick menu and wheel highlight. */
.wheel-focus { outline:4px solid var(--accent) !important; outline-offset:-2px; box-shadow:0 0 0 2px #000a, 0 0 18px color-mix(in srgb,var(--accent) 55%,transparent) !important; }
/* Sensors sections: each panel fits; long lists scroll inside their own region. */
.sensor-panel { display:flex; flex-direction:column; gap:10px; height:100%; min-height:0; }
.sensor-panel[hidden] { display:none; }
.sensor-panel .diagnostics-toolbar { padding:0 0 8px; }
.sensor-panel [data-wheel-scroll] { flex:1; min-height:0; overflow:auto; margin:0; border:1px solid var(--line); border-radius:8px; padding:8px; }
.sensor-panel pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }
[data-wheel-scroll]:is(:focus-visible,.wheel-focus) { outline:3px solid var(--accent) !important; outline-offset:-3px; box-shadow:none !important; }
/* Icon launcher (tap) and dock (hold ON): see-through overlays with app-style icons. */
.wheel-app { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:6px; border:0; background:none; color:var(--text); outline:none !important; box-shadow:none !important; }
.wheel-app-icon { display:grid; place-items:center; width:92px; height:92px; border-radius:24px; border:1px solid #ffffff26;
  background:linear-gradient(155deg,color-mix(in srgb,var(--tile) 100%,#fff 0%) 0%,color-mix(in srgb,var(--tile) 62%,#000) 100%);
  box-shadow:inset 0 1px 0 #ffffff45, 0 8px 18px #0008; transition:transform .16s ease, box-shadow .16s ease; }
.wheel-app-icon svg { width:50px; height:50px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.wheel-app strong { font-size:15px; font-weight:650; color:#dfe7ec; text-shadow:0 1px 3px #000; white-space:nowrap; }
.wheel-app:is(.wheel-focus,:hover) .wheel-app-icon { transform:scale(1.2); box-shadow:inset 0 1px 0 #ffffff60, 0 0 0 3px #fff, 0 14px 30px #000b; }
.wheel-app.wheel-focus strong { color:#fff; font-weight:800; }
dialog.wheel-launch { position:fixed; inset:0; width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#070b0ed0; color:var(--text); overflow:hidden; }
dialog.wheel-launch[open] { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; }
dialog.wheel-launch::backdrop { background:none; }
.wheel-launch-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:30px 14px; width:calc(var(--columns,7) * 164px); transform:translateY(-22px) scale(var(--panel-scale,1)); }
.wheel-launch-grid .wheel-app { width:150px; }
.wheel-launch-detail { min-height:24px; margin:0; font-size:18px; color:#c7d2da; transform:translateY(-22px); text-shadow:0 1px 3px #000; }
dialog.wheel-taskbar { position:fixed; inset:auto; top:50%; left:50%; margin:0; padding:14px 18px 12px; max-width:none; overflow:visible; transform:translate(-50%,-50%) scale(var(--panel-scale,1));
  background:#1a222ab8; -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); color:var(--text); border:1px solid #ffffff38; border-radius:30px; box-shadow:0 22px 60px #000c, inset 0 1px 0 #ffffff30; }
dialog.wheel-taskbar[open] { display:flex; align-items:flex-end; gap:8px; }
dialog.wheel-taskbar::backdrop { background:#0005; }
.wheel-taskbar .wheel-app { padding:4px 6px 0; gap:0; }
.wheel-taskbar .wheel-app-icon { width:84px; height:84px; transform-origin:bottom center; }
.wheel-taskbar .wheel-app strong { position:absolute; bottom:calc(100% + 34px); left:50%; transform:translateX(-50%); padding:5px 14px; border-radius:10px; background:#10171ce8; border:1px solid #ffffff30; font-size:16px; display:none; }
.wheel-taskbar .wheel-app.wheel-focus strong { display:block; }
.wheel-taskbar .wheel-app:is(.wheel-focus,:hover) .wheel-app-icon { transform:scale(1.34); }
.wheel-taskbar .wheel-app:has(+ .wheel-focus) .wheel-app-icon, .wheel-taskbar .wheel-app.wheel-focus + .wheel-app .wheel-app-icon { transform:scale(1.12); }
.wheel-taskbar #wheel-hint { position:absolute; top:calc(100% + 12px); bottom:auto; left:50%; transform:translateX(-50%); white-space:nowrap; }
/* Trips page: slightly smaller trip numbers leave room for the odometer row. */
.trip-counters .trip-distance { font-size:56px; margin:4px 0; }
.trip-counters { gap:12px; }
.trip-counters .trip-card { padding-top:14px; padding-bottom:12px; }
.odometer-set { flex:none; }

/* Preview-only playback controls. */
.demo-playback { display:flex; gap:6px; }
.demo-control { min-height:40px; padding:7px 11px; border:1px solid var(--line); border-radius:6px; background:var(--raised); color:var(--text); font-size:13px; font-weight:750; }
.demo-control[aria-pressed=true] { border-color:var(--accent); color:var(--accent); }