:root{
  --bg:#171511; --bg2:#1c1914; --surface:#242019; --surface2:#2a251d;
  --line:#3a332a; --line2:#4d4437;
  --text:#ede6d8; --muted:#9a8f7d; --faint:#6f6555;
  --amber:#f2a83b; --amber2:#ffb954; --sky:#8fb8d8; --moss:#a8c490; --red:#d9705b;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --sans:'IBM Plex Sans',system-ui,'Segoe UI',sans-serif;
  --disp:'Alumni Sans','Arial Narrow',Impact,sans-serif;
}

/* ── daytime palette (paper-light, amber-accented) ─────────────────── */
[data-theme="day"]:root{
  --bg:#fdf8ee; --bg2:#faf5ea; --surface:#fff9ef; --surface2:#fff5e0;
  --line:#ddd5c4; --line2:#cec3ae;
  --text:#2c2619; --muted:#7a6e58; --faint:#a89b84;
  --amber:#d4891a; --amber2:#e8a030; --sky:#5a9abf; --moss:#6a9148; --red:#c94030;
}
[data-theme="day"]html{color-scheme:light}
[data-theme="day"]body::before{background:
  radial-gradient(900px 420px at 15% -80px, rgba(212,137,26,.1), transparent 65%),
  radial-gradient(760px 400px at 95% -40px, rgba(90,154,191,.07), transparent 60%)}
[data-theme="day"]body::after{opacity:.03}
[data-theme="day"].frame-media,[data-theme="day"].frame-final{background:var(--bg)}
[data-theme="day"].frame:hover{box-shadow:0 12px 28px rgba(44,38,25,.15)}
[data-theme="day"].media-hover{background:linear-gradient(transparent 42%,rgba(253,248,238,.85))}
[data-theme="day"].pv-frame{background:var(--bg);border-color:var(--line);box-shadow:0 22px 60px rgba(44,38,25,.2)}
[data-theme="day"]#preview,#planview,#frameview{background:radial-gradient(1200px 700px at 50% 30%,#efe9da 0%,#e0dace 72%)}
[data-theme="day"]#pickOverlay{background:rgba(253,248,238,.92)}
[data-theme="day"]#toast{background:var(--surface);border-color:var(--line2);box-shadow:0 10px 30px rgba(44,38,25,.15)}
[data-theme="day"].refslot{background:var(--bg)}
[data-theme="day"].ref-lbl{background:linear-gradient(transparent,rgba(253,248,238,.92))}
[data-theme="day"].pv-badge{background:rgba(253,248,238,.85);border-color:rgba(212,137,26,.5)}
[data-theme="day"]#topbar{background:rgba(253,248,238,.9);border-bottom-color:var(--line)}
*{box-sizing:border-box;margin:0}
html{color-scheme:dark}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;min-height:100vh}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(900px 420px at 15% -80px, rgba(242,168,59,.08), transparent 65%),
  radial-gradient(760px 400px at 95% -40px, rgba(143,184,216,.055), transparent 60%)}
body::after{content:'';position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.055;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:rgba(242,168,59,.35)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ── topbar ─────────────────────────────── */
#topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:10px 22px;background:rgba(23,21,17,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:13px;min-width:0;cursor:default}
#clap .clapper{transition:transform .32s cubic-bezier(.34,1.56,.64,1);transform-box:fill-box;transform-origin:0% 100%}
.brand:hover #clap .clapper{transform:rotate(-18deg)}
.brand-text{min-width:0}
#projTitle{font-family:var(--disp);font-weight:700;font-size:24px;letter-spacing:.03em;line-height:1.05;
  outline:none;white-space:nowrap;overflow:hidden;max-width:46vw;border-bottom:1px dashed transparent}
#projTitle:focus{border-bottom-color:var(--amber)}
.brand-sub{display:flex;align-items:center;gap:7px;margin-top:2px}
#projSelect{appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%239a8f7d'/%3E%3C/svg%3E") no-repeat right 6px center;
  border:1px solid var(--line);border-radius:5px;color:var(--muted);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.05em;padding:3px 20px 3px 8px;cursor:pointer;outline:none;max-width:190px}
#projSelect:hover{border-color:var(--line2);color:var(--text)}
.stats{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.04em;margin-left:4px;white-space:nowrap}
.actions{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.status{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-right:4px;letter-spacing:.03em}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.status.dirty .dot{background:var(--amber);animation:pulse 1.3s infinite}
.status.saved .dot{background:var(--moss)}
@keyframes pulse{50%{opacity:.3}}
.btn{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 15px 6px;border-radius:7px;border:1px solid var(--line2);background:transparent;color:var(--text);cursor:pointer;transition:.18s}
.btn:hover{border-color:var(--amber);color:var(--amber);background:rgba(242,168,59,.06)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--amber);border-color:var(--amber);color:#1d1a15}
.btn.primary:hover{background:var(--amber2);color:#1d1a15;box-shadow:0 4px 20px rgba(242,168,59,.28)}
.icon-btn{background:transparent;border:none;color:var(--faint);cursor:pointer;padding:5px;border-radius:5px;display:inline-flex;align-items:center;transition:.15s}
.icon-btn:hover{color:var(--text);background:var(--surface2)}
.icon-btn.danger:hover{color:var(--red)}
.icon-btn.dir-frame.bound{color:var(--amber)}
.icon-btn.dir-frame.bound:hover{color:var(--amber2)}
.icon-btn:disabled{opacity:.25;pointer-events:none}
.sep{width:1px;height:18px;background:var(--line);flex:none}
#recentProjects{max-width:190px;background:transparent;border:1px solid var(--line);border-radius:5px;color:var(--muted);font:10.5px var(--mono);padding:3px 7px}

#workspaceNav{position:sticky;top:var(--topbar-h,62px);z-index:45;display:flex;justify-content:center;gap:4px;padding:7px 22px;background:rgba(23,21,17,.92);border-bottom:1px solid var(--line)}
[data-theme="day"] #workspaceNav{background:rgba(253,248,238,.94)}
.workspace-tab{border:0;background:transparent;color:var(--muted);font:600 14px var(--sans);padding:8px 18px;border-radius:7px;cursor:pointer}
.workspace-tab:hover{color:var(--text);background:var(--surface2)}
.workspace-tab.on{color:#1d1a15;background:var(--amber)}

/* ── layout ─────────────────────────────── */
#app{margin:0 auto;padding:26px 22px 90px;position:relative;z-index:1}
#scenes{display:flex;flex-direction:column;gap:24px}

/* В режиме схемы окно приложения становится фиксированным рабочим столом. */
body.branches-mode{height:100vh;overflow:hidden;display:flex;flex-direction:column}
body.branches-mode #topbar,body.branches-mode #workspaceNav{position:relative;top:auto;flex:none;width:100%}
body.branches-mode #app{flex:1;min-height:0;width:100%;padding:12px 16px 16px;overflow:hidden}
body.branches-mode #branchesView{height:100%;min-height:0;display:flex;flex-direction:column}
#branchesView[hidden],#storyboardView[hidden]{display:none !important}

/* ── scene ──────────────────────────────── */
.scene{background:var(--surface);border:1px solid var(--line);border-radius:10px;position:relative;transition:border-color .2s}
.scene:hover{border-color:var(--line2)}
.clap-band{height:9px;border-radius:9px 9px 0 0;opacity:.9;transition:background-position .6s ease;
  background:repeating-linear-gradient(115deg,#e9e2d2 0 16px,#15130f 16px 32px)}
.scene:hover .clap-band{background-position:32px 0}
.scene-head{display:flex;align-items:center;gap:13px;padding:13px 15px 11px;flex-wrap:wrap}
.grip{background:none;border:none;color:var(--faint);cursor:grab;padding:4px 2px;display:inline-flex;user-select:none}
.grip:hover{color:var(--amber)}
.grip:active{cursor:grabbing}
.scene-num{display:flex;flex-direction:column;line-height:1}
.scene-num .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.scene-num .num{font-family:var(--disp);font-weight:800;font-size:40px;color:var(--amber);letter-spacing:.02em}
.scene-title{flex:1;min-width:170px;background:transparent;border:none;outline:none;color:var(--text);
  font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:.03em;padding:4px 2px;border-bottom:1px dashed transparent}
.scene-title:focus{border-bottom-color:var(--amber)}
.scene-title::placeholder{color:var(--faint)}
.seg{display:flex;border:1px solid var(--line2);border-radius:6px;overflow:hidden;flex:none}
.seg button{font-family:var(--mono);font-size:10px;letter-spacing:.12em;padding:6px 10px;background:transparent;border:none;color:var(--muted);cursor:pointer;transition:.15s}
.seg button+button{border-left:1px solid var(--line2)}
.seg button.on{background:var(--amber);color:#1d1a15;font-weight:500}
select.scene-meta{appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%239a8f7d'/%3E%3C/svg%3E") no-repeat right 8px center;
  border:1px solid var(--line);border-radius:5px;color:var(--text);font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 24px 6px 10px;cursor:pointer;outline:none}
select.scene-meta:required:invalid{color:var(--faint)}
select.scene-meta:hover{border-color:var(--sky)}
.scene-part{max-width:190px;background:var(--surface2);border:1px solid var(--line);border-radius:5px;color:var(--text);font:10px var(--mono);padding:6px 8px}
.scene-part-title,.scene-chapter-title{width:130px;background:transparent;border:0;border-bottom:1px dashed var(--line2);color:var(--text);outline:0;font:11px var(--sans);padding:5px 2px}
.scene-chapter-wrap{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:5px;padding:3px 7px;color:var(--faint);font:9px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.scene-chapter{width:38px;border:0;background:transparent;color:var(--text);outline:0;font:11px var(--mono)}
.scene-loc{background:transparent;border:none;outline:none;border-bottom:1px dashed var(--line2);
  color:var(--text);font-size:12.5px;width:160px;padding:5px 2px}
.scene-loc:focus{border-bottom-color:var(--sky)}
.scene-loc::placeholder{color:var(--faint)}
.frame-count{font-family:var(--mono);font-size:10px;color:var(--muted);background:var(--surface2);
  border:1px solid var(--line);padding:4px 10px;border-radius:20px;white-space:nowrap;letter-spacing:.05em}
.collapse svg{transition:transform .2s}
.collapsed .collapse svg{transform:rotate(-90deg)}
.collapsed .scene-body,.collapsed .scene-foot{display:none}
.scene-body{padding:4px 15px 14px;display:flex;flex-direction:column;gap:14px}
.scene-foot{padding:0 15px 15px}

/* ── cell ───────────────────────────────── */
.cell{display:grid;grid-template-columns:290px 1fr;gap:16px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:14px}
@media(max-width:940px){.cell{grid-template-columns:1fr}}
.cell-left{align-self:start;position:sticky;top:calc(var(--topbar-h) + 14px);max-height:calc(100vh - var(--topbar-h) - 28px);overflow:hidden;transition:overflow .15s}
.cell:hover .cell-left{overflow:auto;overscroll-behavior:contain}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
.cell-left::-webkit-scrollbar-thumb{background:var(--line2)}
.cell-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:7px}
.cell-text{width:100%;background:transparent;border:none;outline:none;resize:none;overflow:hidden;
  color:var(--text);font-family:var(--mono);font-size:13px;line-height:1.65;min-height:46px}
.cell-text::placeholder{color:var(--faint)}
.cell-ctrl{display:flex;gap:6px;margin-top:12px;align-items:center}
.mini{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;padding:5px 11px;border-radius:6px;
  border:1px dashed var(--line2);background:transparent;color:var(--muted);cursor:pointer;transition:.15s}
.mini:hover{border-color:var(--amber);border-style:solid;color:var(--amber)}
.mini.icon-btn{border:none;padding:5px}
.mini.danger:hover{color:var(--red);background:transparent}

/* ── frames ─────────────────────────────── */
.frames{display:flex;flex-wrap:wrap;gap:14px;align-content:flex-start;min-height:120px;border-radius:8px;padding:2px;--fw:272px}
.frame-add{flex:none;width:var(--fw);min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  background:transparent;border:1.5px dashed var(--line);border-radius:8px;color:var(--faint);cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;transition:border-color .15s,color .15s;box-sizing:border-box}
.frame-add span{text-align:center;line-height:1.3;display:block}
.frame-add:hover{border-color:var(--amber);color:var(--amber)}
.frame-add-menu{display:flex;gap:6px;margin-top:2px}
.frame-add-menu button{border:1px solid var(--line2);border-radius:5px;background:var(--surface);color:var(--muted);font:10px var(--mono);padding:4px 7px;cursor:pointer}
.frame-add-menu button:hover{color:var(--amber);border-color:var(--amber)}

/* ── story branches ───────────────────── */
.branch-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px;flex:none;position:relative;z-index:5;background:var(--bg)}
.part-tabs{display:flex;gap:5px;flex-wrap:wrap}
.part-title-input{min-width:210px;background:var(--surface);border:1px solid var(--line2);border-radius:7px;color:var(--text);font:12px var(--sans);padding:8px 11px;outline:0}
.part-title-input:focus{border-color:var(--amber)}
.part-tab{border:1px solid var(--line2);background:var(--surface);color:var(--muted);border-radius:7px;padding:8px 13px;cursor:pointer;font:12px var(--mono)}
.part-tab.on{border-color:var(--amber);color:var(--amber);background:rgba(242,168,59,.08)}
.branch-help{color:var(--faint);font:11px var(--mono);margin:0 0 10px;flex:none}
.branch-canvas{flex:1;min-height:0;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:10px;background-color:var(--bg2);background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px}
.branch-canvas.panning{cursor:grabbing;user-select:none}
#branchWorld{position:relative;width:2400px;height:1600px;transform-origin:0 0}
#branchEdges{position:absolute;inset:0;width:2400px;height:1600px;overflow:visible;pointer-events:none}
.branch-edge{fill:none;stroke:var(--sky);stroke-width:2;stroke-dasharray:6 5}
.branch-edge.draft{stroke:var(--amber);stroke-width:2.5;stroke-dasharray:4 4}
.branch-edge-label{fill:var(--muted);font:10px var(--mono)}
#branchNodes{position:relative;width:2400px;height:1600px}
.branch-node{position:absolute;width:190px;min-height:84px;padding:10px 11px;background:var(--surface);border:1px solid var(--line2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.2);cursor:grab}
.branch-node.selected{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.branch-node.scene-node{border-color:rgba(242,168,59,.7);background:linear-gradient(145deg,var(--surface),rgba(242,168,59,.07))}
.branch-node input,.branch-node textarea{width:100%;border:0;background:transparent;color:var(--text);outline:0}
.branch-node input{font:600 13px var(--sans);border-bottom:1px dashed var(--line2);padding-bottom:5px}
.branch-node input.branch-chapter-title{font:11px var(--sans);color:var(--muted);padding-top:6px}
.branch-node textarea{font:11px/1.45 var(--mono);resize:vertical;min-height:42px;padding-top:6px}
.branch-node-code{position:absolute;right:8px;top:-9px;background:var(--amber);color:#1d1a15;border-radius:4px;padding:2px 5px;font:9px var(--mono)}
.branch-port{position:absolute;width:14px;height:14px;border:3px solid var(--bg2);border-radius:50%;background:var(--sky);left:calc(50% - 7px);z-index:3;transition:transform .12s,background .12s}
.branch-port:hover{transform:scale(1.35);background:var(--amber)}
.branch-port.in{top:-8px}.branch-port.out{bottom:-8px;cursor:crosshair}
.node-resize{position:absolute;z-index:4}
.node-resize.r-n,.node-resize.r-s{left:12px;right:12px;height:8px;cursor:ns-resize}.node-resize.r-n{top:-4px}.node-resize.r-s{bottom:-4px}
.node-resize.r-e,.node-resize.r-w{top:12px;bottom:12px;width:8px;cursor:ew-resize}.node-resize.r-e{right:-4px}.node-resize.r-w{left:-4px}
.node-resize.r-ne,.node-resize.r-nw,.node-resize.r-se,.node-resize.r-sw{width:12px;height:12px}
.node-resize.r-ne{right:-5px;top:-5px;cursor:nesw-resize}.node-resize.r-nw{left:-5px;top:-5px;cursor:nwse-resize}.node-resize.r-se{right:-5px;bottom:-5px;cursor:nwse-resize}.node-resize.r-sw{left:-5px;bottom:-5px;cursor:nesw-resize}
.branch-empty{padding:80px 20px;text-align:center;color:var(--faint)}
.branch-link-select{max-width:170px;border:1px solid var(--line);border-radius:5px;background:var(--surface2);color:var(--text);font:10px var(--mono);padding:6px}
.frames.drop-append{outline:2px dashed var(--amber);outline-offset:-2px}
.frame{width:272px;background:var(--surface2);border:1px solid var(--line);border-radius:8px;position:relative;
  outline:none;transition:transform .18s,border-color .18s,box-shadow .18s;box-sizing:border-box}
.frame:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.frame:focus,.frame.selected{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.frame.dragging{opacity:.4;transform:none;transition:none}
/* во время переноса убираем hover-трансформации и анимации */
.is-dragging .frame,.is-dragging .scene{transition:none}
.is-dragging .frame:hover{transform:none;box-shadow:none}
.is-dragging img{transition:none}
.is-dragging .frame:hover .frame-final img,.is-dragging .frame:hover .frame-media img,.is-dragging .plan:hover .plan-img img{transform:none}
.is-dragging .frame:hover .frame-final img.flip,.is-dragging .frame:hover .frame-media img.flip,.is-dragging .plan:hover .plan-img img.flip{transform:scaleX(-1)}
.refslot.drag-src,.frame-final.drag-src,.frame-media.drag-src,.plan.drag-src .plan-img{opacity:.5}
.frame-final.drag-file,.frame-media.drag-file{outline:2px solid var(--amber);outline-offset:-2px}
.planstrip.drag-plan{outline:2px dashed var(--amber);outline-offset:6px;border-radius:8px}
/* призрак переноса (pointer-drag вместо HTML5 DnD — тот клинит в WebView2 при масштабе ≠100%) */
.drag-ghost{position:fixed;z-index:200;margin:0;pointer-events:none;opacity:.9;transform:rotate(1.2deg);
  transition:none;box-shadow:0 22px 48px rgba(0,0,0,.55);animation:none}
body.no-select,body.no-select *{user-select:none !important;cursor:grabbing !important}
.frame.drop-before::after,.frame.drop-after::after{content:'';position:absolute;top:5%;bottom:5%;width:3px;border-radius:3px;background:var(--amber);z-index:5}
.frame.drop-before::after{left:-9px}
.frame.drop-after::after{right:-9px}
.scene.drop-top::after,.scene.drop-bottom::after{content:'';position:absolute;left:18px;right:18px;height:3px;border-radius:3px;background:var(--amber);z-index:5}
.scene.drop-top::after{top:-14px}
.scene.drop-bottom::after{bottom:-14px}

.frame-media{aspect-ratio:16/9;position:relative;background:#141210;cursor:pointer;overflow:hidden;border-radius:0}
.frame-final{aspect-ratio:16/9;position:relative;background:#141210;cursor:pointer;overflow:hidden;border-radius:7px 7px 0 0;border-bottom:1px solid var(--line)}
.frame-final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.frame:hover .frame-final img{transform:scale(1.04)}
.frame-final img.flip{transform:scaleX(-1)}
.frame:hover .frame-final img.flip{transform:scaleX(-1) scale(1.04)}
.frame-final:hover .media-hover{opacity:1}
.final-empty{position:absolute;inset:6px;border:1.5px dashed var(--line2);border-radius:6px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--faint);transition:.2s}
.final-empty b{font-size:15px;font-weight:400;line-height:.6}
.final-empty span{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.frame-final:hover .final-empty{border-color:var(--amber);color:var(--amber)}
.frame-final.drag-file .final-empty{border-color:var(--amber);color:var(--amber);background:rgba(242,168,59,.07)}
.media-tag{position:absolute;top:5px;left:5px;z-index:2;font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);background:rgba(13,12,10,.72);border:1px solid var(--line);padding:2px 6px;border-radius:3px;pointer-events:none}
.media-tag.fin{color:#1d1a15;background:var(--amber);border-color:var(--amber)}
.frame.drop-ref .frame-media{outline:2px solid var(--amber);outline-offset:-2px}
.media-empty{position:absolute;inset:8px;border:1.5px dashed var(--line2);border-radius:6px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--faint);transition:.2s}
.media-empty span{font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.media-empty em{font-family:var(--mono);font-style:normal;font-size:9px;letter-spacing:.05em;opacity:.75}
.frame-media:hover .media-empty{border-color:var(--amber);color:var(--amber)}
.frame-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.frame:hover .frame-media img{transform:scale(1.04)}
.frame-media img.flip{transform:scaleX(-1)}
.frame:hover .frame-media img.flip{transform:scaleX(-1) scale(1.04)}
.media-hover{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:10px;
  background:linear-gradient(transparent 42%,rgba(15,13,10,.85));opacity:0;transition:opacity .2s}
.frame-media:hover .media-hover{opacity:1}
.media-hover .mini{background:rgba(23,21,17,.85);border-style:solid}
.media-hover .mini.on{border-color:var(--amber);color:var(--amber)}
.media-hover .mini.danger:hover{border-color:var(--red)}
.frame-media.drag-file .media-empty{border-color:var(--amber);color:var(--amber);background:rgba(242,168,59,.07)}

/* ── ref strip (поза / локация / план) ── */
.refstrip{display:flex;gap:6px;padding:8px 10px 0}
.refslot{position:relative;flex:1;aspect-ratio:16/9;border-radius:5px;overflow:hidden;cursor:pointer;
  border:1px dashed var(--line2);background:#141210;transition:border-color .15s,box-shadow .15s}
.refslot.filled{border-style:solid;border-color:var(--line)}
.refslot:hover{border-color:var(--amber)}
.refslot.view{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.refslot.drop-slot{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber);background:rgba(242,168,59,.08)}
.refslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.refslot img.flip{transform:scaleX(-1)}
.ref-lbl{position:absolute;left:0;right:0;bottom:0;z-index:1;font-family:var(--mono);font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-align:center;padding:9px 3px 3px;pointer-events:none;
  background:linear-gradient(transparent,rgba(15,13,10,.92))}
.refslot.view .ref-lbl{color:var(--amber)}
.ref-add{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:16px;transition:color .15s}
.refslot:hover .ref-add{color:var(--amber)}
.ref-x{position:absolute;top:3px;right:3px;z-index:2;width:15px;height:15px;display:flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;color:var(--muted);background:rgba(15,13,10,.85);border-radius:3px;opacity:0;transition:.15s}
.refslot:hover .ref-x{opacity:1}
.ref-x:hover{color:var(--red);background:rgba(217,112,91,.25)}

/* ── мастер-планы сцены ── */
.planwrap{padding:13px 15px 0}
.collapsed .planwrap{display:none}
.plan-lbl{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.plan-lbl::after{content:'';flex:1;height:1px;background:var(--line)}
.planstrip{display:flex;gap:11px;overflow-x:auto;padding-bottom:3px}
.plan{flex:none;width:140px;margin:0;cursor:pointer}
.plan-img{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#141210;transition:border-color .18s,box-shadow .18s}
.plan-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.plan:hover .plan-img{border-color:var(--amber);box-shadow:0 8px 22px rgba(0,0,0,.45)}
.plan:hover .plan-img img{transform:scale(1.07)}
.plan-idx{position:absolute;left:5px;bottom:5px;z-index:1;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--amber);
  background:rgba(13,12,10,.8);border:1px solid rgba(242,168,59,.32);padding:1px 6px;border-radius:3px;pointer-events:none}
.plan-del{position:absolute;top:5px;right:5px;z-index:2;width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;color:var(--muted);background:rgba(15,13,10,.85);border:1px solid var(--line);border-radius:4px;
  opacity:0;transition:.15s;cursor:pointer;padding:0}
.plan:hover .plan-del{opacity:1}
.plan-del:hover{color:var(--red);border-color:var(--red);background:rgba(217,112,91,.22)}
.plan-cap{width:100%;margin-top:7px;background:transparent;border:none;outline:none;border-bottom:1px dashed transparent;
  color:var(--muted);font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;padding:2px 1px;transition:.15s}
.plan-cap:hover{border-bottom-color:var(--line2)}
.plan-cap:focus{border-bottom-color:var(--amber);color:var(--text)}
.plan-cap::placeholder{color:var(--faint)}
.plan-add{flex:none;width:140px;cursor:pointer}
.plan-add .plan-img{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-style:dashed;border-color:var(--line2);color:var(--faint)}
.plan-add .plan-img b{font-size:20px;font-weight:400;line-height:.6}
.plan-add .plan-img span{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase}
.plan-add:hover .plan-img{border-color:var(--amber);color:var(--amber);background:rgba(242,168,59,.05)}
.planstrip.drag-plan .plan-add .plan-img{border-color:var(--amber);color:var(--amber);background:rgba(242,168,59,.08)}

/* ── мастер-план: полноэкранный просмотр ── */
#planview,#frameview{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(1200px 700px at 50% 30%,#1a1712 0%,#0d0c0a 72%);animation:pvFade .22s ease;padding:76px 96px}
#planview[hidden],#frameview[hidden]{display:none}
.pv2-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:13px 22px;border-bottom:1px solid var(--line)}
.pv2-badge{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--amber)}
.pv2-badge b{color:var(--muted);font-weight:400}
#pv2Img,#fvImg{max-width:100%;max-height:calc(100vh - 215px);object-fit:contain;border-radius:6px;border:1px solid var(--line2);
  box-shadow:0 30px 90px rgba(0,0,0,.75);animation:pvFlash .28s ease}
#fvImg.flip{transform:scaleX(-1)}
.pv2-cap{margin-top:18px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--text);text-align:center;max-width:72ch;line-height:1.55}
.pv2-cap:empty::before{content:'— без подписи —';color:var(--faint);letter-spacing:.22em;font-size:10px;text-transform:uppercase}

.frame-body{padding:10px 12px 12px}
.frame-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.frame-num{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.frame-num b{color:var(--amber);font-weight:500}
.frame-status{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line2);border-radius:20px;background:transparent;color:var(--muted);
  padding:3px 10px;cursor:pointer;transition:.15s;margin-right:auto}
.frame-status:hover{background:var(--surface)}
.frame-status.st-gen{border-color:var(--amber);color:var(--amber)}
.frame-status.st-skip{color:var(--faint);border-style:dashed}
.frame-status.st-done{border-color:var(--moss);color:var(--moss)}
.frame-acts{display:flex;gap:2px;opacity:.5;transition:opacity .15s}
.frame:hover .frame-acts{opacity:1}
.frame-desc{width:100%;background:transparent;border:none;outline:none;resize:none;overflow:hidden;
  color:var(--text);font-size:13px;line-height:1.5;min-height:38px}
.frame-desc::placeholder{color:var(--faint)}
.frame-line{width:100%;background:transparent;border:none;outline:none;resize:none;overflow:hidden;
  color:var(--amber2);font-size:12.5px;line-height:1.5;min-height:22px;margin-top:7px;border-top:1px dashed var(--line);padding-top:7px}
.frame-line::placeholder{color:var(--faint)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tag{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:5px;padding:2px 4px 2px 8px;cursor:pointer;transition:border-color .15s}
.tag i{width:6px;height:6px;border-radius:50%;flex:none}
.tag.amber i{background:var(--amber)}
.tag.sky i{background:var(--sky)}
.tag.moss i{background:var(--moss)}
.tag select{appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%239a8f7d'/%3E%3C/svg%3E") no-repeat right 2px center;
  border:none;outline:none;color:var(--text);font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 14px 4px 0;cursor:pointer}
.tag select:required:invalid{color:var(--faint)}
.tag.amber:has(select:valid){border-color:rgba(242,168,59,.55)}
.tag.sky:has(select:valid){border-color:rgba(143,184,216,.55)}
.tag.moss:has(select:valid){border-color:rgba(168,196,144,.55)}
select option{background:var(--surface2);color:var(--text)}

/* ── misc ───────────────────────────────── */
#addScene{width:100%;margin-top:24px;padding:24px;border:1.5px dashed var(--line2);border-radius:10px;
  background:transparent;color:var(--muted);font-family:var(--disp);font-weight:600;font-size:19px;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:.2s}
#addScene:hover{border-color:var(--amber);color:var(--amber);background:rgba(242,168,59,.05)}
.hint{margin-top:28px;text-align:center;font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.04em;line-height:2}
.hint b{color:var(--muted);font-weight:500}
.empty{padding:70px 20px;text-align:center;border:1.5px dashed var(--line2);border-radius:12px}
.empty h2{font-family:var(--disp);font-size:36px;font-weight:700;letter-spacing:.07em;color:var(--muted);margin-bottom:8px}
.empty p{color:var(--faint);font-size:13px}
#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,14px);background:var(--surface2);
  border:1px solid var(--line2);color:var(--text);font-family:var(--mono);font-size:12px;padding:10px 18px;
  border-radius:8px;opacity:0;pointer-events:none;transition:.25s;z-index:100;box-shadow:0 10px 30px rgba(0,0,0,.4)}
#toast.show{opacity:1;transform:translate(-50%,0)}
#pickOverlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(13,12,10,.92)}
#pickOverlay[hidden]{display:none}
.pick-card{max-width:430px;text-align:center;background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:34px 30px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.pick-card h2{font-family:var(--disp);font-size:26px;letter-spacing:.05em;margin-bottom:10px}
.pick-card p{color:var(--muted);font-size:13px;line-height:1.55;margin-bottom:22px}
/* ── preview ────────────────────────────── */
#preview{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;--pvw:min(66vh,86vw);
  background:radial-gradient(1200px 700px at 50% 28%,#1a1712 0%,#0d0c0a 72%);animation:pvFade .22s ease}
#preview.mode-3{--pvw:min(52vh,27.5vw)}
#preview[hidden]{display:none}
@keyframes pvFade{from{opacity:0}}
.pv-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px;border-bottom:1px solid var(--line);flex:none}
.pv-scene{display:flex;align-items:baseline;gap:13px;min-width:0}
.pv-scene-num{font-family:var(--disp);font-weight:800;font-size:31px;color:var(--amber);letter-spacing:.04em;flex:none}
#pvSceneTitle{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-scene.flash{animation:pvFlash .7s ease}
@keyframes pvFlash{from{opacity:.15;transform:translateY(5px)}}
.pv-controls{display:flex;align-items:center;gap:14px;flex:none}
.pv-counter{font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--muted)}
.pv-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:26px;padding:18px 88px}
.pv-slide{width:var(--pvw);display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;transition:opacity .2s,transform .2s}
/* фикс-высота блока текста: фото не смещается при переключении кадров с разным объёмом текста */
.pv-meta{height:calc(34vh - 210px);min-height:72px;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;padding:2px 8px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.pv-slide.side{opacity:.38;transform:scale(.93);cursor:pointer}
.pv-slide.side:hover{opacity:.8}
.pv-slide.ghost{visibility:hidden}
.pv-frame{position:relative;width:100%;aspect-ratio:1/1;background:#0a0908;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.6)}
.pv-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pv-frame img.flip,.pv-thumb img.flip{transform:scaleX(-1)}
.pv-badge{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--amber);background:rgba(13,12,10,.78);border:1px solid rgba(242,168,59,.35);padding:3px 8px;border-radius:4px}
.pv-badge.fin{background:var(--amber);border-color:var(--amber);color:#1d1a15;font-weight:500}
.pv-thumb.fin{border-color:rgba(242,168,59,.6)}
.pv-noimg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.pv-noimg .pv-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.45em;text-transform:uppercase;color:var(--faint)}
.pv-noimg .bignum{font-family:var(--disp);font-weight:800;font-size:calc(var(--pvw)*.17);line-height:.9;color:var(--line2)}
.pv-cap{font-size:14px;line-height:1.5;color:var(--text);text-align:center;max-width:100%}
.mode-3 .pv-cap{font-size:11.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pv-cap .nodsc{color:var(--faint);font-style:italic}
.pv-line{font-size:13px;line-height:1.5;color:var(--amber2);text-align:center;max-width:100%}
.mode-3 .pv-line{font-size:11px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pv-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pv-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:4px 10px}
.pv-tag i{width:6px;height:6px;border-radius:50%}
.pv-tag.amber{border-color:rgba(242,168,59,.4)} .pv-tag.amber i{background:var(--amber)}
.pv-tag.sky{border-color:rgba(143,184,216,.4)} .pv-tag.sky i{background:var(--sky)}
.pv-tag.moss{border-color:rgba(168,196,144,.4)} .pv-tag.moss i{background:var(--moss)}
.pv-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:78px;border:1px solid var(--line);border-radius:8px;background:rgba(23,21,17,.72);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s}
.pv-arrow:hover{color:var(--amber);border-color:var(--amber);background:rgba(242,168,59,.08)}
.pv-arrow.left{left:18px}
.pv-arrow.right{right:18px}
.pv-arrow:disabled{opacity:.18;pointer-events:none}
.pv-strip{flex:none;display:flex;align-items:center;gap:8px;padding:12px 22px;border-top:1px solid var(--line);overflow-x:auto}
.pv-div{flex:none;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--amber);border:1px solid rgba(242,168,59,.4);border-radius:4px;padding:3px 7px}
.pv-thumb{flex:none;width:64px;height:40px;border-radius:4px;border:1px solid var(--line);overflow:hidden;cursor:pointer;background:#0a0908;position:relative;padding:0;transition:.15s;opacity:.55}
.pv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pv-thumb .n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;color:var(--faint)}
.pv-thumb:hover{opacity:1;transform:translateY(-2px)}
.pv-thumb.on{opacity:1;border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.pv-btn{display:inline-flex;align-items:center;gap:8px}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.scene.new,.frame.new{animation:rise .3s ease both}
.first .scene{animation:rise .4s ease both}
.first .scene:nth-child(2){animation-delay:.07s}
.first .scene:nth-child(3){animation-delay:.14s}
.first .scene:nth-child(4){animation-delay:.21s}

@media print{
  body{background:#fff;color:#111}
  body::before,body::after,#toast,#preview,#planview,#frameview{display:none}
  .actions,#addScene,.hint,.cell-ctrl,.frame-acts,.grip,.media-hover{display:none !important}
  #topbar{position:static;background:none;backdrop-filter:none;border-bottom:2px solid #111}
  #projTitle,.scene-title,.cell-text,.frame-desc,.scene-loc,.stats{color:#111}
  .scene,.cell,.frame{background:#fff !important;border-color:#999 !important;box-shadow:none !important;transform:none !important;break-inside:avoid}
  .clap-band{opacity:1}
  .scene-num .num,.frame-num b{color:#111}
  .media-empty{border-color:#bbb;color:#999}
  .tag{border-color:#bbb}
  .tag select{color:#111}
  #app{padding-top:10px}
}

.map-navigation{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.map-navigation select{max-width:230px;background:var(--surface);color:var(--text);padding:6px;border:1px solid var(--line)}
.branch-node textarea{height:calc(100% - 55px);resize:none}.branch-node.scene-node textarea{height:calc(100% - 80px)}

/* Four-sided connection handles sit above resize handles. */
.branch-port{z-index:8;cursor:crosshair;left:auto;top:auto;bottom:auto;right:auto;width:16px;height:16px}
.branch-port.port-top{top:-9px;left:calc(50% - 8px)}
.branch-port.port-bottom{bottom:-9px;left:calc(50% - 8px)}
.branch-port.port-left{left:-9px;top:calc(50% - 8px)}
.branch-port.port-right{right:-9px;top:calc(50% - 8px)}
.node-actions{display:flex;gap:5px;position:absolute;left:8px;top:-16px;z-index:9}
.node-actions button{width:27px;height:25px;border:1px solid var(--line2);border-radius:5px;background:var(--surface2);color:var(--text);cursor:pointer;font-size:18px;line-height:20px}
.node-actions button:hover{border-color:var(--amber);color:var(--amber)}
.node-actions [data-node-delete]:hover{border-color:var(--red);color:var(--red)}
.branch-node-code{max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.branch-edge{stroke-dasharray:none}

#chapterBands{position:absolute;inset:0;pointer-events:none;z-index:0}
#branchEdges{z-index:1}#branchNodes{z-index:2}
.chapter-band{position:absolute;background:hsla(var(--chapter-hue),55%,55%,.045);border:1px solid hsla(var(--chapter-hue),60%,65%,.32);border-radius:18px}
.chapter-band header{display:flex;align-items:center;gap:18px;padding:20px 24px;color:var(--text);border-bottom:1px solid hsla(var(--chapter-hue),60%,65%,.2)}
.chapter-band strong{font:700 18px var(--sans);color:hsl(var(--chapter-hue),55%,68%)}
.chapter-band span{font:600 17px var(--sans)}.chapter-band small{font:12px var(--mono);color:var(--muted)}