/* ============================================================================
 * «Обучение»: практика по видео Гребенюка и «Разбор звонков» (ТЗ Сабины 13.10.2026) — training-practice.js
 * Внутри «Продаж» — токены #salesTab (--s-*), окно ответов в <body> — свои токены --w-* (светлая и тёмная тема).
 * ========================================================================== */

/* ---------- Вводная темы ---------- */
#salesTab .tpr-intro {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px;
    border-radius: 14px; border: 1px solid var(--s-bd);
    background: linear-gradient(115deg, color-mix(in srgb, var(--s-ai) 9%, var(--s-card)) 0%, var(--s-card) 70%);
}
#salesTab .tpr-intro.calls { background: linear-gradient(115deg, color-mix(in srgb, var(--s-info) 9%, var(--s-card)) 0%, var(--s-card) 70%); }
#salesTab .tpr-intro-ic { width: 44px; height: 44px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--s-ai-bg); color: var(--s-ai-ink); }
#salesTab .tpr-intro.calls .tpr-intro-ic { background: var(--s-info-bg); color: var(--s-info-ink); }
#salesTab .tpr-intro-t { flex: 1; min-width: 0; }
#salesTab .tpr-intro-t b { font-size: 14px; color: var(--s-ink); }
#salesTab .tpr-intro-t p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--s-ink4); }
#salesTab .tpr-intro-prog { flex: none; text-align: center; min-width: 58px; }
#salesTab .tpr-intro-prog b { display: block; font-size: 22px; font-weight: 800; color: var(--s-ink); font-family: var(--s-mono); line-height: 1.1; }
#salesTab .tpr-intro-prog span { font-size: 11px; color: var(--s-mut); }

/* ---------- Чипы ---------- */
.tpr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; background: var(--s-sub2, #f1f5f9); color: var(--s-ink4, #475569); }
.tpr-chip svg { flex: none; }
.tpr-chip.ok { background: var(--s-ok-bg, #f0fdf4); color: var(--s-ok-ink, #15803d); }
.tpr-chip.bad { background: var(--s-bad-bg2, #fee2e2); color: var(--s-bad-ink, #b91c1c); }
.tpr-chip.cur { background: var(--s-info, #3b82f6); color: #fff; font-weight: 600; }
.tpr-chip.lock { background: var(--s-sub2, #f1f5f9); color: var(--s-meta, #94a3b8); }

/* ---------- Цепочка этапов «Гребенюка» ---------- */
#salesTab .tpr-chain { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
#salesTab .tpr-stage { background: var(--s-card); border: 1px solid var(--s-bd); border-radius: 14px; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
#salesTab .tpr-stage.current { border-color: color-mix(in srgb, var(--s-info) 55%, var(--s-bd)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-info) 12%, transparent); }
#salesTab .tpr-stage.locked { opacity: .66; }
#salesTab .tpr-stage-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; user-select: none; }
#salesTab .tpr-stage.locked .tpr-stage-head { cursor: default; }
#salesTab .tpr-stage-n { width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: var(--s-sub2); color: var(--s-ink3); }
#salesTab .tpr-stage.current .tpr-stage-n { background: var(--s-info); color: #fff; }
#salesTab .tpr-stage.passed .tpr-stage-n { background: var(--s-ok-bg); color: var(--s-ok); }
#salesTab .tpr-stage-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#salesTab .tpr-stage-t small { font-size: 11px; color: var(--s-mut); }
#salesTab .tpr-stage-t b { font-size: 14px; color: var(--s-ink); font-weight: 650; }
#salesTab .tpr-stage-tg { color: var(--s-meta); display: flex; }
#salesTab .tpr-stage-lock { padding: 0 14px 12px 58px; font-size: 12px; color: var(--s-mut); }

#salesTab .tpr-steps { display: flex; align-items: center; gap: 8px; padding: 2px 14px 12px 58px; flex-wrap: wrap; }
#salesTab .tpr-step { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--s-meta); font-weight: 600; }
#salesTab .tpr-step i { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; background: var(--s-sub2); color: var(--s-mut); }
#salesTab .tpr-step.cur { color: var(--s-info-ink); }
#salesTab .tpr-step.cur i { background: var(--s-info); color: #fff; }
#salesTab .tpr-step.done { color: var(--s-ok-ink); }
#salesTab .tpr-step.done i { background: var(--s-ok-bg); color: var(--s-ok); }
#salesTab .tpr-step-ln { width: 22px; height: 2px; border-radius: 2px; background: var(--s-bd2); }

#salesTab .tpr-panel { margin: 0 14px 12px; padding: 12px 14px; border-radius: 12px; background: var(--s-sub); border: 1px solid var(--s-bd4); }
#salesTab .tpr-panel-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--s-ink2); margin-bottom: 10px; flex-wrap: wrap; }
#salesTab .tpr-panel-h > span { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: var(--s-card); border: 1px solid var(--s-bd2); color: var(--s-ink3); }
#salesTab .tpr-panel-act { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
#salesTab .tpr-done { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--s-ok-ink); }
#salesTab .tpr-mark { display: inline-flex; align-items: center; gap: 6px; }
#salesTab .tpr-panel-test { background: color-mix(in srgb, var(--s-info) 5%, var(--s-sub)); }
#salesTab .tpr-test-intro { margin: 0 0 10px; font-size: 13px; color: var(--s-ink3); line-height: 1.5; }
#salesTab .tpr-test-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#salesTab .tpr-test-row .adv-btn-dark { display: inline-flex; align-items: center; gap: 6px; }
#salesTab .tpr-test-row .adv-btn-dark:disabled { opacity: .5; cursor: not-allowed; }

/* Конспект внутри этапа */
#salesTab .tpr-dig { display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--s-ink3); }
#salesTab .tpr-dig h5 { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--s-ink2); display: flex; align-items: center; gap: 5px; text-transform: none; }
#salesTab .tpr-dig-tldr { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--s-ai-bg); color: var(--s-ink2); line-height: 1.5; }
#salesTab .tpr-dig-tldr svg { flex: none; color: var(--s-ai-ink); margin-top: 2px; }
#salesTab .tpr-dig-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
#salesTab .tpr-dig-idea { display: flex; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--s-card); border: 1px solid var(--s-bd4); }
#salesTab .tpr-dig-idea > span { width: 20px; height: 20px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--s-sub2); color: var(--s-ink3); }
#salesTab .tpr-dig-idea b { font-size: 12.5px; color: var(--s-ink); }
#salesTab .tpr-dig-idea p { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--s-ink4); }
#salesTab .tpr-dig-tech { padding: 8px 0; border-top: 1px dashed var(--s-bd); }
#salesTab .tpr-dig-tech:first-of-type { border-top: 0; }
#salesTab .tpr-dig-tech b { font-size: 12.5px; color: var(--s-ink); }
#salesTab .tpr-dig-tech p { margin: 2px 0 6px; font-size: 12.5px; line-height: 1.45; }
#salesTab .tpr-dig-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#salesTab .tpr-dig-box { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--s-bd4); background: var(--s-card); }
#salesTab .tpr-dig-box.bad h5 { color: var(--s-bad-ink); }
#salesTab .tpr-dig-box.ok h5 { color: var(--s-ok-ink); }
#salesTab .tpr-dig-box ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; }
#salesTab .tpr-dig-quotes blockquote { margin: 0 0 6px; padding: 6px 12px; border-left: 3px solid var(--s-ai); font-style: italic; color: var(--s-ink4); font-size: 12.5px; }

/* Кейсы после цепочки */
#salesTab .tpr-after { margin-top: 6px; }
#salesTab .tpr-after-h { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--s-ink); margin: 6px 0 10px; }
#salesTab .tpr-after-h span { font-size: 12px; color: var(--s-mut); font-weight: 400; }
#salesTab .tpr-after.locked .tpr-after-h { opacity: .7; }

/* Директору: вопросы и ключ */
#salesTab .tpr-dirq { margin: 0 14px 12px; }
#salesTab .tpr-call .tpr-dirq { margin: 8px 0 0; }
#salesTab .tpr-dirq-list { margin: 8px 0; padding-left: 20px; font-size: 12.5px; color: var(--s-ink3); }
#salesTab .tpr-dirq-list > li { margin-bottom: 8px; }
#salesTab .tpr-dirq-q { font-weight: 600; color: var(--s-ink2); }
#salesTab .tpr-dirq-k { margin: 4px 0 0; padding-left: 16px; color: var(--s-mut); font-size: 12px; }
#salesTab .tpr-dirq-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- «Разбор звонков» ---------- */
#salesTab .tpr-cgroup { margin-bottom: 16px; }
#salesTab .tpr-cgroup-h { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 14px; color: var(--s-ink); }
#salesTab .tpr-cgroup-h span { font-size: 12px; color: var(--s-mut); }
#salesTab .tpr-cgroup.success .tpr-cgroup-h svg { color: var(--s-ok); }
#salesTab .tpr-cgroup.fail .tpr-cgroup-h svg { color: var(--s-bad); }
#salesTab .tpr-call { display: flex; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px; background: var(--s-card); border: 1px solid var(--s-bd); }
#salesTab .tpr-call.current { border-color: color-mix(in srgb, var(--s-info) 55%, var(--s-bd)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-info) 12%, transparent); }
#salesTab .tpr-call.locked { opacity: .62; }
#salesTab .tpr-call-n { width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: var(--s-sub2); color: var(--s-ink3); }
#salesTab .tpr-call.current .tpr-call-n { background: var(--s-info); color: #fff; }
#salesTab .tpr-call.passed .tpr-call-n { background: var(--s-ok-bg); color: var(--s-ok); }
#salesTab .tpr-call-main { flex: 1; min-width: 0; }
#salesTab .tpr-call-t { font-weight: 650; font-size: 14px; color: var(--s-ink); }
#salesTab .tpr-call-ctx { margin-top: 3px; font-size: 12.5px; color: var(--s-ink4); line-height: 1.45; }
#salesTab .tpr-call-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: 11.5px; color: var(--s-mut); }
#salesTab .tpr-call-meta span { display: inline-flex; align-items: center; gap: 4px; }
#salesTab .tpr-why { color: var(--s-ai-ink); }
#salesTab .tpr-call-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
#salesTab .tpr-call-side .adv-btn-dark, #salesTab .tpr-call-side .adv-btn-light { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#salesTab .tpr-empty { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px; border-radius: 12px; border: 1px dashed var(--s-bd2); background: var(--s-sub); font-size: 13px; color: var(--s-ink3); }

/* «ИИ-учитель» */
#salesTab .tpr-ai-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#salesTab .tpr-ai-list span { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--s-sub2); color: var(--s-mut); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#salesTab .tpr-ai-list span.ok { background: var(--s-ok-bg); color: var(--s-ok-ink); }
#salesTab .tpr-ai-list span.bad { background: var(--s-bad-bg); color: var(--s-bad-ink); }
#salesTab .tpr-cnt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--s-mut); }
#salesTab .tpr-cnt select { border: 1px solid var(--s-bd2); border-radius: 6px; padding: 3px 6px; background: var(--s-card); color: var(--s-ink); font: inherit; }

/* ---------- Путь: доп. тесты по видео Гребенюка (14.10.2026) ---------- */
#salesTab .tpr-panel-act:empty { display: none; }
#salesTab .tpr-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--s-mut); line-height: 1.4; }
#salesTab .tpr-auto svg { flex: none; color: var(--s-info); }
.tpr-chip.host { background: var(--s-info-bg, #eff6ff); color: var(--s-info-ink, #1d4ed8); }
/* Страница «Гребенюка»: остальные видео — строки «доп. тест после темы N» */
#salesTab .tpr-xlist { margin: 4px 0 16px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--s-bd2); background: var(--s-sub); }
#salesTab .tpr-xlist-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--s-ink2); margin-bottom: 8px; }
#salesTab .tpr-xlist-h svg { color: var(--s-info); }
#salesTab .tpr-xrow { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; background: var(--s-card); border: 1px solid var(--s-bd4); margin-top: 6px; }
#salesTab .tpr-xrow .tpr-stage-n { width: 28px; height: 28px; font-size: 12px; }
#salesTab .tpr-xrow.passed .tpr-stage-n { background: var(--s-ok-bg); color: var(--s-ok); }
#salesTab .tpr-xrow.open .tpr-stage-n { background: var(--s-info); color: #fff; }
#salesTab .tpr-xrow.locked { opacity: .72; }
#salesTab .tpr-xrow .tpr-stage-t b { font-size: 13px; }
#salesTab .tpr-xgo { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Тема-хозяин: блок «Дополнительный тест · Гребенюк» в конце темы */
#salesTab .tpr-extra { margin: 18px 0 8px; padding: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--s-info) 30%, var(--s-bd)); background: color-mix(in srgb, var(--s-info) 4%, var(--s-card)); }
#salesTab .tpr-extra-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#salesTab .tpr-extra-ic { width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--s-info-bg); color: var(--s-info-ink); }
#salesTab .tpr-extra-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#salesTab .tpr-extra-t b { font-size: 14px; color: var(--s-ink); }
#salesTab .tpr-extra-t span { font-size: 12.5px; line-height: 1.45; color: var(--s-ink4); }
#salesTab .tpr-extra .tpr-chain { margin-bottom: 0; }
#salesTab .trn-detail-append { margin-top: 4px; max-width: 1000px; }   /* под страницей «Анализа конкурентов» (.cmp-page) */
/* Список тем: «доп. тест: Гребенюк, видео N» */
#salesTab .trn-topic-extra { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
#salesTab .trn-topic-extra-i { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; background: var(--s-info-bg); color: var(--s-info-ink); }
#salesTab .trn-topic-extra-i.ok { background: var(--s-ok-bg); color: var(--s-ok-ink); }
#salesTab .trn-topic-extra-i.lock { background: var(--s-sub2); color: var(--s-mut); }

/* ---------- Плеер с учётом просмотра (14.10.2026) ---------- */
.twv-strip { position: relative; height: 8px; border-radius: 999px; overflow: hidden; background: var(--s-sub2, var(--w-sub2, #e2e8f0)); }
.twv-strip.empty { opacity: .6; }
.twv-strip i { position: absolute; top: 0; bottom: 0; background: var(--s-ok, var(--w-ok, #16a34a)); opacity: .85; }
.twv-strip b { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--s-ink, var(--w-ink, #0f172a)); }
.twv-strip.lg { height: 12px; }
.twv-strip.sm { height: 6px; }
#salesTab .twv-bar { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
#salesTab .twv-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--s-mut); }
#salesTab .twv-txt { display: inline-flex; align-items: center; gap: 5px; }
#salesTab .twv-txt b { color: var(--s-ink2); }
#salesTab .twv-txt svg { flex: none; }
#salesTab .twv-who { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
/* Окно «Кто смотрел» (#twvOverlay — каркас окна практики, токены --w-*) */
.tpr-w.twv-w { width: 820px; }
.twv-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 11.5px; color: var(--w-mut); margin-bottom: 12px; }
.twv-legend span { display: inline-flex; align-items: center; gap: 5px; }
.twv-legend i { display: inline-block; width: 18px; height: 8px; border-radius: 999px; }
.twv-legend i.w { background: var(--w-ok); }
.twv-legend i.g { background: var(--w-sub2); border: 1px solid var(--w-bd); }
.twv-legend i.p { width: 3px; height: 12px; border-radius: 2px; background: var(--w-ink); }
.twv-legend .trn-muted { margin-left: auto; color: var(--w-mut); }
.twv-row { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--w-bd); background: var(--w-card); margin-bottom: 10px; }
.twv-row.none { padding: 9px 14px; background: var(--w-sub); }
.twv-row-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13.5px; color: var(--w-ink); }
.twv-row.none .twv-row-h { margin-bottom: 0; }
.twv-row-h .trn-muted { color: var(--w-mut); font-weight: 400; font-size: 12px; }
.twv-row .tpr-chip { background: var(--w-sub2); color: var(--w-mut); }
.twv-row .tpr-chip.ok { background: var(--w-ok-bg); color: var(--w-ok-ink); }
.twv-row .tpr-chip.bad { background: var(--w-bad-bg); color: var(--w-bad-ink); }
.twv-row .tpr-chip.cur { background: var(--w-info-bg); color: var(--w-info-ink); font-weight: 600; }
.twv-pct { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-weight: 700; font-size: 13px; color: var(--w-ink2); }
.twv-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--w-meta); margin-top: 3px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.twv-facts { margin-top: 6px; font-size: 12.5px; color: var(--w-ink3); line-height: 1.5; }
.twv-facts b { color: var(--w-ink); }
.twv-gaps { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--w-sub); font-size: 12.5px; color: var(--w-ink3); line-height: 1.55; display: flex; flex-direction: column; gap: 3px; }
.twv-gaps .trn-muted { color: var(--w-meta); font-size: 11.5px; }
.twv-k { font-weight: 600; color: var(--w-ink2); }
/* «Результаты» → сводка просмотра видео */
#salesTab .twv-sum { margin: 14px 0 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--s-bd); background: var(--s-card); }
#salesTab .twv-sum-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--s-ink); margin-bottom: 10px; }
#salesTab .twv-sum-h .trn-muted { font-size: 12px; }
#salesTab .twv-sum-empty { font-size: 12.5px; }
#salesTab .twv-sum-wrap { overflow-x: auto; }
#salesTab .twv-sum-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#salesTab .twv-sum-t th { text-align: left; font-weight: 600; font-size: 12px; color: var(--s-mut); padding: 6px 8px; border-bottom: 1px solid var(--s-bd); white-space: nowrap; }
#salesTab .twv-sum-t td { padding: 8px; border-bottom: 1px solid var(--s-bd4); vertical-align: middle; }
#salesTab .twv-sum-t tbody tr { cursor: pointer; }
#salesTab .twv-sum-t tbody tr:hover td { background: var(--s-sub); }
#salesTab .twv-sum-v { min-width: 220px; }
#salesTab .twv-sum-v small { display: block; font-size: 11px; color: var(--s-mut); }
#salesTab .twv-sum-v b { display: block; color: var(--s-ink); font-weight: 600; }
#salesTab .twv-sum-v .trn-muted { font-size: 11px; font-family: var(--s-mono); }
#salesTab .twv-c { min-width: 120px; }
#salesTab .twv-c > span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--s-ink3); font-family: var(--s-mono); }
#salesTab .twv-c.ok > span { color: var(--s-ok-ink); }
#salesTab .twv-c.none > span { color: var(--s-meta); font-family: inherit; margin-top: 0; }

@media (max-width: 760px) {
    #salesTab .tpr-dig-cols { grid-template-columns: 1fr; }
    #salesTab .tpr-steps, #salesTab .tpr-stage-lock { padding-left: 14px; }
    #salesTab .tpr-call { flex-wrap: wrap; }
    #salesTab .tpr-call-side { flex-direction: row; align-items: center; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
    #salesTab .tpr-xrow { flex-wrap: wrap; }
    #salesTab .twv-who { margin-left: 0; }
}

/* ============================================================================
 * Окно открытых ответов (#tprOverlay в <body>)
 * ========================================================================== */
.tpr-overlay {
    --w-bg: rgba(15, 23, 42, .55); --w-card: #ffffff; --w-sub: #f8fafc; --w-sub2: #f1f5f9; --w-bd: #e2e8f0; --w-bd2: #d8dee6;
    --w-ink: #0f172a; --w-ink2: #1e293b; --w-ink3: #334155; --w-mut: #64748b; --w-meta: #94a3b8;
    --w-acc: #0f172a; --w-acc-ink: #ffffff; --w-info: #3b82f6; --w-info-bg: #eff6ff; --w-info-ink: #1d4ed8;
    --w-ok: #16a34a; --w-ok-bg: #f0fdf4; --w-ok-ink: #15803d; --w-bad: #dc2626; --w-bad-bg: #fef2f2; --w-bad-ink: #b91c1c;
    --w-warn-bg: #fff7ed; --w-warn-ink: #b45309; --w-ai-bg: #f5f3ff; --w-ai-ink: #6d28d9;
    position: fixed; inset: 0; z-index: 12500; background: var(--w-bg); display: flex; align-items: center; justify-content: center; padding: 20px;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body[data-theme="dark"] .tpr-overlay {
    --w-bg: rgba(2, 6, 23, .7); --w-card: #1e293b; --w-sub: #172033; --w-sub2: #263449; --w-bd: #334155; --w-bd2: #3b4a61;
    --w-ink: #e2e8f0; --w-ink2: #e2e8f0; --w-ink3: #cbd5e1; --w-mut: #94a3b8; --w-meta: #64748b;
    --w-acc: #475569; --w-acc-ink: #f1f5f9; --w-info: #3b82f6; --w-info-bg: rgba(59, 130, 246, .16); --w-info-ink: #93c5fd;
    --w-ok: #22c55e; --w-ok-bg: rgba(34, 197, 94, .14); --w-ok-ink: #86efac; --w-bad: #ef4444; --w-bad-bg: rgba(239, 68, 68, .14); --w-bad-ink: #fca5a5;
    --w-warn-bg: rgba(245, 158, 11, .14); --w-warn-ink: #fcd34d; --w-ai-bg: rgba(124, 58, 237, .2); --w-ai-ink: #c4b5fd;
}
.tpr-w {
    width: 760px; max-width: 100%; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
    background: var(--w-card); color: var(--w-ink); border-radius: 18px; box-shadow: 0 24px 60px rgba(2, 6, 23, .35);
    animation: tprIn .18s ease-out;
}
.tpr-w.is-call { width: 860px; }
@keyframes tprIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.tpr-w-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--w-bd); }
.tpr-w-head-l { flex: 1; min-width: 0; }
.tpr-w-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--w-ai-bg); color: var(--w-ai-ink); }
.tpr-w-badge.ok { background: var(--w-ok-bg); color: var(--w-ok-ink); }
.tpr-w-badge.bad { background: var(--w-bad-bg); color: var(--w-bad-ink); }
.tpr-w-title { margin-top: 6px; font-size: 17px; font-weight: 700; color: var(--w-ink); line-height: 1.3; }
.tpr-w-sub { margin-top: 2px; font-size: 12.5px; color: var(--w-mut); }
.tpr-w-x { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--w-bd); background: var(--w-card); color: var(--w-mut); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
.tpr-w-x:hover { color: var(--w-ink); border-color: var(--w-bd2); }
.tpr-w-body { flex: 1; overflow-y: auto; padding: 16px 20px 20px; scroll-behavior: smooth; }
.tpr-w-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--w-bd); background: var(--w-sub); }
.tpr-w-count { font-size: 12.5px; font-weight: 600; color: var(--w-ink3); }
.tpr-w-saved { font-size: 11.5px; color: var(--w-meta); margin-right: auto; }
.tpr-w-foot .tpr-btn:first-of-type { margin-left: auto; }
.tpr-w-foot .tpr-w-saved + .tpr-btn { margin-left: 0; }
.tpr-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--w-bd2); background: var(--w-card); color: var(--w-ink3); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, filter .15s; }
.tpr-btn:hover { border-color: var(--w-ink3); color: var(--w-ink); }
.tpr-btn.dark { background: var(--w-acc); color: var(--w-acc-ink); border-color: var(--w-acc); }
.tpr-btn.dark:hover { filter: brightness(1.12); color: var(--w-acc-ink); }
.tpr-btn:disabled { opacity: .5; cursor: not-allowed; }

.tpr-w-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 56px 20px; text-align: center; color: var(--w-ink3); font-size: 14px; }
.tpr-w-wait .trn-muted { color: var(--w-mut); font-size: 12.5px; }
.tpr-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--w-sub2); border-top-color: var(--w-info); animation: tprSpin .9s linear infinite; }
@keyframes tprSpin { to { transform: rotate(360deg); } }
.tpr-w-err { padding: 24px; text-align: center; color: var(--w-bad-ink); font-size: 14px; }

.tpr-w-player { position: sticky; top: -16px; z-index: 2; margin: -16px -20px 14px; padding: 12px 20px 10px; background: var(--w-card); border-bottom: 1px solid var(--w-bd); display: flex; flex-direction: column; gap: 6px; }
.tpr-w-player .cpl { margin: 0; }
.tpr-w-player-h { font-size: 11.5px; color: var(--w-mut); display: inline-flex; align-items: center; gap: 5px; }
.tpr-w-ctx { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--w-sub); border: 1px solid var(--w-bd); font-size: 13px; line-height: 1.5; color: var(--w-ink3); margin-bottom: 10px; flex-wrap: wrap; }
.tpr-w-ctx svg { flex: none; color: var(--w-ai-ink); margin-top: 2px; }
.tpr-w-ctx .trn-muted { color: var(--w-mut); }
.tpr-w-rule { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--w-mut); margin: 0 0 14px; line-height: 1.45; }
.tpr-w-rule svg { flex: none; margin-top: 1px; }

.tpr-q { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--w-bd); background: var(--w-card); margin-bottom: 10px; transition: border-color .15s; }
.tpr-q:focus-within { border-color: var(--w-info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-info) 14%, transparent); }
.tpr-q-h { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.tpr-q-n { width: 24px; height: 24px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--w-sub2); color: var(--w-ink3); }
.tpr-q-t { flex: 1; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--w-ink); }
.tpr-q-t .tpr-chip { margin-left: 6px; vertical-align: 1px; font-weight: 500; background: var(--w-sub2); color: var(--w-mut); }
.tpr-q-a { width: 100%; box-sizing: border-box; min-height: 72px; resize: vertical; border: 1px solid var(--w-bd2); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--w-ink); background: var(--w-sub); outline: none; transition: background .15s; }
.tpr-q-a:focus { background: var(--w-card); }
.tpr-q-a::placeholder { color: var(--w-meta); }
.tpr-q-tcs { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tpr-q-tcl { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.tpr-tc-add { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; border: 1px dashed var(--w-bd2); background: transparent; color: var(--w-mut); font: inherit; font-size: 12px; cursor: pointer; }
.tpr-tc-add:hover, .tpr-tc-add.hint { border-color: var(--w-info); color: var(--w-info-ink); }
.tpr-tc { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; background: var(--w-info-bg); color: var(--w-info-ink); cursor: pointer; }
.tpr-tc b { margin-left: 2px; font-weight: 700; opacity: .7; }
.tpr-tc b:hover { opacity: 1; }
.tpr-tc.dim { background: var(--w-sub2); color: var(--w-meta); cursor: default; }

/* Результат */
.tpr-res { display: flex; align-items: center; gap: 18px; padding: 4px 0 16px; margin-bottom: 12px; border-bottom: 1px solid var(--w-bd); }
.tpr-ring { width: 84px; height: 84px; flex: none; transform: rotate(-90deg); }
.tpr-ring circle { fill: none; stroke-width: 8; }
.tpr-ring .bg { stroke: var(--w-sub2); }
.tpr-ring .fg { stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.tpr-ring.ok .fg { stroke: var(--w-ok); }
.tpr-ring.bad .fg { stroke: #f59e0b; }
.tpr-ring text { transform: rotate(90deg); transform-origin: 42px 42px; text-anchor: middle; font-size: 22px; font-weight: 800; fill: var(--w-ink); font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.tpr-res-t { flex: 1; min-width: 0; }
.tpr-res-h { font-size: 18px; font-weight: 800; }
.tpr-res-h.ok { color: var(--w-ok-ink); }
.tpr-res-h.bad { color: var(--w-warn-ink); }
.tpr-res-s { margin: 4px 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--w-ink3); }
.tpr-res .trn-muted { font-size: 12px; color: var(--w-mut); }
.tpr-rq { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--w-bd); margin-bottom: 10px; }
.tpr-rq-h { display: flex; gap: 10px; align-items: flex-start; }
.tpr-rq-sc { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.tpr-rq-sc.sok { background: var(--w-ok-bg); color: var(--w-ok-ink); }
.tpr-rq-sc.smid { background: var(--w-warn-bg); color: var(--w-warn-ink); }
.tpr-rq-sc.sbad { background: var(--w-bad-bg); color: var(--w-bad-ink); }
.tpr-rq-a { margin: 8px 0 0 34px; padding: 8px 11px; border-radius: 10px; background: var(--w-sub); font-size: 13px; line-height: 1.5; color: var(--w-ink3); white-space: pre-wrap; }
.tpr-rq-a i { color: var(--w-meta); }
.tpr-rq-a .tpr-q-tcl { display: flex; margin-top: 6px; }
.tpr-rq-row { margin: 8px 0 0 34px; font-size: 13px; line-height: 1.5; color: var(--w-ink3); }
.tpr-rq-row b { display: flex; align-items: center; gap: 5px; font-size: 12px; margin-bottom: 2px; }
.tpr-rq-row.ok b { color: var(--w-ok-ink); }
.tpr-rq-row.warn b { color: var(--w-warn-ink); }
.tpr-rq-row.best { padding: 9px 11px; border-radius: 10px; background: var(--w-ai-bg); }
.tpr-rq-row.best b { color: var(--w-ai-ink); }
.tpr-rv { margin-top: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--w-ai-ink) 30%, var(--w-bd)); background: color-mix(in srgb, var(--w-ai-bg) 60%, var(--w-card)); font-size: 13px; line-height: 1.5; color: var(--w-ink3); }
.tpr-rv-h { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--w-ai-ink); margin-bottom: 6px; }
.tpr-rv p { margin: 0 0 8px; }
.tpr-rv-main { margin-bottom: 10px; }
.tpr-rv-moments { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tpr-rv-m { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--w-card); border-left: 3px solid var(--w-meta); }
.tpr-rv-m.good { border-left-color: var(--w-ok); }
.tpr-rv-m.error { border-left-color: var(--w-bad); }
.tpr-rv-m.turn { border-left-color: var(--w-info); }
.tpr-rv-q { font-style: italic; color: var(--w-ink2); }
.tpr-rv-n { font-size: 12.5px; color: var(--w-mut); margin-top: 2px; }
.tpr-rv-l ul { margin: 4px 0 0; padding-left: 18px; }
.tpr-rv-after { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--w-mut); }

/* Правка вопросов директором (окно .trn-overlay) */
.trn-overlay .tpr-qe { border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; }
.trn-overlay .tpr-qe legend { font-size: 12px; font-weight: 700; padding: 0 6px; }
.trn-overlay .tpr-qe-m { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 4px 0 6px; }
body[data-theme="dark"] .trn-overlay .tpr-qe { border-color: #334155; }

@media (max-width: 640px) {
    .tpr-overlay { padding: 0; align-items: stretch; }
    .tpr-w, .tpr-w.is-call { width: 100%; max-height: 100vh; border-radius: 0; }
    .tpr-rq-a, .tpr-rq-row { margin-left: 0; }
}