/* Spacing scale 4/8/12/16/24; one gutter (16). Type 13/15/17/22. Touch targets >= 44px. */
:root{--bg:#0b0b0f;--panel:#17171f;--panel2:#1f1f2a;--line:#2a2a36;--fg:#f2f2f5;--mut:#9a9aab;--acc:#ff5a36;--ok:#3ecf8e;--warn:#f5b84a;--bad:#ff6b6b;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--r:12px;--tap:44px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden;max-width:100vw}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) calc(72px + env(safe-area-inset-bottom)) env(safe-area-inset-left)}
header{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4)}
header h1{flex:1;min-width:0}
h1{font-size:22px;line-height:1.2;margin:0;letter-spacing:-.01em}
h2{font-size:13px;margin:var(--s6) 0 var(--s2);color:var(--mut);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
main{padding:0 var(--s4)}
.pill{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:99px;background:var(--panel);font-size:13px;min-height:var(--tap)}
.pill i{width:9px;height:9px;border-radius:50%;background:var(--ok)}.pill.off i{background:var(--bad)}
.tab{display:none}.tab.on{display:block}
button,.btn,select,textarea,input[type=text]{font:inherit;color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);min-height:var(--tap);padding:var(--s2) var(--s4);text-decoration:none}
button,.btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation;transition:filter .12s,background-color .12s}
button:active,.btn:active{filter:brightness(1.3)}button:disabled{opacity:.4;cursor:default}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
button.primary{background:var(--acc);border-color:var(--acc);color:#1a0b06;font-weight:700}
button.big{min-width:96px;font-weight:600}
button.danger{color:var(--bad)}button.sel{outline:2px solid var(--acc)}
textarea{width:100%;resize:vertical}
.row{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0;align-items:center}
.row>button,.row>select{flex:1 1 auto}
.muted{color:var(--mut);font-size:13px}
.list{list-style:none;margin:var(--s2) 0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.list li{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);min-height:var(--tap);overflow-wrap:anywhere}
.list li.tap{cursor:pointer}
nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:#0f0f15;border-top:1px solid var(--line);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);z-index:5}
nav button{flex:1;min-width:0;border:0;border-radius:0;background:none;min-height:56px;padding:var(--s2);color:var(--mut);font-size:13px}
nav button.on{color:var(--acc);font-weight:700;box-shadow:inset 0 2px 0 var(--acc)}
#toast{position:fixed;top:calc(8px + env(safe-area-inset-top));left:var(--s4);right:var(--s4);z-index:20;background:var(--panel2);border:1px solid var(--line);padding:var(--s3) var(--s4);border-radius:var(--r);display:none}
#toast.show{display:block}
/* segmented control (preset) */
.seg{display:flex;flex-wrap:wrap;gap:var(--s1);padding:var(--s1);background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.seg button{flex:1 1 0;min-width:0;border:0;background:none;border-radius:8px;padding:var(--s2) var(--s3);color:var(--mut)}
.seg button[aria-checked=true]{background:var(--panel2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--acc)}
.field{display:flex;flex-direction:column;gap:var(--s1);margin:var(--s2) 0}
.field>label,.field>span{font-size:13px;color:var(--mut)}
/* editor */
#stage{display:flex;justify-content:center;background:#000;border-radius:var(--r);padding:6px 0}
#box{position:relative;aspect-ratio:9/16;height:min(52vh,calc((100vw - 32px) * 16 / 9));background:#000;overflow:hidden;container-type:size}
#vids,#vids video{position:absolute;inset:0;width:100%;height:100%}
#vids video{object-fit:cover;opacity:0;transition:opacity .2s;background:#000}
#vids video.on{opacity:1}
#overlay,#guides{position:absolute;left:0;top:0;width:1080px;height:1920px;transform-origin:0 0;pointer-events:none}
#overlay div{position:absolute;text-align:center;color:#fff;font:800 64px/1.1 system-ui,sans-serif;white-space:pre-line;text-shadow:0 0 6px #000,0 0 6px #000,3px 3px 0 #000}
#overlay .hook{font-size:88px}#overlay .label{font-size:72px}
#overlay .cap{transform:translateY(-50%)}
#overlay .cap b{color:#ffd23f}
#guides i{position:absolute;left:0;right:0;border-top:4px dashed rgba(255,255,0,.55)}
#guides u{position:absolute;top:900px;bottom:0;right:0;background:rgba(255,0,0,.18);border-left:4px dashed rgba(255,0,0,.6)}
#scrub{width:100%;min-height:var(--tap);margin:var(--s2) 0;padding:0;accent-color:var(--acc)}
#strip{display:flex;gap:var(--s1);overflow-x:auto;padding:6px 0 10px;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.blk{position:relative;flex:none;height:64px;border-radius:8px;background:#2b2b3a;border:2px solid transparent;font-size:12px;padding:var(--s1) 6px;overflow:hidden;color:var(--fg);justify-content:flex-start;align-items:flex-start;min-height:64px}
.blk.sel{border-color:var(--acc);background:#3a2a2a;overflow:visible;min-width:100px}
.blk .h{position:absolute;top:0;bottom:0;width:var(--tap);touch-action:none}
.blk .h::after{content:"";position:absolute;top:0;bottom:0;width:8px;background:var(--acc);border-radius:4px}
.blk .h.l{left:-2px}.blk .h.l::after{left:0}.blk .h.r{right:-2px}.blk .h.r::after{right:0}
.words{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0}
.words button{min-height:var(--tap);padding:6px 10px}.words button.emph{border-color:#ffd23f}
.words input{width:110px}
dialog{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:14px;width:min(92vw,520px);max-height:84vh;padding:var(--s4)}
dialog::backdrop{background:#000a}
dialog h2{margin-top:0}
#clipPick{max-height:40vh;overflow:auto}
label.chk{display:flex;gap:var(--s3);align-items:center;min-height:var(--tap);cursor:pointer}
label.chk input{width:24px;height:24px;flex:none;accent-color:var(--acc)}
.bar{height:8px;background:#000;border-radius:4px;overflow:hidden;margin:var(--s2) 0}.bar i{display:block;height:100%;background:var(--acc)}
.st-done{color:var(--ok)}.st-error{color:var(--bad)}.st-running,.st-queued{color:var(--warn)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--panel);padding:var(--s3);border-radius:var(--r);font-size:14px}
video.render{width:100%;max-height:60vh;background:#000;border-radius:8px}
/* clips */
#clipGrid li{display:flex;gap:var(--s3);align-items:center;padding:var(--s2) var(--s3)}
#clipGrid li.off{opacity:.55}
#clipGrid .thumb{flex:none;width:48px;height:85px;border-radius:6px;background:#000;object-fit:cover}
#clipGrid .meta{flex:1;min-width:0}
#clipGrid .meta b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#clipGrid label.chk{flex:none;width:var(--tap);justify-content:center}
.badge{display:inline-block;font-size:12px;line-height:1;padding:var(--s1) var(--s2);border-radius:99px;border:1px solid currentColor;font-weight:600}
.badge.ready{color:var(--ok)}.badge.new,.badge.processing{color:var(--warn)}.badge.error{color:var(--bad)}.badge.missing{color:var(--mut)}
.sticky{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));background:var(--bg);padding:var(--s2) 0}
/* status page */
.kv li{display:grid;grid-template-columns:96px 1fr;gap:var(--s3);align-items:baseline}
.kv .k{color:var(--mut);font-size:13px}
.hero{display:flex;align-items:center;gap:var(--s3);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);margin:var(--s2) 0}
.hero i{width:14px;height:14px;border-radius:50%;background:var(--bad);flex:none}.hero.on i{background:var(--ok)}
.hero b{font-size:17px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}