:root{
  --bg:#0E1116; --surface:#151A21; --raised:#1C232C; --line:#2A333E; --fg:#E8ECF1; --muted:#8E9AA8;
  --accent:#F0C430; --on-accent:#14110A; --rec:#FF4D4D; --rec-soft:#3D1416; --go:#34D399; --go-soft:#0F3A2B; --warn:#FF9F43;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 var(--font)}
button,select,input,textarea{font:inherit;color:inherit}
.top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:10px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:5}
.brand{display:flex;gap:10px;align-items:center}.brand b{font-size:17px;display:block;line-height:1.1}.brand small{color:var(--muted);font-size:12px}
.tabs{display:flex;gap:4px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:13px;color:var(--muted);cursor:pointer}
.tabs button.on{color:var(--fg);border-color:var(--accent)}
.status{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px}
main{padding:16px max(16px,env(safe-area-inset-left,0px)) 40px;max-width:1500px;margin:0 auto}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.pill.rec{background:var(--rec-soft);color:var(--rec);border-color:transparent}
.pill.go{background:var(--go-soft);color:var(--go);border-color:transparent}
.pill.warn{color:var(--warn)}
.dot{width:9px;height:9px;border-radius:50%;background:currentColor;display:inline-block}
.rec .dot{animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.rec .dot{animation:none}}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
@media (max-width:980px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card h2{margin:0;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stage{position:relative;background:#000;border-radius:8px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line)}
.stage canvas{width:100%;height:100%;display:block}
.stage .empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted);padding:20px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{border:1px solid var(--line);background:var(--raised);border-radius:8px;padding:9px 14px;font-weight:600;cursor:pointer}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.recbtn{background:var(--rec);color:#fff;border-color:var(--rec);font-size:16px;padding:12px 22px}
.btn.stopbtn{background:var(--raised);color:var(--rec);border-color:var(--rec);font-size:16px;padding:12px 22px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);letter-spacing:.04em;min-width:0}
label.f select,label.f input,textarea{background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:8px 10px;color:var(--fg);font-size:14px;width:100%}
.check{display:flex;gap:8px;align-items:center;font-size:14px}
.cue-now{border-left:4px solid var(--accent);padding:6px 12px}
.cue-now .n{font:700 30px/1.1 var(--mono)}
.cue-now .t{font-size:17px}
.cue-now .s{font-size:12px;color:var(--muted)}
.list{display:flex;flex-direction:column;max-height:340px;overflow:auto}
.list .it{display:grid;grid-template-columns:86px 1fr;gap:8px;padding:6px 2px;border-top:1px solid var(--line);font-size:14px}
.list .it:first-child{border-top:0}
.list .tm{font:600 13px var(--mono);color:var(--muted)}
.list .it.flag .nm{color:var(--warn)}
.list .it.note .nm{color:#9CC4FF}
.list button.it{background:none;border:0;border-top:1px solid var(--line);text-align:left;cursor:pointer;width:100%}
.list button.it:hover{background:var(--raised)}
.list button.it.on{background:var(--raised);box-shadow:inset 3px 0 0 var(--accent)}
.muted{color:var(--muted)}.mono{font-family:var(--mono)}.small{font-size:13px}
.takes{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:980px){.takes{grid-template-columns:1fr}}
.take{display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--raised);cursor:pointer;text-align:left;width:100%}
.take.on{border-color:var(--accent)}
.take b{font-size:14px}
video{width:100%;border-radius:8px;background:#000;aspect-ratio:16/9}
code{font-family:var(--mono);font-size:13px;background:var(--raised);padding:1px 5px;border-radius:4px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px}
.kv dt{color:var(--muted)}.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.warnbox{border:1px solid var(--warn);color:var(--warn);border-radius:8px;padding:8px 12px;font-size:14px}
#toast{position:fixed;bottom:max(18px,env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--raised);border:1px solid var(--line);padding:10px 16px;border-radius:8px;z-index:20;max-width:90vw}