/* EGC демо-стенд. Один файл, без фреймворков.
   Светлая тема: стенд показывают через проектор и шарят экран, тёмная там плывёт. */

:root {
  --ink: #16181d;
  --ink-soft: #4e5561;
  --ink-faint: #626a78;
  --line: #e3e6ec;
  --line-soft: #eef0f4;
  --bg: #ffffff;
  --bg-soft: #f7f8fa;
  /* Нативные контролы - поле даты, выпадающий список, календарь браузера -
     рисуются системой. Без этой строки в тёмной теме они оставались белыми */
  color-scheme: light;
  /* Подложка главных строк: тех, что раскрываются. Отдельный тон, а не
     --bg-soft - тот отличался от белого на полтона и на проекторе пропадал */
  --bg-row: #eef0f4;
  --bg-row-2: #e7eaf0;   /* та же строка в итоговой колонке - она и так серая */
  --accent: #c0392b;
  --accent-soft: #fdf0ee;
  --on-accent: #ffffff;
  --bg-head: #f1f3f7;
  --good: #157a4a;
  --good-bg: #eaf6f0;
  --warn: #8a5a12;
  --warn-bg: #fdf6e7;
  --bad: #c0392b;
  --bad-bg: #fdeeec;
  --radius: 12px;
  --radius-card: 16px;      /* карточка-контейнер: в мини-приложении 20, на десктопе
                               столько же читается как «мобильный виджет» - берём 16 */
  --radius-pill: 10px;
  --shadow: 0 1px 2px rgba(20, 24, 30, .05), 0 8px 22px rgba(20, 24, 30, .09);

  /* Заливки без собственного цвета: подложка пилюль, полей, полос прогресса.
     Берутся из мини-приложения - там на них держится вся глубина интерфейса */
  --fillq: rgba(16, 18, 22, .06);
  --fillq2: rgba(16, 18, 22, .12);
  --pill: rgba(16, 18, 22, .05);
  --pill-br: rgba(16, 18, 22, .10);

  /* Свечение под фоном страницы: два радиальных пятна цветом схемы.
     Именно оно отличает «плоский документ» от подачи мини-приложения */
  --glow-1: rgba(64, 64, 64, .05);
  --glow-2: rgba(64, 64, 64, .03);

  /* Полотно страницы одним значением: его же берут подложки липких панелей.
     Иначе меню и шапка дашборда заливались плоским цветом поверх градиента,
     и по краю шёл видимый шов в несколько уровней серого */
  --canvas:
    radial-gradient(120% 55% at 50% -12%, var(--glow-1) 0%, transparent 62%),
    radial-gradient(95% 45% at 50% 110%, var(--glow-2) 0%, transparent 70%),
    var(--bg-soft);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Запасной стек стоит прямо в var(): если fonts.css не доедет, переменной нет,
     и весь шорткат font становится невалидным - стенд падал бы в Times 16px,
     причём молча, без ошибки в консоли */
  font: calc(15px * var(--tk, 1))/1.55
        var(--ui-font, var(--font-brand, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
  color: var(--ink);
  /* Фон как в мини-приложении: два мягких пятна цветом схемы поверх ровного
     полотна. attachment: fixed - иначе свечение уезжает при прокрутке таблиц */
  background: var(--canvas);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: calc(22px * var(--tk, 1)); }
h2 { font-size: calc(17px * var(--tk, 1)); }
h3 { font-size: calc(14px * var(--tk, 1)); color: var(--ink-soft); font-weight: 600; }

/* ── Шапка ────────────────────────────────────────────────────────── */

.top {
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px; height: 56px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.brand { font-weight: 800; font-size: calc(18px * var(--tk, 1)); letter-spacing: -.5px; white-space: nowrap; }
.brand span { color: var(--accent); }
/* Название компании читается как заголовок кабинета, а не как служебная
   подпись: в мини-приложении в этом месте стоит имя человека крупным */
.co-name {
  font-size: calc(15px * var(--tk, 1)); font-weight: 600; color: var(--ink); letter-spacing: -.2px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tabs { display: flex; gap: 4px; }
.tabs a {
  padding: 7px 14px; border-radius: 8px; text-decoration: none;
  color: var(--ink-soft); font-weight: 500; font-size: calc(14px * var(--tk, 1)); white-space: nowrap;
}
.tabs a:hover { background: var(--bg-soft); color: var(--ink); }
.tabs a.on { background: var(--accent-soft); color: var(--accent); }

/* Все органы управления собраны слева, рядом с названием: правый край экрана
   на встрече уходит за границу общего доступа, туда никто не смотрит */
.top-right { display: flex; align-items: center; gap: 14px; }

/* Тумблер «Показ клиенту». Включён по умолчанию: продавец шарит экран. */
.toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: calc(12px * var(--tk, 1)); }
.toggle input { display: none; }
.toggle .track {
  width: 36px; height: 20px; border-radius: 10px; background: var(--line);
  position: relative; transition: background .15s;
}
.toggle .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s;
}
.toggle input:checked + .track { background: var(--good); }
.toggle input:checked + .track::after { transform: translateX(16px); }

/* ── Раскладка ────────────────────────────────────────────────────── */

.wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; padding: 20px; align-items: start; }
.wrap.solo { grid-template-columns: 1fr; }

.card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow);
}
.card > header {
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px;
  /* Шапка карточки сюжета длинная: имя, точка, тема и светофор проверок.
     На ноутбуке при увеличенном масштабе она вылезала за правый край */
  flex-wrap: wrap;
}
.card > .body { padding: 16px; }

.side { position: sticky; top: 76px; }

/* Цвет ссылок задаём сами. По умолчанию браузер красит их в синий, а
   посещённые в бордовый - на тёмном фоне ссылки на ролики читались с трудом */
a { color: var(--accent); }
a:visited { color: var(--accent); }

/* ── Поля ─────────────────────────────────────────────────────────── */

.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: calc(12px * var(--tk, 1)); color: var(--ink-soft); margin-bottom: 5px; }
.field input[type=text], .field input[type=number], .field select {
  width: 100%; padding: 9px 11px; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Базовый вид .pick / .fld: до 19.09.2026 классы нигде не были описаны,
   и селекты панели сценария с полями настроек трендов выглядели
   системными - «не наш стиль элементов» (правка Павла) */
select.pick, input.fld, textarea.fld, .foot-pick input {
  padding: 7px 10px; font: inherit; font-size: calc(13px * var(--tk, 1));
  color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg);
}
select.pick:focus, input.fld:focus, textarea.fld:focus, .foot-pick input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea.fld { resize: vertical; min-height: 56px; line-height: 1.45; }

.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.checks label {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: calc(14px * var(--tk, 1));
}
.checks label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.checks input { accent-color: var(--accent); }

.hint { font-size: calc(12px * var(--tk, 1)); color: var(--ink-faint); margin-top: 5px; }

/* ── Карточки чисел ───────────────────────────────────────────────── */

/* Карточки показателей: равные колонки и общие базовые линии. Заголовки,
   числа и подписи стоят на одной высоте у всех семи - иначе полоса читается
   как набор случайных плиток, а не как один ряд */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(202px, 1fr)); gap: 10px;
  align-items: stretch;
}
/* Число колонок считается от фактической ширины полосы, а не от медиазапроса.
   Медиазапрос меряет окно БЕЗ учёта нашего масштаба: при 150% браузер видел
   1600 px и держал семь колонок, хотя места было 1327 - и «167 501 943»
   обрезалось до «167 501» (скрин Павла 12.09.2026). 202 px - самая длинная
   девятизначная сумма с рублём при шрифте 27 px, плюс поля карточки */

.stat {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 13px 15px 12px; display: flex; flex-direction: column; min-width: 0;
  /* Карточка - контейнер: число ужимается под её фактическую ширину.
     Медиазапросы этого не умеют - они меряют окно без учёта масштаба */
  container-type: inline-size;
}
.stat .k {
  font-size: calc(12px * var(--tk, 1)); color: var(--ink-soft); line-height: 1.25;
  min-height: 30px;                      /* два слова и «Цена просмотра (CPV)» - одна линия */
  display: flex; align-items: flex-start;
}
.stat .v {
  /* Крупная цифра - главный приём подачи в мини-приложении. На телефоне это 34px
     при одной карточке в ряд; здесь карточек семь, и семизначная сумма с рублём
     перестаёт помещаться уже на 28. Цифры моноширинные: иначе соседние карточки
     пляшут при каждом обновлении данных */
  font-size: min(calc(27px * var(--tk, 1)), 13.4cqw); font-weight: 700; letter-spacing: -.6px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 8px; white-space: nowrap;
}
.stat .n {
  font-size: calc(12px * var(--tk, 1)); color: var(--ink-faint); line-height: 1.35;
  margin-top: auto;                      /* подписи прижаты к низу карточки */
}
.stat .n > div + div { margin-top: 2px; }
/* Полоса доли под числом - приём из мини-приложения: цифра говорит сколько,
   полоса показывает насколько это близко к пределу. Ставим только там, где
   доля осмысленна: сколько людей из подключённых снимает, сколько сюжетов
   очереди разобрано. Придумывать знаменатель ради красоты нельзя */
.prog {
  height: 5px; border-radius: 3px; background: var(--fillq);
  overflow: hidden; margin: 0 0 8px;
}
.prog i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-d, var(--accent)) 100%);
  transition: width .45s ease;
}
.prog.done i { background: var(--good); }
/* Полоса встаёт в отступ под числом, а не добавляет ряду высоту: на ноутбуке
   1280x720 лишние десять пикселей стоили дашборду двух строк таблицы */
.stat .prog { margin: -6px 0 5px; height: 4px; }

/* Первый показатель выделяем рамкой, а не заливкой: серый прямоугольник
   в ряду белых читался как выключенная карточка */
/* Тень перечисляем вместе с обводкой: box-shadow заменяется целиком, и
   выделенная карточка лежала плоско в ряду парящих соседей */
.stat.hero { border-color: var(--accent); box-shadow: var(--shadow), inset 0 0 0 1px var(--accent); }
.stat.hero .v { color: var(--accent); }

/* ── Таблицы ──────────────────────────────────────────────────────── */

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 13.5 вместо 14: Montserrat шире системного примерно на 4%, и на той же
   ширине карточки таблица переставала помещаться - последняя колонка уезжала
   под прокрутку. Полпикселя возвращают потерянное, читаемость не страдает */
table { border-collapse: collapse; width: 100%; font-size: calc(13.5px * var(--tk, 1)); }
/* separate вместо collapse: с collapse закреплённая колонка оставляет щель,
   в которую просвечивают уехавшие ячейки */
#pnl { table-layout: fixed; width: auto; border-collapse: separate; border-spacing: 0; }
/* Год целиком в экран: колонка 108 px вместо 140, и раскрытая строка
   премий «105 чел · 15 000 ₽» встаёт в две строки вместо среза. Числа
   собраны неразрывными пробелами и по разрядам не рвутся */
#pnl.year-tight tbody td { white-space: normal; }
/* Перенос во всех ячейках P&L, а не только в тесном году: подпись
   «0,050 ₽ за просмотр» шире колонки «Факт» и наезжала на соседнее число.
   Числа не рвутся - разряды в них склеены неразрывным пробелом, рубль
   тоже. Правка Павла 17.09.2026 */
#pnl tbody td { white-space: normal; }
/* Год целиком: шрифт на полступени мельче, отступы ячеек уже - колонка
   влезает в 96 px вместо 108, а «127 400 000» остаётся в одну строку.
   Сумма рубля неразрывна с числом (nbsp в stand.html), поэтому по «₽»
   перенос не рвётся. Правка Павла 17.09.2026 */
#pnl.year-tight th, #pnl.year-tight td {
  font-size: calc(12px * var(--tk, 1)); padding-left: 6px; padding-right: 6px;
}
#pnl.year-tight td.lvl0 { padding-left: 20px; }
#pnl.year-tight td.lvl1 { padding-left: 32px; }
#pnl.year-tight td.lvl2 { padding-left: 44px; }
#pnl.year-tight td.lvl3 { padding-left: 56px; }
#pnl.year-tight td.lvl4 { padding-left: 68px; }
#pnl th, #pnl td { border-bottom: 1px solid var(--line-soft); }
#pnl tbody tr:last-child td { border-bottom: none; }
/* Единое правило по всем таблицам: тексты слева, числа по центру,
   заголовки по центру. Раньше всё жалось вправо и текст читался тяжело */
/* Боковой отступ 9 вместо 12: Montserrat съел на широких таблицах два десятка
   пикселей, и колонки уезжали под прокрутку сильнее, чем до смены шрифта.
   Отступ возвращает их обратно, вертикальный ритм строк не трогаем */
th, td { padding: 9px 9px; text-align: left; white-space: nowrap; }
/* Все числа в таблицах моноширинные: колонки не пляшут при обновлении данных */
td, th { font-variant-numeric: tabular-nums; }
th { text-align: center; }
td.num, th.num { text-align: center; }
td.name, th.name, td.left, th.left { text-align: left; }
th:first-child, td:first-child { text-align: left; }
/* Шапка таблицы на подложке: раньше она сливалась с телом, и на широких
   таблицах взгляд терял, где кончаются заголовки и начинаются данные */
thead th {
  font-size: calc(11.5px * var(--tk, 1)); font-weight: 700; color: var(--ink-soft);
  letter-spacing: .01em;
  border-bottom: 1px solid var(--line); background: var(--bg-head);
  position: sticky; top: 0; z-index: 1;
}
tbody tr + tr td { border-top: 1px solid var(--line-soft); }
/* Подсветка строки цветом схемы, а не серым: тот же приём, что выделяет
   выбранную строку рейтинга в мини-приложении */
tbody tr:hover td { background: var(--accent-soft); }

/* Таблица кончается вместе с карточкой: без этого прямой угол шапки и нижней
   строки торчал из скруглённого контейнера. Скругляем крайние ячейки, а не
   саму таблицу - у неё border-collapse, и радиус на ней не работает */
.card > .scroll:last-child,
.card > .body > .scroll:last-child { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.card > .scroll:last-child tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-card); }
.card > .scroll:last-child tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-card); }

/* Правило Павла 07.09.2026: больше жирного белого и больше цвета схемы.
   Шапка таблицы и числа шли приглушённым серым - на тёмной теме это читалось
   как выключенный текст. Теперь заголовки и данные в полный контраст, а
   главное число строки - цветом схемы: глаз находит просмотры и цену
   просмотра, не читая шапку. Акцент годится как цвет текста в обеих темах:
   в светлой схемы затемнены (жёлтая - #8f6d00), в тёмной осветлены */
thead th { color: var(--ink); }
tbody td { color: var(--ink); font-weight: 500; }
tbody td b { color: var(--accent); }
/* Итоговая строка остаётся белой целиком: это сумма, а не показатель,
   и цветом она спорила бы с данными выше */
tr.sum td, tr.sum td b { color: var(--ink); }

tr.sum td { font-weight: 700; background: var(--bg-soft); }
tr.group td { color: var(--ink-soft); font-size: calc(12px * var(--tk, 1)); }
td.name { font-weight: 500; }
.muted { color: var(--ink-faint); }
.num { font-variant-numeric: tabular-nums; }

/* Строка P&L с раскрытием */

/* Подсветка выполнения плана */
.ok { color: var(--good); }
.mid { color: var(--warn); }
.no { color: var(--bad); }
/* Пилюля-статус: в мини-приложении это мягкий прямоугольник, а не капсула,
   и текст в ней окрашен в цвет статуса - на подложке одного тона зелёный,
   жёлтый и красный различались только фоном, и в тёмной теме почти не читались */
.pill {
  display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: calc(12px * var(--tk, 1)); font-weight: 600; white-space: nowrap;
}
.pill.ok { background: var(--good-bg); color: var(--good); }
.pill.mid { background: var(--warn-bg); color: var(--warn); }
.pill.no { background: var(--bad-bg); color: var(--bad); }

/* Решение по заявке видно в разделе, куда оно уехало: отключённый гаснет,
   а свежая тема подсвечивается - иначе непонятно, сработала ли кнопка */
#screen tr.row-off td { opacity: .55; }
.qcard.decided-card { opacity: .8; }
.decided { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; font-size: calc(12px * var(--tk, 1)); }
.decided.ok { color: var(--good); }
.decided.no { color: var(--ink-faint); }

/* Скрытие наших цифр тумблером «Показ клиенту» */
body.client-view .ours { display: none !important; }

/* ── Мелочи ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
/* Нажатие отдаёт откликом, как в мини-приложении: кнопка на миг проседает */
.btn:active { transform: scale(.98); }
.btn:hover { background: var(--bg-soft); }
/* Главная кнопка залита градиентом акцента и подсвечена снизу - тот же приём,
   что делает главную кнопку мини-приложения заметной с расстояния */
.btn.main {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-d, var(--accent)) 100%);
  border-color: transparent; color: var(--on-accent);
  box-shadow: 0 6px 16px var(--accent-soft);
}
.btn.main:hover { filter: brightness(1.07); }
/* Затемнение при наведении делает filter выше: он не спорит с градиентом
   и не превращает любую схему в бордовую, как это было с подменой цвета */

/* Цвета из токенов, а не хексами: захардкоженный жёлтый в тёмной теме
   приходилось перекрывать отдельным правилом ниже по файлу */
.note {
  padding: 10px 14px; border-radius: var(--radius); background: var(--warn-bg);
  color: var(--warn); font-size: calc(12px * var(--tk, 1));
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}
/* Пилюля-подпись: в мини-приложении это 11px/600 на мягкой подложке.
   Здесь на пиксель крупнее - плотность десктопного текста выше */
/* Плашка не переносится и не сжимается: при длинном ФИО «26 ч» ломалось
   на две строки, и карточка получала лишнюю высоту из-за двух символов */
/* Сводка контент-плана - не плашка на одну строку, а цифры, ради которых
   на неё смотрят: сколько снято, сколько по трендам, сколько потрачено.
   На телефоне она обрезалась многоточием ровно на «от сети» */

.tag {
  font-size: calc(12px * var(--tk, 1)); font-weight: 600; padding: 3px 9px;
  border-radius: var(--radius-pill); background: var(--pill); color: var(--ink-soft);
  white-space: nowrap; flex: none; font-variant-numeric: tabular-nums;
  /* Плашка с именем и точкой на телефоне вылезала за край: у крупной сети
     и ФИО, и названия магазинов длиннее. Режем многоточием, а не переносим -
     плашка в одну строку это её смысл */
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* Пустое состояние как в мини-приложении: сначала жирная строка о том, что
   здесь будет, под ней подсказка мельче. Раньше обе строки были одного веса,
   и блок читался как сообщение об ошибке */
.empty { padding: 40px 20px; text-align: center; color: var(--ink-faint); font-size: calc(13.5px * var(--tk, 1)); line-height: 1.5; }
.empty .big { font-size: calc(15px * var(--tk, 1)); font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }

.foot { padding: 16px 20px 40px; color: var(--ink-faint); font-size: calc(12px * var(--tk, 1)); text-align: center; }

/* ── Телефон ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* minmax(0,1fr), иначе широкая таблица распирает страницу вбок */
  .wrap { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; }
  .main-col, .main-col .card { min-width: 0; overflow: hidden; }
  .side { position: static; }
  /* Прокрутку шапки вбок не включаем: overflow-x режет и выпадающую панель
     «Оформление» - на телефоне от неё оставалась полоска в два пикселя.
     Содержимое просто переносится на вторую строку */
  .top { gap: 12px; padding: 0 12px; flex-wrap: wrap; }
  .tabs a { padding: 7px 10px; font-size: calc(12px * var(--tk, 1)); }
  .stat .v { font-size: calc(22px * var(--tk, 1)); }
  h1 { font-size: calc(17px * var(--tk, 1)); }
}


/* ── P&L: месяцы разделены вертикально ────────────────────────────── */

#pnl td + td, #pnl thead th + th { border-left: 1px solid var(--line); }
#pnl tbody tr + tr td { border-top: none; }

/* Колонка названий отделена заметнее - она не месяц */
#pnl td:first-child, #pnl thead th:first-child { border-right: 1px solid var(--line); }

/* Стык групп «Разгон» и «Прогноз» */
#pnl .gap { border-left: 2px solid var(--line) !important; }

/* Шапка группы месяцев */


/* Пара полей в ряд: подпись из двух строк не должна сдвигать поле вниз.
   Правило .field:last-child { margin-bottom: 0 } давало второму полю отступ 0,
   а первому 14px - на этом они и разъезжались. */
.row2 { align-items: end; margin-bottom: 14px; }
.row2 .field, .row2 .field:last-child { margin-bottom: 0; }

/* Все поля одной высоты: нативный date иначе выше остальных на 6px */
.field input[type=text], .field input[type=number], .field input[type=date], .field select {
  height: 38px;
}
.field input[type=date] { width: 100%; }

/* ── Закреплённая шапка и первая колонка ──────────────────────────── */

/* Таблица прокручивается внутри себя по обеим осям - иначе sticky не работает */


/* Две строки шапки: группа месяцев и сами месяцы */
/* Две строки шапки липнут друг под другом. Строку с названиями групп убрали:
   разгон от прогноза отделяет вертикальная линия, подпись занимала место зря. */
#pnl thead tr:first-child th { height: 37px; position: sticky; top: 0; z-index: 3; background: var(--bg-head); }
#pnl thead tr:nth-child(2) th { position: sticky; top: var(--pnl-h1, 37px); z-index: 3; background: var(--bg-head);
  box-shadow: inset 0 -1px 0 var(--line); text-align: center; }

/* Названия показателей видны при прокрутке вправо.
   Ширина фиксированная: без неё колонка схлопывается и налезает на числа. */
#pnl td:first-child, #pnl th:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--bg);
  white-space: normal; word-break: normal;
  box-shadow: 3px 0 5px -3px rgba(22, 24, 29, .12);
}
/* Первая ячейка шапки липнет сразу по двум осям и обязана лежать поверх
   остальных: при равном z-index соседние ячейки перекрывают её при прокрутке */
#pnl thead tr th:first-child { left: 0; z-index: 6; background: var(--bg-head); text-align: left; }
#pnl tr.sum td:first-child { background: var(--bg-soft); }
#pnl tbody tr:hover td:first-child { background: var(--bg-soft); }

/* Раскрываемая строка - шапка своей ветки, и она подсвечена подложкой.
   Без неё «Премии за просмотры» и четыре её ступени читались одинаково:
   взгляд не находил, где кончается один блок и начинается другой.
   Правило Павла 07.09.2026: главные строки чуть темнее везде, где
   раскрываются - в P&L и в разрезах отчёта */
#pnl tr.openable td,
#pnl tr.openable td:first-child,
#pnl tr.sum td,
#pnl tr.sum td:first-child,
#screen tbody tr.openable.open > td,
.fraud-row.on > td { background: var(--bg-row); }

/* Пустые колонки под факт: структура видна, но взгляд на них не спотыкается */
#pnl .empty-col { color: var(--ink-faint); font-weight: 400; padding-left: 7px; padding-right: 7px; }
#pnl th.empty-col { font-weight: 500; }
#pnl th.mon { text-align: center; border-bottom: 1px solid var(--line-soft); }
#pnl thead tr:nth-child(2) th.mon + th.mon { border-left: 1px solid var(--line); }
#pnl td.num + td.empty-col { border-left: 1px solid var(--line-soft); }

/* ── Иерархия строк P&L ───────────────────────────────────────────── */

#pnl td.name { font-weight: 500; }
#pnl td.lvl0 { padding-left: 28px; }
#pnl td.lvl1 { padding-left: 46px; }
#pnl td.lvl2 { padding-left: 64px; }
#pnl td.lvl3 { padding-left: 82px; }
#pnl td.lvl4 { padding-left: 100px; }
#pnl tr.soft td { color: var(--ink-soft); font-weight: 400; }
#pnl tr.openable td.name { cursor: pointer; user-select: none; }
#pnl .tw { display: inline-block; width: 16px; margin-left: -16px; color: var(--ink-faint); font-size: calc(12px * var(--tk, 1)); }


/* ── Раскладка рабочего экрана ────────────────────────────────────── */
/* Страница целиком не прокручивается: прокручиваются панель слева и таблица.
   Иначе липкая шапка таблицы уезжает вместе со своим контейнером. */

@media (min-width: 901px) {
  /* Высота рабочей области идёт из --app-h, а не из 100vh. Причина:
     масштаб экрана мы ставим как zoom на корне, а vh под zoom считается
     без его учёта - при 80% страница занимала 80% экрана, и внизу висела
     мёртвая полоса в 212 px. Переменную выставляет applyZoom в look.js
     (innerHeight / масштаб). 100vh остаётся запасным значением на случай,
     если скрипт не отработал (видео заказчика 11.09.2026) */
  body.app { overflow: hidden; height: var(--app-h, 100vh); }
  body.app .wrap {
    height: calc(var(--app-h, 100vh) - 56px); overflow: hidden; padding-bottom: 20px;
    grid-template-rows: auto minmax(0, 1fr);
  }
  body.app .main-col { height: 100%; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
  body.app .main-col .card {
    display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; overflow: hidden;
  }
  body.app .pnl-scroll { flex: 1; overflow: auto; min-height: 0; }
  /* Вкладки, где содержимое длиннее экрана и своей прокручиваемой таблицы
     у него нет: мотивация с историей версий, компания с полями, темы.
     Карточка в этом режиме обрезает всё лишнее - без прокрутки история
     версий просто исчезала за нижним краем */
  body.app .main-col .card > .body { overflow: auto; min-height: 0; }
  body.app .foot { display: none; }
}

/* На телефоне обычная прокрутка страницы: таблицу всё равно листают пальцем */
@media (max-width: 900px) {
  .pnl-scroll { max-height: calc(var(--app-h, 100vh) * 0.7); overflow: auto; }
}

/* Переключатели колонок в шапке таблицы */
.cols { display: flex; align-items: center; gap: 10px; font-size: calc(12px * var(--tk, 1)); }
.cols-label { color: var(--ink-faint); }
.cols label { display: flex; align-items: center; gap: 5px; cursor: pointer; color: var(--ink-soft); }
.cols input { accent-color: var(--accent); margin: 0; }
@media (max-width: 900px) { .cols { display: none; } }

/* ── Настройки полосой над таблицей ───────────────────────────────── */

/* Поля по содержимому, а не растянутые на всю ширину: числовое поле
   шириной в пол-экрана выглядит нелепо. Лишнее место уходит вправо. */
.settings-grid {
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end;
}
.settings-grid .field { margin-bottom: 0; }
.settings-grid .field input[type=number] { width: 96px; }
.settings-grid .field input[type=date] { width: 168px; }
.settings-grid .field.wide { margin-left: 4px; }
.settings-grid .field label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings .card > .body, .settings .body { padding: 14px 16px; }

/* Настройки компании в столбик: три группы в ряд, внутри группы поля идут
   сверху вниз. Сплошной сеткой четырнадцать полей ложились в две рваные
   строки - подписи разной длины, и правый край гулял.
   Макет согласован Павлом 16.09.2026 */
.set-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; align-items: start;
}
html[data-w="m"] .set-cols,
html[data-w="s"] .set-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-w="xs"] .set-cols { grid-template-columns: 1fr; }
/* Третий столбец - две короткие группы одна под другой */
.set-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.set-grp {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); overflow: hidden; min-width: 0;
}
/* Шапка группы - та же плашка, что у шапок таблиц кабинета */
.set-grp > h3 {
  margin: 0; padding: 8px 12px; background: var(--bg-head);
  border-bottom: 1px solid var(--line);
  font-size: calc(11.5px * var(--tk, 1)); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
}
.set-grp > .set-in {
  padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px;
}
.set-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Поле тянется на ширину своей колонки: в столбике место справа не экономим,
   а числовое поле в 96px посреди пустой колонки читается как обрезанное */
.set-grp .field { margin-bottom: 0; min-width: 0; }
.set-grp .field input[type=text],
.set-grp .field input[type=number],
.set-grp .field input[type=date] { width: 100%; }
.set-grp .field label { white-space: normal; }
/* Дате в столбике даём ширину колонки: обрезок в 120px рядом с полными
   полями читался как недоделанный. Вес поднят до id - иначе #start побеждает */
.set-grp .field input#start.cal-input { width: 100%; }
/* Строка под «Нишей»: что система возьмёт из справочника - отрасль, темы,
   соц. сеть, ограничения. Без неё справочник читается просто длинным
   списком названий */
.niche-note {
  display: block; margin-top: 4px; font-size: calc(11px * var(--tk, 1));
  line-height: 1.35; color: var(--ink-faint);
}
.niche-note.warn { color: var(--warn); }
/* Переключатель профиля берёт всю ширину группы, как поля рядом */
.set-grp .seg { display: flex; }
.set-grp .seg button { flex: 1 1 0; white-space: nowrap; }

/* Площадки: компактные чекбоксы строго в одну строку, низ на уровне полей */
.checks.flat {
  display: flex; flex-wrap: nowrap; gap: 11px; height: 38px; align-items: center;
}
.checks.flat label {
  border: none; padding: 0; background: none; font-size: calc(14px * var(--tk, 1)); gap: 6px; white-space: nowrap;
  height: auto;
}
.checks.flat label:has(input:checked) { background: none; }

@media (max-width: 700px) {
  .settings-grid { gap: 12px 14px; }
  .settings-grid .field { flex: 1 1 130px; }
  .settings-grid .field input[type=number],
  .settings-grid .field input[type=date] { width: 100%; }
  .settings-grid .field.wide { flex: 1 1 100%; }
  .checks.flat { flex-wrap: wrap; height: auto; min-height: 38px; }
}

/* Название компании живёт в шапке отчёта, а не в настройках */
.name-inline {
  border: 1px solid transparent; background: var(--bg-soft); border-radius: 8px;
  padding: 5px 10px; font: inherit; font-size: calc(14px * var(--tk, 1)); color: var(--ink); width: 190px;
}
.name-inline::placeholder { color: var(--ink-faint); }
.name-inline:hover { border-color: var(--line); }
.name-inline:focus { outline: none; border-color: var(--accent); background: var(--bg); }
@media (max-width: 900px) { .name-inline { width: 100%; } }

/* ── Печать ───────────────────────────────────────────────────────── */

.print-head { display: none; }

@page { size: A4 landscape; margin: 12mm 10mm; }

@media print {
  /* Печатаем всегда светлым: тёмная тема залила бы лист краской.
     Переменные перебиваем на корне - схема акцента при этом сохраняется. */
  :root, :root[data-theme="dark"] {
    --ink: #16181d; --ink-soft: #5a616e; --ink-faint: #8b93a1;
    --line: #d7dae1; --line-soft: #e8eaee;
    --bg: #ffffff; --bg-soft: #f5f6f8;
    --shadow: none;
  }

  /* Раскладка приложения на бумаге не работает: разворачиваем всё в поток */
  body, body.app { overflow: visible !important; height: auto !important; background: #fff; }
  body.app .wrap {
    height: auto !important; overflow: visible !important; display: block !important; padding: 0;
  }
  body.app .main-col, body.app .main-col .card { display: block !important; overflow: visible !important; }
  .pnl-scroll { max-height: none !important; overflow: visible !important; }

  .top, .settings, .no-print, .foot, .foot-note, .cols, .btn { display: none !important; }
  .card { border: none; box-shadow: none; }

  /* Меню разделов на бумаге - мусор: печатают один раздел, а не навигацию.
     Пока оно печаталось, оно же занимало 278 px сверху и сталкивало первую
     карточку на второй лист - первая страница уходила пустой */
  .side-nav { display: none !important; }

  /* Переключатели режимов на листе не нажать. Из полосы периода остаётся то,
     ради чего её на бумаге и читают: какой отрезок и сколько в нём дней */
  .seg, .per-arrow, .fold-btn, .pick, .comp-filter .pick { display: none !important; }
  .per-nav { display: inline-flex !important; gap: 6px; }
  /* Период уже стоит в шапке листа - вторая такая же строка на бумаге
     это просто повтор. Разрез отчёта тоже назван в шапке */
  .cut-row, .period-row { display: none !important; }
  /* Свёрнутый график печатает заголовок и пустоту под ним. У свёрнутых
     таблиц шапка и строка «Всего» остаются - это по-прежнему данные */
  .card.folded:has(svg), .card.folded:has(canvas) { display: none !important; }

  /* Заголовок карточки нужен: без него на листе таблица стоит без названия,
     и непонятно, где соц. сети, а где люди. Прячем внутри только органы
     управления - кнопки уже сняты правилом выше */
  .card > header {
    display: flex !important; padding: 0 0 6px !important;
    border: none !important; background: none !important; break-after: avoid;
  }
  .card > header h2 { font-size: 14px; }
  /* У P&L своя печатная шапка с названием расчёта и параметрами компании -
     заголовок карточки её только дублировал, да ещё обещал год там, где
     на листе стоит окно из трёх месяцев */
  #viewPnl > .card > header { display: none !important; }
  .card > header .tag { font-size: 11px; }

  /* Пара таблиц рядом в лист не влезает - A4 уже монитора, и правая
     обрезалась по краю. На бумаге ставим их друг под друга */
  .dash-pair { display: block !important; }
  .dash-pair > .card { margin-bottom: 14px; break-inside: avoid; }
  .dash-pair > .card::after { display: none !important; }

  /* Прокрутка на бумаге не работает: то, что уехало за рамку, просто
     не печаталось. Разворачиваем содержимое рамок в поток */
  .scroll, .tall-scroll, #screen .tall-scroll, .clips-scroll,
  .pl-board, .pl-cal, .pl-col-scroll, .pl-calwrap, .pl-unpl-row {
    overflow: visible !important; max-height: none !important;
  }
  /* Раздел «Контент» на бумаге: карточка перестаёт быть flex-элементом.
     Правило .main-col .card выше снимает с неё display, но flex: 1 остаётся,
     и при разбивке на страницы Chromium режет хвост вместо переноса -
     у «Плана · Список» терялись два последних дня, у конкурентов три поста.
     Видно только по содержимому листов: высота элемента при этом совпадает */
  body.app #screen #contentBody { display: block !important; }
  body.app #screen #contentBody > .card { flex: 0 0 auto !important; }
  body.app #screen #contentBody > .card > .scroll,
  body.app #screen #contentBody > .pl-board,
  body.app #screen #contentBody > .pl-calwrap {
    flex: none !important; overflow: visible !important; max-height: none !important;
  }
  /* Заголовки колонок доски - такие же липкие шапки, как у таблиц: на бумаге
     всё липкое переводим в поток, иначе оно печатается со сдвигом */
  .pl-col-h { position: static !important; }
  #screen table { font-size: 9.5px; table-layout: auto !important; width: 100% !important; }
  #screen thead th { position: static !important; }
  #screen table td:first-child { position: static !important; }
  /* Ячейки переносят текст: с nowrap правые колонки уезжали за край листа
     и не печатались вовсе - в отчёте так терялись премии и цена просмотра */
  /* Перенос по словам, а не по буквам: с break-word узкие колонки печатали
     числа столбиком по одной цифре, а шапка рвала «Просмотров» посреди слова */
  #screen th, #screen td {
    white-space: normal !important; padding: 3px 4px;
    word-break: normal; overflow-wrap: anywhere;
  }
  #screen thead th { word-break: normal; overflow-wrap: normal; }
  /* Текстовой колонке хватает трети листа: без потолка она забирала две
     трети, и двенадцати числовым оставалось по два десятка пикселей */
  #screen table td.name, #screen table th:first-child { max-width: 34%; }

  /* Разрез отчёта - тринадцать колонок на лист шириной 718 px. При общем
     кегле таблица уезжала за край и правые колонки - премии и цену
     просмотра - на бумагу не выводила вовсе */
  /* Тринадцать колонок разреза в портретный лист по содержимому не влезают:
     в авто-раскладке таблица уходила за край на треть, а правые колонки -
     премии и цену просмотра - не печатала вовсе. Делим лист поровну и
     ужимаем кегль: числа читаются, ничего не теряется */
  #screen .rep-scroll table {
    font-size: 7.5px; table-layout: auto !important; width: 100% !important;
  }
  #screen .rep-scroll th, #screen .rep-scroll td {
    padding: 2px; max-width: none !important;
    overflow-wrap: normal; word-break: normal;
    /* Шапке кегль задаёт своё правило, и без перебивки она оставалась
       13-пиксельной: колонки держали ширину по заголовкам, а не по числам */
    font-size: 7.5px !important;
  }
  /* Стрелка сортировки в заголовке - орган управления: на бумаге она
     читается как часть названия колонки и занимает её ширину */
  #screen th.col-head::after { content: none !important; }
  #screen col { width: auto !important; }

  /* Органы управления на бумаге не нажать. Но выбрасывать поля целиком
     нельзя: в настройках компании и в мотивации значения живут именно в них,
     и лист выходил с подписями без единой цифры. Снимаем у полей вид
     органа управления и печатаем как обычный текст */
  input, select, textarea {
    border: none !important; background: none !important; box-shadow: none !important;
    padding: 0 !important; height: auto !important; min-height: 0 !important;
    color: var(--ink) !important; font-weight: 600; font-size: 11px;
    -webkit-appearance: none; appearance: none;
  }
  /* Подсказка пустого поля на бумаге читается как заполненное значение -
     лист врёт. Печатаем только то, что человек действительно ввёл */
  input::placeholder, textarea::placeholder { color: transparent !important; }
  input[type="checkbox"] {
    -webkit-appearance: checkbox; appearance: checkbox;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .fold-btn, .pick, .per-arrow, .q-act, .look-btn, .cal-btn, .sort-arrow,
  .chk-more, .stat-toggle::before { display: none !important; }
  .comp-filter, .settings-foot { display: none !important; }

  /* Свёрнутые блоки на бумаге раскрываем: заголовок без содержимого - это
     потерянные данные, а не экономия места */
  #statBox[hidden] { display: block !important; }
  .stat-toggle { color: var(--ink); cursor: auto; break-after: avoid; }

  /* Строка таблицы не разрывается между листами, шапка повторяется */
  tr, .card, .stat, .q-card { break-inside: avoid; }
  thead { display: table-header-group; }

  /* Серый текст на бумаге выцветает сильнее, чем на экране: поднимаем
     контраст подписей до читаемого */
  :root, :root[data-theme="dark"] { --ink-soft: #3f4653; --ink-faint: #5b6270; }

  /* Экран модерации - две колонки: очередь и карточка сюжета. На листе
     правая колонка уезжала за край, и половина карточек не печаталась.
     Разворачиваем в поток: сначала очередь, под ней разбираемый сюжет */
  .moder { display: block !important; }
  .qlist { display: block !important; }
  .qitem { width: 100% !important; margin-bottom: 5px; break-inside: avoid; }
/* Просроченное - то, что ждёт дольше суток. Красная полоса слева и красный
   счётчик: модератор разбирает очередь сверху вниз, и глазу нужен якорь */
.qi-late { color: var(--bad); font-weight: 700; font-size: 12px; }

  /* Пустые колонки на бумаге - мусор, печатаем только план.
     Строка «План» под каждым месяцем тогда тоже лишняя. */
  #pnl .empty-col { display: none !important; }
  #pnl thead tr:nth-child(3) { display: none; }   /* строка «План» под каждым месяцем на бумаге лишняя */

  .print-head { display: block; margin-bottom: 10px; }
  .ph-top {
    display: flex; align-items: baseline; gap: 12px;
    padding-bottom: 8px; border-bottom: 2px solid var(--ink);
  }
  .ph-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
  .ph-co { font-size: 15px; color: var(--ink-soft); }
  .ph-params {
    display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 8px 0 0; font-size: 12px;
  }
  .ph-when { font-size: 12px; color: var(--ink-soft); padding: 6px 0 0; }
  .ph-params div { display: flex; gap: 6px; }
  .ph-params span { color: var(--ink-soft); }

  /* Фиксированная сетка нужна для экранной прокрутки, на бумаге она сжимает
     таблицу в треть листа - возвращаем авто-раскладку */
  #pnl { font-size: 10px; width: 100% !important; table-layout: auto !important; }
  #pnl col { width: auto !important; }
  #pnl th, #pnl td { padding: 3px 5px; white-space: normal; }
  /* Названию показателя нужна треть листа: в авто-раскладке оно сжималось
     до сотни пикселей и ломалось на три строки, а числа при этом стояли
     в вдвое более широких колонках */
  #pnl td:first-child, #pnl th:first-child { width: 30%; }
  #pnl thead th { position: static !important; background: #fff; }
  #pnl td:first-child, #pnl th:first-child {
    position: static !important; width: auto; min-width: 0; max-width: none;
    box-shadow: none; padding-left: 4px;
  }
  #pnl td.lvl1 { padding-left: 16px; }
  #pnl td.lvl2 { padding-left: 28px; }
  #pnl td.lvl3 { padding-left: 40px; }
  #pnl td.lvl4 { padding-left: 52px; }
  #pnl .tw { display: none; }
  #pnl tr.sum td { background: #f2f3f5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #pnl tbody tr { break-inside: avoid; }
  thead { display: table-header-group; }
}

/* Итог за год: отдельная группа колонок справа */
#pnl .year-col { background: var(--bg-soft); }
/* Правый край таблицы: без него итоговая колонка обрывается в пустоту */
#pnl tr > *:last-child { border-right: 1px solid var(--line); }
#pnl tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
#pnl th.year-col { font-weight: 600; color: var(--ink); }
#pnl tr.sum td.year-col,
#pnl tr.openable td.year-col { background: var(--bg-row-2); }


/* ══ Тёмная тема ══════════════════════════════════════════════════════
   Нейтральные поверхности инвертируются, акцент задаётся схемой ниже. */

:root[data-theme="dark"] {
  --ink: #e9edf3;
  --ink-soft: #b3b9c2;
  --ink-faint: #8f959f;
  --line: rgba(255, 255, 255, .14);
  --line-soft: rgba(255, 255, 255, .07);
  --bg: #16181d;
  --bg-soft: #0f1012;
  color-scheme: dark;
  /* В тёмной теме главную строку выделяем светлее фона: темнее уже некуда,
     подложка сливалась бы с полотном */
  --bg-row: #21242c;
  --bg-row-2: #272b34;
  --good: #4fd08a;
  --good-bg: rgba(79, 208, 138, .14);
  --warn: #ffc24b;
  --warn-bg: rgba(255, 194, 75, .13);
  --bad: #ff7a63;
  --bad-bg: rgba(255, 122, 99, .13);
  --shadow: 0 1px 1px rgba(0, 0, 0, .28), 0 10px 26px rgba(0, 0, 0, .42);
  --fillq: rgba(255, 255, 255, .08);
  --fillq2: rgba(255, 255, 255, .15);
  --pill: rgba(255, 255, 255, .09);
  --pill-br: rgba(255, 255, 255, .18);
  --glow-1: rgba(198, 202, 209, .07);
  --glow-2: rgba(154, 160, 168, .05);
  /* Текст поверх акцента. В тёмной теме акценты светлые, и белый по ним
     давал контраст 1,6:1 - подписи на кнопках было не прочитать */
  --on-accent: #16181d;
  --bg-head: #212530;
}
:root[data-theme="dark"] #pnl .year-col { background: rgba(255, 255, 255, .04); }
/* Главные строки в тёмной теме держим на тех же токенах, что и в светлой:
   раньше здесь стояли свои значения, и раскрываемая строка выходила одного
   тона, а итоговая того же уровня - другого */
:root[data-theme="dark"] #pnl tr.sum td.year-col,
:root[data-theme="dark"] #pnl tr.openable td.year-col { background: var(--bg-row-2); }
:root[data-theme="dark"] #pnl tr.sum td,
:root[data-theme="dark"] #pnl tr.openable td { background: var(--bg-row); }
:root[data-theme="dark"] .name-inline { background: rgba(255, 255, 255, .06); }

/* ══ Цветовые схемы ═══════════════════════════════════════════════════
   Восемь акцентов из контура SOKOLOV. Схема задаёт только акцент и его
   подложку - текст, карточки и разделители остаются нейтральными.
   Пара блоков на схему обязательна: у [data-scheme] и [data-theme] равный
   вес, и без светлого блока схема перебила бы светлую тему. */

:root[data-scheme="sokolov"] { --accent: #257ae8; --accent-soft: rgba(37,122,232,.11); }
:root[data-scheme="sokolov"][data-theme="dark"] { --accent: #4e93f0; --accent-soft: rgba(78,147,240,.18); }

:root[data-scheme="graphite"] { --accent: #404040; --accent-soft: rgba(64,64,64,.10); }
:root[data-scheme="graphite"][data-theme="dark"] { --accent: #c6cad1; --accent-soft: rgba(198,202,209,.16); }

/* Золото на белом даёт контраст 2,7:1 - подписи не прочитать, поэтому в светлой
   теме приглушено. Кружок в выборе остаётся фирменным. */
:root[data-scheme="gold"] { --accent: #8f6d00; --accent-soft: rgba(143,109,0,.11); }
:root[data-scheme="gold"][data-theme="dark"] { --accent: #dfaf23; --accent-soft: rgba(223,175,35,.18); }

:root[data-scheme="emerald"] { --accent: #308f2c; --accent-soft: rgba(48,143,44,.12); }
:root[data-scheme="emerald"][data-theme="dark"] { --accent: #48bf43; --accent-soft: rgba(72,191,67,.18); }

:root[data-scheme="ruby"] { --accent: #cc373c; --accent-soft: rgba(204,55,60,.11); }
:root[data-scheme="ruby"][data-theme="dark"] { --accent: #e4575c; --accent-soft: rgba(228,87,92,.18); }

:root[data-scheme="ocean"] { --accent: #16769f; --accent-soft: rgba(29,143,201,.11); }
:root[data-scheme="ocean"][data-theme="dark"] { --accent: #35b6f5; --accent-soft: rgba(53,182,245,.18); }

:root[data-scheme="fuchsia"] { --accent: #cc3b81; --accent-soft: rgba(204,59,129,.11); }
:root[data-scheme="fuchsia"][data-theme="dark"] { --accent: #e45c9c; --accent-soft: rgba(228,92,156,.18); }

:root[data-scheme="amethyst"] { --accent: #ad40cf; --accent-soft: rgba(173,64,207,.11); }
:root[data-scheme="amethyst"][data-theme="dark"] { --accent: #c266e0; --accent-soft: rgba(194,102,224,.18); }

/* ══ Панель оформления в шапке ════════════════════════════════════════ */

.look { position: relative; }
.look-btn {
  display: flex; align-items: center; gap: 7px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--ink-soft); font: inherit; font-size: calc(12px * var(--tk, 1)); cursor: pointer;
}
.look-btn:hover { background: var(--bg-soft); }
.look-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }

.look-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 14px; width: 272px;
  max-height: calc(var(--app-h, 100vh) - 80px); overflow-y: auto;
}
.look-menu[hidden] { display: none; }
.look-menu h4 { margin: 0 0 8px; font-size: calc(12px * var(--tk, 1)); font-weight: 600; color: var(--ink-soft); }
.look-menu h4 + .seg { margin-bottom: 14px; }

.seg { display: flex; gap: 4px; padding: 3px; background: var(--bg-soft); border-radius: 8px; }
.seg button {
  flex: 1; padding: 6px 8px; border: none; border-radius: 6px; background: none;
  color: var(--ink-soft); font: inherit; font-size: calc(12px * var(--tk, 1)); cursor: pointer;
}
.seg button.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.10); font-weight: 500; }

.scheme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.scheme-grid button {
  height: 34px; border-radius: 8px; border: 2px solid transparent; cursor: pointer;
  background: none; padding: 0; position: relative;
}
/* Тонкая рамка: тёмный кружок «Графита» на тёмной панели был не виден,
   а это схема по умолчанию - первое, что клиент открывает в оформлении */
.scheme-grid i {
  box-shadow: inset 0 0 0 1px var(--line);
  display: block; width: 24px; height: 24px; border-radius: 50%; margin: 0 auto;
}
.scheme-grid button.on { border-color: var(--accent); }

/* Ползунок свечения: дорожка красится самим акцентом, чтобы было видно,
   чем именно управляешь - при нулевом положении фон становится плоским */
.look-range { width: 100%; margin: 2px 0 14px; accent-color: var(--accent); }
.look-row { display: flex; align-items: baseline; justify-content: space-between; }
.look-row span { font-size: calc(11px * var(--tk, 1)); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.font-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.font-grid button {
  padding: 7px 6px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink-soft); font-size: calc(12px * var(--tk, 1)); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.font-grid button.on { border-color: var(--accent); color: var(--accent); }
.scheme-grid button:hover i { transform: scale(1.08); }
.scheme-grid i { transition: transform .12s; }


/* Где акцент по яркости посередине, обе крайности дают слабый контраст:
   для этих четырёх схем цвет текста на кнопке подобран отдельно */
:root[data-scheme="sokolov"] { --accent: #1d63c9; }
:root[data-scheme="emerald"] { --accent: #23761f; }

/* Свечение фона и тёмный край градиента считаются от акцента схемы, а не
   прописываются шестнадцатью блоками руками: акцент правится в одном месте,
   подача едет следом. Нейтральные значения выше остаются запасом для браузера,
   который color-mix не понимает */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --accent-d: color-mix(in srgb, var(--accent) 76%, #000000);
    --glow-1: color-mix(in srgb, var(--accent) calc(9% * var(--glow-k, 1)), transparent);
    --glow-2: color-mix(in srgb, var(--accent) calc(5% * var(--glow-k, 1)), transparent);
  }
  :root[data-theme="dark"] {
    /* 88, а не 74: на тёмной теме нижний край градиента уходил почти в чёрный,
       и тёмная подпись на кнопке теряла контраст */
    --accent-d: color-mix(in srgb, var(--accent) 88%, #000000);
    --glow-1: color-mix(in srgb, var(--accent) calc(17% * var(--glow-k, 1)), transparent);
    --glow-2: color-mix(in srgb, var(--accent) calc(11% * var(--glow-k, 1)), transparent);
  }
}

/* ── Кабинет: боковое меню разделов ───────────────────────────────── */

/* Колонка меню ровно под самое длинное название раздела - «Модерация» это
   88px текста плюс отступы кнопки. Всё, что шире, отнимает место у таблиц,
   ради которых кабинет и открывают */
body.app .wrap.cab, body .wrap.cab {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); align-items: start;
}
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav button {
  text-align: left; padding: 10px 13px; border: none; border-radius: var(--radius);
  background: none; color: var(--ink-soft); font: inherit; font-size: calc(14px * var(--tk, 1));
  font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.side-nav button:hover { background: var(--pill); color: var(--ink); }
/* Выбранный раздел - как выбранная вкладка в мини-приложении: подложка цветом
   схемы и сам текст акцентом, а не серым на сером */
/* Активный пункт: акцент на акцентной подложке не добирал контраст в
   половине схем. Берём затемнённый оттенок в светлой теме и обычный акцент
   в тёмной, где он и так светлее фона */
.side-nav button.on {
  background: var(--accent-soft); color: var(--accent-d, var(--accent)); font-weight: 700;
}
/* В тёмной теме сам акцент на своей же подложке не добирал 4.5:1 у четырёх
   схем из восьми - осветляем текст пункта */
:root[data-theme="dark"] .side-nav button.on {
  color: color-mix(in srgb, var(--accent) 72%, #ffffff);
}

@media (max-width: 900px) {
  body.app .wrap.cab, body .wrap.cab { grid-template-columns: minmax(0, 1fr); }
  /* min-width: 0 обязателен: без него лента разделов растягивается по своему
     содержимому и тянет страницу вбок, хотя у неё стоит своя прокрутка */
  .side-nav { flex-direction: row; overflow-x: auto; gap: 4px; min-width: 0; }
  .side-nav button { white-space: nowrap; flex: none; }
}

/* ── Дашборд ──────────────────────────────────────────────────────── */

.chart { width: 100%; height: 190px; display: block; }

/* Две шкалы: слева просмотры, снизу даты. Подписи держим в HTML - SVG растянут
   по ширине, и текст внутри него растянулся бы вместе с графиком */
.chart-wrap { display: flex; gap: 10px; }
/* Что показывает вертикальная шкала. Без подписи график читался как
   «что-то растёт»: на встрече это спросили вслух */
.chart-name {
  font-size: calc(11px * var(--tk, 1)); color: var(--ink-soft);
  margin: 0 0 4px 2px;
}

.chart-y {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 190px; min-width: 42px; text-align: right;
  font-size: calc(11px * var(--tk, 1)); color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.chart-y span { line-height: 1; transform: translateY(-50%); }
.chart-y span:first-child { transform: none; }
.chart-y span:last-child { transform: translateY(-100%); }
.chart-area { flex: 1; min-width: 0; }
.chart-x {
  position: relative; height: 16px; margin-top: 6px;
  font-size: calc(12px * var(--tk, 1)); color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.chart-x span { position: absolute; top: 0; white-space: nowrap; }
.plat-row {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: calc(14px * var(--tk, 1)); color: var(--ink-soft);
}
.plat-row b { color: var(--ink); font-weight: 600; }

.seg.small button { padding: 5px 10px; font-size: calc(12px * var(--tk, 1)); }
.btn.btn-sm { padding: 6px 12px; font-size: calc(12px * var(--tk, 1)); }
.btn.btn-sm.main { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.qcard { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--bg); }
.q-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.q-top b { font-weight: 600; min-width: 0; }
.q-top .tag { margin-left: auto; }
.q-topic { font-size: calc(12px * var(--tk, 1)); color: var(--ink-faint); margin-bottom: 8px; }
.q-why { font-size: calc(14px * var(--tk, 1)); color: var(--ink-soft); margin-bottom: 12px; min-height: 40px; }
/* Три кнопки и подпись срока на телефоне в строку не влезают:
   без переноса «Запросить скрин гео» уезжала за правый край экрана */
.q-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

@media (min-width: 901px) {
  body.app .wrap.cab { overflow: hidden; }
  body.app .wrap.cab .main-col {
    height: 100%; min-height: 0; display: flex; flex-direction: column;
  }
  /* Прокручивается содержимое экрана, а не колонка: липкая шапка таблицы
     должна оставаться в своём контейнере */
  /* Вбок прокручивается только таблица внутри своей рамки. Если разрешить
     горизонтальную прокрутку всей колонке, широкая таблица утаскивает за собой
     карточки и они уезжают под боковое меню */
  body.app #viewPnl, body.app #screen {
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px;
    scrollbar-gutter: stable;
  }
  body.app #screen > .card { max-width: 100%; min-width: 0; }
  body.app #viewPnl { display: flex; flex-direction: column; }
  /* display из правил раскладки перебивает [hidden] - возвращаем скрытие */
  body.app #viewPnl[hidden], body.app #screen[hidden] { display: none !important; }
  body.app #viewPnl > .card:last-child { display: flex; flex-direction: column; min-height: 0; flex: 1; }
}

/* Вкладки в шапке - кнопки, экраны переключаются внутри страницы */
.tabs button {
  padding: 7px 14px; border: none; border-radius: 8px; background: none;
  color: var(--ink-soft); font: inherit; font-weight: 500; font-size: calc(14px * var(--tk, 1));
  white-space: nowrap; cursor: pointer;
}
.tabs button:hover { background: var(--bg-soft); color: var(--ink); }
.tabs button.on { background: var(--accent-soft); color: var(--accent); }

/* Сворачивание карточек за заголовок */
.card > header { cursor: pointer; user-select: none; }
.card-fold {
  border: none; background: none; padding: 0; margin-right: -2px;
  color: var(--ink-faint); font-size: calc(12px * var(--tk, 1)); cursor: pointer; line-height: 1;
}
.card.folded > header { border-bottom: none; }

/* Карточки дашборда закреплены: цифры видны на любой прокрутке.
   Липнут к верху своего контейнера - в кабинете прокручивается .wrap.cab. */
#screen .stats {
  /* top отрицательный на величину padding: иначе точка прилипания оказывается
     ниже верха подложки, и в зазор видно проезжающий контент */
  position: sticky; top: -20px; z-index: 10;
  background: var(--bg-soft);
  /* Подложка шире карточек: иначе в промежутки и по бокам видно, как под ними
     проезжает содержимое страницы */
  margin: -20px -20px 2px !important;
  padding: 20px 20px 14px;
}
#screen .stats::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: linear-gradient(var(--bg-soft), transparent); pointer-events: none;
}

@media (max-width: 900px) {
  #screen .stats { position: static; }
}
@media print {
  #screen .stats { position: static; }
  #screen .stats::after { display: none; }
}

/* Меню разделов тоже закреплено: иначе при прокрутке до низа таблицы
   не переключить раздел, не возвращаясь наверх */
@media (min-width: 901px) {
  /* Меню липнет со своей подложкой - оно в соседней колонке от карточек */
  /* Меню лежит на своей подложке, как все остальные блоки кабинета: без неё
     пункты висели прямо на полотне и читались как случайный текст сбоку.
     Подложка же закрывает уезжающие под меню строки при прокрутке -
     маска фоном страницы больше не нужна */
  body.app .wrap.cab .side-nav {
    position: sticky; top: 0; align-self: start; z-index: 11;
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius-card); box-shadow: var(--shadow);
    padding: 8px; gap: 2px;
  }
}

/* ── Экран модерации ──────────────────────────────────────────────── */

/* Шапка раздела держится при прокрутке: вкладки, срок разбора и выбор
   вида нужны на любой строке очереди, а не только на первой. Правка
   Павла 17.09.2026 */
.moder-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 8; background: var(--bg-soft);
  padding: 6px 0 4px; margin-top: -6px;
}
.deadline { font-size: calc(12px * var(--tk, 1)); color: var(--ink-soft); }

/* Очередь шире: в 230 пикселей ФИО ломалось на две строки и час ожидания
   отрывался от имени. Карточка сюжета справа от этого не страдает - у неё
   внутри свои таблицы со своей прокруткой */
/* Очередь шире карточки-минимума: в 290 px «Александров Иван Павлович» и
   «47 ч» не вставали в строку, имя резалось многоточием у каждого второго.
   Справа остаётся место на три плитки соц. сетей */
.moder { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1300px) { .moder { grid-template-columns: 290px minmax(0, 1fr); } }

.qlist { display: flex; flex-direction: column; gap: 6px; }
.qitem {
  text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  /* color обязателен: у кнопок он не наследуется от страницы, а берётся системный */
  background: var(--bg); font: inherit; color: var(--ink); cursor: pointer;
}
.qitem:hover { border-color: var(--ink-faint); }
.qitem.on { border-color: var(--accent); background: var(--accent-soft); }
.qitem.on .qi-top, .qitem.on .qi-why { color: var(--ink); }

/* Просроченное видно заливкой, а не одной полоской слева: модератор смотрит
   на список целиком и должен за секунду понять, с чего начинать. Две ступени,
   пороги правятся в «Настройки - Модерация».
   Правила стоят ПОСЛЕ базовых .qitem: выше по файлу их перебивал фон карточки */
/* Две ступени разного цвета, а не оттенка одного - иначе 24 ч и 71 ч
   выглядят одинаково «красными», и не видно, где действительно горит.
   Правка Павла 16.09.2026 */
.qitem.late {
  border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, var(--bg));
}
.qitem.hot {
  border-left: 3px solid var(--bad);
  background: color-mix(in srgb, var(--bad) 24%, var(--bg));
}
.qitem.late .qi-name, .qitem.hot .qi-name { font-weight: 700; }

/* Очередь списком - правка Павла 15.09.2026. Просрочка подсвечена теми же
   тонами, что карточки слева: одна шкала срочности на оба вида.
   late и hot - разные цвета (жёлтый/красный), а не оттенки одного -
   правка Павла 16.09.2026, иначе 24 ч и 71 ч читаются одинаково «горит» */
tr.qrow { cursor: pointer; }
tr.qrow.late td { background: color-mix(in srgb, var(--warn) 14%, var(--bg)); }
tr.qrow.hot td { background: color-mix(in srgb, var(--bad) 18%, var(--bg)); }
tr.qrow.late td.name, tr.qrow.hot td.name { font-weight: 700; }
/* :hover после тонировок: специфичность равная, и раньше поздние правила
   гасили отклик на просроченных строках. У late/hot тонировка на наведении
   сохраняется, только чуть гуще - GLM-находка 15.09.2026 */
tr.qrow:hover td { background: var(--bg-soft); }
tr.qrow.late:hover td { background: color-mix(in srgb, var(--warn) 18%, var(--bg-soft)); }
tr.qrow.hot:hover td { background: color-mix(in srgb, var(--bad) 24%, var(--bg-soft)); }
/* Закреплённая первая колонка красится своим id-правилом (#screen .col-stick)
   и оставалась белой на тонированных строках - перекрываем той же гаммой */
#screen tr.qrow.late .col-stick { background: color-mix(in srgb, var(--warn) 14%, var(--bg)); }
#screen tr.qrow.hot .col-stick { background: color-mix(in srgb, var(--bad) 18%, var(--bg)); }
#screen tr.qrow.late:hover .col-stick { background: color-mix(in srgb, var(--warn) 18%, var(--bg-soft)); }
#screen tr.qrow.hot:hover .col-stick { background: color-mix(in srgb, var(--bad) 24%, var(--bg-soft)); }
/* Строка развёрнута - подсветка та же, что у выбранной карточки слева.
   Специфичность .late/.hot и их :hover выше двух классов - без явного
   повтора открытая просроченная строка на наведении красилась в их
   красноватый тон вместо accent-soft. GLM-находка 16.09.2026 */
tr.qrow.open td { background: var(--accent-soft); }
tr.qrow.open.late td, tr.qrow.open.hot td,
tr.qrow.open.late:hover td, tr.qrow.open.hot:hover td { background: var(--accent-soft); }
/* Закреплённая первая колонка красится отдельным #screen-правилом
   (см. .col-stick выше) - тот же перебой специфичности повторяется и там */
#screen tr.qrow.open .col-stick { background: var(--accent-soft); }
#screen tr.qrow.open.late .col-stick, #screen tr.qrow.open.hot .col-stick,
#screen tr.qrow.open.late:hover .col-stick,
#screen tr.qrow.open.hot:hover .col-stick { background: var(--accent-soft); }
tr.qrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
tr.qrow .chev {
  display: inline-block; margin-right: 6px; color: var(--ink-faint);
  transition: transform .15s; font-size: 11px;
}
tr.qrow.open .chev { transform: rotate(90deg); color: var(--accent); }
/* Развёрнутая карточка сюжета лежит в своей строке, на тонированной
   подложке - белая карточка внутри читается как всплывшая деталь */
tr.qrow-body > td { background: var(--bg-soft); padding: 14px; }
tr.qrow-body .card { margin: 0; }
/* Переключатель вида - своя строка под вкладками, а не среди фильтров
   повода и срока - решение Павла 15.09.2026 */
/* Выбор вида держится под шапкой раздела: она липкая, и полоса под ней
   тоже - иначе при прокрутке очереди пропадал переключатель. Смещение
   считаем после отрисовки, шапка бывает в одну и в две строки */
#screen .view-row {
  position: sticky; top: var(--moder-head-h, 46px); z-index: 7;
  background: var(--bg-soft); padding-bottom: 6px;
}
.view-row {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-soft);
}
.view-row .muted { font-size: calc(12.5px * var(--tk, 1)); }
/* Та же полоса фильтров над списком: базовый .qfilters собран колонкой под
   узкую панель очереди, на всю ширину селекты распластались друг под другом */
.qfilters.pad-line {
  padding: 14px 18px 4px; margin-bottom: 0;
  flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center;
}
.qfilters.pad-line select { width: auto; }
/* Выбранная карточка остаётся выбранной: рамка важнее срока */
.qitem.on, .qitem.late.on, .qitem.hot.on { background: var(--accent-soft); }
.qitem.on .qi-top .muted { color: var(--ink-soft); }
.qitem.done { opacity: .45; }
.qi-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: calc(14px * var(--tk, 1)); font-weight: 500;
  color: var(--ink); line-height: 1.3;
}
/* Длинное ФИО режем многоточием: у крупной сети имена длиннее, и карточка
   очереди вылезала за край телефона на два десятка пикселей */
.qi-top > span:first-child, .qi-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qi-why { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Срок стоит в одну строку и не жмётся: у просроченных он рисуется своим
   классом, и правило «не переносить» его не задевало - «47 ч» ломалось
   пополам, а имя налезало на цифру */
.qi-top .muted, .qi-top .qi-late {
  font-weight: 400; font-size: calc(12px * var(--tk, 1));
  white-space: nowrap; flex: none; font-variant-numeric: tabular-nums;
}
.qi-top .qi-late { font-weight: 700; }
.qi-why { font-size: calc(12px * var(--tk, 1)); color: var(--ink-soft); margin-top: 4px; }

.light { font-size: calc(12px * var(--tk, 1)); font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.light.ok { background: var(--good-bg); color: var(--good); }
.light.warn { background: var(--warn-bg); color: var(--warn); }

.plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.plate {
  display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; color: var(--ink); background: var(--bg);
}
.plate:hover { border-color: var(--accent); background: var(--accent-soft); }
.plate-top { display: flex; justify-content: space-between; font-weight: 600; font-size: calc(14px * var(--tk, 1)); }
.plate-top .muted { font-weight: 400; font-size: calc(12px * var(--tk, 1)); }
.plate-url { font-size: calc(12px * var(--tk, 1)); color: var(--ink-faint); margin: 6px 0; word-break: break-all; }
.plate-num { font-size: calc(14px * var(--tk, 1)); font-weight: 600; }

.checks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 14px; }
.chk { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--tk, 1)); color: var(--ink-soft); padding: 3px 0; }
.chk-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: calc(12px * var(--tk, 1)); font-weight: 700; flex: none;
}
.chk.pass .chk-i { background: var(--good-bg); color: var(--good); }
.chk.flag { color: var(--ink); font-weight: 500; grid-column: 1 / -1; }
.chk.flag .chk-i { background: var(--warn-bg); color: var(--warn); }
.chk.skip .chk-i { background: var(--bg-soft); color: var(--ink-faint); }
.chk-why { color: var(--warn); font-weight: 400; font-size: calc(12px * var(--tk, 1)); margin-left: 4px; }

/* Тёмная подложка под белым знаком клавиши: осветлённая давала контраст
   ниже нормы во всех светлых схемах кроме графита */
.key {
  display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: calc(12px * var(--tk, 1));
  /* Подложка знака клавиши подстраивается под тему: в светлой она затемняет
     кнопку под белым знаком, в тёмной наоборот осветляет под тёмным.
     Одним значением контраст не добирался ни там, ни там */
  background: rgba(0, 0, 0, .28); margin-left: 6px;
}
:root[data-theme="dark"] .btn.main .key { background: rgba(255, 255, 255, .34); }

.btn:not(.main) .key { background: var(--bg-soft); color: var(--ink-faint); }

.decided {
  margin-top: 18px; padding: 10px 14px; border-radius: 8px; font-size: calc(14px * var(--tk, 1)); font-weight: 500;
}
.decided.ok { background: var(--good-bg); color: var(--good); }
.decided.no { background: var(--bad-bg); color: var(--bad); }

@media (max-width: 900px) {
  .moder { grid-template-columns: minmax(0, 1fr); }
  .qlist { flex-direction: row; overflow-x: auto; }
  .qitem { min-width: 190px; }
}

/* Поля компании занимают две доли: название и ниша длиннее числовых */
.settings-grid .field.wide-2 { flex: 0 1 220px; }
.settings-grid .field.wide-2 input { width: 100%; }
.settings-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
/* Та же полоса, но первым блоком вкладки «Мотивация»: сверху отделять
   нечего, линия и отступ только рвали начало экрана. Макет согласован
   Павлом 16.09.2026 */
.settings-foot.foot-top {
  margin-top: 0; padding-top: 0; padding-bottom: 14px; border-top: 0;
  border-bottom: 1px solid var(--line-soft);
}
.saved-note { font-size: calc(12px * var(--tk, 1)); color: var(--good); }

/* ── Компактные настройки ─────────────────────────────────────────── */

/* Свёрнутая карточка не должна занимать высоту: растягивается только таблица */
body.app #viewPnl > .card.settings { flex: 0 0 auto; }
.card.folded { flex: 0 0 auto !important; }

.settings .body { padding: 12px 16px 14px; }
.settings-grid { gap: 10px 16px; }
.settings-grid .field label { font-size: calc(12px * var(--tk, 1)); margin-bottom: 3px; }
.settings-grid .field input[type=text],
.settings-grid .field input[type=number],
.settings-grid .field input[type=date] {
  height: 32px; padding: 5px 9px; font-size: calc(14px * var(--tk, 1));
}
.settings-grid .field input[type=number] { width: 78px; }
.settings-grid .field input[type=date] { width: 148px; }
.settings-grid .field.wide-2 { flex: 0 1 190px; }
.checks.flat { height: 32px; gap: 10px; }
.checks.flat label { font-size: calc(13px * var(--tk, 1)); }
.settings-foot { margin-top: 10px; padding-top: 10px; }
.settings-foot .btn { padding: 6px 14px; font-size: calc(13px * var(--tk, 1)); }

/* Строка разрезов под заголовком: шесть кнопок в шапку не помещаются */
.cut-row {
  padding: 10px 16px; border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
}
.cut-row .seg { display: inline-flex; width: auto; }
.cut-row .seg button { white-space: nowrap; }

/* Счётчик ждущих заявок на вкладке. Своего раздела у заявок больше нет,
   и единственный сигнал «тут что-то ждёт решения» - эта цифра */
.tab-wait {
  display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 4px;
  font-style: normal; font-size: calc(10.5px * var(--tk, 1)); font-weight: 700;
  line-height: 15px; text-align: center; border-radius: 8px;
  background: var(--accent); color: var(--on-accent, #fff);
}
/* Полоса заявок над таблицей раздела */
.req-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.req-strip .qcard { flex: 0 1 300px; }

/* Карточки закрепляем только там, где их просили - на дашборде.
   В отчётах они перекрывали заголовок таблицы. */
#screen .stats { position: static; margin: 0 0 16px !important; padding: 0; }
#screen .stats::after { display: none; }
/* Липнет вся карточка вместе с заголовком. Раньше липли одни числа и наезжали
   на «Главные показатели», срезая заголовок пополам */
/* Карточки показателей стоят ровно по краям таблиц под ними: подложка
   липкости растягивается псевдоэлементом, а не отступами самой карточки -
   иначе полоса заканчивалась на 40 px левее, и правый край дашборда рвался */
body.app #screen[data-sticky="1"] > .card.plain {
  position: sticky; top: 0; z-index: 10;
  margin: 0 0 16px !important; padding: 12px 0 10px;
}
/* Подложка липких карточек декоративная, кликов не ловит: на узком экране
   она растянута за края карточки и накрывала ленту разделов - нажать
   «Модерацию» с телефона было невозможно */
body.app #screen[data-sticky="1"] > .card.plain::before {
  content: ""; position: absolute; left: -20px; right: -20px; top: 0; bottom: 0;
  background: var(--canvas); background-attachment: fixed; z-index: -1;
  pointer-events: none;
}
body.app #screen[data-sticky="1"] > .card.plain::after {
  content: ""; display: block; position: absolute; left: -20px; right: -20px;
  bottom: -14px; height: 14px;
  background: linear-gradient(var(--bg-soft), transparent); pointer-events: none;
}
body.app #screen[data-sticky="1"] .stats { position: static; margin: 0 !important; padding: 0; }

/* display: flex перебивает [hidden] - возвращаем скрытие явно */
/* Спрятанное обязано прятаться. Любой блок, которому мы задали свой display
   (grid у доски плана, flex у карточки), перебивает браузерное правило для
   [hidden] - они равны по весу, и выигрывает тот, кто ниже в файле. Ловилось
   уже четырежды по месту: настройки, тело карточки, рамка таблицы, экран.
   11.09.2026 поймано в пятый раз - свёрнутая доска плана не пряталась,
   а раздувала карточку с 589 до 4039 px */
[hidden] { display: none !important; }
.settings-grid[hidden], .card > .body[hidden] { display: none !important; }

/* ── Проверки под своей площадкой ─────────────────────────────────── */

.plat-block {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
}
.plat-block.has-flag { border-color: var(--warn); background: var(--warn-bg); }
.plat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plat-name { font-weight: 600; font-size: calc(15px * var(--tk, 1)); color: var(--ink); text-decoration: none; }
a.plat-name:hover { color: var(--accent); text-decoration: underline; }
.plat-views { font-size: calc(14px * var(--tk, 1)); font-weight: 600; }
.plat-head .light { margin-left: auto; }
.plat-block .plat-url { font-size: calc(12px * var(--tk, 1)); color: var(--ink-faint); margin: 4px 0 10px; word-break: break-all; }
.plat-block .checks-grid { gap: 4px 14px; }

/* ── Низкий экран: таблица важнее настроек ────────────────────────── */

.hint-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--bg-soft);
  color: var(--ink-faint); font-size: calc(12px * var(--tk, 1)); cursor: help; flex: none;
}

@media (min-width: 901px) and (max-height: 820px) {
  .settings .body { padding: 8px 14px 10px; }
  .settings-grid { gap: 8px 14px; }
  .settings-grid .field label { font-size: calc(12px * var(--tk, 1)); margin-bottom: 2px; }
  .settings-grid .field input[type=text],
  .settings-grid .field input[type=number],
  .settings-grid .field input[type=date] { height: 28px; padding: 3px 8px; }
  .checks.flat { height: 28px; gap: 9px; }
  .checks.flat label { font-size: calc(12px * var(--tk, 1)); }
  .settings-foot { margin-top: 8px; padding-top: 8px; }
  .settings-foot .btn { padding: 4px 12px; font-size: calc(12px * var(--tk, 1)); }
  .card > header { padding: 9px 14px; }
  .settings-grid .field.wide-2 { flex: 0 1 160px; }
  .settings-grid .field input[type=number] { width: 66px; }
  .settings-grid .field input[type=date] { width: 132px; }
}

/* Таблице отдаём не меньше половины рабочей области */
body.app #viewPnl > .card:last-child { min-height: calc(var(--app-h, 100vh) * 0.52); }

/* Плюс и минус читаются быстрее треугольников */
#pnl .tw { width: 18px; margin-left: -18px; font-size: calc(14px * var(--tk, 1)); font-weight: 600; color: var(--ink-soft); }

/* ── Площадки колонками: плитка сверху, проверки под ней ──────────── */

.plat-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.plat-col {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-width: 0;
}
.plat-col.has-flag { border-color: var(--warn); background: var(--warn-bg); }
.plat-col .plate { border: none; padding: 0; background: none; }
.plat-col .plate:hover { background: none; }
.plat-col .plate:hover .plate-top { color: var(--accent); }
.plat-verdict { margin: 10px 0; }
.checks-col { display: flex; flex-direction: column; gap: 5px; }
.checks-col .chk { font-size: calc(13px * var(--tk, 1)); padding: 0; }
/* На базовом экране 1280×590 карточке сюжета не хватало 121 px до
   одного экрана, а с четвёртой соц. сетью станет теснее. Десять проверок
   встают в две колонки - чистые парами, флаг во всю ширину со своим
   пояснением. Правило `.chk.flag { grid-column: 1 / -1 }` для этого уже
   было. Правка Павла 17.09.2026 */
html[data-low] .checks-col { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
/* Карточка живёт внутри ячейки таблицы, а та по общему правилу
   `th, td { white-space: nowrap }`. В одну колонку это не мешало, в две
   строки налезали друг на друга: длинной подписи негде переноситься */
html[data-low] .checks-col .chk {
  white-space: normal; min-width: 0; align-items: flex-start; flex-wrap: wrap;
  font-size: calc(12px * var(--tk, 1)); line-height: 1.25; gap: 6px;
}
html[data-low] .checks-col .chk-i { margin-top: 1px; }
/* Пояснение уходит под подпись, а не встаёт рядом: в узкой колонке
   «скрин не запрашивали» рядом с «Доля целевого гео» ломало строку на три */
html[data-low] .checks-col .chk-why { flex-basis: 100%; margin: 1px 0 0 24px; }
html[data-low] #screen .stat-toggle { margin-top: 4px; padding: 4px 0; }
html[data-low] #screen .qrow-body > td > .card > .body { padding-bottom: 8px; }
html[data-low] .plat-col { padding: 9px; }
html[data-low] .plat-verdict { margin: 6px 0 5px; }
html[data-low] .plat-cols { gap: 8px; }
.checks-col .chk.flag { flex-wrap: wrap; }
.checks-col .chk-why { flex-basis: 100%; margin: 2px 0 0 26px; }

.story-check {
  margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
}
.story-check.has-flag { border-color: var(--warn); background: var(--warn-bg); }

/* Карточка сюжета обязана помещаться в один экран: свёрнуто показываем только
   то, что требует внимания, полный список - по кнопке */
.plat-verdict { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; }
.chk-more {
  border: none; background: none; padding: 0; margin-left: auto;
  color: var(--ink-faint); font: inherit; font-size: calc(12px * var(--tk, 1)); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.chk-more:hover { color: var(--accent); }
.checks-col:empty { display: none; }
.plat-col .plate-num { margin-top: 4px; }

/* На низком экране карточка сюжета ужимается ещё */
@media (min-width: 901px) and (max-height: 820px) {
  .plat-col { padding: 10px; }
  .plat-col .plate-url { margin: 3px 0 6px; font-size: calc(12px * var(--tk, 1)); }
  .plat-verdict { margin: 8px 0 6px; }
  .story-check { margin-top: 8px; padding: 8px 10px; }
  .moder-head { margin-bottom: 10px; }
  .card > .body h3 { margin: 12px 0 6px !important; }
  #screen table th, #screen table td { padding: 6px 10px; }
}

/* Статистика сюжета свёрнута: без этого карточка не влезает в ноутбучный экран */
.stat-toggle {
  display: block; width: 100%; text-align: left; margin: 14px 0 0; padding: 8px 0;
  border: none; border-top: 1px solid var(--line-soft); background: none;
  color: var(--ink-soft); font: inherit; font-size: calc(14px * var(--tk, 1)); font-weight: 600; cursor: pointer;
}
.stat-toggle::before { content: "+ "; color: var(--ink-faint); }
.stat-toggle.open::before { content: "− "; }
.stat-toggle:hover { color: var(--ink); }
.scroll[hidden] { display: none !important; }

/* ── Калькулятор мотивации ────────────────────────────────────────── */

.motiv-grid { display: grid; grid-template-columns: 1fr 1.55fr 0.95fr; gap: 12px; }
/* Три блока обязаны стоять в один ряд - заголовки на одной строке. Раньше
   ряд ломался уже на 1500 px; после того как поле диапазона ужали до 56 px,
   они помещаются на штатном ноутбуке. Ниже 1280 просмотры уходят своей
   строкой. Макет согласован Павлом 16.09.2026 */
/* Ширину берём из data-w, а не из медиазапроса: тот меряет окно без учёта
   масштаба, и на базовом экране 1280×590 (1280 физических, 1828 своих)
   ряд ломался там, где места хватало с запасом. Решение Павла 16.09.2026 */
html[data-w="l"] .motiv-grid,
html[data-w="m"] .motiv-grid {
  /* Когда ряд не влезает, «Призовые места» падали третьей строкой и справа
     оставалось пустое поле в пол-экрана. Теперь два узких блока идут
     колонкой слева, широкий встаёт рядом на всю их высоту - у него пять
     ступеней против трёх, высоты сходятся. Макет согласован 16.09.2026.

     Доли, а не max-content: таблицы внутри - table-layout:fixed с
     width:100%, и в колонке по содержимому проценты считать не от чего -
     браузер разносил колонку в 500 002 px, а блоки схлопывались в пустые
     полосы. Доли 0.85/1.15 - по замеру: узкому блоку нужно 408 px,
     широкому 472 */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}
html[data-w="l"] .motiv-box.wide,
html[data-w="m"] .motiv-box.wide { grid-column: 2; grid-row: 1 / span 2; order: 0; }
html[data-w="s"] .motiv-box.wide,
html[data-w="xs"] .motiv-box.wide { grid-column: 1; grid-row: auto; }
html[data-w="s"] .motiv-grid,
html[data-w="xs"] .motiv-grid { grid-template-columns: 1fr; }
/* Таблица ставок прокручивается в своей рамке, а не режется ею. У блока
   стоит overflow:hidden ради скруглённых углов - в узкой колонке он молча
   съедал правую половину «Новая». Правило только для сетки мотивации:
   у модерации на том же классе свои блоки */
.motiv-grid > .motiv-box { overflow-x: auto; overflow-y: hidden; }
/* Поля даём ячейкам, а не карточке: раньше шапка обрывалась за 12 px до
   границы, и серые полосы «Сейчас / Новая» висели в белой рамке */
.motiv-box { border: 1px solid var(--line); border-radius: 10px; padding: 0 0 6px; overflow: hidden; }
/* На телефоне таблице выдан min-width, и правая половина «Новая» уходила
   под срез: overflow:hidden её не отдаёт, а страница вбок не едет вовсе */
@media (max-width: 640px) { .motiv-box { overflow-x: auto; } }
.motiv-box > .mc-check, .motiv-box > .mc-lists { margin: 8px 12px 4px; }
/* Пороги модерации: три блока в ряд, словари под ними во всю ширину.
   На общей сетке мотивации словари занимали одну треть, а справа
   оставалось пустое поле в половину экрана */
.moder-grid { grid-template-columns: 1fr 1.35fr 1fr; align-items: start; }
.moder-grid .motiv-box.wide { grid-column: 1 / -1; order: 9; }
/* Ширину берём честную, а не из медиазапроса: на базовом экране
   заказчика окно 1280, а у страницы 1828 своих - три блока в ряд
   помещаются, и ряд не надо ломать на две колонки */
html[data-w="l"] .moder-grid,
html[data-w="m"] .moder-grid { grid-template-columns: 1fr 1fr; }
html[data-w="s"] .moder-grid,
html[data-w="xs"] .moder-grid { grid-template-columns: 1fr; }
/* Словари без плашки-шапки: подписи полей и так говорят, что это */
.mc-lists-box > .mc-lists { padding-top: 4px; }
/* На широком экране словари встают четвёртой колонкой, а не полосой под
   блоками: полосой они добавляли вкладке 161 px и выносили её за экран,
   а справа от трёх блоков всё равно пустовало поле. Списки внутри
   колонки идут друг под другом. Правка Павла 16.09.2026 */
html[data-w="xl"] .moder-grid { grid-template-columns: 1fr 1.3fr 1fr 1.05fr; }
html[data-w="xl"] .moder-grid .motiv-box.wide { grid-column: auto; }
html[data-w="xl"] .mc-lists-box .mc-lists { grid-template-columns: 1fr; gap: 10px; }
/* На низком экране вкладке не хватало высоты до одного экрана. Берём её
   воздухом, а не содержанием: поле словаря на три строки вместо пяти
   (списки тут короткие, и оно всё равно прокручивается) и промежутки
   сетки чуть теснее. Правка Павла 16.09.2026 */
html[data-low] .mc-area { height: calc(58px * var(--tk, 1)); }
html[data-low] .moder-grid { gap: 8px; }
html[data-low] .mc-budget { margin-bottom: 8px; }
/* Название таблицы сидит на той же подложке, что и шапка: иначе шапка
   начиналась под белым заголовком и читалась как отдельный кусок */
.motiv-box h3 {
  margin: 0; padding: 9px 12px 8px;
  font-size: calc(13px * var(--tk, 1)); font-weight: 700; color: var(--ink);
  background: var(--bg-soft); border-radius: 9px 9px 0 0;
  border-bottom: 1px solid var(--line);
}

/* Слева то, что действует сейчас, справа то, что предлагаем */
.motiv-t {
  width: 100%; min-width: 250px; table-layout: fixed;
  border-collapse: separate; border-spacing: 0; margin-bottom: 2px;
}
/* Деление ровно пополам между «Сейчас» и «Новой», а внутри пары
   диапазону нужно больше места, чем ставке */
.motiv-t.half col { width: 20%; }
.motiv-t.half col:nth-child(1), .motiv-t.half col:nth-child(3) { width: 30%; }
.motiv-t.places col { width: 34%; }
.motiv-t.places col + col { width: 33%; }
.motiv-t.places col + col + col { width: 33%; }

/* Шапка на подложке, как во всех таблицах кабинета: без неё три таблицы
   мотивации начинались прямо с цифр, и было не видно, где заканчиваются
   заголовки и начинаются ставки */
/* Три яруса шапки - название таблицы, «Сейчас / Новая», названия колонок -
   раньше были одного серого цвета и читались кашей. Теперь у каждого своя
   роль: группа тёмная и вразрядку, названия колонок светлые и тонкие */
.motiv-t th {
  padding: 4px 6px; font-size: calc(11px * var(--tk, 1)); font-weight: 600; line-height: 1.2;
  color: var(--ink-faint); text-align: center; border: none;
  background: var(--bg-soft); white-space: nowrap;
}
/* Вес поднят до #screen: общие правила таблиц кабинета перебивали и высоту
   ярусов, и перенос строк - «Ставка ₽» в крайней колонке ломалась надвое */
#screen .motiv-t th { white-space: nowrap; font-size: calc(11px * var(--tk, 1)); }
/* Оба яруса одной высоты: у «призовых мест» подпись строки занимает обе
   строки шапки через rowspan, и при разной высоте нижний ярус в трёх
   блоках выходил то 26, то 28 px */
#screen .motiv-t thead th { height: 27px; vertical-align: middle; }
/* Отделяем только нижнюю строку шапки от данных: линия между ярусами
   дробила и без того тесную шапку на три полосы */
.motiv-t thead tr:last-child th { border-bottom: 1px solid var(--line); }
.motiv-t th.grp {
  color: var(--ink); font-weight: 700; letter-spacing: .04em;
  background: var(--bg-head); border-bottom: 1px solid var(--line);
}
/* Подпись строки стоит вне деления на половины: место и диапазон
   относятся к обеим сразу */
.motiv-t th.row-lbl {
  background: var(--bg-soft); color: var(--ink-soft); font-weight: 600;
  border-bottom: 1px solid var(--line);
}

.motiv-t th:first-child, .motiv-t td:first-child { padding-left: 12px; }
.motiv-t th:last-child, .motiv-t td:last-child { padding-right: 12px; }
.motiv-t td {
  padding: 4px 4px; border: none; font-size: calc(13px * var(--tk, 1));
  text-align: center; white-space: nowrap; vertical-align: middle;
}
.motiv-t td.old { color: var(--ink-soft); }

/* Разлиновка как в P&L: строки отделены по горизонтали, колонки по
   вертикали. Без линий три таблицы читались сплошным полем цифр, и глаз
   не понимал, где кончается ступень */
.motiv-t tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.motiv-t tbody td + td { border-left: 1px solid var(--line-soft); }
.motiv-t thead tr + tr th + th { border-left: 1px solid var(--line-soft); }
/* Граница между «Сейчас» и «Новой» заметнее прочих - это стык двух половин */
.motiv-t .sep { border-left: 1px solid var(--line) !important; }

/* Диапазоны: обе половины в слотах своей ширины, группа целиком по центру
   ячейки. Левое число прижато ВПРАВО - вплотную к тире, иначе «0» отрывался
   от него на полстроки. Ширина группы одна на все строки и на обе половины:
   тире стоит в одной вертикали, столбец не рвётся. Макет согласован
   Павлом 16.09.2026 */
.motiv-t td.mid, .motiv-t th.mid { text-align: center; }
.motiv-t .rng {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
/* Поле диапазона держит шестизначное «500000» целиком - при 56px его
   резало. Запас на ряд отыгран у колонки ставок: там пятизначного
   «30000» хватает с избытком. Макет согласован Павлом 16.09.2026 */
.motiv-t .rng input { min-width: 73px; max-width: 73px; flex: 0 0 auto; }
.motiv-t .rng .from { text-align: right; flex: 0 0 auto; }
.motiv-t .rng .to { text-align: left; flex: 0 0 auto; }
/* Строка без диапазона («от 60», «от 500 000») тянется на всю группу и
   центруется - иначе её край не совпадал с остальными строками */
.motiv-t .rng .solo { flex: 1 1 auto; text-align: center; }
.motiv-t.views .rng { min-width: calc(146px * var(--tk, 1)); }
.motiv-t.views .rng .from, .motiv-t.views .rng .to { min-width: 4.2em; }
/* Ширина поля своя у каждой таблицы: 73px заведены под шестизначное
   «500000» в просмотрах, а в роликах граница двузначная - и группа
   не помещалась в свою колонку, наезжая на соседнюю */
.motiv-t.stories .rng { min-width: calc(90px * var(--tk, 1)); }
.motiv-t.stories .rng input { min-width: 48px; max-width: 48px; }
.motiv-t.stories .rng .from, .motiv-t.stories .rng .to { min-width: 1.6em; }
.motiv-t .rng .from, .motiv-t .rng .to { font-style: normal; color: var(--ink-soft); }
.motiv-t .rng .tire { font-style: normal; color: var(--ink-faint); }

/* Все поля на экране одного размера */
.motiv-t input {
  width: 100%; max-width: 70px; min-width: 60px; height: 30px; padding: 2px 6px;
  font: inherit; font-size: calc(13px * var(--tk, 1));
  text-align: center; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); -moz-appearance: textfield;
}
.motiv-t input::-webkit-outer-spin-button,
.motiv-t input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.motiv-t input:focus { outline: none; border-color: var(--accent); }
.motiv-t input.changed { border-color: var(--warn); }
.motiv-t input.bad { border-color: var(--bad, #d64545); background: rgba(214, 69, 69, 0.06); }

.motiv-sum {
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.motiv-sum > div { display: flex; align-items: baseline; gap: 8px; font-size: calc(14px * var(--tk, 1)); }
.motiv-sum b { font-size: calc(17px * var(--tk, 1)); font-weight: 650; }
.motiv-total { margin-left: auto; }
.motiv-total .ok, .motiv-total .no { font-size: calc(13px * var(--tk, 1)); font-weight: 600; }

/* ── Тренды ниши ──────────────────────────────────────────────────── */

.trends { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.trend { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.trend-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.trend-top b { font-size: calc(15px * var(--tk, 1)); font-weight: 600; }
.trend-top .pill { margin-left: auto; }
.trend-what { font-size: calc(13px * var(--tk, 1)); color: var(--ink-soft); margin-bottom: 10px; min-height: 34px; }
.trend-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: calc(12px * var(--tk, 1)); color: var(--ink-faint); }
.trend-foot span:nth-child(2) { color: var(--ink-soft); }
.trend-link {
  display: inline-block; margin-top: 8px; font-size: calc(12px * var(--tk, 1)); font-weight: 500;
  color: var(--accent); text-decoration: none;
}
.trend-link:hover { text-decoration: underline; }


/* ── Перестановка и закрепление строк P&L ─────────────────────────── */

#pnl tr.grp td.name { padding-right: 30px; }
/* Зона захвата во всю высоту строки: попасть по значку мышью иначе трудно */
.rowdrag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 28px; margin: -6px 2px -6px -6px; cursor: grab;
  color: var(--ink-faint); opacity: 0; font-size: calc(15px * var(--tk, 1)); line-height: 1;
  vertical-align: middle; user-select: none;
}
#pnl tr.grp:hover .rowdrag { opacity: 1; }
#pnl tr.dragging { opacity: 0.45; }
#pnl tr.drop-here td { box-shadow: inset 0 2px 0 var(--accent); }

.rowpin {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: none; border-radius: 7px;
  background: none; color: var(--ink-faint); cursor: pointer; opacity: 0;
}
.rowpin svg { width: 15px; height: 15px; }
#pnl tr.grp:hover .rowpin, .rowpin.on { opacity: 1; }
.rowpin:hover { background: var(--line-soft); color: var(--ink); }
.rowpin.on { color: var(--accent); }

#pnl tr.pinned { position: sticky; z-index: 3; }
#pnl tr.pinned td { background: var(--bg); box-shadow: inset 0 -1px 0 var(--line); }
#pnl tr.pinned td.name { z-index: 4; background: var(--bg); }

/* Двухстрочная подпись месяца, когда колонок мало */
#pnl th.mon.narrow { font-size: calc(11px * var(--tk, 1)); line-height: 1.3; padding-left: 4px; padding-right: 4px; }

/* ── Переключатель периода в шапке P&L ────────────────────────────── */

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button {
  padding: 6px 14px; font: inherit; font-size: calc(12px * var(--tk, 1)); border: none; cursor: pointer;
  background: var(--bg); color: var(--ink-soft);
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { background: var(--bg-soft); color: var(--ink); }
.seg button.on { background: var(--accent); color: var(--on-accent); }

/* Переход в отчёт по человеку или точке прямо из таблицы */
.golink { color: inherit; text-decoration: none; cursor: pointer; border-bottom: 1px dashed var(--line); }
.golink:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Выбор месяца и история версий мотивации */
.foot-pick { display: inline-flex; align-items: center; gap: 8px; font-size: calc(13px * var(--tk, 1)); color: var(--ink-soft); }
.foot-pick select {
  height: 32px; padding: 4px 8px; font: inherit; font-size: calc(13px * var(--tk, 1));
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink);
}
#motivHist tr.planned td { background: rgba(240, 180, 40, .10); }
#motivHist tr.planned td.name { font-weight: 600; }

/* ── Перестановка и закрепление столбцов в таблицах кабинета ──────── */

#screen th.col-head { position: relative; cursor: grab; }

/* Свёртка столбца, правка Павла 15.09.2026: «делай как в гугл таблицах».
   Оттуда же и вид - квадратик с минусом сворачивает, с плюсом разворачивает */
/* Кнопка сидит верхом на границе столбцов, наполовину заходя в соседний -
   выбор Павла 15.09.2026 из пяти вариантов. Так текст заголовка не сдвигается
   вообще: отступ под кнопку больше не нужен */
.col-hide {
  position: absolute; top: 50%; transform: translateY(-50%); left: -7px; z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0; border-radius: 3px;
  /* Рамка по цвету текста, а не по --line: на светлой шапке бледная рамка
     сливалась, и от кнопки оставалась одна чёрточка минуса */
  border: 1px solid var(--ink-faint);
  background: var(--bg); color: var(--ink-soft);
  font-size: calc(13px * var(--tk, 1)); font-weight: 700; line-height: 1;
  cursor: pointer;
  /* В покое шапка чистая, кнопка проявляется при наведении на свою шапку -
     выбор Павла 15.09.2026 по макету Конкурентов: постоянные кнопки при
     полутора десятках колонок мусорили шапку */
  opacity: 0;
  transition: border-color .12s ease, color .12s ease, opacity .12s ease;
}
#screen thead th:hover > .col-hide,
.col-hide:focus-visible { opacity: 1; }
/* Свёрнутый столбец показывает «+» всегда - иначе его не вернуть */
#screen thead th.col-off .col-hide { opacity: 1; }
.col-hide:hover { color: var(--ink); border-color: var(--ink-faint); }
.col-hide:focus-visible { outline: 2px solid var(--ink-faint); outline-offset: 1px; }
/* Кнопка торчит за левый край ячейки, поэтому шапке нужен видимый перелив.
   Селектор с table.fit обязателен: там стоит «overflow: hidden» ради
   многоточия, оно перебивало правило и срезало кнопке левую половину.
   Строкам тела перелив не трогаем - там обрезка по ширине и работает */
#screen thead th.col-head,
#screen table.fit thead th.col-head { overflow: visible; }

/* Схлопнутый столбец: полоска в ширину кнопки. Содержимое ячеек убираем
   целиком - обрезка по ширине оставляла бы обрывки цифр */
/* Размер шрифта с !important: в шапке таблиц дашборда сидит более
   специфичное «#screen .dash-pair .fixed-view thead th», и без этого
   в схлопнутой колонке оставался огрызок названия вроде «Б.» */
#screen thead th.col-off {
  width: 22px !important; min-width: 22px; max-width: 22px;
  padding: 0 !important; font-size: 0 !important;
  overflow: hidden; white-space: nowrap;
}
/* В схлопнутой шапке не остаётся ничего, кроме кнопки: «font-size: 0» гасит
   только текст, а знак «?» - отдельная кнопка со своим размером, и все они
   болтались над полосками, когда Павел свернул столбцы разом (15.09.2026) */
#screen thead th.col-off > *:not(.col-hide) { display: none; }
#screen thead th.col-off {
  text-align: center; vertical-align: middle;
}
#screen thead th.col-off .col-hide {
  position: static; transform: none; margin: 0 auto;
  font-size: calc(12px * var(--tk, 1));
}
/* Сосед справа от свёрнутой колонки убирает кнопку внутрь: на границе она
   налезала на «плюс» схлопнутого столбца, и два знака слипались в кашу.
   То же с закреплённой колонкой: она липкая и лежит выше соседей, поэтому
   срезала кнопке левую половину - оставалось «-]» вместо квадратика */
#screen thead th.col-off + th.col-head .col-hide,
#screen thead th.col-stick + th.col-head .col-hide { left: 3px; }
#screen td.col-off {
  width: 22px !important; min-width: 22px; max-width: 22px;
  padding: 0; font-size: 0; color: transparent; overflow: hidden;
  background-image: linear-gradient(var(--line), var(--line));
  background-size: 1px 100%; background-position: center; background-repeat: no-repeat;
}
#screen td.col-off > * { display: none; }
.col-tools {
  position: absolute; top: 1px; left: 3px; right: 3px; height: 18px;
  display: flex; align-items: center; justify-content: space-between;
  opacity: 0; pointer-events: none;
}
#screen th.col-head:hover .col-tools { opacity: 1; pointer-events: auto; }
.col-drag { font-style: normal; font-size: calc(13px * var(--tk, 1)); color: var(--ink-faint); cursor: grab; padding: 0 2px; }
.col-pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 18px; padding: 0; border: none; border-radius: 5px;
  background: none; color: var(--ink-faint); cursor: pointer;
}
.col-pin svg { width: 13px; height: 13px; }
.col-pin:hover { background: var(--line-soft); color: var(--ink); }
.col-pin.on { color: var(--accent); opacity: 1; }
#screen th.col-head:has(.col-pin.on) .col-tools { opacity: 1; pointer-events: auto; }

#screen th.col-dragging { opacity: .45; }
#screen th.col-drop { box-shadow: inset 2px 0 0 var(--accent); }

/* Закреплённый столбец липнет слева */
#screen .col-stick { position: sticky; z-index: 2; background: var(--bg); }
/* Закреплённая колонка подсвечивается вместе со строкой. Полупрозрачный
   акцент кладём слоем поверх плотной подложки: положи его фоном напрямую -
   и сквозь липкую ячейку поедут уезжающие строки */
#screen tbody tr:hover .col-stick {
  background-image: linear-gradient(0deg, var(--accent-soft), var(--accent-soft));
}
#screen tr.sum .col-stick { background: var(--bg-soft); }
#screen thead .col-stick { z-index: 3; background: var(--bg-head); }

/* Текстовые колонки читаются слева, числовые остаются справа */
#screen th.left, #screen td.left { text-align: left; }

/* Карточка возражения: каждый смысловой кусок отдельным абзацем */
.obj-quote {
  margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--line);
  font-size: calc(14px * var(--tk, 1)); line-height: 1.45; color: var(--ink);
}
.obj-sys { margin-top: 8px; font-size: calc(13px * var(--tk, 1)); line-height: 1.4; color: var(--ink-soft); }
/* Возражения списком: слова человека и ответ системы идут строками под
   именем, а не отдельными колонками - текст у каждого спора свой длины */
#screen .objrow td { vertical-align: top; }
#screen .objrow td.name { white-space: normal; max-width: 520px; }
#screen .objrow .obj-line {
  display: block; margin-top: 3px; line-height: 1.35;
  font-size: calc(12px * var(--tk, 1)); color: var(--ink-soft); font-weight: 400;
}
/* ── Три стороны разбора: сотрудник, модератор, система ───────────────
   У каждой свой цвет и своя подпись - в разделе «Модерация» это читается
   с одного взгляда, а не вычитывается из текста. Решение Павла 17.09.2026 */
#screen .voice {
  display: block; margin-top: 5px; padding-left: 8px;
  border-left: 2px solid var(--line); line-height: 1.35;
  font-size: calc(12px * var(--tk, 1)); color: var(--ink-soft);
}
#screen .voice::before {
  display: block; margin-bottom: 1px;
  font-size: calc(10.5px * var(--tk, 1)); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
}
#screen .voice-worker {
  border-left-color: var(--accent); color: var(--ink);
  font-size: calc(13px * var(--tk, 1));
}
#screen .voice-worker::before { content: 'сотрудник'; color: var(--accent); }
#screen .voice-moder { border-left-color: var(--good, #2e7d4f); }
#screen .voice-moder::before { content: 'модератор'; color: var(--good, #2e7d4f); }
#screen .voice-sys { border-left-color: var(--line); }
#screen .voice-sys::before { content: 'система'; color: var(--ink-faint); }
/* Ответ модератора человеку - второй строкой в его же голосе: заводить
   четвёртую сущность ради одной реплики не за чем */
#screen .voice-answer {
  display: block; margin-top: 2px; color: var(--ink); font-weight: 500;
}
/* Объект спора - не голос, а заголовок: без полосы и без подписи роли */
#screen .objrow .obj-about { color: var(--ink-soft); }
#screen .objrow td.num.late { color: var(--warn); font-weight: 600; }
#screen .objrow .q-act { display: flex; gap: 6px; flex-wrap: wrap; }
.obj-sum { margin-top: 10px; font-size: calc(14px * var(--tk, 1)); font-weight: 600; }
.qcard .obj-sum + .q-act { margin-top: 12px; }

/* Ссылка на публикацию: открывается в соседней вкладке, очередь не теряется */
.pub-link { color: var(--accent); text-decoration: none; }
.pub-link:hover { text-decoration: underline; }

/* Столбцы разделены линиями, как в P&L: глаз не съезжает на соседнюю колонку */
#screen table:not(.motiv-t) td + td,
#screen table:not(.motiv-t) th + th { border-left: 1px solid var(--line-soft); }

/* Шапка раздела с вкладками не уезжает: без неё при прокрутке не видно,
   в какой вкладке находишься и нечем переключиться */
/* overflow: hidden у карточки запирает липкий заголовок внутри неё, и он
   уезжает вместе с ней. Скругления держим на самом заголовке */
#screen .card.sticky-head { overflow: visible; }
#screen .card.sticky-head > header {
  position: sticky; top: -1px; z-index: 9; background: var(--bg);
  border-radius: 12px 12px 0 0;
}
/* Смещение считается от фактической высоты шапки карточки, а не от числа:
   заголовок карточки стал крупнее, и захардкоженные 52px начали промахиваться -
   строки просвечивали в щель над липкой шапкой таблицы */
#screen .card.sticky-head { --head-h: 56px; }
#screen .card.sticky-head thead th { top: var(--head-h); }
/* Полоса подвкладок липнет сразу под шапкой раздела: при прокрутке видно,
   на какой подвкладке стоишь, и есть чем переключиться не возвращаясь
   наверх. Макет согласован Павлом 16.09.2026 */
#screen .card.sticky-head .sub-bar {
  position: sticky; top: var(--head-h); z-index: 8; background: var(--bg);
  padding: 9px 16px 10px;
}

/* Заголовок блока мотивации стоит по центру своего блока */
.motiv-box h3 { text-align: center; }

/* Шапка мотивации из двух строк: липкость их накладывает друг на друга,
   а таблицы короткие - закреплять там нечего */
.motiv-t thead th { position: static; }

/* Заголовок расчёта и поле числа людей стоят в одну строку */
.calc-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 20px 0 8px; }
.calc-head h3 { margin: 0; }
.foot-pick input[type="number"] {
  width: 78px; height: 32px; padding: 4px 8px; font: inherit; font-size: calc(13px * var(--tk, 1));
  text-align: center; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink);
}

/* Очередь модерации: переключатель порядка над списком */
.qcol { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.seg.qsort { align-self: stretch; }
.seg.qsort { width: 100%; }
.seg.qsort button { flex: 1 1 0; min-width: 0; padding: 5px 4px; font-size: calc(11px * var(--tk, 1)); text-align: center; }

/* Строка периода под разрезами отчёта */
.period-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
input[type="date"], .period-row .foot-pick input[type="date"] {
  height: 30px; padding: 3px 8px; box-sizing: border-box;
  font-family: var(--ui-font, var(--font-brand, -apple-system, sans-serif));
  font-size: calc(12px * var(--tk, 1)); font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink);
  width: auto; min-width: 0;
}
/* Кнопка календаря внутри поля - системная картинка. В тёмной теме её
   инвертируем, иначе на тёмном поле висит чёрный значок */
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.7);
}

/* Кнопки переключателя не ломаются на две строки */
.seg button { white-space: nowrap; }
.seg.small button { padding: 5px 12px; }

/* Сортировка по столбцу: стрелка показывает направление */
#screen th.col-head { cursor: pointer; }
#screen th.col-head::after {
  content: "\2191"; margin-left: 4px; font-size: calc(10px * var(--tk, 1)); color: transparent;
}
#screen th.sorted-asc::after { color: var(--accent); }
#screen th.sorted-desc::after { content: "\2193"; color: var(--accent); }

/* Свёрнутая карточка с итогом: шапка таблицы и строка «Всего» остаются */
.card.folded .scroll tbody tr:not(.sum) { display: none; }
.card.folded .body { display: none; }
.card.folded .cut-row { display: none; }

/* Навигация по периодам: стрелки вокруг подписи отрезка */
.per-nav { display: inline-flex; align-items: center; gap: 8px; }
.per-nav b { font-size: calc(13px * var(--tk, 1)); min-width: 130px; text-align: center; }
.per-arrow {
  width: 26px; height: 26px; padding: 0; border: 1px solid var(--line);
  border-radius: 7px; background: var(--bg); color: var(--ink-soft);
  font-size: calc(15px * var(--tk, 1)); line-height: 1; cursor: pointer;
}
.per-arrow:hover { border-color: var(--accent); color: var(--accent); }

/* Заведение темы: кнопка, форма и свои темы в списке */
.topic-head { display: flex; align-items: center; gap: 12px; }
.topic-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft); }
.topic-form .foot-pick { flex-direction: column; align-items: flex-start; gap: 4px; }
.topic-form input, .topic-form select {
  height: 32px; padding: 4px 8px; font: inherit; font-size: calc(13px * var(--tk, 1)); min-width: 200px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink);
}
#screen tbody tr.fresh td { background: rgba(240, 180, 40, .08); }
#screen tbody tr.fresh td.name { font-weight: 600; }

/* Заголовки разделов и таблиц крупнее: они якорь взгляда на встрече */
.card > header h2 { font-size: calc(18px * var(--tk, 1)); font-weight: 700; letter-spacing: -.3px; }
#screen thead th { font-size: calc(13px * var(--tk, 1)); }

/* Кнопки вида в шапке карточки: компактно, у правого края */
.view-tools { display: inline-flex; gap: 6px; margin-left: auto; }
.view-tools .btn { padding: 4px 10px; font-size: calc(11px * var(--tk, 1)); }

/* Отчёт: строк много, поэтому таблица прокручивается в своей рамке,
   а шапка и закреплённые колонки остаются на месте */
#screen .rep-scroll { max-height: calc(var(--app-h, 100vh) - 320px); overflow: auto; }

/* Журнал модерации прокручивается внутри карточки, а не тянет страницу вниз:
   записей там несколько десятков, и вкладки с фильтрами уезжали за верх экрана
   ровно тогда, когда по журналу и надо искать */
#screen .log-scroll { max-height: calc(var(--app-h, 100vh) - 330px); overflow: auto; }
#screen .log-scroll thead th { position: sticky; top: 0; z-index: 4; background: var(--bg-head); }
/* Высота через flex, а не через 100vh: при масштабе страницы vh считается
   в CSS-пикселях, и таблица вылезала за экран без прокрутки */
/* Вбок не едем никогда, вниз прокручиваемся, когда содержимое не влезло.
   С overflow: hidden экран молча резал всё, что ниже: таблица тем на 20 строк
   обрывалась на «Скидке недели», а доска плана прятала две трети карточек -
   полосы при этом не было, и на встрече это выглядит как потеря данных.
   Там, где внутри карточки своя прокрутка, эта полоса не появляется:
   карточка занимает ровно высоту экрана */
body.app #screen, body.app #viewPnl {
  display: flex; flex-direction: column; min-height: 0; flex: 1;
  overflow-x: hidden; overflow-y: auto;
}
body.app #screen[hidden], body.app #viewPnl[hidden] { display: none; }
/* Настройки компании лежат отдельным блоком под экраном: растянутый экран
   отодвигал их на пустоту в пол-страницы */
body.app #screen[data-auto="1"] { flex: 0 0 auto; }
body.app #companySettings { overflow: auto; min-height: 0; }
body.app #screen > .card, body.app #viewPnl > .card {
  display: flex; flex-direction: column; min-height: 0;
}
/* Карточки занимают свою высоту, а не делят экран поровну: старое правило
   .main-col .card тянуло каждую, и на дашборде между показателями и
   таблицами зияла пустота в четверть экрана */
body.app #screen > .card, body.app #screen > .dash-pair { flex: 0 0 auto; }
/* Растягиваем только карточку с таблицей: у неё внутри своя прокрутка */
body.app #screen > .card:has(.rep-scroll),
body.app #screen > .card:has(.log-scroll),
body.app #viewPnl > .card:has(.pnl-scroll) { flex: 1; overflow: hidden; }
body.app #screen .rep-scroll,
body.app #screen .log-scroll { max-height: none; flex: 1; min-height: 0; overflow: auto; }
body.app #viewPnl .pnl-scroll { flex: 1; min-height: 0; overflow: auto; }
#screen .rep-scroll thead th { position: sticky; top: 0; z-index: 4; background: var(--bg-head); }
#screen .rep-scroll .col-stick { z-index: 3; }

/* Длинные таблицы прокручиваются внутри своей карточки, а не растят страницу:
   в трендах десять роликов, в журнале десятки записей, и без этого шапка
   с сортировками уезжает наверх ровно тогда, когда по ней надо кликнуть.
   Шапка липнет к верху рамки - клик по заголовку доступен на любой строке */
/* Карточка в «Контенте» лежит на уровень глубже - вкладки рисуются полосой,
   а содержимое внутри своего контейнера. Без этого селектора таблица
   конкурентов росла вниз и уводила страницу за экран */
body.app #screen > .card:has(.tall-scroll),
body.app #screen #contentBody > .card:has(.tall-scroll),
body.app #screen .dash-pair > .card:has(.tall-scroll) { display: flex; flex-direction: column; }
body.app #screen .tall-scroll { flex: 1; min-height: 0; overflow: auto; }

/* Раздел «Контент»: полоса вкладок стоит, листается только содержимое.
   Условие :has(.tall-scroll) держало это правило лишь для трендов и разведки,
   а темы, план и конкуренты уходили за нижний край без полосы.
   Только для большого экрана: на телефоне страница листается целиком, и
   вложенная рамка там мешает - палец прокручивает то доску, то страницу */
@media (min-width: 901px) {
  body.app #screen #contentBody {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
  }
  body.app #screen #contentBody > .card { flex: 1; min-height: 0; overflow: hidden; }
  /* Вкладка «Настройки трендов» кладёт в раздел не одну карточку, а стопку:
     бренды, хештеги, источники мира. Правило выше растянуло бы каждую на
     треть экрана и обрезало бы им содержимое - листается вся стопка целиком */
  body.app #screen #contentBody > .tconf-scroll {
    flex: 1; min-height: 0; overflow: auto;
  }
  body.app #screen #contentBody > .tconf-scroll > .card { flex: 0 0 auto; }
  body.app #screen #contentBody > .card > .scroll { flex: 1; min-height: 0; overflow: auto; }
  /* Доска и календарь - высотой в окно, страница вниз не едет.
     Вниз листается колонка статуса, вбок - полоса незапланированных:
     раскладка по согласованному макету 22.09.2026 */
  body.app #screen #contentBody > .pl-board {
    flex: 1; min-height: 0; overflow: visible; align-items: stretch;
  }
  body.app #screen .pl-col { min-height: 0; overflow: hidden; position: relative; }
  body.app #screen .pl-col-scroll { flex: 1; min-height: 0; overflow-y: auto;
    padding-bottom: 14px; }
  /* Тень у нижней кромки - подсказка, что внутри колонки есть ещё */
  body.app #screen .pl-col::after { content: ''; position: absolute;
    left: 1px; right: 1px; bottom: 1px; height: 16px; pointer-events: none;
    background: linear-gradient(transparent, var(--bg));
    border-radius: 0 0 var(--radius-card) var(--radius-card); }
  body.app #screen #contentBody > .pl-calwrap {
    flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  }
  body.app #screen .pl-calwrap .pl-cal { flex: 1; min-height: 0;
    grid-auto-rows: minmax(0, 1fr); overflow: hidden; padding-top: 6px; }
  /* Тесная неделя: не прокрутка микроячейки, а компактные размеры -
     дата, два чипа и «+N ещё» обязаны влезать в ряд самого низкого
     ноутбука (590 физ). Кривой календарь Павел поймал 22.09.2026 на
     масштабе 140%: чипы резались пополам и налезали на рамки */
  body.app #screen .pl-cell { min-height: 0; overflow: hidden;
    padding: 5px 6px; gap: 3px; }
  body.app #screen .pl-cell-d { font-size: 10px; line-height: 1.2; }
  body.app #screen .pl-chip { font-size: 10px; line-height: 1.2;
    padding: 2px 4px; max-width: 100%; }
  body.app #screen .pl-cal .pl-more { font-size: 10px; padding: 0 2px;
    line-height: 1.2; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  body.app #screen .pl-calwrap, body.app #screen .pl-calwrap .pl-cal {
    min-width: 0; }
  body.app #screen .pl-unpl { flex: none; }
  body.app #screen #contentBody > .req-strip { flex: none; }
  body.app #screen #contentBody > .pl-ctls { flex: none; }
  /* Шапка таблицы липнет к верху своей рамки: в темах двадцать строк, в списке
     плана двести, и без этого колонки «День / Тема / Цель» пропадают с первого
     же оборота колеса. Специфичность выше, чем у #screen th.col-head */
  body.app #screen #contentBody > .card > .scroll thead th {
    position: sticky; top: 0; z-index: 4; background: var(--bg-head);
  }
  /* Темы внутри контент-плана. Шапка плана - карточка из одного header:
     общий flex: 1 сжимал её до 2 px, и заголовок с переключателем видов
     пропадал. Контейнеру тем - те же правила, что были у вкладки: таблица
     листается в своей рамке, шапка колонок липнет */
  body.app #screen #contentBody > .card.plan-head { flex: 0 0 auto; }
  body.app #screen #planTopics { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  body.app #screen #planTopics > .card { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  body.app #screen #planTopics > .card > .scroll { flex: 1; min-height: 0; overflow: auto; }
  body.app #screen #planTopics > .card > .scroll thead th {
    position: sticky; top: 0; z-index: 4; background: var(--bg-head);
  }
}
/* Распорка выравнивала пару карточек по высоте, когда таблицы были короткими.
   У тянущейся таблицы она отнимает место: карточка 672 px, а таблице
   доставалось 300. Там, где таблица растягивается сама, распорка не нужна */
.dash-pair > .card:has(.tall-scroll)::after { display: none; }
.dash-pair > .card:has(.tall-scroll) > .scroll { flex: 1 1 auto; }
/* Вычет 300 px закладывался на глаз и отбирал у таблицы вдвое больше,
   чем занимает всё над ней: шапка стенда 50, полоса вкладок 40,
   заголовок карточки 45. При 1280x720 и масштабе 125% это оставляло
   под строки 186 px - две записи из десяти */
#screen .tall-scroll { max-height: calc(var(--app-h, 100vh) - 230px); overflow: auto; }
#screen .tall-scroll thead th {
  position: sticky; top: 0; z-index: 4; background: var(--bg-head);
}
/* Закреплённая первая колонка не должна перекрывать липкую шапку */
#screen .tall-scroll thead .col-stick { z-index: 6; }

/* Первый столбец липнет к левому краю: в узкой рамке дашборда при прокрутке
   вбок терялось, чья это строка - имя уезжало, а цифры оставались */
.stick-box { position: relative; }
.stick-box .col-stick { left: 0; }
/* Люди и доступы: колонок девять, при прокрутке вправо строка теряла имя,
   и было не понять, чьи это цифры */
#screen .people-scroll .col-stick { left: 0; background: var(--bg); z-index: 4; }
/* Заголовок «ФИО» липнет по обеим осям и обязан лежать выше соседних:
   при равном слое их рисует поверх порядок в разметке, и на прокрутке
   заголовок «Телефон» просто закрывал его собой */
#screen .people-scroll thead .col-stick { background: var(--bg-head); }
/* Отступ рамки переносим внутрь ячеек: иначе уезжающие строки видны в
   шестнадцати пикселях слева от закреплённой колонки */
/* Селектор с обоими классами: общее правило .scroll.pad идёт ниже по файлу
   и иначе возвращает боковые отступы обратно */
#screen .scroll.pad.people-scroll { padding-left: 0; padding-right: 0; }
#screen .people-scroll th:first-child, #screen .people-scroll td:first-child { padding-left: 16px; }
#screen .people-scroll th:last-child, #screen .people-scroll td:last-child { padding-right: 16px; }
#screen .people-scroll tbody .col-stick { box-shadow: 3px 0 5px -3px rgba(22, 24, 29, .12); }
/* Кабинетные роли подсвечены полупрозрачным акцентом, и сквозь закреплённую
   ячейку читались уезжающие под неё строки. Цвет кладём слоем поверх
   плотной подложки - тот же приём, что у закреплённых столбцов отчёта */
#screen .people-scroll tbody tr.fresh .col-stick {
  background: var(--bg);
  background-image: linear-gradient(0deg, rgba(240, 180, 40, .08), rgba(240, 180, 40, .08));
}

/* «Люди и доступы»: список длинный, и без липкой шапки на середине списка
   уже не помнишь, где статус, а где точка */
#screen .card.sticky-head > .scroll.pad thead th,
#screen .card.sticky-head > .scroll.pad thead th.col-head {
  position: sticky; top: -1px; z-index: 5;
}
/* Закреплённый столбец липнет по обеим осям и лежит выше соседей по шапке:
   при равном слое их рисует поверх порядок в разметке, и «Телефон» на
   прокрутке наезжал на «ФИО» */
#screen .card.sticky-head > .scroll.pad thead th.col-stick { z-index: 6; }
#screen .rep-scroll thead .col-stick { z-index: 6; }
/* Детализация читается как уровень ниже: сам отчёт приглушён, раскрытые
   строки белые. Так видно, что это разбор строки, а не соседние записи */
#screen .rep-scroll tbody tr td { background: var(--bg-soft); }
#screen .rep-scroll tbody tr.sub td {
  background: var(--bg);
  box-shadow: inset 3px 0 0 var(--accent, #6f6af8);
}
#screen .rep-scroll tbody tr.sub td:not(:first-child) { box-shadow: none; }
#screen .rep-scroll tbody tr.openable { cursor: pointer; }
/* Сортировка и фильтры отчёта. Стрелке место зарезервировано всегда -
   иначе колонки дёргаются при первом клике */
/* Разрезу «По сюжетам» не хватало 7 px: пятнадцать колонок по 20 px
   отступов - это 300 px воздуха. Забираем у отступов, а не у чисел.
   Условие по ШИРИНЕ, а не по высоте: сначала повесил на data-low (низкий
   экран), и у Павла на 140% правило не срабатывало вовсе - окно высокое,
   а тесно по ширине. Правка Павла 17.09.2026 */
@media (min-width: 901px) {
  #screen .rep-scroll td, #screen .rep-scroll th {
    padding-left: 8px; padding-right: 8px;
  }
}
#screen .rep-scroll thead th.sortable { cursor: pointer; user-select: none; }
#screen .rep-scroll thead th.sortable .s-ar { display: inline-block; min-width: 10px; }
/* Тема второй строкой под номером сюжета: одна колонка вместо двух */
#screen .qrow td.name .q-topic {
  display: block; margin-top: 2px; padding-left: 16px;
  font-size: calc(12px * var(--tk, 1)); color: var(--ink-soft); font-weight: 400;
}
.rep-picks { display: flex; gap: 8px; flex-wrap: wrap; }
.rep-pick {
  height: 30px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card, var(--bg)); color: var(--fg, var(--ink));
  font: inherit; font-size: calc(12px * var(--tk, 1)); max-width: 190px;
}
/* Третий уровень - ролики сюжета. Отступом и бледной полосой показываем,
   что это разбор подстроки, а не ещё один сюжет. Правка Павла 17.09.2026 */
#screen .rep-scroll tbody tr.openable2 { cursor: pointer; }
#screen .rep-scroll tbody tr.sub.deep td { background: var(--bg-soft); }
#screen .rep-scroll tbody tr.sub.deep td:first-child {
  padding-left: 30px; box-shadow: inset 3px 0 0 var(--line);
  color: var(--ink-soft);
}

/* ── Телефон: узкий экран и палец вместо мыши ─────────────────────── */
/* Правило Павла: стенд открывают с телефона, вёрстка не должна ехать.
   Проверено на 375×812 и 430×932 - страница вбок не двигается. */

@media (max-width: 640px) {
  /* Липкая шапка таблицы на телефоне не работает по назначению и вредит:
     ячейка позиционируется от окна, а не от своей прокручиваемой рамки, и
     тянет страницу вбок на два десятка пикселей. Заголовки таблиц на узком
     экране и так видны - таблица здесь помещается в полтора экрана */
  thead th { position: static; }

  /* Шапка одной строкой. Длинное название компании обрезаем многоточием,
     подписи у тумблера и кнопки печати съедают ширину - убираем их */
  .top { gap: 10px; padding: 0 12px; height: 52px; }
  .co-name {
    min-width: 0; flex: 1; font-size: calc(13px * var(--tk, 1)); color: var(--ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .top-right { gap: 10px; }
  .toggle > span:not(.track) { display: none; }
  .look-btn { font-size: 0; gap: 0; padding: 8px; }
  .top-right > .btn { display: none; }          /* печать с телефона не нужна */
  .look-menu { right: 0; }

  /* Заголовок карточки: переключатели и кнопки вида уезжают строкой ниже */
  .card > header { flex-wrap: wrap; padding: 12px 14px; row-gap: 8px; }
  /* Четыре цели в 375 px не влезали: последняя кнопка «неликвид» уходила
     за край на семь пикселей */
  #planGoals button { padding-left: 7px; padding-right: 7px; }
  .view-tools { margin-left: 0; }
  .cols { margin-left: 0; }

  /* Числа плотнее: две карточки в ряд, шрифт под ширину экрана */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 11px 12px; }
  .stat .v { font-size: calc(19px * var(--tk, 1)); }
  .stat .k, .stat .n { font-size: calc(11px * var(--tk, 1)); }

  /* Карточка показателей на телефоне не липнет и не вылезает за край:
     на большом экране она вытянута на поля страницы, здесь полей меньше */
  body.app #screen[data-sticky="1"] > .card.plain {
    position: static; margin: 0 0 12px !important; padding: 0;
  }
  body.app #screen[data-sticky="1"] > .card.plain::after,
  body.app #screen[data-sticky="1"] > .card.plain::before { display: none; }
  body.app #screen[data-sticky="1"] .stats {
    position: static; margin: 0 !important; padding: 0;
  }

  /* Таблица отчёта тянется во всю оставшуюся высоту, а не в фиксированный кусок */
  #screen .rep-scroll { max-height: calc(var(--app-h, 100vh) * 0.68); }

  /* Вкладки раздела лентой: пять штук в строку экрана не влезают */
  .seg.small { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Подвал мотивации: кнопки и подпись переносятся, а не уезжают вбок */
  .settings-foot { flex-wrap: wrap; row-gap: 8px; }

  /* Диапазоны мотивации не режем: таблица берёт свою ширину и прокручивается
     внутри блока. Сжатая по ширине экрана «100 000 - 500 000» нечитаема */
  /* Все поля одного размера и на телефоне - правило экрана мотивации */
  .motiv-t input { width: 72px; min-width: 72px; max-width: 72px; }
  .motiv-t.stories { min-width: 460px; }
  .motiv-t.views { min-width: 620px; }
  .motiv-t.places { min-width: 320px; }

  .wrap { padding: 12px; gap: 12px; }
  .card > .body { padding: 12px; }
  h2 { font-size: calc(16px * var(--tk, 1)); }
  .card > header h2 { font-size: calc(16px * var(--tk, 1)); }
}

/* Полоса главных показателей: заголовок и свёртка как у остальных карточек,
   но своей рамки нет - карточки чисел уже в рамках, вторая рамка лишняя */
#screen .card.plain {
  background: none; border: none; box-shadow: none; overflow: visible;
}
#screen .card.plain > header {
  padding: 0 2px 10px; border-bottom: none; background: none;
}
#screen .card.plain.folded > header { padding-bottom: 0; }

/* Полоса периода на дашборде: та же, что в отчётах, но своей карточкой сверху */
#screen .card.dash-period .period-row { border-top: none; }

/* ── Раскладка не должна дёргаться от содержимого ─────────────────── */
/* Найдено аудитом 04.09.2026: элементы прыгали при переключении вкладок,
   режимов и сортировок. Правило простое - место под элемент резервируем
   заранее, а не отдаём его тому, кто оказался рядом */

/* Активная кнопка сегмента не толще неактивной - полоса не дрожит */
.seg button { font-weight: 500; }

/* Стрелка свёртки одной ширины в любом состоянии */
.card-fold { display: inline-block; width: 14px; text-align: center; }

/* «Сохранено» не должно расширять кнопку «Сохранить вид» */
.view-tools .btn { min-width: 104px; }

/* Подпись периода одной ширины: «Неделя» короче «III квартал 2026»,
   и правая стрелка ездила вслед за текстом */
.per-nav b { min-width: 168px; }

/* Переключатели стоят сразу за заголовком - решение Павла: взгляд идёт
   слева направо, и выбор режима должен попадаться раньше, чем цифры.
   Свободное место забирает последний из «прилипших» к заголовку элементов,
   а кнопки действий уходят к правому краю */
#screen .card > header > h2 { margin-right: 0; }
#screen .card > header > .seg { margin-right: auto; }
#screen .card > header > .tag:not(:has(+ .seg)) { margin-right: auto; }
#screen .card > header > .tag + .seg { margin-right: auto; }
/* #setTabs - навигация между вкладками раздела (Настройки, Контент), а не
   тумблер вида «переключатель слева, остальное вправо» - для неё общее
   правило выше растягивало разрыв до поиска на четверть экрана. Правка
   Павла 16.09.2026 по скрину «Люди и доступы» */
#screen .card > header > .seg#setTabs { margin-right: 0; }
/* Переключателей в шапке может быть два - вид доски плана и фильтр целей.
   Свободное место забирает только последний, иначе они делят его пополам
   и расходятся на треть шапки */
#screen .card > header > .seg:has(~ .seg) { margin-right: 0; }

/* Таблица во вкладке настроек стоит на той же линии, что поля и кнопки соседних
   вкладок: без этого при переключении таблица уезжала влево на отступ карточки */
#screen .scroll.pad { padding: 0 16px 14px; }
/* Липкая шапка в таблице с боковыми полями: строки проезжали в зазор
   между верхом контейнера и первой ячейкой, и над шапкой висела полоса */
#screen .scroll.pad thead th { top: -1px; }
#screen .scroll.pad::before {
  content: ""; position: sticky; top: -1px; display: block; height: 0;
}

/* Расчёт мотивации: доли колонок заданы, иначе таблица дёргалась на каждый
   введённый символ - числа меняли ширину. Только этой таблице - у Истории
   мотивации те же линии, но десять колонок разной длины, и fixed сминал
   длинное ФИО в соседнюю ячейку */
.motiv-res { table-layout: fixed; }
/* Границы - тем же приёмом, что у таблиц ставок (.motiv-t): линия между
   строками, линия между колонками, шапка отделена потолще. Без них строки
   читались слитно. Общий класс - не только у Расчёта, но и у Истории
   мотивации, раскладку колонок каждая таблица решает сама. Правка Павла
   16.09.2026 */
.tbl-lined thead th { border-bottom: 1px solid var(--line); }
.tbl-lined tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.tbl-lined td + td, .tbl-lined th + th { border-left: 1px solid var(--line-soft); }
/* «Новая» по месяцам стала полем ввода на каждый месяц, а не только на
   М7+ (правка Павла 16.09.2026) - 14 полей вместо одного больше не влезали
   в table { width:100% }, и inputами сминало соседние числа. Снимаем
   ширину, таблица берёт своё natural-width и прокручивается в .scroll,
   как История и Расчёт */
.motiv-t.bymonth { width: auto; }
/* Расчёт - блок внутри «Ставок», между полосой сохранения и самими
   ставками. У него свой заголовок: отдельной вкладки больше нет, и без
   подписи блок читался хвостом чужой таблицы. Макет согласован 16.09.2026 */
.motiv-calc { padding-top: 10px; }
.motiv-calc-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 0 8px;
}
.motiv-calc-head h3 {
  margin: 0; font-size: calc(14px * var(--tk, 1)); font-weight: 700;
}
/* Таблица расчёта идёт на всю ширину блока и строкой пониже обычной: так она
   согласована в макете 16.09.2026. Зажатая в 720px она отъедала высоту на
   переносах, а семь пикселей в строке множились на пять строк */
/* Экран мотивации целиком в одну высоту: воздух отдаём таблицам, а не полям
   вокруг них. Боковые отступы у таблицы расчёта были двойными - 16px у .body
   и ещё 16 у .scroll.pad, и таблица стояла у́же остальных блоков */
#screen .motiv-screen { padding-top: 12px; padding-bottom: 12px; }
#screen .motiv-screen .settings-foot { margin-top: 6px; }
#screen .motiv-calc > .scroll.pad { padding: 0; }
/* Шапка таблицы расчёта по высоте своих строк: общие 42px кабинета ставили
   над четырьмя строками по 28 полосу выше самих данных */
#screen .motiv-res-calc thead th { height: 30px; }
/* Два класса в селекторе - ниже по файлу у .motiv-res стоят свои отступы
   (общие с Историей), и одного класса не хватило бы, чтобы их перебить */
.motiv-res.motiv-res-calc td,
.motiv-res.motiv-res-calc th { padding-left: 10px; padding-right: 10px; }
.motiv-res.motiv-res-calc th { padding-top: 6px; padding-bottom: 6px; }
.motiv-res.motiv-res-calc td { padding-top: 3px; padding-bottom: 3px; }

/* Шкала по месяцам: заголовок, кнопка раскрытия и подсказка одной строкой.
   Длинная сноска под таблицей стоила странице 93px и читалась один раз */
.bymonth-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; }
.bymonth-head h3 { margin: 0; font-size: calc(14px * var(--tk, 1)); }
.btn.small { padding: 5px 12px; font-size: calc(12px * var(--tk, 1)); border-radius: 8px; }
.hint {
  display: inline-flex; width: calc(16px * var(--tk, 1)); height: calc(16px * var(--tk, 1));
  border-radius: 50%; background: var(--fillq); color: var(--ink-faint);
  font: 700 calc(10px * var(--tk, 1))/1 Montserrat, sans-serif; font-style: normal;
  align-items: center; justify-content: center; cursor: help; flex: 0 0 auto;
}

/* Плитки итога расчёта - тот же блок, что «Главные показатели» на дашборде.
   Ряд идёт на всю ширину, три равные плитки: зажатый в 720px ряд ломал
   подписи на четыре строки и стоил экрану 50px. Макет Павла 16.09.2026 */
#screen .stats.motiv-tiles {
  margin: 0 0 10px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-w="s"] .motiv-tiles,
html[data-w="xs"] .motiv-tiles { grid-template-columns: 1fr; }
/* Плитка низкая, в одну строку: подпись и цифра рядом, пояснение под ними.
   Дашбордная колонка из трёх ярусов съедала здесь 117px против 54 - экран
   переставал помещаться целиком. Макет согласован Павлом 16.09.2026.
   Вес селектора поднят до #screen: дашбордные «#screen .stats .stat»
   ставят колонку и прижимают подписи к низу, и одного класса не хватало -
   правила молча не применялись, а плитка оставалась высокой */
#screen .stats.motiv-tiles .stat {
  padding: 6px 11px; display: flex; flex-direction: row; align-items: baseline;
  gap: 8px; flex-wrap: wrap; container-type: normal;
}
#screen .stats.motiv-tiles .stat .v { font-size: calc(18px * var(--tk, 1)); margin: 0; }
#screen .stats.motiv-tiles .stat .k { min-height: 0; margin: 0; }
#screen .stats.motiv-tiles .stat .n {
  flex: 1 1 100%; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap;
  font-size: calc(11px * var(--tk, 1));
}
#screen .stats.motiv-tiles .stat .n > div + div { margin-top: 0; }
/* Точка-разделитель вместо переноса: две подписи в строку короче двух строк */
#screen .stats.motiv-tiles .stat .n > div + div::before { content: '· '; color: var(--line); }
/* Разница красится по направлению, как в P&L: рост расхода красным,
   снижение зелёным. Заливки нет - только цифра, рамка остаётся общей */
.motiv-tiles .stat.up .v { color: var(--bad); }
.motiv-tiles .stat.down .v { color: var(--good); }

/* Соц. сети и люди стоят рядом: два коротких списка читаются одним взглядом,
   а не двумя прокрутками. На узком экране встают друг под друга */
.dash-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.dash-pair > .card { min-width: 0; }
html[data-w="m"] .dash-pair,
html[data-w="s"] .dash-pair,
html[data-w="xs"] .dash-pair { grid-template-columns: 1fr; }

/* Правка Павла 15.09.2026: в «Людях» правая колонка премии уезжала за край
   карточки на 1600 при 100%. Длинные ФИО с отчеством и «Москва · Галерея»
   держали по 244 и 152 px в одну строку. Переносим только текстовые ячейки:
   числа с переносом читались бы как опечатка */
.dash-pair tbody td:not(.num) { white-space: normal; }

/* Длинный заголовок колонки переносится на две строки, а не растягивает столбец:
   «Цена просмотра (CPV)» в одну строку съедала место у самих чисел */
#screen thead th {
  white-space: normal; overflow-wrap: normal; vertical-align: bottom;
  max-width: 130px; line-height: 1.25;
}
#screen thead th.col-head { text-wrap: balance; }

/* Ноутбук 1280×720: дашборд обязан помещаться в экран целиком. Ужимаем строки
   таблиц и подписи карточек - главный блок при этом не трогаем */
@media (min-width: 901px) and (max-height: 820px) {
  #screen th, #screen td { padding: 6px 12px; }
  #screen .stat { padding: 10px 14px; }
  #screen .stat .v { font-size: calc(21px * var(--tk, 1)); }
  #screen .stat .n { line-height: 1.4; }
  .dash-pair { gap: 12px; }
}

/* Дашборд читается как одна картина: шапки таблиц одной высоты, карточки
   выровнены по нижнему краю, соседние блоки одинаковые */
#screen thead th { height: 42px; vertical-align: middle; max-width: 120px; }
.dash-pair { align-items: stretch; }
.dash-pair > .card { display: flex; flex-direction: column; }
/* Карточки одной высоты, но лишнее место забирает пустота под таблицей,
   а не сама таблица: иначе строки и шапки растягивались бы по-разному */
.dash-pair > .card > .scroll { flex: 0 0 auto; }
.dash-pair > .card::after { content: ""; display: block; flex: 1; }
/* Обе карточки пары выглядят как одна: шапки и заголовки таблиц одной высоты.
   Специфичность с #screen - иначе общее правило заголовков перебивает */
#screen .dash-pair > .card > header { min-height: 70px; align-items: center; }
#screen .dash-pair thead th { height: 52px; }
/* «топ 5 по просмотрам» - подпись у заголовка, а не плашка: плашка занимала
   место и роняла шапку карточки на строку ниже */
#screen .dash-pair .tag {
  background: none; padding: 0; font-size: calc(12px * var(--tk, 1)); color: var(--ink-faint);
  white-space: nowrap;
}

/* Подписи под числом занимают одинаковое место - карточки не разной высоты */
#screen .stats .stat { display: flex; flex-direction: column; }
#screen .stats .stat .n { margin-top: auto; padding-top: 4px; }

/* Масштаб экрана в шапке: три кнопки одной высоты с «Оформлением» */
.zoom { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.zoom button {
  border: none; background: var(--bg); color: var(--ink-soft);
  font: inherit; font-size: calc(13px * var(--tk, 1)); padding: 7px 10px; cursor: pointer; line-height: 1;
}
.zoom button + button { border-left: 1px solid var(--line); }
.zoom button:hover { background: var(--bg-soft); color: var(--ink); }
.zoom #zoomVal { min-width: 52px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .zoom { display: none; } }   /* на телефоне масштаб системный */
@media print { .zoom { display: none !important; } }

/* Подпись у заголовка вместо плашки: тренды и топ - фиксированные списки,
   настраивать в них нечего */
#screen .fixed-view > header .tag,
#screen .dash-pair .tag {
  background: none; padding: 0; font-size: calc(12px * var(--tk, 1)); color: var(--ink-faint); white-space: nowrap;
}

/* Описание приёма стоит под названием: в отдельной колонке оно съедало
   треть таблицы, а без него тренд превращается в непонятный заголовок */
#screen .sub-note {
  font-size: calc(12px * var(--tk, 1)); color: var(--ink-faint); line-height: 1.3; margin-top: 2px;
  white-space: normal; max-width: 260px;
}
#screen td.name:has(.sub-note) { padding-top: 7px; padding-bottom: 7px; }

/* Тренды и топ живут в половине экрана: ячейки компактнее, кнопка «В темы»
   мельче - иначе таблицы уезжают в горизонтальную прокрутку */
#screen .dash-pair .fixed-view th,
#screen .dash-pair .fixed-view td { padding: 7px 9px; }
#screen .dash-pair .fixed-view .btn.btn-sm { padding: 3px 8px; font-size: calc(11px * var(--tk, 1)); }
#screen .dash-pair .fixed-view .pill { font-size: calc(11px * var(--tk, 1)); padding: 1px 6px; }
#screen .dash-pair .sub-note { max-width: 200px; }

/* Описание приёма - одной строкой с многоточием, полностью в подсказке:
   иначе десять строк по две линии не помещаются в экран */
#screen .dash-pair .sub-note {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px;
}
#screen .dash-pair .fixed-view table { font-size: calc(13px * var(--tk, 1)); }

/* P&L на телефоне: узкие отступы и мелкий шрифт, чтобы рядом с названием
   строки помещались сами цифры. Иначе виден один столбец «Показатель» */
@media (max-width: 640px) {
  #pnl { font-size: calc(12px * var(--tk, 1)); }
  #pnl th, #pnl td { padding: 6px 7px; }
  #pnl td.lvl0 { padding-left: 16px; }
  #pnl td.lvl1 { padding-left: 26px; }
  #pnl td.lvl2 { padding-left: 36px; }
  #pnl td.lvl3 { padding-left: 46px; }
  #pnl td.lvl4 { padding-left: 56px; }
  .pnl-scroll { max-height: none; }
}

/* Таблица укладывается в свою половину экрана: доли колонок заданы,
   длинный текст обрезается многоточием, полностью виден в подсказке */
#screen table.fit { table-layout: fixed; width: 100%; }
#screen table.fit td, #screen table.fit th { overflow: hidden; text-overflow: ellipsis; }
#screen table.fit td.name { white-space: nowrap; }

/* Кнопка «+» в узкой колонке: без своих отступов она не влезала */
#screen table.fit .btn.btn-sm { padding: 2px 6px; min-width: 0; }

/* Один размер на таблицу, второй - на подписи под строкой. Раньше рябило:
   тело 13, шапка 13, подписи 12 - три близких размера читаются как неряшливость */
#screen .dash-pair .fixed-view table { font-size: calc(13px * var(--tk, 1)); }
#screen .dash-pair .fixed-view thead th {
  font-size: calc(12px * var(--tk, 1)); font-weight: 600; letter-spacing: .01em; color: var(--ink-soft);
}
#screen .dash-pair .sub-note { font-size: calc(11px * var(--tk, 1)); line-height: 1.35; margin-top: 1px; }
#screen .dash-pair .fixed-view td.name { font-weight: 500; }
#screen .dash-pair .fixed-view .pill { font-size: calc(11px * var(--tk, 1)); font-weight: 600; }
#screen .dash-pair .fixed-view .btn.btn-sm { font-size: calc(12px * var(--tk, 1)); padding: 4px 10px; }

/* Название переносится на вторую строку, а не обрывается многоточием:
   «Сравнили с прошлым годом» должно читаться целиком */
#screen .dash-pair table.fit td.name { white-space: normal; line-height: 1.3; }

/* Имя автора переносится, если не влезает: обрывать фамилию нельзя */
#screen .dash-pair table.fit td { white-space: normal; }
#screen .dash-pair table.fit td.num { white-space: nowrap; }

#screen .dash-pair table.fit td:last-child { padding-left: 4px; padding-right: 4px; }
#screen .dash-pair table.fit .btn.btn-sm { padding: 4px 8px; white-space: nowrap; }

/* Фильтры очереди модерации: повод и срок ожидания */
/* Фильтры очереди стоят друг под другом: рядом они делили узкую колонку
   пополам, и подписи резались до «Повод: люб(». Колонка очереди при этом
   не должна расти - справа от неё карточка сюжета */
.qfilters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.qfilters select {
  width: 100%; min-width: 0; height: 32px; padding: 4px 8px;
  font: inherit; font-size: calc(12px * var(--tk, 1)); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
}
.qfilters select:focus { outline: none; border-color: var(--accent); }

/* Поиск по журналу стоит в шапке карточки, у правого края */
.log-find {
  margin-left: auto; width: 260px; height: 30px; padding: 4px 10px;
  font: inherit; font-size: calc(13px * var(--tk, 1)); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
}
.log-find:focus { outline: none; border-color: var(--accent); }
@media (max-width: 640px) { .log-find { width: 100%; margin: 6px 0 0; } }

/* Стрелки по месяцам P&L: окно из трёх месяцев двигается вперёд и назад */
.win-nav { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.win-nav button {
  border: none; background: var(--bg); color: var(--ink-soft);
  font: inherit; font-size: calc(15px * var(--tk, 1)); line-height: 1; padding: 6px 11px; cursor: pointer;
}
.win-nav button + button { border-left: 1px solid var(--line); }
.win-nav button:hover { background: var(--bg-soft); color: var(--ink); }

/* P&L: та же логика, что в кабинете - выбор режима слева, у заголовка.
   Свободное место забирает последний переключатель, подсказка уходит вправо */
/* «Закрытие месяца» стоит сразу после переключателя «3 месяца · Год», а
   не у правого края (правка Павла 21.09.2026). Auto-отступ висит на самой
   кнопке: всё, что появится правее, уедет к краю как раньше */
#viewPnl .card > header > #mcSteps { margin-right: auto; }
#viewPnl .card > header > .hint-i { margin-left: 0; }

/* Шапка в паре трендов мельче тела: заголовок «Просмотров» длиннее самих
   чисел и иначе не помещается в свою долю */
#screen .dash-pair .fixed-view thead th { font-size: calc(11px * var(--tk, 1)); letter-spacing: 0; }

/* Порядок по сроку: одна кнопка на два направления */
.qsort-btn {
  flex: 0 0 auto; height: 32px; padding: 4px 10px;
  font: inherit; font-size: calc(12px * var(--tk, 1)); color: var(--ink-soft); cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  white-space: nowrap;
}
.qsort-btn:hover { background: var(--bg-soft); color: var(--ink); }

/* ── Живая цепочка: бот и стенд ────────────────────────────────────── */
/* Проверка, которая ещё не отработала, не должна выглядеть как пройденная */
.light.wait { background: var(--warn-bg, #fff6e5); color: var(--warn); }
.chk.wait { opacity: .75; }
.chk.wait .chk-i { color: var(--warn); }

/* Заявка или возражение, пришедшие из бота прямо на встрече */
.qcard.live { border-color: #d68a12; box-shadow: 0 0 0 1px rgba(214, 138, 18, .18); }

/* Выбор причины отказа: человек получит именно эту формулировку */
.reasons { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.reasons .muted { flex: 0 0 100%; font-size: calc(12px * var(--tk, 1)); margin-bottom: 2px; }
.reasons .btn { font-size: calc(13px * var(--tk, 1)); }
.reasons .btn.ghost { opacity: .7; }

/* Масштаб: середина - поле ввода, а не подпись. На встрече попадается проектор
   с нестандартным разрешением, где нужен свой процент, а не ступень */
.zoom input {
  width: 54px; border: 0; background: transparent; text-align: center;
  font: inherit; font-variant-numeric: tabular-nums; color: var(--ink);
  padding: 0; margin: 0; border-radius: 0; -moz-appearance: textfield;
}
.zoom input:focus { outline: 0; background: var(--bg-soft, #f1f2f4); }
.zoom input::-webkit-outer-spin-button,
.zoom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Мотивация целиком в один экран: ставки, расчёт и подвал без прокрутки.
   История уехала за кнопку - на встрече её открывают по требованию */
.motiv-t td { padding-top: 4px; padding-bottom: 4px; }
.motiv-t input { height: 28px; }
.calc-head { margin: 12px 0 6px; }
.motiv-res td, .motiv-res th { padding-top: 7px; padding-bottom: 7px; }
.settings-foot { margin-top: 10px; }

/* ── Календарь: свой попап вместо системного окна ──────────────────── */
/* Системное окно выглядит по-разному в каждом браузере и на встрече
   выбивается из вёрстки. Этот всегда одинаковый */
.cal-input { cursor: pointer; font-variant-numeric: tabular-nums; }

.cal-pop {
  position: fixed; z-index: 90; width: 268px; padding: 14px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 12px 34px rgba(16, 20, 30, .16);
}
.cal-head { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.cal-head b { flex: 1; font-size: calc(15px * var(--tk, 1)); text-transform: lowercase; }
.cal-head b::first-letter { text-transform: uppercase; }
.cal-nav {
  width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-soft); font-size: calc(17px * var(--tk, 1)); line-height: 1; border-radius: 7px;
}
.cal-nav:hover { background: var(--bg-soft); color: var(--ink); }

.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow { margin-bottom: 4px; }
.cal-dow span {
  text-align: center; font-size: calc(12px * var(--tk, 1)); color: var(--ink-soft); padding: 4px 0;
}
.cal-grid { gap: 2px; }
.cal-d {
  height: 32px; border: 0; background: transparent; cursor: pointer;
  border-radius: 50%; font: inherit; font-size: calc(14px * var(--tk, 1)); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cal-d:hover { background: var(--bg-soft); }
.cal-d.out { color: var(--ink-faint); }
.cal-d.now { box-shadow: inset 0 0 0 1px var(--accent); }
.cal-d.on { background: var(--accent); color: var(--on-accent); }
.cal-d.on:hover { background: var(--accent); }

.cal-today {
  margin-top: 8px; border: 0; background: transparent; cursor: pointer;
  color: var(--accent); font: inherit; font-weight: 600; padding: 4px 0;
}

/* Подсказки к полю: пять совпадений, а не список на двести строк */
.sug-pop {
  position: fixed; z-index: 90; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px;
  /* Список теперь полный (161 ниша) - листается внутри себя. Высота в px,
     а не в vh: масштаб через zoom не пересчитывает vh (ловушка DESIGN.md) */
  max-height: 380px; overflow-y: auto;
  box-shadow: 0 10px 28px rgba(16, 20, 30, .14);
}
.sug-grp {
  padding: 8px 12px 3px; font-size: calc(11px * var(--tk, 1));
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--bg);
  position: sticky; top: 0; z-index: 1;
}
.sug-grp + .sug-i { border-top: 0; }
.sug-i {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 8px 12px; font: inherit; font-size: calc(13px * var(--tk, 1)); color: var(--ink); cursor: pointer;
}
.sug-i + .sug-i { border-top: 1px solid var(--line-soft); }
.sug-i:hover, .sug-i.on { background: var(--bg-soft); }
.sug-i.own { color: var(--ink-soft); }

/* Кнопка «В темы» стоит по центру своей колонки, как и заголовок над ней */
#screen td.num > .btn { display: inline-block; }

/* Добор пустых строк выравнивает итоги соседних таблиц по одной линии.
   Сети четыре, людей пять - без него «Всего» стоят на разной высоте */
#screen tr.filler td { height: 39px; border-top: 1px solid var(--line-soft); }
#screen tr.filler:hover td { background: transparent; }

/* Накрутка карточками: раскрытый разбор роликов внутри карточки человека */
.qcard.open { grid-column: 1 / -1; }
.fraud-list { margin: 10px 0 4px; display: grid; gap: 8px; }
.fraud-row {
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px;
  background: var(--bg-soft);
}
.fr-head { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--tk, 1)); }
.fr-head .muted { color: var(--ink-faint); }
.fr-head .pill { margin-left: auto; }
.fr-num { font-size: calc(12px * var(--tk, 1)); color: var(--ink-soft); margin: 4px 0 8px; }
.fraud-row .q-act { margin: 0; }

/* Решение по каждому ролику: единица зачёта - размещённый ролик, и один
   плохой ролик не должен уносить два чистых */
.clip-act { display: flex; gap: 6px; margin: 8px 0 2px; }
.clip-act .btn { flex: 1; }
.clip-act.done {
  display: block; font-size: calc(12px * var(--tk, 1)); font-weight: 600; padding: 7px 10px;
  border-radius: 8px; text-align: center;
}
.clip-act.done.ok { background: rgba(38, 160, 90, .12); color: #1c7a45; }
.clip-act.done.no { background: rgba(214, 62, 47, .10); color: #b23a2e; }
.clip-reasons { display: grid; gap: 4px; margin: 8px 0 2px; }
.clip-reasons .btn { text-align: left; font-size: calc(12px * var(--tk, 1)); padding: 5px 8px; }
.plat-col.clip-ok { border-color: rgba(38, 160, 90, .45); }
.plat-col.clip-no { border-color: rgba(214, 62, 47, .40); }

/* Пустая очередь: разобранное ушло в журнал, а не висит серым */
.qempty {
  padding: 26px 14px; text-align: center; color: var(--ink-soft); font-size: calc(13px * var(--tk, 1));
  border: 1px dashed var(--line); border-radius: 12px;
}
.qempty span { display: block; margin-top: 4px; font-size: calc(12px * var(--tk, 1)); color: var(--ink-faint); }
/* Пустой журнал: тот же пунктирный блок внутри карточки, кнопка к трендам
   под пояснением. Макет 28.09.2026, вариант C */
.qempty.log-empty { margin: 16px; }
.log-empty .btn { margin-top: 12px; }

/* Журнал: поиск сразу за заголовком, фильтры строкой под шапкой */
#screen .log-find { margin: 0 0 0 4px; }
.log-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--line-soft);
}
.log-pick {
  font: inherit; font-size: calc(12px * var(--tk, 1)); padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  max-width: 220px;
}
#screen th.sortable { cursor: pointer; user-select: none; }
#screen th.sortable:hover { color: var(--ink); }
/* Место под стрелку зарезервировано всегда - иначе шапка дёргается */
#screen th .s-ar { display: inline-block; min-width: 12px; }

/* Таблица расчёта мотивации короткая - липкая шапка ей не нужна, а при
   прокрутке строки проезжали под ней и накладывались на заголовки */
/* Шапка расчёта мотивации стоит на своём месте: механика перетаскивания
   столбцов ставила ей relative со сдвигом, и первая строка наезжала на
   заголовки. Прокрутки внутри у этой таблицы нет, липкость ей не нужна */
.motiv-res thead th,
.motiv-res thead th.col-head { position: static !important; top: auto !important;
  background: var(--bg-head); }
.motiv-res-box { padding-top: 0; }
/* Четыре строки расчёта не прокручиваем: обёртка обрезала первую строку,
   и она наезжала на шапку */
.motiv-res-box { overflow: visible; max-height: none; }

/* Журнал на узком экране: длинные строки переносятся, а не уезжают вбок.
   Раньше при 1280 и при зуме колонка «Кто сделал» пряталась под закреплённой */
.log-table { table-layout: fixed; width: 100%; }
.log-table th, .log-table td { white-space: normal; vertical-align: top; }
.log-table th { text-align: left; }
.log-table td:first-child { font-variant-numeric: tabular-nums; }

/* Поля дат ровно под ДД.ММ.ГГГГ - шире они ничего не показывают.
   Оформление обязательно: initCalendars подменяет type="date" на "text",
   и правила для input[type="date"] на такое поле уже не действуют - оно
   печаталось системным Arial на белой подложке поверх тёмного экрана */
.foot-pick input.cal-input, input.cal-input {
  width: 112px; height: 30px; box-sizing: border-box; padding: 3px 9px;
  font-family: var(--ui-font, var(--font-brand, -apple-system, sans-serif));
  font-size: calc(12px * var(--tk, 1)); font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer;
}
.foot-pick input.cal-input:hover, input.cal-input:hover { border-color: var(--ink-faint); }
.foot-pick input.cal-input:focus, input.cal-input:focus {
  outline: none; border-color: var(--accent);
}
#start.cal-input { width: 120px; }

/* Динамика в отчётах занимает свою долю, остальное отдаётся таблице:
   на ноутбуке 1280x720 таблице оставалось 84 px из 560. Карточка графика
   не тянется - лишнюю высоту забирает таблица */
body.app #screen > .card:first-child { flex: 0 0 auto; }
@media (max-height: 800px) {
  body.app #screen > .card:first-child .chart { height: 150px; }
}

/* Календарь и подсказки не должны обрезаться карточкой: попап живёт рядом
   с полем, значит рамке нужно разрешить выходить за край */
.card:has(.cal-input), .card:has(.sug-pop), .card.dash-period { overflow: visible; }
.period-row, .cut-row, .settings-grid, .foot-pick { overflow: visible; }
body.app #screen > .card:has(.cal-input) { overflow: visible; }

/* Телефон: страница не ездит вбок. Внутри рамок таблицы и меню листаются
   пальцем, а сама страница стоит на месте */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* Телефон: кнопки решения по ролику встают в столбик, иначе вылезают за край */
@media (max-width: 640px) {
  .clip-act { flex-direction: column; }
  .clip-act .btn { width: 100%; }
  .plat-col { min-width: 0; }
  .plate-url { overflow-wrap: anywhere; }
}

/* Настройки прокручиваются внутри карточки, а не всем экраном: при прокрутке
   экрана строки таблиц проезжали под липкой шапкой карточки и накладывались */
body.app #screen > .card.sticky-head { flex: 1; overflow: hidden; }
body.app #screen > .card.sticky-head > .body,
body.app #screen > .card.sticky-head > .scroll {
  flex: 1; min-height: 0; overflow: auto;
}
/* Кнопка и форма занимают свою высоту. Без этого правила три блока вкладки
   делили экран поровну, и между кнопкой и таблицей зияла пустота в треть
   экрана - тянуться должна только таблица, у неё внутри своя прокрутка */
body.app #screen > .card.sticky-head > .body.tight {
  flex: 0 0 auto; overflow: visible;
}
/* Короткой таблице липкая шапка не нужна: прокрутки внутри у неё нет,
   а прилипала она к экрану и наезжала на собственные строки */
#screen .card.sticky-head > .body.tight thead th { position: static; }
/* Список конкурентов прокручивается в своей рамке: на телефоне колонка
   с кнопкой «Убрать» уезжала за край и была недоступна */
/* Как на листе отчёта: таблица листается в своей рамке, шапка липнет
   сверху, первый столбец закреплён при горизонтальной прокрутке
   (закрепление вешает общий инструмент столбцов). Правка Павла 19.09.2026 */
.comp-wrap { overflow: auto; max-height: calc(var(--app-h, 100vh) - 340px); }
.comp-wrap table { min-width: 100%; }
/* #screen обязателен: #screen th.col-head держит relative и перебивал липкость */
#screen .comp-wrap thead th { position: sticky; top: 0; z-index: 4; background: var(--bg-head); }
/* Галочка подписки: подпись рядом, чтобы состояние читалось без наведения */
.watch-box { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
/* Колонка «Обновление» в ленте конкурентов: зелёная точка - публикация
   младше окна свежести, перезамеряется каждую ночь */
.upd-on { color: var(--good); font-size: calc(12px * var(--tk, 1)); white-space: nowrap; }
.upd-on::before { content: '●'; font-size: 8px; vertical-align: 1px; margin-right: 4px; }
.watch-box input { width: 15px; height: 15px; margin: 0; cursor: pointer;
  accent-color: var(--good); }
.watch-box span { font-size: calc(12px * var(--tk, 1)); color: var(--ink-soft); }
/* Включённая подписка зелёная: на строке видно, за кем система следит сама */
.watch-box input:checked + span { color: var(--good); font-weight: 600; }

/* Знак вопроса стоит НАД словом: в узкой колонке он переносился на вторую
   строку, и подпись уезжала вверх относительно соседних колонок. Теперь
   слова всех колонок стоят на одной линии - шапки прижаты к низу.
   Правка Павла 17.09.2026 */
/* Сам знак прижат к верху ЯЧЕЙКИ, а подпись стоит по центру - так у всех
   колонок, и с вопросом, и без. Поэтому .col-qh не создаёт своего
   контекста позиционирования: кнопка считается от th. Правка Павла
   17.09.2026 */
.col-qh { display: inline; }
#screen thead tr:has(.col-qh) th {
  position: relative; vertical-align: middle; padding-top: 22px;
}
.col-qh .col-q {
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%); margin: 0;
}
.col-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 4px; padding: 0; vertical-align: middle;
  border: 1px solid var(--line); border-radius: 50%; background: var(--bg-soft);
  color: var(--ink-faint); font-size: calc(11px * var(--tk, 1)); line-height: 1; cursor: pointer;
}
.col-q:hover { color: var(--ink); border-color: var(--ink-faint); }

/* Правка Павла 15.09.2026: объяснение всплывает окном при наведении,
   а не ждёт клика. Рисуем в body и позиционируем на лету:
   внутри таблицы с прокруткой окно обрезалось бы рамкой карточки.
   Цвета из переменных темы - на тёмном оформлении окно едет за темой */
#qPop {
  position: fixed; z-index: 90; max-width: 340px; padding: 12px 14px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  font-size: calc(13px * var(--tk, 1)); line-height: 1.45; font-weight: 500;
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
#qPop.on { opacity: 1; }
#qPop b { display: block; margin-bottom: 4px; }
/* Хвостик к значку: два треугольника, верхний перекрывает линию рамки */
#qPop::after, #qPop::before {
  content: ''; position: absolute; left: var(--tail, 50%); margin-left: -7px;
  border: 7px solid transparent; width: 0; height: 0;
}
#qPop::before { bottom: -14px; border-top-color: var(--line); }
#qPop::after { bottom: -13px; border-top-color: var(--bg); }
/* Окно снизу от значка - хвостик смотрит вверх */
#qPop.below::before { bottom: auto; top: -14px; border-top-color: transparent;
  border-bottom-color: var(--line); }
#qPop.below::after { bottom: auto; top: -13px; border-top-color: transparent;
  border-bottom-color: var(--bg); }

/* Флажок «в контент-плане» вместо кнопки и зелёной плашки */
.topic-flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; vertical-align: middle;
  border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg);
  color: var(--good); font-size: calc(13px * var(--tk, 1)); line-height: 1;
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.topic-flag:hover { border-color: var(--ink-faint); background: var(--bg-soft); }
.topic-flag:focus-visible { outline: 2px solid var(--ink-faint); outline-offset: 2px; }
.topic-flag.on {
  background: var(--good-bg); border-color: var(--good); cursor: default;
}
.col-tip {
  max-width: 720px; font-size: calc(13px * var(--tk, 1)); line-height: 1.5;
  background: var(--bg-soft); border-left: 3px solid var(--accent, #6f6af8);
}
.col-tip b { display: block; margin-bottom: 4px; }
.col-tip p { margin: 0 0 8px; color: var(--ink-soft); }

/* Шапка таблицы роликов держится при прокрутке. Прокручивается сама рамка
   таблицы, поэтому шапка липнет к её верху, а не к экрану. Липкость терялась
   из-за механики перетаскивания столбцов: она ставит ячейкам position:relative */
#screen .clips-scroll thead th,
#screen .clips-scroll thead th.col-head {
  position: sticky; top: -1px; z-index: 5;
}
#screen .clips-scroll thead th.col-stick { z-index: 6; }

/* Фильтр по конкурентам: несколько можно включить разом, поэтому кнопки,
   а не выпадающий список - выбор виден целиком, без раскрытия */
.comp-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comp-filter .pick {
  padding: 4px 10px; font: inherit; font-size: calc(12px * var(--tk, 1)); cursor: pointer;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--bg); color: var(--ink-soft);
}
.comp-filter .pick:hover { border-color: var(--ink-faint); color: var(--ink); }
.comp-filter .pick.on {
  background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600;
}

/* Список конкурентов сворачивается кликом по шапке: когда смотришь ролики,
   он только занимает место. Строка «Всего» остаётся - сворачивают, чтобы
   убрать с глаз разбор, а не чтобы потерять общую цифру */
/* Свёртка - отдельной кнопкой у левого края, а не кликом по всей шапке:
   клик по заголовку сортирует столбец, и два действия путались между собой */
.with-fold { padding-left: 6px !important; }
.fold-btn {
  width: 20px; height: 20px; margin-right: 6px; padding: 0;
  border: 1px solid var(--line); border-radius: 5px; background: var(--bg);
  color: var(--ink-faint); font-size: calc(10px * var(--tk, 1)); line-height: 1; cursor: pointer;
  vertical-align: middle;
}
.fold-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.comp-list.folded tbody tr:not(.sum) { display: none; }
.clips-t.folded tbody tr { display: none; }

/* Карточка темы раскрывается прямо в таблице: ссылка на пример, три
   варианта сценария, правка руками. Что здесь сохранили - то сразу видит
   бот и приложение, отдельной публикации нет */
.topic-row { cursor: pointer; }
.topic-row.on td { background: var(--bg-soft); }
.topic-card td { background: var(--bg-soft); padding: 12px 16px 16px !important; }
/* Вложенная таблица сценария живёт по своим правилам: жирный отступ
   карточки не для её клеток */
.topic-card .tr-script td, .topic-card .tr-script th {
  padding: 8px 10px !important; background: var(--bg); }
.topic-card .tr-script thead th { background: var(--bg-head); }
/* Карточка сама на мягком фоне - рамке сценария нужен белый, как в панели */
.topic-card .tr-sbody { background: var(--bg); border: 1px solid var(--line-soft); }
/* Взятый в работу ролик подсвечен: на встрече сразу видно, что уже отдано
   сотрудникам, а что ещё нет */
#screen tbody tr.took td { background: var(--good-bg); }
#screen tbody tr.took td.name { font-weight: 500; }

/* Название ролика переносится на две строки и там обрезается: в одну строку
   колонка растягивалась на пол-таблицы, и числа уезжали за экран.
   width:100% раньше сжимал 17 колонок в размер рамки - на узком экране
   процент от неё был меньше, чем нужно самому слову подписи. У рамки уже
   есть своя прокрутка (та же, что у отчётов): без width таблица встаёт
   в сумму пиксельных колонок из colgroup и уезжает вбок, когда не влезает,
   а не режет текст (правка Павла 15.09.2026) */
/* min-width обязателен: table-layout:fixed без width сам не растёт по сумме
   colgroup - браузер пропорционально сжимает все px-колонки в размер рамки,
   и ровно те же слова снова резались бы. Число ниже - точная сумма всех
   <col style="width:...px"> из colgroup в cabinet.js (drawTabbed, лента
   конкурентов): поменял там ширину столбца - пересчитай и здесь, иначе
   сжатие вернётся (находка GLM 15.09.2026: числа разошлись на 8px) */
.clips-t { table-layout: fixed; min-width: 1545px; }
/* Отступ ячейки задан своим, а не общим `#screen table td`: тот меняется
   от высоты окна (6×10 на низком, 9×12 на высоком), а ширины колонок тут
   жёсткие в px - и на высоком экране числа начинали резаться. Семнадцать
   колонок по 6 px вместо 10 - это 136 px, ровно они и не давали ленте
   влезть в экран. Правка Павла 16.09.2026 */
#screen .clips-t td, #screen .clips-t th { padding: 5px 6px; }
/* Ellipsis - подстраховка на коротких форматах (дата, «5×», секунды):
   раньше без него содержимое резалось без «…», и «982 982%» превращалось
   в кашу без объяснения, что дальше есть текст (правка Павла 15.09.2026) */
.clips-t td, .clips-t th {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Заголовки переносятся, а не режутся: «Обновлени», «Просмотрь» читались
   как обрывки. То же для переменных по длине данных - имя конкурента,
   креатора, тип, дата обновления - там перенос честнее клипа */
.clips-t th, .clips-t td.col-wrap {
  white-space: normal; overflow-wrap: break-word; line-height: 1.25;
}
.clip-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}
.clips-t td.name { white-space: normal; vertical-align: middle; }
.clips-t td.name .pill { display: inline-block; margin-top: 2px; }
.clips-t td.col-wrap { vertical-align: middle; }

/* Тренды и топ стоят рядом, по половине экрана - оба видны сразу. Семь
   колонок в такую ширину влезают только ужатыми: имя в две строки,
   числа мельче, «Комментарии» сокращены до «Комм.» */
.trend-pair table { table-layout: fixed; }
.trend-pair td, .trend-pair th { padding-left: 5px; padding-right: 5px; }
/* Восемь колонок в половину экрана влезают, пока эта половина не уже
   ~820 px. На 125% и 150% она давала 633 и 511, и числа резались:
   «958 552%» превращалось в «958 55». Ниже 1700 своих px таблицы встают
   друг под друга и получают всю ширину. Ширину берём измеренную
   (data-pair1 в look.js), а не из медиазапроса: тот меряет окно без
   масштаба и врёт в полтора раза. Правка 16.09.2026 */
html[data-pair1] .trend-pair { grid-template-columns: 1fr; }
/* На телефоне восьми колонкам не хватит никакой доли: 343 px на всё, и
   «594 302» резалось до «594 3». Доли там отменяем - таблица берёт свою
   ширину и листается вбок в своей рамке, как лента конкурентов */
.trend-pair td.num, .trend-pair th { font-size: calc(12px * var(--tk, 1)); }
.trend-pair td.name { white-space: normal; }
/* Ник автора - один длинный кусок без пробелов: перенести его негде, и
   «@smart_diamonds585» резалось на «@smart_diamo». Рвём по буквам - имя
   видно целиком, а не наполовину. На телефоне не включаем: там колонка
   40 px, и по буквам рвалось бы уже «585 Золотой». Правка 16.09.2026 */
html:not([data-w="xs"]) .trend-pair td,
html:not([data-w="xs"]) .trend-pair th { overflow-wrap: anywhere; }
.trend-pair .btn.btn-sm { padding: 3px 8px; font-size: calc(11px * var(--tk, 1)); }
.trend-pair .sub-note { font-size: calc(11px * var(--tk, 1)); }

/* Разбор формулы: читают его один раз, но читают внимательно - поэтому
   узкая колонка текста, а не полотно во всю ширину экрана */
.comp-help { max-width: 760px; font-size: calc(13px * var(--tk, 1)); line-height: 1.5; }
.comp-help b { display: block; margin: 10px 0 4px; font-size: calc(13px * var(--tk, 1)); }
.comp-help b:first-child { margin-top: 0; }
.comp-help p { margin: 0 0 8px; color: var(--ink-soft); }
.comp-help p b { display: inline; margin: 0; color: var(--ink); }


/* ── Низкий экран: строки таблицы важнее подписей ────────────────── */
/* заказчик на демо 11.09.2026 показал ноутбук, где в отчёте видно
   две строки из 2450: «вся шапка экран занимает, а данные в таком окошке».
   Меряли на 1280x590: из 458 px рабочей области таблице доставалось 147,
   и 78 из них съедала шапка колонок в три строки.
   Ужимаем всё вспомогательное, саму таблицу не трогаем */

/* Шапка отчёта: длинные названия переносятся на вторую строку - правка
   Павла 15.09.2026. До этого стоял запрет переноса ради прокручиваемой
   области, но «Подключено человек» и «Премия за просмотр» из-за него
   обрывались на середине слова. Две строки ограничены высотой шапки */
#screen .rep-scroll thead th {
  white-space: normal; overflow-wrap: normal; line-height: 1.2;
}
/* Зазор под кнопку на границе больше не нужен: с 15.09.2026 кнопка
   проявляется только при наведении, в покое текст ни во что не упирается */

/* Тесный экран - шапка отчёта возвращается в одну строку. Перенос съедал
   высоту у самих строк: на 1600 при масштабе 150% под таблицу оставалось
   137 px, то есть две строки из двух с половиной тысяч (поймал гейт) */
html[data-low] #screen .rep-scroll thead th { white-space: nowrap; }
/* Вместе с nowrap нужна обрезка: перелив, разрешённый ради кнопки на
   границе, давал длинному слову лечь поверх соседнего заголовка (GLM).
   Но обрезка всей ячейки съедала половину кнопки сворачивания - она сидит
   верхом на границе столбцов, и вернуть скрытый столбец можно только ею.
   Поэтому клипаем текст, а ячейку оставляем открытой. GLM 16.09.2026 */
html[data-low] #screen .rep-scroll thead th.col-head { overflow: visible; }
html[data-low] #screen .rep-scroll thead th.col-head .col-t {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (min-width: 901px) and (max-height: 900px) {
  /* Разрез и период встают в одну полосу, когда хватает ширины */
  #screen .card.cut-card { flex-direction: row; flex-wrap: wrap; align-items: center; }
  #screen .card.cut-card .cut-row { padding: 8px 14px; border-bottom: none; }
  #screen .card.cut-card .period-row { padding: 8px 14px 8px 0; gap: 10px; }

  /* Пояснение под таблицей читают один раз, а место оно занимает всегда */
  #screen .rep-legend { display: none; }

  /* Свёрнутая карточка графика: заголовок с кнопками, без лишних полей */
  #screen .card.folded > header { padding-top: 8px; padding-bottom: 8px; }

  /* Плашка «демо-режим» маленькая и стоит в правом углу - полоса в 56 px
     под ней на низком экране это две строки таблицы */
  body.app .wrap { padding-bottom: 22px; }

  /* Развёрнутый график отнимал у таблицы всё: карточка росла на 266 px и
     не сжималась, таблице оставалось 21 px при шапке в 78 - ноль строк.
     На низком экране график отдаёт высоту данным */
  #screen .card.chart-card { flex: 0 1 auto; min-height: 0; }
  #screen .card.chart-card .chart { height: 130px; }

  /* Таблице оставляем неприкосновенный минимум. Не влезает вместе с графиком -
     прокручивается рабочая область, а не схлопывается таблица: пустая рамка
     читается как «данных нет», прокрутка - как «данные ниже» */
  /* body.app в начале не для красоты: без него правило проигрывает
     по весу соседнему «body.app #screen > .card { min-height: 0 }» */
  body.app #screen > .card:has(> .rep-scroll),
  body.app #screen > .card:has(> .scroll),
  body.app #screen > .card:has(.tall-scroll),
  body.app #screen #contentBody > .card:has(.tall-scroll),
  body.app #screen .dash-pair > .card:has(.tall-scroll) { min-height: 240px; }

  /* Описание ролика в трендах занимало три строки и раздувало строку таблицы
     до 91 px - на низком экране это две видимые записи вместо пяти.
     Полный текст остаётся в подсказке и по ссылке на оригинал */
  #screen .trend-pair .clip-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (min-width: 901px) and (max-height: 660px) {
  #screen .trend-pair .clip-name { -webkit-line-clamp: 1; }
}

@media (min-width: 901px) and (max-height: 650px) {
  #screen .card.chart-card .chart { height: 96px; }
}
/* Вкладки настроек «Мотивация», «Роли» и «Модерация» листаются целиком:
   этажи идут по содержимому. Раньше карточка вкладки сжималась под экран
   (flex: 1), и три таблицы превращались в книжные полки по три строки, а
   ставки резались молча - .motiv-box прячет перелив ради скруглённых углов.
   «Люди» не трогаем: там одна таблица на 2450 строк со своей прокруткой
   и липкой шапкой (скрины Павла 12.09.2026, масштаб 150%) */
@media (min-width: 901px) {
  body.app #screen > .card.sticky-head[data-tab="motiv"],
  body.app #screen > .card.sticky-head[data-tab="moder"] {
    flex: 0 0 auto; overflow: visible;
  }
  /* «Конкуренты» листаются целиком: развернул список из шести строк - и
     раньше нельзя было докрутить до ленты, карточку резал overflow.
     У ленты остаётся своя рамка с прокруткой, как у тем в контент-плане
     (Павел, 12.09.2026) */
  body.app #screen #contentBody > .card[data-tab="comp"] {
    flex: 0 0 auto; overflow: visible;
  }
  /* «Результаты» - другое дело: 432 ролика листать страницей нельзя,
     карточка держится в экране, а лента прокручивается в своей рамке.
     Правка Павла 16.09.2026 */
  body.app #screen #contentBody > .card[data-tab="comp"][data-sub="res"] {
    flex: 1; min-height: 0; overflow: hidden;
  }
  body.app #screen #contentBody > .card[data-tab="comp"][data-sub="res"] > .scroll {
    flex: 1; min-height: 0; max-height: none;
  }
  /* Роли ведут себя как «Люди»: карточка занимает экран, а матрица
     прокручивается в своей рамке под липкой шапкой. Раньше вкладка
     листалась целиком - при базе масштаба 100% это не влезало в экран
     заказчика. Решение Павла 16.09.2026. Мотивацию и Модерацию
     не трогаем: там по три таблицы в ряд, и сжатие карточки превращало
     их в книжные полки по три строки */
  body.app #screen > .card.sticky-head[data-tab="roles"] > .sub-card {
    flex: 1; min-height: 0;
  }
  /* Рамка матрицы берёт остаток карточки, а не 62% высоты окна: с долей
     под таблицей оставалось 105 px пустоты, а две последние роли уезжали
     под срез. Правка Павла 16.09.2026 */
  body.app #screen > .card.sticky-head[data-tab="roles"] > .sub-card > .scroll {
    flex: 1; min-height: 0; max-height: none;
  }
}

/* На низком экране вкладки «Мотивация» и «Модерация» листаются внутри
   карточки, а не тянут вниз всю страницу: на базовом экране 1280×590
   при базовом масштабе они уезжали за край на 111 и 727 px. На просторном
   экране остаётся прежнее поведение - вкладка идёт по содержимому.
   Решение Павла 16.09.2026 */
@media (min-width: 901px) {
  html[data-low] body.app #screen > .card.sticky-head[data-tab="motiv"],
  html[data-low] body.app #screen > .card.sticky-head[data-tab="moder"] {
    flex: 1; overflow: hidden;
  }
  /* Тянется содержимое, а не полоса подвкладок: без исключения «Ставки ·
     История» растягивалась на 237 px вместо 39, и сверху зияла пустота */
  html[data-low] body.app #screen > .card.sticky-head[data-tab="motiv"] > .body:not(.sub-bar),
  html[data-low] body.app #screen > .card.sticky-head[data-tab="moder"] > .body:not(.sub-bar) {
    flex: 1; min-height: 0; overflow-y: auto;
  }
  html[data-low] body.app #screen > .card.sticky-head[data-tab="motiv"] > .body.sub-bar,
  html[data-low] body.app #screen > .card.sticky-head[data-tab="moder"] > .body.sub-bar {
    flex: 0 0 auto;
  }
  /* Раздел «Модерация»: над содержимым стоят шапка и переключатель вида,
     они съедают 90 px. И список, и карточный вид тянутся по остатку, а
     листаются внутри - очередь слева и разбор сюжета справа каждый в
     своей рамке. Раньше вид «Карточки» уезжал за край на 388 px */
  html[data-low] body.app #screen[data-sec="moder"] > .card,
  html[data-low] body.app #screen[data-sec="moder"] > .moder {
    flex: 1; min-height: 0; overflow: hidden;
  }
  html[data-low] body.app #screen[data-sec="moder"] > .moder > * {
    min-height: 0; max-height: 100%; overflow-y: auto;
  }
}

/* То же для масштаба: html[data-low] ставит applyZoom, когда фактическая
   высота (окно / масштаб) ниже 660 - медиазапрос этого не видит */
@media (min-width: 901px) {
  html[data-low] #screen .card.chart-card .chart { height: 96px; }
  html[data-low] #screen .rep-legend { display: none; }
  html[data-low] body.app #screen > .card:has(> .rep-scroll),
  html[data-low] body.app #screen > .card:has(> .scroll) { min-height: 320px; }
  html[data-low] #screen .card.cut-card { flex-direction: row; flex-wrap: wrap; align-items: center; }
  html[data-low] #screen .card.cut-card .cut-row { padding: 8px 14px; border-bottom: none; }
  html[data-low] #screen .card.cut-card .period-row { padding: 8px 14px 8px 0; gap: 10px; }
  html[data-low] body.app .wrap { padding-bottom: 22px; }
}

/* Полосы прокрутки тонкие. На Mac они накладываются поверх содержимого, а на
   Windows занимают место: горизонтальная полоса внутри таблицы отнимала 15 px
   высоты - половину строки, а вертикальная 17 px ширины у каждой рамки */
#screen, #viewPnl, .scroll, .rep-scroll, .tall-scroll, .pnl-scroll, .people-scroll {
  scrollbar-width: thin;
}

/* Демо-пометка: маленькая, но на каждом экране стенда */
/* Под плашкой оставляем место, иначе она накрывает низ страницы */
body.app .wrap { padding-bottom: 56px; }

.demo-note {
  position: fixed; right: 14px; bottom: 10px; z-index: 60;
  font-size: calc(11px * var(--tk, 1)); color: var(--ink-faint);
  background: var(--bg); border: 1px solid var(--line-soft);
  border-radius: 20px; padding: 4px 12px; pointer-events: none;
}
@media (max-width: 640px) { .demo-note { left: 12px; right: 12px; text-align: center; } }

/* Вкладка «Роли»: матрица прав. Уровень доступа - короткой пилюлей,
   подробности по наведению: длинные фразы разносили таблицу на два экрана */
.roles-t td, .roles-t th { vertical-align: middle; padding: 7px 10px; }
/* Роль и её уровень идут в две строки, а колонка держит свою ширину:
   одной строкой «Администратор доступов Сеть или ветка» растягивал её
   до 300 px, и последняя колонка «Экономика» не влезала в экран.
   Правка Павла 16.09.2026 */
.roles-t { --role-w: 178px; }
.roles-t td.name, .roles-t th:first-child { width: var(--role-w); }
.roles-t td.name { white-space: normal; line-height: 1.3; }
.roles-t td.name .small { display: block; margin-top: 1px; }
/* Охват данных / Действия - свободный текст, перенесённый из отдельной
   таблицы «Что видит и что может» в общую матрицу - решение Павла
   16.09.2026. max-width на td браузер игнорирует при table-layout:auto -
   ограничение живёт на внутреннем .roles-txt, а не на самой ячейке.
   GLM-находка 16.09.2026 */
.roles-t td.left { white-space: normal; }
/* Охват и действия - пояснительная проза, а не данные: 12px, как подписи
   по всей платформе. На табличных 13.5px две многострочные колонки давили
   матрицу - правка Павла 16.09.2026 про единый размер шрифтов */
.roles-t .roles-txt {
  /* Нижняя граница - предел сжатия, а не рабочая ширина: на просторе
     колонки всё равно расходятся до 300 px. С порогом 220 таблица
     упиралась в 1509 px и на увеличенном масштабе резала «Экономику» */
  min-width: 170px; max-width: 320px; overflow-wrap: anywhere;
  font-size: calc(12px * var(--tk, 1)); line-height: 1.4;
}
/* На базовом экране 1280×590 матрице не хватало 137 px по высоте и
   39 px по ширине: две последние роли уезжали под срез, а «Экономика»
   резалась справа. Забираем воздухом ячейки, а не содержанием - текст
   ролей остаётся прежним. Правка Павла 16.09.2026 */
html[data-low] #screen .roles-t td, html[data-low] #screen .roles-t th { padding: 5px 8px; }
html[data-low] #screen .roles-t .roles-txt { line-height: 1.33; }
html[data-low] #screen .sub-card > .scroll.pad { padding: 0 12px 8px; }
.roles-t .small { font-size: calc(11px * var(--tk, 1)); }
.roles-t .btn.small { padding: 4px 12px; font-size: calc(12px * var(--tk, 1)); white-space: nowrap; }

.lvl {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: calc(11.5px * var(--tk, 1)); font-weight: 600; white-space: nowrap;
}
.lvl-full { background: color-mix(in srgb, var(--good, #2e7d4f) 14%, transparent); color: var(--good, #2e7d4f); }
.lvl-branch { background: color-mix(in srgb, var(--warn, #b8860b) 16%, transparent); color: var(--warn, #b8860b); }
.lvl-read { background: var(--pill); color: var(--ink-soft); }
.lvl-no { background: transparent; color: var(--ink-faint); font-weight: 400; }

/* Карточка раздела: можно свернуть, шапка липнет к верху своей рамки
   при прокрутке */
.sub-card { margin-top: 14px; }
.sub-card > .scroll { max-height: calc(var(--app-h, 100vh) * 0.62); overflow: auto; }
/* Шапка липнет к верху своей рамки. Селектор с #screen нужен, чтобы
   перебить правило родительской карточки настроек: там смещение считается
   от её собственного заголовка, и вложенная таблица уезжала под него */
/* Шапка липнет к верху своей рамки. Селектор с #screen нужен, чтобы
   перебить правило родительской карточки настроек: там смещение считается
   от её собственного заголовка, и вложенная таблица уезжала под него.
   Слои: шапка выше строк, угловая ячейка выше всех - иначе при прокрутке
   вниз первая колонка проезжала поверх заголовков */
#screen .card.sticky-head .sub-card thead th,
.sub-card thead th {
  position: sticky; top: 0 !important; z-index: 5; background: var(--bg-head);
}
.sub-card .roles-t td.name {
  position: sticky; left: 0; z-index: 2; background: var(--bg);
}
#screen .card.sticky-head .sub-card .roles-t th:first-child,
.sub-card .roles-t th:first-child {
  position: sticky; left: 0; z-index: 6; background: var(--bg-head);
}
/* Подсвеченная строка не должна светиться сквозь закреплённую колонку */
.sub-card .roles-t tbody tr:hover td.name { background: var(--bg-soft); }

/* Кнопка кабинета стоит второй колонкой и держится при прокрутке вбок
   вместе с названием роли: за ней и приходят на эту вкладку */
.sub-card .roles-t td.cab, .sub-card .roles-t th.cab {
  position: sticky; left: var(--role-w, 210px); z-index: 2; background: var(--bg);
}
#screen .card.sticky-head .sub-card .roles-t th.cab,
.sub-card .roles-t th.cab { z-index: 6; background: var(--bg-head); }
.sub-card .roles-t tbody tr:hover td.cab { background: var(--bg-soft); }
.roles-t td.name, .roles-t th:first-child { min-width: var(--role-w); }

/* Плашка предпросмотра роли: видно, что это витрина, а не вход под чужой
   учётной записью. Стоит первой строкой раздела */
.role-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 14px; padding: 10px 14px; border-radius: 10px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  font-size: calc(13px * var(--tk, 1));
}
.role-bar .small { font-size: calc(12px * var(--tk, 1)); }
.roles-t .btn.small { padding: 5px 10px; font-size: calc(12px * var(--tk, 1)); white-space: nowrap; }
/* Название роли - это название, а не ссылка */
.roles-t td.name b { color: var(--ink); }

/* ── Настройки модерации: пороги и словари ────────────────────────────
   Таблица тут не про сравнение чисел, а про правку: имя параметра слева
   занимает место, поле ввода одной ширины со всеми остальными в системе */
.mc-t { table-layout: fixed; width: 100%; }
.mc-c2 { width: 104px; }
/* 100px × tk, а не 62 фиксированных: «публикаций» - 71px текста при 11px
   плюс 20px отступов ячейки, и отступы не масштабируются - при 100px
   слово держится одной строкой на всех ступенях зума от 70%. GLM-находка
   16.09.2026: колонка под tk=1 при масштабируемом шрифте возвращала
   перенос на любом другом зуме */
.mc-c3 { width: calc(100px * var(--tk, 1)); }
/* .motiv-t держит ячейки в одну строку - для ставок это верно, а здесь
   в первой колонке живёт название параметра с пояснением, и оно переносится.
   Юнит тоже: «просмотров» у «Просадка, абсолют» в те же 62 px не влезал
   и вылезал за край строки - GLM-находка 16.09.2026, тот же класс бага,
   что уже был у «числа следующего месяца». white-space:normal одно не
   спасает - в слове нет пробела, переносить браузеру негде без overflow-wrap */
.mc-t td.mc-name, .mc-t .mc-hint, .mc-t td.mc-unit { white-space: normal; overflow-wrap: anywhere; }
/* Селектор с тегом весомее одного класса, и .motiv-t td возвращал название
   параметра в центр: строка в две строки по центру читается тяжело */
#screen .mc-t td.mc-name { text-align: left; padding: 7px 12px; line-height: 1.3; }
/* Селектор с тегом (.motiv-t td, 13px/500) весомее одного класса .mc-unit,
   и юнит рисовался крупным жирным - оттого «публикаций» и ломалось на три
   строки. Единица - подпись: 11px обычным, как .mc-one-unit рядом.
   Правка Павла 16.09.2026 про единый стиль размеров */
#screen .mc-t td.mc-unit {
  text-align: left; padding-left: 8px;
  font-size: calc(11px * var(--tk, 1)); font-weight: 400;
}
.mc-t td.mc-val, .mc-t td.mc-unit { vertical-align: middle; }
/* Строки одной высоты: блоки стоят рядом, и разнобой сразу видно */
.mc-t tbody tr { height: 46px; }
/* Группа на одну настройку: поле и единица встают строкой под пояснением.
   Внутри таблицы единица жила в колонке 62 px и обрезалась - «числа сл...» */
.mc-one { padding: 8px 12px 10px; }
/* Один размер имени поля во всех трёх панелях: столбиком имя было 12px
   против 13px у .motiv-t td рядом, и «Сроки разбора» читались чужими.
   Правка Павла 16.09.2026: единый стиль размеров по платформе */
.mc-one .mc-name {
  font-size: calc(13px * var(--tk, 1)); line-height: 1.3; font-weight: 500;
}
.mc-one-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.mc-one-row .mc-in { flex: 0 0 72px; width: 72px; }
.mc-one-unit { font-size: calc(11px * var(--tk, 1)); line-height: 1.3; }
/* Галочка под настройкой - отдельное решение, а не продолжение строки:
   без линии она читалась как подпись к полю ввода */
.mc-one + .mc-check { border-top: 1px solid var(--line-soft); padding-top: 9px; }
.mc-check {
  display: block; margin-top: 10px; font-size: calc(13px * var(--tk, 1));
  font-weight: 600; cursor: pointer;
}
.mc-check input { margin-right: 6px; vertical-align: -1px; }
.mc-hint { font-size: calc(11px * var(--tk, 1)); line-height: 1.35; margin-top: 2px; }
.mc-val { width: 96px; }
.mc-in {
  width: 88px; height: 28px; padding: 0 8px; text-align: center;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); color: var(--fg); font: inherit;
  font-size: calc(13px * var(--tk, 1));
}
.mc-in:focus { outline: none; border-color: var(--accent); }
.mc-unit { width: 54px; font-size: calc(11px * var(--tk, 1)); text-align: left; padding-left: 8px; }
.mc-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* 13px, как у имён полей и галочки: в согласованном макете подписи
   словарей и полей одного размера */
.mc-lists label { display: block; font-size: calc(13px * var(--tk, 1)); font-weight: 600; }
.mc-area {
  width: 100%; min-height: 96px; margin-top: 6px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; resize: vertical;
  background: var(--card); color: var(--fg); font: inherit;
  font-size: calc(13px * var(--tk, 1)); font-weight: 400;
}
.mc-area:focus { outline: none; border-color: var(--accent); }
/* Пустая строка таблицы: «Пороги ещё не правили» не должно выглядеть
   как строка данных */
#screen tr.tbl-empty td { color: var(--ink-faint); text-align: center; padding: 14px 9px; }

.mc-budget {
  margin-bottom: 10px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--line); font-size: calc(12px * var(--tk, 1));
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* Тумблер режима держит свою ширину: сегменты по умолчанию делят строку
   поровну, и внутри плашки расходов он растягивался на пол-экрана */
.mc-budget .seg { flex: 0 0 auto; }
.mc-budget .seg button { flex: 0 0 auto; white-space: nowrap; }
.mc-budget > span { flex: 1 1 260px; min-width: 0; }
@media (max-width: 900px) { .mc-lists { grid-template-columns: 1fr; } }

/* Подзаголовок подгруппы внутри карточки порогов («Гео», «Просадка и
   мёртвые ссылки») - тем же приёмом, что uppercase-подписи в остальном
   кабинете, но локально: этот текст не появляется больше нигде */
.mc-subhead {
  font-size: calc(11px * var(--tk, 1)); font-weight: 700; letter-spacing: .05em;
  color: var(--ink-faint); text-transform: uppercase; margin: 10px 0 0;
  padding: 10px 12px 0; border-top: 1px dashed var(--line);
}
.motiv-box .mc-subhead:first-of-type { border-top: none; padding-top: 8px; margin-top: 0; }
/* Без размера заметка наследовала 15px тела и кричала громче полей -
   правка Павла 16.09.2026: 12px, как у подписей по всей платформе */
.mc-subnote {
  padding: 6px 12px 8px; margin: 0; line-height: 1.4;
  font-size: calc(12px * var(--tk, 1));
}
.tag-geo {
  display: inline-block; font-size: calc(10px * var(--tk, 1)); font-weight: 700;
  color: var(--accent); background: var(--accent-soft); border-radius: 6px;
  padding: 1px 6px; letter-spacing: .03em; vertical-align: 1px;
}

/* Ряд под порогами: «Сохранить» и «Вернуть». История уехала наверх
   подвкладкой, как «Ставки · История» в Мотивации. Павел 16.09.2026 */
.motiv-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* Цитата найденного куска описания: модератор видит, за что загорелся флаг,
   и не открывает публикацию, чтобы это выяснить */
.chk-quote {
  display: block; margin-top: 3px; padding: 4px 7px; border-radius: 6px;
  background: var(--soft, rgba(127,127,127,.09)); font-size: 11px;
  line-height: 1.35; font-style: italic; opacity: .85;
}
.plate-src { display: block; font-size: 10px; font-weight: 400; opacity: .6; margin-top: 1px; }

/* Разбор пачкой: кнопка появляется только когда очередь сужена поводом -
   «зачесть всё подряд» это не модерация, а её отсутствие */
.qbulk {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 7px 10px; margin: 6px 0 2px; border-radius: 8px;
  border: 1px dashed var(--line); font-size: 11px;
}
/* Подпись перед кнопкой: она и объясняет, что за «зависшие» - без неё
   название кнопки приходилось расшифровывать наведением */
.dl-note { margin-left: 10px; font-size: 12px; }

/* ── Контент-план сети: доска, список, календарь ───────────────────── */
/* Полосы управления планом - строки без карточки, как в макете: название
   раздела уже написано на вкладке (правка Павла 19.09.2026) */
.pl-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px; }
/* Обе строки управления липнут под полосой вкладок: доска длинная, а
   вид, фильтры и «Создать сценарий» нужны на любой прокрутке
   (правка Павла 19.09.2026) */
.pl-ctls { position: sticky; top: calc(var(--moder-head-h, 44px) + 2px);
  z-index: 7; background: var(--bg-soft); padding-top: 2px; }
/* Карточка спорного сюжета закреплена: листается очередь слева, а разбор
   стоит на месте и крутится внутри себя (правка Павла 19.09.2026) */
.qbody { position: sticky; top: calc(var(--moder-head-h, 44px) + 10px);
  align-self: start;
  max-height: calc(var(--app-h, 100vh) - var(--moder-head-h, 44px) - 120px);
  overflow-y: auto; }
/* Шапки колонок трендов больше не липкие: вкладка не скроллится снаружи
   (ленты листаются внутри), а sticky с top:49 на низком окне сползал вниз
   и накрывал первый ряд плиток - «обрезка» со скрина Павла 19.09.2026 */
#screen .tr-feed .tr-list thead th { position: sticky; top: 0; z-index: 3;
  background: var(--bg-head); box-shadow: 0 -10px 0 0 var(--bg); }
.pl-sub { font-size: calc(11px * var(--tk, 1)); color: var(--ink-faint); }
.pl-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
/* Колонка доски - карточка, как в макете: белая, со своей шапкой */
.pl-col { display: flex; flex-direction: column; gap: 8px; min-width: 0;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow);
  padding: 0 10px 10px; }
.pl-col-h {
  display: flex; align-items: center; gap: 7px;
  font-size: calc(12px * var(--tk, 1)); font-weight: 700;
  padding-bottom: 8px; margin: 0 -10px; padding-left: 12px; padding-right: 12px;
  border-bottom: 1px solid var(--line);
  /* Доска листается целиком, а названия колонок и счётчики должны быть видны
     на любой прокрутке: иначе на третьем экране карточек непонятно, где что */
  position: sticky; top: 0; z-index: 2;
  background: var(--bg); padding-top: 10px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.pl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pl-cnt { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Карточка сюжета как в согласованном артефакте: название своей строкой,
   ряд плашек под ним, приглушённая строка «кому и откуда» снизу.
   Прежняя была сеткой из двух колонок под значок дня - новая разметка в
   неё не ложилась, и всё слипалось в одну строку. Правка Павла 18.09.2026 */
.pl-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 10px;
  font: inherit; color: inherit;
}
.pl-card:hover { border-color: var(--line); }
.pl-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pl-card b {
  display: block; font-size: calc(13px * var(--tk, 1)); font-weight: 600; line-height: 1.35;
}
.pl-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pl-pill {
  font-size: calc(10px * var(--tk, 1)); font-weight: 700; border-radius: 5px;
  padding: 2px 5px; background: var(--fillq); color: var(--ink-soft); white-space: nowrap;
}
.pl-pill.goal { background: var(--accent-soft); color: var(--accent); }
.pl-pill.fmt { background: var(--warn-bg); color: var(--warn); }
.pl-pill.date { background: var(--good-bg); color: var(--good); }
.pl-pill.made { background: var(--fillq2); color: var(--ink-soft); }
.pl-who {
  display: block; margin-top: 6px;
  font-size: calc(10px * var(--tk, 1)); color: var(--ink-faint);
}
.pl-more { font-size: 11px; padding: 4px 2px; }

.pl-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 14px 16px;
}
/* Обёртка календаря - та же карточная рамка, что была: сетка, полоса
   незапланированных и строка дней недели живут в одной раме */
.pl-calwrap { background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow); }
.pl-dowrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px; padding: 12px 14px 0; }
.pl-calwrap .pl-cal { padding-top: 6px; }
.pl-unpl { padding: 0 14px 14px; }
.pl-unpl-h { font-size: calc(10px * var(--tk, 1)); font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: var(--ink-faint);
  padding: 10px 0 8px; border-top: 1px solid var(--line); }
/* Полоса листается вбок и календарь не двигает */
.pl-unpl-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.pl-unpl-row .pl-card { flex: none; width: 220px; }
/* Карточки внутри колонки доски - своя прокрутка, зазор тот же, что был */
.pl-col-scroll { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.pl-cell.is-out .pl-cell-d { opacity: .45; }
.pl-cell {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 7px;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pl-cell.is-out { border-color: transparent; background: none; }
.pl-cell.is-today { border-color: var(--accent); }
.pl-dow {
  font-size: calc(10px * var(--tk, 1)); color: var(--ink-faint); font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; padding: 3px 4px;
}
.pl-cell-d { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-rest { font-size: 10px; color: var(--muted); }
.pl-chip {
  display: block; width: 100%; text-align: left; border: none; cursor: pointer;
  font: inherit;
  font-size: 10px;
  line-height: 1.25;
  padding: 3px 5px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-chip.is-biz { background: rgba(217, 162, 60, .2); }

/* Подсказка горячей клавиши на кнопке вида */
.seg .kbd {
  font-style: normal;
  font-size: 9px;
  padding: 0 3px;
  margin-left: 4px;
  border-radius: 3px;
  border: 1px solid var(--line);
  color: var(--muted);
  vertical-align: middle;
}

@media (max-width: 1100px) {
  .pl-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pl-board { grid-template-columns: 1fr; }
  .pl-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Телефон в таблице людей: цифры одной ширины, номер не переносится.
   По этой колонке ищут человека глазами, и рваные строки мешают */
#screen td.phone {
  white-space: nowrap; font-variant-numeric: tabular-nums;
  font-size: calc(13px * var(--tk, 1));
}

/* ─────────────────────────────────────────────────────────────────────
   Тренды: три колонки рядом, внутри каждой своя лента.
   Макет согласован Павлом 18.09.2026 отдельным прототипом. Все классы с
   приставкой tr-: имена вроде col, feed, grid, meta в этом файле общие,
   а .clip занят карточкой сюжета - столкновение уронило бы обе страницы.
   Ширину берём из data-w, а не из медиазапросов: те меряют окно без
   учёта масштаба и врут в полтора раза
   ───────────────────────────────────────────────────────────────────── */
.tr-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  flex: 1; min-height: 0; }
/* Вкладка трендов не скроллится снаружи: колонки забирают остаток высоты,
   ленты листаются внутри. Иначе при низком окне #screen прокручивался,
   липкие шапки колонок прилипали и накрывали верх лент - «обрезанный
   первый ряд» со скрина Павла 19.09.2026 */
body.app #screen:has(> .tr-three) { display: flex; flex-direction: column; }
body.app #screen:has(> .tr-three) > :not(.tr-three) { flex: none; }
html[data-w="s"] .tr-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-w="xs"] .tr-three { grid-template-columns: minmax(0, 1fr); }

.tr-col { background: var(--bg); border-radius: var(--radius-card); box-shadow: var(--shadow);
  display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
/* Шапка колонки: заголовок и кнопка сортировки в одной строке, полоса
   периода второй на всю ширину. В полосе кнопке не хватало места, и
   подпись резалась краем колонки (скрин Павла 21.09.2026) */
.tr-head { padding: 10px 14px; border-bottom: 1px solid var(--line); flex: none;
  display: flex; flex-wrap: wrap; align-items: center; }
.tr-head > b { flex: 1; min-width: 0; font-size: calc(15px * var(--tk, 1)); font-weight: 700; }
.tr-head > .tr-sort { flex: none; margin-left: 8px; }
.tr-head .tr-per { flex-basis: 100%; }

/* Полоса управления одинаковая у всех трёх колонок и в одну строку: иначе
   шапки разной высоты и ленты начинаются на разном уровне */
.tr-per { display: flex; align-items: center; gap: 3px; margin-top: 7px;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  font-size: calc(10.5px * var(--tk, 1)); }
/* Кнопки плотнее общих .seg: семь периодов, стрелки и подпись обязаны
   уместиться в колонку топа без обрезания (правка Павла 19.09.2026) */
.tr-per .seg button { padding: 3px 5px; }
.tr-per::-webkit-scrollbar { display: none; }
.tr-per .seg { flex: none; }
.tr-per button, .tr-head .tr-per b { font-size: inherit; }
.tr-head .tr-per b.tr-lbl { display: inline; font-weight: 700; white-space: nowrap; margin: 0 2px; }
.tr-nav { width: 18px; height: 18px; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink-soft); border-radius: 5px; cursor: pointer; padding: 0; line-height: 1; flex: none; }

.tr-feed { padding: 10px; overflow-y: auto; flex: 1; min-height: 0; }
/* Высота ряда считается от живой высоты ленты, а не от пропорций картинки:
   три ряда обязаны заполнить колонку без пустой полосы снизу и без обрезка
   четвёртого ряда. Иначе на базовом экране 1280×590 видно два с половиной
   ряда, а ТЗ обещает девять роликов */
.tr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  grid-auto-rows: var(--tr-rowh, 200px); }
.tr-clip { min-width: 0; min-height: 0; display: flex; }

/* Карточка залита целиком: приём, автор и цифры лежат на самой обложке.
   Подписи под карточкой нет - иначе ряды разъезжаются по высоте */
.tr-cover { position: relative; height: 100%; border-radius: 8px; overflow: hidden;
  display: flex; align-items: flex-end; cursor: pointer; color: #fff; width: 100%;
  border: none; padding: 0; text-align: left;
  background: linear-gradient(150deg, #2b3550, #6d5c82 55%, #b08b6e); }
.tr-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tr-cover img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.tr-c1 { background: linear-gradient(150deg, #2b3550, #6d5c82 55%, #b08b6e); }
.tr-c2 { background: linear-gradient(150deg, #123b36, #2f7a63 60%, #cbb26a); }
.tr-c3 { background: linear-gradient(150deg, #3a1f2b, #8c4a5f 55%, #e0a6a0); }
.tr-c4 { background: linear-gradient(150deg, #1d2a3a, #3f6d94 60%, #9fd0e0); }
.tr-c5 { background: linear-gradient(150deg, #2e2a1a, #7a6a35 55%, #d8c98a); }
.tr-c6 { background: linear-gradient(150deg, #241d38, #55408a 55%, #a893d8); }

.tr-net { position: absolute; top: 5px; left: 5px; font-size: calc(9px * var(--tk, 1));
  font-weight: 700; background: rgba(0, 0, 0, .5); border-radius: 5px; padding: 1px 5px; z-index: 2; }
.tr-acts { position: absolute; top: 5px; right: 5px; display: flex; gap: 3px; z-index: 2; }
.tr-act { width: 20px; height: 20px; border: none; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(0, 0, 0, .5); display: flex; align-items: center;
  justify-content: center; padding: 0; }
.tr-act:hover { background: rgba(0, 0, 0, .78); }
.tr-act.on { background: var(--good); }

/* Подписи лежат на стеклянной подложке, а не прямо на обложке: на светлой
   картинке белый текст читался через раз */
.tr-meta { position: relative; z-index: 2; width: calc(100% - 12px); margin: 6px; padding: 7px;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(10, 12, 16, .62);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%); }
.tr-what { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: calc(12px * var(--tk, 1)); font-weight: 600; line-height: 1.3; }
.tr-nick { font-size: calc(9px * var(--tk, 1)); color: rgba(255, 255, 255, .6); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-nums { display: flex; gap: 9px; margin-top: 5px; padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: calc(10px * var(--tk, 1)); font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-nums span { display: flex; align-items: center; gap: 3px; }
.tr-when { display: flex; align-items: center; gap: 3px; margin-top: 4px;
  font-size: calc(9px * var(--tk, 1)); color: rgba(255, 255, 255, .55); }
.tr-when i { font-style: normal; margin-left: auto; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 5px; padding: 1px 5px; }

/* Список: те же ролики таблицей. Обложка маленькая, автор строкой под
   названием - отдельной колонки он не заслужил */
#screen .tr-list thead th { font-size: calc(10px * var(--tk, 1)); padding: 8px 6px; }
/* Раскладка колонок фиксированная, название в две строки - как в макете.
   Без этого запрет переноса раздувал колонку названия, и множитель с ER
   уезжали за край колонки. Правка Павла 19.09.2026 */
.tr-list { width: 100%; border-collapse: collapse; font-size: calc(12px * var(--tk, 1));
  table-layout: fixed; min-width: 480px; }
/* На узкой колонке пиксельные столбцы съедали всю ширину, и «Ролик»
   сжимался в ноль: ниже минимума таблица уезжает вбок в своей рамке */
.tr-feed { overflow-x: auto; }
.tr-list th { text-align: left; font-size: calc(9px * var(--tk, 1)); font-weight: 600;
  color: var(--ink-faint); padding: 0 6px 6px; text-transform: uppercase; letter-spacing: .4px; }
.tr-list td { padding: 6px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.tr-list td.num, .tr-list th.num { text-align: center; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
/* Миниатюра в списке. position и overflow обязательны: картинка внутри
   позиционирована absolute, и без своей рамки она уехала к ближайшему
   позиционированному предку - на боевом сервере обложки растянулись на всю
   строку и залезли на текст. Поймал Павел глазами 18.09.2026, гейт эту
   сцену не открывал: список он не переключал */
.tr-mini { position: relative; width: 30px; height: 50px; flex: none;
  border-radius: 4px; overflow: hidden; display: block;
  background: linear-gradient(150deg, #2b3550, #6d5c82 55%, #b08b6e); border: none; padding: 0;
  cursor: pointer; }
.tr-mini img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.tr-row-name { display: flex; gap: 8px; align-items: center; min-width: 0; }
.tr-row-name b { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3;
  white-space: nowrap; }
.tr-row-name span { display: block; font-size: calc(10px * var(--tk, 1)); color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-empty { padding: 18px 14px; color: var(--ink-faint); font-size: calc(12px * var(--tk, 1)); }

/* ─────────────────────────────────────────────────────────────────────
   Разбор ролика: панель справа поверх ленты. Лента под ней не теряет
   место - человек закрывает разбор и продолжает с того же ролика
   ───────────────────────────────────────────────────────────────────── */
.tr-shade { position: fixed; inset: 0; background: rgba(16, 18, 22, .42);
  z-index: 60; border: none; padding: 0; cursor: pointer; }
.tr-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100%);
  background: var(--bg); z-index: 61; display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(16, 18, 22, .18); }
.tr-phead { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); flex: none; }
.tr-phead b { font-size: calc(15px * var(--tk, 1)); }
.tr-phead .grow { flex: 1; }
.tr-pbody { overflow-y: auto; padding: 14px 16px; flex: 1; min-height: 0; }

/* flex-start, не stretch: после разбора правая колонка выше обложки,
   и stretch растягивал блок ролика - он обязан держать 236 и 9/16 всегда
   (правка Павла 19.09.2026) */
.tr-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.tr-shot { width: 236px; flex: none; border-radius: 12px; overflow: hidden;
  aspect-ratio: 9/16; position: relative;
  background: linear-gradient(150deg, #2b3550, #6d5c82 55%, #b08b6e); }
/* contain, не cover: кадр виден целиком, как в соц. сети. Обложка другой
   формы встаёт с полями на градиенте - это честнее обрезанного кадра */
.tr-shot img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; }
.tr-facts { flex: 1; min-width: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-content: start; }
.tr-fact { background: var(--bg-soft); border-radius: 8px; padding: 7px 9px; }
.tr-fact b { display: block; font-size: calc(15px * var(--tk, 1)); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.tr-fact span { display: block; font-size: calc(9px * var(--tk, 1));
  color: var(--ink-faint); text-transform: uppercase; letter-spacing: .4px; margin-top: 1px; }

.tr-sec { margin-top: 14px; }
.tr-sec h3 { margin: 0 0 5px; font-size: calc(11px * var(--tk, 1)); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--ink-faint); }
.tr-sec p { margin: 0; font-size: calc(13px * var(--tk, 1)); line-height: 1.5; }
.tr-quote { border-left: 3px solid var(--accent); padding: 6px 0 6px 10px;
  font-size: calc(13px * var(--tk, 1)); line-height: 1.45; }
.tr-steps { margin: 0; padding-left: 18px; font-size: calc(13px * var(--tk, 1)); line-height: 1.5; }
.tr-steps li { margin-bottom: 4px; }
.tr-hunt { display: flex; gap: 3px; margin-bottom: 6px; flex-wrap: wrap; }
.tr-hunt span { font-size: calc(10px * var(--tk, 1)); padding: 3px 7px; border-radius: 6px;
  background: var(--bg-soft); color: var(--ink-faint); }
.tr-hunt span.on { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.tr-speech { max-height: 210px; overflow-y: auto; background: var(--bg-soft);
  border-radius: 8px; padding: 10px; font-size: calc(12px * var(--tk, 1)); line-height: 1.55; }
.tr-pacts { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px;
  border-top: 1px solid var(--line); flex: none; }
.tr-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  font-size: calc(12px * var(--tk, 1)); }
.tr-kv dt { color: var(--ink-faint); white-space: nowrap; }
.tr-kv dd { margin: 0; }
html[data-w="xs"] .tr-top { flex-direction: column; }
html[data-w="xs"] .tr-shot { width: 100%; max-width: 200px; }

/* Похожие ролики в панели разбора: список, а не сетка - у каждого своя
   подпись «чем похож», и в плитке она не читается */
.tr-sims { display: flex; flex-direction: column; gap: 5px; }
.tr-sim { display: flex; gap: 9px; align-items: center; text-align: left;
  background: var(--bg-soft); border: 1px solid transparent; border-radius: 8px;
  padding: 6px; cursor: pointer; width: 100%; }
.tr-sim:hover { border-color: var(--line); }
.tr-sim-shot { width: 34px; height: 44px; flex: none; border-radius: 5px;
  overflow: hidden; position: relative;
  background: linear-gradient(150deg, #2b3550, #6d5c82 55%, #b08b6e); }
.tr-sim-shot img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.tr-sim-txt { min-width: 0; flex: 1; }
.tr-sim-txt b { display: block; font-size: calc(12px * var(--tk, 1)); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-sim-txt span { display: block; font-size: calc(10px * var(--tk, 1));
  color: var(--ink-faint); }
.tr-sim-why { color: var(--accent) !important; font-weight: 600; }

/* Доска контент-плана: карточка стала кнопкой - по ней открывается панель */
.pl-card { display: block; width: 100%; text-align: left; cursor: pointer; }
.pl-day-no { color: var(--ink-faint); }
.pl-fmt { background: var(--warn-bg) !important; color: var(--warn) !important; }
.pl-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-w="xs"] .pl-fields { grid-template-columns: 1fr; }
.pl-row { cursor: pointer; }
.pl-row:hover td { background: var(--bg-soft); }
.pl-chip { display: block; width: 100%; text-align: left; cursor: pointer; border: none; }
.pl-unpl { margin-top: 10px; padding: 10px 12px; border-top: 1px solid var(--line); }
.pl-unpl-h { font-size: calc(11px * var(--tk, 1)); font-weight: 700; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }

/* Настройки сценария: чипы выбора и подписи над ними. Свои классы, а не
   общие: имена chips и chipb в этом файле не заняты, но заняться могут -
   приставка tr- держит их за трендами */
.tr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tr-chipb { font-size: calc(12px * var(--tk, 1)); padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft);
  cursor: pointer; }
.tr-chipb:hover { border-color: var(--ink-faint); }
.tr-chipb.on { background: var(--accent); border-color: transparent; color: var(--on-accent);
  font-weight: 600; }
.tr-cap { font-size: calc(11px * var(--tk, 1)); color: var(--ink-soft); margin-bottom: 4px; }
/* Поля карточки и сценария стоят столбиком: подпись над полем, иначе в две
   колонки они не влезают и подписи режутся */
.pl-fields .foot-pick { flex-direction: column; align-items: flex-start; gap: 4px; }
.pl-fields .foot-pick select, .pl-fields .foot-pick input,
.pl-fields .foot-pick textarea { width: 100%; }

/* Картинка в разборе - ссылка на оригинал. Подпись появляется по наведению:
   без неё не видно, что картинка кликабельна, а рисовать кнопку поверх
   обложки значит закрыть собой кадр. Просьба Павла 18.09.2026 */
.tr-shot { display: block; cursor: pointer; text-decoration: none; }
.tr-shot-go {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 5px 7px; text-align: center; color: #fff; font-weight: 600;
  font-size: calc(10px * var(--tk, 1));
  background: rgba(10, 12, 16, .72);
  opacity: 0; transition: opacity .12s;
}
.tr-shot:hover .tr-shot-go, .tr-shot:focus-visible .tr-shot-go { opacity: 1; }
.tr-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Соответствие макету 19.09.2026: панель, сценарий, назначение ────── */

/* Плашка-подтверждение вместо alert */
.tr-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px;
  z-index: 80; background: var(--ink); color: var(--bg); font-weight: 600;
  font-size: calc(13px * var(--tk, 1)); padding: 10px 16px; border-radius: 10px;
  box-shadow: var(--shadow); max-width: min(560px, 90vw); }
.tr-toast-undo { margin-left: 14px; background: none; border: 0; padding: 0; color: inherit;
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap; }

/* ── Скрыть от сотрудников (Павел 28.09.2026, макет v2) ──────────────────
   Кружок с перечёркнутым глазом на плитке, колонка «Показ» в списке.
   Скрытое видно только по «Скрыто N · показать»: серым, на своём месте,
   с плашкой «кто и когда» и кнопкой «Вернуть» */
.tr-clip { position: relative; }
.tr-act-hide:hover { background: #C2410C; }
.tr-head > .tr-hidchip { flex: none; margin-left: 8px; }
.tr-hidchip { font: inherit; font-size: calc(11px * var(--tk, 1)); font-weight: 600;
  color: var(--warn); background: var(--warn-bg); border: 0; border-radius: 7px;
  padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.tr-hidchip:hover { filter: brightness(1.08); }
.tr-hidchip:focus-visible, .tr-back:focus-visible, .tr-back-link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
.tr-clip.tr-hid .tr-cover { filter: grayscale(1) brightness(.55); }
.tr-hidstamp { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 3;
  display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 9px;
  background: var(--bg); color: var(--ink); box-shadow: var(--shadow);
  font-size: calc(10.5px * var(--tk, 1)); line-height: 1.3; }
.tr-hidstamp b { color: var(--warn); font-weight: 700; }
.tr-hs-what { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.tr-hs-sub { color: var(--ink-faint); font-size: calc(9.5px * var(--tk, 1));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-back { align-self: flex-start; margin-top: 3px; font: inherit; font-weight: 700;
  color: var(--accent); background: var(--accent-soft); border: 0; border-radius: 6px;
  padding: 4px 9px; cursor: pointer; }
/* Скрытая строка списка: цифры и название приглушены, «кто скрыл» и
   «Вернуть» - в полную силу */
.tr-hidrow .tr-mini { filter: grayscale(1) brightness(.6); }
.tr-hidrow .tr-row-name b, .tr-hidrow td.tr-fig { opacity: .45; }
.tr-row-name .tr-hidline { white-space: normal; color: var(--warn); font-weight: 600;
  margin-top: 2px; }
.tr-back-link { display: inline; background: none; border: 0; padding: 0; font: inherit;
  font-size: calc(10px * var(--tk, 1)); font-weight: 700; color: var(--accent);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.topic-flag.off { color: var(--ink-faint); opacity: .45; cursor: not-allowed; }
.topic-flag.off:hover { border-color: var(--line); background: var(--bg); }
.topic-flag.tr-hide { color: var(--ink-soft); }
.topic-flag.tr-hide:hover { border-color: #C2410C; color: #C2410C; background: var(--bg); }
.topic-flag.tr-ret { color: var(--accent); background: var(--accent-soft); border-color: transparent; }

/* Шапка списка: «В контент-план» переносится, иначе колонка шире числа */
.tr-list th.tr-wrap { white-space: normal; }

/* Свой период в колонке топа: два поля дня месяца */
.tr-day { width: 34px; font-size: inherit; padding: 2px 4px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  text-align: center; }

/* Кнопка воспроизведения поверх обложки в разборе */
.tr-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, .45);
  color: #fff; display: flex; align-items: center; justify-content: center;
  pointer-events: none; }

.tr-orig { margin-top: 6px; max-height: 170px; overflow-y: auto;
  background: var(--bg-soft); border-radius: 8px; padding: 9px 11px;
  font-size: calc(12px * var(--tk, 1)); line-height: 1.5; color: var(--ink-soft);
  white-space: pre-line; }
.tr-note { font-size: calc(10.5px * var(--tk, 1)); color: var(--ink-faint);
  margin: 6px 0 0; line-height: 1.4; }

/* Действия панели - строкой сразу под показателями, как в макете */
.tr-pacts-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-top: 10px; }

/* Настройки сценария - раскладка макета: подписи мелким капсом над полями,
   ряды на 4, 2 и 3 колонки. Общая двухколоночная сетка карточки сюда не
   подошла - поля читались как форма, а не как рамка сценария */
.tr-fbox { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }
.tr-f { min-width: 0; }
.tr-flab { display: flex; align-items: center; font-size: calc(9px * var(--tk, 1));
  font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-faint); margin-bottom: 5px; }
.tr-fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tr-fgrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-fgrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-w="xs"] .tr-fgrid, html[data-w="xs"] .tr-fgrid.two,
html[data-w="xs"] .tr-fgrid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-f .pick, .tr-f .fld { width: 100%; box-sizing: border-box; }
.tr-area { min-height: 52px; resize: vertical; line-height: 1.45; }

/* Таблица сценария: три текстовых колонки, текст переносится. Общие
   правила кабинета держат ячейки в одну строку - для чисел это верно,
   а сценарий с ними уезжал на 2000 px и резался краем панели */
.tr-scriptwrap { margin-top: 4px; }
.tr-script { table-layout: fixed; width: 100%; }
.tr-script td, .tr-script th { white-space: normal; vertical-align: top;
  overflow-wrap: break-word; }
/* Строка столбцов закреплена: длинный сценарий листается, а «Время · Что
   говорить · Что в кадре» едет сверху (правка Павла 19.09.2026). Тень
   без размытия закрашивает отступ рамки над шапкой - раньше в нём
   просвечивали проезжающие строки, из-за чего липкость и была выключена */
.tr-pbody .tr-script thead th { position: sticky; top: 0; z-index: 2;
  background: var(--bg-head); box-shadow: 0 -12px 0 0 var(--bg); }
/* Вне панели (карточка темы в складе) шапке липнуть некуда */
.topic-card .tr-script thead th { position: static; box-shadow: none; }
.tr-script td.name { font-weight: 600; }

/* Правка сценария руками: строки таблицы стали полями */
.tr-cell { width: 100%; box-sizing: border-box; font-size: calc(12px * var(--tk, 1));
  padding: 5px 7px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); }

.tr-secs { width: 64px; }
.tr-varrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-q { display: inline-grid; place-items: center; width: 12px; height: 12px;
  margin-left: 3px; border-radius: 50%; border: 1px solid var(--line);
  font-size: 8px; cursor: help; }

/* Окно назначения: дата, сотрудник, задача */
.tr-shade2 { z-index: 60; }
.tr-modal { position: fixed; z-index: 61; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: min(620px, calc(100% - 32px));
  max-height: calc(100% - 64px); background: var(--bg);
  border-radius: var(--radius-card); box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; overflow: hidden; }
.tr-modal .tr-pbody { overflow-y: auto; }

/* Свой календарь в назначении */
.tr-picker { margin-top: 8px; max-width: 330px; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px; }
.tr-picker-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.tr-picker-h b { font-size: calc(13px * var(--tk, 1)); }
.tr-pgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.tr-pdow { text-align: center; font-size: calc(9px * var(--tk, 1)); font-weight: 700;
  color: var(--ink-faint); text-transform: uppercase; padding: 3px 0; }
.tr-pday { border: none; background: none; border-radius: 7px; padding: 6px 0;
  text-align: center; font-size: calc(12px * var(--tk, 1)); font-weight: 600;
  color: var(--ink); cursor: pointer; }
.tr-pday:hover:not(:disabled) { background: var(--bg-soft); }
.tr-pday.out { color: var(--ink-faint); cursor: default; }
.tr-pday.today { box-shadow: inset 0 0 0 1px var(--accent); }
.tr-pday.on { background: var(--accent); color: var(--on-accent); }

/* Контент-план: пустая колонка и список группами карточек */
.pl-empty { color: var(--ink-faint); font-size: calc(11px * var(--tk, 1));
  padding: 8px 4px; }
.pl-listwrap { padding: 4px 12px 12px; }
.pl-listsec h3 { margin: 10px 0 6px; font-size: calc(10px * var(--tk, 1));
  font-weight: 700; color: var(--ink-faint); text-transform: uppercase;
  letter-spacing: .4px; display: flex; align-items: center; gap: 6px; }
.pl-listrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; }
html[data-w="s"] .pl-listrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-w="xs"] .pl-listrow { grid-template-columns: 1fr; }

/* Лента конкурентов плитками: рамка та же, что у таблицы, сетка плотнее -
   раздел на всю ширину, шесть плиток в ряд */
.comp-feed .tr-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
  grid-auto-rows: auto; }
.comp-feed .tr-cover { aspect-ratio: 4 / 5; height: auto; }
.comp-feed .tr-clip { display: block; min-height: 0; }
html[data-w="s"] .comp-feed .tr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-w="xs"] .comp-feed .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── Единый стиль разделов разбора и сценария - макет 19.09.2026 ──────
   Каждый пункт: заголовок капсом со стрелкой (клик сворачивает) и одна
   серая рамка внутри. Один кегль, один отступ - без зоопарка блоков */
.tr-foldh { display: flex; align-items: center; gap: 6px; width: 100%;
  text-align: left; background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
  font-weight: inherit; font-size: inherit; }
.tr-foldh:hover { color: var(--accent); }
.tr-foldh i { font-style: normal; width: 10px; flex: none; }
.tr-fsum { font-style: normal; margin-left: 8px; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-sec.folded h3 { margin-bottom: 0; }
.tr-sbody { background: var(--bg-soft); border-radius: 10px; padding: 12px;
  font-size: calc(13px * var(--tk, 1)); line-height: 1.55; }
.tr-sbody .tr-speech { background: none; padding: 0; }
.tr-sdiv { border-top: 1px solid var(--line); margin: 10px 0; }
/* Кнопки сценария под шапкой панели: две строки, видны на любой прокрутке */
.tr-sbody .tr-varrow { margin-bottom: 8px; }
.tr-editrow { margin-bottom: 10px; }
.tr-srow { display: flex; gap: 10px; }
.tr-srow + .tr-srow { margin-top: 8px; }
.tr-srow i { font-style: normal; flex: none; width: 108px;
  font-size: calc(9px * var(--tk, 1)); font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--ink-faint); padding-top: 3px; }
.tr-srow p { margin: 0; }
.tr-mrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Кнопки действий на строке заголовка секции «Сценарий». Строка липнет
   к верху панели при прокрутке (правка Павла 19.09.2026); фон обязателен -
   под ней проезжает контент */
.tr-sec h3.with-acts { display: flex; align-items: center; gap: 8px; }
.tr-pbody h3.with-acts { position: sticky; top: 0; z-index: 6;
  background: var(--bg); padding: 6px 0; margin-top: -6px;
  box-shadow: 0 -14px 0 0 var(--bg); }
/* Шапка таблицы сценария липнет ПОД строкой блока, а не спорит с ней */
.tr-pbody .tr-sec:has(h3.with-acts) .tr-script thead th { top: 40px; }
.tr-sec h3.with-acts .tr-foldh { width: auto; flex: 1 1 auto; min-width: 0; }
.tr-hacts { display: flex; align-items: center; gap: 6px; flex: none; flex-wrap: wrap; }

/* Меню «Переписать»: выпадашка в стиле карточки */
.tr-menu { position: relative; display: inline-flex; }
.tr-dd { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .14); min-width: 216px; }
.tr-dd .btn { justify-content: flex-start; text-align: left; white-space: nowrap; }
.tr-ssub { display: block; color: var(--ink-faint);
  font-size: calc(10px * var(--tk, 1)); }
.tr-sbody .tr-quote { font-weight: 700; font-size: calc(14px * var(--tk, 1)); }
.tr-sbody .tr-scriptwrap { margin-top: 0; }

/* ── Закрытие месяца: полоса ступеней в шапке P&L и панель ─────────────
   Лестница Модератор → Руководитель точки → Владелец → EGC Админы.
   Согласовано Павлом 21.09.2026 по макету */
.mc-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mc-step {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--bg-soft);
  font: inherit; font-size: calc(11px * var(--tk, 1)); color: var(--ink-faint);
  white-space: nowrap; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.mc-step i {
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  background: var(--line); color: var(--ink-soft);
  font-size: calc(9px * var(--tk, 1)); font-style: normal; font-weight: 600; flex: none;
}
.mc-step b { font-weight: 500; }
.mc-step u { text-decoration: none; color: var(--ink-faint); font-size: calc(9px * var(--tk, 1)); }
.mc-step.done { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); color: var(--ink-soft); }
.mc-step.done i { background: var(--good); color: #fff; }
.mc-step.now {
  border-color: var(--accent); color: var(--ink);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-soft));
}
.mc-step.now i { background: var(--accent); color: var(--on-accent); }
.mc-step:disabled { cursor: not-allowed; opacity: .6; }
.mc-step:not(:disabled):hover { border-color: var(--accent); }
.mc-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mc-done-note { font-size: calc(11px * var(--tk, 1)); color: var(--ink-soft); }
.mc-undo { color: var(--ink-soft); }

/* Панель ступени: каркас общий с разбором ролика (.tr-panel) */
.mc-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mc-title b { font-size: calc(14px * var(--tk, 1)); font-weight: 600; }
.mc-title span { font-size: calc(11px * var(--tk, 1)); color: var(--ink-faint); }
.mc-sub { font-size: calc(12px * var(--tk, 1)); color: var(--ink-soft); margin: 0 0 12px; }
.mc-note {
  padding: 8px 12px; border-radius: 9px; font-size: calc(12px * var(--tk, 1));
  margin-bottom: 12px; line-height: 1.4;
}
.mc-note.info { background: var(--bg-soft); color: var(--ink-soft); }
.mc-note.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--ink); }
.mc-note b { font-weight: 600; }
table.mc-t { width: 100%; border-collapse: collapse; font-size: calc(12px * var(--tk, 1)); margin-bottom: 12px; }
table.mc-t th {
  text-align: left; font-weight: 500; color: var(--ink-faint);
  font-size: calc(11px * var(--tk, 1)); padding: 0 8px 8px; border-bottom: 1px solid var(--line);
}
table.mc-t th.n, table.mc-t td.n { text-align: right; font-variant-numeric: tabular-nums; }
table.mc-t td { padding: 8px; border-bottom: 1px solid var(--line); }
table.mc-t tr:last-child td { border-bottom: none; }
table.mc-t td small { display: block; color: var(--ink-faint); font-size: calc(10px * var(--tk, 1)); }
.mc-check {
  display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--tk, 1));
  color: var(--ink-soft); margin-bottom: 12px; cursor: pointer;
}
.mc-check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.mc-field { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.mc-field label { font-size: calc(12px * var(--tk, 1)); color: var(--ink-soft); }
.mc-field input {
  width: 120px; height: 32px; padding: 4px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg-soft); color: var(--ink); font: inherit;
  font-size: calc(12px * var(--tk, 1)); text-align: right; font-variant-numeric: tabular-nums;
}
.mc-field input:focus, .mc-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.mc-hint { font-size: calc(11px * var(--tk, 1)); color: var(--ink-faint); }
.mc-obj {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px;
  margin-bottom: 12px; background: var(--bg-soft);
}
.mc-obj-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.mc-obj-top b { font-size: calc(13px * var(--tk, 1)); font-weight: 600; }
.mc-obj-top span { font-size: calc(11px * var(--tk, 1)); color: var(--ink-faint); }
.mc-obj-top em { margin-left: auto; font-style: normal; font-weight: 600; font-size: calc(12px * var(--tk, 1)); }
.mc-obj p { margin: 0 0 8px; font-size: calc(12px * var(--tk, 1)); color: var(--ink-soft); line-height: 1.4; }
.mc-late { color: var(--warn); font-size: calc(11px * var(--tk, 1)); margin: 0 0 8px; }
.mc-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mc-acts.main-row { margin-top: 12px; }
.mc-acts .mc-back { margin-left: auto; }
.mc-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mc-form input {
  height: 30px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: calc(12px * var(--tk, 1));
}
.mc-form .mc-sum { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.mc-form .mc-why { flex: 1; min-width: 200px; }
.mc-deny { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.mc-sums {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  font-size: calc(12px * var(--tk, 1)); margin-bottom: 12px;
}
.mc-sums span { color: var(--ink-soft); }
.mc-sums b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.mc-sums .mc-big { font-size: calc(14px * var(--tk, 1)); border-top: 1px solid var(--line); padding-top: 6px; }
.mc-sample { margin-bottom: 12px; font-size: calc(12px * var(--tk, 1)); }
.mc-sample summary { cursor: pointer; color: var(--ink-soft); }
.mc-msg {
  margin-top: 8px; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; white-space: pre-wrap; line-height: 1.5;
}

/* Сортировка лент трендов: кнопка-переключатель в полосе периода.
   В «Списке» заголовки сортирует родной механизм look.js (Павел 21.09.2026) */
.tr-sort {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft);
  border-radius: 8px; padding: 3px 8px; font: inherit;
  font-size: calc(10.5px * var(--tk, 1)); cursor: pointer; white-space: nowrap;
  transition: color .14s ease, border-color .14s ease;
}
.tr-sort:hover { color: var(--ink); border-color: var(--accent); }
.tr-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Кнопка «Закрытие месяца» в шапке P&L и лестница внутри панели
   (правка Павла 21.09.2026: полоса из четырёх пилюль съедала шапку) */
.mc-ok { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); color: var(--good); }
.mc-phead { flex-wrap: wrap; row-gap: 6px; }
.mc-phead .mc-steps { margin-left: 4px; }
.mc-strip {
  margin: 0; border-radius: 0; border-bottom: 1px solid var(--line);
  font-size: calc(11px * var(--tk, 1)); flex: none;
}
.mc-closedbox {
  border: 1px solid color-mix(in srgb, var(--good) 40%, var(--line));
  background: color-mix(in srgb, var(--good) 9%, transparent);
  border-radius: 11px; padding: 12px 16px;
}
.mc-closedbox b { display: block; font-size: calc(14px * var(--tk, 1)); margin-bottom: 8px; }
.mc-closedbox ul {
  margin: 0 0 12px; padding-left: 17px; color: var(--ink-soft);
  font-size: calc(12px * var(--tk, 1));
}
.mc-closedbox li { margin-bottom: 4px; }

/* Полоса «предложена тема» над доской плана - макет 22.09.2026 */
.req-strip-h { font-size: calc(11px * var(--tk, 1)); font-weight: 700;
  color: var(--warn); text-transform: uppercase; letter-spacing: .3px;
  margin: 2px 0 8px; }
.qcard.topic-req { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.qcard.topic-req .q-top { justify-content: flex-start; align-items: center; }
.qcard.topic-req .q-top .tag { margin-left: 0; }
.qcard.topic-req .q-top b { font-size: calc(14px * var(--tk, 1)); }
.qcard.topic-req .req-foot { margin-left: auto;
  font-size: calc(11px * var(--tk, 1)); align-self: center; }
.req-strip .req-strip-h { flex: 1 1 100%; }
.req-strip .qcard.topic-req { flex: 1 1 420px; max-width: 640px; }

/* ── Загрузка сотрудников из Excel и вкладка «Структура» (24.09.2026) ── */
.ro-modal { width: min(880px, calc(100% - 32px)); }
.ro-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px; padding: 12px 16px 4px; }
.ro-stat { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.ro-stat b { display: block; font-size: calc(18px * var(--tk, 1));
  font-variant-numeric: tabular-nums; }
.ro-stat span { font-size: calc(10.5px * var(--tk, 1)); color: var(--ink-soft); }
.ro-stat.ok { border-color: transparent; background: var(--good-bg); }
.ro-stat.ok b { color: var(--good); }
.ro-stat.mid { border-color: transparent; background: var(--warn-bg); }
.ro-stat.mid b { color: var(--warn); }
.ro-stat.bad { border-color: transparent; background: var(--bad-bg); }
.ro-stat.bad b { color: var(--bad); }
.ro-stat.new { border-color: transparent; background: var(--accent-soft); }
.ro-stat.new b { color: var(--accent); }
.ro-scroll { margin: 10px 16px 0; max-height: 46vh; overflow: auto;
  border: 1px solid var(--line); border-radius: 10px; }
.ro-scroll table { width: 100%; border-collapse: collapse;
  font-size: calc(12px * var(--tk, 1)); }
.ro-scroll th { position: sticky; top: 0; background: var(--bg-head);
  text-align: left; padding: 7px 9px; white-space: nowrap; z-index: 1; }
.ro-scroll td { padding: 6px 9px; border-top: 1px solid var(--line-soft);
  vertical-align: top; }
.ro-why { display: block; font-size: calc(10.5px * var(--tk, 1)); font-weight: 600; }
tr.ro-bad td { background: var(--bad-bg); }
tr.ro-bad .ro-why { color: var(--bad); }
tr.ro-ask td { background: var(--warn-bg); }
tr.ro-ask .ro-why { color: var(--warn); }
tr.ro-ask.ro-kept td { background: var(--good-bg); }
tr.ro-ask.ro-kept .ro-why { color: var(--good); }
.ro-keep { display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
  white-space: nowrap; cursor: pointer; color: var(--warn); }
.ro-keep input { accent-color: var(--good); cursor: pointer; }
.ro-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px 16px; }
.ro-hint { font-size: calc(11px * var(--tk, 1)); }
.ro-file { font-size: calc(11px * var(--tk, 1)); }

.st-note { padding: 8px 16px 0; font-size: calc(11.5px * var(--tk, 1)); }
.st-tree { padding: 10px 16px 16px; font-size: calc(12.5px * var(--tk, 1)); }
.st-tree details { margin: 2px 0; }
.st-tree summary { display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 10px; border-radius: 8px; list-style: none; }
.st-tree summary::before { content: '▸'; color: var(--ink-faint);
  font-size: calc(10px * var(--tk, 1)); width: 10px; flex: none; }
.st-tree details[open] > summary::before { content: '▾'; }
.st-tree summary:hover { background: var(--bg-soft); }
.st-div { margin-left: 22px; }
.st-div > summary { font-weight: 600; }
.st-pt { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 28px;
  border-radius: 8px; }
.st-reg > .st-pt { margin-left: 22px; }
.st-div .st-pt { margin-left: 22px; }
.st-pt:hover { background: var(--bg-soft); }
.st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line);
  flex: none; }
.st-cnt { margin-left: auto; color: var(--ink-faint);
  font-size: calc(10.5px * var(--tk, 1)); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.st-new, .st-tree summary.st-new { background: var(--accent-soft); }

/* Найм и увольнение (24.09.2026): красная кнопка действия, серые уволенные */
/* Вход в кабинет (24.09.2026): плашка вошедшего в шапке и почта управленца */
.auth-chip { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--tk, 1)); }
.auth-chip .muted { color: var(--ink-faint); }
.mail-cell { white-space: nowrap; }
.link-btn {
  border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
  color: var(--ink); text-decoration: underline dotted var(--line); text-underline-offset: 3px;
}
.link-btn.add { color: var(--accent); text-decoration: none; font-weight: 600; }
.link-btn:hover { color: var(--accent); }
.mail-edit { display: flex; gap: 6px; align-items: center; }
.mail-edit input {
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font: inherit;
  font-size: calc(12px * var(--tk, 1)); background: var(--bg); color: var(--ink); width: 190px;
}
.mail-err { color: var(--bad); font-size: calc(11px * var(--tk, 1)); margin-top: 3px; white-space: normal; }
.btn.danger { color: var(--bad); }
tr.gone td { color: var(--ink-faint); }
tr.gone td:first-child { text-decoration: line-through; text-decoration-color: var(--line); }
td.act, th.act { text-align: right; white-space: nowrap; width: 1%; }

/* Кто пропал из файла - список с галочкой в предпросмотре загрузки */
.ro-gone {
  border: 1px solid var(--bad-soft, var(--line)); border-radius: 10px;
  padding: 10px 12px; margin: 0 0 10px; display: grid; gap: 6px;
}
.ro-gone-row { display: flex; gap: 8px; align-items: center;
  font-size: calc(12.5px * var(--tk, 1)); }
.ro-gone-row .muted { margin-left: auto; font-size: calc(11px * var(--tk, 1)); }
.ro-gone .ro-keep { align-items: flex-start; }
.ro-gone .ro-why { display: block; white-space: normal; margin: 2px 0 0; }

/* Фильтр колонки - как в Excel: кнопка в шапке, попап со значениями */
.colf {
  border: 0; background: transparent; color: var(--ink-faint); cursor: pointer;
  font-size: calc(9px * var(--tk, 1)); padding: 1px 3px; margin-left: 4px;
  border-radius: 5px; vertical-align: middle;
}
.colf:hover { color: var(--ink); background: var(--bg-soft); }
.colf.on { color: var(--accent); background: var(--accent-soft); }
.colf-pop {
  position: fixed; z-index: 95; background: var(--bg); width: 240px;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px;
  box-shadow: 0 10px 28px rgba(16, 20, 30, .14);
  display: grid; gap: 6px;
}
.colf-find {
  border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px;
  font: inherit; font-size: calc(12px * var(--tk, 1));
  background: var(--bg); color: var(--ink); width: 100%;
}
.colf-all { display: flex; gap: 6px; }
.colf-list { max-height: 240px; overflow-y: auto; display: grid; }
.colf-row {
  display: flex; gap: 7px; align-items: center; padding: 4px 6px;
  font-size: calc(12px * var(--tk, 1)); border-radius: 6px; cursor: pointer;
}
.colf-row:hover { background: var(--bg-soft); }
.colf-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Разворот точки до сотрудника: строка человека под своей точкой.
   Отступ от родителя, а не от корня - глубина точки в дереве разная */
.st-ptd > .st-man {
  display: flex; align-items: center; gap: 8px; border-radius: 8px;
  margin-left: 50px; padding: 3px 10px 3px 28px;
  font-size: calc(12px * var(--tk, 1));
}
.st-ptd > .st-man:hover { background: var(--bg-soft); }

/* ── Документы внизу раздела ─────────────────────────────────────────
   Одна мелкая надпись, по нажатию список над ней. Макет согласован Павлом
   25.09.2026. Стоит последней в колонке раздела: содержимое раздела листается
   в своей рамке и уступает строке высоту, страница вниз не едет */
.docs-foot { flex: none; display: flex; padding: 6px 2px 0; }
.docs-pop { position: relative; font-size: calc(12px * var(--tk, 1)); }
.docs-pop > summary {
  list-style: none; cursor: pointer; user-select: none;
  color: var(--ink-faint); font-weight: 600; padding: 2px 6px; border-radius: 6px;
  transition: background .15s, color .15s;
}
.docs-pop > summary::-webkit-details-marker { display: none; }
.docs-pop > summary:hover, .docs-pop[open] > summary { color: var(--ink); background: var(--pill); }
.docs-pop > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.docs-menu {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; min-width: 260px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 6px; display: grid; gap: 2px;
}
.docs-menu a {
  color: var(--ink); text-decoration: none; white-space: nowrap;
  font-size: calc(13px * var(--tk, 1)); font-weight: 600; padding: 7px 10px; border-radius: 8px;
}
.docs-menu a:hover, .docs-menu a:focus-visible { background: var(--pill); outline: none; }

/* ── Удаление отклонённых роликов ────────────────────────────────────
   Макет v2 согласован Павлом 01.10.2026. У модератора бота нет: алерт
   живёт только на платформе - значок на «Модерации», красный счётчик
   вкладки «Удаление», полоса над таблицей */
/* Значок в углу пункта, а не рядом со словом: колонка меню узкая, и
   «Модерация» со значком строкой вылезала за край */
.side-nav button[data-badge] { position: relative; }
.side-nav button[data-badge]::after {
  content: attr(data-badge);
  position: absolute; top: -5px; right: -5px;
  font-style: normal; font-weight: 700; font-size: calc(10px * var(--tk, 1));
  min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--bad); color: #fff; text-align: center; font-variant-numeric: tabular-nums;
}
/* Две плашки в шапке стоят рядом: общее правило отдаёт свободное место
   каждой плашке, и вторая уезжала к правому краю */
#screen #delCard > header > .tag:not(:last-of-type) { margin-right: 0; }
.seg button b.red {
  display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px;
  background: var(--bad); color: #fff; line-height: 18px; text-align: center;
}
.tag.bad { background: var(--bad-bg); color: var(--bad); }
.del-strip {
  margin: 0; padding: 8px 16px; background: var(--bad-bg); color: var(--bad);
  font-weight: 600; font-size: calc(12.5px * var(--tk, 1));
  border-bottom: 1px solid var(--line-soft);
}
.del-table td { vertical-align: top; }
.del-table .sub {
  display: block; color: var(--ink-faint); font-size: calc(11.5px * var(--tk, 1));
  font-weight: 400; margin-top: 2px;
}
.del-table tr.del-over td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.del-acts { white-space: normal; }
.del-acts .btn { margin: 0 4px 4px 0; }
/* Переключатель в окне отказа: тот же тумблер, что «Показ клиенту». Подпись
   не прячем и на телефоне - без неё непонятно, что включено */
.toggle.del-tog { margin: 6px 0 0; font-size: calc(12px * var(--tk, 1)); font-weight: 600; color: var(--ink); }
.toggle.del-tog > span:not(.track) { display: inline; }
.toggle.del-tog .track { flex: none; }
.del-tog-note { font-size: calc(11px * var(--tk, 1)); margin: 2px 0 4px; }
.reasons-del { flex: 0 0 100%; }
.clip-del { font-weight: 500; font-size: calc(11px * var(--tk, 1)); margin-top: 3px; opacity: .85; }
.mc-dels { padding: 10px 12px 12px; }
.mc-dels .mc-hint { margin-top: 10px; }
.mc-dels-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.mc-dels .mc-check { margin: 0; font-size: calc(12px * var(--tk, 1)); font-weight: 500; }
/* Подвкладка «Настройки → Модерация → Удаление»: два блока рядом, на узком
   экране друг под другом */
.mc-del-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; max-width: 1100px; }
html[data-w="s"] .mc-del-grid, html[data-w="xs"] .mc-del-grid { grid-template-columns: minmax(0, 1fr); }