:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: #000;
  color: #eaeaea;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
  padding: 14px;
  font-size: 20px;
  -webkit-tap-highlight-color: transparent;
}
h2 {
  font-size: 16px;
  color: #888;
  margin: 20px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.buttons {
  display: flex;
  gap: 12px;
}
button {
  font-size: 30px;
  font-weight: 700;
  padding: 26px 12px;
  border-radius: 14px;
  border: 3px solid #444;
  color: #fff;
  background: #151515;
}
button:active { filter: brightness(1.3); }
button:disabled { opacity: 0.35; }
#start { flex: 1; background: #063d1e; border-color: #0a8a3e; }
#stop { flex: 1; background: #4a0e0e; border-color: #b32424; }
#sendAgain {
  width: 100%;
  margin-top: 12px;
  font-size: 20px;
  font-weight: 600;
  padding: 14px 12px;
  background: #10203a;
  border-color: #345a9e;
}
#pendingLine, #offlineLine {
  margin-top: 8px;
  font-size: 18px;
  color: #bbb;
}
#pending { color: #fff; font-weight: 700; }
#swState { color: #fff; }
#error {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: #4a0e0e;
  border: 2px solid #b32424;
  color: #ffdede;
  font-size: 17px;
  white-space: pre-wrap;
  word-break: break-word;
}
pre {
  margin: 0;
  background: #0b0b0b;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 12px;
  font-size: 19px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 3.5em;
}
/* Tab bar and screens — Tesla cockpit: near-black ground, thin light strokes, large thin
   numerals, generous spacing, no gradients. */
#tabs { display: flex; gap: 8px; border-bottom: 1px solid #333; margin-bottom: 14px; }
#tabs button {
  flex: 1; font-size: 18px; letter-spacing: 0.12em; font-weight: 600;
  padding: 12px 0; background: none; color: #777; border: none; border-bottom: 2px solid transparent;
}
#tabs button.tab-active { color: #fff; border-bottom-color: #fff; }
.tab-hidden { display: none; }
#speedometer {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 46vh; gap: 10px;
}
#speedValue { display: flex; align-items: baseline; gap: 10px; }
#speedKmh { font-size: 150px; font-weight: 200; color: #fff; letter-spacing: -0.02em; line-height: 1; }
#speedUnit { font-size: 28px; font-weight: 300; color: #888; }
#driveStateLine { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 70%; }
#driveMode { font-size: 26px; font-weight: 300; color: #ccc; letter-spacing: 0.2em; }
#driveBar { width: 100%; height: 4px; background: #222; }
/* The fill's width comes from the --load custom property that cockpit.js sets (0-100%), not
   from the container's own width — a percentage on the container would shrink the BAR itself
   and leave the fill a dark stub (found in whole-branch review). */
#driveBar::after { content: ""; display: block; height: 100%; width: var(--load, 0); background: #eaeaea; transition: width 0.15s linear; }
#driveBar.load-traction::after { background: #fff; }
#driveBar.load-regen::after { background: #6a9a6a; }
#cockpitStatus {
  margin: 14px 0 0; padding: 8px 12px; font-size: 15px; color: #aaa;
  background: #0b0b0b; border: 1px solid #222; border-radius: 8px; min-height: auto;
}
#presetTiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#presetTiles button {
  font-size: 22px; padding: 18px 8px; background: #101010; border: 2px solid #333; color: #bbb;
}
#presetTiles button.tile-active { border-color: #fff; color: #fff; }
#presetTiles button[disabled] { opacity: 0.3; }
#sliders { display: flex; flex-direction: column; gap: 18px; margin: 18px 0; }
.sliderRow { display: flex; flex-direction: column; gap: 6px; }
.sliderRow label { font-size: 17px; color: #bbb; display: flex; justify-content: space-between; }
.sliderRow .sliderValue { color: #fff; font-weight: 700; }
.sliderRow input { height: 44px; accent-color: #fff; }
.hidden-note { display: none; color: #c99; font-size: 16px; margin-top: 10px; }
.hidden-note.visible-note { display: block; }
/* The export blob is a copyable text, not a failure: neutral, never the warning red above. */
.hidden-note.note-export { color: #bbb; }