*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#111318;color:#e7e9ee}
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #262a33;background:#15181f;position:sticky;top:0;z-index:5}
.brand{font-weight:700;font-size:17px}.brand small{font-weight:400;color:#8b93a5;margin-left:8px;font-size:12px}
.logo{background:#ffcc00;color:#111;padding:1px 6px;border-radius:4px;margin-right:4px}
nav{display:flex;flex-wrap:wrap;gap:4px}
nav button{background:#1d212a;border:1px solid #2b3040;color:#cfd3dc;padding:6px 10px;border-radius:6px;cursor:pointer}
nav button.on{background:#ffcc00;color:#111;border-color:#ffcc00;font-weight:600}
main{display:grid;grid-template-columns:minmax(320px,440px) 1fr;gap:16px;padding:16px}
@media(max-width:900px){main{grid-template-columns:1fr}}
.panel h2{margin:0 0 6px;font-size:18px}.panel h3{margin:16px 0 4px;font-size:15px}
.hidden{display:none}
.hint{color:#9aa2b4;font-size:12.5px;margin:4px 0 10px}
label{display:block;margin:6px 0}label.inline{display:inline-block}
input,select,textarea{background:#0c0e12;color:#e7e9ee;border:1px solid #2b3040;border-radius:6px;padding:6px 8px;font:inherit;max-width:100%}
input[type=number]{width:90px}input:not([type]),textarea,select{width:100%}
input[type=checkbox]{width:auto}
button{background:#232836;color:#e7e9ee;border:1px solid #343b4d;border-radius:6px;padding:7px 12px;cursor:pointer;margin:4px 4px 4px 0;font:inherit}
button:hover{border-color:#ffcc00}button.primary{background:#ffcc00;color:#111;border-color:#ffcc00;font-weight:700}
button:disabled{opacity:.5;cursor:wait}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;align-items:end}
.drop{border:2px dashed #343b4d;border-radius:10px;padding:14px;text-align:center;color:#9aa2b4}
.drop.over{border-color:#ffcc00}
.clip{border:1px solid #2b3040;border-radius:8px;padding:8px;margin:8px 0;background:#161a22}
.clip .meta{color:#9aa2b4;font-size:12px}
.clip button{padding:3px 8px;font-size:12px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.out{margin-top:8px;font-size:13px}
.out .ok{color:#7ee2a8}.out .warn{color:#ffb86b}
.stageWrap{background:#000;border-radius:10px;display:flex;justify-content:center;align-items:center;min-height:240px;overflow:hidden}
#stage{max-width:100%;max-height:62vh;background:#000}
.controls{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
.controls select{width:auto}
#status{color:#9aa2b4;font-size:13px}
#timeline{display:flex;height:34px;border-radius:6px;overflow:hidden;background:#0c0e12;margin:6px 0}
#timeline div{height:100%;border-right:1px solid #111318;font-size:10px;overflow:hidden;color:#111;padding:2px;white-space:nowrap}
#edlList{font-size:12px;max-height:240px;overflow:auto;color:#aab1c2}
#edlList .seg{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid #1f232c;padding:3px 0}
#edlList .seg button{padding:0 6px;margin:0;font-size:11px}
.frames{display:flex;flex-wrap:wrap;gap:6px}
.frames canvas{width:150px;cursor:pointer;border:2px solid transparent;border-radius:4px}
.frames canvas.sel{border-color:#ffcc00}
#thumb{width:100%;border-radius:8px;cursor:crosshair;margin-top:6px}
#thumbSizes{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:8px 0}
#thumbSizes figure{margin:0;font-size:11px;color:#9aa2b4}
.lensbar{display:flex;height:26px;align-items:flex-end;gap:1px;margin:6px 0}
.lensbar div{background:#4a90e2;min-width:2px;flex:1}
.lensbar div.long{background:#ff8a4c}
.pill{display:inline-block;padding:1px 7px;border-radius:10px;background:#232836;margin:2px;font-size:12px}
.ref{margin:12px 0;border:1px solid #2b3040;border-radius:8px;padding:8px}
.ref summary{cursor:pointer;font-weight:600}
#ytBox iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:6px;margin-top:6px}
a{color:#ffcc00}

#simCanvas{width:100%;height:120px;border-radius:6px;background:#0c0e12}
.seg.warn{color:#ffb86b}