:root { color-scheme: dark; --bg: #111; --fg: #eee; --muted: #888; --on: #2e7d32; --off: #8b2a2a; --btn: #2a2a2a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: system-ui, sans-serif; }
body { display: flex; flex-direction: column; -webkit-user-select: none; user-select: none; }
body.center { align-items: center; justify-content: center; padding: 16px; }

header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 16px; font-size: 14px; }
header span:first-child { font-weight: 600; margin-right: auto; }
header a { color: var(--muted); }
.pill { padding: 2px 8px; border-radius: 999px; background: var(--btn); }
.pill.on { background: var(--on); }
.pill.off { background: var(--off); }

main { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 16px 16px; }
video { width: 100%; max-width: 960px; aspect-ratio: 4 / 3; background: #000; border-radius: 8px; object-fit: contain; }

#pad { display: grid; grid-template-areas: ". up ." "left down right"; grid-template-columns: repeat(3, 80px); grid-template-rows: repeat(2, 80px); gap: 8px; touch-action: none; }
#pad button { font-size: 28px; border: 0; border-radius: 12px; background: var(--btn); color: var(--fg); touch-action: none; }
#pad button:active { background: #444; }
.hint { color: var(--muted); font-size: 13px; margin: 0; }
@media (pointer: coarse) { .hint { display: none; } }

.login { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; }
.login h1 { margin: 0 0 8px; text-align: center; }
.login input, .login button { font-size: 16px; padding: 12px; border-radius: 8px; border: 1px solid #333; background: var(--btn); color: var(--fg); }
.login button { background: var(--on); border: 0; }
.error { color: #ff8a80; margin: 0; }