:root{
  --bg:#0d0f13;
  --bg2:#141821;
  --bg3:#1b202b;
  --line:#252b38;
  --fg:#e7ecf4;
  --dim:#8d97a8;
  --acc:#4fb3ff;
  --acc2:#2b7fd0;
  --bad:#ff6b6b;
  --rec:#ff4d5a;
  --r:8px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}

/* ------------------------------------------------------------------ каркас */
.topbar{
  min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 14px;background:var(--bg2);border-bottom:1px solid var(--line);flex-wrap:nowrap;
}
.brand{min-width:0;overflow:hidden}
.brand b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-actions{flex:0 0 auto}
.brand{display:flex;align-items:center;gap:9px;letter-spacing:.02em}
.brand .dot{width:10px;height:10px;border-radius:50%;
  background:linear-gradient(90deg,var(--acc) 0 50%,#ff9f43 50% 100%);box-shadow:0 0 10px rgba(79,179,255,.6)}
.top-actions{display:flex;gap:8px;align-items:center}
/* пресеты в шапке: список сжимается первым, кнопки — нет */
.top-presets{display:flex;gap:6px;align-items:center;flex:0 1 auto;min-width:0}
.top-presets .sel{flex:0 1 230px;min-width:96px;padding:5px 8px;color:var(--fg)}
.top-presets .sel:focus{outline:none;border-color:var(--acc)}

.layout{
  position:absolute;top:46px;bottom:50px;left:0;right:0;display:flex;
}
.stage{
  flex:1;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(45deg,#101319 25%,transparent 25%) -10px 0/20px 20px,
    linear-gradient(-45deg,#101319 25%,transparent 25%) -10px 0/20px 20px,
    linear-gradient(45deg,transparent 75%,#101319 75%) -10px 0/20px 20px,
    linear-gradient(-45deg,transparent 75%,#101319 75%) -10px 0/20px 20px,
    #0a0c10;
  overflow:hidden;
}
.frame-box{position:relative;box-shadow:0 10px 50px rgba(0,0,0,.65);border-radius:2px;overflow:hidden}
.frame-box canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* оверлей поверх всей сцены: направляющие рисуются и за краем кадра */
#overlay{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none;z-index:2}
.offscreen{position:absolute;left:-99999px;top:0;width:2px;height:2px}
video{position:absolute;left:-99999px;top:0;width:2px;height:2px}

.panel{
  width:392px;flex:0 0 392px;overflow-y:auto;overflow-x:hidden;
  background:var(--bg2);border-left:1px solid var(--line);padding:8px 10px 60px;
}
.panel::-webkit-scrollbar{width:10px}
.panel::-webkit-scrollbar-thumb{background:#2a3140;border-radius:6px}

.transport{
  position:absolute;bottom:0;left:0;right:0;height:50px;display:flex;align-items:center;gap:10px;
  padding:0 14px;background:var(--bg2);border-top:1px solid var(--line);
}
.transport>*{flex:0 0 auto}
.scrub{flex:1 1 60px;min-width:40px;accent-color:var(--acc)}
.time{font-variant-numeric:tabular-nums;color:var(--dim);min-width:62px;text-align:center}
.badge{
  font-variant-numeric:tabular-nums;background:var(--bg3);border:1px solid var(--line);
  border-radius:6px;padding:3px 9px;min-width:74px;text-align:center;color:var(--acc)
}
.badge.audio{cursor:pointer;min-width:0;padding:3px 8px;color:var(--fg)}
.badge.audio:hover{border-color:#33405a;background:#232a37}
.badge.audio.off{color:var(--dim)}
.hint{color:#5c6577;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ------------------------------------------------------------------ кнопки */
.btn{
  background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 11px;cursor:pointer;transition:.12s;white-space:nowrap;
}
.btn:hover{background:#232a37;border-color:#33405a}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--bg3)}
.btn.on{background:var(--acc2);border-color:var(--acc);color:#fff}
.btn.danger:hover{border-color:var(--bad);color:var(--bad)}
.btn.wide{display:block;width:100%;text-align:center}
.btn.small{padding:5px 8px}
.btn.play{width:44px;text-align:center}
.btn.rec{border-color:#5a2b31;color:#ff9aa2}
.btn.rec.on{background:var(--rec);border-color:var(--rec);color:#fff}
.btn.rec:hover{border-color:var(--rec)}

/* ------------------------------------------------------------------ секции */
.sec{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--bg);overflow:hidden}
.sec-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:var(--bg3);border:0;padding:9px 11px;cursor:pointer;text-align:left;
}
.sec-head:hover{background:#212836}
.sec-title{font-weight:650;letter-spacing:.01em}
.sec-chev{color:var(--dim)}
.sec-body{padding:9px 11px 12px}
.sec.closed .sec-body{display:none}

/* -------------------------------------------------------------------- ряды */
.row{display:flex;align-items:center;gap:8px;margin:6px 0;min-height:26px}
.row .lab{flex:0 0 132px;color:var(--dim);font-size:12px;line-height:1.25}
.row.btns{flex-wrap:wrap;gap:6px}
.file-row{margin:2px 0 6px}
.fname{color:var(--dim);font-size:11.5px;margin:0 0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sl-wrap{flex:1;display:flex;align-items:center;gap:7px;min-width:0}
.sl{flex:1;min-width:0;accent-color:var(--acc);height:18px}
.num{
  width:62px;flex:0 0 62px;background:var(--bg3);border:1px solid var(--line);
  border-radius:6px;padding:3px 5px;text-align:right;font-variant-numeric:tabular-nums;
}
.num:focus{outline:none;border-color:var(--acc)}
.unit{color:#5c6577;font-size:11px;flex:0 0 auto}

.col{width:40px;height:26px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.txt{flex:1;min-width:0;background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:4px 7px}
.txt:focus{outline:none;border-color:var(--acc)}
.sel{flex:1;min-width:0;background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:4px 6px;cursor:pointer}
.tg{
  background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:4px 12px;cursor:pointer;
  min-width:64px;color:var(--dim)
}
.tg.on{background:var(--acc2);border-color:var(--acc);color:#fff}

.chips{display:flex;flex-wrap:wrap;gap:5px;flex:1}
.chip{
  background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:4px 9px;cursor:pointer;color:var(--dim)
}
.chip:hover{background:#232a37}
.chip.on{background:var(--acc2);border-color:var(--acc);color:#fff}

.note{margin:7px 0 2px;color:#6b7486;font-size:11.5px;line-height:1.4}
.note.bad{color:#ffa8a8}

/* ------------------------------------------------------------------- карточки */
.items{margin-top:8px}
.card{border:1px solid var(--line);border-radius:8px;margin:7px 0;background:var(--bg2)}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-bottom:1px solid var(--line)}
.card-title{font-size:12px;color:var(--dim);font-weight:600}
.card-tools{display:flex;gap:4px}
.mini{
  background:transparent;border:1px solid var(--line);border-radius:5px;
  width:24px;height:22px;line-height:1;cursor:pointer;color:var(--dim);padding:0
}
.mini:hover{background:var(--bg3);color:var(--fg)}
.mini.on{color:var(--acc);border-color:var(--acc2)}
.mini.danger:hover{color:var(--bad);border-color:var(--bad)}
.card-body{padding:6px 9px 9px}
.card-body .row .lab{flex:0 0 120px}

/* -------------------------------------------------------------------- прочее */
.warn{
  position:fixed;top:52px;left:50%;transform:translateX(-50%);z-index:60;max-width:min(760px,92vw);
  background:#3a2a12;border:1px solid #6b4c1d;color:#ffd9a0;padding:9px 14px;border-radius:8px;
  font-size:12px;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.5)
}
.warn.hidden{display:none}
.toast{
  position:fixed;left:50%;bottom:64px;transform:translateX(-50%) translateY(14px);
  background:#1e2533;border:1px solid #33405a;color:var(--fg);padding:9px 15px;border-radius:9px;
  font-size:12.5px;opacity:0;pointer-events:none;transition:.2s;z-index:70;max-width:min(680px,92vw);
  box-shadow:0 8px 30px rgba(0,0,0,.55)
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* узкая шапка: сначала прячем подписи, кнопка записи не должна уезжать за край */
@media (max-width:820px){
  .brand b{display:none}
  #swap,#toggleGuides,#savePreset,#resetAll{font-size:0;padding:6px 9px}
  #swap::after{content:'⇄';font-size:13px}
  #toggleGuides::after{content:'◫';font-size:13px}
  #savePreset::after{content:'💾';font-size:13px}
  #resetAll::after{content:'↺';font-size:13px}
  .top-presets .sel{flex-basis:150px}
  .time{min-width:52px;font-size:11.5px}
  .badge{min-width:62px;padding:3px 6px}
}
@media (max-width:1080px){
  .panel{width:330px;flex-basis:330px}
  .row .lab{flex-basis:112px}
  .hint{display:none}
}
/* узкое окно: панель уезжает вниз, кадру остаётся вся ширина */
@media (max-width:760px){
  .layout{flex-direction:column}
  .stage{flex:1 1 46%;min-height:180px}
  .panel{width:auto;flex:1 1 54%;border-left:0;border-top:1px solid var(--line)}
  .row .lab{flex-basis:104px}
}

/* --------------------------------------------------- подразделы и новые поля */
.sub{border:1px dashed var(--line);border-radius:7px;margin:7px 0;background:rgba(0,0,0,.12)}
.sub-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px;
  background:transparent;border:0;color:var(--dim);font-size:11.5px;font-weight:600;
  padding:6px 8px;cursor:pointer;text-align:left
}
.sub-head:hover{color:var(--fg)}
.sub-body{padding:2px 8px 8px}
.sub.closed .sub-body{display:none}

.row.col{display:block}
.lab.wide{display:block;margin-bottom:4px}
.area{
  width:100%;background:var(--bg3);border:1px solid var(--line);border-radius:6px;
  color:var(--fg);padding:6px 8px;font:11.5px/1.35 ui-monospace,Menlo,monospace;resize:vertical
}
.btn.primary{background:var(--acc2);border-color:var(--acc);color:#fff}
.btn.primary:hover{background:var(--acc)}
.btn.primary:disabled,.btn.danger:disabled{opacity:.45;cursor:default}
.btn.danger{background:#4a1f24;border-color:#7c333c;color:#ffc9cd}
.btn.small{padding:4px 8px;font-size:11.5px}

.preset-row{
  display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:7px;
  padding:4px 6px;margin:5px 0;background:var(--bg3)
}
.preset-name{
  flex:1;min-width:0;text-align:left;background:transparent;border:0;color:var(--fg);
  cursor:pointer;padding:3px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px
}
.preset-name:hover{color:var(--acc)}

/* -------------------------------------------------------------- эталон */
.sec-title{flex:1 1 auto}
.ref-pill{
  flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.02em;border-radius:999px;
  padding:2px 9px;margin-right:10px;background:#1c3a29;color:#7fd48c
}
.ref-pill.lv-warn{background:#3d3212;color:#ffd08a}
.ref-pill.lv-bad{background:#4a1f24;color:#ffb3b3}
.ref-summary{font-size:12px;line-height:1.4;margin:2px 0 8px;color:#7fd48c}
.ref-summary.lv-warn{color:#ffd08a}
.ref-summary.lv-bad{color:#ffb3b3}
.ref-item{display:flex;align-items:flex-start;gap:8px;padding:5px 0;border-top:1px solid var(--line)}
.ref-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;margin-top:5px;background:#7fd48c}
.ref-dot.lv-warn{background:#ffd08a}
.ref-dot.lv-bad{background:var(--bad);box-shadow:0 0 8px rgba(255,107,107,.6)}
.ref-text{flex:1;min-width:0;font-size:12px;line-height:1.4;color:var(--dim);word-break:break-word}
.ref-text b{color:var(--fg);font-weight:600}
.ref-item.lv-warn .ref-text{color:#d9c8a0}
.ref-item.lv-bad .ref-text{color:#ffc9c9}
.ref-fix{flex:0 0 auto;margin-top:1px}
.ref-inline{align-items:flex-start;flex-wrap:wrap}
.ref-inline .note{flex:1 1 200px;margin:4px 0}
.ref-inline .btn{margin-top:4px}
.note.lv-warn{color:#ffd08a}

/* ------------------------------------------------------------------- очередь */
.modal-back{
  position:fixed;inset:0;background:rgba(4,6,10,.72);z-index:80;
  display:flex;align-items:center;justify-content:center;padding:20px
}
.modal-back.hidden{display:none}
.modal{
  width:min(1120px,96vw);height:min(760px,92vh);background:var(--bg2);
  border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;
  box-shadow:0 24px 80px rgba(0,0,0,.7);overflow:hidden
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--bg3)
}
.modal-body{flex:1;display:flex;min-height:0}
.modal-col{flex:1 1 50%;min-width:0;overflow-y:auto;padding:12px 14px}
.log-col{border-left:1px solid var(--line);background:rgba(0,0,0,.18);display:flex;flex-direction:column}

.packs{display:block}
.pack{border:1px solid var(--line);border-radius:9px;background:var(--bg3);margin:0 0 10px;padding:8px 10px}
.pack.active{border-color:var(--acc2);box-shadow:0 0 0 1px rgba(79,179,255,.25)}
.pack-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pack-head .txt{flex:1;min-width:0}
.pack-grid{display:block}
.frow{display:flex;align-items:center;gap:8px;margin:5px 0;flex-wrap:wrap}
.frow-lab{flex:0 0 92px;color:var(--dim);font-size:11.5px}
.frow-lab.wide{flex:1 1 auto}
.frow-info{flex:1 1 100%;color:#6b7486;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .sel{flex:1}
.pack-status{margin-top:6px;font-size:11.5px;color:var(--dim)}
.pack-status.running{color:var(--acc)}
.pack-status.done{color:#7fd48c}
.pack-status.error{color:var(--bad)}

.opts{border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin:12px 0;background:rgba(0,0,0,.15)}
.opts-title{font-size:11.5px;font-weight:600;color:var(--dim);margin-bottom:6px}
.run-row{margin-top:10px}

.cur{border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--bg2);margin-bottom:10px}
.cur-idle{color:var(--dim);font-size:12px}
.cur-line{font-size:12px;margin:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cur-line.dim{color:var(--dim);font-size:11px}
.bar{height:6px;background:var(--bg3);border-radius:4px;overflow:hidden;margin:7px 0 4px}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));transition:width .2s}

.log{
  flex:1;min-height:120px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;background:#0b0e14;font:11.5px/1.5 ui-monospace,Menlo,monospace
}
.log-line{white-space:pre-wrap;word-break:break-word;color:#9aa6b8;padding:1px 0}
.log-line.ok{color:#8fe0a0}
.log-line.error{color:#ff9a9a}
.log-line.warn{color:#ffd08a}
.log-line.skip{color:#7d879a}
.log-line.info{color:var(--acc)}

@media (max-width:860px){
  .modal-body{flex-direction:column}
  .log-col{border-left:0;border-top:1px solid var(--line)}
  #batchBtn{font-size:0;padding:6px 9px}
  #batchBtn::after{content:'▦';font-size:13px}
}