/* ============================================================================
   «Обучение» → презентации по текстовым темам (ТЗ Сабины 13.10.2026, п.2), training-slides.js (window.TSL).
   Карточка-обложка в теме живёт внутри #salesTab (токены --s-*), просмотр и окна правки — в <body>
   (.tsl-overlay / .tsl-ed-overlay) со своими токенами светлой и тёмной темы. Слайд — сцена 16:9, все размеры
   внутри — от ширины сцены (container query: cqw и em от font-size слайда), поэтому слайд одинаково выглядит
   на ноутбуке, большом мониторе и во весь экран. Палитра — фирменная ИЗИ: коралловый #F77350, тёмно-синий
   #074783, бирюзово-серый #48696E, песочный #FBD385.
   ============================================================================ */

/* ---------- Карточка-обложка в теме ---------- */
#salesTab .trn-material-slides { padding: 16px; border-color: color-mix(in srgb, #F77350 22%, var(--s-bd)); }
/* Шапка материала («Презентация · Презентация: тема») дублирует карточку — показываем её только в режиме
   правки, где в ней кнопки порядка и удаления */
#salesTab .trn-material-slides > .trn-material-head:not(:has(.trn-mini)) { display: none; }
#salesTab .tsl-card { display: grid; grid-template-columns: minmax(220px, 40%) 1fr; gap: 20px; align-items: stretch; }
#salesTab .tsl-card-cover {
    position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: 12px; overflow: hidden;
    cursor: pointer; background: linear-gradient(135deg, color-mix(in srgb, #074783 14%, var(--s-card)), color-mix(in srgb, #FBD385 30%, var(--s-card)));
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .08);
}
#salesTab .tsl-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
#salesTab .tsl-card-cover:hover img { transform: scale(1.035); }
#salesTab .tsl-card-cover:focus-visible { outline: 3px solid color-mix(in srgb, #F77350 60%, transparent); outline-offset: 2px; }
#salesTab .tsl-card-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #074783; opacity: .6; }
#salesTab .tsl-card-play {
    position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; padding-left: 3px; box-sizing: border-box;
    background: #F77350; color: #fff; box-shadow: 0 8px 22px rgba(247, 115, 80, .45); transition: transform .2s ease;
}
#salesTab .tsl-card-cover:hover .tsl-card-play { transform: scale(1.08); }
#salesTab .tsl-card-badge {
    position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
    background: rgba(15, 23, 42, .74); color: #fff; font-size: 11.5px; font-weight: 600; backdrop-filter: blur(4px);
}
#salesTab .tsl-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#salesTab .tsl-card-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--s-info-ink); }
#salesTab .tsl-card.viewed .tsl-card-kicker { color: var(--s-ok-ink); }
#salesTab .tsl-card-title { font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--s-ink); }
#salesTab .tsl-card-sub { font-size: 13px; line-height: 1.45; color: var(--s-mut); }
#salesTab .tsl-flow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
#salesTab .tsl-flow-i {
    display: inline-flex; align-items: center; gap: 6px; max-width: 240px; padding: 3px 10px 3px 4px; border-radius: 999px;
    background: var(--s-sub2); color: var(--s-ink3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#salesTab .tsl-flow-i b {
    flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--s-card); color: #F77350; font-size: 10.5px; font-family: var(--s-mono);
}
#salesTab .tsl-flow-i.cover b { background: #F77350; color: #fff; }
#salesTab .tsl-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: auto; padding-top: 8px; }
#salesTab .tsl-go { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 760px) {
    #salesTab .tsl-card { grid-template-columns: 1fr; gap: 12px; }
}

/* Тема без презентации — директору в режиме правки */
#salesTab .tsl-make {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px;
    border: 1px dashed color-mix(in srgb, #F77350 45%, var(--s-bd2)); background: color-mix(in srgb, #F77350 5%, var(--s-card));
}
#salesTab .tsl-make-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, #F77350 14%, var(--s-card)); color: #e1562f; }
#salesTab .tsl-make-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#salesTab .tsl-make-t b { font-size: 14px; color: var(--s-ink); }
#salesTab .tsl-make-t span { font-size: 12.5px; color: var(--s-mut); line-height: 1.45; }
#salesTab .tsl-make .adv-btn-dark { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
@media (max-width: 760px) { #salesTab .tsl-make { flex-wrap: wrap; } }

/* «ИИ-учитель» → «Презентации по темам» */
#salesTab .tsl-ai-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 4px; }
#salesTab .tsl-ai-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--s-bd4); font-size: 12.5px; }
#salesTab .tsl-ai-row:last-child { border-bottom: 0; }
#salesTab .tsl-ai-row.dim { opacity: .55; }
#salesTab .tsl-ai-n { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--s-sub2); color: var(--s-ink3); font-size: 11px; font-weight: 700; font-family: var(--s-mono); }
#salesTab .tsl-ai-t { color: var(--s-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Просмотр во весь экран ---------- */
html.tsl-noscroll, html.tsl-noscroll body { overflow: hidden; }
.tsl-overlay {
    /* бумага слайда — светлая тема */
    --tsl-paper: #ffffff;
    --tsl-paper2: #f6f7f9;
    --tsl-ink: #11294a;
    --tsl-ink2: #3c4d63;
    --tsl-mut: #737b88;
    --tsl-line: #e3e7ed;
    --tsl-coral: #F77350;
    --tsl-coral-ink: #d9512b;
    --tsl-coral-soft: #feebe4;
    --tsl-navy: #074783;
    --tsl-navy-soft: #e4eef9;
    --tsl-teal: #48696E;
    --tsl-teal-soft: #e4eded;
    --tsl-sand: #FBD385;
    --tsl-sand-soft: #fdf4de;
    --tsl-sand-ink: #b7800f;
    --tsl-good: #23845f;
    --tsl-good-soft: #e3f4ec;
    --tsl-bad: #d0493b;
    --tsl-bad-soft: #fde8e5;
    --tsl-shadow: 0 1px 2px rgba(17, 41, 74, .06), 0 8px 24px rgba(17, 41, 74, .09);
    position: fixed; inset: 0; z-index: 12500;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    background: radial-gradient(120% 90% at 50% 30%, rgba(22, 38, 64, .94), rgba(6, 12, 24, .97));
    backdrop-filter: blur(6px);
    color: #e9eef6;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    animation: tslFade .22s ease both;
}
body[data-theme="dark"] .tsl-overlay {
    --tsl-paper: #0f1d33;
    --tsl-paper2: #15284a;
    --tsl-ink: #edf2f8;
    --tsl-ink2: #c2ccda;
    --tsl-mut: #8d99ab;
    --tsl-line: #24395c;
    --tsl-coral: #ff8466;
    --tsl-coral-ink: #ff9d84;
    --tsl-coral-soft: rgba(255, 132, 102, .14);
    --tsl-navy: #3f86d6;
    --tsl-navy-soft: rgba(63, 134, 214, .16);
    --tsl-teal: #7fb0b5;
    --tsl-teal-soft: rgba(127, 176, 181, .14);
    --tsl-sand: #f3c66a;
    --tsl-sand-soft: rgba(243, 198, 106, .13);
    --tsl-sand-ink: #f3c66a;
    --tsl-good: #4fd19c;
    --tsl-good-soft: rgba(79, 209, 156, .12);
    --tsl-bad: #ff7b6e;
    --tsl-bad-soft: rgba(255, 123, 110, .12);
    --tsl-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
}
@keyframes tslFade { from { opacity: 0; } to { opacity: 1; } }

.tsl-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px; min-width: 0; }
.tsl-top-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tsl-top-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(247, 115, 80, .18); color: #ffb39f; }
.tsl-top-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tsl-top-t b { font-size: 14.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsl-top-t span { font-size: 12px; color: rgba(233, 238, 246, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsl-top-r { display: flex; align-items: center; gap: 8px; flex: none; }
.tsl-tools { display: flex; align-items: center; gap: 8px; margin-right: 6px; padding-right: 14px; border-right: 1px solid rgba(255, 255, 255, .12); }

.tsl-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #e9eef6;
    font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s;
}
.tsl-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .26); }
.tsl-btn:active { transform: translateY(1px); }
.tsl-btn:disabled { opacity: .45; cursor: default; }
.tsl-btn:focus-visible, .tsl-nav:focus-visible, .tsl-dot:focus-visible { outline: 2px solid #ffb39f; outline-offset: 2px; }
.tsl-icon { width: 36px; padding: 0; justify-content: center; }
.tsl-primary { background: #F77350; border-color: #F77350; color: #fff; }
.tsl-primary:hover { background: #ee6440; border-color: #ee6440; }

.tsl-main { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 0; padding: 0 16px; }
.tsl-nav {
    flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; transition: background .15s, opacity .15s;
}
.tsl-nav:hover { background: rgba(255, 255, 255, .14); }
.tsl-nav:disabled { opacity: .2; cursor: default; }
.tsl-stage {
    position: relative; flex: none;
    width: min(1280px, calc(100vw - 168px), calc((100vh - 152px) * 16 / 9));
    aspect-ratio: 16 / 9; container-type: inline-size;
    border-radius: 18px; overflow: hidden; background: var(--tsl-paper);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
    cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}

.tsl-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 14px 22px 18px; }
.tsl-dots { display: flex; align-items: center; gap: 6px; justify-self: start; flex-wrap: wrap; }
.tsl-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .24); cursor: pointer; transition: width .22s ease, background .22s ease; }
.tsl-dot.done { background: rgba(247, 115, 80, .55); }
.tsl-dot.on { width: 28px; background: #F77350; }
.tsl-count { font: 600 13px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; color: rgba(233, 238, 246, .78); letter-spacing: .04em; }
.tsl-bottom-r { justify-self: end; display: flex; align-items: center; gap: 14px; }
.tsl-hint { font-size: 12px; color: rgba(233, 238, 246, .48); }

/* ---------- Слайд ---------- */
.tsl-slide {
    position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
    padding: 4.3cqw 5.2cqw 4.4cqw;
    font-size: 16px; font-size: 1.5cqw;            /* базовый кегль слайда; всё внутри — в em */
    color: var(--tsl-ink); background: var(--tsl-paper);
}
.tsl-slide *, .tsl-slide *::before, .tsl-slide *::after { box-sizing: border-box; }
.tsl-slide::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .55cqw; background: linear-gradient(180deg, var(--tsl-coral), var(--tsl-sand)); }
.tsl-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.tsl-blob.b3 { right: -9cqw; top: -11cqw; width: 28cqw; height: 28cqw; background: radial-gradient(circle, var(--tsl-sand-soft) 0%, transparent 68%); }
.tsl-body { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; gap: 3.2cqw; }
.tsl-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tsl-side { flex: 0 0 35%; display: flex; align-items: center; justify-content: center; }
.tsl-head { margin-bottom: 1.6em; }
.tsl-kicker { display: inline-flex; align-items: center; gap: .4em; font-size: .74em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tsl-coral-ink); margin-bottom: .75em; }
.tsl-title { margin: 0; font-size: 2.1em; line-height: 1.12; font-weight: 800; letter-spacing: -.015em; color: var(--tsl-ink); text-wrap: balance; }
.tsl-lead { margin: .6em 0 0; max-width: 44em; font-size: 1.06em; line-height: 1.45; color: var(--tsl-ink2); text-wrap: pretty; }
.tsl-foot { position: absolute; left: 5.2cqw; right: 5.2cqw; bottom: 1.7cqw; z-index: 1; display: flex; justify-content: space-between; align-items: center; font-size: .66em; color: var(--tsl-mut); letter-spacing: .02em; }
.tsl-brand { display: inline-flex; align-items: center; }
.tsl-brand i { display: inline-block; width: .7em; height: .7em; margin-right: .55em; border-radius: 50%; background: var(--tsl-coral); }
.tsl-pg { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }

.tsl-fig { position: relative; margin: 0; width: 100%; aspect-ratio: 1; border-radius: 1.6cqw; overflow: hidden; background: var(--tsl-paper2); box-shadow: var(--tsl-shadow); }
.tsl-fig img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.tsl-fig.busy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; padding: 2em; text-align: center; font-size: .82em; color: var(--tsl-mut); background: repeating-linear-gradient(-45deg, var(--tsl-paper2), var(--tsl-paper2) 1.2em, var(--tsl-paper) 1.2em, var(--tsl-paper) 2.4em); }
.tsl-spin { width: 2.4em; height: 2.4em; border-radius: 50%; border: .3em solid var(--tsl-line); border-top-color: var(--tsl-coral); animation: tslSpin .9s linear infinite; }
@keyframes tslSpin { to { transform: rotate(360deg); } }

/* Подсказка внизу слайда */
.tsl-note {
    display: flex; align-items: flex-start; gap: .7em; margin-top: auto; padding: .85em 1.1em; border-radius: 1cqw;
    background: var(--tsl-sand-soft); color: var(--tsl-ink); font-size: .86em; line-height: 1.42;
}
.tsl-note svg { flex: none; width: 1.3em; height: 1.3em; margin-top: .05em; color: var(--tsl-sand-ink); }
.tsl-note.take { margin-top: 1.1em; }

/* Обложка */
.tsl-slide.l-cover { flex-direction: row; align-items: center; gap: 3.4cqw; padding: 5cqw 4.4cqw 5.6cqw 6cqw; background: linear-gradient(125deg, var(--tsl-paper) 0%, var(--tsl-paper) 50%, var(--tsl-sand-soft) 100%); }
.tsl-slide.l-cover::before { width: .9cqw; }
.tsl-blob.b1 { left: -7cqw; bottom: -9cqw; width: 24cqw; height: 24cqw; background: var(--tsl-coral); opacity: .1; }
.tsl-blob.b2 { right: 41%; top: -4.5cqw; width: 9cqw; height: 9cqw; background: var(--tsl-sand); opacity: .5; }
.tsl-cover-l { position: relative; z-index: 1; flex: 0 0 43%; min-width: 0; }
.tsl-slide.l-cover:not(.has-img) .tsl-cover-l { flex-basis: 55%; }
.tsl-h1 { margin: 0; font-size: 3.05em; line-height: 1.06; font-weight: 800; letter-spacing: -.022em; color: var(--tsl-ink); text-wrap: balance; }
.tsl-cover-lead { margin: .85em 0 0; font-size: 1.16em; line-height: 1.48; color: var(--tsl-ink2); text-wrap: pretty; }
.tsl-cover-meta { display: flex; flex-wrap: wrap; gap: .6em 1.4em; margin-top: 1.7em; font-size: .82em; font-weight: 600; color: var(--tsl-mut); }
.tsl-cover-meta span { display: inline-flex; align-items: center; gap: .45em; }
.tsl-cover-meta svg { width: 1.35em; height: 1.35em; color: var(--tsl-coral); }
.tsl-cover-r { position: relative; z-index: 1; flex: 1; min-width: 0; }
.l-cover .tsl-fig { aspect-ratio: 3 / 2; border-radius: 2cqw; }
.tsl-cover-ph { aspect-ratio: 3 / 2; border-radius: 2cqw; display: flex; align-items: center; justify-content: center; color: var(--tsl-navy); background: linear-gradient(135deg, var(--tsl-navy-soft), var(--tsl-sand-soft)); }
.tsl-cover-ph svg { width: 7em; height: 7em; opacity: .7; }

/* Карточки */
.tsl-cards { display: grid; gap: 1.5cqw; margin: auto 0; }
.tsl-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tsl-cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tsl-cardi { display: flex; align-items: flex-start; gap: 1em; padding: 1.15em 1.2em; border-radius: 1.2cqw; background: var(--tsl-paper2); border: 1px solid var(--tsl-line); }
.tsl-ic { flex: none; width: 2.6em; height: 2.6em; border-radius: .8em; display: flex; align-items: center; justify-content: center; background: var(--tsl-coral-soft); color: var(--tsl-coral-ink); }
.tsl-ic svg { width: 1.4em; height: 1.4em; }
.tsl-cardi:nth-child(4n+2) .tsl-ic { background: var(--tsl-navy-soft); color: var(--tsl-navy); }
.tsl-cardi:nth-child(4n+3) .tsl-ic { background: var(--tsl-teal-soft); color: var(--tsl-teal); }
.tsl-cardi:nth-child(4n+4) .tsl-ic { background: var(--tsl-sand-soft); color: var(--tsl-sand-ink); }
.tsl-cardi b, .tsl-step b, .tsl-stat b, .tsl-check b, .tsl-tl-i b, .tsl-sum b { display: block; font-size: 1em; line-height: 1.25; font-weight: 700; color: var(--tsl-ink); }
.tsl-cardi p, .tsl-step p, .tsl-stat p, .tsl-check p, .tsl-tl-i p, .tsl-sum p { margin: .35em 0 0; font-size: .85em; line-height: 1.4; color: var(--tsl-ink2); }

/* Шаги процесса */
.tsl-steps { list-style: none; margin: auto 0; padding: 0; display: grid; gap: 2.4cqw 2.3cqw; }
.tsl-steps.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tsl-steps.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tsl-steps.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tsl-step { position: relative; padding: 1.05em 1.1em 1.2em; border-radius: 1.2cqw; background: var(--tsl-paper2); border: 1px solid var(--tsl-line); }
.tsl-step-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8em; }
.tsl-step-n { width: 2.15em; height: 2.15em; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tsl-coral); color: #fff; font-weight: 800; font-size: .95em; }
.tsl-step-ic { color: var(--tsl-navy); display: flex; }
.tsl-step-ic svg { width: 1.35em; height: 1.35em; }
.tsl-step:not(.end)::after {
    content: ''; position: absolute; top: 1.75em; right: -1.62cqw; width: .95cqw; height: .95cqw;
    border-top: .24cqw solid var(--tsl-coral); border-right: .24cqw solid var(--tsl-coral); transform: rotate(45deg); opacity: .85;
}

/* Сравнение */
.tsl-cmp { display: grid; gap: 1.8cqw; margin: auto 0; }
.tsl-cmp.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tsl-cmp.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tsl-col { padding: 1.15em 1.3em 1.3em; border-radius: 1.3cqw; background: var(--tsl-paper2); border: 1px solid var(--tsl-line); }
.tsl-col-h { display: flex; align-items: center; gap: .55em; padding-bottom: .75em; margin-bottom: .85em; border-bottom: 1px solid var(--tsl-line); font-size: 1.04em; }
.tsl-col-h svg { flex: none; width: 1.3em; height: 1.3em; }
.tsl-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; }
.tsl-col li { display: flex; align-items: flex-start; gap: .6em; font-size: .92em; line-height: 1.38; color: var(--tsl-ink); }
.tsl-col li svg { flex: none; width: 1.15em; height: 1.15em; margin-top: .14em; }
.tsl-col.tone-good { background: var(--tsl-good-soft); border-color: transparent; }
.tsl-col.tone-good .tsl-col-h, .tsl-col.tone-good li svg { color: var(--tsl-good); }
.tsl-col.tone-bad { background: var(--tsl-bad-soft); border-color: transparent; }
.tsl-col.tone-bad .tsl-col-h, .tsl-col.tone-bad li svg { color: var(--tsl-bad); }
.tsl-col.tone-neutral .tsl-col-h, .tsl-col.tone-neutral li svg { color: var(--tsl-navy); }
.tsl-col .tsl-col-h b { color: inherit; }

/* Цифры */
.tsl-stats { display: grid; gap: 1.8cqw; margin: auto 0; }
.tsl-stats.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tsl-stats.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tsl-stats.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tsl-stat { padding: 1.35em 1.3em 1.3em; border-radius: 1.3cqw; background: var(--tsl-paper2); border: 1px solid var(--tsl-line); border-top: .35cqw solid var(--tsl-coral); }
.tsl-stat:nth-child(2) { border-top-color: var(--tsl-navy); }
.tsl-stat:nth-child(3) { border-top-color: var(--tsl-teal); }
.tsl-stat:nth-child(4) { border-top-color: var(--tsl-sand); }
.tsl-stat-v { margin-bottom: .35em; font-size: 2.45em; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; color: var(--tsl-ink); font-variant-numeric: tabular-nums; }

/* Чек-лист */
.tsl-check { list-style: none; margin: auto 0; padding: 0; display: grid; gap: 1.05em; }
.tsl-check.two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.6cqw; }
.tsl-check li { display: flex; align-items: flex-start; gap: .85em; }
.tsl-check-ic { flex: none; display: flex; color: var(--tsl-good); margin-top: .02em; }
.tsl-check-ic svg { width: 1.45em; height: 1.45em; }

/* Сроки */
.tsl-tl { position: relative; display: grid; gap: 1.6cqw; margin: auto 0; padding-top: 2.6em; }
.tsl-tl.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tsl-tl.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tsl-tl.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tsl-tl.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tsl-tl.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tsl-tl::before { content: ''; position: absolute; left: 0; right: 0; top: .95em; height: .26cqw; border-radius: 1cqw; background: linear-gradient(90deg, var(--tsl-coral), var(--tsl-sand)); }
.tsl-tl-i { position: relative; }
.tsl-tl-dot { position: absolute; top: -2.25em; left: 0; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--tsl-paper); border: .3cqw solid var(--tsl-coral); }
.tsl-tl-when { display: inline-block; margin-bottom: .55em; padding: .22em .75em; border-radius: 999px; background: var(--tsl-coral-soft); color: var(--tsl-coral-ink); font-size: .78em; font-weight: 800; }

/* Пример разговора */
.tsl-chat { display: flex; flex-direction: column; gap: .75em; margin: auto 0 0; }
.tsl-msg { display: flex; flex-direction: column; max-width: 80%; }
.tsl-msg.cl { align-self: flex-start; }
.tsl-msg.me { align-self: flex-end; align-items: flex-end; }
.tsl-who { margin: 0 .95em .3em; font-size: .66em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tsl-mut); }
.tsl-bubble { padding: .75em 1.05em; border-radius: 1.15em; font-size: .94em; line-height: 1.42; }
.tsl-msg.cl .tsl-bubble { background: var(--tsl-paper2); border: 1px solid var(--tsl-line); border-bottom-left-radius: .35em; color: var(--tsl-ink); }
.tsl-msg.me .tsl-bubble { background: var(--tsl-navy); color: #fff; border-bottom-right-radius: .35em; }

/* Фраза */
.tsl-quote { position: relative; margin: auto 0; padding: 1.5em 1.7em 1.5em 3.6em; border-radius: 1.6cqw; background: linear-gradient(135deg, var(--tsl-coral-soft), var(--tsl-sand-soft)); }
.tsl-qm { position: absolute; left: .32em; top: -.12em; font-size: 4.8em; line-height: 1; color: var(--tsl-coral); font-family: Georgia, 'Times New Roman', serif; }
.tsl-quote p { margin: 0; font-size: 1.5em; line-height: 1.36; font-weight: 700; color: var(--tsl-ink); text-wrap: pretty; }

/* Главное */
.tsl-sum { list-style: none; margin: auto 0; padding: 0; display: grid; gap: 1em; }
.tsl-sum.two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2cqw; }
.tsl-sum li { display: flex; align-items: flex-start; gap: .85em; padding: .9em 1em; border-radius: 1.1cqw; background: var(--tsl-paper2); border: 1px solid var(--tsl-line); }
.tsl-sum-n { flex: none; width: 1.9em; height: 1.9em; border-radius: .6em; display: flex; align-items: center; justify-content: center; background: var(--tsl-navy); color: #fff; font-weight: 800; font-size: .9em; }
.tsl-cta { display: inline-flex; align-self: flex-start; align-items: center; gap: .6em; margin-top: 1.25em; padding: .72em 1.25em; border-radius: 999px; background: var(--tsl-coral); color: #fff; font-weight: 700; font-size: .9em; }
.tsl-cta svg { width: 1.2em; height: 1.2em; }

/* Смена слайда */
@keyframes tslInNext { from { opacity: 0; transform: translateX(2.2%); } to { opacity: 1; transform: none; } }
@keyframes tslInPrev { from { opacity: 0; transform: translateX(-2.2%); } to { opacity: 1; transform: none; } }
.tsl-slide.in-next .tsl-body, .tsl-slide.in-next .tsl-cover-l, .tsl-slide.in-next .tsl-cover-r { animation: tslInNext .34s cubic-bezier(.2, .7, .2, 1) both; }
.tsl-slide.in-prev .tsl-body, .tsl-slide.in-prev .tsl-cover-l, .tsl-slide.in-prev .tsl-cover-r { animation: tslInPrev .34s cubic-bezier(.2, .7, .2, 1) both; }
.tsl-slide.in-next .tsl-cover-r, .tsl-slide.in-prev .tsl-cover-r { animation-delay: .06s; }
@media (prefers-reduced-motion: reduce) {
    .tsl-overlay, .tsl-slide .tsl-body, .tsl-slide .tsl-cover-l, .tsl-slide .tsl-cover-r { animation: none !important; }
}

/* Узкий экран: стрелки поверх сцены, листаем свайпом */
@media (max-width: 760px) {
    .tsl-top { padding: 10px 12px; }
    .tsl-top-t span, .tsl-hint, .tsl-tools .tsl-btn span { display: none; }
    .tsl-tools { padding-right: 8px; margin-right: 2px; }
    .tsl-tools .tsl-btn { padding: 0 10px; font-size: 0; gap: 0; }
    .tsl-tools .tsl-btn svg { width: 18px; height: 18px; }
    .tsl-main { padding: 0 12px; position: relative; }
    .tsl-nav { position: absolute; z-index: 2; width: 40px; height: 40px; background: rgba(6, 12, 24, .55); }
    .tsl-nav.prev { left: 16px; }
    .tsl-nav.next { right: 16px; }
    .tsl-stage { width: min(calc(100vw - 24px), calc((100vh - 140px) * 16 / 9)); border-radius: 12px; }
    .tsl-bottom { grid-template-columns: 1fr auto; padding: 12px; }
    .tsl-dots { display: none; }
}

/* ---------- Окна правки (директор) ---------- */
.tsl-ed-overlay {
    --e-bg: #ffffff; --e-ink: #0f172a; --e-mut: #64748b; --e-bd: #e2e8f0; --e-bd2: #d8dee6; --e-sub: #f8fafc; --e-acc: #0f172a; --e-acc-ink: #fff;
    position: fixed; inset: 0; z-index: 12700; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(6, 12, 24, .55); font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
body[data-theme="dark"] .tsl-ed-overlay { --e-bg: #1e293b; --e-ink: #e2e8f0; --e-mut: #94a3b8; --e-bd: #334155; --e-bd2: #3b4a61; --e-sub: #263449; --e-acc: #475569; --e-acc-ink: #f1f5f9; }
.tsl-ed { width: 660px; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--e-bg); color: var(--e-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.tsl-ed.tsl-ed-sm { width: 520px; }
.tsl-ed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--e-bd); font-weight: 700; font-size: 14px; }
.tsl-ed-head > span { display: inline-flex; align-items: center; gap: 8px; }
.tsl-ed-body { padding: 14px 18px 16px; overflow-y: auto; flex: 1; }
.tsl-ed-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--e-bd); }
.tsl-ed-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
.tsl-ed-l { display: block; margin: 12px 0 5px; font-size: 12px; font-weight: 600; color: var(--e-mut); }
.tsl-ed-grid .tsl-ed-l { margin-top: 0; }
.tsl-ed-in { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--e-bd2); border-radius: 8px; background: var(--e-bg); color: var(--e-ink); font: 13px/1.4 Inter, system-ui, sans-serif; outline: none; resize: vertical; }
.tsl-ed-in:focus { border-color: #F77350; box-shadow: 0 0 0 3px rgba(247, 115, 80, .15); }
.tsl-ed-sec { margin: 16px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--e-mut); }
.tsl-ed-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tsl-ed-row .v { flex: 0 0 120px; }
.tsl-ed-row .t { flex: 0 0 36%; }
.tsl-ed-row .w { flex: 0 0 120px; }
.tsl-ed-row .x { flex: 1; min-width: 0; }
.tsl-ed-col { display: grid; gap: 6px; margin-bottom: 12px; padding: 10px; border: 1px solid var(--e-bd); border-radius: 10px; background: var(--e-sub); }
.tsl-ed-x { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--e-mut); cursor: pointer; }
.tsl-ed-x:hover { background: var(--e-sub); color: var(--e-ink); }
.tsl-ed-hint { display: flex; align-items: flex-start; gap: 7px; margin-top: 14px; padding: 9px 11px; border-radius: 9px; background: var(--e-sub); color: var(--e-mut); font-size: 12px; line-height: 1.45; }
.tsl-ed-hint svg { flex: none; margin-top: 1px; }
.tsl-ed .sl-linkbtn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 4px 0; color: #e1562f; font: 600 12.5px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.tsl-ed .adv-btn-dark, .tsl-ed .adv-btn-light {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid transparent;
    font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
.tsl-ed .adv-btn-dark { background: var(--e-acc); color: var(--e-acc-ink); }
.tsl-ed .adv-btn-dark:disabled { opacity: .6; cursor: default; }
.tsl-ed .adv-btn-light { background: var(--e-bg); border-color: var(--e-bd2); color: var(--e-ink); }
.tsl-ed .adv-btn-light:hover { border-color: var(--e-ink); }
.tsl-ed .tsl-ed-danger { margin-right: auto; color: #d0493b; }
body[data-theme="dark"] .tsl-ed .tsl-ed-danger { color: #fca5a5; }

/* Порядок пунктов, реплик и колонок в окне правки (Сабина 14.10.2026): ручка слева, стрелки справа */
.tsl-ed-sec { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.tsl-ed-sec-h { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--e-mut); opacity: .85; }
.tsl-ed-sec-h svg { flex: none; }
.tsl-ed-drag { flex: none; width: 18px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--e-mut); cursor: grab; border-radius: 6px; }
.tsl-ed-drag:hover { color: var(--e-ink); background: var(--e-sub); }
.tsl-ed-drag:active { cursor: grabbing; }
.tsl-ed-mv { flex: none; display: flex; flex-direction: column; gap: 2px; }
.tsl-ed-mvb { width: 24px; height: 14px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--e-mut); cursor: pointer; }
.tsl-ed-mvb:hover { background: var(--e-sub); color: var(--e-ink); }
.tsl-ed-mvb:focus-visible, .tsl-ed-x:focus-visible { outline: 2px solid #F77350; outline-offset: 1px; }
.tsl-ed-row, .tsl-ed-col { transition: background-color .25s ease, box-shadow .25s ease; border-radius: 10px; }
.tsl-ed-dragging { opacity: .45; }
.tsl-ed-drop-before { box-shadow: 0 -2px 0 #F77350; }
.tsl-ed-drop-after { box-shadow: 0 2px 0 #F77350; }
@keyframes tslEdMoved { from { background-color: rgba(247, 115, 80, .18); } to { background-color: transparent; } }
.tsl-ed-row.tsl-ed-moved { animation: tslEdMoved .7s ease-out; }
.tsl-ed-col.tsl-ed-moved { animation: tslEdMoved .7s ease-out; }
.tsl-ed-colh { display: flex; align-items: center; gap: 8px; }
.tsl-ed-colh .ct { flex: 1; min-width: 0; }
.tsl-ed-tone { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; }
.tsl-ed-col.tone-good .tsl-ed-tone { background: #16a34a; }
.tsl-ed-col.tone-bad .tsl-ed-tone { background: #dc2626; }
.tsl-ed-col.tone-neutral .tsl-ed-tone { background: #64748b; }
@media (prefers-reduced-motion: reduce) {
    .tsl-ed-row.tsl-ed-moved, .tsl-ed-col.tsl-ed-moved { animation: none; }
}

/* «Порядок» в панели директора: слайд на место раньше / позже */
.tsl-mv { display: inline-flex; align-items: center; gap: 2px; }
.tsl-mv .tsl-icon { width: 32px; }
.tsl-mv-l { padding: 0 4px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .7); }

@media (max-width: 600px) {
    .tsl-ed-grid { grid-template-columns: 1fr; }
    .tsl-ed-row { flex-wrap: wrap; }
    .tsl-ed-row .t, .tsl-ed-row .v, .tsl-ed-row .w { flex: 1 1 100%; }
}
@media (max-width: 760px) {
    .tsl-mv-l { display: none; }
}