/* serials — внутренний инструмент. Картинка главная, отладка скрыта за тумблерами. */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --surface-3: #e4e7ec;
  --border: #dcdfe5;
  --border-strong: #c3c8d1;
  --text: #1a1d23;
  --muted: #59616d;
  --faint: #868e9a;
  --accent: #3451d1;
  --accent-weak: #e8ecfd;
  --on-accent: #ffffff;
  --on-ok: #ffffff;
  --on-err: #ffffff;
  --on-agent: #ffffff;
  --ok: #24813a;
  --ok-weak: #e3f3e7;
  --warn: #a35a00;
  --warn-weak: #fdf0dc;
  --err: #c0262d;
  --err-weak: #fde8e8;
  --info: #1765b5;
  --info-weak: #e2eefb;
  --run: #0b7f8c;
  --run-weak: #dff4f6;
  --agent: #6a3fd9;
  --agent-weak: #eee8fd;
  --stale: #c2410c;
  --stale-weak: #ffedd5;
  --locked: #7d8590;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-lg: 0 10px 30px rgba(16, 24, 40, .18);
  --radius: 10px;
  --radius-sm: 6px;
  --gap: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --card-min: 172px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115;
    --surface: #171a20;
    --surface-2: #1f232b;
    --surface-3: #282d37;
    --border: #2b313b;
    --border-strong: #3b4350;
    --text: #e7eaee;
    --muted: #a3abb7;
    --faint: #737c8a;
    --accent: #7d93ff;
    --accent-weak: #222a4a;
    --on-accent: #0f1115;
    --on-ok: #08160c;
    --on-err: #1c0507;
    --on-agent: #120a28;
    --ok: #5cc277;
    --ok-weak: #14301d;
    --warn: #f0a540;
    --warn-weak: #3a2a10;
    --err: #ff6b6f;
    --err-weak: #3d1618;
    --info: #63a8f0;
    --info-weak: #13283f;
    --run: #4fc7d4;
    --run-weak: #10303a;
    --agent: #a98bff;
    --agent-weak: #2a2148;
    --stale: #ff8a4c;
    --stale-weak: #3b2114;
    --locked: #7d8590;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1115; --surface: #171a20; --surface-2: #1f232b; --surface-3: #282d37; --border: #2b313b;
  --border-strong: #3b4350; --text: #e7eaee; --muted: #a3abb7; --faint: #737c8a; --accent: #7d93ff;
  --accent-weak: #222a4a; --on-accent: #0f1115; --on-ok: #08160c; --on-err: #1c0507; --on-agent: #120a28; --ok: #5cc277; --ok-weak: #14301d; --warn: #f0a540;
  --warn-weak: #3a2a10; --err: #ff6b6f; --err-weak: #3d1618; --info: #63a8f0; --info-weak: #13283f;
  --run: #4fc7d4; --run-weak: #10303a; --agent: #a98bff; --agent-weak: #2a2148; --stale: #ff8a4c;
  --stale-weak: #3b2114; color-scheme: dark;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-anchor: auto; }
html.noscroll { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font);
  overflow-wrap: break-word;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p { margin: 6px 0; }
code, kbd, pre, .mono { font-family: var(--mono); }
code { font-size: .92em; }
kbd {
  display: inline-block; padding: 0 4px; border: 1px solid var(--border-strong); border-bottom-width: 2px;
  border-radius: 4px; font-size: 11px; line-height: 16px; background: var(--surface-2); color: var(--muted);
}
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 6px 8px; min-width: 0; max-width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .card:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
textarea { width: 100%; resize: vertical; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
label.inline, label.check { display: inline-flex; align-items: center; gap: 6px; }

.small { font-size: 12px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.nowrap { white-space: nowrap; }
.wrap-any { overflow-wrap: anywhere; }
.spacer { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 4px 8px; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.row-between > * { min-width: 0; overflow-wrap: anywhere; }
code { overflow-wrap: anywhere; }
.plain { list-style: none; padding: 0; margin: 6px 0; }
.clamp-1, .clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
.en { }
.ru { color: var(--muted); }
.t-ok { color: var(--ok); } .t-err { color: var(--err); } .t-warn { color: var(--warn); } .t-stale { color: var(--stale); }

/* ---------- Каркас ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 0 24px; height: 48px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.logo { font-weight: 700; letter-spacing: .02em; color: var(--text); }
.crumbs { display: flex; gap: 6px; min-width: 0; overflow: hidden; flex: 1; }
.crumbs a { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs a + a::before { content: "›"; margin-right: 6px; color: var(--faint); }
.me { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.me .who { color: var(--muted); white-space: nowrap; }
.me form { margin: 0; }
.wrap { max-width: 1920px; margin: 0 auto; padding: 16px 24px 64px; }
.banner { padding: 8px 24px; font-size: 13px; }
.banner-err { background: var(--err-weak); color: var(--err); }
.page-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.page-title { font-size: 22px; margin-bottom: 4px; }
.head-money { text-align: right; margin-left: auto; }
.big { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.sec { margin: 20px 0; }
.sec > h2 { margin-bottom: 8px; }
.section-h { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* ---------- Кнопки, чипы ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; white-space: nowrap; line-height: 1.3;
}
.btn:hover:not(:disabled) { background: var(--surface-2); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
.btn-ok { background: var(--ok); border-color: var(--ok); color: var(--on-ok); font-weight: 600; }
.btn-ok:hover:not(:disabled) { background: var(--ok); filter: brightness(1.08); }
.btn-danger { background: var(--err); border-color: var(--err); color: var(--on-err); }
.btn-danger:hover:not(:disabled) { background: var(--err); filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost.on { background: var(--accent-weak); color: var(--accent); }
.btn-sm { padding: 3px 8px; font-size: 12px; }
.btn-xs { padding: 1px 6px; font-size: 11.5px; border-radius: 5px; }
.btn kbd { background: transparent; color: inherit; border-color: currentColor; opacity: .7; }
.linkish { background: none; border: 0; padding: 2px 0; color: var(--accent); cursor: pointer; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 12px;
  white-space: nowrap; background: var(--surface-2); color: var(--muted); line-height: 18px;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.t-ok.chip { background: var(--ok-weak); color: var(--ok); }
.t-err.chip { background: var(--err-weak); color: var(--err); }
.t-warn.chip { background: var(--warn-weak); color: var(--warn); }
.t-info.chip { background: var(--info-weak); color: var(--info); }
.t-run.chip { background: var(--run-weak); color: var(--run); }
.t-muted.chip { background: var(--surface-2); color: var(--faint); }
.chip.st-locked { background: var(--surface-2); color: var(--locked); }
.chip.st-ready { background: var(--info-weak); color: var(--info); }
.chip.st-running { background: var(--run-weak); color: var(--run); }
.chip.st-running .dot { animation: pulse 1.2s ease-in-out infinite; }
.chip.st-review { background: var(--warn-weak); color: var(--warn); }
.chip.st-done { background: var(--ok-weak); color: var(--ok); }
.chip.st-stale { background: var(--stale-weak); color: var(--stale); }
.chip.st-failed { background: var(--err-weak); color: var(--err); }
@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .chip.st-running .dot, .spinner { animation: none !important; } }

.est {
  margin-left: 4px; font-size: 10.5px; padding: 0 4px; border-radius: 4px; background: var(--warn-weak); color: var(--warn);
  vertical-align: middle; font-weight: 500;
}
.notional { color: var(--faint); font-size: 12px; }
.usd { font-variant-numeric: tabular-nums; white-space: nowrap; }

.alert { padding: 8px 12px; border-radius: var(--radius-sm); margin: 8px 0; border: 1px solid transparent; }
.alert-ok { background: var(--ok-weak); color: var(--ok); }
.alert-err { background: var(--err-weak); color: var(--err); border-color: color-mix(in srgb, var(--err) 25%, transparent); }
.alert-err pre { color: var(--text); }
.alert-stale { background: var(--stale-weak); color: var(--stale); }
.empty-state { padding: 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted); background: var(--surface); }
.empty-state b { color: var(--text); }

/* ---------- Плитки ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tile {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; color: inherit; box-shadow: var(--shadow); min-width: 0;
}
a.tile:hover { text-decoration: none; border-color: var(--border-strong); }
.tile-cover { aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; display: grid; place-items: center; }
.tile-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.tile-body { padding: 12px 14px; display: grid; gap: 6px; }
.tile-title { font-size: 17px; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; }
.kv dt { font-size: 12px; color: var(--faint); }
.kv dd { margin: 0; }
.bar { position: relative; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; display: flex; }
.bar-done { background: var(--ok); height: 100%; transition: width .3s; }
.bar-work { background: var(--run); opacity: .55; height: 100%; }
.waiting { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; display: grid; gap: 2px; }
.waiting b { color: var(--warn); font-size: 13px; }
.tile-new { justify-content: center; border-style: dashed; box-shadow: none; }
.tile-new-btn { background: none; border: 0; padding: 40px; font-size: 16px; color: var(--accent); cursor: pointer; }
.tile-new-form { padding: 14px; display: grid; gap: 8px; }
.tile.empty { padding: 20px; color: var(--muted); }

.tiles-ep { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ep-tile { flex-direction: row; }
.ep-thumb { width: 72px; flex: none; background: var(--surface-2); display: grid; place-items: center; }
.ep-thumb img, .ep-thumb .thumb-empty { width: 72px; height: 128px; object-fit: cover; display: grid; }
.ep-thumb .thumb-empty { font-size: 11px; text-align: center; padding: 4px; border-radius: 0; }
.ep-stage .chip { white-space: normal; }
.ep-tile .tile-body { padding: 10px 12px; gap: 4px; min-width: 0; flex: 1; }
.ep-num { font-weight: 650; }
.ep-stage { font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ep-stages { display: flex; gap: 3px; }
.pip { width: 100%; max-width: 22px; height: 4px; border-radius: 2px; background: var(--surface-3); }
.pip.st-done { background: var(--ok); } .pip.st-running { background: var(--run); } .pip.st-review { background: var(--warn); }
.pip.st-failed { background: var(--err); } .pip.st-stale { background: var(--stale); } .pip.st-ready { background: var(--info); opacity: .5; }

.thumb { display: block; }
.thumb-empty {
  display: grid; place-items: center; background: var(--surface-2); color: var(--faint); font-size: 12px;
  min-height: 60px; width: 100%; height: 100%; border-radius: 4px;
}

/* ---------- Вкладки ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 8px 0 16px; overflow-x: auto; scrollbar-width: thin; }
.tabs a, .tabs button {
  padding: 8px 12px; color: var(--muted); border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  white-space: nowrap; margin-bottom: -1px;
}
.tabs a:hover, .tabs button:hover { color: var(--text); text-decoration: none; }
.tabs .on { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.tabs-sm { margin: 12px 0 10px; }
.tabs-sm button { padding: 6px 10px; font-size: 13px; }

.toolbar { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.uploader { flex: 1 1 420px; display: grid; gap: 8px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.uploader.drag { border-color: var(--accent); background: var(--accent-weak); }
.uploader > label.btn { justify-self: start; display: inline-flex; color: var(--text); font-size: 14px; }
.upload-list { display: grid; gap: 8px; }
.upload-progress { min-width: 140px; display: grid; gap: 2px; }
.textwork-all, .night { position: relative; }
.textwork-all { display: grid; gap: 2px; justify-items: start; }
.popover {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(420px, calc(100vw - 32px)); padding: 12px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display: grid; gap: 8px; color: var(--text); font-weight: normal; cursor: default; white-space: normal;
}
.popover.right, .textwork-all .popover { left: auto; right: 0; }
.num { width: 6.5em; }
.num-xs { width: 4em; padding: 2px 6px; font-size: 12px; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.card-form { display: grid; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.card-form.wide { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.login { min-height: calc(100vh - 140px); display: grid; place-items: center; }
.login form { width: min(380px, 100%); }
.login h1 { font-size: 20px; }

/* ---------- Таблицы ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); max-width: 100%; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.tbl th { font-weight: 600; color: var(--muted); font-size: 12px; background: var(--surface-2); position: sticky; top: 0; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl.num-right td:not(:first-child), .tbl.num-right th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tbl.assets td.desc { min-width: 260px; max-width: 520px; }
.tbl.assets td.canon img { width: 54px; height: 96px; object-fit: cover; border-radius: 4px; }
.tbl.assets td.shots { max-width: 160px; }
.tbl tr.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: var(--ok-weak); } }
.stats { display: flex; gap: 12px; flex-wrap: wrap; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; min-width: 160px; }

/* ---------- Библия, лента ---------- */
.bible-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.bcard { display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; min-width: 0; }
.bcard > a, .bcard > .thumb { flex: none; width: 90px; }
.bcard .thumb, .bcard .thumb-empty { width: 90px; height: 160px; object-fit: cover; border-radius: 6px; }
.bcard-body { min-width: 0; display: grid; gap: 4px; align-content: start; flex: 1; }
.bcard-body > .chip, .bcard-body > .badge-agent, .bcard-body > b + .chip { justify-self: start; }
.looks { display: grid; gap: 6px; }
.look-slots { display: flex; gap: 4px; flex-wrap: wrap; }
.bcard .mini .thumb, .bcard .mini .thumb-empty { width: 36px; height: 64px; object-fit: cover; border-radius: 3px; min-height: 0; font-size: 9px; }
.mini.stale { outline: 2px solid var(--stale); border-radius: 3px; }
.feed { display: grid; gap: 10px; }
.feed-item { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--agent); border-radius: var(--radius); padding: 10px; }
.feed-item.past { border-left-color: var(--border-strong); opacity: .75; }
.feed-thumb img, .feed-thumb .thumb-empty { width: 72px; height: 128px; object-fit: cover; border-radius: 6px; }
.feed-body { min-width: 0; display: grid; gap: 4px; align-content: start; }
.reason { margin: 0; }
.feed-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Блоки серии ---------- */
.blocks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.block {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--locked);
  border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0;
}
.block.st-ready { border-left-color: var(--info); }
.block.st-running { border-left-color: var(--run); }
.block.st-review { border-left-color: var(--warn); }
.block.st-done { border-left-color: var(--ok); }
.block.st-stale { border-left-color: var(--stale); }
.block.st-failed { border-left-color: var(--err); }
.block.st-locked .block-h h2 { color: var(--muted); }
.block-h {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; flex-wrap: wrap; user-select: none;
  min-height: 48px;
}
.block-h h2 { font-size: 15px; white-space: nowrap; }
.block-h .summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block-h .head-note { max-width: 420px; }
.block-cost { font-variant-numeric: tabular-nums; }
.block-actions { display: inline-flex; gap: 6px; align-items: center; cursor: default; position: relative; }
.block-actions form.run { display: inline-flex; gap: 2px; margin: 0; position: relative; }
.caret { width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s; flex: none; }
.caret.open { transform: rotate(90deg); }
.caret.sm { border-left-width: 4px; border-top-width: 3px; border-bottom-width: 3px; }
.block-b { border-top: 1px solid var(--border); }
.block-inner { padding: 12px 14px 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.lazy { padding: 12px 14px; }
.progress { display: grid; gap: 4px; }
.now { white-space: nowrap; }

.jobs { border-top: 1px dashed var(--border); padding-top: 8px; }
.jobs > summary, details.more > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.jobs-body { margin-top: 8px; }
.jobs-tbl td { max-width: 520px; }
details.more { margin-top: 4px; }

/* ---------- Шаги текстовой работы ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.step { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; display: grid; gap: 4px; position: relative; min-width: 0; }
.step-h { display: flex; gap: 6px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.step.js-running { box-shadow: inset 0 0 0 1px var(--run); }
.step.js-failed { box-shadow: inset 0 0 0 1px var(--err); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Сценарий до и после ---------- */
.script { display: grid; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.script-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 10px; background: var(--surface-2); align-items: center; }
.script-head, .script-row { display: grid; grid-template-columns: 82px 92px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 8px 10px; }
.sr-time { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 11.5px; }
.script-head { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); border-top: 1px solid var(--border); position: sticky; top: 48px; z-index: 2; overflow-anchor: none; }
.script-row { border-top: 1px solid var(--border); }
.script-row:target { background: var(--accent-weak); }
.sr-frame img { width: 92px; border-radius: 4px; display: block; }
.sr-b, .sr-a { min-width: 0; }
.sr-a { border-left: 2px solid var(--accent-weak); padding-left: 10px; }
.sr-b p, .sr-a p { margin: 4px 0; }
.line { margin: 4px 0; }
.spk { font-weight: 600; margin-right: 4px; }
.plate { display: inline-block; font-size: 12px; padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface-2); margin: 2px 0; font-family: var(--mono); }
del.d-del { background: var(--err-weak); color: var(--err); text-decoration: line-through; text-decoration-thickness: 1px; border-radius: 2px; }
ins.d-ins { background: var(--ok-weak); color: var(--ok); text-decoration: none; border-radius: 2px; }
mark.nm { background: var(--agent-weak); color: var(--agent); border-radius: 2px; padding: 0 1px; }
.note-ru { color: var(--warn); }

/* ---------- Сущности, слоты, галереи ---------- */
.ent { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px; min-width: 0; }
.ent-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; cursor: pointer; padding: 2px 0 6px; }
.ent-done { background: var(--surface-2); border-color: transparent; }
.ent-done .ent-h { padding-bottom: 2px; }
.line-ctx { margin: 6px 0 2px; }

.toggles {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; position: sticky; top: 48px; z-index: 5;
  background: var(--surface); padding: 6px 0; border-bottom: 1px solid var(--border);
  overflow-anchor: none; /* липкая панель не должна быть якорем прокрутки, иначе тумблер сдвигает страницу */
}
.tog { border: 1px solid var(--border-strong); background: var(--surface); padding: 2px 10px; border-radius: 999px; cursor: pointer; font-size: 12.5px; }
.tog.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.kbd-hint { margin-left: auto; }
.scene-modes { margin: 4px 0 10px; }
.scene-modes summary { cursor: pointer; padding: 4px 0; }
.scene-mode-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.scene-mode-list li { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 3px 0; border-top: 1px solid var(--border); min-width: 0; }
.scene-mode-form { display: inline-flex; gap: 4px; }

.slot { padding: 8px 0; border-top: 1px solid var(--border); min-width: 0; }
.ent .slot:first-of-type { border-top: 0; padding-top: 2px; }
.slot-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; min-height: 26px; }
.slot-note { max-width: 360px; }
.slot-tools { display: inline-flex; gap: 6px; align-items: center; }
.slot.is-stale .slot-h b { color: var(--stale); }
.cmp-bar { display: flex; gap: 10px; align-items: center; padding: 6px 8px; background: var(--accent-weak); border-radius: var(--radius-sm); margin-bottom: 6px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: 10px; align-items: start; }
.card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; outline-offset: 1px;
}
.card:focus-visible { outline: 3px solid var(--accent); }
.card.is-approved { border: 2px solid var(--ok); box-shadow: 0 0 0 2px var(--ok-weak); }
.card.is-rejected .card-media img { opacity: .55; filter: grayscale(.6); }
.card.picked { outline: 3px solid var(--accent); }
.card-media {
  position: relative; aspect-ratio: var(--ar, 9 / 16); background: var(--surface-2); display: grid; place-items: center;
  max-height: 72vh; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.card-media img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; display: block; border-radius: inherit; }
.card-err, .card-empty { overflow: hidden; }
.card-media audio { width: calc(100% - 12px); }
.card-media .play { position: absolute; left: 8px; bottom: 8px; background: rgba(0, 0, 0, .55); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; font-size: 11px; pointer-events: none; }
.card .badges { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
.card .badge-agent { position: relative; }
.badge-ok { background: var(--ok); color: var(--on-ok); font-size: 11.5px; padding: 1px 7px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.badge-agent { background: var(--agent); color: var(--on-agent); font-size: 11.5px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; cursor: help; display: inline-block; }
.badge-ok.static, .badge-agent.static { position: static; }
.badge-agent .tip {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); width: max-content; max-width: min(300px, 80vw); z-index: 10;
  background: var(--text); color: var(--bg); padding: 8px 10px; border-radius: 8px; font-size: 12.5px; white-space: normal; line-height: 1.4;
  box-shadow: var(--shadow-lg); cursor: auto;
}
.slot-h .badge-agent { position: relative; }
.badge-agent:hover .tip, .badge-agent:focus .tip, .badge-agent:focus-within .tip { display: block; }
.pick { position: absolute; bottom: 6px; right: 6px; background: var(--surface); border-radius: 6px; padding: 4px; display: flex; }
.pick input { width: 18px; height: 18px; }
.card-meta { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 4px 5px; min-height: 30px; }
.meta-l { display: inline-flex; gap: 2px 5px; align-items: center; color: var(--muted); min-width: 0; flex-wrap: wrap; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.card-meta .btn-xs { padding: 1px 5px; }
.meta-r { display: inline-flex; gap: 2px; flex: none; }
.meta-r .btn-ghost { padding: 1px 4px; }
.score { font-variant-numeric: tabular-nums; }
.st-word { font-size: 11.5px; white-space: nowrap; }
.st-c-auto_rejected, .st-c-rejected { color: var(--err); }
.st-c-shortlisted { color: var(--info); }
.card-err { border-color: color-mix(in srgb, var(--err) 45%, var(--border)); background: var(--err-weak); }
.err-body { padding: 10px; display: grid; gap: 6px; align-content: start; color: var(--err); min-height: 160px; }
.err-body pre { margin: 0; max-height: 180px; overflow: auto; }
.card-pending .card-media { gap: 6px; align-content: center; color: var(--muted); }
.card-empty { padding: 16px; display: grid; gap: 8px; place-items: center; border-style: dashed; min-height: 120px; }
.spinner { width: 22px; height: 22px; border: 3px solid var(--border-strong); border-top-color: var(--run); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.more-row { margin-top: 6px; }
.more-row .gallery { margin-top: 6px; }

/* Вкладки отладки внутри карточки */
.dets { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.det { border-top: 1px solid var(--border); padding: 6px; font-size: 12.5px; min-width: 0; }
.det-in { display: grid; gap: 4px; min-width: 0; }
.det-h { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
pre.prompt, pre.json, pre.log {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: 12px; line-height: 1.45;
  background: var(--surface-2); padding: 6px 8px; border-radius: var(--radius-sm); max-height: 360px; overflow-y: auto;
}
pre.prompt.neg { color: var(--muted); }
pre.log.err, .alert-err pre.log { color: var(--err); }
.prompt-edit { display: grid; gap: 6px; }
.prompt-edit textarea { font-size: 12px; }
.inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px 6px; align-items: start; }
.input { display: grid; gap: 2px; color: var(--text); font-size: 11px; line-height: 1.25; min-width: 0; align-content: start; }
a.input:hover { text-decoration: none; }
a.input[href]:hover img { outline: 2px solid var(--accent); }
.input img, .input .thumb-empty { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 4px; min-height: 0; min-width: 0; display: block; }
.in-l { min-width: 0; overflow-wrap: anywhere; hyphens: auto; font-size: 11px; color: var(--muted); }
ul.kvl { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; font-size: 12px; line-height: 1.4; }
ul.kvl code { font-size: 11px; }
.in-l b { color: var(--text); font-weight: 600; }
.input.replaced img { outline: 2px solid var(--stale); }
dl.params { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; margin: 0; font-size: 12px; }
dl.params dt { color: var(--faint); }
dl.params dd { margin: 0; min-width: 0; }
ul.qa { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
ul.qa li { padding-left: 8px; border-left: 3px solid var(--border-strong); }
ul.qa li.ok { border-left-color: var(--ok); }
ul.qa li.bad { border-left-color: var(--err); }

/* Промпт слота: один раз во всю ширину под галереей (группы A, B… если промпты разные) */
.slot-prompts { margin-top: 8px; min-width: 0; }
.sp-list { display: grid; gap: 8px; min-width: 0; }
.sp { display: grid; gap: 4px; min-width: 0; border-left: 3px solid var(--accent-weak); padding-left: 8px; }
.sp-meta { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--faint); font-size: 11.5px; }
.slot-prompts pre.prompt { max-height: 260px; font-size: 12.5px; }
.pl { font-size: 11px; padding: 0 5px; border-radius: 4px; background: var(--accent-weak); color: var(--accent); white-space: nowrap; }
.badge-was { background: var(--surface-3); color: var(--muted); font-size: 11px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; cursor: help; }
.qa-why { color: var(--text); }
ul.qa-issues { margin: 2px 0 0; padding-left: 16px; }

/* Озвучка: карточка-строка с плеером, без пустой вертикальной рамки 9:16 */
.gallery-audio { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card-media.card-media-audio { aspect-ratio: auto; place-items: stretch; padding: 8px 6px 4px; gap: 6px; max-height: none; }
.card-media-audio .badges { position: static; }
.card-media-audio audio { width: 100%; height: 36px; }
.card-pending .card-media-audio { min-height: 60px; grid-auto-flow: column; justify-content: start; align-items: center; }
.ent-audio { scroll-margin-top: 96px; padding-bottom: 4px; }
.ent-audio .ent-h { padding-bottom: 2px; }
.aud-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 4px 16px; align-items: start; padding: 4px 0; }
.aud-pair + .aud-pair { border-top: 1px solid var(--border); }
.aud-pair .line-ctx { margin: 4px 0 0; }
.aud-pair .slot { border-top: 0; padding: 0; }
.aud-pair .slot-h { margin-bottom: 4px; min-height: 22px; }
.aud-pair .gallery-audio { grid-template-columns: minmax(0, 1fr); }
details.stretched > summary { cursor: pointer; }
.stretch-list { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.stretch { white-space: nowrap; font-variant-numeric: tabular-nums; color: inherit; }
.stretch b { font-weight: 650; }
.locked-why { margin: 0; }
.voice-row { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.voice-row audio { width: 100%; height: 30px; }

/* ---------- Лайтбокс и модальное окно ---------- */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(8, 10, 14, .94); color: #eef0f3; display: grid; grid-template-rows: 1fr auto; }
.lb-fig { margin: 0; display: grid; place-items: center; padding: 16px 64px 0; min-height: 0; overflow: hidden; }
.lb-fig img, .lb-fig video { max-width: 100%; max-height: calc(100vh - 92px); object-fit: contain; border-radius: 6px; }
.lb-x { position: absolute; top: 10px; right: 14px; font-size: 22px; background: none; border: 0; color: #fff; cursor: pointer; z-index: 2; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 44px; width: 52px; height: 80px; background: rgba(255, 255, 255, .06); border: 0; color: #fff; cursor: pointer; border-radius: 8px; z-index: 2; }
.lb-prev { left: 6px; } .lb-next { right: 6px; }
.lb-bar { display: flex; gap: 12px; align-items: center; padding: 10px 16px; background: rgba(0, 0, 0, .5); flex-wrap: wrap; }
.lb-bar .btn { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); }
.lb-bar .btn-ok { background: #24813a; border-color: #24813a; color: #fff; }
.lb-info { display: inline-flex; gap: 10px; align-items: center; font-size: 13px; color: #c9ced6; }
.lb-pos { font-variant-numeric: tabular-nums; color: #c9ced6; }
.lb-keys { color: #9aa3ae; }
.lb-reject {
  position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); width: min(640px, calc(100vw - 32px));
  background: var(--surface); color: var(--text); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; box-shadow: var(--shadow-lg);
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); cursor: pointer; font-size: 13px; }
.tag:has(input:checked) { background: var(--err-weak); border-color: var(--err); color: var(--err); }
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(8, 10, 14, .7); display: grid; place-items: center; padding: 16px; }
.modal-box { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: min(1600px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.modal-h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.cmp { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; padding: 14px; }
.cmp-cands { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; }
.cmp-col { margin: 0; display: grid; gap: 6px; align-content: start; border-radius: var(--radius); padding: 4px; }
.cmp-col.is-approved { outline: 2px solid var(--ok); }
.cmp-col img, .cmp-col video { width: 100%; max-height: calc(100vh - 170px); object-fit: contain; background: var(--surface-2); border-radius: 6px; }
.cmp-col figcaption { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmp-refs { display: grid; gap: 10px; align-content: start; }
.ref { display: grid; gap: 2px; color: var(--text); }
.ref img { width: 100%; max-height: 300px; object-fit: contain; background: var(--surface-2); border-radius: 6px; }

/* ---------- Аниматик, прочее ---------- */
.animatic { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.animatic video { width: min(360px, 100%); aspect-ratio: 9 / 16; background: #000; border-radius: var(--radius); }
.settings-form { display: grid; gap: 8px; max-width: 900px; }
.secret { font-size: 16px; padding: 4px 10px; background: var(--surface); border-radius: 6px; user-select: all; }
input.wide { width: min(560px, 100%); }
.stop.on { background: var(--err-weak); padding: 12px; border-radius: var(--radius); }
.llm h3 { margin: 12px 0 4px; }

#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: grid; gap: 8px; max-width: min(460px, calc(100vw - 32px)); }
.toast { background: var(--text); color: var(--bg); padding: 8px 12px; border-radius: 8px; box-shadow: var(--shadow-lg); font-size: 13px; cursor: pointer; }
.toast-err { background: var(--err-weak); color: var(--err); border: 1px solid var(--err); }
.toast .alert { margin: 0; padding: 0; background: none; border: 0; }

/* ---------- Узкие экраны ---------- */
@media (max-width: 1100px) {
  .cmp { grid-template-columns: 1fr; }
  .cmp-refs { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@media (max-width: 760px) {
  :root { --card-min: 128px; }
  .block-inner { padding: 10px 10px 12px; }
  .ent { padding: 6px; }
  .block-h { padding: 8px 10px; gap: 6px 8px; }
  .card-media { max-height: 60vh; }
  .sr-time { white-space: normal; }
  .gallery-audio { grid-template-columns: 1fr; }
  .aud-pair { grid-template-columns: minmax(0, 1fr); }
  /* Липкая панель тумблеров — одна строка с прокруткой вбок, а не два ряда поверх галереи */
  .toggles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; }
  .toggles::-webkit-scrollbar { display: none; }
  .toggles > .faint:first-child { display: none; }
  .tog { flex: none; padding: 2px 9px; }
  .textwork-all { flex: 1 1 100%; }
  .textwork-all .popover { left: 0; right: auto; }
  .topbar { padding: 0 16px; gap: 10px; }
  .me a, .me .who { display: none; }
  .wrap { padding: 12px 16px 48px; }
  .tiles { grid-template-columns: 1fr; }
  .head-money { text-align: left; margin-left: 0; }
  .script-head { display: none; }
  .script-row { grid-template-columns: 48px minmax(0, 1fr); }
  .sr-frame { grid-column: 2; }
  .sr-b, .sr-a { grid-column: 1 / -1; }
  .sr-a { border-left: 0; padding-left: 0; border-top: 1px dashed var(--border); padding-top: 6px; }
  .two-col { grid-template-columns: 1fr; }
  .kbd-hint { display: none; }
  .lb-fig { padding: 8px 8px 0; }
  .lb-nav { width: 40px; height: 64px; font-size: 32px; background: rgba(0, 0, 0, .35); }
  .lb-keys { display: none; }
  .block-h .summary { white-space: normal; }
  .cmp-cands { grid-template-columns: 1fr; }
}

/* ---------- Лаборатория ---------- */
.lab { display: grid; gap: 14px; }
.lab-pick { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.lab-pick label { display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
.lab-pick select { min-width: 160px; max-width: 100%; }
.lab-pick .lab-target { flex: 1 1 320px; }
.lab-pick .lab-target select { width: 100%; }
.lab-head { display: flex; gap: 14px; align-items: center; }
.lab-canon { display: grid; gap: 4px; justify-items: center; width: 132px; flex: none; }
.lab-canon img, .lab-canon video { width: 132px; max-height: 236px; object-fit: contain; border-radius: var(--radius-sm); background: var(--surface-2); }
.lab-canon audio { width: 132px; }
.lab-title { margin: 0; font-size: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.code-chip { font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--muted); }
.lab-form { display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.lab-form label { display: grid; gap: 4px; font-size: 13px; }
.lab-form textarea, .lab-form input:not([type=checkbox]):not([type=radio]), .lab-form select { width: 100%; font: inherit; }
.lab-form textarea { font-size: 13px; line-height: 1.45; resize: vertical; }
.lab-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lab-voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.lab-inline { display: inline-flex !important; align-items: center; gap: 8px; }
.lab-inline input { width: 90px !important; }
.lab-tr { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lab-refs, .lab-models { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0; min-width: 0; }
.lab-refs legend, .lab-models legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.lab-refs { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-ref { display: grid !important; gap: 2px; width: 96px; font-size: 11.5px !important; position: relative; }
.lab-ref img { width: 96px; height: 130px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); }
.lab-ref input { position: absolute; top: 4px; left: 4px; }
.lab-ref.replaced img { opacity: .5; }
.lab-ref.added img { outline: 2px solid var(--accent); outline-offset: -2px; }
.lab-pick { flex-basis: 100%; }
.lab-pick summary { list-style: none; display: inline-flex; cursor: pointer; }
.lab-pick summary::-webkit-details-marker { display: none; }
.lab-pick-list { margin-top: 8px; max-height: 440px; overflow-y: auto; }
.lab-pick-hint { margin: 0; }
.lab-pick-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lab-pick-body { display: grid; gap: 10px; }
.lab-pick-find { max-width: 320px; }
.lab-pick-item { display: grid; gap: 2px; align-content: start; width: 80px; padding: 0; border: 0; background: none;
  cursor: pointer; font: inherit; font-size: 11px; line-height: 1.25; color: var(--muted); text-align: left; }
.lab-pick-item img { width: 80px; height: 106px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); }
.lab-pick-item span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere; }
.lab-pick-item:hover img { outline: 2px solid var(--border-strong); outline-offset: -2px; }
.lab-pick-item.picked img { outline: 2px solid var(--accent); outline-offset: -2px; opacity: .7; }
.lab-mlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 12px; }
.lab-model { display: flex !important; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; padding: 3px 0; }
.lab-model.off { opacity: .55; }
.lab-model .small { flex-basis: 100%; padding-left: 22px; }
.lab-catalog { margin-top: 8px; }
.lab-cat { max-height: 360px; overflow: auto; margin-top: 6px; }
.lab-cat-q { width: 100%; margin: 6px 0; }
.lab-go-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lab-ai { display: grid; gap: 6px; background: var(--accent-weak); border-radius: var(--radius-sm); padding: 8px 10px; }
.lab-ai-out { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; }
.lab-ai-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lab-ai-changes { margin: 0; padding-left: 18px; }
.lab-diff { margin-top: 4px; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; max-height: 240px; overflow: auto; }
.lab-plist { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; }
.lab-plist li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lab-plist pre { flex-basis: 100%; margin: 0; }
.lab-preview { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 8px; display: grid; gap: 8px; }
.lab-pv pre { max-height: 280px; overflow: auto; }
.lab-run { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; display: grid; gap: 8px; }
.lab-run.is-lab { border-left: 3px solid var(--info); }
.lab-run-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lab-card { position: relative; }
.lab-card .card-media img, .lab-card .card-media video { cursor: zoom-in; width: 100%; height: 100%; object-fit: contain; }
.lab-model-tag { font-size: 11.5px; font-weight: 600; padding: 3px 6px; background: var(--surface-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-viewer { max-width: min(1100px, 96vw); }
.lab-view { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; padding: 12px; }
.lab-view-media { margin: 0; display: grid; gap: 4px; justify-items: center; }
.lab-view-media img, .lab-view-media video { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius-sm); background: var(--surface-2); }
.lab-view-side { display: grid; gap: 10px; align-content: start; max-height: 80vh; overflow: auto; }
.lab-approve { display: grid; gap: 6px; background: var(--ok-weak); border-radius: var(--radius-sm); padding: 8px; }
.lab-approve select { width: 100%; }
.lab-qa { display: grid; gap: 2px; }
@media (max-width: 760px) {
  .lab-row.two-col, .lab-view { grid-template-columns: 1fr; }
  .lab-head { flex-direction: column; align-items: start; }
}
.card-model { font-size: 11.5px; font-weight: 600; padding: 2px 6px 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot.is-target { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); transition: outline-color 1s; }
/* Готовность плана по слоям */
.mf { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-left: 6px; }
.mf-l { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.mf-l i { width: 8px; height: 8px; border-radius: 50%; background: var(--locked); display: inline-block; }
.mf-ok i { background: var(--ok); }
.mf-wait i { background: var(--warn); }
.mf-stale i { background: var(--stale); }
.mf-bad i { background: var(--err); }
.mf-bad { color: var(--err); }
.mf-why { flex-basis: 100%; padding-left: 2px; }
.section-h .chip { margin-left: 8px; font-weight: 500; }
/* Подсказка «?» с текстом по наведению и фокусу */
.help { position: relative; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 4px; border-radius: 50%; border: 1px solid var(--border-strong); color: var(--muted); font-size: 11px; font-weight: 700; cursor: help; vertical-align: 1px; }
.help .tip { display: none; position: absolute; z-index: 30; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); width: min(340px, 80vw); padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); color: var(--text); font-size: 12.5px; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; }
.help:hover .tip, .help:focus .tip, .help:focus-within .tip { display: block; }

/* Ассистент внизу страницы */
.asst { position: fixed; right: 16px; bottom: 16px; z-index: 40; }
.asst-fab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent, #fff); font: inherit; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.asst-fab:hover { filter: brightness(1.08); }
.asst-panel { width: min(420px, calc(100vw - 32px)); height: min(640px, calc(100vh - 96px)); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0, 0, 0, .3); overflow: hidden; }
.asst-body { display: flex; flex-direction: column; height: 100%; }
.asst-pad { padding: 12px; }
.asst-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.asst-ctx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.asst-scroll { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
#asst-log { display: flex; flex-direction: column; gap: 8px; }
.asst-hello p { margin: 0 0 6px; }
.asst-msg { max-width: 92%; padding: 7px 10px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.asst-me { align-self: flex-end; background: var(--accent-weak); border-bottom-right-radius: 4px; }
.asst-me.is-pending { opacity: .7; }
.asst-bot { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; display: grid; gap: 6px; }
.asst-err { color: var(--err); }
.asst-task { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; display: grid; gap: 2px; white-space: normal; }
.asst-task.is-q { border-color: var(--warn); }
.asst-act.is-done { border-color: var(--ok); }
.asst-act.is-failed { border-color: var(--err); }
.asst-looks summary { cursor: pointer; }
.asst-sql, .asst-sql-out { margin: 4px 0 0; padding: 4px 6px; background: var(--surface-2); border-radius: var(--radius-sm);
  font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow-y: auto; }
.asst-sql-out { color: var(--muted); }
.asst-q { color: var(--warn); }
.asst-task-go { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.asst-blocked { margin: 0 10px 6px; padding: 6px 8px; background: var(--warn-weak); border-radius: var(--radius-sm); }
.asst-form { display: flex; gap: 6px; align-items: flex-end; padding: 8px 10px; border-top: 1px solid var(--border); }
.asst-form textarea { flex: 1; resize: none; font: inherit; font-size: 13.5px; min-height: 40px; max-height: 140px; }
.lab-task { display: grid; gap: 4px; background: var(--info-weak); border-radius: var(--radius-sm); padding: 8px 10px; }
.lab-task-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 560px) {
  .asst { right: 8px; bottom: 8px; left: 8px; display: flex; justify-content: flex-end; }
  .asst-panel { width: 100%; height: calc(100vh - 72px); }
}
