:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #101b24; color: #f2eee4; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -15%, #304352 0, #172631 35%, #101b24 75%); }
button { font: inherit; cursor: pointer; }
.dashboard { max-width: 760px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.eyebrow, .hero-label, .gauge-heading, footer { letter-spacing: .14em; font-size: .7rem; font-weight: 700; }
.eyebrow { color: #b8c4ca; margin: 0 0 5px; }
h1 { margin: 0; font-size: clamp(1.7rem, 6vw, 2.4rem); letter-spacing: -.045em; }
h1 span { color: #e7ad62; }
.connection { flex: none; padding: 8px 11px; border: 1px solid #65737a; border-radius: 999px; font-size: .75rem; color: #c4cdd0; white-space: nowrap; }
.connection[data-state="live"] { border-color: #73c7a5; color: #89e2b8; }
.connection[data-state="connecting"] { border-color: #e7ad62; color: #f3c78c; }
.connection[data-state="demo"] { border-color: #e7ad62; color: #f3c78c; }
.diagnostics-status { color: #94a5ad; font-size: .8rem; text-align: center; margin: 8px 0; }
.hero, .gauge { border: 1px solid #52616a; background: linear-gradient(145deg, #253744, #17252f); box-shadow: 0 14px 38px #0711174d, inset 0 1px #ffffff16; }
.hero { padding: 26px; border-radius: 24px; margin-bottom: 14px; }
.hero-label, .gauge-heading { color: #c4d0d2; }
.rpm-line { display: flex; align-items: baseline; gap: 10px; margin: 7px 0 10px; }
#rpm-value { font-size: clamp(4.2rem, 18vw, 7.5rem); line-height: 1; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.075em; }
.rpm-unit, .unit { color: #e7ad62; font-weight: 700; }
.rpm-unit { font-size: 1rem; letter-spacing: .12em; }
.rpm-track { height: 8px; border-radius: 10px; background: #0c171e; overflow: hidden; }
.rpm-fill { width: 0; height: 100%; background: linear-gradient(90deg, #9ac4b6, #e7ad62); transition: width .2s ease; }
.reading-note { margin: 11px 0 0; color: #aebdc2; font-size: .79rem; }
.reading-note[data-state="stale"], .reading-note[data-state="fault"] { color: #ffb782; }
.gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gauge { border-radius: 20px; padding: 19px; min-width: 0; }
.gauge-heading { display: flex; justify-content: space-between; align-items: center; min-height: 20px; }
.gauge-symbol { color: #e7ad62; font-size: 1rem; }
.gauge-reading { display: flex; align-items: baseline; gap: 6px; margin: 16px 0 6px; white-space: nowrap; }
.gauge-reading span:first-child { font-size: clamp(2rem, 7vw, 3.4rem); font-weight: 650; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.unit { font-size: .8rem; }
.controls { display: flex; gap: 10px; margin-top: 22px; }
.controls button { min-height: 48px; border-radius: 12px; padding: 10px 16px; font-weight: 700; }
.primary { border: 1px solid #efbf80; background: #e7ad62; color: #17222a; }
.secondary { border: 1px solid #72828b; background: transparent; color: #f2eee4; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.message { min-height: 2.4em; color: #c4d0d2; line-height: 1.4; font-size: .86rem; }
footer { margin-top: 24px; color: #91a3aa; line-height: 1.6; }
@media (max-width: 600px) { .gauges { grid-template-columns: 1fr 1fr; } .gauge:last-child { grid-column: span 2; } }
@media (max-width: 390px) { .topbar { display: block; } .connection { display: inline-block; margin-top: 12px; } .gauges { grid-template-columns: 1fr; } .gauge:last-child { grid-column: auto; } .controls { flex-direction: column; } }