:root { --bg:#12151a; --card:#1b2028; --fg:#e8ecf1; --muted:#8b95a5; --accent:#3b9eff; --ok:#3ecf8e; --warn:#f5a524; --bad:#ef4444; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.4 system-ui, sans-serif; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; border-bottom:1px solid #262c36; flex-wrap:wrap; }
h1 { margin:0; font-size:20px; }
h2 { margin:0 0 8px; font-size:15px; }
.pills { display:flex; gap:8px; }
.pill { padding:3px 10px; border-radius:99px; background:#262c36; font-size:12px; }
.pill.off { background:#4a1d1d; color:#ffb4b4; }
.pill.on { background:#16382a; color:#8df0c0; }
.pill.warn { background:#4a3510; color:#ffd699; }
main { display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:16px; padding:16px 20px; max-width:1200px; margin:auto; }
@media (max-width: 860px) { main { grid-template-columns: 1fr; } }
.video-wrap { position:relative; background:#000; border-radius:10px; overflow:hidden; aspect-ratio:4/3; }
video { width:100%; height:100%; object-fit:contain; display:block; }
.video-msg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); background:#000a; }
.video-msg[hidden] { display:none; }
.turn-banner { position:absolute; top:10px; left:10px; padding:6px 12px; border-radius:8px; background:#16382acc; font-weight:600; }
.turn-banner.owner { background:#4a3510cc; }
.gauges { display:grid; gap:10px; margin-top:12px; }
.gauge label { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; margin-bottom:4px; }
.bar { position:relative; height:16px; background:#262c36; border-radius:8px; overflow:hidden; }
.bar .fill { position:absolute; top:0; bottom:0; left:50%; width:0; background:var(--accent); }
.bar .mid { position:absolute; left:50%; top:0; bottom:0; width:2px; background:#0008; }
.driver-line { font-size:14px; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.card { background:var(--card); border-radius:10px; padding:14px; margin-bottom:12px; }
.card[hidden] { display:none; }
form { display:flex; gap:8px; }
input { flex:1; min-width:0; padding:8px 10px; border-radius:8px; border:1px solid #333b48; background:#10131a; color:var(--fg); }
button { padding:8px 14px; border:0; border-radius:8px; background:var(--accent); color:#fff; font-weight:600; cursor:pointer; }
button.secondary { background:#2c3441; }
.row { display:flex; gap:8px; }
ol { margin:0; padding-left:22px; }
ol li.me { color:var(--accent); font-weight:600; }
summary { cursor:pointer; color:var(--muted); }
details form { margin-top:8px; }
.axes { font-family:ui-monospace, monospace; font-size:11px; word-break:break-word; }

/* ---------- camera pan/tilt ---------- */
.camera-row { display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap; }
.camera-row label { display:flex; align-items:center; gap:8px; flex:1; min-width:150px; color:var(--muted); font-size:13px; }
.camera-row input[type=range] { flex:1; padding:0; accent-color:var(--accent); touch-action:none; }
.camera-row input:disabled { opacity:.6; }

/* ---------- touch / phone ---------- */
body { touch-action: manipulation; }
.fs-btn { position:absolute; top:10px; right:10px; padding:4px 10px; font-size:18px; opacity:.8; }
.touch-ui { display:none; gap:10px; height:170px; margin-top:10px; }
body.can-drive.touch .touch-ui { display:flex; }
.pad { flex:1; position:relative; touch-action:none; user-select:none; -webkit-user-select:none;
  background:#ffffff0d; border:1px solid #ffffff22; border-radius:18px; overflow:hidden; }
.pad.active { background:#3b9eff1f; border-color:#3b9eff88; }
.pad.disabled { opacity:.3; pointer-events:none; }
.pad .knob { position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%;
  background:#3b9effaa; box-shadow:0 0 0 3px #ffffff33; pointer-events:none; }
.pad .hint { position:absolute; left:0; right:0; bottom:8px; text-align:center; font-size:12px; color:#ffffff88; pointer-events:none; }
.touch-mid { display:flex; flex-direction:column; justify-content:center; gap:8px; width:110px; }
.small-btn { padding:8px 6px; font-size:12px; }
.small-btn.on { background:var(--accent); }

/* phone in landscape or fullscreen: video fills the screen, pads float over its sides */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  header { padding:6px 12px; }
  main { padding:8px; }
  .stage { position:relative; }
  .video-wrap { aspect-ratio:auto; height:calc(100svh - 16px); }
}
.stage:fullscreen { background:#000; position:relative; }
.stage:fullscreen .video-wrap { aspect-ratio:auto; height:100%; border-radius:0; }
.stage:fullscreen .gauges { display:none; }
@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  body.can-drive.touch .gauges { display:none; }
  .touch-ui { position:absolute; left:8px; right:8px; bottom:8px; top:56px; height:auto; margin:0; }
  .pad { flex:0 0 30%; background:#00000022; }
  .touch-mid { flex:1; justify-content:flex-end; align-items:center; }
}
.stage:fullscreen .touch-ui { position:absolute; left:12px; right:12px; bottom:12px; top:56px; height:auto; margin:0; }
.stage:fullscreen .pad { flex:0 0 30%; background:#00000022; }
.stage:fullscreen .touch-mid { flex:1; justify-content:flex-end; align-items:center; }

@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  .camera-row { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:min(46%, 380px); margin:0;
    gap:8px; padding:4px 10px; background:#000a; border-radius:10px; flex-wrap:nowrap; z-index:2; }
  .camera-row label { min-width:0; }
}
.stage:fullscreen .camera-row { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:min(46%, 380px);
  margin:0; gap:8px; padding:4px 10px; background:#000a; border-radius:10px; flex-wrap:nowrap; z-index:2; }
.stage:fullscreen .camera-row label { min-width:0; }

.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#3a1d1d; color:#ffd0d0; padding:10px 16px; border-radius:8px; }
.toast[hidden] { display:none; }