:root {
  color-scheme: dark;
  --bg:#0b1020; --panel:#151c31; --panel2:#1c2540; --text:#eef3ff;
  --muted:#aeb8d2; --accent:#3dd6c6; --danger:#ff5364; --warning:#ffca55;
}
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
header { position:sticky; top:0; z-index:10; padding:12px 20px; display:flex; justify-content:space-between; align-items:center; background:#0b1020ee; backdrop-filter:blur(10px); border-bottom:1px solid #2d3857; }
header h1 { margin:0 0 4px; font-size:1.25rem; }
main { max-width:1400px; margin:auto; padding:16px; }
.panel { background:var(--panel); border:1px solid #2a3657; border-radius:16px; padding:16px; box-shadow:0 12px 30px #0003; }
.panel h2 { margin-top:0; font-size:1.05rem; }
.camera-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.camera-panel img { width:100%; display:block; border-radius:10px; background:#000; aspect-ratio:16/9; object-fit:contain; }
.control-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
button,input { font:inherit; }
button { border:0; border-radius:10px; padding:10px 14px; background:#2d3c63; color:white; cursor:pointer; font-weight:650; }
button:hover { filter:brightness(1.12); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.accent { background:var(--accent); color:#071512; }
button.danger { background:var(--danger); }
button.secondary { background:#27304a; }
label { display:block; margin:12px 0; color:var(--muted); }
input[type=range] { width:100%; }
input[type=color] { width:100%; height:48px; border:0; border-radius:10px; background:transparent; }
.button-row,.button-grid,.swatches { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.button-grid button { flex:1 1 28%; }
.swatch button { background:var(--c); color:#101010; text-shadow:0 1px #fff8; }
.dpad { text-align:center; }
.dpad button { min-width:62px; margin:4px; }
.hint,.status-line { color:var(--muted); font-size:.9rem; }
.danger-zone { border-color:#783745; }
.hold-button.holding { animation:pulse .45s infinite alternate; }
@keyframes pulse { to { transform:scale(.97); filter:brightness(1.3); } }
.badge { border-radius:999px; padding:3px 9px; font-size:.8rem; }
.badge.ok { background:#164e45; color:#9dfff0; }
.badge.warning { background:#5a4317; color:#ffe2a0; }
.badge.error { background:#5d202a; color:#ffb9c1; }
pre { white-space:pre-wrap; overflow:auto; max-height:420px; color:#cce3ff; }
.panel-title { display:flex; justify-content:space-between; align-items:center; }
.toast { position:fixed; right:20px; bottom:20px; z-index:100; background:#224f47; padding:12px 16px; border-radius:10px; box-shadow:0 10px 30px #0008; }
.error-toast,.error { background:#6d2632; color:#ffd8dd; padding:10px; border-radius:8px; }
.login-page { min-height:100vh; display:grid; place-items:center; }
.login-card { width:min(420px,calc(100% - 30px)); padding:26px; background:var(--panel); border-radius:16px; border:1px solid #2a3657; }
.login-card input { width:100%; margin-top:8px; padding:12px; border-radius:9px; border:1px solid #405077; background:#0f162a; color:white; }
.login-card button { width:100%; margin-top:14px; }
@media (max-width:950px) { .control-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px) {
  .camera-grid,.control-grid { grid-template-columns:1fr; }
  main { padding:10px; }
}