/* Палитра сайта romi-monster.ru — §10 ТЗ. Кодер её не выдумывает. */
:root {
color-scheme: light;
--text: #252525; --text-2: #474747; --muted: #8b8b8b; --faint: #bdbdbd;
--accent: #54a4f7; --accent-dark: #2981db; --accent-light: #71b0f1;
--accent-bg: #eef7ff;
--page: #ffffff; --card: #f5f5f5; --head: #f9f9f9;
--border: #ececec; --border-2: #f4f4f4;
--green: #3b9e57; --green-bg: #eef7ee;
--red: #c0392b; --red-bg: #fdf7f6;
--amber: #e0a63c; --amber-bg: #fdf7ec;
--max: #7a4fb0; --max-bg: #f3edfb;
/* Высота липкой полосы меню на телефоне (№444): чипы дашборда
прилипают сразу под нее, а не к краю экрана. */
--side-h: 55px;
}
* { box-sizing: border-box; }
/* Атрибут hidden обязан прятать и то, чему ниже задан display (например
.filters с display:flex): без этого правила поля формы конструктора ссылок
показывались все разом, а не по выбранному типу. */
[hidden] { display: none !important; }
/* Manrope – шрифт сайта romi-monster.ru; подключён в шапке шаблонов.
tabular-nums держит цифры в колонках ровно: на дашборде числа стоят
столбиком, и «1» уже́ остальных цифр их разъезжала. */
body {
margin: 0; color: var(--text); background: var(--page);
font: 15px/1.5 Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-variant-numeric: tabular-nums;
}
a { color: var(--accent-dark); text-decoration: none; }
.layout { display: flex; min-height: 100vh; }
/* сайдбар */
/* Меню всегда под рукой (№444): колонка липкая, прокрутка страницы ее
не уносит; своя прокрутка – только если окно ниже меню. Без
align-self: flex-start липкость у флекс-элемента не работает: по
умолчанию он растянут на всю высоту страницы. */
.side { width: 200px; flex: 0 0 200px; border-right: 1px solid var(--border);
padding: 20px 12px; display: flex; flex-direction: column;
position: sticky; top: 0; align-self: flex-start; height: 100vh;
overflow-y: auto; }
/* Логотип ROMI Monster в шапке (правка владельца 01.09.2026, №44).
Файл с прозрачным фоном: буквы «ROMI» тёмно-серые, поэтому шапка обязана
стоять на светлом. Тёмной темы в кабинете нет, и color-scheme: light
выше запрещает браузеру подкрашивать страницу самому.
width/height у ![]()
проставлены родные, чтобы место под логотип
держалось до загрузки картинки и текст не прыгал. */
.logo { display: block; padding: 0 8px 20px; }
.logo img { display: block; width: 100%; max-width: 148px; height: auto; }
.logo-name { display: block; margin-top: 6px; font-weight: 600; color: var(--text); }
.nav a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--text-2);
margin-bottom: 2px; }
.nav a:hover { background: var(--head); }
.nav a.on { background: var(--accent); color: #fff; }
/* Кнопка меню телефона (№444): на компьютере ее нет. */
.mn-t { position: absolute; opacity: 0; pointer-events: none; }
.mn-b { display: none; align-items: center; gap: 7px; padding: 7px 13px;
border: 1px solid var(--line); border-radius: var(--r-pill);
background: #fff; font-weight: 700; font-size: 13px; color: var(--text);
cursor: pointer; }
.mn-t:checked ~ .mn-b { background: var(--tint); border-color: var(--accent-light);
color: var(--accent-dark); }
/* Светофор – сразу под меню, на виду (№375, владелец 08.09.2026). Раньше
margin-top: auto прижимал его к низу колонки, и на длинной странице
он оказывался под сгибом. */
.health { margin-top: 14px; padding: 10px 12px; border-radius: 8px; font-size: 13px;
background: var(--green-bg); color: var(--green); }
.health.bad { background: var(--red-bg); color: var(--red); }
/* контент */
/* min-width: 0 обязателен: у флекс-элемента по умолчанию min-width: auto,
и он не может стать уже своего содержимого. Из-за этого широкий график
распирал не себя, а всю страницу, и та уезжала вбок (28.08). С нулём
колонка сжимается, а прокрутка включается внутри самого графика. */
.main { flex: 1; min-width: 0; padding: 24px 28px; max-width: 1100px; }
h1 { font-size: 22px; margin: 0 0 4px; }
.sub { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip { padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px;
color: var(--text-2); font-size: 13px; background: #fff; cursor: pointer;
font-family: inherit; }
/* Группа отборов одного рода: подпись слева, кнопки внутри общей рамки
(№375). Владелец про «тип» и «состояние» в одном ряду: «почему так близко
разные инстансы… слипнуться могут». Ряд с группами берёт класс `fgroups`:
между группами 18 px по горизонтали, между строками прежние 8. Воздух
стоит на ряду, а не на самой группе: с `margin-left` у соседа группа,
перенесённая на телефоне на новую строку, вставала с отступом от левого
края и не выравнивалась с группой над собой. */
.filters.fgroups { column-gap: 18px; }
.fgroup { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 5px 8px 5px 11px; border: 1px solid var(--border);
border-radius: 12px; background: var(--head); }
.fgroup .fl { font-size: 12px; font-weight: 600; color: var(--muted);
margin-right: 4px; white-space: nowrap; }
/* Поле формы с подписью над ним (форма «Новый посев» и правка записи,
§10 экран 4). Полей у журнала пять, и без подписей владелец гадал бы,
что за строка перед ним: одной подсказки внутри пустого поля мало –
она пропадает, как только в поле что-то набрали. */
.fld { display: inline-flex; flex-direction: column; gap: 3px; }
.fld > span { font-size: 12px; color: var(--muted); }
/* Строка правки записи стоит под своим посевом и не притворяется
строкой таблицы: своей рамки и подписей колонок у неё нет. */
tr.edit-row td { background: var(--head); }
tr.edit-row .filters { margin-bottom: 12px; }
.chip.on { background: var(--accent-bg); border-color: var(--accent-light);
color: var(--accent-dark); }
/* Крестик на активном чипе (§10 экраны 3 и 4, круг 2, С17): нажатие на чип
с крестиком снимает этот отбор. Нейтральный чип («Все каналы»,
«состояние: все», «без группировки») крестика не носит – снимать с него
нечего, и период тоже: одна из кнопок там выбрана всегда. */
.chip .x { margin-left: 6px; font-weight: 600; opacity: .7; }
/* Чипсы-кнопки (экран «Ссылки», сотни строк — фильтров больше, чем ссылок
на странице, поэтому все они живут в одной форме, а не в ссылках-). */
button.chip { line-height: 1.3; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
margin-bottom: 24px; }
.card { background: var(--card); border-radius: 8px; padding: 16px; }
.card .label { color: var(--muted); font-size: 13px; }
.card .value { font-size: 28px; font-weight: 600; margin: 6px 0 2px; }
.card .delta { font-size: 12px; color: var(--muted); }
.delta.up { color: var(--green); } .delta.down { color: var(--red); }
/* scroll-margin-top: переключатели внутри блока ведут на якорь этого же
блока (№45). Без отступа блок прилипает к самому краю окна и выглядит
обрезанным. */
.block { border: 1px solid var(--border); border-radius: 12px; padding: 18px;
margin-bottom: 20px; scroll-margin-top: 16px; }
.block h2 { font-size: 15px; margin: 0 0 14px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 13px;
background: var(--head); padding: 9px 10px; }
td { padding: 10px; border-top: 1px solid var(--border-2); }
/* Первая колонка таблиц: имя источника, метка креатива, имя человека. Длинное
слитное слово тянуло ширину таблицы за собой – метка в 250 знаков подряд
растянула «Сравнение креативов» с 626 до 2658 px в блоке шириной 495,
и колонки с цифрами уехали за правый край у всех строк сразу (№389, Д-1).
Перенос по любому месту держит ширину колонки; слова, которые переносятся
сами, он не трогает.
Нижняя граница колонки нужна вместе с ним: колонок много, таблица и так
стоит на самых узких своих размерах, и без границы браузер отдал бы первой
колонке один знак (59 px на дашборде) – «видео-город» встало бы в три
строки. 160 px – ширина, при которой «Ссылки» выглядят как до правки
(колонка была 182 px, высота строк та же), а метка креатива стоит в одну
строку. */
td.head { overflow-wrap: anywhere; min-width: 160px; }
tr.left td { background: var(--red-bg); }
/* Экран «Ссылки»: заголовок группы («по площадке» / «по месяцу») — строка-
разделитель с итогом; отработавшие ссылки приглушены (§10 экран 4). */
tr.group-header td { background: var(--head); color: var(--text-2);
font-weight: 500; font-size: 13px; }
/* Строка донора и раскрытая под ней ветка посевов живут в журнале
закупа – их стили стоят ниже, вместе с широкой таблицей. */
tr.archived { opacity: .6; }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 6px; }
.badge.tg { background: var(--accent-bg); color: var(--accent-dark); }
.badge.max { background: var(--max-bg); color: var(--max); }
.badge.ok { background: var(--green-bg); color: var(--green); }
.badge.bad { background: var(--red-bg); color: var(--red); }
.badge.warn { background: var(--amber-bg); color: var(--amber); }
/* Бейдж набора в колонке «Права» (№426). Без подложки слово набора читалось
обычным текстом рядом со строкой открытых прав, и бейджа из него не выходило
(ТЗ §10 экран 11: «роль-бейдж»). */
.badge.set { background: var(--card); color: var(--text-2); }
.star { color: var(--amber); }
.muted { color: var(--muted); }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty b { display: block; color: var(--text); margin-bottom: 6px; }
.btn { display: inline-block; background: var(--accent); color: #fff; padding: 9px 16px;
border-radius: 8px; border: 0; font-size: 14px; cursor: pointer; }
.btn.ghost { background: #fff; color: var(--accent-dark); border: 1px solid var(--border); }
.copy-btn { font-size: 12px; padding: 2px 8px; border: 1px solid var(--border);
border-radius: 6px; background: #fff; color: var(--accent-dark);
cursor: pointer; margin-left: 6px; }
.copy-btn:hover { background: var(--accent-bg); }
/* Зелёная плашка над списком: «Ссылка выпущена: адрес» с кнопкой копирования
(§10 экран 4, журнал закупа). Раньше плашки не было и адрес свежей ссылки
приходилось искать в списке глазами. Цвета – те же две переменные, что
у светофора: третьего зелёного в кабинете не заводим. */
.plate { background: var(--green-bg); color: var(--green); border-radius: 8px;
padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.plate code { font-size: 13px; color: var(--green); }
/* вход */
.login { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login .box { text-align: center; border: 1px solid var(--border); border-radius: 12px;
padding: 36px 40px; }
.login .logo { padding: 0 0 4px; }
.login .logo img { max-width: 190px; margin: 0 auto; }
.login .slogan { color: var(--muted); margin: 6px 0 24px; font-size: 14px; }
/* мобильный: сайдбар в строку, таблицы прокручиваются */
@media (max-width: 760px) {
.layout { flex-direction: column; }
/* Меню переносится на вторую строку вместо горизонтальной прокрутки:
семь пунктов в 375 px не помещаются, и «Настройки» с «Выйти» уезжали
за край незаметно для человека (находка тестировщика 24.08). */
/* На телефоне меню – узкая липкая полоса сверху в одну строку: логотип,
светофор, кнопка «☰ <раздел>» (№444). Пункты раскрываются списком
по нажатию. Раньше восемь пунктов вставали в три строки и съедали
полэкрана. Высота полосы – --side-h: к ней прилипают чипы дашборда. */
.side { width: auto; flex: none; height: auto; overflow: visible;
align-self: stretch; border-right: 0;
border-bottom: 1px solid var(--border); flex-direction: row;
flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 16px;
min-height: var(--side-h); box-sizing: border-box; z-index: 40;
background: var(--page); }
.logo { padding: 0; white-space: nowrap; display: flex; align-items: center;
gap: 8px; margin-right: auto; }
.logo img { width: auto; height: 22px; }
.logo-name { display: none; }
/* Светофор с длинной строкой («Молчат: Telegram 17 дней, MAX 17 дней»)
сжимается с многоточием, а не переносит кнопку меню на вторую строку:
полоса обязана остаться в одну строку. Полный текст – в подсказке.
Основа 0 не дает ему перенести строку, max-width: max-content не дает
плашке растянуться шире своего текста. */
.logo, .mn-b { flex: none; }
.health { order: 1; margin: 0; white-space: nowrap; padding: 4px 9px;
font-size: 11.5px; flex: 1 1 0; min-width: 0;
max-width: max-content; overflow: hidden; text-overflow: ellipsis; }
.mn-b { order: 2; display: inline-flex; }
.nav { order: 3; display: none; flex: 0 0 100%; flex-direction: column;
gap: 2px; padding: 6px 0 4px; }
.mn-t:checked ~ .nav { display: flex; }
.nav a { padding: 10px 12px; }
.main { padding: 16px; }
.cards { grid-template-columns: repeat(2, 1fr); }
.block { overflow-x: auto; }
/* Таблицы кабинета на телефоне перестраиваются в карточки (№205).
Что было: на «Ссылках» таблица шириной 821 px стояла в блоке шириной
305 – «Переходы», «Подписки», «Конверсия» и всё остальное уходило
за правый край, а полоса прокрутки лежала ПОД полусотней строк, где
её никто не искал. Страница, сделанная ради цифр, цифр не показывала.
Прокрутка вбок этого не лечит: цифры надо читать сверху вниз, а не
возить экран из стороны в сторону, держа в голове, какая это колонка.
Поэтому строка становится карточкой, шапка прячется, а подпись каждой
ячейки берётся из её `data-label` – она же и есть заголовок колонки.
Карточками становятся только таблицы с классом `tbl`: теплокарта
часы×дни – настоящая матрица, её разбирать на карточки бессмысленно,
она осталась с прокруткой. */
table.tbl { display: block; }
table.tbl thead { display: none; }
table.tbl tbody, table.tbl tr { display: block; }
table.tbl tr { border: 1px solid var(--border); border-radius: 10px;
padding: 10px 12px; margin-bottom: 10px; }
/* Ячейки не встают столбиком «подпись – значение» на всю ширину: девять
таких строк подряд растянули бы карточку ссылки на треть экрана, а
полсотни карточек – на семнадцать тысяч пикселей прокрутки. Поэтому
короткие ячейки текут в строку и переносятся сами: серая подпись,
рядом значение. */
table.tbl td { display: inline-flex; align-items: baseline; gap: 6px;
border: 0; padding: 2px 0; margin-right: 14px;
overflow-wrap: anywhere; }
table.tbl td::before { content: attr(data-label); color: var(--muted);
font-size: 12px; white-space: nowrap; }
/* Первая ячейка – имя строки, она и есть заголовок карточки: подпись
ей не нужна, дважды писать «Название» незачем. */
table.tbl td.head { display: block; font-weight: 600; margin: 0 0 4px; }
table.tbl td.head::before { content: none; }
/* Ячейка с длинным содержимым или с формой (адрес ссылки, набор каналов,
смена роли, кнопки) занимает всю ширину карточки: рядом с подписью
в одну строку они не помещаются. */
table.tbl td.wide { display: block; margin-right: 0; }
table.tbl td.wide::before { display: block; margin-bottom: 2px; }
/* Длинный адрес ссылки переносится по буквам, а не распирает карточку
(№375, хвост М5 разбора №374). */
table.tbl td.wide code { overflow-wrap: anywhere; word-break: break-all; }
/* Пустая ячейка (колонка без заголовка – та, где стоят кнопки) подписи
не получает. */
table.tbl td[data-label=""]::before { content: none; }
/* Заголовок группы на «Ссылках» остаётся строкой-разделителем. */
table.tbl tr.group-header { border: 0; padding: 0; margin: 16px 0 8px; }
table.tbl tr.group-header td { display: block; margin: 0;
background: var(--head); border-radius: 8px;
padding: 8px 10px; }
table.tbl tr.group-header td::before { content: none; }
/* Подсветка отписавшегося переезжает со строки на карточку целиком. */
table.tbl tr.left { background: var(--red-bg); }
table.tbl tr.left td { background: transparent; }
/* Отдельные страницы без сайдбара (вход и страница-тупик `/r/…`) правило
логотипа-строки не касается: там он стоит сам по себе и от «строки»
разъезжался на пол-экрана. Коробка ужимается по ширине телефона –
без этого её края уходили за экран. Страницу `/r/…` открывает человек
с рекламы, чаще всего с телефона (№215). */
.login { padding: 16px; }
.login .box { width: 100%; padding: 28px 20px; }
.login .logo { display: block; flex: none; padding: 0 0 4px; white-space: normal; }
.login .logo img { width: 100%; height: auto; max-width: 150px; margin: 0 auto; }
.login .logo-name { margin-top: 6px; }
}
/* ======================================================================
ДАШБОРД. Перенос макета `МАКЕТ_дашборд_v3.html`, стиль 2 «как в TGStat»
(выбор владельца 06.09.2026, №346). Всё живёт под `.dash` – это класс
обёртки дашборда: имена вроде `.card`, `.grid`, `.note` встречаются
и на других экранах, и без обёртки они бы спорили друг с другом.
Палитра та же, что выше; имена переменных макета заведены псевдонимами,
переименовывать существующее незачем.
====================================================================== */
:root {
--text2: var(--text-2); --tint: var(--accent-bg);
--line: var(--border); --line2: var(--border-2);
/* Линии графиков светлее текстовых зелёного и красного: под заливкой
тёмный тон выглядит грязным. Текст дельт остаётся на --green/--red. */
--green-line: #4cae61; --red-line: #e05c4b;
--r-pill: 999px;
}
/* ------------------------------------------------------------- шапка */
.dash h1 { font-size: 26px; font-weight: 800; letter-spacing: -.015em; }
.dash-top { padding-bottom: 4px; }
.dash-top .scope { color: var(--muted); font-size: 13px; margin-top: 4px; }
.dash-bar { display: flex; flex-direction: column; gap: 10px;
padding: 14px 0 18px; }
.dash .chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Каналов много – их чипы едут строкой, а не заворачиваются стеной. */
.dash .chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
padding-bottom: 2px; }
.dash .chips.scroll::-webkit-scrollbar { display: none; }
.dash .chip { display: inline-flex; align-items: center; gap: 6px;
white-space: nowrap; padding: 8px 15px; border-radius: var(--r-pill);
font-weight: 600; font-size: 13px; line-height: 1.2; }
.dash .chip:hover { border-color: var(--accent-light); color: var(--accent-dark); }
.dash .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.dash .chip.on:hover { color: #fff; }
.dash select.chip { display: inline-block; }
.dash .chip .badge { font-weight: 700; font-size: 10px; line-height: 1.4;
padding: 2px 7px; border-radius: var(--r-pill); }
.dash .chip.on .badge { background: rgba(255, 255, 255, .24); color: #fff; }
.dash .sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px;
flex: none; }
/* Кусок с датами не переносится посередине: неразрывных пробелов внутри
подписи мало – браузер рвет строку сразу после тире (разбор §1.3). */
.nw { white-space: nowrap; }
.dash .chip .i { width: 14px; height: 14px; flex: none; }
/* --------------------------------------------------- папки каналов (№403)
Обойма «область – папки – каналы»: на компьютере две строки, на телефоне
одна, она листается вбок (разбор §6.1). Второй разделитель показывается
только на телефоне: там группы стоят в строку и их надо развести. */
.scopes { display: flex; flex-direction: column; gap: 10px; }
.dash .sep2 { display: none; }
/* Серый счётчик каналов в чипе папки. */
.dash .chip .cnt { font-weight: 700; font-size: 10.5px; line-height: 1.45;
min-width: 19px; text-align: center; padding: 0 6px;
border-radius: var(--r-pill); background: var(--head);
color: var(--muted); border: 1px solid var(--line); }
.dash .chip.on .cnt { background: rgba(255, 255, 255, .24);
border-color: transparent; color: #fff; }
/* Канал, который лежит в выбранной папке. */
.dash .chip.in { background: var(--tint); border-color: var(--accent-light);
color: var(--accent-dark); }
.dash .chip.in .badge { background: #fff; }
/* Кнопка-действие: пунктирная рамка отличает её от чипов отбора. */
.dash .chip.act { border-style: dashed; border-color: var(--accent-light);
color: var(--accent-dark); }
.dash .chip.act.on2 { background: var(--tint); border-style: solid; }
.dash .chip.sm { padding: 4px 11px; font-size: 13px; cursor: default; }
/* Папки графитовые, каналы синие (№439): папку и канал различает цвет.
Сиреневый занят MAX, янтарный значит «внимание» – у папок их нет. */
.dash .chip.fold { background: #f2f3f5; border-color: var(--border);
color: var(--text-2); }
.dash .chip.fold:hover { border-color: var(--faint); color: var(--text); }
.dash .chip.fold .cnt { background: #fff; border-color: var(--border); }
.dash .chip.fold.on { background: var(--text-2); border-color: var(--text-2);
color: #fff; }
.dash .chip.fold.on .cnt { background: rgba(255, 255, 255, .2);
border-color: transparent; color: #fff; }
.dash .chip.fold.act { border-style: dashed; }
.dash .chip.fold.act.on2 { background: #fff; border-style: solid;
border-color: var(--faint); }
/* подсказка «Сложить эти каналы в одну папку?» */
.fhint { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin: 0 0 16px; padding: 14px 16px; border-radius: 18px;
background: var(--tint); border: 1px solid var(--accent-light); }
.fhint .ic { width: 40px; height: 40px; border-radius: 13px; background: #fff;
display: grid; place-items: center; color: var(--accent-dark);
flex: none; }
.fhint .tx { flex: 1 1 360px; min-width: 0; }
.fhint .tx b { display: block; font-size: 14.5px; font-weight: 800;
color: var(--text); margin-bottom: 2px; }
.fhint .tx > span { font-size: 13px; color: var(--text2); line-height: 1.5; }
.fhint .chs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fhint .acts { display: flex; gap: 8px; flex: none; }
/* панель управления папками */
.fpanel { margin: 0 0 18px; padding: 18px 20px 8px; border: 1px solid var(--line);
border-radius: 20px; background: #fff;
box-shadow: 0 1px 2px rgba(23, 28, 38, .06),
0 8px 24px rgba(23, 28, 38, .05); }
.fpanel .ph { display: flex; justify-content: space-between;
align-items: flex-start; gap: 12px; padding-bottom: 12px; }
.fpanel h3 { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.fpanel .ps { color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 3px; }
.frow { border-top: 1px solid var(--line2); padding: 12px 0; }
.frow .fr { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.frow .fn { display: inline-flex; align-items: center; gap: 8px;
font-weight: 800; font-size: 14.5px; }
.frow .fn .i { width: 16px; height: 16px; color: var(--accent-dark); flex: none; }
.frow .fc { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.frow .fl { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 260px; }
.elink, .dlink, .addf { font-weight: 700; font-size: 13px; line-height: 1.2;
white-space: nowrap; }
.dlink { color: var(--red); }
.addf { display: inline-flex; align-items: center; gap: 6px; }
.addf .i { width: 15px; height: 15px; }
.fedit { margin-top: 12px; padding: 14px 16px; border-radius: 16px;
background: var(--head); border: 1px solid var(--line2); }
.ffld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ffld > span { font-size: 12px; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: .04em; }
.ffld input[type="text"] { max-width: 340px; font-weight: 600; font-size: 14px;
line-height: 1.2; font-family: inherit;
padding: 9px 13px; border: 1px solid var(--line);
border-radius: 12px; background: #fff; color: var(--text); }
.ferr { margin: -6px 0 12px; color: var(--red); font-size: 13px; font-weight: 600; }
.togs { display: flex; gap: 8px; flex-wrap: wrap; }
/* Отметка канала – обычная галочка формы: сама она спрятана, а состояние
показывает кружок рядом. Без JS: снял галочку – кружок погас сразу. */
.tog { display: inline-flex; align-items: center; gap: 7px;
padding: 7px 13px 7px 9px; border: 1px solid var(--line);
border-radius: var(--r-pill); background: #fff; color: var(--text2);
font-weight: 600; font-size: 13px; line-height: 1.2; cursor: pointer;
white-space: nowrap; }
.tog input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tog .ck { width: 16px; height: 16px; flex: none; padding: 2px; border-radius: 50%;
border: 1.5px solid var(--faint); color: transparent; box-sizing: border-box; }
.tog input:checked ~ .ck { background: var(--accent); border-color: var(--accent);
color: #fff; }
.tog:has(input:checked) { border-color: var(--accent); color: var(--accent-dark); }
.tog:focus-within { outline: 2px solid var(--accent-light); outline-offset: 1px; }
.tog .badge { font-weight: 700; font-size: 10px; line-height: 1.4; padding: 2px 7px;
border-radius: var(--r-pill); }
.fact, .fask { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fact .sp { flex: 1; }
.fask { margin-top: 12px; padding: 12px 14px; border-radius: 14px;
background: var(--red-bg); color: var(--red); font-weight: 600;
font-size: 13px; }
.fask form { display: contents; }
.btn.red { background: var(--red); }
/* --------------------------------------- свой период: форма двух дат
Стоит под полосой отбора и, в отличие от нее, липкой не едет: даты
правят один раз, а место на телефоне дороже (разбор §6.1). */
.dash .dates { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 0 0 16px; padding: 12px 14px; border-radius: 14px;
background: var(--head); }
.dash .dates label { display: inline-flex; align-items: center; gap: 7px; }
.dash .dates label > span { color: var(--muted); font-weight: 600;
font-size: 12.5px; line-height: 1.2; }
.dash .dates input[type="date"] { padding: 7px 10px; border: 1px solid var(--border);
border-radius: 9px; background: #fff;
color: var(--text); font-weight: 600;
font-size: 13px; line-height: 1.2;
font-family: inherit; }
.dash .dates .btn { padding: 8px 18px; font-size: 13px; }
.dash .dates .lim { margin-left: auto; color: var(--muted); font-weight: 500;
font-size: 12.5px; line-height: 1.3; }
/* оглавление-якоря */
.dash .toc { display: flex; gap: 6px; margin: 0 0 16px; overflow-x: auto;
scrollbar-width: none; padding-bottom: 2px; }
.dash .toc::-webkit-scrollbar { display: none; }
.dash .toc a { white-space: nowrap; padding: 7px 13px; border-radius: var(--r-pill);
background: var(--head); color: var(--text2);
font-weight: 600; font-size: 12.5px; line-height: 1.2; }
.dash .toc a:hover { background: var(--tint); color: var(--accent-dark); }
/* ------------------------------------------- значок «!» с пояснением */
.hint { position: relative; display: inline-block; margin-left: 7px;
vertical-align: 1px; }
.hbtn { width: 19px; height: 19px; padding: 0; border: 0; border-radius: 50%;
cursor: pointer; background: var(--tint); color: var(--accent-dark);
font-weight: 800; font-size: 12px; line-height: 19px;
font-family: inherit; text-align: center; }
.hbtn:hover { background: var(--accent); color: #fff; }
.hpop { position: absolute; left: -8px; top: 26px; z-index: 30; width: 296px;
display: none; padding: 13px 15px; border-radius: 14px; background: #fff;
color: var(--text2); border: 1px solid var(--line);
box-shadow: 0 8px 26px rgba(37, 37, 37, .13);
font-weight: 500; font-size: 12.5px; line-height: 1.5;
white-space: normal; letter-spacing: 0; }
/* На компьютере пояснение открывается наведением, на телефоне – нажатием
(класс `open` вешает dash.js). */
.hint:hover .hpop, .hint.open .hpop { display: block; }
/* Тот же значок у карточки цифр – «?» помельче, серый, как в макете (№377,
П7). Подпись карточки набрана капсом, пояснение – обычным текстом,
и выезжает оно влево от правого края карточки, чтобы не вылезать
за неё. */
.hint.q { margin-left: 5px; }
.hint.q .hbtn { width: 14px; height: 14px; background: var(--line);
color: var(--muted); font-size: 9px; line-height: 14px; }
.hint.q .hbtn:hover { background: var(--accent); color: #fff; }
.hint.q .hpop { left: auto; right: -4px; text-transform: none; letter-spacing: 0;
text-align: left; }
/* ----------------------------------------- карточки цифр, как в TGStat */
.dwrap { background: #f2f3f5; border-radius: 24px; padding: 20px 20px 26px;
margin-top: 4px; }
.tgs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* overflow: hidden с карточки снят (№377, П7): он обрезал всплывающее
пояснение «?». Угол мини-графика теперь скругляет сам `.mini`. */
.tgs { position: relative; background: #fff; border-radius: 16px;
padding: 17px 19px 15px; min-height: 142px;
box-shadow: 0 1px 2px rgba(23, 28, 38, .07), 0 8px 24px rgba(23, 28, 38, .05); }
.tgs .cap { display: flex; justify-content: space-between; align-items: flex-start;
gap: 10px; }
.tgs .big { font-size: 31px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
/* Две цифры в одной карточке – подписки и отписки за вчера (№377, П10). */
.tgs .big.two { display: inline-flex; gap: 10px; white-space: nowrap; }
.tgs .lab { max-width: 54%; text-align: right; font-weight: 700;
font-size: 10.5px; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tgs .dl { margin-top: 11px; display: flex; flex-direction: column; gap: 1px;
font-weight: 600; font-size: 12px; line-height: 1.5;
position: relative; z-index: 2; max-width: 50%; }
.tgs .up { color: var(--green); }
.tgs .dn { color: var(--red); }
.tgs .zz { color: var(--muted); }
/* мини-график в правом нижнем углу карточки */
.tgs .mini { position: absolute; right: 0; bottom: 0; width: 54%; height: 60px;
pointer-events: none; overflow: hidden;
border-bottom-right-radius: 16px; }
.tgs .mini svg { display: block; width: 100%; height: 100%; }
/* почасовые штрихи карточки «Подписки и отписки за вчера» */
.tgs .hb { position: absolute; right: 16px; bottom: 14px; width: 40%; height: 56px;
display: flex; align-items: flex-end; gap: 2px;
background: repeating-linear-gradient(to top, #eef0f3 0 1px, transparent 1px 14px); }
.tgs .hb i { flex: 1 1 0; min-width: 0; background: var(--green-line);
border-radius: 2px; }
/* штрихи прироста: вверх – день вырос, вниз – упал */
.tgs .nb { position: absolute; right: 16px; bottom: 14px; width: 40%; height: 56px;
display: flex; gap: 2px; align-items: stretch; }
.tgs .nb i { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.tgs .nb u { flex: 1 1 0; display: flex; text-decoration: none; }
.tgs .nb u:first-child { align-items: flex-end; }
.tgs .nb b { display: block; width: 100%; border-radius: 2px; }
.tgs .nb b.p { background: var(--green-line); }
.tgs .nb b.m { background: var(--red-line); }
/* три ступени воронки в карточке конверсии */
.tgs .fn { position: absolute; right: 18px; bottom: 16px; width: 40%;
display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.tgs .fn i { display: block; height: 7px; border-radius: 4px; background: var(--accent);
opacity: .9; }
/* --------------------------------------------------- блоки дашборда */
.dash .dgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px;
margin-top: 14px; }
.dash .dblock { grid-column: span 12; background: #fff; border-radius: 16px;
padding: 20px 22px; min-width: 0; scroll-margin-top: 16px;
box-shadow: 0 1px 2px rgba(23, 28, 38, .07), 0 8px 24px rgba(23, 28, 38, .05); }
.dash .dblock.c6 { grid-column: span 6; }
/* Сравнение креативов во всю ширину: колонок восемь, а первая – текст
поста. Таблица листается вбок ВНУТРИ блока, страница вбок не едет. */
.tscroll { overflow-x: auto; }
table.ctab { width: 100%; }
table.ctab td.head { max-width: 420px; }
table.ctab .cre { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
line-height: 1.4; }
.dash .more { margin-top: 12px; }
.dash .more > summary { display: inline-block; cursor: pointer; list-style: none;
padding: 7px 15px; border-radius: var(--r-pill);
background: var(--head); color: var(--accent-dark);
font-weight: 600; font-size: 12.5px; line-height: 1.2; }
.dash .more > summary::-webkit-details-marker { display: none; }
.dash .more > summary:hover { background: var(--tint); }
.dash .more[open] > summary { margin-bottom: 10px; }
.dash .bhead { display: flex; justify-content: space-between; align-items: center;
gap: 12px; flex-wrap: wrap; }
.dash .bhead h2 { font-size: 16px; font-weight: 700; margin: 0; }
.dash .per { display: block; margin-top: 3px; color: var(--muted);
font-weight: 600; font-size: 12.5px; line-height: 1.4; }
.dash .note { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-top: 10px; }
.dash .note.key { color: var(--text2); font-weight: 600; }
/* ----------------------- график: сетка, тонкие линии, цифры по наведению */
.tgc { position: relative; height: 252px; margin: 20px 0 4px; padding-bottom: 24px;
touch-action: pan-y; }
.tgc .plot { position: absolute; left: 0; right: 0; top: 16px; bottom: 26px; }
.tgc .gl { position: absolute; left: 0; right: 0; height: 1px; background: var(--line2); }
.tgc .gl.base { background: var(--line); }
.tgc .yl { position: absolute; left: 0; transform: translateY(-100%);
padding: 0 6px 3px 0; background: #fff; font-weight: 600;
font-size: 11px; line-height: 1; color: var(--faint); }
.tgc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tgc .xl { position: absolute; bottom: 0; transform: translateX(-50%);
font-weight: 600; font-size: 11px; line-height: 1;
font-style: normal; color: var(--faint); white-space: nowrap; }
.tgc .xl.first { transform: none; left: 0; }
.tgc .xl.last { transform: translateX(-100%); }
.tgc .vline { position: absolute; top: 0; bottom: 0; width: 1px;
background: var(--faint); opacity: 0; pointer-events: none; }
.tgc .cur { position: absolute; width: 9px; height: 9px; border-radius: 50%;
background: #fff; border: 2px solid var(--accent);
transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
.tgc.act .vline, .tgc.act .cur { opacity: 1; }
.tgc .cur.off { opacity: 0 !important; }
.tgc .ln.off { opacity: 0; }
.tgtip { position: absolute; z-index: 20; top: 8px; opacity: 0; pointer-events: none;
padding: 10px 13px; border-radius: 13px; background: #fff;
border: 1px solid var(--line); box-shadow: 0 8px 26px rgba(37, 37, 37, .16);
font-weight: 600; font-size: 12px; line-height: 1.5;
white-space: nowrap; transition: opacity .12s; }
.tgc.act .tgtip { opacity: 1; }
.tgtip .dt { color: var(--text); font-weight: 800; margin-bottom: 5px; }
.tgtip .r { display: flex; justify-content: space-between; gap: 22px; }
.tgtip .r.j { color: var(--green); }
.tgtip .r.l { color: var(--red); }
.tgtip .r.t { color: var(--accent-dark); }
.tgtip .r.off { display: none; }
.tgtip .r b { font-weight: 800; }
/* кнопки-переключатели линий под графиком */
.tgls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
margin-top: 14px; }
.tgl { display: inline-flex; align-items: center; gap: 7px; padding: 7px 17px;
cursor: pointer; border-radius: var(--r-pill); font-weight: 700;
font-size: 13px; line-height: 1.2; font-family: inherit; border: 1.5px solid var(--green-line);
background: var(--green-line); color: #fff; }
.tgl .ck { font-size: 12px; }
.tgl.off { background: #fff; color: var(--green-line); }
.tgl.off .ck { visibility: hidden; }
.tgl.red { border-color: var(--red-line); background: var(--red-line); }
.tgl.red.off { background: #fff; color: var(--red-line); }
/* ------------------- полосы с мягкой заливкой: воронка, срок жизни, возраст */
.soft { display: flex; flex-direction: column; gap: 2px; }
.soft .row { padding: 10px 0; }
.soft .cap { display: flex; justify-content: space-between; align-items: baseline;
gap: 14px; }
.soft .w { font-size: 13.5px; font-weight: 600; color: var(--text2); min-width: 0; }
.soft .n { white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.soft .n b { font-size: 19px; font-weight: 800; color: var(--text); margin-right: 5px; }
.soft .bar { height: 9px; border-radius: 6px; margin-top: 8px; }
.soft .bar.b { background: linear-gradient(90deg, rgba(84, 164, 247, .85), rgba(84, 164, 247, .35)); }
.soft .bar.r { background: linear-gradient(90deg, rgba(224, 92, 75, .8), rgba(224, 92, 75, .3)); }
/* Пунктирная дорожка ступени «Открыли»: у неё своя база, и полоса нарочно
не сплошная – это тот самый пунктир, который владелец одобрил (№286). */
.soft .bar.dash { background: repeating-linear-gradient(90deg,
rgba(84, 164, 247, .5) 0 7px, transparent 7px 13px); }
.soft .sub { font-size: 12px; color: var(--muted); margin-top: 7px; font-weight: 500;
line-height: 1.5; }
.soft .badge { display: inline-block; margin-bottom: 7px; padding: 3px 10px;
border-radius: var(--r-pill); background: var(--tint);
color: var(--accent-dark); font-weight: 700;
font-size: 10.5px; line-height: 1.5; }
/* --------------------------------- теплокарта: без цифр, число по наведению */
.heat { display: flex; flex-direction: column; gap: 3px; }
.hrow { display: grid; grid-template-columns: 30px repeat(24, 1fr); gap: 3px;
align-items: center; }
.hrow .hd { font-weight: 600; font-size: 11px; line-height: 1;
font-style: normal; color: var(--muted); }
.hhead { display: grid; grid-template-columns: 30px repeat(24, 1fr); gap: 3px;
margin-bottom: 5px; }
.hhead i { font-weight: 600; font-size: 10px; line-height: 1;
font-style: normal; color: var(--faint); text-align: center; }
.hrow .c, .hlegend i { border-radius: 5px; background: #f2f3f5; cursor: default; }
.hrow .c { aspect-ratio: 1/1; position: relative; }
/* Число клетки – своей подсказкой по наведению, на телефоне по нажатию
(класс `on` вешает dash.js; №375). Текст лежит в data-t. У крайних
колонок подсказка прижимается к своему краю, чтобы не вылезать
за блок. */
.hrow .c:hover::after, .hrow .c.on::after {
content: attr(data-t); position: absolute; z-index: 30; left: 50%;
bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap;
padding: 5px 9px; border-radius: 8px; background: var(--text); color: #fff;
font-size: 11.5px; font-weight: 600; line-height: 1.3; pointer-events: none;
box-shadow: 0 4px 14px rgba(37, 37, 37, .18); }
.hrow .c:hover, .hrow .c.on { outline: 2px solid var(--accent); outline-offset: -1px; }
.hrow .c:nth-child(-n+5)::after { left: 0; transform: none; }
.hrow .c:nth-child(n+22)::after { left: auto; right: 0; transform: none; }
.hrow .c.v1 { background: rgba(76, 174, 97, .2); }
.hrow .c.v2 { background: rgba(76, 174, 97, .5); }
.hrow .c.v3 { background: rgba(76, 174, 97, .85); }
/* Теплокарта встала в половину ширины (разбор §5): клетка около 14 px,
и все 24 подписи часов в нее уже не читаются – остаются через три,
как на планшете. */
@media (min-width: 1180px) {
.dash .dblock.c6 .hhead i:not(.h3) { visibility: hidden; }
}
.hlegend { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
color: var(--muted); font-weight: 600; margin-top: 10px; }
.hlegend i { width: 16px; height: 12px; display: inline-block; }
.hlegend i.v1 { background: rgba(76, 174, 97, .2); }
.hlegend i.v2 { background: rgba(76, 174, 97, .5); }
.hlegend i.v3 { background: rgba(76, 174, 97, .85); }
/* ------------------------------------------- источники: дерево меток */
.dash .tree-block { box-shadow: none; border: 1px solid var(--line); border-radius: 20px;
padding: 22px 24px; margin-top: 34px; min-width: 0;
scroll-margin-top: 16px; }
.thead, .trow { display: grid;
grid-template-columns: minmax(180px, 1fr) 96px 92px 104px 92px 92px 84px;
gap: 8px; align-items: center; }
.thead { padding: 0 10px 9px; border-bottom: 1px solid var(--line);
font-weight: 600; font-size: 12px; line-height: 1.3;
color: var(--muted); }
.thead span:not(:first-child) { text-align: right; }
.trow { padding: 10px; border-radius: 10px; font-size: 14px; list-style: none;
cursor: default; }
.trow > * { min-width: 0; }
.tvals { display: contents; }
/* Колонка у каждого числа своя и строка одна: автораскладка иначе уводит
«Подписки» под остальные числа – выравнивание, на которое ругался
владелец (разбор макета, п.2). */
.trow .tn { grid-column: 1; grid-row: 1; }
.k1 { grid-column: 2; } .k2 { grid-column: 3; } .k3 { grid-column: 4; }
.k4 { grid-column: 5; } .k5 { grid-column: 6; } .k6 { grid-column: 7; }
.k1, .k2, .k3, .k4, .k5, .k6 { grid-row: 1; }
.tn { display: flex; align-items: center; gap: 7px; font-weight: 600; min-width: 0; }
.tn .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv { text-align: right; color: var(--text2); white-space: nowrap; }
.tv .sh { color: var(--faint); font-size: 11.5px; font-weight: 600; margin-left: 5px; }
.tv .of { color: var(--faint); font-size: 11.5px; font-weight: 600; font-style: normal; }
.tv.key { font-weight: 800; color: var(--text); }
.titog { background: var(--tint); border-radius: 12px; font-weight: 700;
margin-bottom: 4px; }
.titog .tv, .titog .tn { color: var(--text); }
.tnode { border-top: 1px solid var(--line2); }
.tnode > .trow::-webkit-details-marker { display: none; }
.tnode > .trow { cursor: pointer; }
.tnode > .trow:hover { background: var(--head); }
.tnode[open] > .trow { background: var(--head); }
.arw { flex: none; width: 16px; height: 16px; border-radius: 5px; background: var(--tint);
color: var(--accent-dark); font-weight: 800; font-size: 9px;
line-height: 16px; font-style: normal; text-align: center; transition: transform .15s; }
.tnode[open] > .trow .arw { transform: rotate(90deg); }
.arw.no { background: transparent; color: transparent; }
.lvl { flex: none; font-weight: 700; font-size: 9.5px; line-height: 1.4;
font-style: normal; color: var(--faint);
text-transform: uppercase; letter-spacing: .04em; }
.d1 { padding-left: 26px; } .d2 { padding-left: 48px; }
.d3 { padding-left: 70px; } .d4 { padding-left: 92px; }
.d5 { padding-left: 114px; }
.tkids > .tnode { border-top: 1px dashed var(--line2); }
/* Строка группы (№390): жирнее обычной строки и светлее строки «Итого» –
заливки у нее нет, вес и цвет держат ее отдельно от источников внутри. */
.tgroup .tn { font-weight: 800; }
.tgroup .tv { color: var(--text2); }
.tgroup .tv.key { color: var(--text); }
.tgnode { border-top: 1px solid var(--line); }
.tgnode + .tgnode { margin-top: 2px; }
/* Пояснение под раскрытой группой посевов: почему у нее четыре прочерка. */
.tgnote { padding: 2px 10px 8px 26px; font-size: 12.5px; color: var(--muted); }
/* ============ блок «Рекомендуемый бюджет» и отток по неделям (№265, №264)
Перенос блока `bud` из `МАКЕТ_дашборд_v4.html` («блок бюджета тоже ок
пока что», владелец 13.09.2026). Переменные макета уже заведены выше
псевдонимами; своя тут одна – текст на янтарной плашке. */
:root { --amber-text: #a8761c; }
.wnav { display: inline-flex; align-items: center; gap: 4px; padding: 3px;
border-radius: var(--r-pill); background: var(--head);
border: 1px solid var(--line); }
.wbtn { display: inline-flex; align-items: center; gap: 2px; padding: 6px 12px;
border-radius: var(--r-pill); font-weight: 700; font-size: 12.5px;
line-height: 1.2; color: var(--accent-dark); white-space: nowrap; }
.wbtn:hover { background: #fff; }
.wbtn.off { color: var(--faint); pointer-events: none; }
.wcur { padding: 6px 12px; border-radius: var(--r-pill); background: #fff;
font-weight: 800; font-size: 12.5px; line-height: 1.2; color: var(--text);
box-shadow: 0 1px 3px rgba(23, 28, 38, .12); white-space: nowrap; }
.bgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 14px; margin-top: 16px; align-items: start; }
.bleft { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hero { border-radius: 16px; padding: 18px 20px; min-width: 0;
background: linear-gradient(135deg, #eaf4ff 0%, #f6faff 100%);
border: 1px solid #dcecfc; display: flex; flex-direction: column;
justify-content: center; }
.hero .hl { font-weight: 700; font-size: 10.5px; line-height: 1.4;
letter-spacing: .06em; text-transform: uppercase;
color: var(--accent-dark); display: flex; align-items: center;
gap: 8px; flex-wrap: wrap; }
.hero .hbig { font-size: 42px; font-weight: 800; letter-spacing: -.04em;
line-height: 1.05; margin: 8px 0; color: var(--text); }
.hero .calc { font-weight: 600; font-size: 12.5px; line-height: 1.5;
color: var(--text2); }
.hero .warn { margin-top: 10px; padding: 9px 11px; border-radius: 11px;
background: #fff8ea; color: var(--amber-text); font-weight: 600;
font-size: 12.5px; line-height: 1.45; border: 1px solid #f4e2bb; }
.hero.none { background: linear-gradient(135deg, #f4f5f7 0%, #fafbfc 100%);
border-color: var(--line); }
.hero.none .hl { color: var(--muted); }
.hero.est { background: linear-gradient(135deg, #fff7ea 0%, #fffcf6 100%);
border-color: #f4e2bb; }
.hero.est .hl { color: var(--amber-text); }
.apill { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill);
background: #ffefcc; color: var(--amber-text); font-weight: 700;
font-size: 11px; line-height: 1.5; letter-spacing: 0;
text-transform: none; white-space: nowrap; }
.apill.sm { font-size: 11px; margin-top: 3px; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { border-radius: 14px; background: #f6f7f9; padding: 11px 14px;
display: flex; flex-direction: column; min-width: 0; }
.kpi .kl { font-weight: 700; font-size: 10px; line-height: 1.35;
letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
overflow-wrap: anywhere; }
.kpi .kv { font-size: 21px; font-weight: 800; letter-spacing: -.02em;
line-height: 1.2; margin-top: 4px; color: var(--text); }
.kpi .ks { font-weight: 600; font-size: 11.5px; line-height: 1.4;
color: var(--muted); margin-top: 2px; }
.facts { border: 1px solid var(--line); border-radius: 16px;
padding: 14px 16px 12px; min-width: 0; }
.facts .note { margin-top: 8px; }
.facts summary { list-style: none; cursor: pointer; display: grid;
grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px;
align-items: center; }
.facts summary::-webkit-details-marker { display: none; }
.facts summary::after { content: '\203a'; grid-column: 2; grid-row: 1 / span 2;
font-size: 17px; line-height: 1; color: var(--muted);
transition: transform .15s; }
.facts[open] summary::after { transform: rotate(90deg); }
.facts .ft { grid-column: 1; grid-row: 1; }
.facts .fsum { display: none; grid-column: 1; grid-row: 2; margin-top: 3px;
text-transform: none; letter-spacing: 0; font-weight: 700;
font-size: 13px; color: var(--text); }
.facts:not([open]) .fsum { display: block; }
.facts:not([open]) { padding-bottom: 12px; }
.facts .fh { font-weight: 700; font-size: 10.5px; line-height: 1.4;
letter-spacing: .06em; text-transform: uppercase;
color: var(--muted); margin-bottom: 8px; }
.dash table.src { width: 100%; }
.dash table.src th { font-size: 12px; font-weight: 600; background: transparent;
padding: 0 0 7px; border-bottom: 1px solid var(--line); }
.dash table.src td { padding: 9px 0; font-size: 14px; font-weight: 600;
color: var(--text2); }
.dash table.src td .s { display: inline; margin: 0 0 0 6px; font-size: 11.5px; }
.dash table.src th.n, .dash table.src td.n { padding-left: 16px; text-align: right; }
.dash table.src tr.tot td { border-top: 1px solid var(--line); font-weight: 800;
color: var(--text); }
.empty-src { padding: 18px 0 14px; color: var(--muted); font-weight: 600;
font-size: 13px; line-height: 1.5; }
.dash table.btbl { width: 100%; min-width: 760px; table-layout: fixed; }
.dash table.btbl col.bc-channel { width: 30%; }
.dash table.btbl col.bc-budget { width: 21%; }
.dash table.btbl col.bc-metric { width: 12.25%; }
.dash table.btbl td.head a.cn { color: var(--text); }
.dash table.btbl th.n, .dash table.btbl td.n { text-align: right; }
.dash table.btbl td.key { font-weight: 800; color: var(--text); font-size: 15px;
white-space: normal; }
.dash table.btbl td.key .s { font-size: 11.5px; font-weight: 600;
max-width: 210px; margin-left: auto;
white-space: normal; }
.dash table.btbl td .s { display: block; }
.dash table.btbl .ret { font-weight: 800; color: var(--text); font-size: 14px;
white-space: normal; }
.dash .warn-t, .dash table.btbl .warn-t { color: var(--amber-text); }
.dash table.btbl .cn { display: inline-flex; align-items: baseline; gap: 7px; }
.dash table.btbl .cn .badge { font-weight: 700; font-size: 10px; line-height: 1.4;
padding: 2px 7px; border-radius: var(--r-pill);
flex: none; }
.dash table.btbl tr.itog td { background: var(--tint); border-top: 0;
font-weight: 800; color: var(--text); }
.dash table.btbl tr.itog td:first-child { border-radius: 12px 0 0 12px; }
.dash table.btbl tr.itog td:last-child { border-radius: 0 12px 12px 0; }
.dash table.btbl td.n .s { text-align: right; white-space: normal; }
.dash table.btbl tr.quiet td { color: var(--muted); font-size: 12.5px;
font-weight: 600; }
.dash table.btbl tr.quiet .badge { font-weight: 700; font-size: 10px;
line-height: 1.4; padding: 1px 6px;
border-radius: var(--r-pill); }
.dash table.ctbl { min-width: 0; max-width: 640px; margin-top: 14px; }
.dash table.ctbl col.bc-channel { width: 79%; }
.dash table.btbl td.mob { display: none; }
.churn1 { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
margin-top: 14px; }
.churn1 .hbig { font-size: 38px; font-weight: 800; letter-spacing: -.035em;
line-height: 1; }
.churn1 .cl { font-weight: 600; font-size: 13.5px; line-height: 1.4;
color: var(--text2); }
/* ================================ планшет ============================ */
@media (max-width: 1179px) {
.dash .dblock.c6 { grid-column: span 12; }
.tgs-cards { grid-template-columns: repeat(2, 1fr); }
.thead, .trow { grid-template-columns: minmax(150px, 1fr) 84px 82px 96px 82px 82px 74px; }
}
/* ================================ телефон ============================ */
@media (max-width: 760px) {
.dash h1 { font-size: 21px; }
/* Липкой едет только строка чипов: заголовок с областью уезжает вверх,
а переключатель периода нужен на любой высоте прокрутки. */
.dash-top { padding: 0 0 2px; }
.dash-bar { gap: 8px; margin: 0 -16px; padding: 10px 16px;
position: sticky; top: var(--side-h); z-index: 9;
background: var(--page);
border-bottom: 1px solid var(--line); }
.dash .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
margin: 0 -16px; padding: 0 16px; }
.dash .chips::-webkit-scrollbar { display: none; }
.dash .chip { padding: 7px 13px; font-size: 12.5px; }
/* Область, папки и каналы на телефоне – одна строка: липких строк
остаётся две, как было до папок (разбор §2.2 и §6.1). Прокрутка тут
одна, общая, поэтому у групп внутри своей нет. */
.scopes { flex-direction: row; align-items: center; gap: 8px;
overflow-x: auto; scrollbar-width: none; margin: 0 -16px;
padding: 0 16px; }
.scopes::-webkit-scrollbar { display: none; }
.scopes .grp { flex: none; overflow: visible; margin: 0; padding: 0; }
.dash .sep2 { display: block; }
.fpanel { margin: 12px -4px 16px; padding: 16px 14px 6px; border-radius: 18px; }
.fhint { margin: 12px 0 16px; padding: 13px 14px; }
.fhint .acts { flex: 1 0 100%; }
.fhint .acts .btn { flex: 1; text-align: center; }
.ffld input[type="text"] { max-width: none; }
.dash .toc { margin: 14px -16px 16px; padding: 0 16px 2px; }
/* Семь дат под графиком в 375 px слипаются: на телефоне остаётся
каждая вторая, крайняя показывается всегда. */
.tgc > i.xl:nth-of-type(2n) { display: none; }
.tgc > i.xl.last { display: block; }
.dwrap { padding: 14px 12px 18px; border-radius: 18px; }
.dash .dblock { padding: 15px 14px; scroll-margin-top: 112px; }
.dash .tree-block { padding: 16px 15px; margin-top: 26px; scroll-margin-top: 112px; }
.tgs-cards { grid-template-columns: repeat(1, 1fr); gap: 10px; }
.tgs { min-height: 126px; padding: 15px 16px 13px; }
.tgs .big { font-size: 27px; }
.tgs .mini { width: 46%; height: 54px; }
.tgs .hb, .tgs .nb { width: 42%; height: 48px; }
.tgc { height: 212px; }
.tgtip { font-size: 11.5px; padding: 8px 11px; }
.hpop { width: min(74vw, 270px); left: auto; right: -8px; }
/* Дерево меток строкой-карточкой: шесть колонок в 375 px не встают. */
.thead { display: none; }
.trow { grid-template-columns: 1fr auto; gap: 3px 10px; padding: 10px 6px; }
.tn { grid-column: 1; grid-row: 1; font-size: 14px; }
.tv { grid-column: auto; grid-row: 2; text-align: left; font-size: 12px;
color: var(--muted); font-weight: 600; display: inline; }
.tv::before { content: attr(data-l) " "; font-weight: 500; color: var(--faint); }
.tvals { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap;
gap: 4px 12px; }
.tv.key { grid-column: 2; grid-row: 1; text-align: right; font-size: 19px;
line-height: 1.1; align-self: center; display: block; }
.tv.key::before { content: none; }
.tv.key .sh { display: block; margin: 0; font-size: 10.5px; }
.tvals .tv { grid-column: auto !important; grid-row: auto !important; }
.d1 { padding-left: 14px; } .d2 { padding-left: 26px; }
.d3 { padding-left: 38px; } .d4 { padding-left: 50px; }
.d5 { padding-left: 62px; }
.tgnote { padding: 0 6px 8px 14px; font-size: 12px; }
.hrow, .hhead { grid-template-columns: 22px repeat(24, 1fr); gap: 2px; }
.hrow .c { border-radius: 3px; }
/* Форма дат на телефоне: поля рядом, «Показать» во всю ширину. */
.dash .dates { gap: 8px 10px; padding: 11px 12px; }
.dash .dates label { flex: 1 1 0; min-width: 0; }
.dash .dates input[type="date"] { width: 100%; min-width: 0; }
.dash .dates .btn { flex: 1 0 100%; text-align: center; }
.dash .dates .lim { flex: 1 0 100%; margin-left: 0; }
table.ctab td.head { max-width: none; }
table.ctab .cre { -webkit-line-clamp: 3; line-clamp: 3; }
.hhead i:not(.h3) { visibility: hidden; }
.hhead i { font-size: 9px; }
/* Блок бюджета на 375 px: две колонки складываются в одну, строка
канала становится карточкой – имя слева, бюджет справа, под ними
одна строка цифр короткими словами (разбор пачки 6, §4.2 и §4.3). */
.bgrid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hero { padding: 15px 16px; }
.hero .hbig { font-size: 32px; }
/* Листалка недель во всю ширину: у стрелок остаются одни значки,
подпись недели переносится по месту. С годом («24.11.2025 –
30.11.2025») строка в одну линию за край 375 px не влезает. */
.dash .wnav { width: 100%; justify-content: space-between; gap: 2px; }
.dash .wnav .wl { display: none; }
.dash .wbtn { padding: 6px 10px; flex: none; }
.dash .wcur { flex: 1 1 auto; min-width: 0; text-align: center;
white-space: normal; font-size: 12px; padding: 6px 8px; }
.dash .bud .bhead { gap: 8px; }
.dash .bud .bhead h2 { flex: 1 0 100%; }
.dash table.btbl { min-width: 0; }
.dash table.btbl colgroup { display: none; }
.dash table.btbl tr { display: grid; grid-template-columns: minmax(0, 1fr) max-content;
gap: 2px 12px; align-items: start; }
.dash table.btbl td { display: none; }
.dash table.btbl td.head { display: block; grid-column: 1; grid-row: 1;
margin: 0; font-size: 14px; overflow-wrap: normal; }
.dash table.btbl td.key { display: block; grid-column: 2; grid-row: 1;
width: auto; max-width: 124px; margin: 0;
text-align: right; font-size: 16px;
white-space: normal; overflow-wrap: normal; }
.dash table.btbl td.key::before, .dash table.btbl td.mob::before { content: none; }
.dash table.btbl td.key .s { display: block; margin: 2px 0 0; text-align: right;
font-size: 11px; }
.dash table.btbl td.key .ret { white-space: normal; font-size: 13.5px; }
.dash table.btbl td.key .apill.sm { white-space: normal; }
.dash table.btbl td.mob { display: block; grid-column: 1 / -1; grid-row: 2;
margin: 2px 0 0; font-size: 12.5px; font-weight: 600;
color: var(--muted); overflow-wrap: normal; }
.dash table.btbl tr.itog { background: var(--tint); border-color: #d6e9fc; }
.dash table.btbl tr.itog td { background: transparent; }
.dash table.btbl tr.itog td:first-child,
.dash table.btbl tr.itog td:last-child { border-radius: 0; }
.dash table.btbl tr.quiet { display: block; border-style: dashed; }
.dash table.btbl tr.quiet td { display: block; margin: 0; overflow-wrap: normal; }
.dash table.ctbl td.head { min-width: 0; overflow-wrap: anywhere; }
.dash table.ctbl .cn { max-width: 100%; }
.dash table.ctbl td.key { max-width: 100px; }
}
/* ==================== лендинги и журнал конверсий (№308) ==============
Ответ проверки страницы, адрес лендинга и вставляемый скрипт – длинные
строки без пробелов. На 375 px они вылезали за край блока и ложились
на кнопку рядом. Все три переносятся по месту, а на телефоне ответ
и кнопка встают друг под друга. */
.land.gap { margin-bottom: 18px; }
.lurl { display: block; overflow-wrap: anywhere; }
.lsnip { display: block; font-size: 12px; overflow-wrap: anywhere; }
.lclick { margin: 6px 0 0; }
.lcheck { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
margin: 8px 0 0; }
.lcheck > .badge, .lcheck > .muted { min-width: 0; line-height: 1.5;
overflow-wrap: anywhere; }
.lpair { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
margin-top: 8px; }
.lpair select.chip { max-width: 100%; }
@media (max-width: 760px) {
.lcheck { align-items: stretch; }
.lcheck > * { flex: 1 0 100%; }
.lcheck form .btn { display: block; width: 100%; text-align: center; }
.lpair > select.chip, .lpair > .btn { flex: 1 0 100%; }
.lpair > .btn { text-align: center; }
}
/* ======================= журнал закупа: широкая таблица =================
Разбор пачки 5, §2.1–2.3 и макет `МАКЕТ_журнал_закупа_v2.html`.
Колонок в журнале 22, на экране стоят включенные: не влезли в ширину –
таблица едет вбок ВНУТРИ своей рамки, страница целиком вбок не едет.
Первая колонка закреплена, ширину любой тянут мышью за правый край
заголовка. Класс `jrn` отделяет журнал от прочих таблиц кабинета:
на телефоне он становится карточками по своим правилам (блоки денег
и людей, крупные цифры), а не общим `tbl`. */
.found { display: flex; justify-content: space-between; align-items: center;
gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.found .sub { margin: 0; }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.tw { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px;
background: var(--page); }
table.wide { table-layout: fixed; width: max-content; min-width: 100%;
border-collapse: separate; border-spacing: 0; font-size: 14px; }
table.wide th { position: relative; text-align: left; font-weight: 500;
color: var(--muted); font-size: 12.5px; background: var(--head);
padding: 8px 10px; vertical-align: bottom; line-height: 1.3;
border-bottom: 1px solid var(--border); white-space: normal; }
table.wide td { padding: 9px 10px; border-top: 0;
border-bottom: 1px solid var(--border-2); vertical-align: top;
overflow: hidden; text-overflow: ellipsis; }
table.wide td.head { min-width: 0; font-weight: 500; }
table.wide tr:last-child td { border-bottom: 0; }
table.wide th.n, table.wide td.n { text-align: right; }
table.wide td.n { white-space: nowrap; }
/* Первая колонка своего раздела отбита линией: денежные колонки видно
отдельно от людей, даже когда их семь подряд. */
table.wide th.sec, table.wide td.sec { border-left: 1px solid var(--border-2); }
table.wide .s { display: block; font-size: 11.5px; color: var(--muted);
margin-top: 2px; font-weight: 400; line-height: 1.4; }
table.wide code { font-size: 12px; }
table.wide tr.group td.head { font-weight: 700; }
table.wide tr.kid td.head { padding-left: 26px;
box-shadow: inset 3px 0 0 var(--border); }
table.wide tbody tr:hover td { background: var(--head); cursor: pointer; }
table.wide tbody tr.edit-row:hover td { background: var(--page); cursor: auto; }
/* Первая колонка держится на месте, пока таблицу возят вбок (§2.1). */
table.wide th:first-child, table.wide td:first-child { position: sticky; left: 0;
background: var(--page); z-index: 2; box-shadow: inset -1px 0 0 var(--border); }
table.wide th:first-child { background: var(--head); z-index: 3; }
table.wide tbody tr:hover td:first-child { background: var(--head); }
table.wide td.edit-cell { position: static; box-shadow: none;
white-space: normal; overflow: visible; }
/* Текст подачи – две строки, целиком он показывается по наведению. */
.cr { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; }
/* Ручка ширины колонки. Меньше 70 px колонка не становится (держит скрипт). */
.rz { position: absolute; top: 0; right: -4px; width: 9px; height: 100%;
cursor: col-resize; z-index: 5; }
.rz:hover::after, .rz.act::after { content: ""; position: absolute; left: 4px;
top: 0; width: 2px; height: 100%; background: var(--accent-light); }
body.rzing { user-select: none; cursor: col-resize; }
/* Стрелка, раскрывающая посевы донора: своей рамки у неё нет – это
знак, а не кнопка. */
.tree-arrow { border: 0; background: none; cursor: pointer; color: var(--muted);
font-family: inherit; font-size: 11px; line-height: 1;
padding: 0 6px 0 0; }
/* ------------------------ окно «Настройка таблицы» (§2.2) -------------- */
.ovl { position: fixed; inset: 0; background: rgba(37, 37, 37, .38);
display: flex; align-items: center; justify-content: center;
z-index: 50; padding: 20px; }
.dlg { background: var(--page); border-radius: 14px; width: 860px;
max-width: 100%; max-height: 92vh; display: flex; flex-direction: column;
box-shadow: 0 12px 40px rgba(23, 28, 38, .22); margin: 0; }
.dlg header { padding: 16px 20px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between; }
.dlg header h3 { margin: 0; font-size: 16px; }
.dlg .x { border: 0; background: none; font-size: 20px; color: var(--muted);
cursor: pointer; line-height: 1; font-family: inherit; }
.dcols { display: grid; grid-template-columns: 1fr 300px; min-height: 0; flex: 1; }
.dleft { padding: 14px 18px; overflow: auto; border-right: 1px solid var(--border); }
.dright { padding: 14px 16px; overflow: auto; background: var(--head); }
.srch { width: 100%; padding: 8px 11px; border: 1px solid var(--border);
border-radius: 8px; font-size: 14px; font-family: inherit;
margin-bottom: 12px; }
.csec { font-size: 11.5px; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 6px; }
.citem { display: flex; gap: 9px; align-items: flex-start; padding: 5px 6px;
border-radius: 8px; cursor: pointer; }
.citem:hover { background: var(--head); }
.citem input { margin-top: 3px; }
.citem b { font-weight: 500; font-size: 13.5px; }
.citem i { font-style: normal; display: block; font-size: 11.5px;
color: var(--muted); line-height: 1.35; }
.dright h4 { margin: 0 0 10px; font-size: 12px; font-weight: 700;
color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ord { list-style: none; margin: 0; padding: 0; }
.ord li { display: flex; align-items: center; gap: 8px; background: var(--page);
border: 1px solid var(--border); border-radius: 8px;
padding: 7px 9px; margin-bottom: 6px; font-size: 13.5px; cursor: grab; }
.ord li.pin { cursor: default; color: var(--muted); background: var(--card); }
.ord li.drag { opacity: .4; }
.ord li.over { border-color: var(--accent-light); background: var(--accent-bg); }
.ord .gr { color: var(--faint); font-size: 13px; letter-spacing: 1px; }
.ord .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord .rm { border: 0; background: none; color: var(--muted); cursor: pointer;
font-size: 15px; line-height: 1; padding: 0 2px; font-family: inherit; }
.dlg footer { padding: 13px 20px; border-top: 1px solid var(--border);
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dlg footer .sp { flex: 1; }
.dlg footer .hint { font-size: 12px; color: var(--muted); }
/* ------------------- журнал на телефоне (§2.3, №406, №427) -------------
Строка таблицы встаёт карточкой: шапка таблицы прячется, столбика
подписей слева нет, подпись стоит у самой цифры. Главная цифра –
плашкой во всю ширину, дальше блоки: над первой цифрой блока стоит
его название («Деньги», «Люди», «Переходы»), цифры – по две в ряд.
Вариант владелец выбрал 21.09 из двух показанных картинками.
Выравнивание (№427, владелец: «у тебя выравнивание поехало»). В ряду
из двух цифр отступ сверху один на обеих ячейках, число занимает ровно
одну строку, подпись идёт сразу за числом, подстрока – последней.
Прежняя карточка давала поле и отступ только первой ячейке блока,
а её соседке – нет, и число с подписью уезжали вниз на девять точек. */
@media (max-width: 760px) {
.tw { overflow: visible; border: 0; background: none; }
table.wide.jrn { width: 100%; display: block; }
table.wide.jrn colgroup, table.wide.jrn thead { display: none; }
table.wide.jrn tbody { display: block; }
table.wide.jrn tr { display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px;
border: 1px solid var(--border); border-radius: 12px;
padding: 12px; margin-bottom: 10px; overflow: hidden; }
table.wide.jrn td { display: flex; flex-direction: column;
align-items: flex-start; padding: 10px 0 0; border: 0;
overflow: hidden; position: static; box-shadow: none; text-align: left;
font-size: 19px; font-weight: 600; line-height: 23px;
white-space: nowrap; }
table.wide.jrn td.n { text-align: left; }
/* Подпись – под своим числом, подстрока ячейки – последней строкой:
тогда у соседок по ряду на одной высоте и числа, и подписи. */
table.wide.jrn td::before { content: attr(data-label); order: 2;
max-width: 100%; white-space: normal;
font-size: 11.5px; font-weight: 500; color: var(--muted);
line-height: 1.35; }
table.wide.jrn td .s { order: 3; max-width: 100%; white-space: normal;
font-size: 11.5px; font-weight: 500; line-height: 1.35; }
/* Бейдж «Осталось 7д+» берёт высоту строки у своей ячейки: со своей
высотой он увёл бы подпись ниже, чем у соседки по ряду. */
table.wide.jrn td .badge { font-size: 14px; font-weight: 600;
line-height: inherit; padding: 0 8px; }
/* Ячейки собираются блоками: сначала посев, потом деньги, люди
и переходы, – в каком бы порядке колонки ни стояли в таблице. */
table.wide.jrn td.head { order: 0; }
table.wide.jrn td[data-sec="place"]:not(.head) { order: 1; }
table.wide.jrn td[data-sec="money"] { order: 2; }
table.wide.jrn td[data-sec="people"] { order: 3; }
table.wide.jrn td[data-sec="clicks"] { order: 4; }
/* Первая ячейка блока уходит на новую строку сетки: блок начинается
с левого края карточки, а не с середины ряда. */
table.wide.jrn td.blk { grid-column-start: 1; }
table.wide.jrn td.head { grid-column: 1 / -1; display: block;
font-size: 17px; font-weight: 700; padding: 0 0 2px;
white-space: normal; }
table.wide.jrn td.head::before { content: none; }
/* Тема, креатив, комментарий и адрес – строками во всю ширину, подпись
у них стоит сверху: так они читаются заголовком своего текста. */
table.wide.jrn td.w, table.wide.jrn td[data-sec="place"]:not(.head) {
grid-column: 1 / -1; font-size: 14px; font-weight: 500;
white-space: normal; padding-top: 9px; }
table.wide.jrn td.w::before,
table.wide.jrn td[data-sec="place"]:not(.head)::before { order: -1; }
/* Вертикальная отбивка разделов – примета широкой таблицы, в карточке
блоки разводит своё. */
table.wide.jrn td.sec { border: 0; }
/* Главная цифра карточки – плашкой во всю ширину. */
table.wide.jrn td.hero { grid-column: 1 / -1; margin-bottom: 4px;
background: var(--accent-bg); border-radius: 10px;
padding: 10px 13px 11px; font-size: 26px; color: var(--accent-dark); }
table.wide.jrn td.hero::before { color: var(--text-2); }
/* Нечётная цифра блока – тоже во всю ширину: в половину ряда она стояла
бы рядом с пустым местом и выглядела бы потерянной (№427). */
table.wide.jrn td.lone { grid-column: 1 / -1; }
/* Название блока стоит в воздухе НАД ячейкой, а сам воздух берут обе
соседки по ряду (`blk` и `blkm`) – иначе цифры разъедутся. */
table.wide.jrn td.blk, table.wide.jrn td.blkm { margin-top: 26px; }
/* Ячейке с названием блока прятать выступающее нельзя: название стоит
в воздухе над ней и обрезалось бы вместе с ним. */
table.wide.jrn td.blk { position: relative; overflow: visible; }
table.wide.jrn td.blk::after { content: attr(data-block);
position: absolute; top: -20px; left: 0; width: 200%;
font-size: 11px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted); }
/* Блок, в котором у строки одни прочерки, карточка не показывает вовсе
(`data-void`, `links.journal_card_void`): у записи без нашей ссылки
переходов нет, и название блока с прочерком под ним человеку ничего
не говорит. В широкой таблице ячейки остаются на местах. */
table.wide.jrn tr[data-void~="money"] td[data-sec="money"],
table.wide.jrn tr[data-void~="people"] td[data-sec="people"],
table.wide.jrn tr[data-void~="clicks"] td[data-sec="clicks"] {
display: none; }
table.wide.jrn tr.kid { border-left: 3px solid var(--accent-light); }
table.wide.jrn tr.group td.head { font-size: 17px; }
table.wide.jrn tr:hover td, table.wide.jrn tr:hover td:first-child {
background: transparent; }
table.wide.jrn tr.group-header { display: block; border: 0; padding: 0;
margin: 16px 0 8px; }
table.wide.jrn tr.group-header td { display: block; font-size: 13px;
font-weight: 500; color: var(--text-2); background: var(--head);
padding: 8px 10px; border-radius: 8px; }
table.wide.jrn tr.group-header td::before { content: none; }
table.wide.jrn tr.edit-row { display: block; padding: 12px; }
table.wide.jrn td.edit-cell { display: block; font-size: 14px;
font-weight: 400; }
table.wide.jrn td.edit-cell::before { content: none; }
table.wide.jrn td.edit-cell code { overflow-wrap: anywhere; }
.ovl { padding: 0; }
.dlg { max-height: 100vh; height: 100%; border-radius: 0; }
.dcols { grid-template-columns: 1fr; }
.dleft { border-right: 0; border-bottom: 1px solid var(--border); }
.dlg footer .sp { flex: 0 0 100%; order: 3; }
}
/* Экран «Перенос из таблицы» (разбор §5.1). Сверка строка за строкой
стоит ДО записи, и цвет отметки должен читаться с одного взгляда:
зелёная – сошлось, жёлтая – проверьте, серая – заведём запись,
красная – строка не разобралась и не переносится. */
.warn-plate { background: var(--amber-bg); color: var(--amber);
border-radius: 8px; padding: 10px 14px; margin-bottom: 16px;
font-size: 14px; }
.tr-paste { display: flex; width: 100%; margin-bottom: 6px; }
.tr-paste textarea { width: 100%; padding: 10px 12px; color: var(--text);
background: var(--page); border: 1px solid var(--border);
border-radius: 8px; resize: vertical;
font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.tr-file input[type=file] { font-size: 12px; }
.badge.gray { background: var(--card); color: var(--muted); }
.btn[disabled] { opacity: .5; pointer-events: none; }
table.tr-check td { vertical-align: top; }
table.tr-check .s { display: block; font-size: 12px; color: var(--muted);
margin-top: 3px; }
table.tr-check .w { display: inline-block; margin: 0 8px 2px 0;
font-size: 13px; }
table.tr-check .no { color: var(--red); font-size: 13px; }
table.tr-check select.chip { display: block; margin-top: 6px;
max-width: 320px; }
table.tr-check tr.m-warn td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
table.tr-check tr.m-new td:first-child { box-shadow: inset 3px 0 0 var(--faint); }
table.tr-check tr.m-bad td { background: var(--red-bg); }
/* Сверка переноса на телефоне: строка встаёт карточкой. Общие правила
`table.tbl` ей не годятся – там ячейка встаёт строкой в одну линию,
и отметка со списком уезжали за край. */
@media (max-width: 760px) {
table.tr-check, table.tr-check tbody, table.tr-check tr,
table.tr-check td { display: block; width: 100%; }
table.tr-check thead { display: none; }
table.tr-check tr { border: 1px solid var(--border); border-radius: 10px;
padding: 12px; margin-bottom: 10px; }
table.tr-check td { border: 0; padding: 4px 0; }
table.tr-check select.chip { max-width: 100%; width: 100%; }
table.tr-check tr.m-warn td:first-child,
table.tr-check tr.m-new td:first-child { box-shadow: none; }
}
/* ======================================================================
НАСТРОЙКИ (§10 экран 8, №441): блоки в стиле дашборда и кабинеты
Директа по макету `МАКЕТ_директ_ключ_v2.html`. Живёт под `.sett`:
`.ferr`, `.login` и `.ffld` на других экранах выглядят по-своему.
====================================================================== */
.sett .fedit { margin-top: 14px; padding: 16px 18px; }
.sett .ffld input[type="text"], .sett .ffld input[type="password"] {
max-width: 420px; width: 100%; box-sizing: border-box; font-weight: 600;
font-size: 14px; line-height: 1.2; font-family: inherit; padding: 9px 13px;
border: 1px solid var(--line); border-radius: 12px; background: #fff;
color: var(--text); }
.sett .ffld input:focus { outline: 2px solid var(--accent-light); outline-offset: 0;
border-color: var(--accent); }
.sett .ffld .hintline { font-size: 12px; color: var(--muted); font-weight: 500;
max-width: 520px; text-transform: none; letter-spacing: 0; }
.sett .ferr { margin: -4px 0 12px; padding: 10px 12px; border-radius: 12px;
background: var(--red-bg); color: var(--red); font-size: 13px;
font-weight: 600; max-width: 560px; }
.sett .frow2 { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sett .agency summary { cursor: pointer; color: var(--accent-dark); font-weight: 700;
font-size: 13px; margin-bottom: 12px; }
.sett .keybox { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-top: 14px; padding: 14px 16px; border-radius: 14px;
background: var(--head); border: 1px solid var(--line); }
.sett .keybox.bad { background: var(--red-bg); }
.sett .keybox .kw { font-weight: 800; font-size: 15px; color: var(--text-2); }
.sett .keybox.bad .kw { color: var(--red); }
.sett .keybox .kd { color: var(--text-2); font-weight: 600; font-size: 13px; }
.sett .steps { margin: 12px 0 0; padding-left: 18px; color: var(--text-2);
font-size: 13px; line-height: 1.7; }
.sett .steps li { margin-bottom: 2px; }
.sett .addh { margin-top: 18px; font-weight: 800; font-size: 15px;
letter-spacing: -.01em; }
.sett .cabl { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sett .cabrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line);
background: #fff; }
.sett .cabrow.bad { background: var(--red-bg); }
.sett .cabrow.off { background: var(--head); }
.sett .cabrow .ti { width: 34px; height: 34px; flex: none; align-self: flex-start; }
.sett .cabrow.off .ti { opacity: .5; }
.sett .cabrow .cm { display: flex; flex-direction: column; gap: 3px; min-width: 0;
flex: 1 1 260px; }
.sett .cabrow .ctop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sett .cabrow .cd { font-size: 12.5px; color: var(--text-2); font-weight: 500;
line-height: 1.45; overflow-wrap: anywhere; }
.sett .cabrow .cd.cerr { color: var(--red); font-weight: 600; }
.sett .cabrow .kacts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap;
align-items: center; }
.sett .cname { font-weight: 800; font-size: 14px; letter-spacing: -.01em;
color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.sett .clogin { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-weight: 600; font-size: 11.5px; color: var(--muted); }
.sett .mask { font-weight: 700; font-size: 12px; letter-spacing: .08em;
padding: 2px 8px; border-radius: 8px; background: #fff;
border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.sett .ren { display: inline-block; width: 24px; height: 24px; box-sizing: border-box;
border: 1px solid var(--line); border-radius: 8px; background: #fff;
color: var(--muted); font-size: 13px; line-height: 22px; text-align: center; }
.sett .ren:hover { border-color: var(--accent-light); color: var(--accent-dark); }
.sett .renf input[type="text"] { font: inherit; font-weight: 700; font-size: 13.5px;
padding: 6px 11px; border: 1px solid var(--accent); border-radius: 9px;
background: #fff; color: var(--text); width: 200px; max-width: 100%;
box-sizing: border-box; outline: 2px solid var(--accent-light); }
.sett .wait { display: inline-flex; align-items: center; gap: 8px;
color: var(--accent-dark); font-weight: 700; font-size: 13px; }
.sett .spin { width: 14px; height: 14px; flex: none; box-sizing: border-box;
border-radius: 50%; border: 2px solid var(--accent-light);
border-top-color: var(--accent); animation: sett-spin 1s linear infinite; }
@keyframes sett-spin { to { transform: rotate(360deg); } }
.sett form.inl { display: inline; margin: 0; }
.sett .btn.red-t { color: var(--red); }
.sett .slist { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sett .srow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 11px 0; border-top: 1px solid var(--line2); }
.sett .slist > .srow:first-of-type { border-top: 0; padding-top: 0; }
.sett .srow .sk { font-weight: 600; font-size: 13.5px; min-width: 0; flex: 1 1 250px; }
.sett .srow .sv { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sett .srow input[type="time"], .sett .srow input[type="number"] {
font-weight: 700; font-size: 13.5px; font-family: inherit; padding: 7px 11px;
border: 1px solid var(--line); border-radius: 10px; background: #fff;
color: var(--text); width: 96px; box-sizing: border-box; text-align: center; }
.sett .chip input.vh { position: absolute; opacity: 0; width: 1px; height: 1px;
pointer-events: none; }
.sett .chip { cursor: pointer; border: 1px solid var(--border); background: #fff;
color: var(--text-2); }
.sett .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 760px) {
.sett .cabrow .kacts { margin-left: 0; flex: 0 0 100%; }
.sett .cabrow .cm { flex-basis: 200px; }
.sett .srow .sv { margin-left: 0; }
.sett .ffld input[type="text"], .sett .ffld input[type="password"] { max-width: none; }
}
/* ======================================================================
КОНВЕРСИИ (§10 экран 5, №443, №442) по макету `МАКЕТ_конверсии_v2.html`:
карточки инструментов со значками, кампании Директа с отбором кабинета
и периода, лендинги карточками. Живет под `.conv` (вместе с `.dash`):
`.land`, `.login`, `.note` на других экранах выглядят по-своему;
шапка карточки – `.tcap`/`.tname`: `.thead`/`.tn` заняты таблицей меток.
====================================================================== */
.conv .tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.conv .tool { background: #fff; border-radius: 16px; padding: 16px 19px 15px; min-width: 0;
box-shadow: 0 1px 2px rgba(23, 28, 38, .07), 0 8px 24px rgba(23, 28, 38, .05); }
.conv .tool.wait { opacity: .6; }
.conv .tcap { display: flex; align-items: center; gap: 11px; }
.conv .ti { width: 38px; height: 38px; flex: none; }
.conv .tname { font-weight: 800; font-size: 16px; letter-spacing: -.01em; line-height: 1.25;
min-width: 0; }
.conv .tname .tsub { display: block; font-weight: 600; font-size: 12px; color: var(--muted);
letter-spacing: 0; }
.conv .st { margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
font-weight: 800; font-size: 14px; white-space: nowrap; align-self: flex-start;
margin-top: 3px; }
.conv .st.sm { font-size: 12.5px; margin-top: 0; }
.conv .tool.wait .st { color: var(--muted); }
.conv .dotl { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.conv .dotl.g { background: var(--green); }
.conv .dotl.a { background: var(--amber); }
.conv .dotl.r { background: var(--red); }
.conv .dotl.n { background: var(--faint); }
.conv .tl { font-weight: 600; font-size: 12.5px; line-height: 1.5; color: var(--muted);
margin-top: 2px; overflow-wrap: anywhere; }
.conv .tcap + .tl { margin-top: 12px; }
.conv .tpart { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line2); }
.conv .tph { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 800;
font-size: 13.5px; margin-bottom: 3px; }
.conv .tph .st { margin-top: 0; }
.conv .tnote { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 7px; }
.conv .tact { margin-top: 11px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.conv .tact a { font-weight: 700; font-size: 12.5px; }
.conv .cabs { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.conv .cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 11px;
border-radius: 11px; background: var(--head); border: 1px solid var(--line2); }
.conv .cab .cd { font-weight: 600; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.conv .cname { font-weight: 800; font-size: 13.5px; color: var(--text); letter-spacing: -.01em;
overflow-wrap: anywhere; min-width: 0; }
.conv .cname.sm { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 7px;
background: var(--head); border: 1px solid var(--line2); white-space: nowrap; }
.conv .clogin { font-weight: 600; font-size: 11.5px; color: var(--muted);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.conv svg.i { width: 16px; height: 16px; flex: none; }
.conv .sys { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* отбор кабинета и периода у кампаний Директа (№442) */
.conv .perbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.conv .perbar .fl { font-size: 12px; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: .04em; }
.conv .perbar .dates { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap;
margin: 0; padding: 5px 10px; border-radius: var(--r-pill);
background: var(--head); border: 1px solid var(--line); }
.conv .perbar .dates.on { border-color: var(--accent); }
.conv .perbar .dates input { font-weight: 600; font-size: 12.5px; font-family: inherit;
padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px;
background: #fff; color: var(--text); width: 132px; }
.conv .perbar .dates span { color: var(--muted); font-weight: 700; font-size: 11.5px;
text-transform: uppercase; letter-spacing: .04em; }
.conv .tscroll { margin-top: 14px; }
.conv th.n, .conv td.n { text-align: right; white-space: nowrap; }
.conv td .s { display: block; font-size: 12px; color: var(--muted); font-weight: 500;
margin-top: 2px; line-height: 1.4; }
.conv td.all { font-weight: 800; }
.conv table.tbl tr.total td { border-top: 2px solid var(--line); font-weight: 800;
background: var(--head); }
.conv .unmatched { margin-top: 16px; padding: 13px 15px; border-radius: 14px;
background: var(--amber-bg); border: 1px solid var(--line);
color: var(--text-2); font-weight: 600; font-size: 13px; line-height: 1.5; }
.conv .unmatched b { display: block; color: var(--text); margin-bottom: 4px; }
.conv .unmatched .list { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.conv .unmatched .list span { background: #fff; border: 1px solid var(--line);
border-radius: var(--r-pill); padding: 3px 11px; font-weight: 700;
font-size: 12.5px; overflow-wrap: anywhere; }
/* лендинги карточками */
.conv .lands { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.conv .land { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; min-width: 0; }
.conv .ltop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conv .ltop .url { font-weight: 800; font-size: 14.5px; overflow-wrap: anywhere; min-width: 0; }
.conv .ltop .lacts { margin-left: auto; display: flex; gap: 10px; align-items: center;
flex-wrap: wrap; }
.conv .lrows { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 10px 18px; margin-top: 11px; padding-top: 11px;
border-top: 1px solid var(--line2); }
.conv .lrows .k { font-weight: 700; font-size: 10.5px; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted); }
.conv .lrows .v { font-weight: 600; font-size: 13.5px; margin-top: 2px; overflow-wrap: anywhere; }
.conv .snip { margin-top: 11px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 10px 12px; border-radius: 12px; background: var(--head);
border: 1px solid var(--line2); }
.conv .snip code { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere;
word-break: break-all; min-width: 0; }
.conv .lpair { margin-top: 11px; }
.conv .fedit { margin-top: 14px; padding: 16px 18px; border-radius: 16px; background: var(--head); }
.conv .ffld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.conv .ffld > span:first-child { font-size: 12px; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: .04em; }
.conv .ffld input[type="text"], .conv .ffld select {
max-width: 420px; width: 100%; box-sizing: border-box; font-weight: 600; font-size: 14px;
line-height: 1.2; font-family: inherit; padding: 9px 13px; border: 1px solid var(--line);
border-radius: 12px; background: #fff; color: var(--text); }
.conv .ffld .hintline { font-size: 12px; color: var(--muted); font-weight: 500; max-width: 520px;
text-transform: none; letter-spacing: 0; }
.conv .pager { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.conv .pager .pg { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line);
background: #fff; font-weight: 700; font-size: 12.5px; color: var(--accent-dark); }
.conv .pager .pg.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.conv .pager .pg.off { color: var(--faint); pointer-events: none; }
@media (max-width: 760px) {
.conv .tools { grid-template-columns: 1fr; }
.conv .ltop .lacts { margin-left: 0; flex: 0 0 100%; }
/* Строка таблицы на телефоне – карточка (`table.tbl`): сумма и «всего …»
переносятся внутри своей ячейки, пустые ячейки строки «Итого» прячутся. */
.conv td.n { text-align: left; white-space: normal; flex-wrap: wrap; }
.conv table.tbl td:empty { display: none; }
.conv table.tbl tr.total { background: var(--head); }
.conv table.tbl tr.total td { background: transparent; border-top: 0; }
.conv .perbar .dates { border-radius: 14px; }
.conv .perbar .dates input { width: 128px; }
.conv .ffld input[type="text"], .conv .ffld select { max-width: none; }
}
/* ======================================================================
ЛЮДИ (§10 экран 11, №440) по макету `МАКЕТ_люди_v3.html`: человек –
карточка, над списком чипы «Кто» и три карточки-цифры. Живет под `.ppl`
(вместе с `.dash`): `.cap`, `.pager`, `.search` на других экранах свои.
====================================================================== */
.ppl .dwrap { margin-top: 4px; }
.ppl .badge { white-space: nowrap; display: inline-block; }
.ppl button.badge { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.ppl button.badge.warn:hover { box-shadow: inset 0 0 0 1px var(--amber); }
.ppl .tgs .am { color: var(--amber); }
.ppl .search input { font-weight: 600; font-size: 13.5px; font-family: inherit; padding: 8px 14px;
border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff;
color: var(--text); width: 230px; }
.ppl .plist { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.ppl .pcard { border: 1px solid var(--line); border-radius: 16px; padding: 15px 17px 13px;
background: #fff; min-width: 0; }
.ppl .pcard.me { background: var(--head); border-color: var(--line2); }
.ppl .ptop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ppl .pname { font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; }
.ppl .pnick { color: var(--muted); font-weight: 600; font-size: 13px; }
.ppl .pacts { margin-left: auto; display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center;
font-weight: 700; font-size: 12.5px; }
.ppl .pacts .muted { font-weight: 600; }
.ppl .pacts a { white-space: nowrap; }
.ppl .pacts form { margin: 0; display: inline; }
.ppl .pacts button.dlink { background: none; border: 0; padding: 0; cursor: pointer;
font: inherit; color: var(--red); white-space: nowrap; }
.ppl .pbind { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.ppl .pbody { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
gap: 14px 20px; margin-top: 13px; padding-top: 12px;
border-top: 1px solid var(--line2); }
.ppl .pbox { min-width: 0; }
.ppl .pbox > .cap { font-weight: 700; font-size: 10.5px; line-height: 1.4; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
display: flex; align-items: center; }
.ppl .pchans { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.ppl .pchans .chip { cursor: default; padding: 5px 11px; font-size: 12.5px; }
.ppl .pchans .chip:hover { border-color: var(--border); color: var(--text-2); }
/* Янтарная плашка «каналов нет» переносится по словам и не заходит
в соседнюю колонку (v3 макета: на скрине владельца 23.09 упиралась
в «Стиль отчета»). */
.ppl .pchans .badge.warn { white-space: normal; line-height: 1.45; padding: 7px 11px;
border-radius: 10px; max-width: 100%; overflow-wrap: anywhere; }
.ppl .pfoot { margin-top: 11px; color: var(--muted); font-size: 12px; font-weight: 500; }
.ppl .pstyle { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0;
font-size: 12.5px; }
.ppl .pstyle select, .ppl .ffld select { font-weight: 600; font-size: 13px; font-family: inherit;
padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px;
background: #fff; color: var(--text); max-width: 100%; }
/* Формы «Сменить роль» и «Открыть каналы» раскрываются из ссылок в шапке
карточки; своего заголовка-переключателя у них нет. */
.ppl .pfold > summary { display: none; }
.ppl .pfold .fedit { margin-top: 10px; }
/* №531: видимые поля и кнопки разделены при любом переносе; hidden сильнее layout. */
.ppl .fedit { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ppl .fedit .ffld { margin: 0; max-width: 100%; min-width: 0; }
.ppl .fedit [hidden] { display: none; }
.ppl .fedit[hidden] { display: none; }
.ppl .fedit select { box-sizing: border-box; min-width: 0; }
.ppl .fedit .frow2 { width: 100%; }
.ppl .pick-list { max-height: 320px; overflow: auto; }
/* Права: «Посевы» (таблетка с выбором) и пять галочек (§3, §10 экран 11). */
.ppl .rights { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.ppl .pcard .tog { font-size: 12.5px; padding: 6px 12px 6px 8px; }
.ppl .tog.off { color: var(--faint); cursor: default; }
/* «Посевы» – одна таблетка с уровнем внутри: нет / просмотр / правка. При
«нет» серая, как снятая галочка; при «просмотр» и «правка» – синяя. */
.ppl .pcard .tog.pick { padding-right: 5px; cursor: default; min-width: 0;
max-width: 100%; box-sizing: border-box; }
.ppl .tog.pick .pick-title { min-width: 0; white-space: normal; }
.ppl .tog.pick select { -webkit-appearance: none; appearance: none; border: 0;
flex: none; max-width: 100%;
border-left: 1px solid var(--line); margin-left: 2px; padding: 1px 22px 1px 9px; border-radius: 0;
font: inherit; font-weight: 700; color: inherit; cursor: pointer;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b8b8b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 6px center / 9px 6px; }
.ppl .tog.pick:not(:has(option.n:checked)) { border-color: var(--accent); color: var(--accent-dark); }
.ppl .tog.pick:not(:has(option.n:checked)) .ck { background: var(--accent); border-color: var(--accent);
color: #fff; }
.ppl .tog.pick:not(:has(option.n:checked)) select { border-left-color: var(--accent-light); }
.ppl .inv { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--green-bg);
color: var(--green); font-weight: 600; font-size: 13.5px; display: flex;
align-items: center; gap: 10px; flex-wrap: wrap; }
.ppl .inv code { font-weight: 700; font-size: 12.5px; word-break: break-all; }
.ppl .frow2 { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.ppl .frow2 .ffld { margin-bottom: 0; }
.ppl .ferr { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--red-bg); }
.ppl .empty { padding: 30px 20px 14px; }
.ppl .pager { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.ppl .pager .pg { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line);
background: #fff; font-weight: 700; font-size: 12.5px; color: var(--accent-dark); }
.ppl .pager .pg.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ppl .pager .pg.off { color: var(--muted); }
.ppl .tscroll { margin-top: 14px; }
@media (max-width: 760px) {
.ppl .pbody { grid-template-columns: 1fr; }
.ppl .pacts { margin-left: 0; flex: 0 0 100%; }
.ppl .chips { flex-wrap: wrap; overflow: visible; }
.ppl .chips .sep { display: none; }
.ppl .search { flex: 1 0 100%; }
.ppl .search input { width: 100%; box-sizing: border-box; }
.ppl .frow2 .ffld, .ppl .frow2 .ffld input, .ppl .frow2 .ffld select { width: 100%; max-width: none; }
}
.ppl .pbox .hint.q .hpop { left: -8px; right: auto; width: min(296px, 78vw); }
.ppl .fl { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase;
letter-spacing: .04em; }