:root { color-scheme: dark; font-family: system-ui, sans-serif; }
body { margin: 0; background: #101114; color: #eef0f4; }
main { width: min(1100px, calc(100% - 24px)); margin: 20px auto; }
h1 { font-size: 1.25rem; font-weight: 600; }
.page-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
video { display: block; width: 100%; aspect-ratio: 16/9; background: #000; object-fit: contain; }
.toolbar { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
button { padding: 8px 14px; cursor: pointer; }
#state { color: #ffca67; }
#state[data-state="connected"] { color: #6ee7a0; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 8px; margin: 0; }
.stats div { background: #1c1f25; padding: 10px; }
dt { color: #a9b0bd; font-size: .78rem; }
dd { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.note { color: #9098a6; font-size: .8rem; }
.controls { background: #1c1f25; margin: 12px 0; padding: 10px 14px; }
.controls p { margin-top: 0; }
.controls label { display: flex; align-items: center; gap: 8px; }
.controls input { width: min(350px, 55vw); }
#direction { display: inline-block; margin-top: 10px; color: #ffca67; }
kbd { background: #303540; border: 1px solid #596170; border-radius: 3px; padding: 1px 5px; }
.touch-pad { display:grid; grid-template-columns:repeat(3,76px); grid-template-rows:repeat(3,62px); justify-content:center; gap:8px; margin:14px auto 4px; touch-action:none; user-select:none; }
.drive { font-size:20px; font-weight:700; border:1px solid #596170; border-radius:9px; background:#303540; color:#fff; touch-action:none; }
.drive:active { background:#536076; transform:scale(.97); }
.drive.forward { grid-column:2; grid-row:1; }.drive.left { grid-column:1; grid-row:2; }.drive.stop { grid-column:2; grid-row:2; font-size:14px; background:#8d3030; }.drive.right { grid-column:3; grid-row:2; }.drive.backward { grid-column:2; grid-row:3; }
.guest-panel { background:#1c1f25; padding:14px; margin:12px 0; }
.guest-panel h2 { margin:0 0 10px; font-size:1rem; }
.guest-create { display:flex; flex-wrap:wrap; gap:8px; align-items:end; }
.guest-create label { display:grid; gap:4px; }.guest-create input { width:100px; }
.guest-create input,.guest-create select,#guest-url,.login-card input { padding:8px; background:#101114; color:#eef0f4; border:1px solid #596170; border-radius:4px; }
#guest-result { margin-top:10px; }#guest-url { width:min(650px,70%); }
.quiet { padding:5px 9px; background:transparent; color:#eef0f4; border:1px solid #596170; }
.login-page { min-height:100vh; display:grid; place-items:center; }
.login-card { width:min(390px,calc(100% - 28px)); background:#1c1f25; padding:24px; border-radius:10px; }
.login-card form,.login-card label { display:grid; gap:7px; }.login-card form { gap:14px; }.login-card output { color:#ff8686; min-height:1.3em; }
@media (max-width: 650px) { .stats { grid-template-columns: repeat(2, 1fr); } }