/* Оформление «Тёмная рубка» — выбор владельца из трёх показанных вариантов.
   Плотный тёмный экран, полоса значков вместо меню, моноширинные цифры.

   Цвета данных (--s1, --s2), пара линий «дошло / одобрено» (--f1, --f2) и градиент
   воронки прогнаны через проверку различимости, включая все три формы дальтонизма,
   в обеих темах. Зелёный, жёлтый и красный заняты под состояния клиента и в графиках
   не участвуют — иначе состояние не отличить от данных.

   --f1 и --f2 подобраны перебором 26.08.2026, а не на глаз: пара «серый + яркий циан»,
   выбранная сначала по здравому смыслу, оказалась ХУЖЕ прежней (1,7 против 2,2) —
   цвета совпали по светлоте, а контраст меряется именно ею. Итог: 4,3 в тёмной теме
   и 3,6 в светлой, при дальтонизме не ниже 2,8. */

:root {
  --bg: #0F1216; --surface: #171B21; --line: #272D36; --line-soft: #1F242C;
  --line-2: #39414D;
  --ink: #E9ECF1; --ink-2: #98A1AE; --ink-3: #6B7480;
  --nav-bg: #0B0E12; --nav-active: #1C222B;
  --accent: #7C86E8; --accent-ink: #0F1216; --accent-soft: #1D2233;
  --s1: #6B7BE0; --s2: #C2559E;
  --r1: #464F88; --r2: #5D68B8; --r3: #7883DC; --r4: #9BA3F4;
  --f1: #8749DF; --f2: #C6F2FA;
  --good: #4FA97A; --good-soft: #152620;
  --warn: #D3A03F; --warn-soft: #262010;
  --myagko: #D8D24A; --myagko-soft: #24240F;
  --crit: #DE6A55; --crit-soft: #281713;
  --setup: #A96FC4; --setup-soft: #251B2B;
  --seg-bg: #1C222B;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --num: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
}

[data-theme="light"] {
  --bg: #EDEFF2; --surface: #FFFFFF; --line: #DDE1E7; --line-soft: #EAEDF1;
  --line-2: #C7CDD6;
  --ink: #12161C; --ink-2: #525A67; --ink-3: #828B98;
  --nav-bg: #20262F; --nav-active: #2C333E;
  --accent: #4B55C4; --accent-ink: #FFFFFF; --accent-soft: #EAECFA;
  --s1: #3B5FCC; --s2: #B03A8B;
  --r1: #A3AFDE; --r2: #7E8CCC; --r3: #5567BA; --r4: #33459B;
  --f1: #9B6BEA; --f2: #073349;
  --good: #2E7D53; --good-soft: #E6F2EB;
  --warn: #B7791F; --warn-soft: #FBF1E0;
  --myagko: #8A7A12; --myagko-soft: #F7F5DC;
  --crit: #C2412D; --crit-soft: #FBEBE8;
  --setup: #7B3596; --setup-soft: #F3E9F7;
  --seg-bg: #E8EBEF;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.layout { display: grid; grid-template-columns: 58px minmax(0, 1fr); min-height: 100vh; }

/* --- полоса значков --- */
.rail {
  background: var(--nav-bg); border-right: 1px solid var(--line);
  padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.mark {
  width: 26px; height: 26px; border-radius: 5px; background: var(--accent);
  color: var(--accent-ink); display: grid; place-items: center;
  font-size: 11px; font-weight: 700; margin-bottom: 14px;
}
/* Кнопка выхода живёт в форме, но выглядеть обязана как остальные значки полосы —
   поэтому правило общее для ссылок и для неё. */
.rail a, .rail button {
  width: 36px; height: 34px; display: grid; place-items: center; border-radius: 6px;
  color: var(--ink-3); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
}
.rail a.on { background: var(--nav-active); color: var(--accent); }
.rail a:hover, .rail button:hover { color: var(--ink); }
/* Только кнопке: у ссылок полосы своего правила не было, и заводить его — правка
   работающего экрана сверх задачи. Остальные кнопки службы размечены так же. */
.rail button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rail .bottom { margin-top: auto; }
.rail form.bottom { display: grid; place-items: center; }

.main { min-width: 0; display: flex; flex-direction: column; }

/* --- шапка --- */
.bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--surface);
  /* ⛔ Верхний отступ обязан стоять ПОСЛЕ сокращённой записи выше и быть БОЛЬШЕ её
     13 px, иначе он молча сбрасывается ею и не действует вовсе (выходное ревью).
     Держит строку часов: она стоит над шапкой и без этого отступа перекрывала бы
     блок с именем пользователя — на узком окне, где шапка переносится, заметно */
  padding-top: 26px;
}
.bar h1 { font-size: 16px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.bar .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.spacer { flex: 1; }

.seg { display: flex; gap: 2px; background: var(--seg-bg); padding: 2px; border-radius: 5px; }
.seg button {
  appearance: none; border: 0; background: none; font: inherit; font-size: 12.5px;
  color: var(--ink-2); padding: 5px 12px; border-radius: 3px; cursor: pointer;
  white-space: nowrap;
}
.seg button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink); font-weight: 600;
}
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Срезы раздела «Клиенты» — ссылки, а не кнопки [Р-26.12]: адрес честно отражает
   фильтр, ссылку можно послать, работает кнопка «назад». Вид тот же, что у кнопок
   переключателя на Обзоре, поэтому правила повторяют .seg button */
.seg a {
  font-size: 12.5px; color: var(--ink-2); padding: 5px 12px; border-radius: 3px;
  text-decoration: none; white-space: nowrap;
}
.seg a.on { background: var(--surface); color: var(--ink); font-weight: 600; }
.seg a:hover { color: var(--ink); }
.seg a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.filtry { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 14px; }
.flazhki { display: flex; flex-wrap: wrap; gap: 6px; }
.flazhok {
  font-size: 11.5px; color: var(--ink-3); text-decoration: none;
  padding: 4px 9px; border-radius: 4px; border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.flazhok:hover { color: var(--ink); border-color: var(--ink-3); }
.flazhok b { font-family: var(--num); font-weight: 600; color: var(--ink-3); }
.flazhok.on {
  color: var(--accent); border-color: var(--accent); background: var(--accent-soft);
}
.flazhok.on b { color: var(--accent); }
.flazhok.sbros { border-style: dashed; }

.poisk { display: flex; gap: 5px; }
.poisk input {
  font: inherit; font-size: 12.5px; padding: 5px 9px; width: 220px;
  border-radius: 5px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink);
}
.poisk input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.poisk button {
  font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 5px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  cursor: pointer;
}
.poisk button:hover { color: var(--ink); }

.cl-name { display: block; color: var(--ink); text-decoration: none; }
.cl-name:hover { color: var(--accent); text-decoration: underline; }
.cl-gid { font-size: 10.5px; color: var(--ink-3); font-family: var(--num); }
.ruk { color: var(--ink-3); }

/* --- карточка клиента --- */
.pary { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 12.5px; }
.pary dt { color: var(--ink-3); }
.pary dd { margin: 0; color: var(--ink); }
.pod {
  font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .04em; margin: 16px 0 7px;
}
.pusto { font-size: 12px; color: var(--ink-3); padding: 8px 0; }
/* Без ограничения высоты и без своей прокрутки — прямое указание владельца 27.08.2026:
   «пусть просто вся страница станет длиннее, это совершенно нормально». Описание и
   портрет читаются и копируются целиком, с них начинается разбор клиента */
.tekst {
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap;
  background: var(--seg-bg); padding: 9px 11px; border-radius: 5px;
}
.tbl-uzko td, .tbl-uzko th { padding: 5px 8px; }
.tbl-uzko td small { display: block; font-size: 10px; color: var(--ink-3); }
.tusklo { color: var(--ink-3); }
/* Ник ссылкой на переписку в Telegram. Цвет наследуется от места, где ник стоит:
   в списке людей он тёмный, в приписке серый — ссылка не должна менять вид списков.
   Признак нажимаемости даёт точечное подчёркивание, сплошное зарябило бы столбец */
.nik { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--ink-3); }
.nik:hover { color: var(--accent); border-bottom-color: var(--accent); }
.nash {
  font-size: 10px; color: var(--accent); background: var(--accent-soft);
  padding: 1px 5px; border-radius: 3px; margin-left: 6px;
}
/* Два списка рядом внутри карточки. Перелом на той же ширине, что у .grid-2:
   на узком окне два столбца сжались бы в кашу */
.dva-stolbca { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
@media (max-width: 1100px) { .dva-stolbca { grid-template-columns: 1fr; } }

/* Простой — второй пилюлей. В таблице «Обзора» ставится с новой строки: рядом с
   состоянием две пилюли с nowrap растянули бы узкий столбец */
/* Перенос разрешён вопреки общему для пилюль nowrap: самый длинный текст —
   «не разбирает 12 раб. дн. (ни разу), ждут 47» — в одну строку растянул бы столбец
   «Состояние» вдвое, и поехала бы вся таблица (выходное ревью) */
.pill.prostoj {
  display: flex; width: fit-content; margin-top: 3px;
  white-space: normal; text-align: left; line-height: 1.35;
}
.prostoj-stroka { display: inline-flex; margin-bottom: 10px; }

.bar h1 .pill { margin-left: 8px; vertical-align: middle; }
.bar .sub a { color: var(--ink-3); text-decoration: none; }
.bar .sub a:hover { color: var(--ink); }

#theme-toggle {
  font: inherit; font-size: 11.5px; padding: 5px 10px; border-radius: 5px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  cursor: pointer;
}
#theme-toggle:hover { color: var(--ink); }
#theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.ava {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); display: grid; place-items: center; font-size: 11px; font-weight: 650;
}
.who a { color: var(--ink-3); text-decoration: none; }
.who a:hover { color: var(--ink); }

/* --- полотно --- */
.canvas { padding: 15px; display: flex; flex-direction: column; gap: 11px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 11px; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 14px;
}
.card-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.card-h h2 {
  font-size: 11px; font-weight: 650; margin: 0; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-2);
}
.card-h .hint { font-size: 12px; color: var(--ink-3); margin-left: auto; text-align: right; }

/* --- плитки --- */
.tile-l {
  font-size: 11px; color: var(--ink-2); margin-bottom: 7px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em;
}
.tile-v { font-size: 25px; font-weight: 650; letter-spacing: -.02em; font-family: var(--num); }
.tile-d { display: flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 12px; color: var(--ink-3); }
.chip {
  font-weight: 600; font-size: 11.5px; padding: 1px 6px; border-radius: 4px; font-family: var(--num);
}
.chip.up { color: var(--good); background: var(--good-soft); }
.chip.down { color: var(--crit); background: var(--crit-soft); }
.chip.flat { color: var(--ink-3); background: var(--seg-bg); }

/* --- деньги --- */
.money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.money-i { position: relative; padding-left: 13px; }
.money-i::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px;
  border-radius: 2px; background: var(--c);
}
.money-v { font-size: 24px; font-weight: 650; letter-spacing: -.02em; font-family: var(--num); }
.money-n { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; line-height: 1.4; }
/* --- воронка --- */
.fun-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; padding: 3px 0; }
.fun-l { font-size: 12.5px; color: var(--ink-2); text-align: right; line-height: 1.3; }
.fun-l small { display: block; font-size: 10.5px; opacity: .75; }
.fun-track { display: flex; align-items: center; gap: 9px; height: 22px; }
.fun-bar { height: 20px; border-radius: 0 4px 4px 0; min-width: 3px; }
.fun-v { font-size: 13px; font-weight: 650; font-family: var(--num); font-variant-numeric: tabular-nums; }
.fun-gap { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; font-size: 11px; color: var(--ink-3); }
.fun-gap b { font-weight: 600; color: var(--ink-2); font-family: var(--num); }
/* Очередь: то же число воронки, что и ступени, потому и живёт в общем куске.
   Отступ сверху повторяет тот, что даёт .note — иначе после переноса строка
   прилипла бы к последней ступени */
.fun-queue { font-size: 11.5px; color: var(--ink-3); margin-top: 12px; }
.fun-queue b { color: var(--ink-2); font-family: var(--num); }

/* --- графики --- */
.charts { display: flex; flex-direction: column; gap: 14px; }
.chart-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.chart-k { width: 9px; height: 9px; border-radius: 2px; }
/* Полоска вместо квадрата там, где линий несколько: только она показывает,
   сплошная линия или пунктирная. */
.chart-line-k { width: 22px; height: 8px; flex: none; }
.chart-t { font-size: 11px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .07em; }
.chart-sum { margin-left: auto; font-size: 12px; color: var(--ink-3); font-family: var(--num); }
svg.chart { display: block; width: 100%; height: auto; }
.gridline { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.axis-t { fill: var(--ink-3); font-size: 10px; font-family: var(--num); }

/* Таблица «откуда приходят чаты». Полоса стоит НАД числом, а не рядом: рядом она съела
   бы ширину у семи числовых столбцов, и на ноутбучном окне таблица поехала бы в
   горизонтальную прокрутку. Стоит она в «Подошли» и «Утверждено», а не в «Проверено»
   (решение владельца 03.09.2026): объёмы механизмов различаются в десятки раз, и в
   «Проверено» все полосы, кроме одной, вырождались в невидимые чёрточки.
   Цвет со ступенью воронки больше НЕ связан: полоса стоит в двух столбцах сразу,
   и общий для обоих цвет честнее, чем цвет одной из ступеней у обеих.
   Подзаголовок механизма размечать не нужно — таблица несёт класс `.tbl-uzko`,
   и его правило для `small` уже это делает. */
/* «Выключен» вместо числа в ячейке лидов из X.com: ноль читался бы как «искали
   и не нашли», а это разные вещи. Тем же серым, что и прочие неактивные подписи */
/* Шрифт задан явно: колонка через `.tbl .num` навязывает цифровой моноширинный,
   и русское слово в нём выглядело чужим (замечание владельца 04.09.2026) */
.vyklyuchen { color: var(--ink-3); font-size: 11px; font-family: var(--font); }
/* Часы наверху страницы: мелко и серо, чтобы не спорить с содержимым. Место под них
   освобождает верхний отступ шапки (`.bar`, padding-top) — без него строка наезжала
   бы на блок с именем пользователя. Отсчёт идёт от края страницы: элемент стоит
   соседом каркаса, позиционированного предка у него нет и заводить его незачем.
   `pointer-events: none` — чтобы прозрачная коробка не перехватывала нажатия */
.chasy {
  position: absolute; top: 7px; right: 16px; z-index: 5; pointer-events: none;
  font-size: 11px; color: var(--ink-3); letter-spacing: .2px;
}
/* Когда клиент последний раз разбирал чаты — подписью под состоянием. Время
   КАЛЕНДАРНОЕ, а пилюля простоя рядом считает рабочие дни: единицы разные, и пилюля
   свои подписывает словом */
.razbiral { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
/* Счётчик рядом с заголовком блока */
.schyot { font-size: 12px; color: var(--ink-3); font-weight: 400; margin-left: 7px; }
/* Ключ второй линии графика: отступ слева, чтобы пара «ключ + подпись» не слипалась
   с итогом первой линии */
.chart-k.vtoroj { margin-left: 10px; }

.ist-polosa { height: 4px; border-radius: 2px; background: var(--line); margin-bottom: 3px; }
.ist-polosa span { display: block; height: 4px; border-radius: 2px; background: var(--r4); min-width: 1px; }
/* Доля в скобках рядом с числом. Правило `.tbl-uzko td small` делает мелкий текст
   блочным — это для подзаголовка механизма; здесь нужна та же строка, что и число,
   поэтому селектор длиннее общего, иначе доля уехала бы под число. */
.tbl-uzko td small.dolya { display: inline; font-size: 11px; }

/* Пара графиков в карточке клиента: неделя и месяц рядом. Полотно у них 340 единиц
   вместо 720, поэтому ограничение ширины стоит ЗДЕСЬ, на обёртке, а не на `svg.chart`:
   тот селектор общий с «Обзором», и 460 px задушили бы там графики с полотном 720.
   Верхняя граница нужна с другой стороны — когда пара сложена в столбец, полотно 340
   растянулось бы на всю колонку и подписи раздулись бы вдвое против задуманного.
   Перелом на 1300: до него правая колонка `.grid-2` даёт меньше 240 px на график,
   и подписи осей становятся мельче, чем на «Обзоре» сегодня. */
.grafiki-para { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
@media (max-width: 1300px) { .grafiki-para { grid-template-columns: minmax(0, 1fr); } }
.grafik { max-width: 460px; min-width: 0; }

/* --- таблица --- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ink); font-family: var(--font); }
.tbl th {
  text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); padding: 0 10px 9px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--nav-active); }
.tbl .num { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-name {
  font-weight: 600; display: block; color: var(--ink); text-decoration: none;
}
a.c-name:hover { color: var(--accent); text-decoration: underline; }
.c-id { font-size: 11.5px; color: var(--ink-3); font-family: var(--num); margin-top: 1px; }
.scroll-x { overflow-x: auto; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--good); background: var(--good-soft); }
.pill.warn { color: var(--warn); background: var(--warn-soft); }
.pill.crit { color: var(--crit); background: var(--crit-soft); }
.pill.demo { color: var(--accent); background: var(--accent-soft); }
.pill.off { color: var(--ink-3); background: var(--seg-bg); }
/* Мягкий разбор запросов лидов. Свой цвет, а не `warn`: оранжевый занят турбо-подбором,
   и в одной ячейке столбца они оказались бы неразличимы */
.pill.myagko { color: var(--myagko); background: var(--myagko-soft); }
/* Настройка не завершена: клиент завёлся и бросил. Свой пурпурный, потому что всё
   остальное занято: серый — «отключён», сине-фиолетовый акцент — «демо», оранжевый —
   турбо-подбор в столбце «Поиск чатов», зелёный и жёлтый — работающие состояния. Цвета данных (--s1, --s2)
   сюда брать нельзя: в этом файле состояния и данные намеренно не смешиваются */
.pill.setup { color: var(--setup); background: var(--setup-soft); }


/* --- таблица клиентов: два яруса заголовков и по три числа в ячейке --- */
.tbl-clients th { vertical-align: bottom; }
.tbl-clients .hdr-1 th.grp {
  text-align: center; border-bottom: 1px solid var(--line-2); padding-bottom: 5px;
}
.tbl-clients .hdr-1 th.grp small {
  display: block; font-size: 9.5px; font-weight: 400; letter-spacing: .04em;
  text-transform: none; color: var(--ink-3); opacity: .8; margin-top: 2px;
}
.tbl-clients .hdr-2 th { padding-top: 6px; font-size: 9.5px; }
.tbl-clients td { padding: 6px 8px; }

th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--ink); }
th.sortable::after {
  content: attr(data-arrow); margin-left: 4px; color: var(--accent); font-size: 10px;
}
th.sortable.sorted { color: var(--ink); }
th.sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Три величины столбиком: в день, всего, отклонение от среднего */
.cell-m { line-height: 1.25; }
/* Крупное и жирное здесь — «в день», а не абсолютное число: сравнивать клиентов
   между собой можно только по нему, абсолютное зависит от срока работы клиента.
   Решение владельца 26.08.2026. */
.m-day {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 650; color: var(--ink);
}
.m-abs {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 11px; color: var(--ink-2); margin-top: 1px;
}
.m-unit { color: var(--ink-3); font-size: 9.5px; margin-left: 1px; }

/* Подпись под названием столбца. Своё правило обязательно: готовое `.hdr-1 th.grp small`
   действует только на групповые заголовки, а этот столбец не групповой — без правила
   заголовок слипся бы в одну длинную строку и растянул столбец на всю фразу,
   потому что у `th.sortable` стоит запрет переноса. */
.hdr-1 th.sortable small {
  display: block; font-size: 10px; font-weight: 400; color: var(--ink-3);
  text-transform: none; letter-spacing: 0; margin-top: 2px; white-space: nowrap;
}
/* Стрелка порядка сортировки рисуется через ::after и у обычного заголовка стоит рядом
   с названием. Под блочной подписью она уехала бы на третью строку — поэтому у столбцов
   с подписью её вынимаем из потока и ставим к названию. */
.hdr-1 th.sortable:has(small) { position: relative; padding-right: 16px; }
.hdr-1 th.sortable:has(small)::after { position: absolute; right: 6px; top: 8px; margin: 0; }
.chats { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 13px; }
/* Приостановленные чаты подписью под столбцом: при неоплате биллинг морозит их все
   разом, и без подписи это читалось бы как «краулер перестал работать» */
.chats-paused { font-size: 10px; color: var(--warn); margin-top: 2px; }
/* Слову нужен отступ шире, чем «/дн»: без него выходит «175 398всего». */
.m-abs .m-unit { margin-left: 4px; }
.m-dev {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 600; margin-top: 1px;
}
.m-dev.up { color: var(--good); }
.m-dev.down { color: var(--crit); }
.m-dev.mid { color: var(--ink-3); }

/* --- подпись графика с несколькими линиями --- */
.chart-h-multi { gap: 14px; flex-wrap: wrap; }
.chart-key { display: inline-flex; align-items: center; gap: 6px; }
.chart-n {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--ink-3);
}

.note { font-size: 11.5px; color: var(--ink-3); margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }

/* --- вход --- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 28px; width: 100%; max-width: 340px;
}
.login h1 { font-size: 17px; margin: 0 0 4px; font-weight: 650; }
.login p.sub { font-size: 12.5px; color: var(--ink-3); margin: 0 0 20px; }
.login label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-bottom: 5px; }
.login input {
  width: 100%; background: var(--bg); border: 1px solid var(--line-2); color: var(--ink);
  font: inherit; padding: 8px 10px; border-radius: 5px; margin-bottom: 14px;
}
.login input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.login button {
  width: 100%; font: inherit; font-weight: 600; padding: 9px; border-radius: 5px;
  border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer;
}
.err { background: var(--crit-soft); color: var(--crit); font-size: 12.5px; padding: 8px 10px; border-radius: 5px; margin-bottom: 14px; }

.load-error {
  margin: 15px 15px 0; padding: 9px 12px; border-radius: 5px;
  background: var(--warn-soft); color: var(--warn); font-size: 12.5px;
}

.center-msg { padding: 60px 20px; text-align: center; color: var(--ink-2); }
.center-msg h2 { font-size: 16px; color: var(--ink); margin: 0 0 8px; }
.center-msg p { margin: 0; font-size: 13px; }

/* --- правка справочных данных: название, «скрыть», заметки ------------------
   Первое место, где панель принимает введённое человеком. Все действия — формы
   с кнопкой, ни одного ссылкой (см. комментарий в app.py). */

/* Стоит между шапкой и содержимым, а не внутри шапки: раскрытая, она растянула бы
   `.bar` по высоте, и кнопка «Тема» с именем уехали бы в её вертикальную середину.
   Боковой отступ — тот же, что у шапки (13px 15px) */
.pravka { margin: 12px 15px 0; }
.pravka > summary {
  display: inline-block; cursor: pointer; font-size: 12px; color: var(--ink-3);
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 5px;
  user-select: none;
}
.pravka > summary:hover { color: var(--ink-2); border-color: var(--line-2); }
.pravka[open] > summary { color: var(--ink-2); margin-bottom: 9px; }
.pravka-telo {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; padding: 12px 14px; max-width: 640px;
}
.pravka-telo form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pravka-telo .hint { font-size: 11.5px; color: var(--ink-3); flex: 1 1 200px; }

.pravka-telo input[type="text"] {
  flex: 1 1 260px; min-width: 0; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 6px 9px; font: inherit;
  font-size: 12.5px;
}
.pravka-telo input[type="text"]:focus,
.zametka-nov textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.pravka-telo button, .zametka-niz button {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 6px 14px; border-radius: 5px; border: 0;
  background: var(--accent); color: var(--accent-ink);
}
/* Вторая по важности — рамкой, а не заливкой: две одинаково яркие кнопки рядом
   заставляют выбирать, а убрать клиента из списка это не то же, что переименовать */
.pravka-telo button.vtoraya {
  background: transparent; color: var(--ink-2); border: 1px solid var(--line-2);
}
.pravka-telo button.vtoraya:hover { color: var(--ink); border-color: var(--ink-3); }

.zametka-nov { margin-bottom: 14px; }
.zametka-nov textarea {
  width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 12.5px;
  line-height: 1.5; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 8px 10px;
}
.zametka-niz {
  display: flex; align-items: center; gap: 10px; margin-top: 7px;
}
.zametka-niz .hint { font-size: 11.5px; color: var(--ink-3); flex: 1; }

.lenta { list-style: none; margin: 0; padding: 0; }
.lenta li { padding: 9px 0; border-top: 1px solid var(--line); }
.lenta li:first-child { border-top: 0; }
.lenta-shapka {
  display: flex; align-items: baseline; gap: 10px; font-size: 11.5px; margin-bottom: 3px;
}
.lenta-shapka form { margin-left: auto; }
/* Удаление намеренно неприметное: промах по нему стирает запись, пусть и мягко */
button.udalit {
  font: inherit; font-size: 11.5px; cursor: pointer; padding: 0;
  background: none; border: 0; color: var(--ink-3); text-decoration: underline;
}
button.udalit:hover { color: var(--crit); }

.podval {
  margin: 14px 15px 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.5;
}

/* --- команда клиента --------------------------------------------------------
   Заведённые люди. Рядом, отдельными списками, живые данные о том, кто нажимал
   кнопки: сопоставить их надёжно нельзя, поэтому они соседствуют, а не сливаются. */

.lyudi { list-style: none; margin: 0 0 14px; padding: 0; }
.lyudi li { padding: 9px 0; border-top: 1px solid var(--line); }
.lyudi li:first-child { border-top: 0; }
.chel-shapka { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 12.5px; }
.chel-kontakty { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

.lider-znak {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); background: var(--accent-soft);
  padding: 1px 6px; border-radius: 20px;
}
.v-komande { font-size: 11px; color: var(--ink-3); }

.pravka-chel { margin-top: 6px; }
.pravka-chel > summary { padding: 2px 8px; font-size: 11.5px; }

/* Поля человека — колонкой: их шесть, и в строку они читаются хуже, чем список */
.forma-cheloveka { display: block; }
.forma-cheloveka label { display: block; margin-bottom: 8px; }
.forma-cheloveka label > span {
  display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 3px;
}
.forma-cheloveka input[type="text"], .forma-cheloveka textarea {
  width: 100%; box-sizing: border-box; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 6px 9px;
  font: inherit; font-size: 12.5px;
}
.forma-cheloveka textarea { resize: vertical; line-height: 1.45; }
.forma-cheloveka input[type="text"]:focus, .forma-cheloveka textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.flazhok-lider {
  display: flex !important; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--ink-2); cursor: pointer;
}
.flazhok-lider input { width: auto; margin: 0; }
.flazhok-lider > span { display: inline !important; font-size: 12.5px !important;
  color: inherit !important; margin: 0 !important; }
.chel-knopki { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.chel-knopki .hint { font-size: 11.5px; color: var(--ink-3); }

/* Кнопка «в команду» стоит прямо в строке живого списка, поэтому форма не должна
   ломать строку собственным блоком */
.v-stroku { display: inline; }
button.dobavit-v-komandu {
  font: inherit; font-size: 11px; cursor: pointer; padding: 1px 7px;
  border: 1px solid var(--line-2); border-radius: 20px;
  background: transparent; color: var(--ink-3);
}
button.dobavit-v-komandu:hover { color: var(--ink); border-color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- оплаты в карточке клиента --- */
.oplata { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.oplata-polya { display: flex; gap: 10px; margin-bottom: 8px; }
.oplata-polya label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; color: var(--ink-2);
}
.oplata select, .oplata input[type="text"] {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 13px;
}
.oplata input[type="text"] { width: 100%; }
.oplata-polya select { min-width: 84px; }
.oplata-polya input { width: 110px; }
.oplata > input[type="text"] { width: 100%; margin-bottom: 8px; }
.oplata select:focus, .oplata input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Свой .hint: общего правила для этого класса в оформлении нет — он объявлен
   только внутри четырёх других блоков, и без этой строки пояснения под формой
   вышли бы обычным текстом вместо мелкого приглушённого */
.oplata .hint, .platezhi + .hint { font-size: 12px; color: var(--ink-3); display: block; }
.oplata-chto { margin-bottom: 8px; }
.oplata-vnimanie {
  font-size: 12px; color: var(--warn); background: var(--warn-soft);
  padding: 7px 9px; border-radius: 6px; margin-bottom: 8px;
}
.oplata button[type="submit"] { margin-bottom: 4px; }

.platezhi { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 12px; }
.platezhi th {
  text-align: left; font-weight: 500; color: var(--ink-3);
  padding: 4px 6px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.platezhi td { padding: 6px 6px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.platezhi tr.otmenen td { opacity: .5; text-decoration: line-through; }
.platezhi tr.otmenen td:last-child { text-decoration: none; }
.sost-trevoga { color: var(--crit); }
.platezhi td.nowrap { white-space: nowrap; }

/* --- люди клиента из телеграм-группы --- */
.iz-tg {
  font-size: 11px; color: var(--ink-3); background: var(--seg-bg);
  padding: 1px 6px; border-radius: 999px; margin-left: 6px; white-space: nowrap;
}
.tg-lyudi { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tg-lyudi .hint { font-size: 12px; color: var(--ink-3); display: block; margin-top: 6px; }