/* RevRecall — big, glanceable layout for a car screen. Follows the system light/dark theme. */
:root {
  --bg: #111317; --panel: #1b1e24; --fg: #f2f3f5; --dim: #8a9099;
  --accent: #ff5a1f; --ok: #3ccf6e; --warn: #f5b301; --bad: #ff3b3b; --track: #2a2e36;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #eef0f3; --panel: #ffffff; --fg: #15171b; --dim: #626873; --track: #d9dce2; color-scheme: light; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-user-select: none; user-select: none; }
header { display: flex; gap: 12px; align-items: center; padding: 14px 22px; }
.brand { font-weight: 900; letter-spacing: .25em; font-size: 26px; color: var(--accent); margin-right: auto; }
.pill { background: var(--panel); padding: 8px 16px; border-radius: 999px; font-size: 20px; color: var(--dim); }
.pill.ok { color: var(--ok); } .pill.warn { color: var(--warn); } .pill.bad { color: var(--bad); }
main { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; padding: 0 22px 22px; }
@media (max-width: 900px) { main { grid-template-columns: 1fr; } }
.cluster { background: var(--panel); border-radius: 24px; padding: 18px; display: flex; align-items: center; gap: 18px; }
.gauge-wrap { position: relative; width: min(46vw, 460px); aspect-ratio: 1; flex: none; }
@media (max-width: 900px) { .gauge-wrap { width: min(70vw, 420px); } }
#gauge { width: 100%; height: 100%; }
.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gear { font-size: clamp(64px, 11vw, 140px); font-weight: 800; line-height: 1; }
.rpm { font-size: 24px; color: var(--dim); font-variant-numeric: tabular-nums; }
.speedbox { flex: 1; text-align: center; }
.speed { font-size: clamp(64px, 9vw, 120px); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.unit { font-size: 22px; background: none; border: 0; color: var(--dim); padding: 6px 10px; }
.bar { height: 16px; background: var(--track); border-radius: 8px; margin: 22px 8px 6px; position: relative; overflow: hidden; }
.bar span { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; background: var(--accent); }
.bar-label { color: var(--dim); font-size: 16px; }
.controls { background: var(--panel); border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 12px; } .row > * { flex: 1; }
button, select { font: inherit; font-size: 22px; color: var(--fg); background: var(--track); border: 0; border-radius: 14px; padding: 16px; touch-action: manipulation; }
button:active { filter: brightness(1.3); }
button.primary { background: var(--accent); color: #fff; font-weight: 700; }
button.big { font-size: 26px; padding: 22px; }
button.toggle.on { background: var(--accent); color: #fff; }
button.shift { font-size: 34px; font-weight: 800; flex: 0 0 90px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 18px; color: var(--dim); }
select { width: 100%; }
input[type=range] { width: 100%; height: 44px; accent-color: var(--accent); }
.hint { color: var(--dim); font-size: 16px; margin: 0; min-height: 1em; }
.hidden { display: none !important; }