:root { --bg:#f6f7f9; --fg:#1b1f24; --muted:#5b6470; --card:#fff; --ok:#1f9d55; --warn:#d97706; --err:#dc2626; --na:#9aa3ad; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14171b; --fg:#e8eaed; --muted:#9aa3ad; --card:#1d2126; }
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; flex-wrap:wrap; gap:8px; }
header h1 { font-size:1.2rem; margin:0; }
header small { color:var(--muted); font-weight:normal; }
a { color:inherit; }
main { display:grid; gap:16px; padding:0 16px 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { main { grid-template-columns: 2fr 1fr; } .controls { grid-column: 1 / -1; } }
section { background:var(--card); border-radius:12px; padding:12px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hint { color:var(--muted); font-size:.9rem; }
button, .file { padding:8px 14px; border-radius:8px; border:1px solid var(--muted); background:transparent; color:inherit; cursor:pointer; font:inherit; }
.file input { display:none; }
select { font:inherit; padding:6px; }
.stage { position:relative; }
.stage video { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } /* non display:none: Firefox smette di aggiornare i fotogrammi */
.stage canvas { width:100%; height:auto; display:block; border-radius:8px; background:#000; }
#hold { font-size:1.1rem; margin-bottom:8px; }
.cue { min-height:3em; font-weight:600; }
ul { list-style:none; padding:0; margin:0; }
li { padding:6px 0; border-bottom:1px solid rgba(127,127,127,.2); display:flex; justify-content:space-between; gap:8px; }
.s-ok { color:var(--ok); } .s-warn { color:var(--warn); } .s-err { color:var(--err); } .s-na { color:var(--na); }
table { border-collapse:collapse; width:100%; }
td, th { padding:6px; border-bottom:1px solid rgba(127,127,127,.2); text-align:left; }
.diagram { display:grid; grid-template-columns: 1fr; gap:12px; margin:8px 0 12px; }
@media (min-width: 700px) { .diagram { grid-template-columns: 1fr 1fr; } }
.diagram svg { width:100%; height:auto; background:var(--bg); border-radius:8px; }
.dg-title { font: 600 13px system-ui; fill:var(--fg); }
.dg-label { font: 600 12px system-ui; fill:var(--fg); }
.dg-small { font: 10.5px system-ui; fill:var(--muted); }
[hidden] { display:none !important; }
.label-video { display:block; width:100%; }
.full { width:100%; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:16px; }
.login-box { background:var(--card); border-radius:12px; padding:24px; width:min(100%, 360px); display:block; }
.login-box h1 { font-size:1.3rem; margin:0 0 16px; }
.login-box label { display:block; margin-bottom:12px; }
.login-box input { display:block; width:100%; margin-top:4px; padding:10px; font:inherit; border-radius:8px; border:1px solid var(--muted); background:var(--bg); color:inherit; }
.login-box button { width:100%; margin-top:8px; }
.msg { color:var(--err); min-height:1.5em; }
button:disabled, .file:has(input:disabled) { opacity:.45; cursor:wait; }