:root{--bg:#f6f7f9;--card:#fff;--line:#e6e8ec;--tx:#1c2230;--mut:#6b7280;--acc:#0e7a5f;--warn:#b23b3b;--hdr-h:56px;
  /* №174: заливка шапки таблиц — мягкий тон акцента, чтобы заголовки читались как шапка */
  --head-bg:#eef5f2;--head-fg:#12452f}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 -apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--tx);background:var(--bg)}
/* верхняя панель (навигация) закреплена — переход между разделами без прокрутки вверх (просьба Лукаша).
   Фон непрозрачный тёмный, поэтому контент под ней не просвечивает. z-index выше таблиц/фильтров. */
/* Шапка — ДВА явных ряда (правка Сергея 22.07: раньше brand/nav/user переносились как придётся
   и выглядели неаккуратно). Ряд 1 — кто вошёл и помощь, ряд 2 — навигация. */
header{display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:10px 20px;background:#0f1720;color:#fff;position:sticky;top:0;z-index:20}
.hdr-top{display:flex;align-items:center;gap:14px;min-height:24px}
.brand{font-weight:700}.brand span{font-weight:400;color:#9aa4b2;margin-left:6px;font-size:12px}
/* меню переносится: с 11-м пунктом («Проверка ответов») на 1280px «Как пользоваться»
   и блок пользователя уезжали за край экрана. Высоту шапки пересчитывает JS в base.html. */
nav{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
nav a{color:#c7cdd6;text-decoration:none;padding:6px 12px;border-radius:7px}
nav a:hover{background:#1b2733}nav a.on{background:#0e7a5f;color:#fff}
.user-box{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12px;color:#c7cdd6}
.user-box .ue{color:#fff}
.user-box .logout{color:#9aa4b2;text-decoration:none;border:1px solid #2a3947;padding:4px 10px;border-radius:7px}
.user-box .logout:hover{background:#1b2733;color:#fff}
/* страница входа */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#0f1720;padding:20px}
.login-card{background:var(--card);border-radius:14px;padding:30px 28px;width:100%;max-width:360px;box-shadow:0 10px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:14px}
.login-brand{font-size:22px;font-weight:800;text-align:center}
.login-sub{font-size:12px;color:var(--mut);text-align:center;margin-top:-8px}
.login-card label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--mut)}
.login-card input{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff;color:#1c2230}
.login-card button{margin-top:6px;padding:11px;border:0;border-radius:8px;background:var(--acc);color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.login-card button:hover{background:#0c6650}
.login-err{background:#fdecea;color:#c0392b;border:1px solid #f3cdc7;border-radius:8px;padding:9px 12px;font-size:13px;text-align:center}
/* панель фильтров тоже закреплена — прилипает ПОД шапкой (top = её высота), чтобы фильтры были
   под рукой при прокрутке длинных списков (просьба Лукаша). Фон непрозрачный (--card), z-index ниже
   шапки (20), но выше контента. --hdr-h держит JS в base.html (высота шапки меняется при переносе меню). */
/* ── Раскладка: фильтры вынесены в боковую панель (правка Сергея 22.07) ──
   Раньше фильтры были широкой полосой над таблицей и съедали первый экран. */
.layout{display:flex;align-items:flex-start;gap:0}
.sidebar{flex:0 0 236px;width:236px;position:sticky;top:var(--hdr-h);align-self:flex-start;
  max-height:calc(100vh - var(--hdr-h));overflow:auto;background:var(--card);
  border-right:1px solid var(--line);padding:16px 14px 26px}
.sidebar:not(:has(*)){display:none}          /* страницы без фильтров (карточка диалога) */
.layout>main{flex:1;min-width:0}
.filters{display:flex;flex-direction:column;align-items:stretch;gap:13px;padding:0;background:none;border:0;position:static}
.filters>label,.filters>div{width:100%}
.filters label{display:flex;flex-direction:column;font-size:11px;color:var(--mut);gap:3px}
.filters input,.filters select{padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px;background:#fff;width:100%;box-sizing:border-box}
.filters button{padding:8px 16px;border:0;border-radius:7px;background:var(--acc);color:#fff;font-weight:600;cursor:pointer;width:100%}
.sidebar .msel summary{width:100%;box-sizing:border-box}
/* Пары дат («Период A: с — по») в 236 px в строку не влезают и обрезаются слева —
   в боковой панели ставим их в столбик, разделитель «–» прячем. */
@media(min-width:1001px){
  .sidebar .filters fieldset{display:flex;flex-direction:column;gap:5px;width:100%;min-width:0;
    margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
  .sidebar .filters fieldset input{width:100%}
  .sidebar .filters .dash{display:none}
}
main{padding:20px;max-width:1180px;margin:0 auto}

/* Узкий экран — возвращаем прежнюю горизонтальную полосу, боковая панель тут только мешала бы */
@media(max-width:1000px){
  .layout{flex-direction:column}
  .sidebar{position:static;flex:none;width:auto;max-height:none;border-right:0;
    border-bottom:1px solid var(--line);padding:12px 20px}
  .filters{flex-direction:row;flex-wrap:wrap;align-items:end;gap:12px}
  .filters>label,.filters>div{width:auto}
  .filters input,.filters select,.filters button{width:auto}
}
h2{font-size:16px;margin:6px 0 12px}
.cnt{background:#eef1f4;color:var(--mut);font-size:12px;padding:1px 8px;border-radius:10px;margin-left:6px;font-weight:400}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.tile .k{font-size:12px;color:var(--mut)}.tile .v{font-size:24px;font-weight:700;margin-top:4px}
.tile.warn .v{color:var(--warn)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}
/* ⚠️ У секции НЕТ overflow: любой overflow (auto/hidden/clip) делает её контейнером прокрутки,
   и sticky-шапка таблицы начинает липнуть к секции, а не к окну. Проверено: пара
   `overflow-x:auto; overflow-y:clip` по спецификации сводится к `hidden` — не помогает.
   Горизонтальную прокрутку широких таблиц забирает обёртка .twrap (её вешает JS в base.html). */
section{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--mut);font-weight:600;border-bottom:2px solid var(--line);padding:7px 8px;white-space:nowrap}
/* Закреплённая шапка таблиц — во ВСЕЙ системе (правка Сергея 22.07).
   Страница прокручивается как обычно, а заголовок раздела и строка колонок липнут к окну
   под меню. ⚠️ Работает ТОЛЬКО пока ни у одного предка нет overflow: любой (auto/hidden/clip)
   делает предка контейнером прокрутки, и шапка начинает липнуть к нему, а не к окну.
   Поэтому у section/.cl-card overflow снят. Широкие таблицы — см. .scrollx ниже. */
.stick-h{position:sticky;top:var(--hdr-h);z-index:6}
main > .stick-h{background:var(--bg);padding:8px 0 8px;margin:0 0 8px}
section > .stick-h,.cl-card > .stick-h{background:var(--card);margin:-14px -16px 8px;padding:12px 16px 8px}
/* смещение строки колонок = меню + высота залипшего заголовка (её меряет JS в base.html:
   у разделов заголовки разной высоты, «на глаз» не подобрать) */
/* №174 (Ульяна 28.07): «в шапке тоже выделим цветом, для наглядности» — залитая шапка
   отделяет заголовки от данных в длинных таблицах и не даёт потерять строку при прокрутке. */
thead th{position:sticky;top:calc(var(--hdr-h) + var(--sec-h,0px));z-index:5;background:var(--head-bg);
  color:var(--head-fg);box-shadow:0 1px 0 var(--line),0 3px 8px rgba(0,0,0,.06)}
/* Широкие таблицы прокручиваются вбок в своей обёртке: внутри неё шапка к окну липнуть
   не может (overflow предка перехватывает sticky). Осознанный размен. */
.scrollx thead th{position:static;box-shadow:none}
/* …кроме «рамки» (.scrollx.frame, №133 Ульяны): у неё ограничена высота, поэтому таблица
   прокручивается внутри себя — и вбок, и вниз. Тогда sticky снова работает, но липнет к
   рамке (top:0), а не к окну: шапка колонок и колонка с именем всегда на виду. */
.scrollx.frame{max-height:calc(100vh - var(--hdr-h) - 150px);overflow:auto;
  /* №175 (Ульяна 28.07: «какой-то баг, не могу прокрутить нормально»). Бага не было: браузер
     рисует полосы прокрутки поверх содержимого, и в рамке с 780 строками и шириной вдвое
     больше экрана их попросту не видно. Делаем полосы всегда видимыми и толще. */
  scrollbar-width:auto;scrollbar-color:#9aa6b2 #eef1f4;overscroll-behavior:contain}
.scrollx.frame::-webkit-scrollbar{width:14px;height:14px}
.scrollx.frame::-webkit-scrollbar-track{background:#eef1f4;border-radius:8px}
.scrollx.frame::-webkit-scrollbar-thumb{background:#9aa6b2;border-radius:8px;border:3px solid #eef1f4}
.scrollx.frame::-webkit-scrollbar-thumb:hover{background:#7b8794}
.scrollx.frame thead th{position:sticky;top:0;z-index:5;background:var(--head-bg);
  color:var(--head-fg);box-shadow:0 1px 0 var(--line),0 3px 8px rgba(0,0,0,.06)}
.scrollx.frame tbody td:first-child{position:sticky;left:0;z-index:4;background:var(--card);
  box-shadow:1px 0 0 var(--line)}
.scrollx.frame thead th:first-child{left:0;z-index:6;box-shadow:1px 1px 0 var(--line),0 3px 8px rgba(0,0,0,.06)}
.scrollx.frame tr:hover td:first-child{background:#fafbfc}
/* №190 (Ульяна 30.07): «хочется рядом с ФИО столбец с номером телефона перенести и закрепить
   эти два столбца при движении вправо». В «Ведении ЧК» первая колонка — «№» (волна 16), поэтому
   держим три: № + ФИО + телефон. Модификатор .stick3, а не общее правило: ту же рамку использует
   вкладка «Оценки HF», там закреплённой должна остаться одна колонка.
   Смещения `left` проставляет скрипт по фактической ширине: ширина ФИО зависит от данных,
   зашитая в CSS цифра рано или поздно даст наложение колонок. */
.scrollx.frame.stick3 tbody td:nth-child(-n+3){position:sticky;z-index:4;background:var(--card)}
.scrollx.frame.stick3 thead th:nth-child(-n+3){z-index:6}
.scrollx.frame.stick3 tbody td:nth-child(3),
.scrollx.frame.stick3 thead th:nth-child(3){box-shadow:1px 0 0 var(--line)}
.scrollx.frame.stick3 tbody td:nth-child(1),.scrollx.frame.stick3 tbody td:nth-child(2){box-shadow:none}
.scrollx.frame.stick3 tr:hover td:nth-child(-n+3){background:#fafbfc}
.scrollx.frame.stick3 tr.ks-back td:nth-child(-n+3){background:#fff3cd}
/* Ширины закреплённой тройки задаём жёстко: без них авто-раскладка отдавала телефону полэкрана,
   и на закреплённое уходила половина видимой ширины — прокручивать становилось нечего. */
.scrollx.frame.stick3 th:nth-child(1),.scrollx.frame.stick3 td:nth-child(1){
  width:34px;min-width:34px;max-width:34px}
.scrollx.frame.stick3 th:nth-child(2),.scrollx.frame.stick3 td:nth-child(2){
  width:186px;min-width:186px;max-width:186px}
/* у части клиентов в 1С два номера через запятую — даём им перенос, а не растягивание колонки */
.scrollx.frame.stick3 th:nth-child(3),.scrollx.frame.stick3 td:nth-child(3){
  width:152px;min-width:152px;max-width:152px;white-space:normal}
td{border-bottom:1px solid var(--line);padding:7px 8px}
tr:hover td{background:#fafbfc}
/* №176: строка, из которой уходили в карточку — подсвечена несколько секунд после возврата,
   чтобы не искать её глазами. Закреплённую первую колонку подсвечиваем отдельно: у неё свой
   непрозрачный фон (иначе имя осталось бы белым посреди жёлтой строки). */
tr.ks-back td,.scrollx.frame tr.ks-back td:first-child{background:#fff3cd}
tr.ks-back td:first-child{box-shadow:inset 3px 0 0 var(--acc),1px 0 0 var(--line)}
/* …и плашка «вы там, где остановились»: без неё возврат посреди списка читается как «прыгает» */
.ks-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;display:flex;
  align-items:center;gap:10px;background:#0f1720;color:#fff;padding:9px 14px;border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.28);font-size:13px;transition:opacity .5s}
.ks-hint.ks-off{opacity:0}
.ks-hint button{background:transparent;color:#7fd3b6;border:1px solid #2a3947;border-radius:7px;
  padding:4px 10px;font-size:12px;cursor:pointer}
.ks-hint button:hover{background:#1b2733}
a{color:var(--acc)}
.warn-cell{color:var(--warn);font-weight:700}
/* якорь #cohorts не должен уезжать под залипшую шапку — иначе фильтры секции не видно */
#cohorts{scroll-margin-top:calc(var(--hdr-h) + 12px)}

/* №149: фильтры сводной по когортам живут в основной колонке, а не в боковой панели,
   поэтому раскладка своя — строкой, а не столбиком (как у .filters сайдбара). */
.co-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin:0 0 14px}
.co-form label{display:flex;flex-direction:column;font-size:11px;color:var(--mut);gap:3px}
.co-form input,.co-form select{padding:6px 8px;border:1px solid var(--line);border-radius:7px;
  font-size:13px;background:#fff}
.co-form button{padding:8px 16px;border:0;border-radius:7px;background:var(--acc);color:#fff;
  font-weight:600;cursor:pointer}
.co-form .msel summary{min-width:120px}

/* №136: блоки информирования в строке «Ведения ЧК» — закрашен = о теме уже рассказали.
   Пунктир = отметка поставлена руками (лично/по телефону), сплошной = видно в переписке. */
.ib{display:inline-block;min-width:24px;text-align:center;font-size:10px;line-height:14px;
  padding:1px 3px;margin:1px;border:1px solid var(--line);border-radius:4px;color:var(--mut);background:#fff}
.ib-on{background:#1f9d6b;border-color:#1f9d6b;color:#fff}
.ib-man{border-style:dashed}
.note{color:var(--mut);font-size:12px;margin-top:10px}
/* №170: цветная плашка статуса и вида тренировки в «Оценках HF». Имя своё: .chip и .pill
   в этом файле уже заняты другими блоками, и переопределение ниже съело бы цвет. */
.hf-pill{display:inline-block;padding:2px 8px;border-radius:9px;color:#fff;font-size:11px;font-weight:600;white-space:nowrap}
.score{display:inline-block;min-width:22px;text-align:center;padding:1px 6px;border-radius:6px;font-weight:700;color:#fff}
.s-good{background:#1f9d6b}.s-mid{background:#d68a1e}.s-bad{background:#c0392b}.s-none{background:#9aa4b2}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:16px}
.pager a{text-decoration:none;padding:5px 10px;border:1px solid var(--line);border-radius:7px;background:#fff}
.pager .cur{color:var(--mut)}
.back{display:inline-block;margin-bottom:12px;text-decoration:none}
.dialog-head{display:flex;justify-content:space-between;gap:20px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.dialog-head .meta{color:var(--mut);font-size:12px;margin-top:6px}
.verdict{min-width:260px;max-width:400px;border-radius:10px;padding:14px;color:#fff;display:flex;gap:12px;align-items:flex-start}
.verdict.s-good{background:#1f9d6b}.verdict.s-mid{background:#d68a1e}.verdict.s-bad{background:#c0392b}.verdict.s-none{background:#8a94a2}
.verdict .big{font-size:30px;font-weight:800;line-height:1}.verdict .big span{font-size:13px;font-weight:500;opacity:.8}
.verdict .vtext{font-size:12.5px;opacity:.97;white-space:pre-line;line-height:1.45}
.verdict .vtype{display:inline-block;background:rgba(255,255,255,.22);border-radius:6px;padding:1px 8px;margin-bottom:6px;font-size:11px;font-weight:600}
.breakdown{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.breakdown .bd-head{font-weight:700;margin-bottom:10px}
.breakdown .bd-head span{font-weight:400;color:var(--mut);font-size:12px;margin-left:8px}
.breakdown table{width:100%;border-collapse:collapse;font-size:13px}
.breakdown th{text-align:left;color:var(--mut);font-weight:600;font-size:11px;text-transform:uppercase;padding:4px 8px;border-bottom:1px solid var(--line)}
.breakdown td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.breakdown td.w{text-align:center;color:var(--mut);width:44px}
.breakdown td.sc{white-space:nowrap;width:74px}
.breakdown td.note{color:#444}
.breakdown .s1{color:#1f9d6b;font-weight:600}.breakdown .s05{color:#d68a1e;font-weight:600}
.breakdown .s0{color:#c0392b;font-weight:600}.breakdown .na{color:#9aa4b0}
@media (prefers-color-scheme:dark){
  :root{--head-bg:#16302a;--head-fg:#cfe9dd}.breakdown td.note{color:#c9d2dc}}
/* drill-down: кликабельные плитки, ссылки в таблицах, чипы фильтров */
a.tile{text-decoration:none;color:inherit;transition:transform .08s,box-shadow .08s}
a.tile:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.10);border-color:#1f9d6b}
table td a{color:inherit;text-decoration:none;border-bottom:1px dashed transparent}
table td a:hover{color:#1f9d6b;border-bottom-color:#1f9d6b}
h2 .hint,h3 .hint{font-size:11px;font-weight:400;color:var(--mut);margin-left:8px}
.fchips{margin-left:10px;font-size:13px;font-weight:400}
.chip{display:inline-block;background:#e8f5ee;color:#1f7a54;border-radius:20px;padding:2px 10px;margin-right:6px}
.chip.warn{background:#fdecea;color:#c0392b}
.chip-x{color:var(--mut);text-decoration:none;font-size:12px}
.chip-x:hover{color:#c0392b}
@media (prefers-color-scheme:dark){.chip{background:#123528;color:#7fe0b3}.chip.warn{background:#3a1d1a;color:#f0a79c}}
tfoot .total-row td{border-top:2px solid var(--line);font-weight:700;background:rgba(0,0,0,.02)}
@media (prefers-color-scheme:dark){tfoot .total-row td{background:rgba(255,255,255,.04)}}
.chat{display:flex;flex-direction:column;gap:8px;max-width:760px}
.msg{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;max-width:78%}
.msg.client{align-self:flex-start;background:#fff}
.msg.operator{align-self:flex-end;background:#e9f6f0;border-color:#cfe9df}
.msg.bot{align-self:flex-start;background:#f1f2f4;color:var(--mut);font-size:12px}
.msg .who{font-size:11px;color:var(--mut);margin-bottom:2px}.msg .who .ts{margin-left:8px}
.media{color:var(--acc);font-size:12px}
/* пилюли статуса обращения */
.pill{display:inline-block;padding:1px 9px;border-radius:20px;font-size:12px;font-weight:600}
.pill.ok{background:#e8f5ee;color:#1f7a54}.pill.bad{background:#fdecea;color:#c0392b}
@media (prefers-color-scheme:dark){.pill.ok{background:#123528;color:#7fe0b3}.pill.bad{background:#3a1d1a;color:#f0a79c}}
/* разметка обращений внутри переписки + якорь */
.ep-mark{align-self:center;max-width:82%;margin:10px 0 2px;padding:4px 12px;border-radius:20px;font-size:12px;color:var(--mut);background:#eef1f4;border:1px solid var(--line)}
.ep-mark.ep-bad{color:#c0392b;background:#fdecea;border-color:#f3cdc7}
.ep-mark .ep-here{margin-left:8px;font-weight:700;color:var(--acc)}
.ep-target{box-shadow:0 0 0 2px var(--acc);animation:epflash 1.6s ease-out 1}
.msg-target{box-shadow:0 0 0 2px var(--acc)}
@keyframes epflash{0%{box-shadow:0 0 0 4px rgba(14,122,95,.55)}100%{box-shadow:0 0 0 2px var(--acc)}}
@media (prefers-color-scheme:dark){.ep-mark{background:#1b2733;border-color:#2a3947}.ep-mark.ep-bad{background:#3a1d1a;border-color:#5a2a24}}
/* ── страница «Настройки оценки» ── */
.flash{border-radius:10px;padding:10px 14px;margin:10px 0;font-size:13px}
.flash.ok{background:#e8f5ee;color:#1f7a54;border:1px solid #bfe6d2}
.flash.err{background:#fdecea;color:#c0392b;border:1px solid #f3cdc7}
@media (prefers-color-scheme:dark){.flash.ok{background:#123528;color:#7fe0b3;border-color:#1d5540}.flash.err{background:#3a1d1a;color:#f0a79c;border-color:#5a2a24}}
.cfg-sec{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:14px 0}
.cfg-sec h3{font-size:14px;margin:0 0 12px}
.cfg-sec h3 .hint{font-size:11px;font-weight:400;color:var(--mut);margin-left:8px}
.cfg-sec input,.cfg-sec textarea{border:1px solid var(--line);border-radius:7px;padding:6px 8px;font:inherit;font-size:13px;background:#fff;width:100%}
.cfg-sec textarea{resize:vertical}
.thr{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.thr label{display:flex;align-items:center;gap:8px;font-size:13px}
.thr input{width:80px}
.cfg-types td,.cfg-crit td{vertical-align:top}
.cfg-types .k,.cfg-crit .k{color:var(--mut);font-size:11px;font-family:ui-monospace,Menlo,monospace}
.cfg-types td.del,.cfg-crit td.del{white-space:nowrap;font-size:12px;color:var(--mut)}
.scrollx{overflow-x:auto}
.cfg-crit{min-width:900px}
.cfg-crit .cdef{min-width:260px}
.cfg-crit .cname{font-weight:600;margin-bottom:4px}
.cfg-crit .wcol{width:70px;text-align:center}
.cfg-crit .wcol .w{width:52px;text-align:center;padding:6px 4px}
.cfg-crit th.wcol{font-size:11px;white-space:normal;line-height:1.2}
.cfg-crit .crit-col{width:120px;font-size:11px}
.cfg-crit th.crit-col span{font-weight:400;color:var(--mut)}
.crit-col .chk{display:block;margin-bottom:4px}
.crit-col .caps{color:var(--mut);white-space:nowrap}
.cap{width:40px!important;text-align:center;display:inline-block;padding:3px 4px!important}
.newcrit .row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.newcrit label{font-size:12px;color:var(--mut);display:flex;flex-direction:column;gap:3px}
.newcrit .row label{flex-direction:row;align-items:center;gap:6px}
.newcrit label.full{display:block}
.newcrit .wrow{gap:10px}
.newcrit .wlbl{font-size:11px;align-items:center}
.newcrit .wlbl .w{width:54px;text-align:center}
.newcrit .chk{flex-direction:row;align-items:center}
.save-bar{display:flex;gap:14px;align-items:center;position:sticky;bottom:0;background:var(--bg);padding:14px 0;flex-wrap:wrap}
.save-bar button{padding:10px 22px;border:0;border-radius:9px;background:var(--acc);color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.save-bar button:hover{background:#0c6650}
.save-bar .hint{font-size:12px;color:var(--mut)}
/* ── раздел «Отчёты» ── */
.rep-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 20px 0;background:var(--card)}
.rep-presets .lbl{font-size:12px;color:var(--mut);margin-right:4px}
.rep-presets .preset{text-decoration:none;font-size:13px;padding:5px 12px;border:1px solid var(--line);border-radius:20px;color:var(--tx);background:#fff}
.rep-presets .preset:hover{border-color:var(--acc);color:var(--acc)}
.rep-presets .preset.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.rep-dates{align-items:end}
.rep-dates fieldset.slot{border:1px solid var(--line);border-radius:9px;padding:6px 10px 8px;display:flex;align-items:center;gap:4px}
.rep-dates legend{font-size:11px;color:var(--mut);padding:0 4px}
.rep-dates .slot.a legend{color:var(--acc);font-weight:600}
.rep-dates .slot input[type=date]{padding:5px 6px;border:1px solid var(--line);border-radius:6px;font-size:12px}
.rep-dates .con{font-size:11px;color:var(--mut);font-weight:400}
.rep-summary{max-width:820px}
.rep-summary th{white-space:nowrap;text-align:right}
.rep-summary th:first-child{text-align:left}
.rep-summary th span{font-weight:400;color:var(--mut);font-size:11px}
.rep-summary td{text-align:right}
.rep-summary td.mname{text-align:left;font-weight:600}
.rep-summary .col-a{color:var(--acc)}
.valcell .v{font-weight:600}
.delta{display:inline-block;margin-left:8px;font-size:12px;font-weight:700;padding:0 6px;border-radius:5px}
.delta.up{color:#1f9d6b;background:#e8f5ee}
.delta.down{color:#c0392b;background:#fdecea}
.delta.flat{color:var(--mut);background:#eef1f4}
@media (prefers-color-scheme:dark){.delta.up{background:#123528}.delta.down{background:#3a1d1a}.delta.flat{background:#1b2733}}
.rep-bd th,.rep-bd td{text-align:right;white-space:nowrap}
.rep-bd th:first-child,.rep-bd td.mname{text-align:left}
.rep-bd .score{min-width:20px}
/* сгруппированная шапка: колонки под шапкой-интервалом периода */
.rep-bd.grouped th.grp{text-align:center;border-left:2px solid var(--line);font-size:12px;padding:6px 8px}
.rep-bd.grouped th.grp .vs{font-weight:400;color:var(--mut);font-size:10px}
.rep-bd.grouped th.sub{font-size:11px;font-weight:600;color:var(--mut);padding:4px 8px}
.rep-bd.grouped th.grp-a{background:rgba(31,157,107,.09)}
.rep-bd.grouped th.grp-b{background:rgba(47,111,176,.09)}
.rep-bd.grouped th.grp-c{background:rgba(214,138,30,.10)}
.rep-bd.grouped td.numcell{border-left:2px solid var(--line)}
.rep-bd.grouped td.aicell,.rep-bd.grouped td.numcell{text-align:right}
.rep-bd.grouped td.numcell .delta{margin-left:6px}
@media(prefers-color-scheme:dark){.rep-bd.grouped th.grp-a{background:rgba(95,208,160,.10)}.rep-bd.grouped th.grp-b{background:rgba(127,176,224,.10)}.rep-bd.grouped th.grp-c{background:rgba(230,207,90,.10)}}
/* цветные секции отчёта (палитра Иваныча) */
.rep-sec{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:12px;padding:14px 18px;margin:16px 0;overflow:clip}
.rep-sec>h3{font-size:15px;margin:0 0 14px;display:flex;align-items:baseline;gap:10px}
.rep-sec>h3 span{font-size:11px;font-weight:400;color:var(--mut)}
.sec-orange{border-left-color:#e8930f}.sec-orange>h3{color:#b8730a}
.sec-blue{border-left-color:#2f6fb0}.sec-blue>h3{color:#255d96}
.sec-green{border-left-color:#1f9d6b}.sec-green>h3{color:#177853}
.sec-yellow{border-left-color:#d9b407}.sec-yellow>h3{color:#9c8206}
.sec-pink{border-left-color:#c85a7a}.sec-pink>h3{color:#a8425f}
@media(prefers-color-scheme:dark){.sec-orange>h3{color:#f0b45a}.sec-blue>h3{color:#7fb0e0}.sec-green>h3{color:#5fd0a0}.sec-yellow>h3{color:#e6cf5a}.sec-pink>h3{color:#e79db3}}
.rep-cols2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
@media(max-width:820px){.rep-cols2{grid-template-columns:1fr}}
/* SVG-графики */
.chart{display:block;overflow:visible}
.chart .cat{fill:var(--mut);font-size:12px}
.chart .val{fill:var(--tx);font-size:12px;font-weight:600}
.chart-wrap{margin-bottom:14px}
.ch-title{font-size:12px;color:var(--mut);font-weight:600;margin-bottom:8px}
.ch-sub{font-size:11px;color:var(--mut);margin-bottom:4px}
.ch-sub.muted{color:var(--mut);opacity:.7}
.chart-empty{color:var(--mut);font-size:12px;padding:6px 0}
.status-charts .ch-title{margin-bottom:10px}
.scard{margin-bottom:14px}
.scard .sc-h{font-size:12px;color:var(--tx);margin-bottom:5px}
.scard .sc-h b{color:var(--acc)}
.lg-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.lg{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--mut)}
.lg i{width:10px;height:10px;border-radius:2px;display:inline-block}
/* карточки сотрудников */
.emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.emp-card{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--bg)}
.emp-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.emp-h b{font-size:14px}
.emp-m{font-size:12.5px;color:var(--tx);margin-bottom:10px}
.emp-weak .ch-sub{margin-top:2px}
footer{color:var(--mut);font-size:12px;text-align:center;padding:20px}
/* ── кнопка «Как пользоваться» в шапке ── */
.help-btn{margin-left:auto;color:#c7cdd6;text-decoration:none;font-size:12px;border:1px solid #2a3947;padding:5px 11px;border-radius:7px;white-space:nowrap}
.help-btn:hover{background:#1b2733;color:#fff}
.user-box{margin-left:12px}
/* ── тултип-подсказка (P90 и т.п.) ── */
.tip{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--line);color:var(--mut);font-size:10px;font-weight:700;cursor:help;position:relative;vertical-align:middle}
.tip:hover,.tip:focus{background:var(--acc);color:#fff;outline:none}
.tip::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);width:250px;max-width:70vw;background:#0f1720;color:#fff;font-size:12px;font-weight:400;line-height:1.42;padding:9px 11px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;visibility:hidden;transition:opacity .12s;z-index:30;text-align:left}
.tip:hover::after,.tip:focus::after{opacity:1;visibility:visible}
/* ── мелкий шрифт для узких графиков (карточки, слабые места) ── */
.chart.sm .cat{font-size:11px}
.chart.sm .val{font-size:11px}
/* ── нейтральная пилюля «ботом» ── */
.pill.neutral{background:#eef1f4;color:#5a6472}
@media (prefers-color-scheme:dark){.pill.neutral{background:#1b2733;color:#aeb8c4}}
/* ── карточка диалога: закреплённая сводка справа + sticky-шапка ── */
.dlg-topbar{position:sticky;top:var(--hdr-h);z-index:6;display:flex;align-items:center;gap:14px;background:var(--bg);padding:4px 0 10px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.dlg-topbar .back{margin:0}
.dlg-topbar .dlg-name{font-weight:700;font-size:15px}
.dialog-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:20px;align-items:start}
.dlg-summary{position:sticky;top:calc(var(--hdr-h) + 46px);display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - var(--hdr-h) - 62px);overflow:auto}
.dlg-summary .verdict{min-width:0;max-width:none}
.dlg-summary .breakdown{margin-bottom:0}
.sum-meta{color:var(--mut);font-size:12px;line-height:1.5;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.breakdown .cnote{font-size:11px;color:var(--mut);margin-top:3px;line-height:1.35}
@media(prefers-color-scheme:dark){.breakdown .cnote{color:#aeb8c4}}
@media(max-width:900px){.dialog-detail{grid-template-columns:1fr}.dlg-summary{order:-1;position:static;max-height:none;overflow:visible}}
/* ── пометка «отвечено ботом» в переписке ── */
.ep-mark.ep-bot{color:#5a6472;background:#eef1f4;border-color:var(--line)}
@media (prefers-color-scheme:dark){.ep-mark.ep-bot{background:#1b2733;border-color:#2a3947;color:#aeb8c4}}
/* ── фильтр диапазона AI-балла в отчётах ── */
.rep-dates .slot.sf .snum{width:52px;padding:5px 6px;border:1px solid var(--line);border-radius:6px;font-size:12px}
/* ── контролы карточек сотрудников (сорт/фильтр) ── */
.emp-ctl{display:flex;flex-wrap:wrap;gap:16px;align-items:end;margin-bottom:14px}
.emp-ctl label{display:flex;flex-direction:column;font-size:11px;color:var(--mut);gap:3px}
.emp-ctl select{padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px;background:#fff;color:var(--tx)}
.emp-shown{font-size:12px;color:var(--mut);margin-left:auto}
@media(prefers-color-scheme:dark){.emp-ctl select{background:#0f1720;color:#e6eaef}}
/* ── страница «Как пользоваться» ── */
.help-page .lead{color:var(--mut);max-width:72ch;margin:0 0 18px;font-size:14px}
.help-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.help-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.help-card h3{margin:0 0 10px;font-size:15px;color:var(--acc)}
.help-card ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.help-card li{font-size:13.5px}
.help-card dl{margin:0}
.help-card dt{font-weight:700;font-size:13.5px;margin-top:9px}
.help-card dd{margin:2px 0 0;font-size:13px;color:var(--mut)}
.hp-note{font-size:12.5px;color:var(--mut);margin-top:10px}
.hp-status{list-style:none;padding:0;margin:6px 0 0}
.hp-status li{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:13.5px}

/* ─────────── Волна 2: клиенты / карта ЧК / сигналы удержания ─────────── */
.mut{color:var(--mut)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.sig{display:inline-block;font-size:11px;line-height:1.5;padding:1px 7px;border-radius:6px;white-space:nowrap;font-weight:600}
.sig.big{font-size:12.5px;padding:3px 10px;margin-right:4px}
.sig-risk{background:#fdecea;color:#c0392b;border:1px solid #f3cdc7}
.sig-warn{background:#fdf3e3;color:#b26b00;border:1px solid #f0dcb8}
.sig-info{background:#eef1f4;color:#5b6472;border:1px solid #e0e4ea}
.sig-ok{background:#e7f6ee;color:#1f7d54;border:1px solid #cfe9db}
.sig-none{background:#eef1f4;color:#8a94a2;border:1px solid #e0e4ea}
/* №191 (Ульяна 31.07): «Заморожен» — голубым, «Продано» (куплено, активация впереди) — сиреневым,
   чтобы три состояния подписки различались с одного взгляда, а не только текстом */
.sig-cold{background:#e6f3fc;color:#1a6c9c;border:1px solid #c6e2f5}
.sig-sold{background:#f1ecfb;color:#6a49b3;border:1px solid #ddd1f4}
/* волна 16: жёлтый бейдж «ОЗ — личный менеджер» у ФИО (как на фото Ульяны) */
.sig-oz{background:#ffc93c;color:#5b4300;border:1px solid #e6b32e}
/* волна 16: мини-кнопка «скопировать телефон» — не раздувает ячейку */
.copy-btn.mini{border:none;background:none;cursor:pointer;padding:0 2px;font-size:12px;color:#8a949a;vertical-align:baseline}
.copy-btn.mini:hover{color:var(--acc)}
.copy-btn.mini.copied{color:#1f7d54}
/* №226 полуавтомат «Уведомлений»: отметка менеджера «написал / пропустил».
   Активная — залита, чтобы разобранная строка читалась одним взглядом со списка. */
.nmark-btn{font-size:11px;padding:2px 8px;margin:0 3px 3px 0;border-radius:6px;
  border:1px solid #cfd6e0;background:#fff;cursor:pointer;color:#5b6672}
.nmark-btn:hover{background:#f2f5f9}
.nmark-btn.on[data-status="sent"]{background:#e8f7f0;border-color:#a8dfc6;color:#1f7a54;font-weight:600}
.nmark-btn.on[data-status="skipped"]{background:#eef1f5;border-color:#c4ccd6;color:#5b6672;font-weight:600}
.cl-signals{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.cl-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;align-items:start}
@media(max-width:900px){.cl-grid{grid-template-columns:1fr}}
.cl-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:18px}
.cl-head{font-weight:700;margin-bottom:10px}
.cl-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:0}
.cl-fields>div{display:flex;flex-direction:column;gap:1px}
.cl-fields dt{font-size:11px;color:var(--mut)}
.cl-fields dd{margin:0;font-size:13.5px;font-weight:500}
.cl-tiles{grid-template-columns:repeat(2,1fr)}
.cl-tiles .tile .v{font-size:22px}
tr.v-cancel td{color:var(--mut);text-decoration:line-through;text-decoration-color:#d9b3b3}
a.tile{text-decoration:none;color:inherit;display:block;transition:border-color .1s}
a.tile:hover{border-color:var(--acc)}

/* ── Excel-подобные таблицы (xltable.js) + сортируемые заголовки серверных списков ── */
.xl-bar{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.xl-bar button{cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:7px;padding:4px 11px;font-size:12px;color:var(--tx)}
.xl-bar button:hover{border-color:var(--acc)}
.xl-bar button.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.xl-bar .xl-count{font-size:12px;color:var(--mut);margin-left:auto}
table.xl th.xs{cursor:pointer;user-select:none}
table.xl th.xs:hover{color:var(--tx)}
table.xl th .arw{color:var(--acc);font-size:10px}
tr.xlf th{padding:3px 6px;border-bottom:1px solid var(--line);vertical-align:top}
tr.xlf.hide{display:none}
tr.xlf input,tr.xlf select{width:100%;min-width:56px;padding:3px 6px;border:1px solid var(--line);border-radius:6px;font-size:12px;font-weight:400;background:#fff;color:#1c2230}
/* серверная сортировка по клику на заголовок (списки /clients, /dialogs, /episodes) */
th.sorth a{color:inherit;text-decoration:none;cursor:pointer;border-bottom:0;display:inline-flex;align-items:center;gap:3px}
th.sorth a:hover{color:var(--acc)}
th.sorth.act a{color:var(--acc)}
th.sorth .arw{font-size:10px}

/* ── Шаблоны сообщений (#32) ── */
.tpl-card{border:1px solid #e6e9ef;border-radius:8px;padding:10px 12px;margin:8px 0;background:#fff}
.tpl-card.tpl-off{opacity:.6;background:#fafbfc}
.tpl-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tpl-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.tpl-body{white-space:pre-wrap;word-wrap:break-word;font:13px/1.5 -apple-system,Segoe UI,Roboto,sans-serif;
  background:#f7f9fb;border:1px solid #eceff3;border-radius:6px;padding:8px 10px;margin:6px 0 4px;max-height:260px;overflow:auto}
.copy-btn{font-size:12px;padding:3px 9px;border-radius:6px;border:1px solid #cfd6e0;background:#fff;cursor:pointer}
.copy-btn:hover{background:#f2f5f9}
.copy-btn.copied{background:#e8f7f0;border-color:#a8dfc6;color:#1f7a54}
.link-btn{background:none;border:none;color:#6b7480;font-size:12px;cursor:pointer;padding:0;text-decoration:underline}
.link-btn:hover{color:#c0392b}
.tpl-sugg{border:1px solid #dbe6f5;background:#f6f9ff;border-radius:8px;padding:10px 12px;margin:12px 0}
.tpl-sugg .why{font-size:11px;color:#5b6472}
.tpl-miss{color:#b26b00}

/* ── Справка «Как пользоваться» (#33) ── */
.help-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.print-btn{flex:none;font-size:12.5px;padding:6px 12px;border-radius:8px;border:1px solid #cfd6e0;
  background:#fff;cursor:pointer}
.print-btn:hover{background:#f2f5f9}
.help-card.hp-wide{grid-column:1/-1}
.hp-flow{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.hp-two{columns:2;column-gap:24px}
@media (max-width:700px){.hp-two{columns:1}}

/* печать: остаётся только сама справка — получается раздаваемый файл/PDF */
@media print{
  header, .filters, .sidebar, footer, .print-btn, .help-page > .note{display:none !important}
  body{background:#fff}
  main{margin:0;padding:0;max-width:none}
  .help-grid{display:block}
  .help-card{break-inside:avoid;page-break-inside:avoid;border:1px solid #ddd;margin:0 0 10px;
    box-shadow:none;background:#fff}
  .help-page h2{margin-top:0}
  a{color:#000;text-decoration:none}
}
.help-card.hp-warn{border-color:#f0dcb8;background:#fffaf2}
.help-card.hp-warn h3{color:#b26b00}
/* мультивыбор в фильтрах (Ульяна 18.07): details-дропдаун с чекбоксами, без JS */
details.msel{position:relative;display:inline-block;min-width:130px}
details.msel summary{list-style:none;cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:4px;padding:4px 22px 4px 8px;white-space:nowrap}
details.msel summary::-webkit-details-marker{display:none}
details.msel summary::after{content:"▾";position:absolute;right:8px;top:4px;color:#888}
details.msel[open] summary{border-color:#1f7a54}
.msel-list{position:absolute;z-index:30;top:100%;left:0;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.12);padding:6px 10px;max-height:260px;overflow-y:auto;min-width:210px}
.msel-opt{display:block;padding:3px 0;font-weight:400;white-space:nowrap;cursor:pointer}
.msel-opt input{margin-right:6px}

/* ── #29 совет коуча «как стоило ответить» в карточке диалога ── */
.coach{border:1px solid #cfe3d6;background:#f4fbf7;border-radius:10px;padding:12px 14px;margin:12px 0}
.coach-head{font-weight:700;font-size:13.5px}
.coach-head span{display:block;font-weight:400;color:var(--mut);font-size:11.5px;margin-top:2px}
.coach-why{font-size:11.5px;color:var(--mut);margin:8px 0 6px}
.coach-reply{background:#fff;border:1px solid #dbe6e0;border-radius:8px;padding:10px 12px;
  font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.coach-reply .c-val{font-style:italic;color:#1f7a54}          /* подставила панель */
.coach-reply .c-miss{background:#ffe9a8;color:#7a5b00;border-radius:3px;padding:0 2px}
.coach-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.coach-acts .copy-btn[disabled]{opacity:.55;cursor:not-allowed}
.coach-fb{display:inline-flex;gap:6px;margin-left:auto}
.fb-btn{font-size:12px;padding:3px 9px;border-radius:6px;border:1px solid #cfd6e0;background:#fff;cursor:pointer}
.fb-btn:hover{background:#f2f5f9}
.fb-btn.on{background:#e8f7f0;border-color:#a8dfc6;color:#1f7a54;font-weight:600}
.coach-foot{margin-top:8px;font-size:11px}
.coach-jump{margin-left:8px;font-size:11px;color:#1f7a54;text-decoration:none;border-bottom:1px dashed #1f7a54}
.tpl-used{font-size:11px;color:#1f7a54;background:#e8f7f0;border-radius:5px;padding:1px 6px;margin-left:6px}
.verdict .v-fix{margin-top:6px}
.verdict .v-fix summary{cursor:pointer;font-size:11.5px;opacity:.85}
.breakdown summary.bd-head{cursor:pointer;margin-bottom:0}
.breakdown details[open] summary.bd-head{margin-bottom:10px}
.coach.collapsed .coach-why,.coach.collapsed .coach-reply,
.coach.collapsed .coach-acts,.coach.collapsed .coach-foot{display:none}
.coach.mob .coach-head{position:relative;padding-right:20px}
.coach.mob .coach-head::after{content:"▴";position:absolute;right:0;top:0;color:var(--mut)}
.coach.mob.collapsed .coach-head::after{content:"▾"}
@media (prefers-color-scheme:dark){
  .coach{background:#12241c;border-color:#24463a}
  .coach-reply{background:#0f1720;border-color:#2a3947}
  .coach-reply .c-val{color:#5fd0a0}
  .coach-reply .c-miss{background:#4a3a08;color:#f0d68a}
  .fb-btn{background:#0f1720;color:#e6eaef;border-color:#2a3947}
  .fb-btn:hover{background:#16212c}
  .fb-btn.on{background:#123528;border-color:#1d5540;color:#7fe0b3}
  .tpl-used{background:#123528;color:#7fe0b3}
  .coach-jump{color:#7fe0b3;border-bottom-color:#7fe0b3}
}
.coach-why-bad{margin-top:8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rsn-btn{font-size:11.5px;padding:2px 8px;border-radius:12px;border:1px solid #cfd6e0;background:#fff;cursor:pointer}
.rsn-btn:hover{background:#f2f5f9}
.rsn-btn.on{background:#fdeaea;border-color:#e6b3b3;color:#a33;font-weight:600}
.rsn-thanks{font-size:11.5px;color:#1f7a54}
@media (prefers-color-scheme:dark){
  .rsn-btn{background:#0f1720;color:#e6eaef;border-color:#2a3947}
  .rsn-btn:hover{background:#16212c}
  .rsn-btn.on{background:#3a1d1a;border-color:#5a2a24;color:#f0a79c}
  .rsn-thanks{color:#7fe0b3}
}
/* слепая разметка «AI vs человек» */
.lbl-ctx{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:16px;max-width:820px}
.lbl-ctx .bd-head{font-weight:700;margin-bottom:10px}
.lbl-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:820px){.lbl-pair{grid-template-columns:1fr}}
.lbl-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.lbl-tag{font-weight:700;font-size:12px;color:var(--mut);margin-bottom:8px;text-transform:uppercase}
.lbl-card pre{margin:0;white-space:pre-wrap;word-break:break-word;font:14px/1.5 inherit}
.lbl-choice{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.lbl-btn{padding:9px 18px;border:0;border-radius:8px;background:var(--acc);color:#fff;font-weight:600;cursor:pointer;font-size:14px}
.lbl-btn:hover{background:#0c6650}
.lbl-btn.alt{background:#fff;color:var(--tx);border:1px solid #cfd6e0}
.lbl-btn.alt:hover{background:#f2f5f9}
.lbl-cmt{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--mut);max-width:640px}
.lbl-cmt input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}
@media (prefers-color-scheme:dark){.lbl-btn.alt{background:#0f1720;color:#e6eaef;border-color:#2a3947}
  .lbl-cmt input{background:#0f1720;color:#e6eaef;border-color:#2a3947}}

/* компактные таблицы (прайс: сеты/подписка/мерч) — не растягивать колонки на всю ширину
   с огромными пустыми промежутками (замечание Сергея 24.07) */
.tfit{width:auto;min-width:min(560px,100%)}
.tfit th,.tfit td{padding-right:22px}
/* кликабельная строка списка (звонки): вся строка ведёт в карточку */
tr.rowlink{cursor:pointer}
tr.rowlink:hover td{background:#f2f6f4}
/* чекбокс в мультивыборе не должен наследовать width:100% от .filters input —
   иначе галка занимает всю строку, а подпись падает на следующую (скрин Сергея 24.07) */
.msel-opt input{width:auto;margin-right:6px;vertical-align:middle}
/* …и сама опция: .filters label задаёт flex-колонку (галка над текстом) — возвращаем строку */
.filters .msel-opt{flex-direction:row;align-items:center;gap:6px;font-size:13px;color:inherit}