/* ═══════════════════════════════════════════════════════════════════
   negotiations/trainer.css — стили изолированного раздела «Переговоры».
   Опирается на VK-dark токены, объявленные inline в negotiations.html.
   ═══════════════════════════════════════════════════════════════════ */

/* Акцент по умолчанию (тёмная тема раздела) — роль из core/tokeny.css.
   Почему не прежний #0077FF: белым по нему выходило 4.13:1, а на этой паре
   стоят ВСЕ главные кнопки раздела — «Дальше», «Начать спарринг», активная
   вкладка режима, кружок «вы здесь», кнопка отправки. Норма для подписи
   14–15px — 4.5. В дизайн-системе тёмный акцент светлый, а надпись на нём
   тёмная (--on-primary): та же пара даёт 7.70:1.
   Блок стоит здесь, а не в negotiations.html: этот файл грузится позже
   inline-стиля страницы, поэтому и перебивает его. Светлую тему он не
   трогает — у html[data-theme='light'] в конце файла вес больше. */
:root{
  --accent: var(--primary);
  --accent-on: var(--on-primary);
}

.neg-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 80px; }

/* ── hero ───────────────────────────────────────────────────────── */
.neg-hero { text-align: center; padding: 56px 16px 36px; }
.neg-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-tertiary); background: transparent; border: 0;
  padding: 0; margin-bottom: 16px;
}
.neg-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 6vw, 52px); font-weight: 700; line-height: 1.08;
  letter-spacing: -0.025em; color: var(--text-primary);
}
.neg-lead {
  max-width: 600px; margin: 18px auto 0;
  font-size: clamp(16px, 2.2vw, 17px); line-height: 1.65; color: var(--text-secondary);
}

/* ── секции ─────────────────────────────────────────────────────── */
.neg-section { margin-top: 40px; }
.neg-section-h {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px;
}
.neg-section-sub { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 20px; max-width: 640px; }

/* ── гид по дуге (5 фаз, шаг за шагом) ───────────────────────────── */
.neg-guide-rail { display: flex; gap: var(--sp-2, 8px); margin-bottom: 16px; }
.neg-guide-seg {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: transparent; border: 0; cursor: pointer; padding: 4px 2px; font: inherit;
  color: var(--text-tertiary);
}
.neg-guide-seg-dot { width: 100%; height: 4px; border-radius: 4px; background: var(--bg-tonal); transition: background .2s; }
.neg-guide-seg-lbl { font-size: 11px; font-weight: 600; letter-spacing: .03em; white-space: nowrap; transition: color .2s; }
.neg-guide-seg.is-done .neg-guide-seg-dot,
.neg-guide-seg.is-active .neg-guide-seg-dot { background: var(--gcol, var(--accent)); }
.neg-guide-seg.is-active .neg-guide-seg-lbl { color: var(--text-primary); }
.neg-guide-seg:hover .neg-guide-seg-lbl { color: var(--text-secondary); }
.neg-guide-seg--вход       { --gcol: #00D3E6; }
.neg-guide-seg--нарастание { --gcol: var(--accent-hover); }
.neg-guide-seg--вершина    { --gcol: #FFB020; }
.neg-guide-seg--спад       { --gcol: #B07CFF; }
.neg-guide-seg--итог       { --gcol: #2FBF71; }

.neg-guide-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--gcol, var(--accent));
  border-radius: 18px; padding: 20px 22px;
}
.neg-guide-card--вход       { --gcol: #00D3E6; }
.neg-guide-card--нарастание { --gcol: var(--accent-hover); }
.neg-guide-card--вершина    { --gcol: #FFB020; }
.neg-guide-card--спад       { --gcol: #B07CFF; }
.neg-guide-card--итог       { --gcol: #2FBF71; }
.neg-guide-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 12px; }
.neg-guide-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gcol, var(--accent)); background: rgba(255,255,255,.05);
  border: 1px solid var(--border-strong); border-radius: 100px; padding: 4px 11px; white-space: nowrap;
}
.neg-guide-step { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.neg-guide-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; }
.neg-guide-block { margin-bottom: 12px; }
.neg-guide-block:last-child { margin-bottom: 0; }
.neg-guide-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); margin-bottom: 4px; }
.neg-guide-lbl--you { color: var(--gcol, var(--accent)); }
.neg-guide-block p { font-size: 14.5px; line-height: 1.58; color: var(--text-secondary); margin: 0; }

.neg-guide-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.neg-guide-btn {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: 14px;
  border-radius: 100px; padding: 11px 22px; cursor: pointer; border: 1px solid transparent;
}
.neg-guide-btn--primary { background: var(--accent); color: var(--accent-on, #fff); border: 0; }
.neg-guide-btn--primary:hover { background: var(--accent-hover); }
.neg-guide-btn--ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-strong); }
.neg-guide-btn--ghost:hover:not(:disabled) { color: var(--text-primary); border-color: var(--accent); }
.neg-guide-btn:disabled { opacity: .5; cursor: default; }

.neg-map-head { margin-top: 32px; }

@media (max-width: 520px) {
  .neg-guide-seg-lbl { font-size: 10px; letter-spacing: 0; }
  .neg-guide-btn { padding: 10px 16px; font-size: 13px; }
  .neg-guide-card { padding: 18px; }
}

/* ── карта 12 стадий ────────────────────────────────────────────── */
.neg-map { display: flex; flex-direction: column; gap: 8px; }
.neg-map-group {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-tertiary); margin: 18px 0 4px;
}
.neg-map-group:first-child { margin-top: 0; }

.neg-stage {
  display: flex; align-items: flex-start; gap: 14px; width: 100%;
  text-align: left; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--text-tertiary);
  border-radius: 14px; padding: 14px 16px;
  color: var(--text-primary);
  transition: border-color 150ms ease, background 150ms ease, transform 120ms ease;
}
.neg-stage:hover { background: var(--bg-elevated); transform: translateX(2px); }
.neg-stage-num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  background: var(--bg-tonal); color: var(--text-secondary);
}
.neg-stage-body { display: flex; flex-direction: column; gap: 2px; }
.neg-stage-name { font-weight: 600; font-size: 16px; }
.neg-stage-role { font-size: 12px; color: var(--text-tertiary); }
.neg-stage-desc {
  font-size: 14px; line-height: 1.55; color: var(--text-secondary);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 220ms ease, opacity 180ms ease, margin-top 180ms ease;
}
.neg-stage.is-open .neg-stage-desc { max-height: 200px; opacity: 1; margin-top: 6px; }
.neg-stage.is-open { background: var(--bg-elevated); }

/* цвета по группам (дуга переговоров) */
.neg-stage--вход      { border-left-color: #00D3E6; }
.neg-stage--нарастание{ border-left-color: var(--accent); }
.neg-stage--вершина   { border-left-color: #FFB020; }
.neg-stage--спад      { border-left-color: #B07CFF; }
.neg-stage--итог      { border-left-color: #2FBF71; }
.neg-stage--вход      .neg-stage-num { color: #00D3E6; }
.neg-stage--вершина   .neg-stage-num { color: #FFB020; }
.neg-stage--итог      .neg-stage-num { color: #2FBF71; }

/* ── практикумы: памятка + хаб + ситуационный дрилл ──────────────── */
.neg-memo {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 16px; padding: 18px 20px; margin-bottom: 18px;
}
.neg-memo-h { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-primary); margin-bottom: 6px; }
.neg-memo-p { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin-bottom: 12px; }
.neg-memo-modes { display: grid; gap: 8px; }
@media (min-width: 720px) { .neg-memo-modes { grid-template-columns: repeat(3, 1fr); } }
.neg-memo-mode {
  font-size: 13px; line-height: 1.5; color: var(--text-secondary);
  padding: 10px 12px; border-radius: 10px; background: var(--bg-elevated);
  border-left: 2px solid var(--text-tertiary);
}
.neg-memo-mode b { color: var(--text-primary); }
.neg-memo-mode--ok  { border-left-color: #2FBF71; }
.neg-memo-mode--mid { border-left-color: #E0A93B; }
.neg-memo-mode--no  { border-left-color: #E2604A; }

.neg-hub { display: grid; gap: 10px; }
@media (min-width: 560px) { .neg-hub { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .neg-hub { grid-template-columns: 1fr 1fr 1fr; } }
.neg-hub-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px; cursor: pointer; color: var(--text-primary); font: inherit;
  transition: border-color .15s, background .15s, transform .12s;
}
.neg-hub-card:hover { background: var(--bg-elevated); border-color: var(--border-strong); transform: translateY(-2px); }
.neg-hub-card-h { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.neg-hub-card-sub { font-size: 13px; line-height: 1.5; color: var(--text-secondary); flex: 1; }
.neg-hub-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.neg-hub-badge { font-size: 11px; color: var(--text-tertiary); letter-spacing: .03em; }
.neg-hub-badge--new { color: var(--accent-hover); font-weight: 600; }
.neg-hub-go { font-size: 13px; font-weight: 600; color: var(--accent-hover); }

.neg-ex-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.neg-ex-back {
  background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary);
  border-radius: 100px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.neg-ex-back:hover { color: var(--text-primary); border-color: var(--accent); }
.neg-ex-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text-primary); }
.neg-ex-prog { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-tertiary); margin-bottom: 12px; }
.neg-ex-score { color: var(--accent-hover); font-weight: 600; font-variant-numeric: tabular-nums; }
.neg-ex-scene {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-tertiary); background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 10px; margin-bottom: 12px;
}
.neg-ex-line { font-family: var(--font-serif); font-size: clamp(18px, 2.6vw, 22px); line-height: 1.42; color: var(--text-primary); margin-bottom: 12px; }
.neg-ex-ask { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.neg-ex-opts { display: grid; gap: 9px; }
.neg-ex-opt {
  text-align: left; background: var(--bg-elevated); border: 1.5px solid var(--border-strong);
  border-radius: 12px; padding: 13px 15px; cursor: pointer; color: var(--text-primary);
  font: inherit; font-size: 14.5px; line-height: 1.45; transition: border-color .13s, background .13s;
}
.neg-ex-opt:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-tonal); }
.neg-ex-opt:disabled { cursor: default; }
/* отвеченные варианты — сигнал полоской слева, без сплошной заливки (аккуратнее) */
.neg-ex-opt.is-good { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #2FBF71; }
.neg-ex-opt.is-mid  { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #E0A93B; }
.neg-ex-opt.is-bad  { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #E2604A; }

.neg-ex-fb { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .26s ease, opacity .2s ease; }
.neg-ex-fb.is-show { max-height: 420px; opacity: 1; margin-top: 14px; }
.neg-ex-fb-v { font-weight: 700; font-size: 15px; margin-bottom: 5px; }
.neg-ex-fb.is-good .neg-ex-fb-v { color: #2FBF71; }
.neg-ex-fb.is-mid  .neg-ex-fb-v { color: #E0A93B; }
.neg-ex-fb.is-bad  .neg-ex-fb-v { color: #E2604A; }
.neg-ex-fb-why { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.neg-ex-fb-good {
  font-size: 13.5px; line-height: 1.5; color: var(--text-secondary);
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(47,191,113,.08); border-left: 2px solid #2FBF71;
}
.neg-ex-fb-good b { color: #2FBF71; }
.neg-ex-done { text-align: center; padding: 16px 0 6px; }
.neg-ex-done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* ── дрилл ──────────────────────────────────────────────────────── */
.neg-drill-stats {
  display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap;
}
.neg-stat {
  flex: 1 1 0; min-width: 92px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px; text-align: center;
}
.neg-stat-val { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--text-primary); }
.neg-stat-lbl { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 2px; }

.neg-drill-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px;
  padding: 22px;
}
/* длинный скролл практики — отступ между сложенными карточками реплик */
.neg-ex-card { margin-bottom: 14px; }
.neg-ex-card:last-child { margin-bottom: 0; }
/* карточка встречи «вход в контакт» — внешняя обёртка (внутри свой neg-c-person) */
.neg-c-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 20px; }

/* Плавающая кнопка обратной связи (для тестеров) */
.neg-fab-fb {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-on, #fff); text-decoration: none;
  border-radius: 100px; padding: 11px 18px; font-weight: 600; font-size: 14px;
  box-shadow: 0 6px 22px var(--accent-glow); transition: background .15s, transform .12s;
}
.neg-fab-fb:hover { background: var(--accent-hover); transform: translateY(-1px); }
/* ФАБ «Отзыв» лежал поверх главной кнопки спарринга и поверх ссылок карточек.
   Отводим ему полосу справа у тех блоков, куда он дотягивается. */
@media (max-width: 720px) {
  .neg-spar-grid, .neg-cfg-start { padding-right: 62px; }
}
.neg-fab-fb:focus-visible { outline: 2px solid var(--accent-on, #fff); outline-offset: 2px; }
.neg-fab-fb-ico { font-size: 16px; line-height: 1; }
@media (max-width: 640px) { .neg-fab-fb { right: 12px; bottom: 12px; padding: 12px; } .neg-fab-fb-txt { display: none; } }
.neg-spar-eng-opt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-tertiary); background: var(--bg-tonal); border-radius: 5px; padding: 2px 6px; margin-left: 6px; vertical-align: middle; }

/* ── Конструктор «Живого спарринга»: тип × навык × уровень ── */
.neg-cfg { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px; }
.neg-cfg-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 24px; }
.neg-cfg-label:first-child { margin-top: 0; }
/* единая карточная система выбора: радиус 14, padding 14, плоско, is-on = заливка + бордюр (без ring-шума) */
.neg-cfg-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 560px) { .neg-cfg-types { grid-template-columns: 1fr 1fr; } }
.neg-cfg-type, .neg-cfg-skill, .neg-cfg-level {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 14px;
  cursor: pointer; color: var(--text-primary); font: inherit; box-shadow: none;
  transition: border-color .15s, background .15s; }
.neg-cfg-type { align-items: flex-start; }
.neg-cfg-type:hover, .neg-cfg-skill:hover, .neg-cfg-level:hover { background: var(--bg-elevated); }
.neg-cfg-type.is-on { background: var(--accent-soft); border-color: var(--tcol, var(--accent)); }
.neg-cfg-type-glyph { font-size: 20px; line-height: 1; }
.neg-cfg-type-name { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.neg-cfg-type-role { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.35; }
.neg-cfg-skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 720px) { .neg-cfg-skills { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .neg-cfg-skills { grid-template-columns: 1fr; } }
.neg-cfg-skill.is-on { background: var(--accent-soft); border-color: var(--accent); }
.neg-cfg-skill-h { font-weight: 700; font-size: 14px; }
.neg-cfg-skill-d { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.35; }
.neg-cfg-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 560px) { .neg-cfg-levels { grid-template-columns: 1fr; } }
.neg-cfg-level.is-on { background: var(--bg-elevated); }
.neg-cfg-level--easy.is-on   { border-color: #2FBF71; background: rgba(47,191,113,.12); }
.neg-cfg-level--medium.is-on { border-color: #E0A93B; background: rgba(224,169,59,.12); }
.neg-cfg-level--hard.is-on   { border-color: #E2604A; background: rgba(226,96,74,.12); }
.neg-cfg-level-h { font-weight: 700; font-size: 14px; }
.neg-cfg-level-d { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.35; }
/* единственный акцент экрана — на всю ширину секции */
.neg-cfg-start { margin-top: 20px; align-self: stretch; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--accent-on, #fff); border: 0; border-radius: 100px; padding: 14px 28px;
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 6px 22px var(--accent-glow); transition: background .15s; }
.neg-cfg-start:hover { background: var(--accent-hover); }
/* Пояснение под кнопкой, когда живой собеседник выключен на сервере. */
.neg-cfg-note { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--text-secondary, #A8B1BE); }
.neg-spar-key-note--lvl { margin-top: 8px; font-size: 12px; }
/* отвеченная карточка слегка приглушена — фокус на текущей (но текст читаем) */
.neg-drill-card .neg-ex-opt:disabled, .neg-drill-card .neg-opt:disabled { cursor: default; }
.neg-drill-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-tertiary); margin-bottom: 14px;
}
.neg-drill-streak { color: var(--accent-hover); font-weight: 600; }
.neg-drill-line {
  font-family: var(--font-serif); font-size: clamp(19px, 3vw, 24px); line-height: 1.4;
  color: var(--text-primary); padding: 6px 0 14px;
}
.neg-drill-ask { font-size: 13px; color: var(--text-tertiary); margin-bottom: 12px; }

.neg-drill-opts { display: grid; gap: 10px; }
@media (min-width: 560px) { .neg-drill-opts { grid-template-columns: 1fr 1fr; } }
.neg-opt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 14px 16px; cursor: pointer;
  color: var(--text-primary); font-size: 15px; font-weight: 500;
  transition: border-color 130ms ease, background 130ms ease;
}
.neg-opt:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.neg-opt:disabled { cursor: default; }
.neg-opt-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--bg-tonal); color: var(--text-tertiary);
}
.neg-opt.is-correct { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #2FBF71; }
.neg-opt.is-correct .neg-opt-num { background: #2FBF71; color: #04210f; }
.neg-opt.is-wrong { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #FF5C5C; }
.neg-opt.is-wrong .neg-opt-num { background: #FF5C5C; color: #2a0606; }

.neg-drill-fb { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 260ms ease, opacity 200ms ease; }
.neg-drill-fb.is-show { max-height: 320px; opacity: 1; margin-top: 16px; }
.neg-fb-verdict { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.neg-drill-fb.is-ok .neg-fb-verdict { color: #2FBF71; }
.neg-drill-fb.is-no .neg-fb-verdict { color: #FF7A7A; }
.neg-fb-why { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.neg-next, .neg-btn {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-on); border: none;
  border-radius: 100px; padding: 11px 22px; font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: var(--font-sans);
}
.neg-next:hover, .neg-btn:hover { background: var(--accent-hover); }

.neg-drill-done { text-align: center; padding: 18px 0 6px; }
.neg-done-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-primary); }
.neg-done-sub { font-size: 14px; color: var(--text-secondary); margin-top: 6px; }

/* ── футер раздела ──────────────────────────────────────────────── */
.neg-foot { margin-top: 56px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.neg-foot a { color: var(--accent-hover); text-decoration: none; }
.neg-foot a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   Тренажёр «Вход в контакт» (.neg-c-*) — 4 типа + сценарий
   ═══════════════════════════════════════════════════════════════════ */
.neg-c-type--ХА { --tcol: #FF6B3D; }
.neg-c-type--ФО { --tcol: #2688EB; }
.neg-c-type--ЦИ { --tcol: #9B6DFF; }
.neg-c-type--ШЭ { --tcol: #2BB573; }

/* align-items:stretch → карточки одного ряда равной высоты (короткий one-liner не делает карточку ниже) */
.neg-c-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0 8px; align-items: stretch; }
.neg-c-type {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 14px; border-radius: 14px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border);
  border-top: 3px solid var(--tcol, var(--accent));
  color: var(--text-primary); font: inherit;
  transition: border-color .15s, background .15s;
}
.neg-c-type:hover { background: var(--bg-elevated); }
.neg-c-type:focus { outline: none; }
.neg-c-type:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.neg-c-type.is-open { background: var(--bg-elevated); border-color: var(--tcol, var(--accent)); }
.neg-c-type-head { display: flex; align-items: flex-start; gap: 9px; }
.neg-c-type-glyph { font-size: 19px; line-height: 1.25; flex-shrink: 0; }
.neg-c-type-title { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.neg-c-type-id { font-weight: 700; font-size: 15px; line-height: 1.15; color: var(--tcol, var(--accent-hover)); letter-spacing: .01em; }
/* мета (код · стихия · сила) — отдельными тегами, чтобы не было кривых переносов */
.neg-c-type-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.neg-c-type-tag { font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: .02em; white-space: nowrap;
  padding: 3px 7px; border-radius: 6px; background: var(--bg-tonal); color: var(--text-tertiary); border: 1px solid transparent; }
.neg-c-type-tag--code { color: var(--tcol, var(--accent-hover)); background: transparent; border-color: var(--tcol, var(--border-strong)); }
.neg-c-type-one { font-size: 13px; color: var(--text-secondary); line-height: 1.45; margin-top: 2px; }
.neg-c-type-more { display: none; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.neg-c-type.is-open .neg-c-type-more { display: block; }
.neg-c-type-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tcol, var(--accent-hover)); margin: 8px 0 3px; }
.neg-c-type-lbl--no { color: #E2604A; }
.neg-c-type-more p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.neg-c-type-cues { margin: 0; padding-left: 16px; }
.neg-c-type-cues li { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 2px; }

/* Табы Теория / Практика */
.neg-c-tabs { display: inline-flex; gap: 4px; background: var(--bg-tonal); padding: 4px; border-radius: 12px; margin: 6px 0 18px; }
.neg-c-tab { padding: 8px 18px; border-radius: 9px; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, color .15s; }
.neg-c-tab:hover { color: var(--text-primary); }
.neg-c-tab.is-active { background: var(--accent); color: var(--accent-on, #fff); }
.neg-c-pane[hidden] { display: none; }
.neg-c-go-practice { margin-top: 18px; }

.neg-c-trainer-h { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 4px 0 4px; color: var(--text-primary); }

.neg-c-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: 12px; color: var(--text-tertiary); }
.neg-c-count { font-weight: 600; color: var(--accent-hover); }
.neg-c-score { font-variant-numeric: tabular-nums; }
.neg-c-person { padding: 16px; border-radius: 14px; margin-bottom: 16px; background: var(--bg-elevated); border: 1px solid var(--border-strong); }
.neg-c-setting { font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px; }
.neg-c-line { font-family: var(--font-serif); font-size: 19px; line-height: 1.45; color: var(--text-primary); }
.neg-c-ask { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }
.neg-c-ask--2 { margin-top: 18px; }

.neg-c-typeopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.neg-c-typebtn {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-radius: 12px; border: 1.5px solid var(--border-strong); background: var(--bg-card);
  color: var(--text-primary); font: inherit; cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.neg-c-typebtn:hover:not(:disabled) { border-color: var(--accent); }
.neg-c-typebtn-glyph { font-size: 16px; }
.neg-c-typebtn-id { font-weight: 700; }
.neg-c-typebtn-name { font-size: 11.5px; color: var(--text-tertiary); }
.neg-c-typebtn.is-correct { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #2BB573; }
.neg-c-typebtn.is-wrong { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #E2604A; }
.neg-c-typebtn:disabled { cursor: default; }

.neg-c-openopts { display: flex; flex-direction: column; gap: 8px; }
.neg-c-openbtn {
  padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--border-strong);
  background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 14px;
  line-height: 1.45; cursor: pointer; text-align: left; transition: border-color .15s, background .15s;
}
.neg-c-openbtn:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-elevated); }
.neg-c-openbtn:disabled { cursor: default; opacity: .6; }
.neg-c-openbtn.is-resonate { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #2BB573; opacity: 1; }
.neg-c-openbtn.is-neutral { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #E0A93B; opacity: 1; }
.neg-c-openbtn.is-repel { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #E2604A; opacity: 1; }

.neg-c-fb { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border-left: 3px solid var(--border-strong); background: var(--bg-elevated); }
.neg-c-fb.is-ok { border-left-color: #2BB573; }
.neg-c-fb.is-no { border-left-color: #E2604A; }
.neg-c-fb.is-mid { border-left-color: #E0A93B; }
.neg-c-fb-verdict { font-weight: 600; font-size: 14px; margin-bottom: 4px; color: var(--text-primary); }
.neg-c-fb-why { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.neg-c-openfb { margin-top: 14px; }
.neg-c-next { margin-top: 12px; }

.neg-c-summary { text-align: center; padding: 12px 0; }
.neg-c-sum-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.neg-c-sum-stats { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; font-size: 14px; color: var(--text-secondary); margin-bottom: 18px; }
.neg-c-sum-stats b { font-size: 22px; color: var(--accent-hover); font-variant-numeric: tabular-nums; }
.neg-c-tips { text-align: left; max-width: 520px; margin: 0 auto 18px; }
.neg-c-tips-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); margin-bottom: 8px; }
.neg-c-tip { display: flex; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border); font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 6px; }
.neg-c-tip-id { font-weight: 700; color: var(--accent-hover); white-space: nowrap; }

@media (max-width: 640px) { .neg-c-types { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .neg-c-types { grid-template-columns: 1fr; } .neg-c-typeopts { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   Уроки переговоров: каталог сценариев + урок с порционной подачей
   ═══════════════════════════════════════════════════════════════════ */

/* — каталог сценариев — */
.neg-cat { display: flex; flex-direction: column; gap: 12px; }
.neg-cat-card {
  display: flex; align-items: center; gap: 16px; text-align: left; width: 100%;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px;
  padding: 18px 20px; cursor: pointer; color: var(--text-primary); font: inherit;
  transition: border-color .15s, background .15s, transform .12s;
}
.neg-cat-card:hover { background: var(--bg-elevated); border-color: var(--border-strong); transform: translateY(-2px); }
.neg-cat-num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  background: var(--accent-soft); color: var(--accent-hover); border: 1px solid rgba(0,119,255,.25);
}
.neg-cat-card.is-done .neg-cat-num { background: rgba(47,191,113,.14); color: #2FBF71; border-color: rgba(47,191,113,.3); }
.neg-cat-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.neg-cat-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.neg-cat-outcome { font-size: 13.5px; color: var(--text-secondary); line-height: 1.45; }
.neg-cat-meta { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.neg-cat-go { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--accent-hover); white-space: nowrap; }
@media (max-width: 520px) { .neg-cat-card { padding: 16px; gap: 12px; } .neg-cat-go { display: none; } }

/* — шапка урока: прогресс липнет под навбаром, всегда виден при скролле — */
html.yk-est .neg-l-head { top: 0; }
.neg-l-head {
  position: sticky; top: 56px; z-index: 30;
  max-width: 760px; margin: 0 auto 20px;
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
  padding: 12px 0 12px; border-bottom: 1px solid var(--border);
  background: rgba(10,11,13,.96);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
.neg-l-back {
  background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary);
  border-radius: 100px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.neg-l-back:hover { color: var(--text-primary); border-color: var(--accent); }
.neg-l-head-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text-primary); }
.neg-l-bar { order: 1; flex: 1 1 100%; height: 5px; border-radius: 4px; background: var(--bg-tonal); overflow: hidden; }
.neg-l-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .35s ease; }

/* — сегменты урока — */
.neg-l-segs { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.neg-l-block { }
.neg-l-appear { animation: negBlockIn .4s cubic-bezier(.16,1,.3,1) both; }
@keyframes negBlockIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.neg-l-seg-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-primary); margin-bottom: 6px; }
.neg-l-seg-note { font-size: 13.5px; color: var(--text-tertiary); line-height: 1.5; margin-bottom: 14px; }
.neg-l-prose { font-size: 15.5px; line-height: 1.62; color: var(--text-secondary); }
.neg-l-prose--lead { font-size: 17px; color: var(--text-primary); }
.neg-l-prose b { color: var(--text-primary); font-weight: 600; }
.neg-l-mount { margin-top: 4px; }

/* — Наставник (аватар-помощник, говорит на шаге) — */
.neg-l-coach {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px;
  background: var(--accent-soft); border: 1px solid rgba(0,119,255,.18);
  border-radius: 16px; padding: 13px 15px;
}
.neg-coach-av { flex-shrink: 0; line-height: 0; }
.neg-coach-av svg { display: block; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,119,255,.35); }
.neg-l-coach-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.neg-l-coach-name { font-size: 12px; font-weight: 700; color: var(--text-primary); letter-spacing: .01em; }
.neg-l-coach-role { font-weight: 500; color: var(--text-tertiary); }
.neg-l-coach-line { font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.neg-l-coach-line b { color: var(--text-primary); font-weight: 600; }

/* — Пример (конкретная мини-сцена) — */
.neg-l-example {
  margin-top: 14px; display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2, #00D3E6); border-radius: 12px; padding: 12px 14px;
}
.neg-l-example-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-2, #00D3E6); }
.neg-l-example-txt { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.neg-l-example-txt b { color: var(--text-primary); font-weight: 600; }

/* — Правило (вывод-takeaway) — */
.neg-l-takeaway {
  margin-top: 12px; display: flex; align-items: baseline; gap: 10px;
  background: rgba(47,191,113,.10); border: 1px solid rgba(47,191,113,.28);
  border-radius: 12px; padding: 11px 14px;
}
.neg-l-takeaway-lbl { flex-shrink: 0; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #45D483; }
.neg-l-takeaway-txt { font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--text-primary); }
.neg-l-takeaway-txt b { color: #45D483; }

/* — гейт «Дальше» — */
.neg-gate {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  background: var(--accent); color: var(--accent-on, #fff); border: 0; border-radius: 100px;
  padding: 12px 26px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background .15s;
}
.neg-gate:hover:not(:disabled) { background: var(--accent-hover); }
.neg-gate:disabled { cursor: default; }
.neg-gate.is-wait { background: var(--bg-tonal); color: var(--text-tertiary); }
.neg-gate.is-ready { animation: negGatePulse 2.2s ease-in-out infinite; }
.neg-gate.is-used { background: rgba(47,191,113,.14); color: #2FBF71; animation: none; }
@keyframes negGatePulse { 0%, 100% { box-shadow: 0 4px 16px rgba(0,119,255,.28); } 50% { box-shadow: 0 6px 22px rgba(0,119,255,.5); } }

/* — итог сценария — */
.neg-l-sum-badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #2FBF71; background: rgba(47,191,113,.12); border: 1px solid rgba(47,191,113,.3);
  border-radius: 100px; padding: 6px 14px; margin-bottom: 14px;
}
.neg-l-sum-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.neg-guide-end { font-size: 13px; color: var(--text-tertiary); align-self: center; }
.neg-ex-empty { font-size: 14px; color: var(--text-tertiary); padding: 12px 0; }

/* ═══════════════════════════════════════════════════════════════════
   Режимы: вкладки «Сценарии | Спарринг» + чат-спарринг
   ═══════════════════════════════════════════════════════════════════ */
.neg-mode-tabs { display: flex; width: fit-content; gap: 4px; background: var(--bg-tonal); padding: 4px; border-radius: 12px; margin: 0 auto 28px; }
.neg-mode-tab { padding: 14px 20px; border-radius: 9px; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, color .15s; }
.neg-mode-tab:hover { color: var(--text-primary); }
.neg-mode-tab.is-active { background: var(--accent); color: var(--accent-on, #fff); }

/* — выбор параметра — */
.neg-spar-intro { margin-bottom: 16px; }
.neg-spar-grid { display: grid; gap: 12px; }
@media (min-width: 600px) { .neg-spar-grid { grid-template-columns: 1fr 1fr; } }
.neg-spar-card {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; cursor: pointer; color: var(--text-primary); font: inherit; box-shadow: none;
  transition: border-color .15s, background .15s;
}
.neg-spar-card:hover { background: var(--bg-elevated); border-color: var(--border-strong); }
.neg-spar-card-glyph { flex-shrink: 0; font-size: 26px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-tonal); border-radius: 12px; }
.neg-spar-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.neg-spar-card-param { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-hover); font-weight: 600; }
.neg-spar-card-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.neg-spar-card-persona { font-size: 12.5px; color: var(--text-tertiary); }
.neg-spar-card-foot { flex-shrink: 0; }
.neg-spar-card-badge { font-size: 12px; color: var(--text-tertiary); }
.neg-spar-card-badge--new { color: var(--accent-hover); font-weight: 600; }

/* — шапка диалога — */
.neg-spar-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.neg-spar-back { background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); border-radius: 100px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.neg-spar-back:hover { color: var(--text-primary); border-color: var(--accent); }
.neg-spar-persona { display: flex; align-items: center; gap: 10px; }
.neg-spar-persona-glyph { font-size: 26px; }
.neg-spar-persona-meta { display: flex; flex-direction: column; }
.neg-spar-persona-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-primary); }
.neg-spar-persona-role { font-size: 12px; color: var(--text-tertiary); }

.neg-spar-goal { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.neg-spar-setting { font-size: 12px; color: var(--text-tertiary); margin-bottom: 4px; }
.neg-spar-goal-text { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.neg-spar-goal-text b { color: var(--text-primary); }

.neg-spar-meter { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.neg-spar-meter-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); white-space: nowrap; }
.neg-spar-meter-bar { flex: 1; height: 6px; border-radius: 6px; background: var(--bg-tonal); overflow: hidden; }
.neg-spar-meter-fill { display: block; height: 100%; width: 50%; background: linear-gradient(90deg, #E2604A, #E0A93B 50%, #2FBF71); transition: width .4s ease; }

/* — лента сообщений — */
.neg-spar-msgs { max-height: 56vh; overflow-y: auto; padding: 6px 2px; display: flex; flex-direction: column; gap: 10px; }
.neg-spar-msg { display: flex; }
.neg-spar-msg--ai { justify-content: flex-start; }
.neg-spar-msg--me { justify-content: flex-end; }
.neg-spar-bubble { max-width: 82%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.neg-spar-msg--ai .neg-spar-bubble { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-bottom-left-radius: 5px; color: var(--text-primary); }
.neg-spar-msg--me .neg-spar-bubble { background: var(--accent-soft); border: 1px solid rgba(0,119,255,.3); border-bottom-right-radius: 5px; color: var(--text-primary); }
.neg-spar-coach { align-self: center; font-size: 12.5px; line-height: 1.4; color: var(--text-tertiary); padding: 2px 8px; }
.neg-spar-coach--good { color: #2FBF71; }
.neg-spar-coach--bad { color: #E2604A; }
.neg-spar-coach--mid { color: #E0A93B; }

/* — зона ввода — */
.neg-spar-input { margin-top: 14px; }
.neg-spar-hint { font-size: 12.5px; color: var(--text-tertiary); min-height: 18px; margin-bottom: 8px; }
.neg-spar-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.neg-spar-chip {
  text-align: left; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 12px;
  padding: 9px 13px; font: inherit; font-size: 13.5px; line-height: 1.4; color: var(--text-secondary);
  cursor: pointer; transition: border-color .13s, background .13s, color .13s; max-width: 100%;
}
.neg-spar-chip:hover { border-color: var(--accent); background: var(--bg-elevated); color: var(--text-primary); }
.neg-spar-chip--alt { color: var(--text-tertiary); }
.neg-spar-typebar { display: flex; gap: 8px; align-items: flex-end; }
.neg-spar-ta {
  flex: 1; resize: none; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 14px;
  padding: 11px 14px; font: inherit; font-size: 14.5px; line-height: 1.4; color: var(--text-primary); max-height: 120px;
}
.neg-spar-ta:focus { outline: none; border-color: var(--accent); }
/* Плейсхолдеры явно через токен — negotiations.html не грузит vk-tech-tokens.css,
   а UA-дефолт плейсхолдера на тёмном фоне непредсказуем (Firefox его ещё и гасит). */
.neg-spar-ta::placeholder, .neg-spar-key-input::placeholder { color: var(--text-tertiary); opacity: 1; }
.neg-spar-send {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent);
  color: var(--accent-on, #fff); font-size: 20px; cursor: pointer; transition: background .15s;
}
.neg-spar-send:hover { background: var(--accent-hover); }

/* — разбор — */
.neg-spar-debrief { margin: 12px 0 4px; padding: 16px 18px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--text-tertiary); }
.neg-spar-debrief--good { border-left-color: #2FBF71; }
.neg-spar-debrief--bad { border-left-color: #E2604A; }
.neg-spar-debrief--mid { border-left-color: #E0A93B; }
.neg-spar-deb-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text-primary); margin-bottom: 6px; }
.neg-spar-deb-text { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.neg-spar-deb-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 8px; }
.neg-spar-deb-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* — выбор движка — */
.neg-spar-engine { display: grid; gap: 10px; margin: 14px 0 16px; }
@media (min-width: 600px) { .neg-spar-engine { grid-template-columns: 1fr 1fr; } }
.neg-spar-eng-btn {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; color: var(--text-primary); font: inherit; transition: border-color .15s, background .15s;
}
.neg-spar-eng-btn:hover { border-color: var(--accent); }
.neg-spar-eng-btn.is-active { border-color: var(--accent); background: var(--accent-soft); }
.neg-spar-eng-h { font-weight: 700; font-size: 15px; }
.neg-spar-eng-d { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.45; }

/* — панель ключа (BYOK) — */
.neg-spar-key { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-top: 16px; margin-bottom: 0; }
.neg-spar-key-title { font-weight: 700; font-size: 15px; color: var(--text-primary); margin-bottom: 6px; }
.neg-spar-key-note { font-size: 12.5px; line-height: 1.5; color: var(--text-tertiary); margin-bottom: 12px; }
.neg-spar-key-note a { color: var(--accent-hover); }
.neg-spar-key-form { display: flex; flex-wrap: wrap; gap: 8px; }
.neg-spar-key-input { flex: 1 1 200px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--text-primary); }
.neg-spar-key-input:focus { outline: none; border-color: var(--accent); }
.neg-spar-key-model { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.neg-spar-key-save { background: var(--accent); color: var(--accent-on, #fff); border: 0; border-radius: 10px; padding: 10px 18px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.neg-spar-key-save:hover { background: var(--accent-hover); }
.neg-spar-key-row { font-size: 13px; }
.neg-spar-key-ok { color: #2FBF71; font-weight: 600; }
.neg-spar-key-sub { color: var(--text-tertiary); }
.neg-spar-key-actions { display: flex; gap: 14px; margin-top: 8px; }
.neg-spar-key-link { background: none; border: 0; color: var(--accent-hover); font: inherit; font-size: 13px; cursor: pointer; padding: 0; }
.neg-spar-key-link:hover { text-decoration: underline; }

.neg-spar-pick-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); margin: 28px 0 12px; padding-top: 20px; border-top: 1px solid var(--border); }

/* — аватар собеседника — */
.neg-spar-msg--ai { align-items: flex-end; gap: 8px; }
.neg-spar-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-tonal); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.neg-spar-engine-tag { margin-left: auto; font-size: 11px; color: var(--text-tertiary); background: var(--bg-tonal); border-radius: 100px; padding: 4px 10px; white-space: nowrap; }

/* — композер (зона хода игрока) — */
.neg-spar-composer { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.neg-spar-opts-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); margin-bottom: 10px; }
.neg-spar-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.neg-spar-opt {
  display: flex; align-items: flex-start; gap: 10px; text-align: left; width: 100%;
  background: var(--bg-elevated); border: 1.5px solid var(--border-strong); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 12px 14px; cursor: pointer; color: var(--text-primary); font: inherit;
  font-size: 14.5px; line-height: 1.45; transition: border-color .13s, background .13s, transform .1s;
}
.neg-spar-opt:hover { background: var(--accent-soft); border-color: var(--accent); transform: translateX(2px); }
.neg-spar-opt-mark { color: var(--accent-hover); font-weight: 700; font-size: 18px; line-height: 1.2; }
.neg-spar-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--text-tertiary); font-size: 12px; }
.neg-spar-or::before, .neg-spar-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.neg-spar-finish { margin-top: 10px; width: 100%; background: var(--bg-tonal); color: var(--text-secondary); border: 1px solid var(--border-strong); border-radius: 12px; padding: 11px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.neg-spar-finish:hover { color: var(--text-primary); border-color: var(--accent); }

/* — индикатор «печатает» — */
.neg-spar-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.neg-spar-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); display: inline-block; animation: negDot 1.2s infinite ease-in-out; }
.neg-spar-dots i:nth-child(2) { animation-delay: .2s; }
.neg-spar-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes negDot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.neg-spar-aierr { font-size: 13px; line-height: 1.5; color: #E2604A; background: rgba(226,96,74,.1); border: 1px solid rgba(226,96,74,.3); border-radius: 12px; padding: 12px 14px; }
.neg-spar-aierr-sub { color: var(--text-tertiary); font-size: 12px; }
.neg-spar-ta:disabled, .neg-spar-send:disabled { opacity: .5; cursor: default; }

/* — JTBD: боль→навык на карточках, навык-тег, матрица навыков в карте — */
.neg-cat-when { font-size: 12.5px; line-height: 1.45; color: var(--text-tertiary); margin-top: 2px; }
.neg-cat-outcome { color: var(--accent-hover); }
.neg-l-skilltag {
  display: block; margin-top: 14px; padding: 10px 14px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid rgba(0,119,255,.25);
  color: var(--text-primary); font-size: 13.5px; line-height: 1.5;
}
.neg-l-skilltag b { color: var(--accent-hover); }
.neg-stage-skill { font-size: 13px; line-height: 1.45; color: var(--text-secondary); margin-top: 5px; }
.neg-stage-where { font-size: 11.5px; line-height: 1.4; color: var(--text-tertiary); margin-top: 2px; }
.neg-spar-card-from { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-tertiary); background: var(--bg-tonal); border-radius: 100px; padding: 2px 8px; }
.neg-spar-card-when { font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); margin: 3px 0; }

/* ═══════════════════════════════════════════════════════════════════
   Кастдев-пересборка: один вход, маршрут, фокус, доступность
   ═══════════════════════════════════════════════════════════════════ */

/* доступность: единый видимый фокус + размер серого текста */
.neg-wrap :focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; border-radius: 6px; }

/* — главная кнопка-вход в герое — */
.neg-hero-cta {
  margin-top: 24px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-on, #fff); border: 0; border-radius: 100px;
  padding: 15px 30px; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
  box-shadow: 0 6px 22px var(--accent-glow); transition: background .15s, transform .12s;
}
.neg-hero-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
/* На вкладке «Живой спарринг» главный синий CTA — это .neg-cfg-start; герой-кнопку гасим в ghost (одна акцентная кнопка на вкладку) */
html[data-neg-mode="spar"] .neg-hero-cta { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-strong); box-shadow: none; font-weight: 600; padding: 13px 26px; }
html[data-neg-mode="spar"] .neg-hero-cta:hover { color: var(--text-primary); border-color: var(--accent); transform: none; background: transparent; }

/* — маршрут «ты здесь» над каталогом — */
.neg-route { margin-bottom: 22px; }
.neg-route-rail { display: flex; gap: var(--sp-2, 8px); }
.neg-route-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; background: transparent; border: 0; cursor: pointer; padding: 4px 2px; font: inherit; color: var(--text-tertiary); }
.neg-route-dot { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: var(--bg-tonal); color: var(--text-secondary); border: 1px solid var(--border-strong); transition: background .15s, color .15s, box-shadow .15s; }
.neg-route-step.is-done .neg-route-dot { background: rgba(47,191,113,.18); color: #2FBF71; border-color: rgba(47,191,113,.4); }
.neg-route-step.is-here .neg-route-dot { background: var(--accent); color: var(--accent-on); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.neg-route-lbl { font-size: 12px; line-height: 1.25; text-align: center; }
.neg-route-step.is-here .neg-route-lbl { color: var(--text-primary); font-weight: 600; }
.neg-route-step:hover .neg-route-lbl { color: var(--text-secondary); }
.neg-route-meta { text-align: center; font-size: 12.5px; color: var(--text-tertiary); margin-top: 12px; }
@media (max-width: 520px) { .neg-route-lbl { font-size: 12px; } .neg-route-dot { width: 32px; height: 32px; } }

/* — карточка каталога: результат вперёд, «вы здесь» — */
.neg-cat-card.is-here { border-color: var(--accent); background: var(--accent-soft); }
.neg-cat-here { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-on, #fff); background: var(--accent); border-radius: 100px; padding: 2px 9px; margin-bottom: 6px; align-self: flex-start; }
.neg-cat-outcome { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-top: 2px; }
.neg-cat-when { font-size: 12.5px; color: var(--text-tertiary); margin-top: 4px; }

/* — шапка урока: «Сценарий N из 4» + «Шаг N из M» — */
.neg-l-head-tw { display: flex; flex-direction: column; }
.neg-l-head-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-hover); font-weight: 700; }
.neg-l-step { flex: 0 0 auto; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* — микроцель и связка с спаррингом — */
.neg-l-todo { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); background: var(--bg-elevated); border-left: 2px solid var(--accent); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.neg-l-spar-link { display: inline-block; margin-top: 14px; background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); border-radius: 100px; padding: 10px 18px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.neg-l-spar-link:hover { border-color: var(--accent); color: var(--text-primary); }

/* — спарринг: AI за ссылкой, рекомендованная карточка — */
.neg-spar-ailink { display: block; width: 100%; margin-top: 16px; background: transparent; border: 1px dashed var(--border-strong); border-radius: 12px; padding: 12px; font: inherit; font-size: 13px; color: var(--text-tertiary); cursor: pointer; text-align: center; }
.neg-spar-ailink:hover { color: var(--text-secondary); border-color: var(--accent); }
/* Серверный прокси включён: это уже не кнопка, а спокойное подтверждение. */
.neg-spar-ailink--on { border-style: solid; border-color: rgba(47,191,113,.45); color: #2FBF71; cursor: default; }
.neg-spar-ailink--on:hover { color: #2FBF71; border-color: rgba(47,191,113,.45); }
.neg-spar-card.is-rec { border-color: var(--accent); }
.neg-spar-card-rec { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-on, #fff); background: var(--accent); border-radius: 100px; padding: 2px 9px; margin-bottom: 5px; align-self: flex-start; }

/* — нецветовые маркеры вердикта (a11y) — */
.neg-ex-opt.is-good::before { content: '✓ '; font-weight: 700; color: #2FBF71; }
.neg-ex-opt.is-bad::before { content: '✗ '; font-weight: 700; color: #E2604A; }
.neg-ex-opt.is-mid::before { content: '~ '; font-weight: 700; color: #E0A93B; }

/* — гибрид типов: деловое имя крупно, код мелко — */
.neg-c-typebtn-id { font-size: 14px; }
.neg-c-typebtn-name { font-size: 10.5px; opacity: .75; }

/* — вводный экран первого визита (диагностика по боли) — */
/* Оверлей прокручивается и не центрирует карточку жёстко: при системном
   увеличении шрифта (обычные 130–150% на Android) карточка перерастала окно,
   и крестик уезжал выше экрана — вводное окно нельзя было ни дочитать, ни
   закрыть. align-items:flex-start + overflow-y:auto возвращают прокрутку. */
.neg-onb { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: rgba(10,11,13,.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: negOnbIn .25s ease; }
@media (min-height: 700px) { .neg-onb { align-items: center; } }
@keyframes negOnbIn { from { opacity: 0; } to { opacity: 1; } }
.neg-onb-card { position: relative; width: 100%; max-width: 560px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 20px; padding: 28px 26px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.neg-onb-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-hover); margin-bottom: 12px; }
.neg-onb-value { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.neg-onb-sub { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin-top: 8px; }
.neg-onb-q { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 20px 0 12px; }
.neg-onb-opts { display: flex; flex-direction: column; gap: 9px; }
.neg-onb-opt { text-align: left; background: var(--bg-elevated); border: 1.5px solid var(--border-strong); border-radius: 12px; padding: 13px 15px; color: var(--text-primary); font: inherit; font-size: 14px; line-height: 1.4; cursor: pointer; transition: border-color .13s, background .13s, transform .1s; }
.neg-onb-opt:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateX(2px); }
.neg-onb-skip { margin-top: 16px; width: 100%; background: transparent; border: 0; color: var(--text-tertiary); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px; }
.neg-onb-skip:hover { color: var(--text-primary); }
@media (max-width: 520px) { .neg-onb { padding: 12px 0; } .neg-onb-card { max-width: none; border-radius: 0; padding: 24px 18px; } }

/* «Тебе сюда» — зелёным, отличать от синего «Вы здесь».
   Подпись .neg-cat-here белая, а белым по #2FBF71 — 2.38:1: надпись на
   пилюле пропадала. Тёмная тушь по светлой зелени даёт 7.17:1 (тот же
   приём, что у номера верного ответа .neg-opt-num). */
.neg-cat-reco { background: #2FBF71; color: #04210f; }
.neg-cat-card.is-reco { border-color: #2FBF71; }


/* ═══════════════════════════════════════════════════════════════════
   ЦЕЛИ КАСАНИЯ — правило 48
   Замер по разделу дал дюжину целей ниже нормы: «← Сценарии» и «← К выбору»
   по 32 dp, «Дальше» 39, ворота 43, вкладки режима 45, отправка 44, фазы
   дуги 30. 44 — норма iPhone; на Android минимум 48×48 с зазором 8, и
   промахи по 30-точечной фазе дуги ловились руками, а не замером.
   Здесь добирается только НАЖИМАЕМАЯ высота: паддинги и кегли не тронуты,
   вид кнопок прежний — просто пальцу есть куда попасть.
   ═══════════════════════════════════════════════════════════════════ */
.neg-l-back, .neg-spar-back,
.neg-next, .neg-btn, .neg-guide-btn, .neg-gate,
.neg-mode-tab, .neg-c-tab,
.neg-cfg-start, .neg-hero-cta,
.neg-onb-opt, .neg-onb-skip,
.neg-spar-chip, .neg-spar-key-save, .neg-spar-key-link,
.neg-guide-seg, .neg-route-step {
  min-height: var(--cel-min, 48px);
}
/* Кнопки, у которых подпись стояла бы верхом на верхнем крае добранной
   высоты: центруем содержимое, иначе добор виден как съехавший текст. */
.neg-l-back, .neg-spar-back, .neg-c-tab, .neg-mode-tab,
.neg-spar-key-save, .neg-spar-key-link {
  display: inline-flex; align-items: center; justify-content: center;
}
.neg-spar-chip { display: inline-flex; align-items: center; }
/* Отправка сообщения — круг: растёт вместе с высотой, иначе выйдет овал. */
.neg-spar-send { width: var(--cel-min, 48px); height: var(--cel-min, 48px); }
/* ФАБ «Отзыв» на телефоне сжимается до иконки — 44×40; добираем обе стороны. */
@media (max-width: 640px) {
  .neg-fab-fb { min-width: var(--cel-min, 48px); min-height: var(--cel-min, 48px);
    justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME — html[data-theme='light']
   Token overrides + every hardcoded-color override from trainer.css.
   Paste AFTER the inline :root and after trainer.css is loaded.

   Palette of AA-safe "as-text" colors used below (verified on #FFFFFF
   and on every tinted pill they actually sit on, normal-text ≥ 4.5:1):
     green  #147A3C  (white 5.41 · 18% green-pill 4.64)
     amber  #8A6100  (white 5.54 · 18% amber-pill 4.88)
     cyan   #006B7D  (white 6.18)  → this is also --accent-2
     red    #B5371F  (white 5.95 · 16% red-pill 4.94)
     ред-ХА #B5481F  (white 5.37)
     purple #7C45D6  (white 5.71)
     blue   #1F6FCB  (white 5.01)  / accent-hover #0058B8 (white 6.80)
   ═══════════════════════════════════════════════════════════════════ */

html[data-theme='light'] {
  --bg-base:        #F5F5F7;
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-tonal:       #ECEEF1;

  --text-primary:   #0D1B2A;
  --text-secondary: #3D4852;
  --text-tertiary:  #6E7781;

  --border:         rgba(0, 0, 0, 0.08);
  --border-strong:  rgba(0, 0, 0, 0.14);

  --accent:         #0071E3;
  --accent-hover:   #0058B8;
  --accent-soft:    rgba(0, 119, 255, 0.10);
  --accent-glow:    rgba(0, 119, 255, 0.22);
  --accent-on:      #FFFFFF;

  /* accent-2 doubles as the "пример" border + label TEXT → must pass AA */
  --accent-2:       #006B7D;
}

/* page background (replaces dark radial-gradient on html/body) */
html[data-theme='light'] {
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(0, 119, 255, 0.06) 0%, transparent 60%),
    var(--bg-base);
}

/* eyebrow / accent-tinted pill borders — slightly stronger on white */
html[data-theme='light'] .neg-eyebrow { border-color: rgba(0,119,255,0.28); }

/* липкая шапка урока — светлый полупрозрачный фон под блюром */
html[data-theme='light'] .neg-l-head { background: rgba(245,245,247,.96); }

/* ── гид по дуге: per-phase accent vars used as TEXT (badge, lbl--you, dot) ── */
html[data-theme='light'] .neg-guide-seg--вход       { --gcol: #006B7D; }
html[data-theme='light'] .neg-guide-seg--нарастание { --gcol: var(--accent-hover); }
html[data-theme='light'] .neg-guide-seg--вершина    { --gcol: #8A6100; }
html[data-theme='light'] .neg-guide-seg--спад       { --gcol: #7C45D6; }
html[data-theme='light'] .neg-guide-seg--итог       { --gcol: #147A3C; }
html[data-theme='light'] .neg-guide-card--вход       { --gcol: #006B7D; }
html[data-theme='light'] .neg-guide-card--нарастание { --gcol: var(--accent-hover); }
html[data-theme='light'] .neg-guide-card--вершина    { --gcol: #8A6100; }
html[data-theme='light'] .neg-guide-card--спад       { --gcol: #7C45D6; }
html[data-theme='light'] .neg-guide-card--итог       { --gcol: #147A3C; }
/* badge bg was a subtle white tint (rgba(255,255,255,.05)) → invisible on
   white; swap to a light grey tint so the pill reads */
html[data-theme='light'] .neg-guide-badge { background: rgba(0,0,0,.04); }

/* ── карта 12 стадий: per-group left-border (decorative ≥3:1 ok) + num TEXT ── */
html[data-theme='light'] .neg-stage--вход      { border-left-color: #006B7D; }
html[data-theme='light'] .neg-stage--вершина   { border-left-color: #8A6100; }
html[data-theme='light'] .neg-stage--спад      { border-left-color: #7C45D6; }
html[data-theme='light'] .neg-stage--итог      { border-left-color: #147A3C; }
html[data-theme='light'] .neg-stage--вход      .neg-stage-num { color: #006B7D; }
html[data-theme='light'] .neg-stage--вершина   .neg-stage-num { color: #8A6100; }
html[data-theme='light'] .neg-stage--итог      .neg-stage-num { color: #147A3C; }

/* ── памятка: режим-маркеры (left-border only) ── */
html[data-theme='light'] .neg-memo-mode--ok  { border-left-color: #147A3C; }
html[data-theme='light'] .neg-memo-mode--mid { border-left-color: #8A6100; }
html[data-theme='light'] .neg-memo-mode--no  { border-left-color: #B5371F; }

/* ── ситуационный экзамен: вариант-чипы — полоска слева (AA-цвета на белом) ── */
html[data-theme='light'] .neg-ex-opt.is-good { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #147A3C; }
html[data-theme='light'] .neg-ex-opt.is-mid  { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #8A6100; }
html[data-theme='light'] .neg-ex-opt.is-bad  { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #B5371F; }
html[data-theme='light'] .neg-ex-opt.is-good::before { color: #147A3C; }
html[data-theme='light'] .neg-ex-opt.is-mid::before  { color: #8A6100; }
html[data-theme='light'] .neg-ex-opt.is-bad::before  { color: #B5371F; }
/* feedback verdict TEXT (on white card) */
html[data-theme='light'] .neg-ex-fb.is-good .neg-ex-fb-v { color: #147A3C; }
html[data-theme='light'] .neg-ex-fb.is-mid  .neg-ex-fb-v { color: #8A6100; }
html[data-theme='light'] .neg-ex-fb.is-bad  .neg-ex-fb-v { color: #B5371F; }
/* «как лучше» врезка: green text on 10% green tint */
html[data-theme='light'] .neg-ex-fb-good   { background: rgba(47,191,113,.10); border-left-color: #147A3C; }
html[data-theme='light'] .neg-ex-fb-good b { color: #147A3C; }

/* ── дрилл: варианты — полоска слева ── */
html[data-theme='light'] .neg-opt.is-correct { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #147A3C; }
/* solid green badge: white text needs #147A3C (white-on-#1F8F50 = 4.12 FAIL) */
html[data-theme='light'] .neg-opt.is-correct .neg-opt-num { background: #147A3C; color: #FFFFFF; }
html[data-theme='light'] .neg-opt.is-wrong { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #B5371F; }
html[data-theme='light'] .neg-opt.is-wrong .neg-opt-num { background: #B5371F; color: #FFFFFF; }
html[data-theme='light'] .neg-drill-fb.is-ok .neg-fb-verdict { color: #147A3C; }
html[data-theme='light'] .neg-drill-fb.is-no .neg-fb-verdict { color: #B5371F; }

/* ── тренажёр «Вход в контакт»: 4 типа — --tcol used as TEXT (.neg-c-type-id, lbl) ── */
html[data-theme='light'] .neg-c-type--ХА { --tcol: #B5481F; }
html[data-theme='light'] .neg-c-type--ФО { --tcol: #1F6FCB; }
html[data-theme='light'] .neg-c-type--ЦИ { --tcol: #7C45D6; }
html[data-theme='light'] .neg-c-type--ШЭ { --tcol: #147A3C; }
html[data-theme='light'] .neg-c-type-lbl--no { color: #B5371F; }
/* конструктор: уровни — AA-бордюры на светлом */
html[data-theme='light'] .neg-cfg-level--easy.is-on   { border-color: #147A3C; background: rgba(47,191,113,.14); }
html[data-theme='light'] .neg-cfg-level--medium.is-on { border-color: #8A6100; background: rgba(224,169,59,.16); }
html[data-theme='light'] .neg-cfg-level--hard.is-on   { border-color: #B5371F; background: rgba(226,96,74,.14); }
/* type-answer buttons — полоска слева */
html[data-theme='light'] .neg-c-typebtn.is-correct { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #147A3C; }
html[data-theme='light'] .neg-c-typebtn.is-wrong   { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #B5371F; }
/* open-answer buttons — полоска слева */
html[data-theme='light'] .neg-c-openbtn.is-resonate { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #147A3C; }
html[data-theme='light'] .neg-c-openbtn.is-neutral  { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #8A6100; }
html[data-theme='light'] .neg-c-openbtn.is-repel    { border-color: var(--border-strong); box-shadow: inset 4px 0 0 0 #B5371F; }
/* feedback left-borders */
html[data-theme='light'] .neg-c-fb.is-ok  { border-left-color: #147A3C; }
html[data-theme='light'] .neg-c-fb.is-no  { border-left-color: #B5371F; }
html[data-theme='light'] .neg-c-fb.is-mid { border-left-color: #8A6100; }

/* ── каталог: «готово» номер (green text on 16% green tint) ── */
html[data-theme='light'] .neg-cat-card.is-done .neg-cat-num { background: rgba(47,191,113,.16); color: #147A3C; border-color: rgba(47,191,113,.40); }
/* accent-tinted num border on white */
html[data-theme='light'] .neg-cat-num { border-color: rgba(0,119,255,.28); }

/* ── урок: пример (accent-2 = #006B7D handles border + label via token) ── */
/* takeaway: 10% green tint, green label + bold text */
html[data-theme='light'] .neg-l-takeaway     { background: rgba(47,191,113,.10); border-color: rgba(47,191,113,.30); }
html[data-theme='light'] .neg-l-takeaway-lbl   { color: #147A3C; }
html[data-theme='light'] .neg-l-takeaway-txt b { color: #147A3C; }

/* ── гейт «Дальше»: pulse glow + «использован» state ── */
html[data-theme='light'] .neg-gate.is-used { background: rgba(47,191,113,.14); color: #147A3C; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme='light'] .neg-gate.is-ready { animation: negGatePulseLight 2.2s ease-in-out infinite; }
}
@keyframes negGatePulseLight {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,119,255,.20); }
  50%      { box-shadow: 0 6px 22px rgba(0,119,255,.34); }
}

/* ── итог сценария: бейдж (green TEXT on 12% green pill) ── */
html[data-theme='light'] .neg-l-sum-badge { color: #147A3C; background: rgba(47,191,113,.12); border-color: rgba(47,191,113,.32); }

/* ── скилл-тег (accent-soft pill, accent-hover bold) ── */
html[data-theme='light'] .neg-l-skilltag { border-color: rgba(0,119,255,.25); }

/* ── спарринг: «мой» пузырь + бордюр ── */
html[data-theme='light'] .neg-spar-msg--me .neg-spar-bubble { border-color: rgba(0,119,255,.30); }
/* метр настроения: darken gradient stops for visibility on light track */
html[data-theme='light'] .neg-spar-meter-fill { background: linear-gradient(90deg, #B5371F, #8A6100 50%, #147A3C); }
/* coach inline verdicts (TEXT) */
html[data-theme='light'] .neg-spar-coach--good { color: #147A3C; }
html[data-theme='light'] .neg-spar-coach--bad  { color: #B5371F; }
html[data-theme='light'] .neg-spar-coach--mid  { color: #8A6100; }
/* debrief left-borders */
html[data-theme='light'] .neg-spar-debrief--good { border-left-color: #147A3C; }
html[data-theme='light'] .neg-spar-debrief--bad  { border-left-color: #B5371F; }
html[data-theme='light'] .neg-spar-debrief--mid  { border-left-color: #8A6100; }
/* BYOK key ok (TEXT) */
html[data-theme='light'] .neg-spar-key-ok { color: #147A3C; }
/* AI error block (red TEXT on 10% red tint) */
html[data-theme='light'] .neg-spar-aierr { color: #B5371F; background: rgba(226,96,74,.10); border-color: rgba(226,96,74,.30); }
/* coach avatar shadow softer on light */
html[data-theme='light'] .neg-coach-av svg { box-shadow: 0 2px 10px rgba(0,119,255,.25); }

/* ── маршрут «ты здесь» ── */
html[data-theme='light'] .neg-route-step.is-done .neg-route-dot { background: rgba(47,191,113,.18); color: #147A3C; border-color: rgba(47,191,113,.42); }
html[data-theme='light'] .neg-route-step.is-here .neg-route-dot { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ── каталог-метки «Вы здесь» (синий) / «Тебе сюда» (зелёный) ── */
html[data-theme='light'] .neg-cat-card.is-here { border-color: var(--accent); background: var(--accent-soft); }
/* .neg-cat-reco is a SOLID green pill carrying white .neg-cat-here text →
   white-on-#1F8F50 = 4.12 (FAIL) and white-on-#2FBF71 = 2.38 (FAIL).
   Use #147A3C so white text clears AA (5.41). */
/* Цвет подписи здесь обязателен: в тёмной теме .neg-cat-reco перекрасил её
   в тёмную тушь, а по тёмно-зелёному #147A3C та даёт 3.15:1. Белым — 5.41. */
html[data-theme='light'] .neg-cat-reco         { background: #147A3C; color: #FFFFFF; }
html[data-theme='light'] .neg-cat-card.is-reco { border-color: #147A3C; }
/* .neg-cat-here / .neg-spar-card-rec keep --accent-on white text on --accent
   bg → white-on-#0071E3 = 4.70 ok */

/* ── наставник-карточка (accent-soft bg, light border) ── */
html[data-theme='light'] .neg-l-coach { border-color: rgba(0,119,255,.20); }

/* ── онбординг-оверлей: тёмный скрим → светлее, тени мягче ── */
html[data-theme='light'] .neg-onb      { background: rgba(13,27,42,.45); }
.neg-onb-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  border: 0; background: none; color: var(--text-muted); font-size: 18px;
  cursor: pointer; border-radius: 50%; }
.neg-onb-x:hover { color: var(--text-primary); background: var(--bg-tonal); }
html[data-theme='light'] .neg-onb-card { box-shadow: 0 20px 60px rgba(13,27,42,.20); }

/* ── мелкие тени, объявленные в трейнере на тёмном ── */
html[data-theme='light'] .neg-hero-cta { box-shadow: 0 6px 22px var(--accent-glow); }