/* Раскадровка v3 — по дизайн-системе «{AI}-шница UI».
   Темы: white (Белый, перламутр) · black (Чёрный, лаймовая генерация) · violet (Фиолетовый, тёмная) · lavender (светло-фиолетовая).
   Имена переменных = токены tokens.json (ground, surface, surface-raised, surface-sunken, hover, line, line-strong, ink, ink-2, ink-3,
   sel, on-sel, cta-hi, cta, cta-lo, on-cta, success, warning, danger, shadow-*). Тема — атрибут data-sb2-theme на корне. */
@import url("https://fonts.googleapis.com/css2?family=Days+One&family=Onest:wght@400;500;600;700&display=swap");

.sb2 {
  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Days One", "Onest", system-ui, sans-serif;
  --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 999px;
  --control-sm: 32px; --control-md: 40px; --control-lg: 48px;
  --sq: 168px;                       /* сторона квадрата картинки / видео в сцене */
}
.sb2[data-sb2-theme="white"] {
  --ground: #ececf3; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #f2f2f6; --hover: #e9e9f0;
  --line: #1214201a; --line-strong: #12142033; --ink: #0f1016; --ink-2: #4b4d59; --ink-3: #646673;
  --sel: #0f1016; --on-sel: #ffffff; --cta-hi: #ffc24a; --cta: #ff8a2b; --cta-lo: #f2668b; --on-cta: #17110a;
  --success: #17784a; --warning: #8a5a00; --danger: #c0392b; --focus: #0f1016;
  --shadow-sm: 0 1px 2px #1214200f, 0 2px 8px -2px #12142014;
  --shadow-md: 0 1px 2px #12142010, 0 12px 32px -14px #1214202e;
  --shadow-lg: 0 2px 6px #1214200d, 0 28px 64px -24px #12142047;
  --shadow-glow: 0 10px 28px -10px #ff8a2b8c;
  --page: linear-gradient(160deg, #f4f2f8 0%, #ececf3 45%, #e8edf6 100%);
}
.sb2[data-sb2-theme="black"] {
  --ground: #131415; --surface: #18191c; --surface-raised: #202125; --surface-sunken: #0f1012; --hover: #27282d;
  --line: #ffffff14; --line-strong: #ffffff2e; --ink: #f3f4f6; --ink-2: #a8abb2; --ink-3: #8e9199;
  --sel: #f3f4f6; --on-sel: #0f1016; --cta-hi: #f2f88a; --cta: #dceb4a; --cta-lo: #b9cc2c; --on-cta: #11130a;
  --success: #62d69c; --warning: #f2c14e; --danger: #ff8a73; --focus: #f3f4f6;
  --shadow-sm: inset 0 1px 0 #ffffff0d, 0 2px 8px -2px #00000099;
  --shadow-md: inset 0 1px 0 #ffffff0f, 0 18px 40px -18px #000000e6;
  --shadow-lg: inset 0 1px 0 #ffffff14, 0 0 0 1px #ffffff0a, 0 32px 80px -24px #000000;
  --shadow-glow: 0 0 0 1px #dceb4a33, 0 12px 32px -10px #dceb4a66;
  --page: #131415;
}
.sb2[data-sb2-theme="violet"] {
  --ground: #15122a; --surface: #221c3e; --surface-raised: #2e264e; --surface-sunken: #1a1533; --hover: #3a3160;
  --line: #ffffff24; --line-strong: #ffffff40; --ink: #f6f3ff; --ink-2: #c9c0ee; --ink-3: #a79dd6;
  --sel: #ede8ff; --on-sel: #1e1238; --cta-hi: #ffc24a; --cta: #ff9a3d; --cta-lo: #f2668b; --on-cta: #17110a;
  --success: #6ee0a8; --warning: #ffc970; --danger: #ff9c88; --focus: #f6f3ff;
  --shadow-sm: inset 0 1px 0 #ffffff1a, 0 2px 10px -2px #0000008c;
  --shadow-md: inset 0 1px 0 #ffffff1f, 0 24px 60px -30px #000000d9;
  --shadow-lg: inset 0 1px 0 #ffffff24, 0 32px 80px -28px #000000f2;
  --shadow-glow: 0 10px 28px -10px #ff9a3d80;
  --page: #15122a;
}
/* Лавандовая (светло-фиолетовая) — с макета «Вариант G — лавандовый фон»: фон #C9CEEC…#D6DCE6, текст #17171C / #45475E. */
.sb2[data-sb2-theme="lavender"] {
  --ground: #cbd0ee; --surface: #f6f6fd; --surface-raised: #ffffff; --surface-sunken: #e6e8f7; --hover: #dde0f4;
  --line: #17171c17; --line-strong: #17171c33; --ink: #17171c; --ink-2: #45475e; --ink-3: #4f5168;
  --sel: #17171c; --on-sel: #ffffff; --cta-hi: #ffe596; --cta: #ffb84d; --cta-lo: #f28a2a; --on-cta: #17171c;
  --success: #17784a; --warning: #7a5000; --danger: #b8322a; --focus: #17171c;
  --shadow-sm: 0 0 0 1px #17171c0a, 0 4px 12px #281e460f;
  --shadow-md: 0 2px 6px #281e460a, 0 18px 44px -16px #281e462e;
  --shadow-lg: 0 2px 6px #281e460d, 0 28px 64px -20px #281e463d;
  --shadow-glow: 0 10px 24px -8px #f28a2a52;
  --page: linear-gradient(165deg, #c9ceec 0%, #c1c6e9 30%, #cbd1ee 58%, #d3dbec 82%, #d6dcE6 100%);
}

.sb2 { background: var(--page); color: var(--ink); font: 400 15px/22px var(--font-sans); -webkit-font-smoothing: antialiased;
  min-height: 100%; padding: 0 16px 64px; position: relative; container-type: inline-size; }
.sb2 *, .sb2 *::before, .sb2 *::after { box-sizing: border-box; }
:where(.sb2) button { font: inherit; color: inherit; }
.sb2 :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sb2-ic { display: inline-flex; width: 18px; height: 18px; flex: none; }
.sb2-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── статус сохранения: тихая строка справа сверху (не панель и не вкладки) ── */
.sb2-status { max-width: 980px; margin: 0 auto; min-height: 28px; padding-top: 8px; text-align: right; font: 500 12px/16px var(--font-sans); color: var(--ink-3); }

/* ── окно этапа ──────────────────────────────────────────────── */
.sb2-win { max-width: 980px; margin: 8px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 22px 24px 24px; scroll-margin-top: 64px; }
.sb2-win.locked { background: transparent; box-shadow: none; border-style: dashed; border-color: var(--line-strong); padding: 16px 24px; }
.sb2-win-head { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.sb2-win.locked .sb2-win-head { margin-bottom: 4px; }
.sb2-wn { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; font: 400 15px/1 var(--font-display);
  background: var(--sel); color: var(--on-sel); }
.sb2-win.locked .sb2-wn { background: var(--surface-sunken); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.sb2-win h2 { margin: 0; flex: 1 1 8rem; min-width: 0; font: 400 24px/30px var(--font-display); letter-spacing: -0.015em; color: var(--ink); }
.sb2-win.locked h2 { color: var(--ink-2); font-size: 19px; }
.sb2-locked { margin: 0 0 0 44px; font-size: 14px; color: var(--ink-3); }
.sb2-win-body { display: flex; flex-direction: column; gap: 16px; }
.sb2-win + .sb2-win { margin-top: 20px; }
.sb2-win-aside { margin-left: auto; }
.sb2-subhead { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.sb2-subhead .sb2-h3 { margin: 0; }
.sb2-ok { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1 var(--font-sans); color: var(--success); }

/* сценарий по секундам */
.sb2-beats { display: flex; flex-direction: column; gap: 10px; }
.sb2-beat { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-md);
  background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); }
.sb2-beat.over { box-shadow: inset 0 0 0 2px var(--sel); }
.sb2-beat.dragging { opacity: .55; }
.sb2-beat-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb2-beat-ops { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.sb2-drag { cursor: grab; }
.sb2-drag:active { cursor: grabbing; }
.sb2-icon[disabled] { opacity: .35; pointer-events: none; }
.sb2-refine { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-md); background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line); }
.sb2-refine .sb2-select { width: auto; min-width: 180px; }
.sb2-h3 { margin: 10px 0 -4px; font: 400 17px/24px var(--font-display); color: var(--ink); }
.sb2-lead { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }

/* ── поля (Input из дизайн-системы) ──────────────────────────── */
.sb2-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sb2-field.grow { flex: 1; }
.sb2-label { font: 500 12px/16px var(--font-sans); color: var(--ink-3); }
.sb2-hint { font: 400 12px/16px var(--font-sans); color: var(--ink-3); }
.sb2-input { width: 100%; min-height: var(--control-md); padding: 9px 14px; border: none; border-radius: var(--radius-sm); font: 400 15px/22px var(--font-sans);
  color: var(--ink); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line-strong); outline: none; transition: box-shadow .15s, background .15s; }
.sb2-input:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.sb2-input:focus { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 2px var(--focus); }
.sb2-input::placeholder { color: var(--ink-3); opacity: .8; font-style: italic; }
.sb2-area { resize: vertical; field-sizing: content; min-height: 64px; overflow: hidden; }
.sb2-idea { font-size: 17px; line-height: 26px; min-height: 120px; padding: 14px 16px; }
.sb2-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.sb2-select option { background: var(--surface-raised); color: var(--ink); }
.sb2-static { min-height: var(--control-md); display: flex; align-items: center; font-weight: 600; }
.sb2-row-fields { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-start; }
.sb2-row-fields.two { display: grid; grid-template-columns: 1fr 2fr; }
.sb2-script { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--line); padding-top: 18px; }

/* ── пилюли выбора значения (Pill) ───────────────────────────── */
.sb2-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sb2-pill { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: var(--control-sm); padding: 0 14px;
  border-radius: var(--radius-pill); font: 500 13.5px/1 var(--font-sans); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; }
.sb2-pill .sb2-ic { width: 16px; height: 16px; margin-left: -4px; }
.sb2-pill:hover { background: var(--hover); }
.sb2-pill.on { background: var(--sel); color: var(--on-sel); box-shadow: none; font-weight: 600; }
.sb2-pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── кнопки (Button) ─────────────────────────────────────────── */
.sb2-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sb2-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-md);
  padding: 0 18px; border-radius: var(--radius-pill); font: 600 14px/1 var(--font-sans); white-space: nowrap; transition: transform .12s, background .15s, filter .15s; }
.sb2-btn:active { transform: scale(.98); }
.sb2-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sb2-btn[disabled] { opacity: .45; pointer-events: none; }
.sb2-btn.sm { height: var(--control-sm); padding: 0 14px; font-size: 13px; }
.sb2-btn.primary { color: var(--on-sel); background: var(--sel); box-shadow: var(--shadow-sm); }
.sb2-btn.primary:hover { filter: brightness(1.08); }
.sb2-btn.secondary { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.sb2-btn.secondary:hover { background: var(--hover); }
.sb2-btn.ghost { color: var(--ink-2); padding: 0 12px; align-self: flex-start; }
.sb2-btn.ghost:hover { color: var(--ink); background: var(--hover); }
.sb2-btn.cta { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; color: var(--on-cta);
  background: linear-gradient(100deg, var(--cta-hi), var(--cta) 55%, var(--cta-lo)); box-shadow: var(--shadow-glow); }
.sb2-btn.cta:hover { filter: brightness(1.05) saturate(1.05); }
.sb2-icon { all: unset; cursor: pointer; width: var(--control-sm); height: var(--control-sm); border-radius: var(--radius-pill); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.sb2-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sb2-icon:hover { background: var(--hover); color: var(--ink); }
.sb2-icon:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── квадрат: картинка или видео ─────────────────────────────── */
.sb2-media { width: var(--sq); flex: none; display: flex; flex-direction: column; gap: 6px; }
.sb2-sq { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line-strong); }
.sb2-sq:not(.has):not(.busy) { box-shadow: none; outline: 1.5px dashed var(--line-strong); outline-offset: -1.5px; }
.sb2-sq > img, .sb2-sq > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; background: var(--surface-sunken); }
.sb2-sq-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; text-align: center; color: var(--ink-3); }
.sb2-sq-empty > .sb2-ic { width: 26px; height: 26px; }
.sb2-sqbtn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-sm);
  width: 100%; max-width: 132px; padding: 0 12px; border-radius: var(--radius-pill); font: 600 13px/1 var(--font-sans); color: var(--ink);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.sb2-sqbtn .sb2-ic { width: 16px; height: 16px; }
.sb2-sqbtn:hover { background: var(--hover); }
.sb2-sqbtn.main { color: var(--on-sel); background: var(--sel); box-shadow: var(--shadow-sm); }
.sb2-sqbtn.main:hover { filter: brightness(1.08); }
.sb2-sqbtn.link { background: none; box-shadow: none; color: var(--ink-2); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.sb2-sqbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sb2-sq-note { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 600 12px/16px var(--font-sans); color: var(--ink-2); }
.sb2-sq-note.static { position: static; font-weight: 500; color: var(--ink-3); padding: 0 8px; }
.sb2-sq-acts { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.sb2-sq-acts button { all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: var(--radius-pill); display: grid; place-items: center; color: #fff;
  background: #0f1016b3; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sb2-sq-acts button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sb2-sq-acts button:focus-visible { outline: 2px solid #fff; }
.sb2-sq:hover .sb2-sq-acts, .sb2-sq:focus-within .sb2-sq-acts { opacity: 1; }
@media (hover: none) { .sb2-sq-acts { opacity: 1; } }
.sb2-orient { position: absolute; top: 8px; left: 8px; height: 22px; padding: 0 8px; border-radius: var(--radius-xs); display: inline-flex; align-items: center;
  font: 600 11px/1 var(--font-sans); color: #fff; background: #0f1016b3; z-index: 1; font-variant-numeric: tabular-nums; }
.sb2-shimmer { position: absolute; inset: 0; background: linear-gradient(100deg, var(--surface-sunken) 30%, var(--hover) 50%, var(--surface-sunken) 70%);
  background-size: 300% 100%; animation: sb2-sh 1.4s infinite linear; }
@keyframes sb2-sh { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sb2-shimmer { animation: none; } }
.sb2-vers { display: flex; flex-wrap: wrap; gap: 4px; }
.sb2-ver { all: unset; cursor: pointer; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); font: 600 12px/26px var(--font-sans);
  color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); font-variant-numeric: tabular-nums; }
.sb2-ver.on { background: var(--sel); color: var(--on-sel); box-shadow: none; }
.sb2-ver:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sb2-vrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sb2-dl { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.sb2-dl .sb2-ic, .sb2-dl .sb2-ic svg { width: 14px; height: 14px; }

/* ── герои и места ───────────────────────────────────────────── */
.sb2-person .sb2-media { gap: 8px; width: min(100%, 340px); }
.sb2-person .sb2-media > .sb2-btn { width: 100%; }
.sb2-genpick { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; border-radius: 14px; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sb2-genpick .sb2-label { color: var(--ink); font-weight: 700; }
.sb2-genpick .sb2-select { width: 100%; min-height: 36px; padding: 6px 30px 6px 10px; font-size: 13px; }
.sb2-genpick .sb2-hint { margin: 0; }
.sb2-genpick .sb2-btn { width: 100%; padding: 0 8px; }
.sb2-person { display: flex; gap: 18px; padding: 16px; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); }
.sb2-person-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.sb2-person-head { display: flex; align-items: flex-end; gap: 8px; }
.sb2-pin { all: unset; cursor: pointer; height: var(--control-md); padding: 0 14px; border-radius: var(--radius-pill); font: 500 13px/var(--control-md) var(--font-sans);
  color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; }
.sb2-pin.on { color: var(--ink); background: var(--surface-sunken); font-weight: 600; }
.sb2-pin:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sb2-person-head .sb2-icon { margin-bottom: 4px; }

/* ── сцены ───────────────────────────────────────────────────── */
.sb2-toolbar { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line); }
.sb2-trow { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.sb2-tgroup .sb2-select { width: auto; min-width: 220px; min-height: var(--control-sm); padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
.sb2-tgroup { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb2-tgroup.end { margin-left: auto; }
.sb2-stepper { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sb2-stepper button { all: unset; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); font-size: 16px; }
.sb2-stepper button:hover { background: var(--hover); color: var(--ink); }
.sb2-stepper button[disabled] { opacity: .35; pointer-events: none; }
.sb2-stepper button:focus-visible { outline: 2px solid var(--focus); }
.sb2-stepper.sm button { width: 24px; height: 24px; font-size: 14px; }
.sb2-stepper.sm b { min-width: 36px; font-size: 13px; }
.sb2-stepper b { min-width: 42px; text-align: center; font: 600 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.sb2-total { font: 500 12px/16px var(--font-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sb2-format { position: relative; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; outline: none; }
.sb2-format-mark { display: block; width: 11px; height: 18px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.sb2-format[data-aspect="16:9"] .sb2-format-mark { width: 18px; height: 11px; }
.sb2-format[data-aspect="1:1"] .sb2-format-mark { width: 14px; height: 14px; }
.sb2-format-pop { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 5;
  padding: 6px 10px; border-radius: 10px; background: var(--surface-raised); color: var(--ink); white-space: nowrap;
  font: 500 12px/16px var(--font-sans); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg);
  opacity: 0; pointer-events: none; }
.sb2-format:hover .sb2-format-pop, .sb2-format:focus-visible .sb2-format-pop { opacity: 1; }
.sb2-confirm { display: inline-flex; gap: 6px; }
.sb2-busy { font: 600 13px/1 var(--font-sans); color: var(--ink-2); }

.sb2-scene { display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); scroll-margin-top: 64px; }
.sb2-scene-head { display: flex; align-items: center; gap: 10px; }
.sb2-n { font: 400 14px/1 var(--font-display); color: var(--on-sel); background: var(--sel); border-radius: var(--radius-xs); padding: 7px 10px; font-variant-numeric: tabular-nums; }
.sb2-tc { font: 500 12px/16px var(--font-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sb2-menuwrap { position: relative; margin-left: auto; }
.sb2-tgroup .sb2-menuwrap { margin-left: 0; }
.sb2-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 190px; padding: 6px; display: flex; flex-direction: column;
  background: var(--surface-raised); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg); }
.sb2-menu.wide { min-width: 280px; padding: 10px; }
.sb2-menu > button { all: unset; cursor: pointer; padding: 9px 12px; border-radius: var(--radius-sm); font: 500 14px/18px var(--font-sans); color: var(--ink); }
.sb2-menu > button:hover, .sb2-menu > button:focus-visible { background: var(--hover); }
.sb2-menu > button.danger { color: var(--danger); }
.sb2-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; width: 100%; }
.sb2-check { display: flex; gap: 10px; align-items: center; padding: 7px 4px; font: 500 14px/18px var(--font-sans); color: var(--ink); cursor: pointer; }
.sb2-check input { width: 18px; height: 18px; accent-color: var(--sel); flex: none; }

/* сцена: весь текст слева, справа сначала кадры (первый | последний), под ними видео */
.sb2-scene-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.sb2-stext { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.sb2-smedia { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 12px; }
.sb2-frames2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb2-frames2.one { grid-template-columns: 1fr 1fr; }
.sb2-vidbox { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.sb2-mline { font: 500 12px/16px var(--font-sans); color: var(--ink-3); }
.sb2-sq-cap { position: absolute; top: 8px; left: 8px; z-index: 2; height: 22px; padding: 0 8px; border-radius: var(--radius-xs); display: inline-flex; align-items: center;
  font: 600 11px/1 var(--font-sans); color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sb2-sq.has .sb2-sq-cap { color: #fff; background: #0f1016b3; box-shadow: none; }
.sb2-sq .sb2-sq-empty { padding-top: 34px; }
.sb2-smedia .sb2-sqbtn { max-width: 120px; }
.sb2-castline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 4px; }
.sb2-castline .sb2-label { margin-right: 4px; }
.sb2-who { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: var(--control-sm); padding: 0 12px 0 4px; border-radius: var(--radius-pill);
  font: 500 13px/1 var(--font-sans); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sb2-who img, .sb2-who i { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font: 600 11px/1 var(--font-sans); font-style: normal;
  background: var(--surface-sunken); }
.sb2-who.loc img, .sb2-who.loc i { border-radius: 6px; }
.sb2-who.on { background: var(--sel); color: var(--on-sel); box-shadow: none; font-weight: 600; }
.sb2-who:not(.on) img { opacity: .55; }
.sb2-who:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sb2-who-x { all: unset; cursor: pointer; width: 18px; height: 18px; margin-right: -4px; border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--font-sans); }
.sb2-who-x:hover { background: #ffffff2e; }
.sb2-who.add { cursor: pointer; padding: 0 12px; }
.sb2-castline .sb2-menuwrap { margin-left: 0; }
.sb2-castline .sb2-menu { left: 0; right: auto; min-width: 200px; }
.sb2-castline .sb2-menu > button { display: flex; align-items: center; gap: 8px; }
.sb2-castline .sb2-menu img, .sb2-castline .sb2-menu i { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; font: 600 11px/22px var(--font-sans); font-style: normal; text-align: center; background: var(--surface-sunken); }

.sb2-scene-foot { padding-top: 14px; border-top: 1px solid var(--line); }
.sb2-params { min-width: 0; }
.sb2-shotrow { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
.sb2-shotrow > .sb2-field { width: auto; }
.sb2-shotrow > .sb2-field.wide { flex: 1; min-width: 200px; }
.sb2-shotrow .sb2-select { min-width: 140px; }
.sb2-shotrow > .sb2-btn { margin-left: auto; }
.sb2-sum { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-md); font: 500 13px/18px var(--font-sans); color: var(--ink-2); }
.sb2-sum .sb2-ic { width: 16px; height: 16px; transition: transform .15s; }
.sb2-sum.open .sb2-ic { transform: rotate(90deg); }
.sb2-sum:hover { color: var(--ink); }
.sb2-sum:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sb2-pgrid { display: grid; grid-template-columns: auto minmax(160px, 1fr) minmax(220px, 2fr); gap: 12px 16px; margin: 8px 0 4px; align-items: end; }
.sb2-why { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 12px/16px var(--font-sans); margin-top: 8px; }
.sb2-why .ok { color: var(--success); }
.sb2-why .lost { color: var(--warning); }

/* ── просмотр ────────────────────────────────────────────────── */
.sb2-watch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.sb2-stage { position: relative; width: 300px; aspect-ratio: 9 / 16; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.sb2-stage.a16x9 { width: 520px; aspect-ratio: 16 / 9; }
.sb2-stage.a1x1 { width: 380px; aspect-ratio: 1; }
.sb2-stage img, .sb2-stage video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.sb2-stage-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); }
.sb2-stage-empty span { position: relative; }
.sb2-watch-side { display: flex; flex-direction: column; gap: 8px; }
.sb2-watch-act { margin: 0 0 8px; font-size: 17px; line-height: 24px; }
.sb2-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; }
.sb2-thumb { all: unset; cursor: pointer; position: relative; flex: none; width: 72px; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sb2-thumb.on { box-shadow: 0 0 0 2px var(--sel); }
.sb2-thumb img, .sb2-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb2-thumb i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; color: var(--ink-3); }
.sb2-thumb > span { position: absolute; left: 5px; top: 4px; font: 700 11px/1 var(--font-sans); color: #fff; background: #0f1016b3; border-radius: 6px; padding: 3px 5px; }
.sb2-thumb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sb2-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; display: flex; gap: 14px; align-items: center; max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 16px; border-radius: var(--radius-md); background: var(--sel); color: var(--on-sel); box-shadow: var(--shadow-lg); font: 500 14px/20px var(--font-sans); }
.sb2-tbtn { all: unset; cursor: pointer; font-weight: 700; padding: 4px 8px; border-radius: 8px; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .sb2-scene-grid { grid-template-columns: 1fr; }
  .sb2-smedia { position: static; max-width: 420px; }
  .sb2-beat-ops { margin-left: 0; }
}
@media (max-width: 760px) {
  .sb2 { --sq: 112px; padding: 0 12px 48px; }
  .sb2-win { padding: 16px; border-radius: var(--radius-md); }
  .sb2-win h2 { font-size: 20px; line-height: 26px; }
  .sb2-scene { padding: 12px; }
  .sb2-srow { gap: 12px; }
  .sb2-person { padding: 12px; gap: 12px; }
  .sb2-person-head { flex-wrap: wrap; }
  .sb2-row-fields.two { grid-template-columns: 1fr; }
  .sb2-pgrid { grid-template-columns: 1fr; }
  .sb2-tgroup.end { margin-left: 0; width: 100%; justify-content: space-between; }
  .sb2-shotrow > .sb2-btn { width: 100%; margin-left: 0; }
  .sb2-watch { grid-template-columns: 1fr; }
  .sb2-stage, .sb2-stage.a1x1 { width: 100%; max-width: 340px; margin: 0 auto; }
  .sb2-stage.a16x9 { width: 100%; }
  .sb2-sqbtn { height: 28px; font-size: 12px; padding: 0 8px; }
  .sb2-sq-empty { gap: 4px; padding: 6px; }
  .sb2-sq-empty > .sb2-ic { display: none; }
  .sb2, .sb2-win, .sb2-person, .sb2-person-body, .sb2-media { min-width: 0; max-width: 100%; }
  .sb2-person { flex-direction: column; align-items: center; }
  .sb2-person-body { width: 100%; align-self: stretch; }
  .sb2-person .sb2-media { width: 100%; max-width: 100%; margin-inline: auto; align-self: stretch; }
  .sb2-smedia { width: 100%; max-width: 100%; margin-inline: auto; }
  .sb2-tgroup .sb2-select { min-width: 0; width: 100%; }
}

/* ── раскадровка картинками ──────────────────────────────────── */
.sb2-tag { margin-left: 0; margin-top: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-xs); display: inline-flex; align-items: center; flex: none;
  font: 600 11px/1 var(--font-sans); color: var(--ink-2); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); }
@container (max-width: 520px) {
  .sb2-win.locked { padding: 16px; }
  .sb2-win h2 { flex: 1 1 calc(100% - 48px); }
  .sb2-tag { flex: 0 0 auto; width: max-content; max-width: calc(100% - 44px); margin-left: 44px; }
}
.sb2-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb2-mode { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 20px 1fr; gap: 4px 10px; align-items: start; padding: 14px 16px;
  border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sb2-mode:hover { background: var(--hover); }
.sb2-mode.on { box-shadow: inset 0 0 0 2px var(--sel), var(--shadow-sm); }
.sb2-mode:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sb2-mode-dot { width: 18px; height: 18px; border-radius: 50%; margin-top: 2px; box-shadow: inset 0 0 0 2px var(--line-strong); }
.sb2-mode.on .sb2-mode-dot { box-shadow: inset 0 0 0 5px var(--sel); }
.sb2-mode-t { font: 600 15px/22px var(--font-sans); color: var(--ink); }
.sb2-mode-h { grid-column: 2; font: 400 13px/18px var(--font-sans); color: var(--ink-2); }
.sb2-plan { margin: 0; font: 500 13px/18px var(--font-sans); color: var(--ink-2); }
.sb2-previews { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.sb2-preview { width: 112px; flex: none; }
.sb2-preview-box { width: 112px; height: 112px; display: grid; gap: 3px; padding: 4px; box-sizing: border-box; border-radius: 12px; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sb2-preview-cell { min-width: 0; min-height: 0; border-radius: 4px; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font: 600 11px/1 var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sb2-preview-cell.empty { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.sb2-sheets { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.sb2-sheetfig { margin: 0; width: 220px; max-width: 100%; flex: none; display: flex; flex-direction: column; gap: 8px; }
.sb2-sheet { position: relative; width: 100%; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sb2-sheet > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
.sb2-sheet-grid { position: absolute; inset: 0; display: grid; }
.sb2-cell { position: relative; box-shadow: inset 0 0 0 0.5px #ffffff59; padding: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sb2-cell b, .sb2-cell span { font: 600 11px/1 var(--font-sans); color: #fff; text-shadow: 0 1px 2px #000c; font-variant-numeric: tabular-nums; }
.sb2-cell b { font: 400 15px/1 var(--font-display); }
.sb2-sheet:not(:has(img)) .sb2-cell b, .sb2-sheet:not(:has(img)) .sb2-cell span { color: var(--ink-3); text-shadow: none; }
.sb2-framegrid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.sb2-frameitem { width: 132px; flex: none; }
.sb2-crop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-sunken); }
.sb2-crop-in { max-width: 100%; max-height: 100%; background-repeat: no-repeat; }
@media (max-width: 760px) {
  .sb2-modes { grid-template-columns: 1fr; }
  .sb2-frameitem { width: 112px; }
}