:root{
  --bg:#20242b; --panel:#2a2f38; --field:#1a1d23; --line:#3a404b;
  --text:#e8eaee; --muted:#9aa1ad; --accent:#d0142c; --ok:#3fb27f; --warn:#e0a53a;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
.app{display:grid;grid-template-columns:minmax(340px,460px) 1fr;min-height:100vh}
aside{background:var(--panel);border-right:1px solid var(--line);overflow:auto;max-height:100vh;display:flex;flex-direction:column}
.brandbar{display:flex;align-items:center;gap:12px;padding:18px 22px 12px}
.brandbar img{height:34px;max-width:140px;object-fit:contain}
.brandbar h1{font-size:18px;font-weight:600;margin:0}
.brandbar small{display:block;color:var(--muted);font-size:12px}
.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 22px}
.tabs button{font:inherit;font-weight:500;background:none;border:0;color:var(--muted);padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--accent)}
.tab{display:none;padding:6px 22px 40px}
.tab.active{display:block}
fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:16px 0 6px}
fieldset:first-child{border-top:0}
legend{font-weight:600;font-size:14px;padding:0 8px 0 0}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 5px}
input[type=text],textarea,select{width:100%;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:9px 10px;font:inherit}
textarea{min-height:100px;resize:vertical}
input[type=range]{width:100%}
input[type=color]{width:44px;height:34px;border:1px solid var(--line);border-radius:6px;background:var(--field);padding:2px}
.row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.row>div{flex:1}
.drop{border:1.5px dashed var(--line);border-radius:8px;padding:14px;text-align:center;color:var(--muted);cursor:pointer;font-size:13px}
.drop:hover{border-color:var(--muted)}
.drop input{display:none}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.thumb{position:relative;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#111}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .n{position:absolute;left:5px;top:5px;background:rgba(0,0,0,.65);font-size:11px;padding:1px 6px;border-radius:4px}
.thumb .ctl{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;background:rgba(0,0,0,.6)}
.thumb button{background:none;border:0;color:#fff;cursor:pointer;padding:4px 7px;font-size:13px}
.hint{font-size:12px;color:var(--muted);margin:6px 0 0}
.check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);margin:9px 0 0}
.check input{width:15px;height:15px;accent-color:var(--accent)}
.sourceLink{display:inline-block;color:#7fb0ff;font-size:12px;margin-top:9px}
.sourceLink[hidden]{display:none}
.btn{font:inherit;font-weight:600;border-radius:7px;border:1px solid var(--line);background:var(--field);color:var(--text);padding:10px 16px;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.small{padding:7px 12px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.drop:focus-within{outline:2px solid #7fb0ff;outline-offset:2px}
.logoPreview{display:flex;align-items:center;gap:14px;margin-top:10px;background:#15181d;border-radius:8px;padding:12px}
.logoPreview img{height:56px;max-width:180px;object-fit:contain;background:repeating-conic-gradient(#2b2f38 0 25%,#232730 0 50%) 0 0/16px 16px;border-radius:4px}
.vo{background:#15181d;border-radius:8px;padding:12px;margin-top:10px;font-size:13px;color:var(--muted)}
.vo b{color:var(--text)}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600;background:var(--line);color:var(--text);vertical-align:middle;margin-left:6px}
.pill.ok{background:#1f4a37;color:#8fe0b6}.pill.off{background:#4a2a1f;color:#f0b48f}
main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:14px}
.stage{height:min(78vh,860px);aspect-ratio:9/16;background:#000;border-radius:10px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.45)}
canvas{width:100%;height:100%;display:block}
.transport{display:flex;gap:10px;align-items:center;width:min(100%,480px)}
.transport input{flex:1}
.time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px;min-width:92px;text-align:right}
.status{font-size:13px;color:var(--muted);min-height:20px;text-align:center;max-width:560px}
.status a{color:#7fb0ff}
.status.err{color:#f0a0a0}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  aside{max-height:none;border-right:0;border-bottom:1px solid var(--line)}
  main{order:-1}
  .stage{height:62vh}
}