/* ============================================================================
 * «Обучение»: программа по этапам продаж (ТЗ Сабины «Правки ЦРМ», 19.10.2026) — training-stages.js
 * Внутри «Продаж» — токены #salesTab (--s-*), светлая и тёмная тема берутся из них; всплывашки в <body> —
 * свои цвета с тёмным вариантом.
 * ========================================================================== */

/* ---------- Список: этапы, справочник, библиотека ---------- */
#salesTab .trn-topic-stage .trn-topic-num { flex-direction: column; width: 40px; height: 40px; border-radius: 12px; line-height: 1; gap: 1px;
    background: color-mix(in srgb, var(--s-ai) 12%, var(--s-card)); color: var(--s-ai-ink); font-size: 15px; }
#salesTab .trn-topic-stage .trn-topic-num small { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
#salesTab .trn-topic-stage.st-done .trn-topic-num { background: var(--s-ok-bg); color: var(--s-ok-ink); }
#salesTab .trn-topic-stage.st-current .trn-topic-num { background: var(--s-info); color: #fff; }
#salesTab .trn-topic-stage.st-locked .trn-topic-num { background: var(--s-sub2); color: var(--s-meta); }
#salesTab .trn-topic-stage .trn-num-ok { top: -4px; right: -4px; }
#salesTab .trn-topic-extra .trn-topic-num, #salesTab .trn-topic-ref .trn-topic-num { border-radius: 12px; color: var(--s-ink4); }
#salesTab .trn-topic-ref { border-style: dashed; }
#salesTab .trn-topic-ref .trn-topic-num { background: var(--s-teal-bg); color: var(--s-teal-ink); }
#salesTab .trn-staged .trn-topic-stage + .trn-topic-extra { margin-top: 10px; }
#salesTab .trn-chip-ref { background: var(--s-teal-bg); color: var(--s-teal-ink); }

#salesTab .trn-lib { margin-top: 18px; border: 1px dashed var(--s-bd2); border-radius: 14px; background: var(--s-sub); }
#salesTab .trn-lib summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; color: var(--s-ink3); flex-wrap: wrap; }
#salesTab .trn-lib summary::-webkit-details-marker { display: none; }
#salesTab .trn-lib summary b { font-size: 13.5px; color: var(--s-ink2); }
#salesTab .trn-lib summary span { font-size: 12px; color: var(--s-mut); flex: 1; min-width: 220px; }
#salesTab .trn-lib-list { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px; }
#salesTab .trn-lib-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--s-bd); background: var(--s-card); color: var(--s-ink2); font-size: 13px; text-align: left; cursor: pointer; }
#salesTab .trn-lib-row:hover { border-color: var(--s-bd3); }
#salesTab .trn-lib-t { flex: 1; min-width: 0; font-weight: 600; }

/* ---------- Страница этапа ---------- */
#salesTab .trn-detail-own .trn-back { margin-bottom: 12px; }
#salesTab .tst { display: flex; flex-direction: column; gap: 14px; }
#salesTab .tst-hero { display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--s-bd);
    background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--s-ai) 14%, var(--s-card)) 0%, var(--s-card) 58%); }
#salesTab .tst-hero-num { flex: none; width: 64px; height: 64px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--s-ai); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--s-ai) 32%, transparent); }
#salesTab .tst-hero-num small { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
#salesTab .tst-hero-num b { font-size: 24px; font-weight: 800; line-height: 1.05; font-family: var(--s-mono); }
#salesTab .tst-hero-main { flex: 1; min-width: 0; }
#salesTab .tst-kicker { font-size: 11.5px; font-weight: 600; color: var(--s-mut); letter-spacing: .02em; }
#salesTab .tst-kicker .ok { color: var(--s-ok-ink); display: inline-flex; align-items: center; gap: 3px; }
#salesTab .tst-kicker .draft { color: var(--s-warn-ink); display: inline-flex; align-items: center; gap: 3px; }
#salesTab .tst-title { margin: 2px 0 6px; font-size: 22px; font-weight: 800; color: var(--s-ink); letter-spacing: -.01em; }
#salesTab .tst-goal { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--s-ink3); max-width: 760px; }
#salesTab .tst-goal b { color: var(--s-ink2); }
#salesTab .tst-skill { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 12px; border-radius: 10px; flex-wrap: wrap;
    background: var(--s-warn-bg); border: 1px solid var(--s-warn-bd); color: var(--s-warn-ink); font-size: 12.5px; }
#salesTab .tst-skill span { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
#salesTab .tst-skill b { font-weight: 650; color: var(--s-ink2); }
#salesTab .tst-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--s-mut); line-height: 1.45; }
#salesTab .tst-note svg { flex: none; margin-top: 1px; }

#salesTab .tst-ring { flex: none; position: relative; width: 64px; height: 64px; }
#salesTab .tst-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
#salesTab .tst-ring circle { fill: none; stroke-width: 6; }
#salesTab .tst-ring .bg { stroke: var(--s-sub2); }
#salesTab .tst-ring .fg { stroke: var(--s-info); stroke-linecap: round; transition: stroke-dashoffset .4s; }
#salesTab .tst-ring.done .fg { stroke: var(--s-ok); }
#salesTab .tst-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--s-mut); font-family: var(--s-mono); }
#salesTab .tst-ring span b { font-size: 16px; color: var(--s-ink); }

#salesTab .tst-checks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--s-bd); background: var(--s-card); }
#salesTab .tst-checks-h { font-size: 11px; font-weight: 700; color: var(--s-mut); letter-spacing: .04em; text-transform: uppercase; margin-right: 4px; }
#salesTab .tst-check { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--s-bd2); background: var(--s-sub);
    font-size: 12px; color: var(--s-ink3); cursor: pointer; max-width: 100%; }
#salesTab .tst-check:hover { border-color: var(--s-info); color: var(--s-info-ink); }
#salesTab .tst-check small { color: var(--s-mut); font-family: var(--s-mono); }
#salesTab .tst-check.done { background: var(--s-ok-bg); border-color: var(--s-ok-bd); color: var(--s-ok-ink); }
#salesTab .tst-check-i { display: inline-flex; color: var(--s-meta); }
#salesTab .tst-check.done .tst-check-i { color: var(--s-ok); }

#salesTab .tst-nav { position: sticky; top: 0; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0; background: var(--s-bg); box-shadow: 0 6px 10px -8px rgba(15, 23, 42, .18); }
#salesTab .tst-nav button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; border: 1px solid var(--s-bd); background: var(--s-card);
    font-size: 12.5px; font-weight: 600; color: var(--s-ink3); cursor: pointer; }
#salesTab .tst-nav button:hover { color: var(--s-ink); border-color: var(--s-bd3); }

#salesTab .tst-sec { padding: 16px 18px 18px; border-radius: 16px; border: 1px solid var(--s-bd); background: var(--s-card); scroll-margin-top: 64px; }
#salesTab .tst-sec-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; scroll-margin-top: 64px; flex-wrap: wrap; }
#salesTab .tst-sec-ic { width: 36px; height: 36px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--s-sub2); color: var(--s-ink3); }
#salesTab .tst-sec-text .tst-sec-ic { background: var(--s-ai-bg); color: var(--s-ai-ink); }
#salesTab .tst-sec-slides .tst-sec-ic { background: var(--s-warn-bg); color: var(--s-warn-ink); }
#salesTab .tst-sec-video .tst-sec-ic { background: var(--s-info-bg); color: var(--s-info-ink); }
#salesTab .tst-sec-calls .tst-sec-ic { background: var(--s-info-bg); color: var(--s-info-ink); }
#salesTab .tst-sec-test .tst-sec-ic { background: var(--s-ok-bg); color: var(--s-ok-ink); }
#salesTab .tst-sec-crm .tst-sec-ic { background: var(--s-teal-bg); color: var(--s-teal-ink); }
#salesTab .tst-sec-tt { flex: 1; min-width: 200px; }
#salesTab .tst-sec-tt h3 { margin: 0; font-size: 16px; font-weight: 750; color: var(--s-ink); }
#salesTab .tst-sec-tt span { font-size: 12px; color: var(--s-mut); }
#salesTab .tst-sec-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#salesTab .tst-empty { display: flex; align-items: center; gap: 8px; padding: 14px; border-radius: 12px; background: var(--s-sub); color: var(--s-mut); font-size: 13px; }
#salesTab .tst-intro { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--s-ink2); }

/* «Коротко об этапе» */
/* Не больше трёх колонок: страница «Обучения» теперь до 90% экрана (20.10.2026) — карточки шире, а не мельче */
#salesTab .tst-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(300px, calc((100% - 20px) / 3)), 1fr)); gap: 10px; }
#salesTab .tst-block { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--s-bd4); background: var(--s-sub); display: flex; flex-direction: column; gap: 7px; }
#salesTab .tst-block.is-ai { border-color: var(--s-ai-bd); background: color-mix(in srgb, var(--s-ai) 6%, var(--s-sub)); box-shadow: inset 3px 0 0 var(--s-ai); }
#salesTab .tst-block-h { display: flex; align-items: flex-start; gap: 8px; }
#salesTab .tst-block-h h4 { margin: 0; flex: 1; font-size: 13.5px; font-weight: 700; color: var(--s-ink); line-height: 1.35; }
#salesTab .tst-bn { width: 22px; height: 22px; border-radius: 7px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
    background: var(--s-card); border: 1px solid var(--s-bd2); color: var(--s-ink3); }
#salesTab .tst-block p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--s-ink3); }
#salesTab .tst-block .trn-say { margin: 0; }
/* Порядок пунктов (Сабина 21.10.2026, Izi.CRM #4442): ручка в шапке карточки и место вставки — полоса сбоку от карточки
   (в ряду сетки) или над/под ней (в одну колонку) */
#salesTab .tst-block-h .trn-drag { height: 22px; margin: 0 -4px 0 -6px; }
#salesTab .tst-block.tst-drop-l { box-shadow: -4px 0 0 0 var(--s-info); }
#salesTab .tst-block.tst-drop-r { box-shadow: 4px 0 0 0 var(--s-info); }
#salesTab .tst-block.tst-drop-t { box-shadow: 0 -4px 0 0 var(--s-info); }
#salesTab .tst-block.tst-drop-b { box-shadow: 0 4px 0 0 var(--s-info); }
/* Ошибки пункта — с заголовком «Так делать не стоит» (Сабина 20.10.2026: без него красный знак и текст читались
   как совет «так и надо делать») */
#salesTab .tst-avoid { display: flex; gap: 8px; align-items: flex-start; padding: 8px 11px; border-radius: 9px; background: var(--s-bad-bg); color: var(--s-bad-ink); font-size: 12.5px; line-height: 1.45; }
#salesTab .tst-avoid svg { flex: none; margin-top: 1px; }
#salesTab .tst-avoid div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#salesTab .tst-avoid .tst-avoid-h { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
#salesTab .tst-avoid span { position: relative; padding-left: 12px; }
#salesTab .tst-avoid span::before { content: ''; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; }
#salesTab .tst-table { display: flex; flex-direction: column; gap: 4px; }
#salesTab .tst-tr { display: grid; grid-template-columns: 1fr 18px 1fr; gap: 6px; align-items: center; padding: 6px 9px; border-radius: 8px; background: var(--s-card); border: 1px solid var(--s-bd4); font-size: 12.5px; color: var(--s-ink2); }
#salesTab .tst-tr i { display: flex; color: var(--s-meta); font-style: normal; }
#salesTab .tst-tr span:last-child { font-weight: 600; color: var(--s-ink); }

#salesTab .tst-origin { display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; cursor: help; }
#salesTab .tst-origin.o-ai { background: var(--s-ai); color: #fff; }
#salesTab .tst-origin.o-calls { background: var(--s-info-bg); color: var(--s-info-ink); }
#salesTab .tst-origin.o-materials { background: var(--s-sub2); color: var(--s-ink4); }
#salesTab .tst-origin.reviewed { opacity: .55; }
#salesTab .tst-ai-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--s-ai-bg); color: var(--s-ai-ink); border: 1px solid var(--s-ai-bd); }
#salesTab .tst-ai-pill.ok { background: var(--s-ok-bg); color: var(--s-ok-ink); border-color: var(--s-ok-bd); }
#salesTab .tst-mark { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--s-bd2); }

/* Практические рекомендации — под пунктами «Коротко об этапе» («Алгоритм» убран 20.10.2026) */
#salesTab .tst-tips { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--s-sub); border: 1px solid var(--s-bd4); }
#salesTab .tst-tips-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--s-ink2); margin-bottom: 6px; }
#salesTab .tst-tips ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.5; color: var(--s-ink3); }

/* Словарь «Термины» */
#salesTab .tst-gloss-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--s-bd2); background: var(--s-sub); margin-bottom: 12px; color: var(--s-meta); }
#salesTab .tst-gloss-search input { flex: 1; border: none; background: transparent; outline: none; font-size: 13px; color: var(--s-ink); }
#salesTab .tst-gloss { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
#salesTab .tst-gloss-g { display: flex; flex-direction: column; gap: 8px; }
#salesTab .tst-gloss-gh { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; font-size: 13px; color: var(--s-ink2); background: var(--s-sub2); }
#salesTab .tst-gloss-gh b { flex: 1; }
#salesTab .tst-gloss-gh span { font-size: 11px; color: var(--s-mut); font-family: var(--s-mono); }
#salesTab .tst-gloss-g.g0 .tst-gloss-gh { background: var(--s-info-bg); color: var(--s-info-ink); }
#salesTab .tst-gloss-g.g1 .tst-gloss-gh { background: var(--s-warn-bg); color: var(--s-warn-ink); }
#salesTab .tst-gloss-g.g2 .tst-gloss-gh { background: var(--s-teal-bg); color: var(--s-teal-ink); }
#salesTab .tst-term { padding: 10px 12px; border-radius: 11px; border: 1px solid var(--s-bd4); background: var(--s-sub); }
#salesTab .tst-term.is-ai { border-color: var(--s-ai-bd); box-shadow: inset 3px 0 0 var(--s-ai); }
#salesTab .tst-term-h { display: flex; align-items: center; gap: 8px; }
#salesTab .tst-term-h b { flex: 1; font-size: 13.5px; color: var(--s-ink); }
#salesTab .tst-term p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--s-ink3); }
#salesTab .tst-term-ex { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 12px; color: var(--s-ink4); font-style: italic; }
#salesTab .tst-term-ex svg { flex: none; margin-top: 2px; }

/* Звонки: примеры, возражения, задания */
#salesTab .tst-sub { display: flex; align-items: center; gap: 7px; margin: 14px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--s-ink2); }
#salesTab .tst-sub:first-of-type { margin-top: 2px; }
#salesTab .tst-sub.ok { color: var(--s-ok-ink); }
#salesTab .tst-sub.bad { color: var(--s-bad-ink); }
/* Звонки сверх лимита этапа — директору свёрнуто (Сабина 21.10.2026, Izi.CRM #4446) */
#salesTab .tst-calls-more { margin-top: 16px; padding: 10px 12px; border: 1px dashed var(--s-bd2); border-radius: 10px; background: var(--s-sub); }
#salesTab .tst-calls-more > summary { display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--s-mut); }
#salesTab .tst-calls-more > summary::-webkit-details-marker { display: none; }
#salesTab .tst-calls-more[open] > summary { margin-bottom: 6px; }
#salesTab .tst-calls-more > p { margin: 0 0 4px; font-size: 12px; line-height: 1.5; }
#salesTab .tst-exs, #salesTab .tst-objs { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(340px, calc((100% - 20px) / 3)), 1fr)); gap: 10px; }
#salesTab .tst-ex, #salesTab .tst-obj { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--s-bd); background: var(--s-card); }
#salesTab .tst-ex.good { box-shadow: inset 3px 0 0 var(--s-ok); }
#salesTab .tst-ex.bad { box-shadow: inset 3px 0 0 var(--s-bad); }
#salesTab .tst-obj { box-shadow: inset 3px 0 0 var(--s-warn); }
#salesTab .tst-ex-h, #salesTab .tst-obj-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#salesTab .tst-ex-type { display: inline-flex; align-items: center; gap: 5px; flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--s-ink); }
#salesTab .tst-ex.good .tst-ex-type svg { color: var(--s-ok); }
#salesTab .tst-ex.bad .tst-ex-type svg { color: var(--s-bad); }
#salesTab .tst-ex-at { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--s-info); background: var(--s-info-bg);
    color: var(--s-info-ink); font-size: 11.5px; font-weight: 700; font-family: var(--s-mono); cursor: pointer; }
#salesTab .tst-ex-at:hover { background: var(--s-info); color: #fff; }
#salesTab .tst-ex-who { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--s-mut); }
#salesTab .tst-ex-sit { font-size: 12.5px; color: var(--s-ink4); line-height: 1.45; }
#salesTab .tst-ex-q { margin: 0; padding: 8px 12px; border-left: 3px solid var(--s-bd3); border-radius: 0 9px 9px 0; background: var(--s-sub); font-size: 13px; font-style: italic; color: var(--s-ink2); line-height: 1.5; }
#salesTab .tst-ex .cpl, #salesTab .tst-obj .cpl { margin: 0; }
#salesTab .tst-ex-row { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.5; color: var(--s-ink3); }
#salesTab .tst-ex-row b { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--s-mut); }
#salesTab .tst-ps { display: grid; grid-template-columns: 1fr 20px 1fr; gap: 6px; align-items: stretch; }
#salesTab .tst-ps > i { display: flex; align-items: center; justify-content: center; color: var(--s-meta); font-style: normal; }
#salesTab .tst-ps .p, #salesTab .tst-ps .s { padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; }
#salesTab .tst-ps .p { background: var(--s-bad-bg); color: var(--s-bad-ink); }
#salesTab .tst-ps .s { background: var(--s-ok-bg); color: var(--s-ok-ink); }
#salesTab .tst-ps span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: 2px; }
#salesTab .tst-obj-q { flex: 1 1 100%; min-width: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--s-ink); line-height: 1.4; }
#salesTab .tst-obj-q svg { flex: none; margin-top: 2px; color: var(--s-warn); }
#salesTab .tst-obj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#salesTab .tst-obj-grid > div { padding: 8px 10px; border-radius: 10px; background: var(--s-sub); font-size: 12.5px; line-height: 1.45; color: var(--s-ink3); }
#salesTab .tst-obj-grid span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--s-mut); margin-bottom: 2px; }
#salesTab .tst-obj-rate { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
#salesTab .tst-obj-rate span { margin: 0; }
#salesTab .tst-obj-rate b { display: inline-flex; gap: 3px; }
#salesTab .tst-obj-rate b i { width: 16px; height: 6px; border-radius: 3px; background: var(--s-bd2); }
#salesTab .tst-obj-rate b.r1 i.on, #salesTab .tst-obj-rate b.r2 i.on { background: var(--s-bad); }
#salesTab .tst-obj-rate b.r3 i.on { background: var(--s-warn); }
#salesTab .tst-obj-rate b.r4 i.on, #salesTab .tst-obj-rate b.r5 i.on { background: var(--s-ok); }
#salesTab .tst-obj-rate small { font-size: 11.5px; color: var(--s-mut); font-family: var(--s-mono); }
#salesTab .tst-obj-why { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--s-ink4); line-height: 1.45; }
#salesTab .tst-obj-why svg { flex: none; margin-top: 2px; color: var(--s-warn); }

#salesTab .tst-tasks { display: flex; flex-direction: column; gap: 8px; }
#salesTab .tst-task { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--s-bd); background: var(--s-card); }
#salesTab .tst-task.passed { background: color-mix(in srgb, var(--s-ok) 5%, var(--s-card)); border-color: var(--s-ok-bd); }
#salesTab .tst-task-n { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: var(--s-info-bg); color: var(--s-info-ink); }
#salesTab .tst-task.passed .tst-task-n { background: var(--s-ok-bg); color: var(--s-ok); }
#salesTab .tst-task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
#salesTab .tst-task-t { font-size: 14px; font-weight: 700; color: var(--s-ink); }
#salesTab .tst-task-focus { font-size: 12.5px; color: var(--s-bad-ink); display: flex; gap: 5px; align-items: flex-start; line-height: 1.45; }
#salesTab .tst-task-focus svg { flex: none; margin-top: 2px; }
#salesTab .tst-task-ctx { font-size: 12.5px; color: var(--s-ink4); line-height: 1.45; }
#salesTab .tst-task-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--s-mut); }
#salesTab .tst-task-meta span { display: inline-flex; align-items: center; gap: 4px; }
#salesTab .tst-task-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }

/* CRM, тест, пробелы */
#salesTab .tst-crm { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
#salesTab .tst-crm-i { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 11px; background: var(--s-sub); border: 1px solid var(--s-bd4); }
#salesTab .tst-crm-i > span { width: 22px; height: 22px; border-radius: 7px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: var(--s-teal-bg); color: var(--s-teal-ink); }
#salesTab .tst-crm-i b { font-size: 13px; color: var(--s-ink); }
#salesTab .tst-crm-i p { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--s-ink4); }
#salesTab .tst-test { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#salesTab .tst-gaps { border: 1px dashed var(--s-warn-bd); border-radius: 14px; background: var(--s-warn-bg2); padding: 10px 14px; }
#salesTab .tst-gaps summary { cursor: pointer; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--s-warn-ink); }
#salesTab .tst-gaps ul { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--s-ink3); }

/* Пометки директору у материала */
.tst-dup { width: 20px; height: 20px; border-radius: 50%; flex: none; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    background: #ef4444; color: #fff; font-weight: 900; font-size: 13px; line-height: 1; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); animation: tstDupPulse 2.4s ease-in-out infinite; }
.tst-dup.keep { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .2); animation: none; }
@keyframes tstDupPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); } 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, .08); } }
@media (prefers-reduced-motion: reduce) { .tst-dup { animation: none; } }
#salesTab .tst-in-stage { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--s-ai-bd); background: var(--s-ai-bg);
    color: var(--s-ai-ink); font-size: 10.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
#salesTab .tst-in-stage.none { border-style: dashed; border-color: var(--s-warn-bd); background: var(--s-warn-bg); color: var(--s-warn-ink); }
#salesTab .tst-in-stage:hover { filter: brightness(.97); }
#salesTab .tst-ai-mini { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--s-ai); color: #fff; white-space: nowrap; }

/* Всплывашка (дубль, перенос в этап) — в <body> */
.tst-pop { position: absolute; z-index: 10050; background: #fff; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 23, 42, .18); overflow: hidden; font-size: 13px; }
.tst-pop-h { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #f8fafc; border-bottom: 1px solid #eef2f7; }
.tst-pop-h.del { background: #fef2f2; color: #b91c1c; }
.tst-pop-h.keep { background: #fffbeb; color: #b45309; }
.tst-pop-b { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.tst-pop-l { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8; }
.tst-pop-w { display: flex; gap: 7px; align-items: flex-start; }
.tst-pop-w svg { flex: none; margin-top: 2px; color: #64748b; }
.tst-pop-w span { display: flex; flex-direction: column; }
.tst-pop-w small { color: #64748b; font-size: 11.5px; }
.tst-pop-why { display: flex; gap: 6px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; background: #f5f3ff; color: #5b21b6; font-size: 12.5px; line-height: 1.45; }
.tst-pop-why svg { flex: none; margin-top: 2px; }
.tst-pop-note { font-size: 11.5px; color: #94a3b8; }
.tst-pop-f { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid #eef2f7; flex-wrap: wrap; }
.tst-pop-f .tst-danger { color: #b91c1c; border-color: #fecaca; }
.tst-pop-f .tst-danger:hover { background: #fef2f2; }
.tst-pop-list { max-height: 300px; overflow: auto; }
.tst-pop-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid transparent; background: none; text-align: left; cursor: pointer; font-size: 13px; color: inherit; }
.tst-pop-row:hover { background: #f1f5f9; border-color: #e2e8f0; }
.tst-pop-row .n { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; background: #ede9fe; color: #6d28d9; flex: none; }
body[data-theme="dark"] .tst-pop { background: #111827; color: #e5e7eb; border-color: #334155; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
body[data-theme="dark"] .tst-pop-h { background: #0f172a; border-color: #1f2937; }
body[data-theme="dark"] .tst-pop-h.del { background: rgba(239, 68, 68, .14); color: #fca5a5; }
body[data-theme="dark"] .tst-pop-h.keep { background: rgba(245, 158, 11, .14); color: #fcd34d; }
body[data-theme="dark"] .tst-pop-why { background: rgba(139, 92, 246, .16); color: #c4b5fd; }
body[data-theme="dark"] .tst-pop-f { border-color: #1f2937; }
body[data-theme="dark"] .tst-pop-row:hover { background: #1f2937; border-color: #334155; }
body[data-theme="dark"] .tst-pop-row .n { background: rgba(139, 92, 246, .22); color: #c4b5fd; }
body[data-theme="dark"] .tst-pop-f .tst-danger { color: #fca5a5; border-color: rgba(239, 68, 68, .4); }
body[data-theme="dark"] .tst-pop-f .tst-danger:hover { background: rgba(239, 68, 68, .14); }

/* Правка конспекта (окно .trn-overlay) */
.tst-ed .tst-ed-h { margin: 14px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #64748b; }
.tst-ed-b { padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; border: 1px solid #e2e8f0; background: #f8fafc; }
.tst-ed-bh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tst-ed-bh .tst-bn { width: 22px; height: 22px; border-radius: 7px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: #fff; border: 1px solid #e2e8f0; color: #334155; }
.tst-ed-bh input { flex: 1; font-weight: 600; }
.tst-ed-bh .tst-origin { display: inline-flex; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: #7c3aed; color: #fff; }
.tst-ed .tst-ed-h small { margin-left: 6px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #94a3b8; }
/* Пункт выше / ниже (Сабина 21.10.2026, Izi.CRM #4442) */
.tst-ed-mv { display: inline-flex; gap: 4px; flex: none; }
.tst-ed-mv button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer; }
.tst-ed-mv button:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; }
.tst-ed-mv button:disabled { opacity: .35; cursor: default; }
.tst-ed-mv button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
.tst-ed-b.tst-ed-moved { animation: tstEdMoved .7s ease-out; }
@keyframes tstEdMoved { from { box-shadow: 0 0 0 3px rgba(59, 130, 246, .45); } to { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0); } }
@media (prefers-reduced-motion: reduce) { .tst-ed-b.tst-ed-moved { animation: none; } }
body[data-theme="dark"] .tst-ed-b { background: #0f172a; border-color: #334155; }
body[data-theme="dark"] .tst-ed-bh .tst-bn { background: #111827; border-color: #334155; color: #cbd5e1; }
body[data-theme="dark"] .tst-ed-mv button { background: #111827; border-color: #334155; color: #cbd5e1; }
body[data-theme="dark"] .tst-ed-mv button:hover:not(:disabled) { background: #1f2937; color: #f8fafc; }

/* Окно задания по звонку: проблема звонка и «проблема → решение» (training-practice.js) */
.tpr-w-focus { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: #fef2f2; color: #991b1b; font-size: 13px; line-height: 1.45; }
.tpr-w-focus svg { flex: none; margin-top: 2px; }
.tpr-rv-ps { display: grid; grid-template-columns: 1fr 22px 1fr; gap: 6px; margin: 10px 0; }
.tpr-rv-ps .ar { display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.tpr-rv-ps .p, .tpr-rv-ps .s { padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; }
.tpr-rv-ps .p { background: #fef2f2; color: #b91c1c; }
.tpr-rv-ps .s { background: #f0fdf4; color: #15803d; }
.tpr-rv-ps span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: 2px; }
body[data-theme="dark"] .tpr-w-focus { background: rgba(239, 68, 68, .14); color: #fca5a5; }
body[data-theme="dark"] .tpr-rv-ps .p { background: rgba(239, 68, 68, .14); color: #fca5a5; }
body[data-theme="dark"] .tpr-rv-ps .s { background: rgba(34, 197, 94, .14); color: #86efac; }

/* «ИИ-учитель»: карточка программы */
.tst-ai-pub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 10px 12px; border-radius: 11px;
    background: var(--s-warn-bg, #fffbeb); border: 1px solid var(--s-warn-bd, #fde68a); color: var(--s-warn-ink, #b45309); font-size: 12.5px; line-height: 1.45; }
.tst-ai-pub span { flex: 1; min-width: 220px; color: var(--s-ink3, #334155); }
.tst-ai-pub.on { background: var(--s-ok-bg, #f0fdf4); border-color: var(--s-ok-bd, #bbf7d0); color: var(--s-ok-ink, #15803d); }
.tst-ai-card .tst-ai-box { margin: 10px 0 6px; }
.tst-ai-rows { display: flex; flex-direction: column; gap: 4px; }
.tst-ai-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: var(--s-sub, #f8fafc); font-size: 12.5px; flex-wrap: wrap; }
.tst-ai-row .n { width: 30px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11.5px; background: var(--s-ai-bg, #f5f3ff); color: var(--s-ai-ink, #6d28d9); flex: none; }
.tst-ai-row .t { flex: 1; min-width: 140px; font-weight: 600; color: var(--s-ink2, #1e293b); }
.tst-ai-row .c { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; background: var(--s-sub2, #f1f5f9); color: var(--s-ink4, #475569); white-space: nowrap; }
.tst-ai-row .c.ok { background: var(--s-ok-bg, #f0fdf4); color: var(--s-ok-ink, #15803d); }
.tst-ai-row .c.ai { background: var(--s-ai-bg, #f5f3ff); color: var(--s-ai-ink, #6d28d9); }
.tst-ai-row .c.no { color: var(--s-meta, #94a3b8); }
.tst-ai-row .c.warn { background: var(--s-warn-bg, #fffbeb); color: var(--s-warn-ink, #b45309); }
.tst-ai-row .c.dim { background: none; color: var(--s-meta, #94a3b8); }
.tst-ai-lib { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--s-mut, #64748b); }
.tst-ai-lib .warn { color: var(--s-warn-ink, #b45309); }
.tst-ai-lib .bad { color: var(--s-bad-ink, #b91c1c); }
.tst-ai-empty { display: flex; gap: 7px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--s-sub, #f8fafc); font-size: 12.5px; line-height: 1.5; color: var(--s-ink3, #334155); }
.tst-ai-empty svg { flex: none; margin-top: 2px; }

/* Узкий экран */
@media (max-width: 720px) {
    #salesTab .tst-hero { flex-direction: column; padding: 16px; }
    #salesTab .tst-hero-num { width: 54px; height: 54px; }
    #salesTab .tst-title { font-size: 19px; }
    #salesTab .tst-ring { position: absolute; right: 16px; top: 16px; }
    #salesTab .tst-hero { position: relative; }
    #salesTab .tst-blocks, #salesTab .tst-exs, #salesTab .tst-objs { grid-template-columns: 1fr; }
    #salesTab .tst-obj-grid { grid-template-columns: 1fr; }
    #salesTab .tst-ps, .tpr-rv-ps { grid-template-columns: 1fr; }
    #salesTab .tst-ps > i, .tpr-rv-ps .ar { transform: rotate(90deg); }
    #salesTab .tst-task { flex-wrap: wrap; }
    #salesTab .tst-task-side { flex-direction: row; align-items: center; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}