/* --- site/css/site-select.css --- */
/* Searchable native-select enhancement shared by MAX and the unified account. */
.site-select { --site-select-font-size:16px; position:relative; display:inline-grid; vertical-align:middle; width:100%; min-width:0; max-width:100%; text-align:left; }
.site-select[hidden], .site-select__panel[hidden] { display:none!important; }
select.site-select__native { position:absolute!important; width:1px!important; height:1px!important; min-width:0!important; min-height:0!important; padding:0!important; margin:0!important; border:0!important; opacity:0!important; clip-path:inset(50%); overflow:hidden!important; pointer-events:none; }
/* Вид кнопки-триггера (36 px, заливка как у поиска в шапке, рамка при наведении, кольцо в фокусе
   и пока список раскрыт) — общий со всеми полями, static/site/css/fields.css (0.103.0). Здесь — раскладка */
.site-select > .site-select__trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-width:0; margin:0; box-sizing:border-box; text-align:left; cursor:pointer; }
.site-select__value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-select__trigger > svg { flex:0 0 16px; width:16px; height:16px; fill:currentColor; color:var(--bp-muted); transition:transform .15s; }
.site-select__trigger[aria-expanded=true] > svg { transform:rotate(180deg); }
.site-select > .site-select__trigger:disabled { opacity:.5; cursor:not-allowed; }
.site-select > .site-select__panel { position:fixed; inset:auto; z-index:10000; display:flex; flex-direction:column; overflow-x:hidden; width:280px; max-width:calc(100vw - 20px); max-height:360px; margin:0; padding:8px; box-sizing:border-box; border:1px solid var(--line); border-radius:14px; background:var(--bp-surface); color:var(--bp-ink); box-shadow:0 16px 45px #17122526; text-align:left; font-family:var(--font-family); }
.site-select__panel::backdrop { background:transparent; pointer-events:none; }
/* Поле поиска в раскрытом списке: вид общий (fields.css), здесь место в колонке панели */
.site-select .site-select__panel > input.site-select__search { display:block; flex:0 0 auto; width:100%; min-width:0; margin:0 0 6px; box-sizing:border-box; }
.site-select__options { display:block; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.site-select__option { position:relative; display:block; min-height:36px; padding:8px 32px 8px 12px; box-sizing:border-box; border-radius:8px; font-size:var(--site-select-font-size); font-weight:400; line-height:1.25; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
.site-select__option:hover:not([aria-disabled=true]), .site-select__option.is-active { background:var(--bp-hover); }
.site-select__option[aria-selected=true] { color:var(--text-purple); font-weight:700; }
.site-select__option[aria-selected=true]::after { content:""; position:absolute; right:14px; top:12px; width:6px; height:10px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); }
.site-select__option[aria-disabled=true] { opacity:.45; cursor:not-allowed; }
.site-select__group { display:block; padding:10px 12px 4px; font-size:12px; color:var(--bp-muted); font-weight:700; }
.site-select__status { display:block; flex:0 0 auto; padding:8px 12px 2px; color:var(--bp-muted); font-size:12px; line-height:1.5; }
.max-pagination label { display:flex; align-items:center; gap:8px; }
.max-pagination .site-select { width:85px; }
.hi-table .site-select { min-width:160px; }
.max-dialog label > .site-select { margin-top:8px; }
@media(prefers-reduced-motion:reduce) { .site-select__trigger > svg { transition:none; } }
/* Пункт, закрытый по доступу (data-locked у option): замок слева, пункт приглушён (как недоступный) */
.site-select__option--locked { padding-left:32px; }
.site-select__option--locked::before { content:""; position:absolute; left:12px; top:50%; width:12px; height:12px; margin-top:-6px; background:var(--text-purple); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Короткий список без поиска (select[data-no-search]): поле поиска и «Найдено» — только для клавиатуры и диктора */
/* Список без поиска (data-no-search): поле поиска и «Найдено» спрятаны зрительно. Селектор поля — той же
   силы, что правило его размера выше (.site-select .site-select__panel > input.site-select__search), и стоит
   позже, иначе поле оставалось шириной с панель и давало горизонтальную прокрутку (0.93.8) */
.site-select--plain .site-select__panel > input.site-select__search, .site-select--plain .site-select__status { position:absolute; width:1px; height:1px; min-height:0; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; white-space:nowrap; }

/* --- site/css/datool.css --- */
/*
 * Дополнения сайта к вёрстке (static/site/css/ — копии из ai-code-html): то,
 * чего в макете нет, но без чего сайт не работает. Подключается последним в
 * templates/site/layout/base.html. Цвета — переменные вёрстки (base.css,
 * source.css), поэтому тёмная тема работает сама.
 */

/* Меню «Кабинет» шапки вошедшего (account_menu.html) — вариант 7 «компактное»
   (выбор пользователя из 9 вариантов, 15.10.2026): значки 16 px (0.105.4), шрифт 14 px,
   ширина 250 px, строки ниже, чем у меню вёрстки (source.css, .user-menu a —
   15 px и 11/13 px отступы). Меню гостя («Авторизация», «Регистрация») — прежнее. */
.user-menu--compact {
    min-width: 250px;
    max-width: 300px;
    padding: 6px;
}
.user-menu--compact a,
.user-menu--compact .user-menu__org {
    gap: 8px;
    padding: 7px 10px;
    font-size: 14px;
}
/* «Баланс» — обычный пункт со ссылкой на страницу баланса: в вёрстке у строки
   наведение было выключено (выглядела надписью), теперь подсвечивается, как
   остальные пункты; сумма — справа, под строкой — черта. Скругление снизу
   убрано, чтобы подсветка не «отрывалась» от черты. */
.user-menu--compact a.user-menu__balance {
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--line);
    border-radius: var(--border-radius-m, 8px) var(--border-radius-m, 8px) 0 0;
    color: var(--bp-muted);
    font-size: 14px;
}
.user-menu--compact a.user-menu__balance:hover { background: var(--bp-hover); color: var(--text-purple); }
/* Сумма прижата вправо: слева значок и «Баланс» */
.user-menu--compact .user-menu__balance strong { margin-left: auto; font-size: 15px; }
/* Значки пунктов (0.105.4, просьба пользователя 15.10.2026: без них «скучно»):
   Bootstrap Icons 16 px вместо 18 px меню вёрстки — под шрифт 14 px; серые,
   чтобы не спорить с текстом, при наведении — цветом текста пункта. У «Моё в
   MAX» значок цветом бренда, как и подпись. */
.user-menu--compact a svg.user-menu__icon {
    width: 16px;
    height: 16px;
    color: var(--bp-muted, #8a8a99);
    transition: color .14s var(--ease);
}
.user-menu--compact a:hover svg.user-menu__icon,
.user-menu--compact a.user-menu__project svg.user-menu__icon { color: currentColor; }
/* Заголовок «Организация» и «Выйти» отделены чертой сверху — как в макете
   варианта 7 (черта перед списком организаций и перед «Выйти») */
.user-menu--compact .user-menu__heading,
.user-menu--compact a.user-menu__logout {
    position: relative;
    margin-top: 9px;
}
.user-menu--compact .user-menu__heading::before,
.user-menu--compact a.user-menu__logout::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -5px;
    height: 1px;
    background: var(--line);
}
/* Подпись группы: 10 px жирным, прописными, разрядка .08em, серая (просьба
   пользователя 15.10.2026); отступ слева — внутренним полем, чтобы черта над
   подписью шла на всю ширину пунктов */
.user-menu__heading {
    margin: 4px 0 2px;
    padding: 4px 10px 0;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bp-muted, #8a8a99);
}
.user-menu__form { margin: 0; }
/* Организация — кнопка формы (переключение — POST с CSRF), выглядит как пункт
   меню: шрифт и цвет ссылок меню, без рамки и фона кнопки */
.user-menu__org {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    border-radius: var(--border-radius-m, 8px);
    background: none;
    text-align: left;
    font-family: inherit;
    font-weight: 400;
    line-height: inherit;
    color: var(--bp-ink-2);
    cursor: pointer;
}
.user-menu__org:hover { background: var(--bp-hover); color: var(--text-purple); }
/* Точка слева от названия: серая у остальных, фиолетовая у текущей
   (вариант 7 — вместо фото и логотипов, решение пользователя 15.10.2026) */
/* Поля по 4 px с боков: точка занимает 16 px, как значок пункта, — названия
   организаций начинаются на одной линии с подписями пунктов (0.105.4) */
.user-menu__dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    border-radius: 50%;
    background: var(--line);
}
.user-menu__org.is-current .user-menu__dot { background: var(--brand, #6047f1); }
.user-menu__org.is-current { font-weight: 700; color: var(--brand, #6047f1); }
/* Архивная организация владельца (0.135.0) — тусклая, в конце списка */
.user-menu__org.is-archived { opacity: .5; }
/* «личная» — серым мелким, без жирного и без цвета бренда у текущей */
.user-menu__org small { font-size: 12px; font-weight: 400; color: var(--bp-muted, #8a8a99); }
/* Телефон (0.105.2): меню привязано к правому краю кнопки «Кабинет», а она
   на узком экране стоит левее значков «+», поиска и бургера — меню уезжало
   за левый край экрана (на 400 px — на 19 px). Без position у обёртки меню
   выравнивается по правому краю плашки шапки (.header, position: relative). */
@media (max-width: 600px) {
    .user-wrap { position: static; }
}

/* Содержимое старых страниц (Tailwind: главная-заготовка, «скоро», страницы
   управления почтой и паролем в кабинете) внутри оболочки вёрстки */
.dt-legacy { padding: 24px 0 48px; }
.hi-cabinet .dt-legacy { padding-top: 0; }

/* Кабинет (templates/hi/): чего нет в макете ai-code-html/hi.datool.ru.
   1. Организации в меню «Профили аккаунта» — кнопки форм (переключение —
      POST с CSRF), а в макете это ссылки: убираем у кнопки рамку и фон. */
.hi-identity__menu form { margin: 0; }
.hi-identity__menu button.hi-identity__profile {
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
/* 2. Кнопки-ссылки в таблицах и карточках («Отключить», «Отменить», «Отозвать») —
      внутри форм, выглядят как .auth-link макета. */
.hi-cabinet form.hi-inline { display: inline; margin: 0; }
.hi-cabinet button.auth-link { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; }
.hi-cabinet button.auth-link.is-danger { color: var(--text-red); }
/* 3. Выбор роли участника: без скрипта рядом видна кнопка «Сохранить»,
      со скриптом она прячется (hidden), а роль сохраняется сразу после
      подтверждения (cabinet.js). */
.hi-role-form { display: flex; align-items: center; gap: 10px; margin: 0; }
/* Список ролей с поиском (site-select.js) — по ширине самого длинного «Администратор» */
.hi-role-form .site-select { min-width: 190px; }
/* 4. Недоступная пока форма (реквизиты, уведомления): видно, что будет, но
      ввести нельзя. */
.hi-cabinet fieldset.hi-disabled { margin: 0; padding: 0; border: 0; min-width: 0; opacity: .6; }
/* 5. Новый ключ API и ссылка приглашения: кнопка «Скопировать» рядом с кодом. */
.hi-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.hi-row-hint code { overflow-wrap: anywhere; }
/* 6. Сообщения о результате действия под вкладками (hi/cabinet/messages.html). */
.hi-messages { display: grid; gap: 8px; margin: -8px 0 20px; }
.hi-messages .hi-status:not(:empty) { margin-top: 0; }
/* 7. Ошибки полей форм кабинета. */
.hi-field-error { margin: 6px 0 0; color: var(--text-red); font-size: 13px; }

/* Подвал прижат к низу окна: на коротких страницах (вход, «Проверьте почту»)
   под подвалом не остаётся пустой полосы. Страница — колонка не ниже окна,
   main забирает всё свободное место. width: 100% — у main вёрстки ширина
   задана через .wrap (max-width и margin: auto), и без неё элемент колонки
   сжался бы до ширины содержимого. 100dvh — высота окна на телефоне с учётом
   панели браузера (100vh — запасной вариант для старых браузеров). */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
body > main {
    flex: 1 0 auto;
    width: 100%;
}
body > .footer { flex-shrink: 0; }

/* Карточка канала (templates/max/channel/): чего нет в макете channel.html.
   1. Лента публикаций без счётчика репостов (MAX его не сообщает): в макете
      цвета задавались порядковым номером (реакции — вторые), у нас — классами. */
.publication-footer .publication-stats .publication-stat--reactions { color: #cf4965; font-weight: 600; }
.publication-footer .publication-stats .publication-stat--views,
.publication-footer .publication-stats .publication-stat--views svg { color: var(--bp-muted); font-weight: 400; }
/* 2. Аватар канала картинкой в шапке карточки публикации (в макете — инициалы). */
.publication-channel-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* 3. Пустая лента и отметка рекламного поста. */
.publication-empty { margin: 24px 0 8px; color: var(--bp-muted); font-size: 15px; line-height: 1.5; }
.publication-ad { margin: 6px 0 0; color: var(--bp-muted); font-size: 12px; }
/* 4. Кнопка «Подтвердить владение» в панели состояния — кнопка, а не ссылка, как в макете. */
.sf-channel-state button.auth-submit { cursor: pointer; font: inherit; font-weight: 700; }
/* 5. Карточка поста как в MAX: сетка вложений сверху (стили сетки —
      templates/max/includes/media_grid_styles.html), под ней полный текст с
      разметкой MAX. */
/* Между сеткой картинок и текстом — воздух (пользователь: «всё очень близко») */
.publication-gallery { margin: 14px 0 20px; }
.publication-gallery + .publication-content { margin-top: 0; }
.publication-gallery .dt-grid { max-width: 100%; }
.publication-text { margin: 0; color: var(--bp-ink-2); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.publication-text a { color: var(--text-purple); text-decoration: underline; text-underline-offset: 2px; }
.publication-text b { color: var(--bp-ink); }
.publication-text code { padding: 1px 5px; border-radius: 5px; background: var(--bp-surface-2); font-size: 14px; }
.publication-text pre { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: var(--bp-surface-2); font-size: 13px; white-space: pre-wrap; }
.publication-text blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--brand); background: var(--bp-hover); border-radius: 0 8px 8px 0; }
.publication-text--empty { color: var(--bp-muted); font-style: italic; }
.publication-forward { margin: 0 0 8px; color: var(--bp-muted); font-size: 13px; }
.publication-forward a { color: var(--text-purple); }
/* Ссылки в тексте поста и в строке «Переслано из» при наведении (решение пользователя
   03.10.2026): в светлой теме — красный цвета темы, в тёмной — жёлтый #fc0, как у
   «Сообщить о неточности». Действует и в ленте канала, и на странице публикации. */
.publication-text a:hover, .publication-forward a:hover { color: var(--text-red); }
[data-bs-theme=dark] .publication-text a:hover, [data-bs-theme=dark] .publication-forward a:hover { color: #fc0; }
@media (max-width: 680px) { .publication-text { font-size: 14px; } }
/* 5а. Вложения поста, которые не картинки (0.78.0, templates/max/includes/post_extras.html):
      стикер, опрос, геолокация, контакт и кнопки-ссылки — под текстом поста.
      Опрос — карточка с вопросом и вариантами без процентов (голосов по вариантам
      у нас нет), кнопки — как в MAX: во всю ширину ряда, рядом по несколько. */
.sf-post-extras { display: grid; gap: 12px; margin: 14px 0 0; }
.sf-post-extras:first-child { margin-top: 0; }
.sf-post-sticker { display: block; width: 140px; height: auto; max-width: 100%; }
.sf-post-poll { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bp-surface-2); }
.sf-post-poll__kind { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--bp-muted); font-size: 13px; }
.sf-post-poll__kind svg { flex: none; width: 1em; height: 1em; }
.sf-post-poll__title { margin: 0 0 10px; color: var(--bp-ink); font-size: 16px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.sf-post-poll__answers { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sf-post-poll__answers li { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bp-surface, #fff); color: var(--bp-ink-2); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.sf-post-poll__total { margin: 10px 0 0; color: var(--bp-muted); font-size: 13px; line-height: 1.4; }
.sf-post-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; color: var(--bp-ink-2); font-size: 14px; }
.sf-post-chip svg { flex: none; width: 1em; height: 1em; color: var(--bp-muted); }
.sf-post-chip a { color: var(--text-purple); text-decoration: underline; text-underline-offset: 2px; }
.sf-post-buttons { display: grid; gap: 6px; }
.sf-post-buttons__row { display: flex; gap: 6px; }
.sf-post-button { flex: 1 1 0; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bp-hover); color: var(--text-purple); font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-post-button:hover, .sf-post-chip a:hover { color: var(--text-red); }
[data-bs-theme=dark] .sf-post-button:hover, [data-bs-theme=dark] .sf-post-chip a:hover { color: #fc0; }
[data-bs-theme=dark] .sf-post-poll__answers li { background: transparent; }
/* 6. Ожидание ответа HTMX: панель приглушается, «Загрузка…» с кружком (у ленты канала — над
   первой публикацией поверх ленты, она сама не приглушается — channel.css). */
.posts-loading { display: none; align-items: center; gap: 10px; grid-column: 1 / -1; margin: -8px 0 12px; color: var(--bp-muted); font-size: 14px; }
.posts-loading i { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: dt-spin .8s linear infinite; }
#posts.htmx-request .posts-loading { display: flex; }
#posts.htmx-request .posts-summary, #posts.htmx-request .publication-feed > :not(.posts-loading-slot) { opacity: .45; pointer-events: none; transition: opacity .2s; }
.publication-load-more.htmx-request { opacity: .6; pointer-events: none; }
@keyframes dt-spin { to { transform: rotate(360deg); } }
/* 7. Просмотр картинок — static/site/css/gallery.css (общий с админкой). */
/* 8. Страница публикации (templates/max/post.html, стили макета — post.css): пост слева карточкой ленты. */
.sf-post .publication { padding: 0; border: 0; }
.sf-post .publication-content { margin-top: 16px; }
.sf-post .publication-text { font-size: 17px; line-height: 1.4; }
/* Цитата и блок кода — без внешних отступов: пустую строку до и после них ставит сам
   текст (post_render._trim_block_breaks, решение пользователя 03.10.2026) */
.publication-text blockquote, .publication-text pre { margin: 0; }
/* Шапка поста плотнее: раньше между датой и вложением складывались три отступа
   (~58px: низ даты 14, низ шапки 24, верх галереи 20) — теперь 14px */
.sf-post .sf-post-header { margin-bottom: 14px; }
.sf-post .sf-post-header time { margin-bottom: 0; }
.sf-post .sf-post-header .publication-forward { margin: 6px 0 0; }
.sf-post .publication-gallery { margin: 0 0 16px; }
/* Дата и время над постом: значок часов высотой с текст (1em) и по центру строки */
.sf-post-header .sf-post-date { display: inline-flex; align-items: center; gap: 6px; }
.sf-post-header .sf-post-date svg { flex: 0 0 1em; width: 1em; height: 1em; }
/* Одно вложение (фото или видео) — по центру: ширина по его пропорциям, не больше
   ряда; высота не выше предела сетки (520px), поэтому вертикальное фото видно
   целиком, а не подрезано. Сама сетка не меняется (утверждена). */
.sf-post .publication-gallery .dt-grid:has(> .dt-row.dt-row--single:only-of-type) .dt-tile { flex: 0 1 auto; width: min(100%, calc(520px * var(--r, 1))); margin-inline: auto; }
/* Цифры карточки канала (решение пользователя 03.10.2026): подпись крупнее и плотнее, число ближе к ней,
   линия только сверху блока */
.sf-channel-summary__metrics { border-block: 0; border-top: 1px solid var(--line); }
.sf-channel-summary__metrics dt { font-size: 14px; line-height: 1; }
.sf-channel-summary__metrics dd { margin-top: 4px; }
/* 9. Страница публикации: строка показателей под текстом (решение 03.10.2026) —
   просмотры, всего реакций, реакции по видам. Все элементы одной высоты (32px),
   значки 16px по центру; курсор над числами обычный — это не кнопки. Без подписки реакции по видам — размытые заглушки,
   весь блок — ссылка на тарифы. Ниже — кнопки действий, отметки канала в карточке. */
.sf-post-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 0; }
.sf-post-metric, .sf-post-metrics .sf-reaction { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; font-size: 14px; font-weight: 400; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: default; }
.sf-post-metric svg { flex: 0 0 16px; width: 16px; height: 16px; }
.sf-post-metric--views { padding-left: 0; color: var(--bp-muted); }
.sf-post-metric--views svg { color: var(--bp-muted); }
.sf-post-metric--likes { border: 1px solid #f3c4cf; background: #fdf0f3; color: #cf4965; }
.sf-post-metrics .sf-reaction { margin: 0; background: var(--bp-surface-2); color: var(--bp-ink); }
.sf-post-reactions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sf-post-reactions--locked { text-decoration: none; cursor: pointer; }
.sf-post-reactions--locked .sf-reaction { filter: blur(4px); user-select: none; cursor: pointer; }
.sf-post-reactions--locked:hover .sf-reaction { filter: blur(3px); background: var(--bp-hover); }
[data-bs-theme=dark] .sf-post-metric--likes { border-color: #6b2a3a; background: #3a1c24; color: #f08aa0; }
/* Кнопки действий — 36px по высоте (решение пользователя 08.10.2026), в ленте и на странице поста одинаково */
.sf-post .sf-post-actions { gap: 10px 12px; padding-top: 20px; margin-top: 20px; }
.sf-post .sf-post-actions .auth-secondary, .sf-post .sf-post-actions .cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 10px; font-size: 14px; line-height: 1.3; white-space: nowrap; }
.sf-post .sf-post-actions .auth-secondary { border: 1px solid var(--line); background: var(--bp-surface); color: var(--bp-ink-2); font: inherit; font-size: 14px; cursor: pointer; }
.sf-post .sf-post-actions .auth-secondary:hover { border-color: var(--text-purple); color: var(--text-purple); }
.sf-post .sf-post-actions .cta { color: #fff; }
.sf-post .sf-post-actions .cta svg { flex: 0 0 auto; fill: currentColor; }
.sf-post .sf-post-actions .sf-post-copy.is-copied { border-color: var(--color-green-4); color: var(--color-green-4); }
.sf-post .sf-post-actions .sf-post-report { margin-left: auto; font-size: 14px; text-decoration: none; }
.sf-post .sf-post-actions .sf-post-report:hover { text-decoration: underline; text-underline-offset: 3px; }
/* В тёмной теме при наведении — жёлтый (#fc0), как просил пользователь */
[data-bs-theme=dark] .sf-post .sf-post-actions .sf-post-report:hover { color: #fc0; }
.sf-post .sf-post-copy svg { flex: 0 0 16px; }
.sf-channel-summary__badges { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle; }
.sf-channel-summary__badges .channel-verified, .sf-channel-summary__badges .channel-bot-rating { display: inline-flex; width: 20px; height: 20px; margin: 0; padding: 0; border: 0; background: transparent; cursor: help; }
.sf-channel-summary__badges svg { display: block; width: 20px; height: 20px; }
@media (max-width: 600px) { .sf-post .sf-post-actions .sf-post-report { margin-left: 0; } }
/* На телефоне текст поста чуть мельче: 16px */
@media (max-width: 680px) { .sf-post .publication-text { font-size: 16px; } }
/* 10. «Статистика канала за месяц» в боковой карточке поста: три блока столбиком, графики общие с лентой. */
.sf-post-aside .sf-channel-stats { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 20px; }
.sf-post-aside .sf-channel-stats article { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bp-surface); }
.sf-post-aside .sf-channel-stats article > span { font-size: 12px; }
.sf-post-aside .sf-channel-stats strong { font-size: 22px; }
@media (max-width: 992px) { .sf-post-aside .sf-channel-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .sf-post-aside .sf-channel-stats { grid-template-columns: 1fr; } }
/* 11. Каталог каналов: пока только поиск — поле и кнопка в одну строку. */
.sf-filters--search { grid-template-columns: minmax(0, 1fr) auto; }
.sf-avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.sf-avatar { overflow: hidden; }
@media (max-width: 760px) { .sf-filters--search { grid-template-columns: minmax(0, 1fr); } }
/* 12. Карточка канала на странице поста: цифры за всё время и компактная кнопка «Аналитика канала». */
.sf-post-aside .sf-channel-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 18px 0 0 0; margin: 0; }
.sf-post-aside .sf-channel-totals dd { font-size: 22px; }
.sf-post-aside .sf-channel-totals dd small { display: block; margin-top: 0; color: var(--bp-muted); font-size: 12px; font-weight: normal; line-height: 1.4; }
.sf-post-aside .sf-channel-summary__link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; margin-top: 4px; padding: 9px 16px; border: 1px solid var(--brand); border-radius: 10px; background: var(--bp-hover); color: var(--text-purple); font-size: 14px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: background .15s, color .15s; }
.sf-post-aside .sf-channel-summary__link:hover { background: var(--brand); color: #fff; }
.sf-post-aside .sf-channel-summary__link svg { flex: 0 0 auto; }
/* 13. Окно «Сообщить о неточности»: крестик без обводки, «Спасибо!» жирным, контакты внизу. */
.sf-report-dialog .sf-report-dialog__close { border: 0; background: transparent; color: var(--bp-muted); }
.sf-report-dialog .sf-report-dialog__close:hover { color: var(--text-purple); background: var(--bp-hover); }
.sf-report-dialog .sf-form-status--done { font-size: 16px; line-height: 1.6; }
.sf-report-dialog .sf-form-status--done strong { display: block; margin-bottom: 4px; font-size: 20px; color: var(--bp-ink); }
.sf-report-dialog__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--bp-muted); font-size: 13px; }
.sf-report-dialog__foot p { margin: 0; }
.sf-report-dialog__foot a { color: var(--text-purple); }
.sf-report-dialog__foot .footer__socials { display: flex; gap: 8px; }
.sf-report-dialog__foot .footer__social-link { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bp-hover); color: var(--bp-ink-2); }
.sf-report-dialog__foot .footer__social-link:hover { color: var(--text-purple); }
.sf-report-dialog__foot .footer__social-link svg { width: 18px; height: 18px; }
.sf-report-dialog .sf-report-captcha { min-height: 100px; }
/* 14. Блок «Статистика» на странице поста: прирост подписчиков цветом. */
.sf-post-aside .sf-channel-totals dd small.is-up { color: var(--color-green-4); }
.sf-post-aside .sf-channel-totals dd small.is-down { color: #c63c4b; }
.sf-post-aside .sf-channel-totals { margin-bottom: 18px; }
/* 15. Подсказки в окне поиска шапки (static/site/js/search_suggest.js, templates/max/search_suggest.html):
   список каналов под строкой поиска. Стили аватара — свои: стили каталога (storefront.css) есть не на всех страницах. */
.bp-search-suggest { margin-top: 14px; }
/* Колонка сетки — minmax(0, 1fr): иначе длинное название (nowrap) растягивает её
   шире окна и появляется горизонтальная прокрутка вместо многоточия (06.10.2026) */
.bp-search-suggest__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; max-height: min(420px, 50vh); margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; list-style: none; }
.bp-search-suggest__list > li { min-width: 0; }
.bp-search-suggest__item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 10px; border-radius: 12px; color: var(--bp-ink); text-decoration: none; }
.bp-search-suggest__item:hover, .bp-search-suggest__item:focus-visible { background: var(--bp-hover); outline: none; }
.bp-search-suggest__item:hover strong, .bp-search-suggest__item:focus-visible strong { color: var(--text-purple); }
/* Аватар канала — круг (border-radius: 50%), как на странице канала (просьба пользователя 13.10.2026). */
.bp-search-suggest__avatar { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--bp-hover); color: var(--text-purple); font-size: 15px; font-weight: 700; }
.bp-search-suggest__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bp-search-suggest__text { flex: 1 1 auto; min-width: 0; }
.bp-search-suggest__text strong { display: block; overflow: hidden; font-size: 16px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.bp-search-suggest__text small { display: block; margin-top: 2px; overflow: hidden; color: var(--bp-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.bp-search-suggest__all { display: inline-flex; gap: 6px; margin: 10px 10px 0; color: var(--text-purple); font-size: 14px; font-weight: 700; }
.bp-search-suggest__empty { margin: 0; padding: 8px 10px; color: var(--bp-muted); font-size: 14px; line-height: 1.5; }
/* 16. Боковая карточка канала на странице поста прокручивается сама (post.css: sticky +
   overflow-y: auto), а при такой прокрутке браузер включает и горизонтальную. Длинная
   ссылка без пробелов в описании канала (gosuslugi.ru/…) вылезала за край и давала
   горизонтальную полосу — переносим её, а лишнее по ширине обрезаем. Обрезка — только
   там, где карточка прилипает (шире 992 px): на узком экране post.css делает её обычным
   блоком, и overflow-x: hidden превратил бы его в окно с прокруткой. */
/* Межстрочный интервал описания канала — 1,4 (решение пользователя 03.10.2026). */
.sf-post-aside .sf-channel-summary__description { overflow-wrap: anywhere; line-height: 1.4; }
@media (min-width: 993px) { [data-storefront-page="post"] .sf-post-aside { overflow-x: hidden; } }
/* 15. Платные цифры на странице поста без подписки: размытые заглушки и замок по центру; блок — ссылка на тарифы. */
.sf-channel-locked { position: relative; display: block; margin: 14px 0 18px; border-radius: 12px; color: inherit; text-decoration: none; }
.sf-post-aside .sf-channel-locked .sf-channel-totals--locked { margin: 0; padding: 0; border-top: 0; filter: blur(5px); user-select: none; pointer-events: none; }
.sf-channel-locked__badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sf-channel-locked__pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--bp-surface); box-shadow: 0 6px 20px rgba(32, 39, 58, .16); color: var(--text-purple); font-size: 14px; font-weight: 700; line-height: 1.2; transition: background .15s, color .15s; }
/* Значку нужны явные width/height, а не только flex-basis: WebKit (Safari на iPhone) не учитывает flex-basis
   при расчёте ширины таблетки, и она выходила на 16 px уже — текст упирался в правый край (замечание пользователя 14.10.2026) */
.sf-channel-locked__pill svg { flex: none; width: 16px; height: 16px; }
.sf-channel-locked:hover .sf-channel-locked__pill, .sf-channel-locked:focus-visible .sf-channel-locked__pill { background: var(--brand); color: #fff; }
.sf-channel-locked:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
/* 17. Шрифт PT Sans везде (решение пользователя 03.10.2026). Копии макета
   наследуют шрифт у кнопок, полей и списков, но не у многострочных полей
   (textarea): без правила браузер рисует их своим шрифтом, часто моноширинным
   (форма «Сообщить о неточности», поля allauth). Кнопки периода в макете
   (page.css) заданы шрифтом Arial — переводим их на общий шрифт сайта. */
textarea { font: inherit; color: inherit; }
.period-tabs button { font-family: var(--font-family); }
/* 18. Описание канала как в MAX: переносы строк и ссылки (max_text.channel_description).
   Ссылки фирменного цвета с подчёркиванием; длинный адрес переносится, а не
   распирает карточку. */
.sf-channel-summary__description a, .channel-description a { color: var(--text-purple); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.sf-channel-summary__description a:hover, .channel-description a:hover { text-decoration: none; }
/* 19. Окно «Вы покидаете datool.ru» (site/layout/leave_dialog.html, site/js/leave_site.js).
   Стили свои, полностью здесь: окно есть на всех страницах, а стили окна
   обращения и кнопок входа подключаются не везде. Вид — как у окна
   «Сообщить о неточности»: карточка по центру, затемнённый фон. */
.sf-leave-dialog { width: min(520px, calc(100% - 32px)); margin: auto; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--bp-surface); color: var(--bp-ink); box-shadow: 0 24px 60px #1311272e; }
.sf-leave-dialog::backdrop { background: #13112780; }
.sf-leave-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.sf-leave-dialog__head h2 { margin: 0; padding-top: 5px; font-size: 24px; line-height: 1.2; }
.sf-leave-dialog__close { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--bp-muted); cursor: pointer; }
.sf-leave-dialog__close:hover { color: var(--text-purple); background: var(--bp-hover); }
.sf-leave-dialog__intro { margin: 0 0 18px; color: var(--bp-muted); font-size: 15px; line-height: 1.5; }
.sf-leave-dialog__url { display: grid; gap: 4px; margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--bp-surface-2); line-height: 1.4; }
.sf-leave-dialog__url span { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.sf-leave-dialog__url small { color: var(--bp-muted); font-size: 13px; overflow-wrap: anywhere; }
.sf-leave-dialog__timer { margin: 0 0 8px; color: var(--bp-muted); font-size: 14px; line-height: 1.4; }
.sf-leave-dialog__timer b { color: var(--bp-ink); font-variant-numeric: tabular-nums; }
.sf-leave-dialog__progress { height: 4px; margin: 0 0 22px; border-radius: 4px; background: var(--line); overflow: hidden; }
.sf-leave-dialog__progress span { display: block; width: 100%; height: 100%; background: var(--brand); transform-origin: left center; }
.sf-leave-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sf-leave-dialog__go, .sf-leave-dialog__stay { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 16px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.sf-leave-dialog__go { border: 1px solid transparent; background: var(--brand); color: #fff; }
.sf-leave-dialog__go:hover { background: var(--brand-dark); color: #fff; }
.sf-leave-dialog__stay { border: 1px solid var(--line); background: var(--bp-surface); color: var(--bp-ink); }
.sf-leave-dialog__stay:hover { border-color: var(--text-purple); color: var(--text-purple); }
.sf-leave-dialog :is(a, button):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (max-width: 520px) { .sf-leave-dialog { padding: 22px 18px; } .sf-leave-dialog__head h2 { font-size: 21px; } .sf-leave-dialog__actions { grid-template-columns: 1fr; } }
/* 20. Кнопки сотрудников «РЕД.» и «АДМ.» (site/layout/admin_jump.html): столбик у
   левого края по центру окна, не прокручивается вместе со страницей; «РЕД.»
   сверху, «АДМ.» под ней; выше шапки и содержимого, но ниже открытых окон
   (<dialog> — свой верхний слой). Цвет — тёмный графит с белой подписью
   (решение пользователя 10.10.2026: белая с фиолетовым — некрасиво); при
   наведении плавно светлеет (без резкой смены на фиолетовый). Цвета — в
   переменных --aj-*: в тёмной теме графит светлее и рамка заметнее, иначе
   кнопка сливается с тёмным фоном. Фиолетовый остаётся только у рамки фокуса
   с клавиатуры. */
.sf-admin-jump { --aj-bg: var(--color-grafit-2); --aj-bg-hover: var(--color-grafit-3); --aj-border: var(--color-grafit-3); --aj-border-hover: #55585c; position: fixed; left: 0; top: 50%; z-index: 900; transform: translateY(-50%); display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
[data-bs-theme=dark] .sf-admin-jump { --aj-bg: var(--color-grafit-3); --aj-bg-hover: #4d5054; --aj-border: #55585c; --aj-border-hover: #6b6e73; }
.sf-admin-jump__link { text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px 10px 10px 8px; border: 1px solid var(--aj-border); border-left: 0; border-radius: 0 12px 12px 0; background: var(--aj-bg); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; box-shadow: 0 8px 24px #13112733; transition: background-color .15s ease, border-color .15s ease; }
.sf-admin-jump__link:hover { background: var(--aj-bg-hover); border-color: var(--aj-border-hover); color: #fff; }
.sf-admin-jump__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sf-admin-jump__link { transition: none; } }
@media print { .sf-admin-jump { display: none; } }
/* 21. Минимальная ширина сайта — 320px (решение пользователя 03.10.2026): уже 320
   страница не сжимается, а прокручивается вбок. В макете (page.css) на экранах уже
   360px стоит body{min-width:0} — этот файл подключается последним и перекрывает его. */
html, body { min-width: 320px; }
/* 22. Текстовая страница (text-page.css вёрстки) для методик в Markdown: в макете нет
      подзаголовков третьего уровня, таблиц и нумерованных списков — дополняем в
      том же духе (страница «Как считается индекс качества», apps/max/views/quality_index.py). */
.text-page__content h3 { margin: 26px 0 12px; font-size: 19px; line-height: 1.35; scroll-margin-top: 24px; }
.text-page__content ol { margin: 0 0 24px; padding-left: 24px; list-style: decimal; }
.text-page__content table { width: 100%; margin: 0 0 24px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.text-page__content th, .text-page__content td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.text-page__content th { background: var(--bp-surface-2); color: var(--bp-ink); font-weight: 600; }
@media (max-width: 680px) { .text-page__content table { display: block; overflow-x: auto; font-size: 14px; } }
/* 23. Индексы в карточке канала на странице поста (строки, «?», подсказки) — в
      post-indexes.css и quality-help.css; здесь правил больше нет. */

/* 24. Вход через MAX — страница ожидания (maxlogin/wait.html). Блок макета
      .auth-max-placeholder вместо значка телефона показывает QR-код ссылки в бота:
      квадрат на белом фоне (камера телефона плохо читает QR на тёмном); заливка —
      явно, потому что auth.css выключает её у значков (fill: none); код
      для ручной отправки боту — моноширинным крупным шрифтом. */
.max-login-qr .max-login-qr__code { display: block; width: 184px; height: 184px; padding: 6px; border-radius: 12px; background: #fff; }
.max-login-qr .max-login-qr__code svg, .max-login-qr .max-login-qr__code path { display: block; width: 100%; height: 100%; fill: #000; stroke: none; }
.max-login-code { margin: 0 0 20px; }
.max-login-code code { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 6px; background: var(--bp-hover); color: var(--bp-ink); font: 700 16px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; white-space: nowrap; }
#max-login-status form { margin: 0 0 4px; }

/* «Слежу» в «Моё в MAX» (templates/max/my/following*.html): чего нет в макете,
   где таблицу рисовал скрипт из демо-данных.
   1. Сортировка в заголовках — ссылки (сервер сортирует), а не кнопки скрипта:
      выглядят как текст заголовка.
   2. У канала есть настоящий аватар — картинка заполняет кружок с инициалами.
   3. Имя канала — ссылка на его страницу, без подчёркивания, как кнопка макета.
   4. Форма размера страницы внутри строки страниц — без своих отступов. */
.max-channel-table thead th a { color: inherit; text-decoration: none; }
.max-channel-table thead th a:hover { color: var(--text-purple); }
.max-avatar { overflow: hidden; }
.max-avatar img { width: 100%; height: 100%; object-fit: cover; }
a.max-channel-name { text-decoration: none; }
.max-pagination form { margin: 0; }

/* Подтверждение владельца (templates/max/channel/verify.html): чего нет в макете.
   1. Запасной путь «код в описании канала» — свёрнутый блок под действиями.
   2. Формы-кнопки в ряду действий стоят в одну линию со ссылками. */
.ownership-fallback { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.ownership-fallback summary { cursor: pointer; color: var(--text-purple); font-weight: 700; }
.ownership-fallback p { margin: 12px 0; }
.ownership-actions form { margin: 0; }
/* Логотип в подвале — по центру на телефоне на всех страницах. Вёрстка центрует
   его выравниванием текста (source.css, .footer__logo { text-align: center } на
   узком экране), а сброс стилей Tailwind (страницы на site/base.html: главная,
   «скоро») делает каждую картинку блочной — и логотип уезжал влево. Возвращаем
   картинке обычное строчное поведение, как на страницах без Tailwind. */
.footer__logo img { display: inline; }

/* Правка категорий и территории владельцем — с 0.107.0 в отдельном файле
   owner-taxonomy.css: он подключается только на странице правки и владельцу
   на странице канала, а этот файл — на каждой странице. */

/* Вкладка «Баланс» кабинета (hi/balance.html, 0.56.0): постраничный переход под
   историей операций. Правила баланса (.hi-balance-rules) с 0.138.3 — только в
   cabinet.css: здесь было второе, расходящееся с ним описание того же списка. */
.hi-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 0; font-size: 14px; }
/* Сводка заказа: остаток баланса и кнопка «Оплатить с баланса» над онлайн-оплатой */
.plans-balance { margin: 0 0 12px; }
.plans-balance form { margin: 0 0 8px; }

/* «Моё в MAX» в меню «Кабинет» шапки и в мобильной панели (account_menu.html,
   account_mobile.html): пункт стоит последним среди ссылок, перед
   «Организацией»; текст — цветом бренда, справа маленькая метка проекта «MAX»
   (15.10.2026). Когда появятся витрины Дзена и VK, их пункты встанут сюда же
   со своей меткой. В компактном меню шапки (вариант 7) черты над пунктом нет —
   как в макете; в мобильной панели она осталась (вариант 6, ниже). */
.user-menu a.user-menu__project {
    font-weight: 700;
    color: var(--brand, #6047f1);
}
.user-menu__tag {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--color-purple-4, #4126ba);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .04em;
}
/* В мобильной панели пункты уже «растянуты» (justify-content: space-between),
   метка и так встаёт к правому краю; черта — как в меню шапки. */
.mobile-account__panel a.mobile-account__project {
    position: relative;
    margin-top: 6px;
    font-weight: 600;
    color: var(--brand, #6047f1);
}
.mobile-account__panel a.mobile-account__project::before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: -4px;
    height: 1px;
    background: var(--line);
}

/* --- site/css/fields.css --- */
/* Единый стиль полей ввода на всём сайте (вариант 8 «как поиск в шапке, плюс кольцо
   в фокусе», выбор пользователя из 12 вариантов, 15.10.2026, 0.103.0).

   Зачем один файл. До этого каждая форма задавала поля сама: кабинет — серые 44 px,
   личные данные — 40 px, промокод — 36 px, вход — 48 px, «Моё в MAX» — белые 44 px,
   окно неточности — 40 px. Поля в одной карточке были разной высоты, а серая
   заливка #ecedee выглядела как выключенное поле. Теперь все текстовые поля, списки
   и многострочные поля берут вид отсюда, а файлы страниц оставляют себе только
   раскладку (ширина, место в сетке, отступы).

   Как выглядит (повторяет поле поиска в шапке, header.css):
   - покой: заливка цвета фона страницы (--bs-body-bg: #f7f7f8, в тёмной теме
     графитовая), рамка прозрачная, радиус 10 px, высота 36 px — ровно как у кнопок
     кабинета (.hi-cabinet .auth-submit), шрифт 15 px;
   - наведение: рамка серая (--line);
   - фокус: поле белеет (--bp-surface), рамка цвета бренда и кольцо 3 px при 12 %
     бренда, системная обводка снята. У раскрывающегося списка (.site-select) —
     то же самое и при фокусе, и пока список открыт (aria-expanded): поле и список
     в фокусе должны выглядеть одинаково (замечание пользователя 15.10.2026, 0.101.1);
   - ошибка (aria-invalid): рамка красная, в фокусе красное кольцо;
   - отключено: текст серый, курсор «нельзя», наведение не реагирует.
   Подписи полей — обычным начертанием, без жирного (замечание пользователя
   15.10.2026): правила font-weight в cabinet.css, auth.css, plans.css.

   Файл подключён в сборку site-tail (apps/core/static_bundles.py) последним,
   после site-select.css и datool.css: так его правила перекрывают и базовые
   правила макета (source.css: input, input:focus), и правила страниц той же силы.
   Область действия обёрнута в :where() — у неё нулевая сила, поэтому частные
   правила страниц с классом и элементом (ширина поля «Скидка другу», числа мест)
   остаются сильнее и задают только размеры по горизонтали.
   Поля поиска (шапка, главная, лента канала) и фильтры утверждённых вкладок
   канала сюда не входят — у них свой вид. */

/* Где действует: формы кабинета и таблицы hi., формы входа (allauth), оформление
   тарифа и доп. мест, «Моё в MAX» и его окна, окно «Сообщить о неточности», поля
   витрины (.sf-field), правка категорий владельцем, поле ссылки «Поделиться»,
   выбор организации на оформлении (.plans-org), сумма пополнения баланса
   (.topup-amount, 0.104.0). Поле поиска у списка без поиска
   (.site-select--plain) не трогаем — оно спрятано правилом site-select.css.
   Галочки, переключатели, ползунки, файлы и кнопки исключены — у них свой вид. */
:where(.hi-cabinet main form, .hi-table, .auth-field, .auth-form, .plans-promo, .seats-slider,
    .max-account, .max-dialog, [data-report-form], .sf-report-dialog, .sf-field,
    .owner-taxonomy, .sf-share-box, .plans-org, .topup-amount)
  :is(input:not([type=checkbox], [type=radio], [type=file], [type=hidden], [type=range],
      [type=submit], [type=button], [type=image], [type=color]), select, textarea),
.site-select > .site-select__trigger,
.site-select:not(.site-select--plain) .site-select__panel > input.site-select__search {
  display: block; width: 100%; min-width: 0; height: 36px; min-height: 36px;
  padding: 0 12px; border: 1px solid transparent; border-radius: 10px;
  background: var(--bs-body-bg); color: var(--bp-ink); box-shadow: none;
  font: inherit; font-size: 15px; font-weight: 400; line-height: 1.25;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
/* Наведение: показывается серая рамка. Не на отключённом и не поверх фокуса */
:where(.hi-cabinet main form, .hi-table, .auth-field, .auth-form, .plans-promo, .seats-slider,
    .max-account, .max-dialog, [data-report-form], .sf-report-dialog, .sf-field,
    .owner-taxonomy, .sf-share-box, .plans-org, .topup-amount)
  :is(input:not([type=checkbox], [type=radio], [type=file], [type=hidden], [type=range],
      [type=submit], [type=button], [type=image], [type=color]), select, textarea):hover:not(:disabled):not(:focus),
.site-select > .site-select__trigger:hover:not(:disabled):not(:focus),
.site-select:not(.site-select--plain) .site-select__panel > input.site-select__search:hover:not(:focus) {
  border-color: var(--line);
}
/* Фокус: белое поле, рамка бренда, кольцо. У списка — и в фокусе (в том числе по клику
   мышью: :focus, не :focus-visible), и пока он раскрыт */
:where(.hi-cabinet main form, .hi-table, .auth-field, .auth-form, .plans-promo, .seats-slider,
    .max-account, .max-dialog, [data-report-form], .sf-report-dialog, .sf-field,
    .owner-taxonomy, .sf-share-box, .plans-org, .topup-amount)
  :is(input:not([type=checkbox], [type=radio], [type=file], [type=hidden], [type=range],
      [type=submit], [type=button], [type=image], [type=color]), select, textarea):focus,
.site-select > .site-select__trigger:focus,
.site-select > .site-select__trigger[aria-expanded=true],
.site-select:not(.site-select--plain) .site-select__panel > input.site-select__search:focus {
  outline: 0; outline-offset: 0; border-color: var(--brand); background: var(--bp-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}
/* Ошибка: красная рамка; в фокусе — красное кольцо вместо фиолетового */
:where(.hi-cabinet main form, .hi-table, .auth-field, .auth-form, .plans-promo, .seats-slider,
    .max-account, .max-dialog, [data-report-form], .sf-report-dialog, .sf-field,
    .owner-taxonomy, .sf-share-box, .plans-org, .topup-amount)
  :is(input, select, textarea)[aria-invalid=true],
.site-select > .site-select__trigger[aria-invalid=true] {
  border-color: var(--text-red);
}
:where(.hi-cabinet main form, .hi-table, .auth-field, .auth-form, .plans-promo, .seats-slider,
    .max-account, .max-dialog, [data-report-form], .sf-report-dialog, .sf-field,
    .owner-taxonomy, .sf-share-box, .plans-org, .topup-amount)
  :is(input, select, textarea)[aria-invalid=true]:focus,
.site-select > .site-select__trigger[aria-invalid=true]:focus {
  border-color: var(--text-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-red) 14%, transparent);
}
/* Отключено: серый текст, без наведения. opacity из source.css (input:disabled) остаётся */
:where(.hi-cabinet main form, .hi-table, .auth-field, .auth-form, .plans-promo, .seats-slider,
    .max-account, .max-dialog, [data-report-form], .sf-report-dialog, .sf-field,
    .owner-taxonomy, .sf-share-box, .plans-org, .topup-amount)
  :is(input, select, textarea):disabled,
.site-select > .site-select__trigger:disabled {
  color: var(--bp-muted); border-color: transparent; cursor: not-allowed;
}
/* Подсказка в пустом поле — серым, без прозрачности Firefox */
:where(.hi-cabinet main form, .hi-table, .auth-field, .auth-form, .plans-promo, .seats-slider,
    .max-account, .max-dialog, [data-report-form], .sf-report-dialog, .sf-field,
    .owner-taxonomy, .sf-share-box, .plans-org, .topup-amount)
  :is(input, textarea)::placeholder,
.site-select:not(.site-select--plain) .site-select__panel > input.site-select__search::placeholder {
  color: var(--bp-muted); opacity: 1;
}
/* Многострочное поле: высота от содержимого, тянется только по вертикали */
:where(.hi-cabinet main form, .max-dialog, .sf-report-dialog, .sf-field, .owner-taxonomy) textarea {
  height: auto; min-height: 96px; padding: 7px 12px; line-height: 1.45; resize: vertical;
}
/* Нативный список: своя стрелка справа вместо системной (серая, под цвет подсказок);
   в тёмной теме — светлее. Цвет в data-URI переменной не задать, поэтому два правила */
:where(.hi-cabinet main form, .hi-table, .max-account, .max-dialog, [data-report-form], .owner-taxonomy, .plans-org) select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237a7e85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 14px 14px;
}
[data-bs-theme=dark] :where(.hi-cabinet main form, .hi-table, .max-account, .max-dialog, [data-report-form], .owner-taxonomy, .plans-org) select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a3a6ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
/* Список .site-select: кнопка-триггер — flex со стрелкой, текст слева */
.site-select > .site-select__trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; }
/* Поле поиска внутри раскрытого списка — с отступом снизу до пунктов */
.site-select:not(.site-select--plain) .site-select__panel > input.site-select__search { margin: 0 0 6px; }
@media (prefers-reduced-motion: reduce) {
  :where(.hi-cabinet main form, .hi-table, .auth-field, .auth-form, .plans-promo, .seats-slider,
      .max-account, .max-dialog, [data-report-form], .sf-report-dialog, .sf-field,
      .owner-taxonomy, .sf-share-box, .plans-org, .topup-amount) :is(input, select, textarea),
  .site-select > .site-select__trigger { transition: none; }
}