/* Мобильная версия — экраны до 768 px включительно.
   Подключается в layout.html.twig последним, после custom.css.
   Всё мобильное живёт только здесь, внутри одного медиазапроса;
   ПК-файлы (all.css, all-admin.css, custom.css) не трогаем.
   Образец приёмов — Sarafano: шапка 44 px, меню списком на весь экран
   (строки 60 px, последний пункт «Закрыть»), кнопки и поля не ниже 44 px,
   базовый кегль 16 px, попапы с полем 15–20 px от края. */

/* Вне медиазапроса — только защита атрибута hidden. Мобильные блоки размечаем
   им, но ПК-правило .row-6 { display: flex } (custom.css) как авторское бьёт
   браузерное [hidden] { display: none }, и блок протекал на ПК. Гасим явно;
   на телефоне такой ряд показывает правило внутри @media (специфичность выше). */
.row-6[hidden] {
    display: none;
}

@media screen and (max-width: 768px) {

    /* ================= 1. Замки ширины ПК-файлов ================= */
    body,
    body.m-admin,
    .m-admin,
    .l-page,
    .m-admin .l-page,
    .m-admin .container {
        min-width: 0;
        max-width: 100%;
    }

    body,
    body.m-admin {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        font-size: 16px;
        line-height: 1.4;
    }

    /* Серый фон — на html/body: под коротким содержимым (и ниже футера) та же
       серая подложка (фон корня закрашивает весь холст), без белой полосы.
       height:auto (перебиваем all.css height:100%) — документ высотой по
       содержимому: scrollHeight = низ футера, страницу НЕ растягиваем. */
    html,
    body,
    body.m-admin {
        height: auto;
        background: #EBEBEB;
    }

    .l-page {
        border: 0;                   /* ПК-рамка #A9A9A9 не наследуется: линии — у шапки и футера */
        min-height: 0;               /* НЕ растягиваем до низа экрана: серый даёт html/body */
        height: auto;
        display: block;
        z-index: auto;               /* иначе .l-page (z-index:1) режет контекст, и фиксированные листы прячутся под затемнение */
    }

    .container,
    .m-admin .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .l-page > .container {
        padding-bottom: 40px;        /* после последнего блока — обычный отступ 40, как шапка→первый блок */
    }

    /* ================= 2. Шапка (прилипает к верху) ================= */
    /* Название 16/20 (вес 500), подстрочник 14/16 одной строкой с многоточием,
       зазор между ними по глифам 7.8. Логотип — тем же приёмом, что на ПК
       (custom.css .hdr-logo): от верха прописных названия до БАЗОВОЙ ЛИНИИ
       подстрочника, хвосты «у», «р» свисают ниже: 30 px; верх логотипа на верхе
       прописных (сдвиг 4.8). Кнопка меню — файл владельца menu.svg (40×40,
       три полосы со скруглёнными концами), видимая часть 24 px (≈ 80 % логотипа),
       тап-зона 44×44, центр на центре логотипа. */
    .l-header {
        position: sticky;
        top: 0;
        z-index: 60;                 /* выше футера (50): затемнение меню лежит внутри контекста шапки */
        margin: 0 -12px 0;
        background: #fff;
    }

    .hdr-top {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        margin: 0;
        padding: 8px 12px 8px 12px;
        min-height: 44px;
        border-bottom: 1px solid #e1e1e1;
    }

    .hdr-lft {
        float: none;
        display: flex;
        align-items: flex-start;
        flex: 1 1 0;
        min-width: 0;
        height: auto;
    }

    /* На мобильном логотип и название — не ссылки */
    .hdr-logo,
    .hdr-lft h1 a {
        pointer-events: none;
        cursor: default;
    }

    .hdr-logo {
        width: 30px;
        height: 30px;
        margin: 4.8px 10px 0 0;
        flex: none;
    }

    .hdr-ttl {
        min-width: 0;
    }

    .hdr-lft h1 {
        margin: 0;
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
        letter-spacing: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hdr-lft h2 {
        display: block;
        margin: 1.8px 0 0 0;
        font-size: 14px;
        line-height: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Телефон в мобильной шапке не показывается — он в модуле «Контакты» главной */
    .hdr-phone {
        display: none;
    }

    /* Кнопка меню: menu.svg 24×24 видимой части, тап-зона 44×44, центр на центре логотипа */
    .mob-menu-btn[hidden] {
        display: flex;
    }

    .mob-menu-btn {
        order: 2;
        flex: none;
        width: 44px;
        height: 44px;
        margin: -2.2px -7px 0 4px;    /* центр кнопки = 4.8 + 15 = 19.8; правый край полос на прежних 15 px от экрана */
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .mob-menu-btn span {
        display: block;
        width: 24px;
        height: 24px;
        background: url(../images/menu.svg) center / contain no-repeat;
    }

    /* ================= 3. Главное меню — попап поверх затемнения (как у Sarafano) ================= */
    /* Образец: Sarafano .popup-backdrop rgba(0,0,0,.8) + .mobile-menu-popap:
       белый список по центру, поле 15 px по бокам, строки 60 px с линией
       #e1e1e1, текст 16 px #5e5e5e, последний пункт «Отмена» без линии,
       закрытие по тапу вне списка. */
    .navgt {
        display: none;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        margin: 0;
        padding: 12px;               /* = боковому отступу страницы; у Sarafano 15 и предел 440 px — предел снят по решению владельца */
        border: 0;
        background: rgba(0, 0, 0, .8);
    }

    /* Скрыто через display, не через opacity: базовое opacity:0 в медиазапросе
       headless Chrome переносил и на ПК-снимок (полоса меню бледнела).
       Плавное появление .25s ease, как у Sarafano, — анимацией только при открытии. */
    body.mob-menu-open .navgt {
        display: flex;
        animation: mob-menu-in .25s ease;
    }

    @keyframes mob-menu-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    body.mob-menu-open {
        overflow: hidden;
    }

    .nav-mnu,
    .m-admin .nav-mnu {
        display: block;
        width: 100%;
        max-width: none;
        max-height: 100%;
        margin: 0;
        padding: 0;
        background: #fff;
        border-radius: 5px;           /* единый радиус попапов; overflow-y:auto клиппит углы */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-mnu li,
    .m-admin .nav-mnu li,
    .modal-menu li {
        display: block;
        box-sizing: border-box;
        width: 100%;
        flex: none;
        border-bottom: 1px solid #e1e1e1;
    }

    .nav-mnu li.mob-only[hidden],
    .nav-mnu li.mob-menu-close[hidden] {
        display: block;
    }

    .nav-mnu li.mob-hide {
        display: none;
    }

    .nav-mnu li a,
    .modal-menu li a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0 16px;
        font-size: 16px;
        letter-spacing: normal;    /* ПК-правило даёт 1px */
        text-align: center;
        color: #5e5e5e;
        background: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
        transition: none;
    }

    .nav-mnu li a:hover,
    .nav-mnu li.current a,
    .nav-mnu li.current a:hover,
    .modal-menu li a:hover {
        background: #fff;
        color: #5e5e5e;
        font-weight: 400;
        cursor: pointer;
    }

    .nav-mnu li.mob-menu-close {
        border-bottom: 0;
    }

    .nav-mnu li.mob-menu-close a {
        color: #5e5e5e;
        font-weight: 400;
    }

    /* ================= 4. Футер: копирайт на телефоне убран ================= */
    /* Копирайт на мобильном не показываем (на всех страницах). Серая подложка
       html/body #EBEBEB доходит до низа экрана (включая зону под панелью Safari и
       домашним индикатором). На ПК футер — как был. */
    .l-footer {
        display: none;
    }

    body.m-admin .l-page {
        min-height: 0;
    }

    /* ================= 5. Сетка l-col-*: всё в столбик ================= */
    .row,
    .row-6,
    .row-10,
    .row-16,
    .row-20,
    .row-40 {
        display: block;
        margin-left: 0;
        margin-right: 0;
    }

    [class^="l-col-"],
    [class*=" l-col-"],
    .row-6 [class^="l-col-"],
    .row-6 [class*=" l-col-"],
    .row-10 [class^="l-col-"],
    .row-10 [class*=" l-col-"],
    .row-20 [class^="l-col-"],
    .row-20 [class*=" l-col-"] {
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .row > [class*="l-col-"] + [class*="l-col-"] {
        margin-top: 12px;
    }

    /* ================= 6. Кнопки, поля, селекты ================= */
    .btn,
    .m-admin .btn {
        min-height: 44px;
        line-height: 22px;
        padding: 11px 16px;
        font-size: 16px;
        box-sizing: border-box;
    }

    .btn.is-full-width {
        display: block;
        width: 100%;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .jcf-select,
    .m-admin input,
    .m-admin select,
    .m-admin .jcf-select .jcf-select-text {
        font-size: 16px;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    .jcf-select {
        height: 44px;
        box-sizing: border-box;
    }

    .jcf-select .jcf-select-text,
    .jcf-select-grey-slct .jcf-select-text {
        height: 42px;
        line-height: 42px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 18px;
        height: 18px;
    }

    /* Ошибки в формах — только красный текст, рамки не красим */
    label.error,
    .error-text,
    .help-block.error {
        color: #E31E24;
        font-size: 14px;
    }

    /* ================= 7. Попапы (Magnific) ================= */
    /* Боковые поля ВСЕХ попапов (.modal и его разновидности: согласие, «ЭКСПОРТ»,
       cookie-политика, #load-file-modal, «ДАННЫЕ ПО ЗАЯВКЕ», попапы смены статуса
       и подтверждения удаления, попапы у ячеек таблиц) — те же 12, что у кнопок и
       полей страницы, а не 8. Лист «⋯» и меню по гамбургеру свои 12 имели и так.
       Внутренние отступы содержимого (20) это не трогает. */
    .mfp-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ─────────── Единый вид ВСЕХ попапов на телефоне (эталон — «СОГЛАСИЕ») ───────────
       Скругление 5, без крестика (mfp-close скрыт ниже), заголовок 16/500, тело 16,
       длинный текст прокручивается ВНУТРИ; внизу — пришитые строки высотой 61 в стиле
       пункта меню. Кнопки .btn внутри попапа (.modal-promt/.frm-actn) превращаются в
       такие же строки одним правилом: главное действие — первой строкой, «Отмена»/
       «Закрыть» — последней (порядок разметки: сначала действия, затем .modal-menu). */
    .modal,
    .modal.full-size {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        margin: 8px auto;
        padding: 20px 0 0;           /* по бокам 0: строки-действия во всю ширину до края */
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        overflow: hidden;
        border-radius: 5px;
    }

    .modall-ttl {
        flex: none;
        margin: 0 0 16px 0;
        padding: 0 20px;             /* боковое поле — у самого попапа его нет */
        font-size: 16px;
        line-height: 22px;
        font-weight: 500;
        text-align: center;
    }

    /* Прокручиваемое тело — любой контейнер содержимого */
    .modal .modal-scroll,
    .modal .modal-content,
    .modal .modal-cont {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;   /* прокрутка не «пробивает» за пределы области (приём Sarafano) */
        touch-action: pan-y;            /* тач в области — только вертикальный пан */
        padding: 0 20px;
        text-align: left;
        font-size: 16px;             /* весь текст попапа — 16 */
        line-height: 22px;
    }

    .modal p {
        text-align: left;
        font-size: 16px;
        line-height: 22px;
    }

    /* Поля форм в попапах (строки «подпись + инпут») — с боковым полем 20, как
       заголовок и текст; строки-действия (.frm-actn/.modal-promt) остаются во всю
       ширину, поэтому паддим именно строки полей, а не форму целиком */
    .modal .frm-itm-ln {
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Ряды действий внизу: .modal-promt/.frm-actn (кнопки) и .modal-menu (Отмена) —
       во всю ширину, без внешних отступов; разделитель — линия сверху у каждой строки */
    .modal-promt,
    .modal .frm-actn,
    .modal .modal-menu {
        flex: none;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Если строки действий вложены в тело с боковым полем 20 (маленькие попапы:
       .modal-content/.modal-cont), выводим их во всю ширину попапа — линия сверху
       строки «ОК» идёт от края до края, как в «СОГЛАСИИ» (эталон) */
    .modal .modal-content .modal-promt,
    .modal .modal-cont .modal-promt,
    .modal .modal-content .frm-actn,
    .modal .modal-cont .frm-actn {
        margin-left: -20px;
        margin-right: -20px;
    }

    /* Любая кнопка .btn внутри попапа → плоская строка-61 (не серая ПК-кнопка) */
    .modal-promt .btn,
    .modal .frm-actn .btn,
    .modal .modal-menu li a,
    .modal .btn.w-150,
    .modal .btn.w-160 {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: 61px;
        margin: 0;
        padding: 0 16px;
        border: 0;
        border-top: 1px solid #e1e1e1;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
        color: #5e5e5e;
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        text-align: center;
        text-decoration: none;
    }
    /* Попап подтверждения удаления компании: сами кнопки те же 61, что в эталоне
       («Очистить» в документах клиента), но под «Отмена» оставалось 24.8 пустоты —
       20 даёт нижний margin формы внутри .modal-promt и 4.8 базовая линия
       inline-block .debt-frm. Снимаем оба, попап заканчивается кнопкой. */
    /* Форма внутри попапа: её нижний отступ (ПК даёт 20) оставлял пустоту под
       последней кнопкой. Форма встречается и внутри .modal-promt (компания),
       и снаружи, оборачивая её (банк). */
    .modal .modal-promt form,
    .modal .modal-content > form,
    .modal > form {
        margin: 0;
    }

    /* Основной текст попапа, лежащий прямо в .modal (без .modal-content), шёл
       впритык к краям — те же боковые 20, что во всех наших попапах. */
    .modal > p {
        margin: 0 0 20px 0;          /* снизу до строки кнопок — как в попапе
                                        удаления диапазона (эталон) */
        padding: 0 20px;
    }

    .modal .is-txt-cntr > .debt-frm {
        display: block;
    }

    .modal-promt .btn:hover,
    .modal .frm-actn .btn:hover,
    .modal .modal-menu li a:hover,
    .modal .btn.w-150:hover,
    .modal .btn.w-160:hover {
        background: #fff;
        color: #5e5e5e;
    }

    /* Попап загрузки #load-file-modal — по образцу уже переделанных попапов
       («СОГЛАСИЕ», «ЭКСПОРТ»). Ширину, скругление 5, заголовок 16/500 и строку
       «Отмена» 61 с линией сверху во всю ширину дают общие правила .modal выше;
       крестика у него и так нет. Своё здесь одно: в его разметке нет .modal-content,
       поэтому боковое поле 20 — то же, что у текста «ЭКСПОРТА», — задаём тексту и
       полосе прогресса напрямую. */
    #load-file-modal > p {
        margin: 0;
        padding: 0 20px;
    }

    /* Полоса прогресса: высота как у кнопок (61); проценты по центру по вертикали
       и горизонтали (центрирование даёт общее правило .progress-bar > span,
       здесь только кегль). Поля по бокам те же 20, что у текста, и отступ сверху
       (от текста) равен отступу снизу (до строки «Отмена») — оба по 20. */
    #load-file-modal .progress-bar {
        box-sizing: border-box;
        width: auto;                 /* на ПК задана 100% — с полями по 20 вылезала за попап */
        height: 61px;
        margin: 20px 20px 27px 20px; /* снизу 27, а не 20: у текста выше line-height 22
                                        при кегле 16, под глифами остаётся пустота, и
                                        верхний зазор читается больше. 27 подобрано
                                        владельцем глазом в Chrome. */
    }

    #load-file-modal .progress-animate {
        height: 100%;
    }

    #load-file-modal .progress-bar > span {
        font-size: 16px;
    }

    /* Попап «ДАННЫЕ ПО ЗАЯВКЕ»: на ПК подпись слева, поле справа (custom.css,
       #change-numbers .l-col-4/.l-col-8 — не трогаем). На телефоне колонок нет:
       подпись строкой, поле под ней во всю ширину, так что левый и правый отступы
       поля совпадают с отступами заголовка и текста внутри попапа (20). */
    #change-numbers .frm-itm-ln .l-col-4 {
        width: auto;
    }

    #change-numbers .frm-itm-ln .l-col-8 {
        width: 100%;
    }

    /* Попапы у ячеек таблиц ([data-modal-cell]) — по центру экрана, не у ячейки */
    .mfp-wrap .modal {
        position: relative;
        top: auto;
        left: auto;
    }

    /* ================= 8. Плашка cookie — один в один как у Sarafano ================= */
    /* Их мобильная плашка: тёмный полупрозрачный фон rgba(51,51,51,.9), серый
       текст 14/20 по центру, поля 10×35, внизу экрана; крестик × справа сверху
       (у нас — delete.svg того же размера 12×12 и положения). «Подробнее» — белая,
       обычного начертания. У Sarafano bottom:44 из-за их нижней панели — у нас
       такой панели нет, поэтому bottom:0. */
    .cookie-notice {
        background: rgba(51, 51, 51, 0.9);
        color: #cacaca;
        text-align: center;
        padding: 10px 35px;
        /* плашку поднимаем над домашним индикатором на высоту нижней safe-area,
           чтобы зона ПОД ней оставалась фоном страницы, а не красилась плашкой
           (viewport-fit=cover в meta нужен, иначе env=0). Проверяется на устройстве. */
        bottom: env(safe-area-inset-bottom, 0px);
        font-size: 14px;
        line-height: 20px;
    }

    .cookie-notice p {
        margin: 0;
        color: #cacaca;
        line-height: 20px;
    }

    .cookie-warning-link {
        color: #ffffff;
        font-weight: 400;
        margin-top: 10px;
        display: inline-block;
    }

    /* «Подробнее...» с тремя точками, как у Sarafano — на телефоне (ПК не трогаем,
       поэтому многоточие добавляем ::after, а не в перевод) */
    .cookie-warning-link::after {
        content: '...';
    }

    /* Крестик × справа сверху — как у Sarafano (осознанное исключение владельца
       из «без крестиков»); наш delete.svg 12×12, положение top:-5/right:0 как у них */
    .cookie-notice .btn-close {
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        width: auto;
        height: auto;
        margin: 0;
        padding: 10px 10px 0 0;      /* отступ до крестика сверху = справа = 10 */
        background: none;
        opacity: .65;
    }

    .cookie-notice .btn-close .ico-btn-close {
        display: block;
        width: 12px;
        height: 12px;
    }

    .cookie-notice .btn-close .ico-btn-close::before {
        width: 12px;
        height: 12px;
        /* по центру бокса, без общего +3px — иначе низ крестика подрезался */
        transform: translate(-50%, -50%);
    }

    /* ── Попап «Политика Cookie»: наш вариант — с заголовком «ПОЛИТИКА COOKIE»
       (16/500, общее правило) и скруглением 5, как «СОГЛАСИЕ» (намеренное отличие
       от Sarafano — по решению владельца). Текст — светлее/тоньше, как у Sarafano
       (принято): #5e5e5e 16/26/400. Отступы прокручиваемой области — как у них. */
    #cookie-warning .modal-cont,
    #cookie-warning .modal-cont p {
        color: #5e5e5e;
        font-weight: 400;
        line-height: 26px;
    }

    /* Верхний и нижний отступ прокручиваемой области = боковым (20): даём их
       МАРГИНОМ текста, а не padding контейнера — тогда при прокрутке первая
       строка уходит под заголовок, а нижний отступ виден при доскролле. */
    #cookie-warning .modal-cont p {
        margin: 16.3px 0;            /* 16.3 + 3.7 подъёма строки = 20 по глифу, как боковые */
    }

    /* ================= 9. Списки (.admn-table.m-cards) — карточки ================= */
    /* Та же разметка <table>: строка становится карточкой, ячейка — строкой
       «подпись : значение», подпись берётся из data-label (задан в шаблоне).
       Второстепенные колонки помечены data-mob-hide и на телефоне скрыты. */
    table.m-cards {
        display: block;
        width: 100%;
        height: auto;                /* на ПК table{height:1px} — трюк для td.btn-cell{height:100%} */
        margin: 0 0 16px 0;
        background: none;
        border: 0;
    }

    table.m-cards tbody {
        display: contents;           /* строки — прямые дети таблицы-блока, иначе высота 0 */
    }

    /* Прячем именно строку заголовков — ту, где лежат th. Раньше правило било по
       tr:first-child, и в таблицах без шапки (диапазоны банка) пропадала первая
       строка данных. Специфичность поднята парой селекторов: ниже .admn-table.m-cards tr
       возвращает display:flex и по классам был бы сильнее. */
    table.m-cards tr:has(> th),
    .admn-table.m-cards tr:has(> th) {
        display: none;
    }

    table.m-cards tr,
    .admn-table.m-cards tr {
        display: flex;
        height: auto;
        flex-wrap: wrap;
        box-sizing: border-box;
        width: 100%;
        margin: 0 0 12px 0;
        padding: 10px 12px 12px;
        background: #fff;
        border: 1px solid #A9A9A9;
        border-radius: 5px;
        text-align: left;
    }

    table.m-cards tr td,
    .admn-table.m-cards tr td,
    .requests-table.m-cards td {
        display: flex;
        flex: 0 0 100%;
        width: auto;
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        height: auto;
        min-height: 0;
        padding: 4px 0;
        border: 0;
        background: none;
        text-align: right;
        line-height: 22px;
        white-space: normal;
        overflow: visible;
    }

    table.m-cards td[data-label]:before {
        content: attr(data-label);
        flex: none;
        color: #757575;
        font-size: 14px;
        text-align: left;
    }

    /* data-mob-hide — «спрятать на телефоне», зеркало к .mob-only[hidden]
       («показать на телефоне»). Правило было написано только для ячеек таблиц;
       делаем общим, чтобы парой можно было держать разные подписи ПК и телефона
       в одном слоте — так же, как это сделано в Sarafano (.only-desktop /
       .only-mobile). Атрибут ставится в разметке только осознанно. */
    [data-mob-hide],
    table.m-cards tr td[data-mob-hide] {
        display: none;
    }

    .requests-table.m-cards td .custmr-txt,
    .requests-table.m-cards td .client-txt {
        width: auto;
        max-width: none;
        white-space: normal;
        text-align: right;
    }

    .admn-table.m-cards tr:hover td {
        background: none;
    }

    /* Зелёная карточка — заявка с непрочитанным комментарием (как строка на ПК) */
    .m-cards tr.grn-row {
        background: #53888b;
        border-color: #53888b;
        color: #fff;
    }

    .admn-table.m-cards tr.grn-row td,
    .admn-table.m-cards tr.grn-row td:first-child,
    .admn-table.m-cards tr.grn-row td:last-child,
    .admn-table.m-cards tr.grn-row:last-child td,
    .admn-table.m-cards tr.grn-row td[data-label]:before {
        color: #fff;
        background: none;
        border: 0;
    }

    .admn-table.m-cards tr.red-brdr-row td:not(.btn-cell) {
        border: 0;
    }

    .m-cards tr.red-brdr-row {
        border-color: #E31E24;
    }

    /* Кнопки действий — внизу карточки, в ряд по две */
    table.m-cards tr td.btn-cell,
    .admn-table.m-cards tr td.btn-cell {
        display: block;
        width: auto;
        flex: 1 1 calc(50% - 4px);
        padding: 8px 0 0 0;
        text-align: center;
    }

    .m-cards td.btn-cell + td.btn-cell {
        margin-left: 8px;
    }

    .m-cards td.btn-cell .btn-cell-hldr {
        display: block;
        height: auto;
    }

    .m-cards td.btn-cell .btn,
    .m-cards td.btn-cell .btn-cell-hldr .btn,
    .m-cards td.btn-cell .cstm-file,
    .m-cards td.btn-cell a {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        min-height: 44px;
        padding: 10px 8px;
        border-radius: 4px;
        line-height: 20px;
        font-size: 16px;
    }

    .m-cards td.btn-cell .btn.m-disable {
        box-shadow: none;
    }

    .m-cards td.btn-cell .vert-blck {
        font-size: 16px;
    }

    table.m-cards tr td.hdn-cell {
        display: none;
    }

    /* Банки: поля в карточке — на всю ширину, подпись сверху */
    .m-cards td .frm-itm-cell {
        display: block;
        width: 100%;
        height: auto;
    }

    table.m-cards tr td:has(.frm-itm-cell) {
        display: block;
        text-align: left;
    }

    .m-cards td:has(.frm-itm-cell)[data-label]:before {
        display: block;
        margin: 0 0 4px 0;
    }

    .m-cards td .frm-itm-cell input,
    .m-cards td .frm-itm-cell textarea {
        width: 100%;
        height: 44px;
        text-align: left;
        border: 1px solid #A9A9A9;
        border-radius: 4px;
        padding: 0 10px;
        box-sizing: border-box;
        margin: 0;
    }

    .m-cards td .frm-itm-cell textarea {
        height: auto;
        min-height: 44px;
        padding: 10px;
        line-height: 22px;
    }

    /* Поиск над списком */
    .serch-admin {
        display: flex;
        width: 100%;
        margin: 0 0 16px 0;
    }

    .serch-admin .cntrl-inpt {
        float: none;
        flex: 1 1 auto;
        min-width: 0;
    }

    .serch-admin input {
        width: 100%;
    }

    .serch-admin .btn {
        float: none;
        flex: none;
        width: auto;
        padding: 11px 16px;
    }

    /* Шапка списка: страницы, заголовок, счётчик */
    .row-6 {
        margin-bottom: 16px;
    }

    .row-6 h1 {
        font-size: 18px;
        line-height: 24px;
        text-align: center;
    }

    .nvgt-hdr,
    .nvgt-count {
        text-align: center;
    }

    .row.compn-cntrl .l-col-3,
    .row.compn-cntrl .is-txt-rht {
        text-align: left;
    }

    .row.compn-cntrl .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    /* Форма отчёта под архивом — в столбик */
    .archive-table,
    .archive-table tbody,
    .archive-table tr,
    .archive-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        height: auto;
        text-align: left;
        padding: 0;
        border: 0;
        background: none;
    }

    .archive-table td {
        margin: 0 0 8px 0;
    }

    .archive-table td .frm-itm-cell,
    .archive-table td .frm-itm-cell input {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .archive-table td .btn {
        display: block;
        width: 100%;
    }

    /* ================= 10. Заявка (форма _guarantee_form, клиент и админ) ================= */
    /* ── Страница «заявка внутри» / комментарии (клиент и админ): сверху ряд из двух
       кнопок («Назад» слева, «Комментарии»/«Данные» справа), под ним заголовок-строка 61,
       затем остальное. Порядок — флексом: обёртки формы распущены (display:contents),
       листовые элементы переставляются order-ом. ПК не трогаем (всё в @media 768). ── */
    .container-short-2:has(.admin-hdr .row-6) {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 12px;                   /* межблочный зазор: между кнопками ряда и между рядами */
        margin: 40px 0 0 0;          /* низ шапки → первый ряд = 40, как везде */
    }

    .container-short-2 > form,
    .container-short-2 .admin-hdr,
    .container-short-2 .admin-hdr > .row-6 {
        display: contents;
    }
    /* клирфикс-псевдоэлементы распущенных обёрток (form/.admin-hdr/.row-6) при
       display:contents становятся флекс-элементами и рушат ряд/добавляют строки — убираем */
    .container-short-2 > form::before,
    .container-short-2 > form::after,
    .container-short-2 .admin-hdr::before,
    .container-short-2 .admin-hdr::after,
    .container-short-2 .admin-hdr .row-6::before,
    .container-short-2 .admin-hdr .row-6::after {
        display: none;
    }

    /* прочее содержимое (поля/сообщение/переписка/алерты) — во всю ширину, после верхних
       рядов. И прямые дети .container-short-2 (заголовок «История», список переписки —
       они после form_end), и содержимое формы. Порядок по умолчанию 5 — ниже рядов и
       заголовка страницы (order 3). */
    .container-short-2:has(.admin-hdr .row-6) > *,
    .container-short-2:has(.admin-hdr .row-6) > form > * {
        order: 5;
        width: 100%;
    }

    /* ── Общий приём «ряд из двух кнопок»: два соседних .l-col-2 в .row-6 —
       каждая по половине ширины минус полузазор, между ними зазор 12 (gap) ── */
    .container-short-2 .admin-hdr .row-6 > .l-col-2 {
        order: 1;
        flex: 0 1 calc(50% - 6px);   /* каждая — половина минус полузазор; одна (у клиента без «Данные») не растягивается */
        width: auto;
        min-width: 0;
        margin: 0;
    }
    .container-short-2 .admin-hdr .row-6 > .l-col-2 ~ .l-col-2 {
        order: 2;
    }
    /* пустые колонки (у клиента нет «Данные»/средних кнопок) — не занимают место */
    .container-short-2 .admin-hdr .row-6 > .l-col-2:empty,
    .container-short-2 .admin-hdr .row-6 > .l-col-8:empty {
        display: none;
    }

    /* кнопки ряда — высота 61, текст по центру */
    .container-short-2 .admin-hdr .row-6 > .l-col-2 .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        min-height: 61px;
        margin: 0;
        padding: 0 12px;
    }

    /* заголовок страницы — строка-61 по центру (как «ТЕКУЩИЕ ЗАЯВКИ») */
    .container-short-2:has(.admin-hdr .row-6) > h1 {
        order: 3;
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
    }

    /* «ИСТОРИЯ СООБЩЕНИЙ» — та же строка-заголовок 61, что и «КОММЕНТАРИИ К
       ЗАЯВКЕ» выше. Порядок в потоке не задаём: он приходит из общего правила
       (order 5), заголовок должен остаться на своём месте — после блока отправки. */
    .container-short-2:has(.admin-hdr .row-6) > .ttl {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
    }

    /* средние кнопки (сохранение/статусы) — во всю ширину, ниже заголовка */
    .container-short-2 .admin-hdr .row-6 > .l-col-8 {
        order: 4;
        width: 100%;
        margin: 0;
    }

    .admin-hdr-btn,
    .admin-hdr-btn.three_button {
        max-width: none;
        font-size: 16px;
    }

    /* Кнопки шапки (сохранить/статусы) — тем же межблочным шагом 12, что и всё
       остальное на странице: контейнер .container-short-2 — флекс с gap:12, а
       здесь зазор задавал margin-bottom:8 у .frm-tbl-itm. Делаем сам .admin-hdr-btn
       флекс-столбцом с gap:12, а margin у пунктов снимаем (скрытые .frm-tbl-itm
       при display:none зазор не создают). */
    .admin-hdr-btn {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .admin-hdr-btn .frm-tbl-itm {
        display: block;
        width: 100%;
        border: 0;
        margin: 0;
    }

    .admin-hdr-btn .frm-tbl-itm .cntrl-btn,
    .cntrl-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 4px;
        line-height: 22px;
    }

    .cntrl-btn .vert-blck,
    .admin-hdr-btn .frm-tbl-itm .vert-blck {
        font-size: 16px;
        line-height: 22px;
    }

    /* Поля: одна строка на поле — подпись сверху мелким серым, поле на всю ширину */
    .table-form,
    .table-form tbody,
    .table-form tr,
    .table-form td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        height: auto;
        border: 0;
        padding: 0;
        background: none;
        text-align: left;
    }

    .table-form {
        margin: 0;                   /* низ таблицы полей → блок стоимости даёт
                                        padding-top карточки (ровно 12) */
    }

    .table-form tr {
        margin: 0 0 12px 0;          /* было 14 — единственный стык, выбивавшийся из
                                        нашего межблочного 12 (кнопка → первое поле
                                        уже 12, его даёт flex-gap контейнера) */
    }

    .table-form tr:last-child {
        margin-bottom: 0;            /* последнее поле → заголовок «СТОИМОСТЬ…» = 12 */
    }

    .table-form td.lbl-cell,
    .table-form td.lbl-cell label,
    .provider-frm .table-form .lbl-cell label {
        display: block;
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0 0 4px 0;
        font-size: 14px;
        line-height: 18px;
        font-weight: 400;
        color: #757575;
        text-align: left;
    }

    .table-form td.frm-cell {
        border: 0;
    }

    .table-form .frm-itm,
    .table-form .frm-itm.m-tgle {
        margin: 0;
        border: 0;
    }

    .table-form td input:not([type="checkbox"]):not([type="radio"]),
    .table-form td select,
    .table-form td textarea,
    .table-form td .inpt-smlt,
    .table-form td .jcf-select,
    .table-form input,
    .table-form .inpt-smlt,
    .table-form .jcf-select {
        box-sizing: border-box;
        width: 100%;
        height: 44px;
        margin: 0;
        padding-left: 12px;
        padding-right: 12px;
        border: 1px solid #A9A9A9;
        border-radius: 4px;
        background: #fff;
        text-align: left;
        font-size: 16px;
    }

    .table-form td textarea {
        height: auto;
        min-height: 44px;
        line-height: 22px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .table-form td .jcf-select {
        padding: 0;
    }

    .table-form td .jcf-select .jcf-select-text,
    .table-form .jcf-select .jcf-select-text {
        margin: 0 30px 0 12px;
        height: 42px;
        line-height: 42px;
        text-align: left;
    }

    .table-form td input.col-6:not([type="checkbox"]):not([type="radio"]) {
        width: 50%;
        float: left;
    }

    .table-form td input.col-6:first-child {
        border-radius: 4px 0 0 4px;
    }

    .table-form td input.col-6:last-child {
        border-radius: 0 4px 4px 0;
        border-left: 0;
    }

    .table-form td .frm-itm:after {
        content: '';
        display: block;
        clear: both;
    }

    .table-form .frm-tgle .btn,
    .provider-frm .table-form .frm-tgle .btn,
    .provider-frm .table-form .frm-tgle .btn.m-disable {
        height: 44px;
        line-height: 44px;
        top: 0;
        margin: 0;
        padding: 0;
    }

    /* Реестровый номер: у поля справа стоит герб (.rus-sign), и ПК даёт ему
       симметричный padding 0 35px через ID-правило (#..._registryNumber),
       которое перебивает общий отступ полей 12. Возвращаем левый отступ текста
       к 12 (как у остальных полей); правый (35) держим — под гербом. Герб уже
       по правому краю и вертикально по центру (ПК: .frm-itm .rus-sign
       position:absolute; top:50%; margin-top:-13px; right:10px). */
    .table-form td .frm-itm input:has(+ .rus-sign) {
        padding-left: 12px !important;
    }

    /* Иконка календаря — во ВСЕХ полях дат на мобильном, ОДНИМ правилом:
       .smpl-date (Дата протокола о победе; дата в «изменить номера»; отчётный
       период архива), .end-date и обе даты .date-range («Срок действия»).
       calendar.svg, 19px, справа 12; отступ текста слева — общий (12). !important
       перебивает широкий сброс .table-form td input { background:#fff }, который
       иначе гасит фон-картинку. Всё в @media — ПК не затронут. */
    input.smpl-date,
    input.end-date,
    .date-range input[type="text"] {
        background-image: url(../images/calendar.svg) !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        background-size: 19px auto !important;
        background-color: #fff !important;
        padding-right: 36px !important;
        text-indent: 0 !important;
    }

    /* Автодополнение (jQuery UI) — общее правило для ВСЕХ .ui-autocomplete на
       мобильном: строка списка той же высоты, что поле (61), шрифт 16, текст по
       вертикальному центру. Ширину списка (= ширине поля) и положение под полем
       виджет ставит сам (main(admin).js, open: outerWidth/offset по полю). */
    .ui-widget.ui-autocomplete .ui-menu-item {
        box-sizing: border-box;
        height: 61px;
        padding: 0 12px;
        line-height: 61px;           /* одна строка ровно по центру 61 */
        font-size: 16px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Цвет нередактируемых полей заявки (readonly/disabled) вынесен в custom.css:
       он одинаковый на ПК и телефоне, и там же перебивается общее !important-правило
       отключённых полей из all-admin.css. Дубля здесь не держим. */

    /* Расчёт стоимости.
       «СТОИМОСТЬ ГАРАНТИИ» — строка-заголовок 61 (16/500, по центру, зазоры 12
       сверху/снизу — общий вид заголовков-строк). Значение ниже: число + « ₽»
       (₽ псевдоэлементом — в value поля не попадает; слово «РУБЛЕЙ» и двоеточие
       скрыты). На ПК разметка не меняется: .clck-ttl/.clck-colon/.clck-val/
       .clck-cur — инлайновые обёртки, дают тот же текст «СТОИМОСТЬ ГАРАНТИИ: N РУБЛЕЙ». */
    .total-clcklt {
        max-width: none;
        padding: 0;                  /* 12 сверху/снизу между блоками даёт flex-gap
                                        контейнера (форма — display:contents) */
        margin: 0;
        border: 0;
        background: none;
        text-align: left;
        font-size: 14px;
    }

    .total-clcklt .calck-icon {
        display: none;
    }

    .total-clcklt .total-clcklt-val {
        display: block;
        font-size: 16px;
        line-height: 22px;
        font-weight: 500;            /* <strong> даёт браузерные 700 — на телефоне
                                        наш вес заголовков 500 (значение наследует) */
    }

    /* «СТОИМОСТЬ ГАРАНТИИ» — строка-заголовок 61, по центру; 12 снизу (до поля),
       12 сверху даёт padding-top карточки (поле выше прижато tr:last-child). */
    .total-clcklt .clck-ttl {
        display: block;
        margin: 0 0 12px 0;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
    }

    /* Двоеточие после «СТОИМОСТЬ ГАРАНТИИ» прячем только на телефоне (там это
       строка-заголовок). Слово «РУБЛЕЙ» скрыто и на ПК — см. custom.css. */
    .total-clcklt .clck-colon {
        display: none;
    }

    /* Поле стоимости — на всю ширину, вид как у полей формы. */
    .total-clcklt .clck-val {
        display: flex;
        align-items: center;
        justify-content: center;     /* число «228.29 ₽» — по центру поля */
        box-sizing: border-box;
        width: 100%;
        min-height: 61px;            /* наша высота элементов управления. Было 44:
                                        когда внутри редактируемое поле (админ на
                                        сохранённой заявке), его собственный 61
                                        растягивал span, а у текстового значения
                                        (новая заявка у обоих, сохранённая у клиента)
                                        оставалось 44 — поле было ниже соседних. */
        margin: 0;
        font-size: 16px;
        line-height: 22px;
    }

    /* Текстовое значение (клиент / админ-черновик): само .clck-val — поле-вид,
       число слева, ₽ сразу после числа; не редактируется. */
    .total-clcklt .clck-val:not(:has(input:not([type="hidden"]))) {
        padding: 0 12px;
        border: 1px solid #A9A9A9;
        border-radius: 4px;
        background: #fff;
    }


    /* Редактируемое поле (админ): на всю ширину, вид как у полей; ₽ внутрь value
       добавляет JS при blur (в отправке/пересчёте — только число). */
    .total-clcklt .clck-val input:not([type="hidden"]) {
        width: 100%;
        height: 44px;
        box-sizing: border-box;
        margin: 0;
        padding: 0 12px;
        border: 1px solid #A9A9A9;
        border-radius: 4px;
        background: #fff;
        text-align: center;          /* число по центру и при редактировании */
        font-size: 16px;
    }

    /* Сноска «* Приведенные расчёты…» — блок как заголовок «СТОИМОСТЬ ГАРАНТИИ»:
       сверху 12 (от поля стоимости), снизу 12 (до карточки документов, даёт
       flex-gap). Шрифт 16 (как в общем сбросе — не меняем). При 16 текст в три
       строки (~67 > 61), поэтому min-height 61: блок ≥61, при нехватке растёт по
       содержимому; текст по вертикальному центру с равными отступами сверху/снизу.
       По горизонтали — слева (как есть); цвет — как у подписей полей (#757575). */
    .total-clcklt .fnt-10 {
        display: flex;
        flex-direction: column;      /* текст во всю ширину, перенос по содержимому */
        justify-content: center;     /* по вертикальному центру, равные поля сверху/снизу */
        min-height: 61px;
        box-sizing: border-box;
        margin: 12px 0 0 0;
        font-size: 16px;
        line-height: 1.4;
        color: #757575;
    }

    /* Пробел после звёздочки — только на мобильном (ПК-текст «*Приведенные…»
       не меняем): «*» вынесен в шаблоне отдельным span, пробел даёт ::after. */
    .total-clcklt .fnt-10 .fn-ast::after {
        content: '\A0';
    }

    /* Документы заявки: строка таблицы — карточка */
    .table-file,
    .table-file tbody,
    .table-file tr,
    .table-file td,
    .table-file.m-fixed-layout td.lbl-cell,
    .table-file.m-fixed-layout td.col-3,
    .table-file.m-fixed-layout td.btn-cell {
        display: block;
        width: 100%;
        box-sizing: border-box;
        height: auto;
        border: 0;
        padding: 0;
        background: none;
        text-align: left;
    }

    .table-file {
        margin: 0 0 16px 0;
    }

    .table-file tr {
        display: flex;
        flex-wrap: wrap;
        margin: 0 0 12px 0;
        padding: 10px 12px 12px;
        background: #fff;
        border: 1px solid #A9A9A9;
        border-radius: 5px;
    }

    .table-file td.lbl-cell,
    .table-file td.lbl-cell .lbl-ttl,
    .table-file td.lbl-cell label {
        flex: 0 0 100%;
        font-size: 14px;
        line-height: 18px;
        color: #757575;
        font-weight: 400;
        margin: 0 0 4px 0;
    }

    .table-file td.col-3 {
        flex: 0 0 100%;
        margin: 0 0 8px 0;
        font-size: 16px;
    }

    .table-file td .inpt-smlt,
    .table-file td .filename-container {
        justify-content: flex-start;
        height: auto;
        min-height: 24px;
        line-height: 24px;
        border: 0;
        padding: 0;
        text-align: left;
        white-space: normal;
        word-break: break-word;
    }

    .table-file td.error {
        color: #E31E24;
    }

    /* Карточки документов: у первой строки («Аукционная…») ПК-правило
       .table-file tr:first-child td:nth-child(3/4) вешает серую линию сверху на
       ячейки кнопок (border-top #A9A9A9), которой нет у остальных карточек.
       Гасим бордюры на всех ячейках кнопок во всех строках — одинаково,
       независимо от файла. table.… впереди даёт специфичность выше :first-child. */
    table.table-file tr td.btn-cell,
    table.table-file.m-fixed-layout tr td.btn-cell {
        border: 0;
    }

    .table-file tr td.btn-cell,
    .table-file.m-fixed-layout tr td.btn-cell {
        flex: 1 1 calc(50% - 4px);
        width: auto;
        padding: 4px 0 0 0;
    }

    .table-file tr td.btn-cell + td.btn-cell {
        margin-left: 8px;
    }

    .table-file td.btn-cell .btn-cell-hldr {
        display: block;
        height: auto;
    }

    .table-file tr td.btn-cell .btn,
    .table-file tr td.btn-cell .cstm-file,
    .table-file tr:first-child td.btn-cell .btn,
    .table-file tr:last-child td.btn-cell .btn,
    .table-file tr td:last-child.btn-cell .btn {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        min-height: 44px;
        padding: 10px 8px;
        border-radius: 4px;
        line-height: 20px;
        top: 0;
    }

    .table-file td.btn-cell .vert-blck,
    .table-file td.btn-cell label {
        font-size: 16px;
    }

    /* Кнопка «три точки» и лист редких действий */
    .mob-dots-btn[hidden] {
        display: flex;
    }

    .mob-dots-btn {
        width: 44px;
        height: 44px;
        margin: 0 0 16px auto;
        align-items: center;
        justify-content: center;
        border: 1px solid #A9A9A9;
        border-radius: 4px;
        background: #fff;
        text-decoration: none;
    }

    /* Точки чуть тоньше: меньше кегль (4 вместо 5) и светлее (#555); сама кнопка
       прежнего размера 44×44. */
    .mob-dots-btn span,
    .mob-dots-btn span:before,
    .mob-dots-btn span:after {
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #555;
        content: '';
    }

    .mob-dots-btn span {
        position: relative;
    }

    .mob-dots-btn span:before {
        position: absolute;
        left: -8px;
    }

    .mob-dots-btn span:after {
        position: absolute;
        left: 8px;
    }

    .request-form .frm-table-cntrl {
        display: none;
    }

    /* Лист «⋯» — наш попап по образцу меню по гамбургеру: белый список по центру
       экрана, поле 12 от краёв, скругление 5; затемнение rgba(0,0,0,.8). */
    body.mob-actions-open .request-form .frm-table-cntrl {
        display: block;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 24px);
        max-height: calc(100% - 24px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1001;
        padding: 0;
        background: #fff;
        border-radius: 5px;
        box-shadow: none;
        font-size: 16px;
    }

    body.mob-actions-open:before {
        content: '';
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, .8);
    }

    body.mob-actions-open {
        overflow: hidden;
    }

    .request-form .frm-table-cntrl .frm-tbl-itm {
        display: block;
        border: 0;
        margin: 0;                   /* общий .frm-table-cntrl .frm-tbl-itm даёт
                                        margin-bottom:8 (нужен странице компании) —
                                        в листе «⋯» пункты стыкуем вплотную: шаг
                                        верхов = 61, линии-разделители через 61,
                                        текст ровно по центру между ними */
    }

    .request-form .frm-table-cntrl .mob-actions-close[hidden] {
        display: block;
    }

    .request-form .frm-table-cntrl .cntrl-btn,
    .request-form .frm-table-cntrl .cntrl-btn:hover,
    .request-form .frm-table-cntrl .cntrl-btn.m-disable {
        display: block;
        height: 61px;
        min-height: 0;
        line-height: 61px;
        padding: 0 16px;
        border-radius: 0;
        border-bottom: 0;
        background: #fff;
        box-shadow: inset 0 -1px 0 #e1e1e1;   /* разделитель тенью, а не бордюром:
                                                 не сужает контент-бокс → текст ровно по центру */
        color: #5e5e5e;             /* как активные пункты меню по гамбургеру */
        text-align: center;
    }

    /* Единственное отличие недоступного пункта от активного — цвет текста, курсор
       и некликабельность. Геометрию (высота, line-height, padding, display,
       vertical-align, шрифт) он берёт из общего правила строки — не меняет. */
    .request-form .frm-table-cntrl .cntrl-btn.m-disable,
    .request-form .frm-table-cntrl .cntrl-btn.m-disable .vert-blck {
        color: #A0A0A0;
    }

    .request-form .frm-table-cntrl .cntrl-btn.m-disable {
        cursor: default;
        pointer-events: none;
    }

    .request-form .frm-table-cntrl .m-red-btn.cntrl-btn:not(.m-disable) {
        color: #E31E24;
    }

    .request-form .frm-table-cntrl .mob-actions-close .cntrl-btn {
        border-bottom: 0;
        box-shadow: none;           /* у «Отмена» разделителя нет */
        color: #5e5e5e;             /* «Отмена» — как активные пункты, не серо-недоступный */
    }

    /* Единый вид строк наших списков (меню, .modal-menu, лист «⋯»): строка —
       флекс, текст строго по центру. Меню и .modal-menu уже так (см. .nav-mnu li a
       / .modal-menu li a). Лист «⋯» несёт ПК-хак вертикального центрирования
       (.vert-hldr::after высотой 100% + .vert-blck vertical-align:middle) — на
       Safari он опускает глифы ниже центра. Гасим фантомный ::after и распускаем
       .vert-blck (display:contents), чтобы текст стал прямым содержимым флекс-строки,
       как в меню, — тогда центрирование одинаковое во всех движках. */
    .request-form .frm-table-cntrl .cntrl-btn.vert-hldr::after {
        display: none;
    }

    .request-form .frm-table-cntrl .cntrl-btn .vert-blck {
        display: block;
        width: auto;
        line-height: 22px;           /* как у пунктов меню (.nav-mnu li a) */
        vertical-align: baseline;    /* сброс middle-хака — центрирует align-items */
        font-size: 16px;
    }

    /* Кнопка выбора файла — снова точка отсчёта для своего невидимого поля.
       Правила кнопок выше сбрасывают .cstm-file в position:static, а
       .cstm-file input задан абсолютом 100%×100% (all.css) — без якоря он уходит
       к левому верхнему углу страницы. Тап по «Загрузить» переводил фокус на это
       поле у самого верха документа, и браузер уводил туда прокрутку. */
    table.table-file tr td.btn-cell .cstm-file,
    table.table-file tr:first-child td.btn-cell .cstm-file,
    table.table-file tr:last-child td.btn-cell .cstm-file,
    table.table-file tr td:last-child.btn-cell .cstm-file,
    table.m-cards td.btn-cell .cstm-file,
    table.m-cards td.btn-cell .btn-cell-hldr .cstm-file {
        position: relative;
    }

    /* Заголовки разделов документов («ФИНАНСОВЫЕ ДОКУМЕНТЫ», «ЮРИДИЧЕСКИЕ
       ДОКУМЕНТЫ») — та же строка-61 по центру, что заголовки страниц; вес 500,
       а не унаследованный ПК-жирный 700. */
    .doc-sctn .doc-art > h2 {
        margin: 0 0 12px 0;          /* заголовок → первая карточка 12 */
        padding: 0;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
    }

    /* Хвост таблицы раздела — тот же 12 до заголовка следующего раздела (ПК даёт 16).
       Без прямого потомка: в диапазонах банка таблица лежит прямо в секции, а в
       документах банка — внутри формы, и оба варианта надо покрыть. */
    .doc-sctn table {
        margin-bottom: 12px;
    }

    /* ================= 11. Документы (клиент, заявка, банк у админа): карточки ================= */
    /* Таблицы документов помечены m-cards m-cards-doc: без строки заголовков —
       название документа крупно, ниже имя файла или «Нет…» (красным, если
       строка помечена red-brdr-txt-row), внизу кнопки в ряд. */
    /* Микрошаблон карточки документа — тот же, что в блоке аукционной документации
       на заявке (.table-file): описание светлым #757575 обычным весом, ниже имя
       файла обычным цветом #333. Было наоборот — описание жирным 700 тёмным. */
    table.m-cards.m-cards-doc tr td.doc-nomnt-cell,
    table.m-cards.m-cards-doc tr td.doc-name-cell {
        display: block;
        padding: 0 0 6px 0;
        font-size: 16px;
        line-height: 22px;
        font-weight: 400;
        color: #757575;
        text-align: left;
    }

    table.m-cards.m-cards-doc tr td.doc-nomnt-cell[data-contenteditable] {
        min-height: 22px;
    }

    table.m-cards.m-cards-doc td .frm-itm-cell.filename-container,
    table.m-cards.m-cards-doc td .filename-container {
        display: block;
        height: auto;
        min-height: 22px;
        line-height: 22px;
        margin: 0;
        padding: 0;
        border: 0;
        text-align: left;
        white-space: normal;
        word-break: break-word;
        font-size: 14px;
    }

    table.m-cards.m-cards-doc tr.red-brdr-txt-row td {
        color: #E31E24;
    }

    /* «Нет…» вместо имени файла — тем же светлым, что описание выше, на всех
       страницах одинаково (было #A0A0A0, а в строках без файла — красным).
       Строку без файла по-прежнему видно по её красной рамке. */
    table.m-cards.m-cards-doc tr td .filename-container .disable-color {
        color: #757575;
    }

    /* три кнопки в ряд */
    table.m-cards.m-cards-doc tr td.btn-cell {
        flex: 1 1 calc(33.33% - 6px);
        min-width: 90px;
    }

    table.m-cards.m-cards-doc tr td.btn-cell .btn,
    table.m-cards.m-cards-doc tr td.btn-cell .cstm-file {
        padding: 10px 4px;
        font-size: 15px;
    }

    table.m-cards.m-cards-doc td.btn-cell .vert-blck,
    table.m-cards.m-cards-doc td.btn-cell label {
        font-size: 15px;
    }

    /* ячейки с попапом выбора (диапазон, налогообложение) — подпись слева, значение справа */
    table.m-cards.m-cards-doc tr td [data-modal-cell] {
        display: inline;
        width: auto;
        height: auto;
        font-size: 16px;
        padding: 0;
    }

    table.m-cards.m-cards-doc tr td [data-modal-cell] .vert-blck {
        padding: 0;
        font-size: 16px;
    }

    .m-cards.m-cards-doc tr td.lst-cell {
        flex: 0 0 100%;
    }

    .doc-sctn h2,
    .doc-sctn .ttl {
        font-size: 16px;
        line-height: 22px;
        margin: 16px 0 10px 0;
    }

    /* Верх страницы документов банка: назад, заголовок, выбор банка — столбиком */
    .admin-hdr .l-col-2 .grey-slct,
    .admin-hdr .l-col-2 .jcf-select {
        width: 100%;
    }

    /* Автозаполнение Chrome: кегль поля на телефоне — наши 16. Цвет текста, фон и
       шрифт для этого состояния заданы общим правилом в custom.css (оно одно на ПК
       и телефон); здесь только размер, потому что на ПК у полей свои 14. */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        font-size: 16px;
    }

    /* ================= Компании: список и карточка ================= */
    /* Заголовки «КОМПАНИИ» и «ПРОФИЛЬ КОМПАНИИ» — та же строка-61 по центру, что
       «ТЕКУЩИЕ ЗАЯВКИ» и «АРХИВ ЗАЯВОК» (правила ниже, раздел 27). */
    /* Карточка компании: пустые колонки ряда (пейджер и счётчик страниц) скрыты,
       но сами .l-col-2 держали высоту — ряд был на 24 выше заголовка. Убираем их,
       тогда ряд обнимает заголовок и зазор под ним считается честно. (Список
       компаний идёт по разделу 27: там обёртки распущены display:contents.) */
    .main:has(.company-form) .row-6:not(.m-top-actions) > .l-col-2 {
        display: none;
    }

    /* Карточка компании: ряд из двух кнопок («< Назад» слева, «Сохранить» справа)
       первым блоком страницы, тем же приёмом, что на заявке — половина/половина
       минус полузазор, между ними 12, высота 61. На ПК ряд остаётся скрытым
       атрибутом hidden, нижние кнопки на телефоне гасим (правило ниже). */
    .main:has(.company-form) .row-6.m-top-actions[hidden] {
        display: flex;
        column-gap: 12px;
    }

    .main:has(.company-form) .row-6.m-top-actions > .l-col-2 {
        flex: 0 1 calc(50% - 6px);
        width: auto;
        min-width: 0;
        margin: 0;
    }

    .main:has(.company-form) .row-6.m-top-actions .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        min-height: 61px;
        margin: 0;
        padding: 0 12px;
    }

    .main:has(.company-form) .row-6 {
        margin-bottom: 12px;         /* заголовок → следующий блок 12, как в архиве */
    }

    /* Карточка компании: ПК даёт .row-6 margin-top 67.7 — он схлопывался наружу и
       становился отступом от шапки. Гасим его у обоих рядов (ряд кнопок → заголовок
       остаётся 12 от margin-bottom выше), а отступ от шапки задаём пустым
       .container-short — ровно 40, как на заявке. */
    .main:has(.company-form) .row-6 {
        margin-top: 0;
    }

    .main:has(.company-form) > .container-short {
        margin-top: 40px;
    }

    /* Форма добавления компании: заголовок стоит без ряда .row-6, отдельным
       блоком — ту же строку-61 задаём ему напрямую. */
    .main:has(.company-form) > div > h1 {
        margin: 0 0 12px 0;
        padding: 0;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
    }

    /* Документы клиента (вход через заявку): кнопка «Заявление» — первым блоком
       под шапкой с отступом 40. ПК даёт .row-6 margin-top 67.7, он схлопывался
       наружу и становился отступом от шапки — гасим и задаём 40 через пустой
       .container-short, тем же приёмом, что в карточке компании. */
    .main:has(.request-docs-hdr) .row-6 {
        margin: 0;                   /* низ 16 схлопывался с отступом .admin-hdr и
                                        побеждал его — шаг задаёт только .admin-hdr */
    }

    .main:has(.request-docs-hdr) > .container-short {
        margin-top: 40px;
    }

    /* Кнопка → первый заголовок 12: ПК даёт .admin-hdr снизу 35, а ряд был на 12
       выше кнопки за счёт пустых колонок — гасим их и ставим наш шаг. */
    .main:has(.request-docs-hdr) .admin-hdr {
        margin-bottom: 12px;
    }

    .main:has(.request-docs-hdr) .admin-hdr .row-6 > .l-col-8,
    .main:has(.request-docs-hdr) .admin-hdr .row-6 > .l-col-2:not(:first-child) {
        display: none;
    }

    .main:has(.company-form) .row-6 h1 {
        margin: 0;
        padding: 0;
        text-align: center;
        top: 0;
    }

    /* Кнопки карточки списка — ряд из двух пополам: половина минус полузазор,
       зазор 12, высота 61 (тот же приём, что «Назад/Комментарии»). */
    /* Длинный e-mail на обложке карточки — переносим тем же правилом, что для
       прочих длинных значений (word-break: break-word), карточку он не рвёт. */
    .main:has(.companies-table) table.m-cards td.mail-cell {
        word-break: break-word;
    }

    .main:has(.companies-table) table.m-cards tr {
        column-gap: 12px;
    }

    .main:has(.companies-table) table.m-cards tr td.btn-cell {
        flex: 0 1 calc(50% - 6px);
    }

    /* На ПК обе кнопки называются «Сменить», смысл даёт шапка таблицы; на телефоне
       шапки нет, поэтому показываем суффикс из той же шапки: «Сменить логин» /
       «Сменить пароль». На ПК суффикс скрыт атрибутом hidden. */
    .main:has(.companies-table) td.btn-cell .vert-blck .mob-only[hidden] {
        display: inline;
    }

    /* Флеш-плашка. В карточке ПК даёт ей margin-bottom 20 — приводим к нашему
       межблочному 12 (сверху 12 уже даёт ряд заголовка). В списке .admin-body
       распущен разделом 27, плашка становится элементом общего столбца: ставим её
       перед итогами («Искать» → плашка → «Всего…» → карточки), шаг 12. */
    .main:has(.company-form) .admin-body > .alert {
        margin: 0 0 40px 0;          /* ровно как у красной: .alert-danger даёт 40 */
    }

    .main:has(.companies-table) .admin-body > .alert {
        order: 5;
        margin: 12px 0 0 0;
    }

    /* Карточка компании: группа «Удалить / Активировать / Кабинет» — между кнопками
       наш зазор 12, до группы и после неё одинаковый межмодульный 40. */
    .main:has(.company-form) .admin-body .frm-table-cntrl {
        display: flex;               /* .frm-table-cntrl:not(.request-form …) ниже
                                        возвращает block — берём специфичностью выше */
        flex-direction: column;
        gap: 12px;
        margin-top: 40px;
    }

    /* .clearfix::before/::after во флекс-контейнере становятся полноценными
       флекс-элементами и съедают лишний gap — таблица полей → «Удалить» выходила
       52 вместо 40. Гасим псевдоэлементы, а не компенсируем отступом сверху. */
    .main:has(.company-form) .admin-body .frm-table-cntrl::before,
    .main:has(.company-form) .admin-body .frm-table-cntrl::after {
        display: none;
    }

    .main:has(.company-form) .admin-body .frm-table-cntrl .frm-tbl-itm {
        margin: 0;
    }

    .main:has(.company-form) .round-blck.mb-25 {
        margin-bottom: 0 !important; /* до группы отступ даёт margin-top группы (40) */
    }

    /* Обе нижние кнопки на телефоне убраны — они теперь в ряду над заголовком.
       Признак — сам этот ряд (.m-top-actions), а не класс формы: класс
       company-form носит и модуль «Данные по компании» в настройках клиента,
       и правило по нему гасило там ВСЕ кнопки «Сохранить» — у данных компании,
       у уведомлений и у смены пароля. */
    .main:has(.m-top-actions) .frm-actn {
        display: none;
    }

    /* ================= Банки: список и карточка банка ================= */
    /* Список банков. Отступ от шапки 40 и заголовок строкой-61 — тем же приёмом,
       что в карточке компании: ПК даёт .row-6 margin-top 67.7, он схлопывался
       наружу и становился отступом от шапки, поэтому гасим его, а 40 задаём
       пустым .container-short. */
    .main:has(.suppliers-table) .row-6 {
        margin-bottom: 0;            /* зазор до формы добавления задаёт сама форма;
                                        сверху 12 даёт общее правило «заголовок первым» */
    }

    /* Пустые колонки ряда (пейджер и счётчик страниц) на телефоне скрыты, но сами
       .l-col-2 держали высоту — ряд был на 24 выше заголовка, и зазор до первой
       карточки выходил 36 вместо 12. Тот же приём, что в карточке компании. */
    .main:has(.suppliers-table) .row-6 > .l-col-2 {
        display: none;
    }

    .main:has(.suppliers-table) .row-6 h1 {
        margin: 0;
        padding: 0;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        top: 0;
    }

    /* Кнопки карточки банка — рядами по две пополам, зазор 12: тот же приём, что
       у «Сменить логин / Сменить пароль» в списке компаний. Четыре кнопки
       («Документы», «Тарифы», «Изменить», «Удалить») ложатся в два ряда. */
    table.m-cards.suppliers-table tr {
        column-gap: 12px;
    }

    table.m-cards.suppliers-table tr td.btn-cell {
        flex: 0 1 calc(50% - 6px);
    }

    /* Второй ряд кнопок: между рядами тот же 12. Верхний отступ ячейки кнопок (8)
       вместе с нижним отступом ячейки поля (4) как раз и даёт 12 у первого ряда,
       а у второго над ним поля нет — добираем недостающие 4 явно. */
    table.m-cards.suppliers-table tr td.actn-cell,
    table.m-cards.suppliers-table tr td.remove-cell {
        padding-top: 12px;
    }

    /* Порядок списка: заголовок → форма добавления → карточки. Форма стоит в
       разметке последней, поэтому тело страницы распускаем в флекс-столбец и
       переставляем order-ом — тем же приёмом, что порядок блоков на заявке.
       Форма — отдельный модуль: вокруг неё межмодульный 40. */
    .main:has(.suppliers-table) .admin-body {
        display: flex;
        flex-direction: column;
    }

    .main:has(.suppliers-table) .admin-body > .add-to-tbl {
        order: 1;
        margin: 12px 0 40px 0;       /* под заголовком наш межблочный 12,
                                        снизу до карточек — межмодульный 40 */
    }

    /* свои нижние отбивки таблицы (ПК даёт 16) и последней строки-карточки (12)
       складывались бы с модульными 40 — зазор вокруг модуля задаёт только форма */
    .main:has(.suppliers-table) .admin-body > .add-to-tbl > table,
    .main:has(.suppliers-table) .admin-body > .add-to-tbl tr:last-child {
        margin-bottom: 0;
    }

    /* Внутри формы добавления оставался ПК-ритм: ячейка 95 при поле 61 — сверх
       поля шли подпись-строка 22 и свои отбивки. Подпись здесь дублирует
       подсказку самого поля («Кратко» и «Кратко...»), поэтому в форме её не
       печатаем, а ритм задаём нашим 12: поле 61 → 12 → поле 61 → 12 → кнопка 61.
       В карточках банков подпись остаётся — там поля показывают значения. */
    .main:has(.suppliers-table) .add-to-tbl td[data-label]::before {
        display: none;
    }

    .main:has(.suppliers-table) .add-to-tbl tr > td {
        padding: 0;
    }

    /* Вторая вертикальная линия у правого края полей строк добавления: ПК-правило
       .add-to-tbl td:not(.hdn-cell){border-right:1px solid #A9A9A9} (all-admin.css)
       по специфичности бьёт общее «у ячеек карточек бордеров нет», и рядом с
       собственным бордером поля вставала ещё одна. Селектор повторяем один в один,
       чтобы отменить его ровно там, где он поставлен: mobile.css грузится позже. */
    .add-to-tbl td:not(.hdn-cell) {
        border-right: 0;
    }

    .main:has(.suppliers-table) .add-to-tbl tr {
        row-gap: 12px;
    }

    .main:has(.suppliers-table) .admin-body > .suppliers-table {
        order: 2;
        margin: 0;
    }

    /* Карточка банка (details): «< Назад» первым блоком под шапкой с отступом 40,
       ниже заголовок строкой-61, ниже выбор банка. ПК-порядок в разметке иной,
       поэтому колонки ряда переставляем order-ом — тем же приёмом, что на
       странице заявки. */
    .main:has(.bank-details-hdr) .row-6 {
        margin: 0;
    }

    .main:has(.bank-details-hdr) > .container-short {
        margin-top: 40px;
    }

    .main:has(.bank-details-hdr) .admin-hdr {
        margin-bottom: 12px;
    }

    /* Между модулями страницы (диапазоны → документы) — межмодульный 40. */
    .main:has(.bank-details-hdr) .admin-body > .doc-sctn {
        margin-bottom: 0;
    }

    .main:has(.bank-details-hdr) .admin-body > .doc-sctn + .doc-sctn {
        margin-top: 12px;            /* заголовки разделов живут по общему правилу
                                        заголовков: сверху и снизу одинаковые 12 */
    }

    .main:has(.bank-details-hdr) .admin-hdr h1 {
        margin: 0;
        padding: 0;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        top: 0;
    }

    /* Попап «Опции активации». ПК даёт форме внутри inline-block, из-за чего
       «Готово» была шириной по содержимому (197.84), а не по попапу. Тот же
       случай, что .debt-frm в попапе удаления компании. */
    .modal .is-txt-cntr > form,
    .modal .is-txt-cntr > div {
        display: block;
    }

    /* Кнопкам «Один» / «Все» / «Отмена» ширина 90 задана инлайном в разметке
       (ПК-вид). Разметку не трогаем, чтобы ПК остался как был, а инлайн-стиль
       перебивается только !important. Строка действий на телефоне — во всю
       ширину, как во всех попапах. */
    .modal .modal-promt .btn[style*="width"] {
        width: 100% !important;
    }

    /* Ряд «квадрат + подпись» — тот же, что на форме входа: по вертикальному
       центру, зазор 8; между рядами наш межблочный 12 (ПК даёт 15 и 30).
       Опции выровнены по одной вертикальной линии: строки идут от левого края
       содержимого попапа, с тем же боковым отступом 20, что у текста попапов.
       (Раньше каждая строка центрировалась сама по себе, и квадраты стояли на
       разных x: 120.75 / 94.3 / 122.36.) */
    .modal .frm-itm-chk {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        margin: 0 0 12px 0 !important;   /* строки носят mb-15/mb-30, а утилиты
                                            в all-admin.css объявлены !important */
        padding: 0;
    }

    /* Группу центрируем целиком: обёртка шириной по самой длинной строке стоит
       по центру попапа, а строки внутри идут от её левого края — квадраты
       остаются на одной вертикали. Обёртка в «Опциях активации» — из шаблона,
       в попапах у ячеек её строит сам скрипт (main(admin).js). */
    .modal .frm-chk-group,
    .modal .modal-content > div:has(> .frm-itm-chk) {
        width: max-content;
        max-width: calc(100% - 40px);
        margin: 0 auto;
    }

    .modal .frm-itm-chk label {
        margin: 0;
        line-height: 22px;
        text-align: left;
    }

    /* От заголовка до первой опции и от последней опции до кнопки — одинаковый
       межмодульный 40. */
    .modal:has(.frm-itm-chk) .modall-ttl {
        margin-bottom: 0;            /* зазор до первой опции задаёт сама опция */
    }

    .modal .frm-itm-chk:first-child {
        margin-top: 40px !important;
    }

    /* последняя опция: в «Опциях активации» за ней сразу идёт строка кнопки,
       в попапах у ячеек опции лежат в своей обёртке и последняя — :last-child */
    .modal .frm-itm-chk:last-child,
    .modal .frm-itm-chk:has(+ .frm-actn) {
        margin-bottom: 40px !important;
    }

    /* Список выбора в попапе копирования тарифов — во всю ширину попапа */
    .modal .frm-itm {
        margin: 0 0 12px 0;
    }

    /* Попапы «Введите новый логин» и «Введите новый пароль»: строка поля у них
       построена на .frm-itm, а боковое поле 20 в попапах задано выше только для
       .frm-itm-ln — поле упиралось в края попапа. Приводим к эталону «Данные по
       заявке» (#change-numbers): те же боковые 20 у строки, тот же зазор от
       заголовка 35 и от строки до строк действий 42. Числа взяты у эталона. */
    .modal .popup-form > .frm-itm {
        padding: 0 20px;
    }

    .modal:has(.popup-form > .frm-itm) .modall-ttl {
        margin-bottom: 35px;
    }

    .modal .popup-form > .frm-itm ~ .frm-actn {
        margin-top: 42px;
    }

    /* ================= 12. Переписка по заявке ================= */
    /* Своего поля у блока отправки нет: поле ввода и обе кнопки должны стоять в
       ту же ширину, что кнопки «Назад/Данные», заголовки и карточки (12 от краёв).
       Фон блока совпадает с фоном страницы (#EBEBEB), так что видимо ничего не
       теряется — уходит только лишний отступ, делавший их у́же на 12 с каждой стороны. */
    .grey-bg {
        padding: 0;
    }

    .grey-bg textarea,
    .edit-cmnt textarea {
        width: 100% !important;
        box-sizing: border-box;
        min-height: 88px;
        font-size: 16px;
    }

    .grey-bg .frm-cntrl,
    .edit-cmnt .frm-cntrl {
        display: flex;
        flex-direction: column;
        gap: 12px;                   /* наш стандартный зазор между частями блока */
        padding: 12px 0 0 0;         /* поле ввода → блок вложения = 12 */
    }

    /* Блок вложения к сообщению: сверху подпись с предельным размером, строкой
       ниже — имя файла («Нет…», пока не выбран), и уже под ними сама кнопка
       «Вложить файлы…». Пара «подпись + значение» набрана как в карточках
       документов. Порядок делаем флексом, разметку не переставляем: в DOM
       .filename-container обязан идти сразу за label (туда пишет имя
       custom-file-input.js). */
    .grey-bg .frm-cntrl .cstm-file,
    .edit-cmnt .frm-cntrl .cstm-file {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .grey-bg .cstm-file .attach-note[hidden],
    .edit-cmnt .cstm-file .attach-note[hidden] {
        display: block;
        order: 1;
        margin: 0 0 4px 0;
        font-size: 16px;             /* на телефоне весь текст 16; 14 приходило с ПК */
        line-height: 22px;
        color: #757575;              /* цвет подписей полей */
    }

    .grey-bg .cstm-file .filename-container,
    .edit-cmnt .cstm-file .filename-container {
        order: 2;
        margin: 0 0 12px 0;
        padding: 0;
        font-size: 16px;
        line-height: 22px;
    }

    .grey-bg .cstm-file > label,
    .edit-cmnt .cstm-file > label {
        order: 3;
    }

    .cstm-file label,
    .cstm-file label .btn {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .cstm-file label + span,
    .cstm-file .filename-container {
        display: block;
        max-width: none;
        padding: 6px 0 0 0;
        line-height: 20px;
        white-space: normal;
        font-size: 14px;
    }

    .grey-bg .frm-cntrl > .btn,
    .edit-cmnt .frm-cntrl > .btn {
        float: none;
        display: block;
        width: 100%;
    }

    .comment-block {
        box-sizing: border-box;
        padding: 8px 8px 24px 8px;
        border-radius: 5px;          /* как у всех наших рамок на сайте */
        min-height: 122px;           /* пустая история — не полоска в 34px, а окно
                                        в высоту поля ввода сообщения выше (оно
                                        отрисовывается как раз 122). Именно min-height:
                                        с сообщениями окно растёт по содержимому, как было.
                                        ПК не трогаем — там своя высота. */
    }

    .comment-block .comment-itm {
        margin: 12px 0 0 0;
        padding: 10px;
        background: #fff;
        border: 1px solid #e1e1e1;
        border-radius: 5px;
    }

    .comment-itm-hdr {
        margin-bottom: 8px;
        font-weight: 500;            /* ПК даёт 700 — на телефоне наш вес 500 */
        font-size: 14px;
        line-height: 20px;
        word-break: break-word;
    }

    .comment-txt p {
        font-size: 16px;
        line-height: 22px;
        word-break: break-word;
    }

    .comment-block .file-lst li {
        margin: 6px 0 0 0;
        line-height: 22px;
        word-break: break-all;
    }

    .m-news-cmmnt {
        height: auto;
        max-height: 60vh;
        max-height: 60dvh;
    }

    /* ================= 13. Настройки, карточка компании ================= */
    .ntfc-form,
    .frm-tbl,
    .m-news-msg {
        width: 100%;
        max-width: none;
    }

    .stng-sctn {
        margin: 0 0 36px 0;
    }

    .frm-actn.news-delete-actn {
        position: static;
        margin: 12px 0 0 0;
        text-align: center;
    }

    .stng-sctn h1,
    .stng-sctn .ttl,
    .frm-tbl-ttl {
        margin: 0 0 16px 0;
        font-size: 18px;
        line-height: 24px;
    }

    /* Вкладки — в строку с горизонтальной прокруткой */
    /* Ряд табов «Тексты статусов гарантий» — по ширине контейнера, без боковой
       прокрутки: три равные доли и наш зазор 12. Раньше ряд был шире контейнера
       (min-width 33% + nowrap) и уезжал в горизонтальную прокрутку. */
    .tabs,
    .tabs.clearfix {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: visible;
        column-gap: 12px;
        margin: 0;
        padding: 0;
    }

    .tabs li,
    .tabs li.l-col-2,
    .tabs [class^="l-col-"] {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .tabs li .btn,
    .container-short .tabs .btn {
        display: block;
        width: 100%;
        height: auto;
        min-height: 61px;
        line-height: 22px;
        bottom: 0;
        max-height: none;
        white-space: normal;         /* обе строки подписи видны целиком */
        text-transform: none;
    }

    /* Выбранный таб держится классом .current — тем же, которым его помечает
       обработчик ul.tabs (main(admin).js). На ПК .current делает таб выше
       (max-height 55), а темнее его делал только :hover — на телефоне это
       и приводило к тому, что цвет «залипал» после тапа и слетал при тапе мимо.
       Красим и поднимаем по .current, а :hover на телефоне возвращаем к базовым
       цветам, чтобы он не участвовал вовсе. Цвета — те же, что у :hover в
       all-admin.css, своих не заводим. */
    .tabs li.current .btn,
    .container-short .tabs li.current .btn {
        min-height: 73.2px;          /* на 20% выше невыбранных (61) */
    }

    /* Пары «база / тёмная» берём как они сведены в custom.css:
       синий 78AAD6 / 407AAA, зелёный 53888b / 026166, красный FF7E79 / E31E24. */
    .tabs li.current .btn.m-blue-btn { background-color: #407AAA; }
    .tabs li.current .btn.m-grn-btn  { background-color: #026166; }
    .tabs li.current .btn.m-red-btn  { background-color: #E31E24; }

    .tabs li .btn.m-blue-btn:hover { background-color: #78AAD6; }
    .tabs li .btn.m-grn-btn:hover  { background-color: #53888b; }
    .tabs li .btn.m-red-btn:hover  { background-color: #FF7E79; }

    .tabs li.current .btn.m-blue-btn:hover { background-color: #407AAA; }
    .tabs li.current .btn.m-grn-btn:hover  { background-color: #026166; }
    .tabs li.current .btn.m-red-btn:hover  { background-color: #E31E24; }

    .frm-actn .btn.w-150,
    .frm-actn .btn.w-160,
    .btn.w-150,
    .btn.w-160 {
        width: 100%;
        min-width: 0;
        max-width: 320px;
    }

    .frm-actn.is-txt-rht {
        text-align: center;
    }

    /* Кнопки под карточкой компании: столбиком */
    .frm-table-cntrl:not(.request-form .frm-table-cntrl) {
        display: block;
        background: none;
    }

    .frm-table-cntrl .frm-tbl-itm {
        display: block;
        width: 100% !important;     /* в шаблоне компании ширина 33.333% задана inline */
        border: 0;
        margin: 0 0 8px 0;
    }

    .frm-table-cntrl .cntrl-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 4px;
        line-height: 22px;
    }

    .round-blck input:not([type="checkbox"]):not([type="radio"]),
    .round-blck-btm input:not([type="checkbox"]):not([type="radio"]),
    .round-blck .jcf-select,
    .round-blck-btm .jcf-select {
        height: 44px;
        font-size: 16px;
    }

    /* ================= 14. Тарифная сетка банка: ПК-вид с горизонтальной прокруткой ================= */
    .tarif-hldr {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px;
        padding: 0 12px;
    }

    .tarif-hldr > * {
        min-width: 1000px;          /* как контейнер ПК: левая часть 386 + четыре колонки целиком */
    }

    /* Внутри сетки — ПК-размеры кнопок и полей, общие мобильные 44 px не применяем */
    .tarif-hldr .btn,
    .tarif-hldr input,
    .tarif-hldr .vert-blck {
        font-size: 14px;
    }

    .tarif-hldr .btn {
        min-height: 0;
        padding: 0;
        line-height: 41px;
    }

    .tarif-hldr input:not([type="checkbox"]):not([type="radio"]) {
        height: 41px;
    }

    .tarif-hldr .tarif-net-hdr input:not([type="checkbox"]):not([type="radio"]) {
        height: 42px;
    }

    /* ================= 15. Вход, регистрация, сброс пароля, повторное письмо ================= */
    body.enter-page .main > section.enter,
    body.enter-page .main > section.enter-registration,
    .enter,
    .enter-registration {
        margin: 0;
        padding: 24px 0;
    }

    .enter h1 {
        margin: 0 0 24px 0;
        font-size: 16px;
    }

    .enter-frm {
        max-width: none;
    }

    .round-blck .frm-itm input:not([type="checkbox"]):not([type="radio"]),
    .round-blck-btm .frm-itm input:not([type="checkbox"]):not([type="radio"]),
    .round-blck .frm-itm-row input:not([type="checkbox"]):not([type="radio"]),
    .round-blck-btm .frm-itm-row input:not([type="checkbox"]):not([type="radio"]),
    .round-blck .frm-itm .jcf-select,
    .round-blck-btm .frm-itm .jcf-select {
        height: 44px;
        font-size: 16px;
    }

    .round-blck .frm-itm textarea,
    .round-blck-btm .frm-itm textarea {
        height: 44px;                /* как поле; common.js растит по тексту */
        min-height: 44px;
        font-size: 16px;
        line-height: 22px;
    }

    .enter-frm .frm-cntrl {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 16px 0 0 0;
        font-size: 14px;
    }

    .enter-frm .frm-cntrl .is-left,
    .enter-frm .frm-cntrl .is-right,
    .enter-frm .frm-itm-ln,
    .enter-frm .change-password,
    .enter-frm .change-password.lnk-gap {
        float: none;
        display: block;
        margin: 0;
        line-height: 22px;
        font-size: 14px;
    }

    .enter-frm .frm-cntrl label {
        line-height: 22px;
    }

    .enter-frm .frm-actn,
    .enter-registration .enter-frm .frm-actn {
        margin: 20px 0 0 0;
    }

    .enter-frm .frm-actn .btn {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .enter-frm .frm-actn p {
        margin: 12px 0 0 0;
        font-size: 16px;
    }

    .enter-registration .agrmt,
    .info-txt {
        font-size: 14px;
        line-height: 20px;
    }

    /* Капча Яндекса: контейнер во всю ширину формы, сам виджет не уже 300 px */
    .enter-registration .enter-frm .capcha-hldr,
    .capcha-hldr {
        margin: 12px 0;
        text-align: center;
    }

    .captcha-ln,
    .smart-captcha {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .smart-captcha > div,
    .smart-captcha iframe {
        max-width: 100%;
    }

    /* Флеш-плашки (.alert всех типов, все страницы): минимальная высота 61, как у
       кнопок; текст по центру по вертикали и горизонтали; при длинном тексте
       плашка растёт, поля сверху/снизу равные. Высоту даём симметричным
       padding-ом, а НЕ min-height: плашки скрыты в CSS (.alert-dismissible) и
       показываются slideDown() из common.js, который анимирует высоту и padding и
       ставит инлайновый display:block — min-height/flex сломали бы и анимацию,
       и последующее скрытие. 20 (строка) + 20.5 + 20.5 = 61. */
    /* Ошибки формы приходят в плашку отдельным узлом: валидатор (errorLabelContainer:
       '.alert') кладёт внутрь <div><label class="error">, а у .error свой красный 14.
       На красном фоне текст не читался и выглядел отдельной надписью над плашкой,
       наползая на соседнюю. Подчиняем его плашке: цвет плашки, 16, по центру. */
    .alert label.error,
    .alert .error {
        display: block;
        color: inherit;
        font-size: 16px;
        line-height: 22px;
        text-align: center;
    }

    .alert {
        padding: 20.5px 12px;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
    }

    /* На заявке/переписке контейнер — флекс с gap 12, и он один задаёт ритм.
       Свои margin-ы плашки (ПК .alert margin-bottom:20; ниже .alert-danger/
       .alert-info — 40 для страниц входа) складывались с gap и давали снизу 32/52.
       Обнуляем их ТОЛЬКО здесь: сверху и снизу остаётся межблочные 12.
       Ритм страниц входа (40) не трогаем. */
    .container-short-2:has(.admin-hdr .row-6) .alert {
        margin: 0;
    }

    /* ================= 16. Главная (лендинг): один шаг ритма 24 px ================= */
    /* Эталон — «Полезные ссылки»: между рядами 24 px (margin-bottom иконки),
       от заголовка до первого ряда — те же 24. Шаг применён ко всем модулям. */
    /* Заголовок модуля — общее правило. Кегль и вес как у названия в шапке
       (16 / 500). От НИЗА ГЛИФОВ заголовка до содержимого 31.2 px (хвост
       строки под глифами 3.7 вычтен из поля: 31.2 − 3.7 ≈ 28). Если первым
       идёт текст, его верхний хвост (6.3 у строки 16/24) снимается правилом
       «h1 + p» ниже — так расстояние по глифам одно и то же для любого
       модуля на любой странице. Ритм внутри модуля — отступ между СОСЕДЯМИ. */
    .main section > h1,
    .mob-contacts h1 {
        margin: 67.7px 0 27.5px 0; /* до заголовка: 67.7 + 4.3 хвоста над прописными = 72 по глифам — от шапки сайта и от предыдущего модуля одинаково */
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
        text-align: center;
    }

    /* «НАШИ УСЛУГИ» (только он): верхний зазор по глифам = нижнему (31.2).
       Остальные заголовки и первые заголовки под шапкой на других страницах — 72. */
    .main .our-serv > h1 {
        margin-top: 26.9px;          /* 26.9 + 4.3 хвоста = 31.2 по глифам, как снизу */
    }

    /* Стык модулей: от последнего содержимого до следующего заголовка 72 px —
       столько было перед «Полезными ссылками» (24 хвоста + 48); теперь везде */
    .our-serv,
    .benefits,
    .usefull {
        margin: 0;                 /* стык даёт margin-top следующего заголовка; хвосты строк сняты внутри модулей */
    }

    /* Услуги: шапка не жирная; строки — текст 22 px + по 12 сверху и снизу,
       то есть между строками 24; от верха блока до первой строки и от
       последней до низа — тоже 24 (12 у тела + 12 у строки); шапка — 24 с обеих сторон */
    .serv-row-hldr {
        padding-left: 0;
        padding-right: 0;
    }

    .serv-tbl {
        margin: 0;
    }

    .main section > h1 + p,
    .main .mob-contacts h1 + p {
        margin-top: -6.7px;        /* текст после заголовка: хвост над глифами строки 16/24 (по замеру телефона) */
    }

    .serv-hdr {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
    }

    .serv-hdr .vert-blck,
    .serv-hdr strong {
        display: -webkit-box;       /* не больше двух строк, дальше многоточие (приём Sarafano, _messages.scss) */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        top: -1.77px;                /* по глифам центр текста был на 1.77 ниже центра плашки */
    }

    .serv-hdr .vert-blck,
    .serv-hdr strong {
        font-size: 16px;
        line-height: 22px;
        font-weight: 400;
    }

    .serv-bdy {
        padding: 13.85px 0 16.45px;  /* шапка → первая строка и последняя → низ = межстрочному по глифам (31.15) */
    }

    .serv-row {
        min-height: 0;
    }

    .serv-row:after,
    .serv-hdr:after {
        display: none;
    }

    .serv-row .vert-blck {
        font-size: 16px;
        line-height: 22px;
        padding: 12px 10px;
    }

    /* Преимущества: кружок → текст 12 (полшага), пара → пара 24 (шаг) */
    .bnft-itm,
    .row .bnft-itm.l-col-2half {
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 0;
    }

    .row .bnft-itm.l-col-2half + .bnft-itm {
        margin-top: 36px;        /* ритм пар 36 — между соседями */
    }

    .bnft-itm p {
        margin: 0 0 -4.8px 0;    /* хвост строки под глифами последней подписи («…в одном месте», без выносных): (22 − 18) / 2 + 3 − 0.3 */
    }

    .crcl-num {
        margin: 0 auto 18px auto;  /* кружок → текст 18 (было 12) */
    }

    .bnft-itm p {
        font-size: 16px;
        line-height: 22px;
    }

    /* Полезные ссылки — эталон, как было */
    .usfl-lnk-lst {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .usfl-itm,
    .usfl-lnk-lst .usfl-itm.l-col-2 {
        width: 50% !important;
        margin: 0;
        padding: 0 6px;
        box-sizing: border-box;
    }

    .usfl-lnk-lst .usfl-itm.l-col-2:nth-child(n+3) {
        margin-top: 24px;          /* ритм рядов 24 — между рядами */
    }

    .usfl-itm a,
    .usfl-itm a:hover,
    .usfl-itm a:active,
    .usfl-itm a:focus {
        display: block;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;           /* ячейка не вылезает за свою колонку */            /* inline-block садился на базовую линию и давал хвост под подписью */
        color: #333;               /* на телефоне ни цвета, ни подчёркивания, ни фона — только курсор */
        text-decoration: none;
        background: none;
        outline: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .usfl-itm .link-img {
        margin: 0 0 10px 0;
    }

    .usfl-itm .lnk-txt {
        display: -webkit-box;       /* до двух строк по словам; одно длинное слово не рвётся и обрезается многоточием */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
        word-break: normal;
        max-width: 100%;
        font-size: 16px;
        line-height: 20px;
        margin-bottom: -1.2px;     /* хвост строки под глифами (по замеру) */
    }

    /* Контакты: кнопки «Войти»/«Регистрация» на мобильном — пункты меню, здесь скрыты;
       модуль с телефоном показывается только здесь (на ПК он hidden) */
    .contacts .contact-clmn-hldr,
    .contcts-clmn {
        display: none;
    }

    .contacts {
        margin: 0;                 /* ПК даёт 90 сверху и снизу — стык был бы 90, а не 72 */
    }

    .mob-contacts[hidden] {
        display: block;
    }

    .mob-contacts {
        margin: 0;                 /* отступ до футера даёт padding контейнера */
        text-align: center;
        font-size: 16px;
        color: #333;
    }

    .mob-contacts p + p {
        margin-top: 3px;           /* телефон → подпись по глифам 12.4 */
    }

    .mob-contacts p {
        margin: 0;
        font-size: 16px;
        line-height: 24px;
    }

    .mob-contacts .mob-contacts-phone a {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 1px;
        font-weight: 400;
        color: #333;
        text-decoration: none;
    }

    .mob-contacts .mob-contacts-caption {
        font-size: 16px;
        line-height: 24px;
        color: #333;
    }

    /* ================= 17. Страница ошибки, устаревший браузер ================= */
    .error-pg,
    body.error-page .error-pg {
        max-width: none;
        padding: 24px 0;
        text-align: center;
    }

    .error-pg h1 {
        font-size: 18px;
        line-height: 24px;
    }

    .error-pg p {
        font-size: 16px;
        line-height: 22px;
    }

    .error-pg .btn-reg,
    body.error-page .error-pg .btn-reg {
        display: block;
        width: 100%;
    }

    .error-img {
        max-width: 60%;
        height: auto;
    }

    /* ================= 18. ЭТАЛОННАЯ ВЫСОТА элементов управления: 61 px ================= */
    /* Эталон — строка меню по гамбургеру (60 + 1 px линии = 61), у Sarafano
       та же высота у полей и главной кнопки формы (61). Одно правило на все
       управляющие элементы; на всю ширину контейнера. Список ниже — единственное
       место, где задана высота; всё, что выше, ею перекрывается. */
    .nav-mnu li,
    .m-admin .nav-mnu li,
    .modal-menu li,
    .btn,
    .m-admin .btn,
    .btn.is-full-width,
    .btn.w-150,
    .btn.w-160,
    .frm-actn .btn.w-150,
    .frm-actn .btn.w-160,
    .modal-promt .btn,
    .modal .frm-actn .btn,
    .enter-frm .frm-actn .btn,
    .row.compn-cntrl .btn,
    .error-pg .btn-reg,
    body.error-page .error-pg .btn-reg,
    .serch-admin .btn,
    .admin-hdr .l-col-2 .btn,
    .cntrl-btn,
    .admin-hdr-btn .frm-tbl-itm .cntrl-btn,
    .frm-table-cntrl .cntrl-btn,
    .request-form .frm-table-cntrl .cntrl-btn,
    .request-form .frm-table-cntrl .cntrl-btn:hover,
    .request-form .frm-table-cntrl .cntrl-btn.m-disable,
    table.m-cards tr td.btn-cell .btn,
    table.m-cards tr td.btn-cell .btn-cell-hldr .btn,
    table.m-cards tr td.btn-cell .cstm-file,
    table.m-cards tr td.btn-cell a,
    table.m-cards.m-cards-doc tr td.btn-cell .btn,
    table.m-cards.m-cards-doc tr td.btn-cell .cstm-file,
    .table-file tr td.btn-cell .btn,
    .table-file tr td.btn-cell .cstm-file,
    .table-file tr:first-child td.btn-cell .btn,
    .table-file tr:last-child td.btn-cell .btn,
    .table-file tr td:last-child.btn-cell .btn,
    .table-form .frm-tgle .btn,
    .provider-frm .table-form .frm-tgle .btn,
    .provider-frm .table-form .frm-tgle .btn.m-disable,
    .cstm-file label .btn,
    .grey-bg .frm-cntrl > .btn,
    .edit-cmnt .frm-cntrl > .btn,
    .contcts-clmn .contcts-actn .btn,
    .tabs li .btn,
    .container-short .tabs .btn,
    .archive-table td .btn,
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .m-admin input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .round-blck .frm-itm input:not([type="checkbox"]):not([type="radio"]),
    .round-blck-btm .frm-itm input:not([type="checkbox"]):not([type="radio"]),
    .round-blck .frm-itm-row input:not([type="checkbox"]):not([type="radio"]),
    .round-blck-btm .frm-itm-row input:not([type="checkbox"]):not([type="radio"]),
    .round-blck input:not([type="checkbox"]):not([type="radio"]),
    .round-blck-btm input:not([type="checkbox"]):not([type="radio"]),
    .table-form td input:not([type="checkbox"]):not([type="radio"]),
    .table-form input,
    .table-form td .inpt-smlt,
    .table-form .inpt-smlt,
    .serch-admin input,
    .m-cards td .frm-itm-cell input,
    .total-clcklt input,
    select,
    .jcf-select,
    .m-admin .jcf-select,
    .round-blck .frm-itm .jcf-select,
    .round-blck-btm .frm-itm .jcf-select,
    .table-form td .jcf-select,
    .table-form .jcf-select,
    .admin-hdr .l-col-2 .jcf-select,
    .round-blck .frm-itm textarea,
    .round-blck-btm .frm-itm textarea,
    .table-form td textarea,
    .m-cards td .frm-itm-cell textarea,
    .serv-hdr,
    .frm-hdr {
        box-sizing: border-box;
        height: 61px;
        min-height: 61px;
        max-height: none;
        line-height: 22px;
    }

    /* Кнопки: на всю ширину контейнера, текст по центру */
    .btn,
    .m-admin .btn,
    .cntrl-btn,
    .btn.w-150,
    .btn.w-160,
    .frm-actn .btn.w-150,
    .frm-actn .btn.w-160,
    .serch-admin .btn,
    .error-pg .btn-reg,
    body.error-page .error-pg .btn-reg,
    .cstm-file label .btn,
    .tabs li .btn,
    .container-short .tabs .btn,
    table.m-cards tr td.btn-cell .btn,
    table.m-cards tr td.btn-cell .btn-cell-hldr .btn,
    table.m-cards tr td.btn-cell .cstm-file,
    table.m-cards tr td.btn-cell a,
    .table-file tr td.btn-cell .btn,
    .table-file tr td.btn-cell .cstm-file,
    .request-form .frm-table-cntrl .cntrl-btn,
    .request-form .frm-table-cntrl .cntrl-btn:hover,
    .request-form .frm-table-cntrl .cntrl-btn.m-disable {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: none;
        padding: 0 16px;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
    }

    .request-form .frm-table-cntrl .cntrl-btn .vert-blck,
    .frm-table-cntrl .cntrl-btn .vert-blck {
        line-height: 22px;
    }

    /* Кнопки в карточках и в шапке заявки — столбиком, а не рядом */
    table.m-cards tr td.btn-cell,
    .admn-table.m-cards tr td.btn-cell,
    table.m-cards.m-cards-doc tr td.btn-cell,
    .table-file tr td.btn-cell,
    .table-file.m-fixed-layout tr td.btn-cell {
        flex: 0 0 100%;
        min-width: 0;
        padding: 8px 0 0 0;
    }

    /* Карточки документов — исключение: «Загрузить» и «Скачать» встают в один
       ряд тем же приёмом, что «Назад/Комментарии»: половина минус полузазор при
       зазоре 12. Третья кнопка карточки (на страницах документов клиента —
       «Очистить»/«Удалить») остаётся под ними во всю ширину. */
    table.m-cards.m-cards-doc tr,
    table.table-file tr {
        column-gap: 12px;
    }

    table.m-cards.m-cards-doc tr td.btn-cell,
    table.table-file tr td.btn-cell,
    table.table-file.m-fixed-layout tr td.btn-cell {
        flex: 0 1 calc(50% - 6px);
    }

    table.m-cards.m-cards-doc tr td.btn-cell ~ td.btn-cell ~ td.btn-cell,
    table.table-file tr td.btn-cell ~ td.btn-cell ~ td.btn-cell {
        flex: 0 0 100%;
    }

    /* Строка добавления (диапазон банка, документ банка) — в ней кнопка одна,
       «Добавить», и она идёт во всю ширину контейнера, как в форме добавления
       банка. Держим исключение рядом с правилом половинок, которое оно отменяет. */
    table.m-cards.m-cards-add tr td.btn-cell,
    table.m-cards.m-cards-doc.m-cards-add tr td.btn-cell {
        flex: 0 0 100%;
    }

    table.m-cards tr td.btn-cell + td.btn-cell,
    .m-cards td.btn-cell + td.btn-cell,
    .table-file tr td.btn-cell + td.btn-cell {
        margin-left: 0;
    }


    .serch-admin {
        flex-direction: column;
    }

    .serch-admin .btn {
        margin-top: 8px;
        border-radius: 4px;
    }

    .serch-admin input {
        border-radius: 4px;
        border-right: 1px solid #A9A9A9;
    }

    /* Поля: текст по центру высоты */
    .jcf-select .jcf-select-text,
    .jcf-select-grey-slct .jcf-select-text,
    .table-form td .jcf-select .jcf-select-text,
    .table-form .jcf-select .jcf-select-text,
    .m-admin .jcf-select .jcf-select-text {
        height: 59px;
        line-height: 59px;
    }

    .table-form td textarea,
    .round-blck .frm-itm textarea,
    .round-blck-btm .frm-itm textarea,
    .m-cards td .frm-itm-cell textarea {
        padding-top: 19px;         /* (61 − 22) / 2 − рамка */
        padding-bottom: 18px;
    }

    .grey-bg textarea,
    .edit-cmnt textarea {
        min-height: 122px;         /* многострочный ввод сообщения — два эталона */
    }

    .frm-hdr {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;            /* ПК даёт 700 — на телефоне наш вес заголовков 500 */
    }

    /* Тарифная сетка держит ПК-размеры (решение владельца) */
    .tarif-hldr .btn,
    .tarif-hldr .btn-hdr .btn,
    .tarif-hldr .btn-hdr-cell .btn,
    .tarif-hldr table td.cngd-trf-cell .btn {
        display: inline-block;
        width: auto;
        height: 41px;
        min-height: 0;
        padding: 0;
        line-height: 41px;
    }

    .tarif-hldr table td.cngd-trf-cell .btn-cell-hldr .btn,
    .tarif-hldr table td.cngd-trf-cell .btn {
        position: absolute;
        width: 50%;
        display: block;
    }

    .tarif-hldr .btn-hdr .btn,
    .tarif-hldr .btn-hdr-cell .btn {
        height: 42px;
        line-height: 42px;
    }

    .tarif-hldr input:not([type="checkbox"]):not([type="radio"]) {
        height: 41px;
        min-height: 0;
    }

    .tarif-hldr .tarif-net-hdr input:not([type="checkbox"]):not([type="radio"]) {
        height: 42px;
    }

    /* Первый блок страницы под шапкой сайта — тот же отступ, что перед заголовком
       модуля (72 по глифам): списки (.row-6), заявка (.container-short-2 > h1),
       настройки (.stng-sctn), вход/регистрация, страница ошибки. У модульных
       заголовков это делает их собственный margin-top. */
    .main > .row-6,
    .main > div > .row-6,
    .admin-hdr .row-6,
    .main > .error-pg {
        margin-top: 67.7px;
    }

    /* Исключение: если ПЕРВЫМ блоком страницы идёт сам заголовок-61 (верхней
       кнопки в его ряду нет), от шапки до него наш межблочный 12, а не 40 —
       иначе заголовок-строка выглядит несимметрично: до текста 70, под ним 42.
       Признак «ряд заголовка без верхней кнопки» — тот же, что у правила
       порядка верха выше; «первый блок» — что ряд идёт сразу за пустым
       .container-short. Там, где первой стоит кнопка или модуль, 40 остаётся
       за ними, и это правило до заголовка не достаёт. */
    .main > .container-short + .row-6:has(> .l-col-8 > h1):not(:has(> .l-col-2 .btn)),
    .main > .container-short + div:not([class]) > .row-6:has(> .l-col-8 > h1):not(:has(> .l-col-2 .btn)) {
        margin-top: 12px;
    }

    /* Пустой .container-short держит свои 35 и схлопывается с отступом ряда,
       побеждая 12, — в этом же случае гасим и его. Условие «без верхней кнопки»
       сюда не вписать: :has() внутри :has() невалиден и правило отбрасывается
       целиком. Различаем по обёртке: у страниц, где заголовок идёт первым, ряд
       лежит в безымянном <div>, а там, где первой стоит кнопка, — в .admin-hdr. */
    .main > .container-short:has(+ div:not([class]) > .row-6 > .l-col-8 > h1) {
        margin-top: 0;
    }

    .container-short-2 > h1,
    .row-6 h1 {
        top: 0;                      /* ПК сдвигает заголовок на 1 px вниз — на телефоне глифы считаем без сдвига */
    }

    /* ПОРЯДОК ВЕРХА СТРАНИЦЫ — одно правило на весь кабинет:
       есть верхняя кнопка (или ряд кнопок) в ряду .row-6 — она идёт первым блоком,
       заголовок под ней (заявка, компания, документы клиента, карточка банка);
       верхней кнопки нет — первым идёт заголовок (списки). Между блоками ряда наш
       межблочный 12. Точечных перебивок по страницам больше нет. */
    .row-6:has(> .l-col-8 > h1) {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* клирфикс-псевдоэлементы .row во флекс-ряду становятся флекс-элементами и
       съедают по зазору — сверху набегало лишних 24 */
    .row-6:has(> .l-col-8 > h1)::before,
    .row-6:has(> .l-col-8 > h1)::after {
        display: none;
    }

    /* общий отступ стопки колонок (раздел 5) складывался бы с gap ряда — зазор
       теперь задаёт только gap */
    .row-6:has(> .l-col-8 > h1) > [class*="l-col-"] + [class*="l-col-"] {
        margin-top: 0;
    }

    .row.row-6:not(:has(> .l-col-2 .btn)) > [class*="l-col-"].l-col-8:has(> h1),
    .admin-hdr .row.row-6:not(:has(> .l-col-2 .btn)) > [class*="l-col-"].l-col-8:has(> h1) {
        order: -1;
        flex: 0 0 100%;
        margin-top: 0;
    }

    /* ================= 19. Кегль 16 везде ================= */
    /* Исключения владельца: подстрочник шапки (14), копирайт (14), текст согласия
       на регистрации .info-txt (14). Тарифная сетка держит ПК-размеры. */
    .m-admin,
    .admn-table,
    .admn-table td,
    .admn-table th,
    table.m-cards td,
    .table-file td,
    .frm-hdr,
    .alert,
    label,
    label.required,
    label.default,
    .table-form td.lbl-cell,
    .table-form td.lbl-cell label,
    .provider-frm .table-form .lbl-cell label,
    .table-file td.lbl-cell,
    .table-file td.lbl-cell .lbl-ttl,
    .table-file td.lbl-cell label,
    table.m-cards.m-cards-doc td .frm-itm-cell.filename-container,
    table.m-cards.m-cards-doc td .filename-container,
    .cstm-file .filename-container,
    .cstm-file label .btn,
    .archive-table td .btn,
    .serch-admin .js-inpt-clear,
    .archive-table .btn,
    .jcf-select .jcf-select-text,
    .jcf-select-text,
    .stng-sctn .ttl,
    .stng-sctn h1,
    .doc-sctn .ttl,
    .doc-sctn h2,
    .ttl,
    strong.ttl,
    h1,
    .admin-hdr h1,
    .row-6 h1,
    .container-short-2 > h1,
    .error-pg h1,
    .stng-sctn h1,
    .vert-blck,
    .cntrl-btn .vert-blck,
    table td.btn-cell .vert-blck,
    .lnk-cell .vert-blck,
    .fnt-10,
    .crcl-num,
    .comment-itm-hdr,
    .filename-container,
    .cstm-file label + span,
    .inpt-smlt,
    .frm-itm-cell,
    .is-txt-cntr.frm-itm-cell,
    .js-inpt-clear,
    .comment-delete-one,
    .news-delete-one,
    .change-password,
    .enter-frm .change-password,
    .enter-frm .change-password.lnk-gap,
    .enter-frm .frm-cntrl .is-right,
    .enter-frm .frm-itm-ln,
    .enter-frm .frm-cntrl,
    .enter-frm .frm-cntrl label,
    .enter-frm .frm-actn p,
    .m-admin .btn,
    .m-admin input,
    .m-admin select,
    .m-admin .jcf-select .jcf-select-text,
    table.m-cards.m-cards-doc tr td.btn-cell .btn,
    table.m-cards.m-cards-doc tr td.btn-cell .cstm-file,
    table.m-cards.m-cards-doc td.btn-cell .vert-blck,
    table.m-cards.m-cards-doc td.btn-cell label,
    .m-cards td .frm-itm-cell input,
    .m-cards td .frm-itm-cell textarea,
    .ftr-mnu li a {
        font-size: 16px;
    }

    .hdr-lft h2,
    .enter-registration .agrmt .info-txt,
    .info-txt {
        font-size: 14px;
    }

    .tarif-hldr .btn,
    .tarif-hldr input,
    .tarif-hldr .vert-blck {
        font-size: 14px;             /* ПК-вид сетки по решению владельца */
    }

    h1,
    .admin-hdr h1,
    .row-6 h1,
    .container-short-2 > h1,
    .error-pg h1,
    .stng-sctn h1,
    strong.ttl {
        line-height: 20px;
        font-weight: 500;
    }

    .crcl-num {
        line-height: 60px;
    }


    /* ================= 20. Чекбокс — по образцу Sarafano (_input.scss) ================= */
    /* appearance:none, 17×17, рамка #e1e1e1, отмеченный — заливка и рамка
       тёмно-синим #407AAA, белая галочка clip-path; группа — flex по центру. */
    body input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        box-sizing: border-box;
        flex: none;
        width: 17px;
        min-width: 17px;
        height: 17px;
        min-height: 17px;
        margin: 0;
        padding: 0;
        border: 1px solid #e1e1e1;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
        outline: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        cursor: pointer;
    }

    input[type="checkbox"]::before {
        content: '';
        display: block;            /* input остаётся inline-block (ПК-правило), псевдоэлементу нужен свой бокс */
        width: 14px;
        height: 14px;
        margin: auto;
        clip-path: polygon(17% 54%, 28% 43%, 38% 54%, 70% 22%, 81% 33%, 38% 75%, 17% 54%);
        transform: scale(0);
        transform-origin: bottom left;
        box-shadow: inset 1em 1em #fff;
    }

    body input[type="checkbox"]:checked {
        border-color: #407AAA;
        background: #407AAA;
    }

    body input[type="checkbox"]:checked::before {
        transform: scale(1);
    }

    .enter-frm .frm-itm-ln,
    .enter-frm .frm-cntrl .frm-itm-ln.is-left {
        display: flex;               /* (0,3,1): перебивает display:block у .frm-cntrl .is-left */
        align-items: center;
        gap: 8px;                    /* зазор квадрат → подпись вдвое больше прежнего (3.9 → 8) */
    }


    .enter-frm .frm-itm-ln label,
    .enter-frm .frm-cntrl label {
        margin: 0;
        line-height: 22px;
    }

    .enter-frm .frm-cntrl input {
        margin-right: 0;
    }


    /* ================= 21. Ритм security-страниц: шаг 40 ================= */
    /* Эталон — зазор под синей плашкой на /resetting/request (.alert margin-bottom 40).
       Тот же шаг: от шапки сайта до первого блока, между блоками, от формы до
       кнопки, вокруг капчи. Текстовые мини-модули (.frm-cntrl на входе, .agrmt)
       компенсируют хвосты своих строк: сверху 5.3 (строка 16/22), снизу 2.2 —
       чтобы по глифам было те же 40. Пара «кнопка → Отмена» не трогается. */
    body.enter-page .main > section.enter,
    body.enter-page .main > section.enter-registration,
    .enter,
    .enter-registration {
        padding: 40px 0;
    }

    body.enter-page .main > section.enter,
    body.enter-page .main > section.enter-registration {
        padding-bottom: 0;           /* низ секции входа/регистрации — без своего отступа: хвост даёт контейнер (40) */
    }

    body.enter-page .l-page > .container {
        padding-bottom: 40px;        /* после последнего блока — 40 */
    }

    .enter-frm .alert,
    .alert.alert-info,
    .alert.alert-danger {
        margin-bottom: 40px;
    }

    .enter-frm .frm-actn,
    .enter-registration .enter-frm .frm-actn {
        margin-top: 40px;
    }

    .enter-registration .enter-frm .capcha-hldr,
    .capcha-hldr,
    .capcha-hldr.mb-25 {
        margin: 40px 0;
    }

    .capcha-hldr + .frm-actn {
        margin-top: 0;               /* капча уже дала 40 снизу */
    }

    .enter-frm .frm-cntrl {
        margin-top: 32.7px;          /* 40 − хвост над глифами первой строки (по замеру) */
        margin-bottom: 0;
    }

    .enter-frm .frm-cntrl:before,
    .enter-frm .frm-cntrl:after {
        display: none;               /* пустые clearfix-элементы становились flex-детьми и добавляли gap */
    }

    .enter-frm .frm-cntrl + .frm-actn {
        margin-top: 38.2px;          /* 40 − хвост под глифами последней строки (по замеру) */
    }

    .enter-registration .agrmt {
        margin-top: 35.2px;          /* 40 − 4.8 (хвост над глифами строки 14/20) */
    }

    /* ================= 22. Плейсхолдеры 16 и список jcf на мобильном ================= */
    input::placeholder,
    textarea::placeholder,
    .inpt-smlt::placeholder,
    .jcf-select .jcf-select-text .jcf-option-dsb-txt {
        font-size: 16px;
    }

    /* Список jcf (до 768 px его рисует jcf, не система): строки эталонной
       высоты тем же приёмом, что ПК-правило в custom.css — высоту даёт не
       height, а отступы вокруг строки текста: 19.5 + 22 + 19.5 = 61. */
    body > .jcf-select-drop .jcf-select-drop-content ul li span,
    .jcf-select-drop .jcf-select-drop-content ul li span {
        padding-top: 19.5px;
        padding-bottom: 19.5px;
        font-size: 16px;
        line-height: 22px;
    }

    /* ================= 23. Текстовые ссылки: на телефоне ни подчёркивания, ни смены цвета ================= */
    a:not(.btn),
    a:not(.btn):hover,
    a:not(.btn):active,
    a:not(.btn):focus {
        text-decoration: none;
        outline: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* ================= 24. Попап согласия (регистрация) — прокрутка только текста ================= */
    /* Крестика Magnific на телефоне нет — закрывают строки «ОК»/«Отмена» внизу
       (структура попапов — в общем блоке «Единый вид ВСЕХ попапов» выше). */
    .mfp-close:not(.btn) {
        display: none;
    }

    /* .modal-menu, скрытый на ПК (mob-only), на телефоне показываем */
    .modal .modal-menu[hidden] {
        display: block;
    }

    /* Cookie-попап: на телефоне ПК-кнопку «Закрыть» прячем — закрывает строка «ОК» */
    #cookie-warning .modal-cont .modal-promt {
        display: none;
    }

    /* Линии-разделители строк даёт border-top у ссылки (общий блок); у самой li
       лишних линий (border-bottom из правила пунктов меню) быть не должно */
    .modal .modal-menu li {
        border-top: 0;
        border-bottom: 0;
    }

    /* ================= 25. Списки заявок/архива: порядок, пейджер, подгрузка ================= */
    /* Пейджер («< 1 >», «1 из N») на телефоне скрыт — вместо него подгрузка.
       Прячем сами .nvgt-*, а не .l-col-2: колонки ниже становятся display:contents. */
    .nvgt-hdr,
    .nvgt-count {
        display: none;
    }

    /* Порядок блоков: create → заголовок → поле поиска → «Искать» → итоги → карточки.
       Все обёртки списка (.row-6, .admin-body, форма поиска, .compn-cntrl и их
       колонки) распускаем в один flex-столбец .main, листовым элементам — order. */
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) {
        display: flex;
        flex-direction: column;
    }

    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .container-short,
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) > div:has(> .row-6),
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .row-6,
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .row-6 > [class^="l-col-"],
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .admin-body,
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .serch-admin,
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .compn-cntrl,
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .compn-cntrl > [class^="l-col-"] {
        display: contents;
    }

    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .compn-cntrl .l-col-3 .btn {
        order: 1;
    }
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .row-6 h1 {
        order: 2;
        margin: 0 0 16px 0;
    }
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .serch-admin .cntrl-inpt {
        order: 3;
    }
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .serch-admin > .btn {
        order: 4;
    }
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .compn-cntrl .compn-stat {
        order: 5;
    }
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) :is(.requests-table, .companies-table) {
        order: 6;
    }
    /* хвост после последнего блока — 40 (даёт padding контейнера): у списка снимаем
       нижний отступ таблицы и нижний margin последней карточки */
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) :is(.requests-table, .companies-table) {
        margin-bottom: 0;
    }
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) :is(.requests-table, .companies-table) tr:last-child {
        margin-bottom: 0;
    }
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .mob-loadmore {
        order: 7;
    }
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) form[action*="report"] {
        order: 1;                    /* архив: «Отчётный период» первым блоком (иначе не доехать) */
    }

    /* «Создать заявку» первой строкой, отступ снизу как между блоками формы */
    .compn-cntrl .l-col-3 .btn {
        margin: 0 0 16px 0;
    }

    /* Поле поиска и «Искать» — на всю ширину, столбиком (переопределяем ряд) */
    .serch-admin .cntrl-inpt {
        margin: 0;
    }

    /* «Всего активных …: N» — слева, число в той же строке */
    .compn-cntrl .compn-stat {
        margin: 8px 0 0 0;
        text-align: left;
    }
    .compn-cntrl .compn-stat li {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px;
        margin: 0;
    }
    .compn-cntrl .compn-stat .stat-name {
        float: none;
        margin: 0;
    }
    .compn-cntrl .compn-stat .stat-value {
        float: none;
        margin: 0;
        white-space: nowrap;
    }

    /* Плашка «не найдено» (строка с colspan) — эталонные 61, текст по центру.
       Строка заголовков скрыта, эта — единственная видимая. */
    .requests-table.m-cards tr td[colspan] {
        flex: 0 0 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 61px;
        text-align: center;
    }
    .requests-table.m-cards tr td[colspan]:before {
        content: none;
    }

    /* Индикатор подгрузки */
    .mob-loadmore {
        padding: 16px 0;
        text-align: center;
        color: #757575;
        font-size: 16px;
    }

    /* Крестик очистки поиска: delete.svg (::before mask, из custom.css), 20 px,
       тап-зона 44×44, по центру поля по вертикали */
    .cntrl-inpt .clear-inpt {
        width: 44px;
        height: 44px;
        right: 0;
        top: 50%;
        margin-top: -22px;
    }
    .cntrl-inpt .clear-inpt::before {
        width: 13px;
        height: 13px;
        transform: translate(-50%, -50%);   /* строго по центру поля (без +3px от общего правила) */
    }
    .cntrl-inpt input {
        padding-right: 44px;
    }

    /* Крестики удаления в переписке и в истории новостей: своей мобильной надстройки
       больше нет. Она увеличивала значок до 16×16 «по высоте строки», и он выходил
       заметно крупнее чернил строки. Остаётся единственный размер, заведённый в
       проекте для delete.svg, — 11×11 (custom.css, общий крестик), тот самый, что
       на ПК выглядит правильно. */

    /* ================= 26. Архив админа: «Отчётный период» + датапикер ================= */
    /* Блок отчёта — как «Срок действия» в форме заявки: подпись над полями,
       два поля-даты в ряд с общей рамкой, кнопка «Отчёт в Excel» на всю ширину. */
    .archive-table,
    .archive-table tbody,
    .archive-table tr {
        display: block;
        width: 100%;
    }

    .archive-table {
        margin: 16px 0 0 0;
        border: 0;
    }

    .archive-table tr {
        display: flex;
        flex-wrap: wrap;
    }

    .archive-table td {
        display: block;
        box-sizing: border-box;
        height: auto;
        border: 0;
        padding: 0;
        background: none !important;
    }

    /* Подпись «Отчётный период» над полями */
    .archive-table td.provider-cell {
        flex: 0 0 100%;
        text-align: left !important;
        font-size: 16px;
        line-height: 20px;
        color: #333;                 /* обычный текст, как везде — не карточная подпись */
        background: none !important;
        border: 0 !important;
        margin: 0 0 13px 0;          /* «Отчётный период» → поля дат = 12 (как поле поиска → «Искать») */
    }

    /* Два поля-даты в ряд, общая рамка */
    .archive-table td.stus-cell,
    .archive-table td.date-cell {
        flex: 1 1 50%;
    }

    .archive-table td.stus-cell .frm-itm-cell,
    .archive-table td.date-cell .frm-itm-cell {
        margin: 0;
    }

    .archive-table td .frm-itm-cell input.smpl-date {
        box-sizing: border-box;
        width: 100%;
        height: 61px;
        border: 1px solid #A9A9A9;
        background-color: #fff;
        text-align: left;            /* плейсхолдер и дата — по левому краю */
        font-size: 16px;
        background-position: right 12px center;  /* иконка календаря справа */
        background-size: 19px auto;              /* иконка календаря ×1.5 меньше */
        padding-left: 12px;                      /* обычный левый отступ */
        padding-right: 36px;                     /* место под иконку справа (19 + 12 + зазор) */
        text-indent: 0;
    }

    .archive-table td.stus-cell .frm-itm-cell input.smpl-date {
        border-radius: 4px 0 0 4px;
    }

    .archive-table td.date-cell .frm-itm-cell input.smpl-date {
        border-left: 0;
        border-radius: 0 4px 4px 0;
    }

    /* Кнопка «Отчёт в Excel» на всю ширину, 61 */
    .archive-table td.client-cell.btn-cell {
        flex: 0 0 100%;
        margin: 5px 0 0 0;           /* поля дат → «Отчёт в Excel» = 12 (как поле поиска → «Искать»); +7 структурного зазора флекс-строки */
    }

    .archive-table td.client-cell.btn-cell,
    .archive-table td.btn-cell .btn-cell-hldr {
        display: block;
        width: 100%;
        max-width: none;             /* .client-cell на ПК max-width:160 — снимаем */
        height: auto;
    }

    .archive-table td.client-cell.btn-cell .btn,
    .archive-table td.btn-cell .btn-cell-hldr .btn,
    .archive-table td.btn-cell .btn {
        display: flex !important;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 61px;
        min-height: 61px;
        line-height: 22px !important;
        padding: 0 16px;
        font-size: 16px;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    /* обёртки кнопки «Отчёт в Excel» — снять ПК-рамки/линии сверху/снизу/справа */
    .archive-table,
    .archive-table tbody,
    .archive-table tr,
    .archive-table td.client-cell.btn-cell,
    .archive-table td.btn-cell .btn-cell-hldr {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }
    /* ПК-обвязка кнопки: снять боковые поля (кнопка во всю ширину, как «Искать»)
       и вертикальные (иначе ячейка выше кнопки на 12px — паразитные зазоры сверху/снизу) */
    .archive-table td.client-cell.btn-cell,
    .archive-table td.btn-cell,
    .archive-table td.btn-cell .btn-cell-hldr {
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Датапикер jQuery UI (.smpl-date, .end-date, .date-range) — по центру экрана,
       во всю ширину минус боковые отступы (12+12) на ЛЮБОЙ ширине, семь колонок
       помещаются целиком (ячейки ужимаются, если надо — меньше 44 допустимо). */
    #ui-datepicker-div {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 24px) !important;
        box-sizing: border-box;
        font-size: 16px;
        z-index: 1200 !important;
        border-radius: 5px;           /* единый радиус попапов */
        overflow: hidden;             /* чтобы скругление обрезало углы шапки/сетки */
    }

    /* Тёмное затемнение под датапикером на весь экран — реальный элемент, тот же
       фон, что у меню по гамбургеру (.navgt: rgba(0,0,0,.8)). Псевдоэлемент body
       в Safari на iPhone не отрисовывался — поэтому именно элемент, а не ::before. */
    .dp-backdrop {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1150;
        background: rgba(0, 0, 0, .8);
    }

    #ui-datepicker-div .ui-datepicker-title,
    #ui-datepicker-div th,
    #ui-datepicker-div td {
        font-size: 16px;
    }

    /* Таблица дней — во всю ширину, семь равных колонок (fixed), последняя
       колонка внутри экрана; ячейки делят ширину поровну и ужимаются под неё */
    #ui-datepicker-div .ui-datepicker-calendar {
        width: 100%;
        table-layout: fixed;
    }

    #ui-datepicker-div th {
        padding: 2px 0;
        text-align: center;
    }

    #ui-datepicker-div td {
        padding: 1px;
    }

    #ui-datepicker-div .ui-state-default {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        height: 40px;
        line-height: 40px;
        padding: 0;
        text-align: center;
        font-size: 16px;
    }

    /* ================= 27. Списки кабинета: строки-61 и ритм 40 ================= */
    /* Общие правила: заголовки страниц и строки-подписи — строка высотой 61,
       текст по вертикальному центру по глифам (поправка top), между соседними
       блоками шаг 40 по глифам (как на security). */
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .compn-cntrl .l-col-3 .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 61px;
        min-height: 61px;
        margin: 0;
        padding: 0 16px;
        line-height: 22px;
    }

    /* Заголовок страницы (ТЕКУЩИЕ ЗАЯВКИ / АРХИВ ЗАЯВОК) — строка 61 по центру */
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .row-6 h1 {
        margin: 0;
        padding: 0;
        text-align: center;
        top: 0;
    }

    /* «Всего активных…: N» у админа — строка 61, по центру, число в строке */
    .m-admin:not(.m-user) .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .compn-stat {
        margin: 0;
    }
    /* Строка «Всего активных …: N» — минимум 61, но на узком экране фраза
       переносится на вторую строку (высота растёт), текст по центру блока;
       число не отрывается от последнего слова (неразрывный пробел перед ним). */
    .m-admin:not(.m-user) .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .compn-stat li {
        display: block;
        box-sizing: border-box;
        min-height: 61px;
        padding: 19.5px 12px;
        line-height: 22px;
        text-align: center;
        white-space: normal;
        margin: 0;
    }
    .m-admin:not(.m-user) .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .compn-stat .stat-name,
    .m-admin:not(.m-user) .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .compn-stat .stat-value {
        display: inline;
        line-height: 22px;
    }
    .m-admin:not(.m-user) .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .compn-stat .stat-value::before {
        content: '\00A0';            /* неразрывный пробел: «…компаниям: N» одной строкой */
    }
    /* админ: «Искать»(бокс) → «Всего»(глиф) 40, «Всего»(глиф) → карточки 40 */
    .m-admin:not(.m-user) .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .compn-stat {
        margin-top: 12px;            /* «Искать»(бокс) → блок «Всего»(бокс) — межкарточный 12 */
    }
    .m-admin:not(.m-user) .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) :is(.requests-table, .companies-table) {
        margin-top: 12px;            /* блок «Всего»(бокс) → карточки — межкарточный 12 */
    }

    /* Ритм 40 по глифам между блоками. Строки-61 центрируют глиф, поэтому
       glyph→glyph 40 = box→box 40 − (61−высота глифов). Задаём margin-top так,
       чтобы глифовый зазор вышел 40 (числа уточняются замером). */
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .compn-cntrl .l-col-3 .btn {
        margin-top: 40px;            /* низ шапки(бокс) → кнопка(бокс) 40 — как на /login до «АВТОРИЗАЦИЯ» */
    }
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .row-6 h1 {
        margin-top: 12px;            /* кнопка(бокс) → блок-заголовок(бокс) — межкарточный 12 */
    }
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .serch-admin .cntrl-inpt {
        margin: 12px 0 0 0;          /* блок-заголовок(бокс) → поле(бокс) — межкарточный 12 */
    }
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .serch-admin > .btn {
        margin-top: 12px;            /* поле(бокс) → «Искать»(бокс) 12 (как между карточками) */
    }
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .compn-cntrl .compn-stat {
        margin-top: 12px;            /* «Искать»(бокс) → блок-итоги(бокс) — межкарточный 12 */
    }
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) :is(.requests-table, .companies-table) {
        margin-top: 12px;            /* блок-итоги(бокс) → карточки — межкарточный 12 */
    }
    /* архив (есть форма отчёта): свои зазоры — шапка→период, кнопка→заголовок,
       Искать→карточки. Специфичность выше общих правил списка (двойной :has + .m-admin). */
    .m-admin .main:has(:is(.requests-table[data-mob-paginate], .companies-table)):has(form[action*="report"]) form[action*="report"] {
        margin: 19.7px 0 0 0;        /* низ шапки → ВЕРХ ГЛИФОВ «Отчётный период» = 40, как до кнопки «Создать заявку» на заявках */
    }
    .m-admin .main:has(:is(.requests-table[data-mob-paginate], .companies-table)):has(form[action*="report"]) .row-6 h1 {
        margin-top: 12px;            /* «Отчёт в Excel»(бокс) → блок «АРХИВ ЗАЯВОК»(бокс) — межкарточный 12 */
    }
    .m-admin .main:has(:is(.requests-table[data-mob-paginate], .companies-table)):has(form[action*="report"]) .requests-table {
        margin-top: 40px;            /* «Искать»(бокс) → карточки 40 */
    }

    /* ================= Настройки (админ и клиент): ритм страницы ================= */
    /* Модули — секции .stng-sctn. ПК даёт им 65 снизу и 36 под заголовком;
       приводим к нашему шагу: между модулями межмодульный 40, заголовок →
       содержимое межблочный 12. Первый блок страницы — сам заголовок, поэтому
       от шапки до него 12 (общее правило раздела 28 ниже). */
    .main .stng-sctn {
        margin: 0 0 40px 0;
    }

    /* Первый модуль: первым блоком страницы идёт заголовок, значит от шапки до
       него наш межблочный 12 (правило «заголовок первым» из раздела 27/28).
       Пустой .container-short держит свои 35 и схлопывался бы поверх. */
    .main:has(.stng-sctn) > .container-short-2 {
        margin-top: 12px;
    }

    .main .stng-sctn:first-of-type {
        margin-top: 0;
    }

    .main .stng-sctn:last-child {
        margin-bottom: 0;
    }

    .main .stng-sctn > h1,
    .main .stng-sctn > strong.ttl {
        margin-top: 0;               /* .main section > h1 даёт 67.7 сверху, он
                                        схлопывался наружу и становился зазором
                                        между модулями вместо наших 40 */
        margin-bottom: 12px;
    }
    /* Внутри модуля — наш межблочный 12. Строки формы носят утилиту mb-35
       (в all-admin.css она объявлена с !important), поэтому перебиваем тем же
       весом. */
    .main .stng-sctn .frm-itm-chk,
    .main .stng-sctn .frm-itm-ln {
        margin: 0 0 12px 0 !important;
    }

    /* Строки-блоки модуля — только прямые дети формы. Внутрь стопок полей с
       общей рамкой (.round-blck и соседние .frm-itm с отрицательными полями)
       не лезем: это принятый вид, он же на заявке и в карточке компании. */
    .main .stng-sctn > form > .frm-itm,
    .main .stng-sctn > form > .round-blck,
    .main .stng-sctn > form > .box {
        margin-bottom: 12px !important;
    }

    .main .stng-sctn .frm-actn,
    .main .stng-sctn ul.tabs {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    /* Ряд «квадрат + подпись» — тот же, что на форме входа и в попапах:
       по вертикальному центру, зазор 8. */
    .main .stng-sctn .frm-itm-chk {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .main .stng-sctn .frm-itm-chk label {
        margin: 0;
        line-height: 22px;
    }

    /* У клиента ряды чекбоксов сдвинуты инлайновым margin-left: 45px — на
       телефоне ряд идёт во всю ширину контейнера, как все остальные блоки. */
    .main .stng-sctn form > div:has(> .frm-itm-chk) {
        margin-left: 0 !important;
    }


    /* ================= 28. Заголовки-61: одно правило на все ================= */
    /* Раньше высота и межстрочный задавались в девяти местах порознь как
       height: 61 / line-height: 61. Пока заголовок в одну строку, это работало;
       как только он переносился (например «ДОБАВЛЕНИЕ ДИАПАЗОНА СУММАРНО
       ВЫДАННЫХ ОБЕСПЕЧЕНИЙ» или «СОЗДАНИЕ И РЕДАКТИРОВАНИЕ ЗАЯВКИ: 123456»),
       вторая строка уходила на 61 вниз и ложилась поверх следующего блока:
       блок оставался 61, а глифы вылезали за него на 40.

       Геометрия взята готовая — ею уже сделана переносящаяся строка «Всего
       активных заявок…» в разделе 27: min-height 61, свой межстрочный 22 (наш
       для текста 16 на телефоне) и поля 19.5 сверху и снизу. 19.5 + 22 + 19.5 = 61,
       поэтому однострочный заголовок остаётся ровно 61 и глифы стоят там же, где
       стояли; двухстрочный вырастает до 83, а поля до первой и после последней
       строки те же 19.5. Сюда же приведены заголовки модулей настроек — у них
       был свой межстрочный 20/24 и высота по содержимому. */
    .container-short-2:has(.admin-hdr .row-6) > h1,
    .container-short-2:has(.admin-hdr .row-6) > .ttl,
    .total-clcklt .clck-ttl,
    .doc-sctn .doc-art > h2,
    .main:has(.company-form) > div > h1,
    .main:has(.company-form) .row-6 h1,
    .main:has(.suppliers-table) .row-6 h1,
    .main:has(.bank-details-hdr) .admin-hdr h1,
    .main:has(:is(.requests-table[data-mob-paginate], .companies-table)) .row-6 h1,
    .main .stng-sctn > h1,
    .main .stng-sctn > strong.ttl {   /* .main — чтобы перебить .main section > h1 {line-height:20px} */
        display: block;
        box-sizing: border-box;
        min-height: 61px;
        height: auto;
        padding-top: 19.5px;
        padding-bottom: 19.5px;
        line-height: 22px;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        white-space: normal;
    }

}