/* =========================================================
           Новый стиль сайта — слой поверх остальных модулей.

           Собран по макетам (холст «Экраны входа») и по образцу страницы
           «Сайт на обслуживании», которая владельцу понравилась: мягкий
           градиентный фон, белая карточка со скруглением 18, поля с
           рамкой и плавающей подписью в акцентном цвете.

           Почему отдельным файлом, а не правками в 01-base и 13-forms:
           старые значения остаются на месте, и стиль снимается удалением
           одной строки <link> в index.html. Подключается ПОСЛЕДНИМ —
           поэтому обычной специфичности хватает, !important не нужен.
           ========================================================= */

        /* --- Фон страницы ------------------------------------------------
           Тот же градиент, что у заглушки обслуживания. fixed: при
           прокрутке длинных экранов (история, новости) фон не «едет»
           полосами, а остаётся ровным. */
        body {
            background-color: #f3f5f9;
            background-image: linear-gradient(135deg, #f3f5f9 0%, #e8f7f0 100%);
            background-attachment: fixed;
        }

        /* --- Карточки-экраны ---------------------------------------------
           Узкие формы (вход, регистрация, привязка, подача без входа)
           становятся белой карточкой: на градиенте она читается как лист
           бумаги, а прежний серый --canvas сливался с фоном. */
        #login-page,
        #register-page,
        #privazka-page,
        #anon-page {
            background-color: #ffffff;
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 28px 26px 24px;
            box-shadow: 0 20px 60px rgba(20, 60, 100, 0.12),
                        0 1px 3px rgba(20, 60, 100, 0.04);
        }

        /* Широкие экраны кабинета остаются светло-серой подложкой: внутри
           у них белые карточки, и белое на белом потеряло бы границы
           разделов. Добавляем рамку — на градиенте край подложки без неё
           размывается. */
        .container.wide {
            border: 1px solid var(--border);
            box-shadow: 0 4px 24px rgba(20, 60, 100, 0.08);
        }

        /* Шапка раздела кабинета: стрелка назад и заголовок слева. В макете
           заголовок 1.4rem, отступ до содержимого 18, шаг между стрелкой и
           текстом 14. По центру их ставил класс text-center от Bootstrap —
           он снят в разметке.

           Раздел ввода показаний (#counter-page) исключён: владельцу он
           нравится как есть. */
        .container.wide:not(#counter-page) > h2 {
            justify-content: flex-start;
            gap: 14px;
            margin: 0 0 18px;
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1.25;
            text-align: left;
        }

        /* --- Заголовок формы входа ---------------------------------------
           В макете «счетчики21.рф» — строка 1.5rem по центру, а не
           крупный заголовок страницы: на карточке он и так единственный. */
        #login-page h1 {
            font-size: clamp(1.35rem, 6vw, 1.5rem);
            margin-bottom: 6px;
            text-align: center;
        }

        /* Подпись под названием. Значения из макета: 0.88rem, отступ до
           формы 24px — столько же, сколько между шапкой и полями на холсте. */
        .login-sub {
            display: block;
            margin: 0 0 24px;
            text-align: center;
            font-size: 0.88rem;
            font-weight: 500;
            color: var(--text-muted);
        }

        /* --- Экран входа: остальные размеры из макета ---------------------- */
        #login-page {
            padding: 32px 28px 26px;
        }

        /* Иконка в плашке — 32px, как на холсте (было 26). */
        .screen-badge {
            font-size: 2rem;
        }

        #login-page h1 {
            margin-bottom: 4px;
        }

        /* «Восстановить» — у левого края, мелко и акцентом. */
        #login-page .help-link {
            display: inline-block;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--accent-info);
        }

        /* Кнопки: у макета отступы вместо жёсткой высоты. min-height
           оставляем из 14-tooltips.css — он держит однострочные кнопки
           одинаковыми, когда текст переносится. */
        #login-page .blue-text-button {
            padding: 13px 22px;
            font-size: 0.98rem;
            font-weight: 700;
        }

        #login-page .outlined-button {
            padding: 12px 22px;
            font-size: 0.95rem;
            font-weight: 600;
        }

        /* Кнопка обхода входа — нейтральная: рамка серая, текст тёмный.
           Зелёной рамкой на холсте отмечена только «Зарегистрироваться». */
        #login-page .login-alt__btn {
            border-color: var(--border);
            color: var(--text);
        }

        /* Наведение у неё своё. Общее правило .outlined-button:hover заливает
           кнопку фирменным градиентом и делает текст белым — но цвет текста
           перебивал селектор выше (id весит больше), и получалась зелёная
           заливка с тёмными буквами. Здесь состояние спокойное: светлая
           подложка и рамка потемнее. */
        #login-page .login-alt__btn:hover,
        #login-page .login-alt__btn:focus,
        #login-page .login-alt__btn:active {
            background: #f6f8fb;
            border-color: #cfd6dd;
            color: var(--text);
        }

        .login-alt {
            margin-top: 20px;
        }

        .login-alt__sep {
            margin-bottom: 14px;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text-muted);
        }

        /* Ссылки под карточкой. Размер и цвет — общие; раскладка разная:
           на большом экране прежний ряд с точками-разделителями, на узком
           столбик по центру (там ряд рвался и точка повисала в начале
           строки) — см. мобильный блок внизу файла. */
        #login-policy-footer,
        .login-policy-text {
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--text-muted);
        }

        .login-policy-text {
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }

        /* --- Поля ввода ---------------------------------------------------
           Были без рамки, на розовато-белом фоне (rgb(255,250,250)).
           В новом стиле — белые, с рамкой и скруглением 10, как в макете.
           Подпись плавает и красится акцентом: это уже умеет 13-forms.css,
           здесь только поверхность поля. */
        input[type="text"],
        input[type="tel"],
        input[type="email"],
        input[type="password"],
        input[type="search"],
        input[type="number"],
        textarea,
        select,
        .form-control {
            background-color: #ffffff;
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text);
            transition: border-color 0.16s ease, box-shadow 0.16s ease;
        }

        /* Фокус — брендовое кольцо вместо браузерного контура. Тот же
           приём, что у карточек ввода показаний. */
        input[type="text"]:focus,
        input[type="tel"]:focus,
        input[type="email"]:focus,
        input[type="password"]:focus,
        input[type="search"]:focus,
        input[type="number"]:focus,
        textarea:focus,
        select:focus,
        .form-control:focus {
            border-color: rgba(44, 182, 125, 0.55);
            box-shadow: 0 0 0 4px rgba(44, 182, 125, 0.14);
            outline: none;
        }

        /* Флажки (согласие при регистрации) — фирменным цветом: браузерный
           серо-синий квадратик выбивался из зелёной формы. */
        input[type="checkbox"] {
            accent-color: var(--accent-info);
        }

        /* Ошибку оставляем красной: правило .is-invalid из 01-base.css
           идёт раньше, и без этого повтора зелёный фокус перекрывал бы
           красную рамку ровно в тот момент, когда человек правит поле. */
        .is-invalid,
        .is-invalid:hover,
        .is-invalid:focus {
            border: 1px solid var(--accent-danger);
            box-shadow: 0 0 0 4px rgba(194, 54, 69, 0.18);
        }

        /* --- Иконка-плашка ------------------------------------------------
           Квадрат со скруглением 20 и мятной заливкой — тот же приём, что
           на заглушке обслуживания (там она жёлтая, потому что предупреждает).
           Класс общий: его можно поставить любому экрану, который получит
           иконку в шапке. */
        .screen-badge {
            width: 72px;
            height: 72px;
            margin: 0 auto 14px;
            border-radius: 20px;
            background: rgba(44, 182, 125, 0.12);
            color: var(--brand);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
        }

        /* --- Шапки разделов ------------------------------------------------
           В макете заголовок экрана — это квадратная кнопка «назад» с
           рамкой, затем название. Разметку не меняем: стрелка уже лежит
           внутри h2 отдельным элементом, ей и придаём вид кнопки. */
        h2 {
            font-size: 1.4rem;
            /* Bootstrap сбрасывает заголовкам вес до 500, и рядом с
               макетом они выглядели тонкими. На холсте все заголовки 700. */
            font-weight: 700;
            gap: 14px;
            margin-bottom: 18px;
        }

        #login-page h1 {
            font-weight: 700;
        }

        .back-arrow {
            width: 36px;
            height: 36px;
            flex-shrink: 0;
            margin-left: 0;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: #ffffff;
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.125rem;   /* 18px — размер стрелки в макете */
            transition: border-color 0.16s ease, color 0.16s ease;
        }

        .back-arrow:hover {
            border-color: rgba(44, 182, 125, 0.45);
            color: var(--accent-info);
        }

        /* --- Кнопки -------------------------------------------------------
           Градиент и тень у .blue-text-button уже есть (07-buttons.css);
           в макете скругление крупнее — 12 вместо 10. */
        .blue-text-button,
        .outlined-button {
            border-radius: 12px;
        }

        /* --- Модальные окна ------------------------------------------------
           Те же поверхности, что у карточек-экранов: скругление 18 и мягкая
           глубокая тень вместо прежней жёсткой. */
        .modal-content {
            border-radius: 18px;
            box-shadow: 0 24px 60px rgba(15, 25, 40, 0.18),
                        0 2px 6px rgba(15, 25, 40, 0.06);
        }

        /* --- Экраны входа: размеры из макета --------------------------------
           Ширины разные у каждого экрана — так на холсте: карточка ровно под
           содержимое, а не одна на всех. Перебиваем 14-tooltips.css, где
           стояли 385px и 440px. */
        #login-page  { width: 100%; max-width: 420px; }
        #anon-page   { width: 100%; max-width: 420px; }
        #privazka-page { width: 100%; max-width: 440px; }
        /* Ограничение общее для всех ширин. Когда оно стояло только для
           окон шире 992px, на планшете карточка регистрации растягивалась
           во весь экран: там своего max-width не оставалось, а мобильное
           правило ниже задаёт ширину «всё минус отступы». */
        #register-page.register-layout { width: 100%; max-width: 460px; }

        #login-page,
        #register-page,
        #privazka-page,
        #anon-page {
            padding: 28px 28px 26px;
        }

        /* Шапка экрана: стрелка, плашка, заголовок — в одну строку. */
        #register-page > h2,
        #privazka-page > h2,
        #anon-page > h2 {
            align-items: center;
            justify-content: flex-start;
            gap: 14px;
            margin-bottom: 20px;
            line-height: 1.2;
            /* Разметка ставит этим заголовкам class="text-center", и текст
               вставал по центру остатка строки. На макете он прижат влево,
               сразу за стрелкой. */
            text-align: left;
        }

        #register-page > h2,
        #anon-page > h2 { font-size: 1.5rem; margin-bottom: 22px; }
        #privazka-page > h2 { font-size: 1.35rem; }

        /* Иконка-плашка в шапке. */
        .screen-plaque {
            width: 44px;
            height: 44px;
            flex-shrink: 0;
            border-radius: 14px;
            background: #e8f7f0;
            color: var(--brand);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
        }

        /* --- Окно приёма показаний ------------------------------------------
           На макете плашка зелёная и без рамки: это справка, а не
           предупреждение. Была голубая (#f3f8ff) с рамкой. */
        .anon-period {
            gap: 12px;
            background: #e8f7f0;
            border: none;
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 20px;
        }

        .anon-period > i {
            margin-top: 1px;
            font-size: 1.15rem;
        }

        .anon-period b {
            font-size: 0.95rem;
            font-weight: 700;
            margin-bottom: 0;
        }

        .anon-period span span {
            display: block;
            margin-top: 2px;
            font-size: 0.85rem;
            font-weight: 500;
            color: #4d6473;
        }

        /* Пояснение над полем. */
        .anon-hint,
        .privazka-confirm__text {
            font-size: 0.92rem;
            font-weight: 500;
            line-height: 1.45;
            color: var(--text);
            margin: 0 0 14px;
        }

        .anon-hint--small {
            margin: 6px 2px 0;
            font-size: 12px;
            line-height: 1.4;
            color: var(--text-muted);
        }

        /* Подсказка под полем (почта, лицевой счёт на регистрации). */
        .form-hint {
            margin: 6px 2px 0;
            font-size: 12px;
            font-weight: 500;
            line-height: 1.4;
            color: var(--text-muted);
        }

        /* --- Требования к паролю --------------------------------------------
           В макете отметки плоские: зелёная галочка у выполненного правила,
           красный крестик у невыполненного. На сайте это были кружки —
           серый контур, который при выполнении заливался зелёным, и про
           невыполненное правило он ничего не говорил. */
        .password-requirements li .pr-mark {
            width: 15px;
            height: 15px;
            border: none;
            border-radius: 0;
            background: transparent;
            color: var(--accent-danger);
            /* В макете значки нарисованы линией толщиной 2.4 — текстовая
               галочка рядом смотрелась тоньше. Обводкой добираем вес. */
            font-size: 15px;
            font-weight: 700;
            -webkit-text-stroke: 0.6px currentColor;
            transform: none;
        }

        .password-requirements li .pr-mark::before {
            content: '\2715';   /* ✕ */
        }

        .password-requirements li.is-met .pr-mark {
            background: transparent;
            border-color: transparent;
            color: var(--accent-success);
            transform: none;
        }

        .password-requirements li.is-met .pr-mark::before {
            content: '\2713';   /* ✓ */
        }

        /* Цвет строки одинаковый у обоих состояний — как на макете: про
           выполнение говорит значок, а не ещё и оттенок текста. */
        .password-requirements li,
        .password-requirements li.is-met {
            color: #475467;
        }

        /* --- Строка с лицевым счётом ----------------------------------------
           Серая подложка вместо голубой — как на макете. */
        .anon-ls-badge,
        .privazka-ls {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #f3f5f9;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 10px 14px;
            margin-bottom: 18px;
            font-size: 0.85rem;
            font-weight: 500;
            color: #4d6473;
        }

        .anon-ls-badge b,
        .privazka-ls__value {
            flex-grow: 1;
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text);
        }

        .privazka-ls__edit {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--accent-info);
        }

        /* --- Приём закрыт ----------------------------------------------------
           Плашка серая и крупнее: это не ошибка и не подсказка, а состояние
           экрана — в макете она нейтральная, 72px. */
        .anon-closed__icon {
            width: 72px;
            height: 72px;
            margin: 0 auto 16px;
            border-radius: 20px;
            background: #f3f5f9;
            color: var(--text-muted);
            font-size: 2rem;
        }

        .anon-closed__title {
            font-size: 1.25rem;
            font-weight: 700;
            line-height: 1.3;
            margin: 0 0 12px;
        }

        .anon-closed__text {
            font-size: 0.95rem;
            font-weight: 500;
            line-height: 1.5;
            color: #4d6473;
            margin: 0 0 16px;
        }

        .anon-closed__next {
            margin-top: 16px;
            padding: 12px 18px;
            border: 1px solid #cfe9dc;
            border-radius: 12px;
            background: #e8f7f0;
            font-size: 1rem;
            font-weight: 700;
            color: var(--text);
        }

        /* --- Крестик в окнах ------------------------------------------------
           В макете это квадрат со скруглением 10 на серой подложке. */
        .modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 10px;
            background: #f3f5f9;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            cursor: pointer;
            transition: background-color 0.16s ease, color 0.16s ease;
        }

        .modal-close:hover {
            background: #e9edf3;
            color: var(--text);
        }

        /* --- Восстановление пароля -------------------------------------------
           Оба шага — из макета: плашка с иконкой, заголовок, подпись, поле,
           кнопка. Разметку этих окон собирает app.js. */
        /* Позиционирование НЕ трогаем: у этих окон класс modal-content--toast,
           он ставит position: absolute с left: 50% и сдвигом на половину
           ширины. Стоило заменить его на relative — и карточку унесло вправо
           от обычного места. Крестику точка отсчёта и так есть: absolute
           создаёт её сам. */
        #restoreModal .modal-content {
            max-width: 420px;
            padding: 28px 28px 26px;
            border: 1px solid var(--border);
            box-shadow: 0 20px 60px rgba(20, 60, 100, 0.12);
            text-align: center;
        }

        #restoreModal h2 {
            display: block;
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1.25;
            margin: 0 0 4px;
            text-align: center;
        }

        /* Шаг с кодом: заголовок длиннее и в макете он 1.3rem. Шаги живут в
           одном окне и различаются содержимым — на втором есть ячейки кода. */
        #restoreModal .modal-content:has(#restore_code_cells) h2 {
            font-size: 1.3rem;
        }

        #restoreModal .modal-content:has(#restore_code_cells) .modal-sub {
            margin-bottom: 18px;
        }

        .modal-sub {
            margin: 0 0 22px;
            font-size: 0.88rem;
            font-weight: 500;
            line-height: 1.45;
            color: var(--text-muted);
            text-align: center;
        }

        /* Подпись над ячейками кода. */
        #restoreModal .code-input__label {
            display: block;
            margin: 0 0 14px;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text);
            text-align: left;
        }

        /* Ячейки кода: шесть равных колонок во всю ширину, как в макете —
           было шесть фиксированных 44px по центру. */
        .code-input {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 8px;
            margin: 0 0 14px;
        }

        .code-input__cell {
            width: 100%;
            height: 54px;
            border: 1px solid var(--border);
            border-radius: 10px;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text);
        }

        /* Отступы по макету: между блоками 14. Мешали три чужих правила —
           `mb-3` от Bootstrap (16px), пустая строка ошибки (10px сверху она
           занимала всегда) и высота 48 с отступом 12 у кнопок в таких окнах. */
        #restoreModal .form-floating.mb-3 {
            margin-bottom: 14px;
        }

        #restoreModal .error {
            margin-top: 8px;
        }

        #restoreModal .error:empty {
            display: none;
            margin: 0;
        }

        /* Требования к паролю — строками слева, как в макете регистрации.
           Карточка выравнивает содержимое по центру, и список наследовал
           это от неё. */
        #restoreModal .password-requirements {
            margin-bottom: 14px;
            text-align: left;
        }

        #restoreModal .btn {
            margin-top: 0;
            height: auto;
            border-radius: 12px;
            padding: 13px 18px;
            font-size: 0.95rem;
            font-weight: 700;
        }

        #restoreModal .modal-btn-secondary {
            border: 1.5px solid #d8e2ec;
            background: #ffffff;
            color: var(--text);
            font-weight: 600;
            padding: 12px 18px;
        }

        /* --- Окна правок в кабинете -----------------------------------------
           Смена пароля, телефона, почты: разметку подставляет app.js в общее
           окно #editModal. Набор правил тот же, что у восстановления пароля —
           одно окно по смыслу, значит и вид один. */
        #editModal .modal-content {
            max-width: 420px;
            padding: 28px 28px 26px;
            border: 1px solid var(--border);
            box-shadow: 0 20px 60px rgba(20, 60, 100, 0.12);
        }

        #editModal h2 {
            display: block;
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1.25;
            margin: 0 0 18px;
            text-align: center;
        }

        #editModal .form-floating.mb-3 {
            margin-bottom: 14px;
        }

        #editModal .error {
            margin-top: 8px;
        }

        #editModal .error:empty {
            display: none;
            margin: 0;
        }

        /* Требования к паролю — по левому краю: заголовок окна центрируется,
           и список наследовал это выравнивание, хотя читается он строками. */
        #editModal .password-requirements {
            text-align: left;
        }

        #editModal .btn {
            margin-top: 0;
            height: auto;
            border-radius: 12px;
            padding: 13px 18px;
            font-size: 0.95rem;
            font-weight: 700;
        }

        /* Значок над заголовком — такой же, как в окне выхода: кружок 64
           со скруглением 18. У удаления он красный: это единственное
           необратимое действие в кабинете. */
        .modal-badge {
            width: 64px;
            height: 64px;
            margin: 0 auto 14px;
            border-radius: 18px;
            background: #e8f7f0;
            color: var(--accent-info);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
        }

        .modal-badge--danger {
            background: #fdecea;
            color: #c62828;
        }

        /* Вариант для окон, где заголовок стоит слева (лицевые счета,
           добавление ЛС): значок идёт В ОДНУ СТРОКУ с заголовком и меньше
           размером. Кружок 64 над заголовком слева смотрелся громоздко и
           съедал высоту окна — в макетах этих окон значка нет вовсе. */
        .modal-head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }

        /* Заголовок внутри строки со значком — без собственных отступов.
           Селекторы с идентификатором перечислены отдельно: выше этим
           заголовкам задан отступ снизу такими же селекторами, и правило
           по классу его не перебивало. Нижний отступ внутри строки,
           выровненной по центру, поднимал текст относительно значка. */
        .modal-head h2,
        #accountDataModal .modal-head h2,
        #notificationModal .modal-head .confirm-modal__title,
        #lsSwitchModal .modal-head .confirm-modal__title,
        #lsAddModal .modal-head .confirm-modal__title,
        #houseChatsModal .modal-head .confirm-modal__title {
            margin: 0;
        }

        .modal-badge--start {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            margin: 0;
            border-radius: 12px;
            font-size: 1.05rem;
        }

        #lsAddModal .form-hint {
            margin: 8px 2px 0;
        }

        #editModal .modal-sub {
            margin: 0 0 18px;
        }

        /* Подпись над полем («Подтвердите паролем») — слева, мелко. */
        .edit-modal__label {
            margin: 0 0 8px;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-muted);
            text-align: left;
        }

        /* Ряд кнопок. Раньше стоял инлайновым стилем в разметке — оттуда
           его не перебить ни одним файлом стилей. Кнопки равной ширины,
           шаг 10. */
        .edit-modal__actions {
            display: flex;
            gap: 10px;
            margin-top: 16px;
        }

        .edit-modal__actions .btn {
            flex: 1 1 0;
            margin: 0;
        }

        #editModal .modal-btn-secondary {
            border: 1.5px solid #d8e2ec;
            background: #ffffff;
            color: var(--text);
            font-weight: 600;
            padding: 12px 18px;
        }

        /* --- «Где искать лицевой счёт» ---------------------------------------
           Карточка уже (520 вместо 800), картинка со скруглением 12, а текст
           шагов показываем всегда: в макете он есть и на широком экране, где
           раньше оставалась одна картинка. */
        .modal-content.modal-content-ls-inst {
            position: relative;
            width: 100%;
            max-width: 520px;
            padding: 26px 28px 22px;
            border-radius: 18px;
            box-shadow: 0 20px 60px rgba(20, 60, 100, 0.12);
            text-align: left;
        }

        .modal-content.modal-content-ls-inst img {
            margin-bottom: 18px;
            border-radius: 12px;
        }

        .ls-help-text {
            display: block;
            text-align: left;
        }

        .ls-help-text__title {
            margin: 0 0 12px;
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--text);
        }

        .ls-help-text__steps {
            margin: 0 0 14px;
            padding-left: 20px;
            font-size: 0.92rem;
            font-weight: 500;
            line-height: 1.6;
            color: var(--text);
        }

        .ls-help-text__note {
            margin: 0 0 18px;
            font-size: 0.85rem;
            font-weight: 500;
            line-height: 1.5;
            color: var(--text-muted);
        }

        /* --- Окна политик ---------------------------------------------------
           Длинный текст под прокруткой. В макете шапка отделена линией, а
           текст внизу уходит в затухание — так видно, что он продолжается,
           и не нужна полоса прокрутки (её тут намеренно нет, см.
           17-tariff-cards.css). */
        /* Значения ниже взяты из макета (артборд «Политики») один в один:
           ширина, отступы, тень, размеры шрифта и межстрочный. На 800px
           строка уходила почти во весь экран, и длинный юридический текст
           читался тяжело. */
        #privacyPolicyModal .modal-content,
        #confidentialityPolicyModal .modal-content {
            width: 100%;
            /* 680, а не 540 из макета: на живом тексте политики узкая
               колонка гналась вниз бесконечной лентой. 680 держит строку
               в районе 80 знаков — предел, за которым читать тяжело. */
            max-width: 680px;
            padding: 26px 28px 24px;
            border: 1px solid var(--border);
            border-radius: 18px;
            box-shadow: 0 20px 60px rgba(20, 60, 100, 0.12);
        }

        /* Текстовый блок. Раньше размеры стояли в атрибуте style прямо в
           разметке — оттуда их не перебить ни одним файлом стилей. */
        .policy-text {
            padding: 18px 0 0;
            font-size: 0.9rem;
            font-weight: 500;
            line-height: 1.55;
            color: var(--text);
            text-align: left;
        }

        .policy-text p {
            margin: 0 0 12px;
        }

        .policy-text p:last-child {
            margin-bottom: 0;
        }

        /* Ссылки в тексте политик: адрес сайта и почта поддержки. Вес — как
           у текста вокруг, как в макете; выделяет их цвет. Наведение — как
           везде на сайте: меняется оттенок. Подчёркивание, которое до этого
           появлялось здесь при наведении (04-modals.css), убрано — больше
           нигде на сайте ссылки так себя не ведут. */
        .policy-text a {
            color: var(--accent-info);
            text-decoration: none;
            transition: color 0.18s ease;
        }

        #privacyPolicyModal .policy-text a:hover,
        #privacyPolicyModal .policy-text a:focus,
        #confidentialityPolicyModal .policy-text a:hover,
        #confidentialityPolicyModal .policy-text a:focus {
            color: var(--accent-info-hover);
            text-decoration: none;
            outline: none;
        }

        /* Номера разделов («1. Общие положения») — тёмные. Акцентным
           зелёным в этом окне остаются только ссылки: когда им выделен
           каждый подзаголовок, выделение перестаёт что-либо значить. */
        #privacyPolicyModal strong,
        #confidentialityPolicyModal strong {
            color: var(--text);
            font-weight: 700;
        }

        #privacyPolicyModal .header-with-close,
        #confidentialityPolicyModal .header-with-close {
            align-items: flex-start;
            justify-content: flex-start;
            gap: 14px;
            text-align: left;
            padding-right: 0;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
        }

        #privacyPolicyModal .header-with-close h2,
        #confidentialityPolicyModal .header-with-close h2 {
            /* Тёмный, а не акцентный: на макете цветом выделены ссылки и
               подзаголовки внутри текста, а название окна — обычное.

               Стрелка лежит внутри заголовка, и по макету она выровнена
               по верху. В макете название влезает в одну строку, и это
               ровно; в окне поуже оно переносится на две — стрелка 36px
               оказывалась выше середины блока. Поэтому центрируем: на
               однострочном названии выглядит так же, как в макете. */
            color: var(--text);
            font-size: 1.2rem;
            font-weight: 700;
            line-height: 1.3;
            align-items: center;
            gap: 14px;
            margin: 0;
        }

        /* Затухание — липкой псевдострокой в конце прокручиваемого блока.
           Отрицательный margin-top кладёт её поверх последних строк, а не
           добавляет высоту; клики она не перехватывает. */
        #privacyPolicyModal .modal-content::after,
        #confidentialityPolicyModal .modal-content::after {
            content: '';
            display: block;
            position: sticky;
            bottom: -24px;
            height: 56px;
            /* Поля из макета: полоса выходит на боковые отступы карточки и
               ложится на её нижний край, повторяя скругление. */
            margin: -56px -28px -24px;
            border-radius: 0 0 18px 18px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 70%);
            pointer-events: none;
        }

        /* --- Окна кабинета ---------------------------------------------------
           Учётные данные, уведомления, лицевые счета, добавление и
           открепление ЛС, чаты по дому, выход. Ширины и отступы — по
           макетам, каждое своё; общее — рамка, скругление 18 и тень.
           Позиционирование не трогаем: у всех .modal-content--toast. */
        #accountDataModal .modal-content,
        #notificationModal .modal-content,
        #lsSwitchModal .modal-content,
        #lsAddModal .modal-content,
        #houseChatsModal .modal-content,
        #lsRemoveModal .modal-content,
        #logoutModal .modal-content {
            border: 1px solid var(--border);
            border-radius: 18px;
            box-shadow: 0 20px 60px rgba(20, 60, 100, 0.12);
        }

        #accountDataModal .modal-content,
        #notificationModal .modal-content,
        #lsAddModal .modal-content,
        #houseChatsModal .modal-content {
            max-width: 440px;
            padding: 26px 26px 22px;
        }

        #lsSwitchModal .modal-content {
            max-width: 460px;
            padding: 26px 26px 22px;
        }

        #lsRemoveModal .modal-content {
            max-width: 420px;
            padding: 28px 26px 22px;
        }

        #logoutModal .modal-content {
            max-width: 400px;
            padding: 30px 26px 24px;
        }

        /* Заголовки окон: в макетах 1.35rem, а отступ снизу свой у каждого —
           там, где под заголовком идёт подпись, он короткий (6). */
        #accountDataModal h2,
        #notificationModal .confirm-modal__title,
        #lsSwitchModal .confirm-modal__title,
        #lsAddModal .confirm-modal__title,
        #houseChatsModal .confirm-modal__title {
            font-size: 1.35rem;
            font-weight: 700;
            line-height: 1.25;
            margin: 0 0 6px;
        }

        #accountDataModal .modal-head {
            margin-bottom: 18px;
        }

        #notificationModal .modal-head {
            margin-bottom: 16px;
        }

        #notificationModal .confirm-modal__title {
            margin-bottom: 16px;
        }

        #lsRemoveModal .ls-remove__title {
            font-size: 1.25rem;
            font-weight: 700;
            line-height: 1.3;
            margin: 0 0 14px;
        }

        /* Подписи под заголовками. */
        #lsSwitchModal .confirm-modal__text,
        #lsAddModal .confirm-modal__text,
        #houseChatsModal .confirm-modal__text {
            margin: 0 0 16px;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-muted);
        }

        #lsRemoveModal .ls-remove__hint {
            margin: 0 0 18px;
            font-size: 0.9rem;
            font-weight: 500;
            line-height: 1.45;
            color: var(--text-muted);
        }

        /* Окно выхода: кружок с иконкой, как в макете, и текст крупнее —
           это единственное содержимое окна. */
        .logout-badge {
            width: 64px;
            height: 64px;
            margin: 0 auto 16px;
            border-radius: 18px;
            background: #e8f7f0;
            color: var(--accent-info);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.7rem;
        }

        #logoutModal .modal-content {
            text-align: center;
        }

        #logoutModal p {
            margin: 0 0 20px;
            font-size: 0.98rem;
            font-weight: 600;
            line-height: 1.5;
            color: var(--text);
        }

        /* Вторая строка — пояснение, в макете она светлее и тоньше. */
        .logout-note {
            font-weight: 500;
            color: var(--text-muted);
        }

        /* Кнопки в столбик во всю ширину, шаг 10. */
        #logoutModal .btn {
            width: 100%;
            margin: 0;
        }

        #logoutModal .blue-text-button {
            margin-bottom: 10px;
        }

        /* Кнопки во всех этих окнах: главная — градиент 13/18, вторая —
           белая с серой рамкой 12/18, скругление 12. */
        #notificationModal .confirm-modal__btn,
        #lsSwitchModal .confirm-modal__btn,
        #lsAddModal .confirm-modal__btn,
        #houseChatsModal .confirm-modal__btn,
        #lsRemoveModal .ls-remove__btn,
        #logoutModal .btn {
            height: auto;
            border-radius: 12px;
            padding: 13px 18px;
            font-size: 0.95rem;
            font-weight: 700;
        }

        #notificationModal .confirm-modal__btn--cancel,
        #lsSwitchModal .confirm-modal__btn--cancel,
        #lsAddModal .confirm-modal__btn--cancel,
        #houseChatsModal .confirm-modal__btn--cancel,
        #lsRemoveModal .ls-remove__btn--cancel,
        #logoutModal .modal-btn-secondary {
            border: 1.5px solid #d8e2ec;
            background: #ffffff;
            color: var(--text);
            font-weight: 600;
            padding: 12px 18px;
        }

        #logoutModal .blue-text-button {
            padding: 13px 22px;
        }

        #logoutModal .modal-btn-secondary {
            padding: 12px 22px;
        }

        /* На узком экране «Автозавершение сеанса» при 15px не помещалось
           рядом с «3 месяца» и ломалось посередине. Подпись отдельной
           строкой снизу выглядела ещё хуже — оставляем одну строку, но
           чуть мельче шрифт и теснее отступы: так название влезает
           целиком. */
        @media (max-width: 480px) {
            /* Поля окна поуже: при 26 с каждой стороны на название пункта
               оставалось около 170 px, и «Автозавершение сеанса» всё равно
               ломалось на две строки даже шрифтом 14. */
            #accountDataModal .modal-content {
                padding: 22px 16px 18px;
            }

            #accountDataModal .account-menu__item {
                gap: 8px;
                padding: 9px 12px;
            }

            #accountDataModal .account-menu__title {
                font-size: 14px;
            }

            #accountDataModal .account-menu__hint {
                font-size: 12px;
            }
        }

        /* Пункты меню в учётных данных — белые строки с рамкой.
           height: auto обязателен: в этих окнах кнопкам задана жёсткая
           высота 48, и вторая строка («3 месяца» под названием на узком
           экране) вылезала за пределы карточки. */
        #accountDataModal .account-menu__item {
            /* margin: 0 — в 12-toast.css любой кнопке во всплывающем окне
               задан отступ сверху; вместе с шагом 8 между пунктами выходило
               около 20. */
            margin: 0;
            height: auto;
            min-height: 52px;
            gap: 12px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: #ffffff;
            padding: 12px 14px;
            font-size: 0.92rem;
            font-weight: 600;
            color: var(--text);
        }

        /* --- Внутренности окон кабинета ---------------------------------------
           Строки списков одинаковы в трёх окнах (уведомления, лицевые счета,
           чаты): номер/адрес 0.95rem жирным, подпись 0.82rem серым. */
        .modal-content .ls-list__num {
            font-size: 0.95rem;
            font-weight: 700;
        }

        .modal-content .ls-list__addr,
        .modal-content .ls-list__sub {
            margin-top: 2px;
            font-size: 0.82rem;
            font-weight: 500;
            line-height: 1.35;
            color: var(--text-muted);
        }

        /* Чаты по дому: слева значок-плашка 40, справа «Открыть».
           Не сетка, а гибкая строка с переносом. В сетке колонка под адрес
           фиксирована, и длинный адрес («г. Чебоксары, пр-кт.
           Тракторостроителей, д. 68») рассыпался по одному слову в строку —
           в макете адрес короткий и потому влезал рядом со ссылкой.
           При переносе короткий адрес остаётся рядом со ссылкой, как в
           макете, а длинный занимает всю ширину, и ссылка уходит под него. */
        .modal-content .ls-list__item.ls-list__item--house {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 10px 14px;
        }

        .ls-list__item--house .house-icon {
            flex: 0 0 40px;
        }

        /* 200px — та ширина, ниже которой адрес ломается некрасиво: как
           только её не остаётся, ссылка переносится сама. */
        .ls-list__item--house .ls-list__main {
            flex: 1 1 200px;
            min-width: 0;
        }

        .house-open {
            flex: 0 0 auto;
            margin-left: auto;
            white-space: nowrap;
        }

        /* Список ссылок и «чатов пока нет» — своей строкой во всю ширину. */
        .ls-list__item--house .ls-list__chats,
        .ls-list__item--house .ls-list__chats-empty {
            flex: 1 1 100%;
        }

        .house-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: #e8f7f0;
            color: var(--accent-info);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
        }

        .house-open,
        .house-open:link,
        .house-open:visited {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--accent-info);
            text-decoration: none;
        }

        .house-open:hover,
        .house-open:focus {
            color: var(--accent-info-hover);
            text-decoration: none;
        }

        .house-open i {
            font-size: 0.75rem;
        }

        /* Уведомления: получатель — одна серая строка, а не голубой блок в
           две. «Включить все» в макете ссылка, а не кнопка с рамкой. */
        #notificationModal .notify-email {
            flex-direction: row;
            align-items: center;
            gap: 10px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: #f3f5f9;
            padding: 10px 14px;
            margin: 0 0 16px;
        }

        #notificationModal .notify-email__label {
            font-size: 0.78rem;
        }

        #notificationModal .notify-email__value {
            flex-grow: 1;
            text-align: right;
            font-size: 0.9rem;
        }

        #notificationModal .notify-toolbar {
            margin: 0 0 12px;
        }

        #notificationModal .notify-toolbar__counter {
            font-weight: 600;
        }

        #notificationModal .modal-content .notify-toolbar__toggle-all,
        .modal-content #notification-toggle-all {
            border: 0;
            border-radius: 0;
            background: transparent;
            padding: 0;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--accent-info);
        }

        .modal-content #notification-toggle-all:hover {
            background: transparent;
            color: var(--accent-info-hover);
        }

        /* Общее правило 12-toast.css для кнопок в окнах — ширина 100%,
           высота 48 и отступ сверху — раздувало и эту ссылку-кнопку, и ряд
           кнопок внизу, а у списка оставался старый отступ сверху 16. В
           «Уведомлениях» между строками выходило по 50 вместо 12 и 18.
           Окно выхода сюда не входит: там шаг 10 между кнопками задан
           отдельно. */
        .modal-content #notification-toggle-all {
            width: auto;
            height: auto;
            margin: 0;
        }

        #notificationModal .ls-list,
        #lsSwitchModal .ls-list,
        #houseChatsModal .ls-list {
            margin: 0 0 18px;
        }

        #notificationModal .confirm-modal__btn,
        #lsSwitchModal .confirm-modal__btn,
        #lsAddModal .confirm-modal__btn,
        #houseChatsModal .confirm-modal__btn,
        #lsRemoveModal .ls-remove__btn {
            margin-top: 0;
        }

        /* Тумблер: в макете 44×26 со скруглением 13, выключенный светлее,
           включённый залит фирменным градиентом. */
        .modal-content button.ls-list__toggle {
            height: 26px !important;
            min-height: 26px !important;
            max-height: 26px;
            border-radius: 13px;
            background: #e3e8ef;
        }

        .modal-content button.ls-list__toggle::after {
            top: 3px;
            left: 3px;
        }

        .modal-content button.ls-list__toggle.is-on {
            background: var(--brand-grad);
        }

        .modal-content button.ls-list__toggle.is-on::after {
            transform: translateX(18px);
        }

        /* Выбранный лицевой счёт: в макете белый, с зелёной рамкой и
           кольцом вокруг — заливки там нет. */
        .modal-content .ls-list__item.is-active {
            background: #ffffff;
            border-color: var(--accent-info);
            box-shadow: 0 0 0 3px rgba(44, 182, 125, 0.12);
        }

        .modal-content .ls-list__item.is-active .ls-list__radio {
            border: 6px solid var(--accent-info);
        }

        .modal-content .ls-list__item.is-active .ls-list__radio::after {
            display: none;
        }

        /* Учётные данные: каждое поле в рамке. */
        #accountDataModal .account-fields {
            gap: 12px;
            margin: 0 0 18px;
        }

        #accountDataModal .account-field {
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 10px 14px;
        }

        #accountDataModal .account-field__label {
            font-size: 0.72rem;
            font-weight: 600;
            margin-bottom: 3px;
        }

        #accountDataModal .account-field__edit {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--accent-info);
        }

        /* Поле — обычный блок, а не колонка флекса: иначе отметка о
           подтверждении почты становится отдельной строкой, а в макете
           она стоит сразу за адресом. */
        #accountDataModal .account-field {
            display: block;
        }

        #accountDataModal .account-field__value {
            display: inline;
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text);
        }

        #accountDataModal .account-field__verify {
            display: inline-flex;
            margin: 0 0 0 8px;
            vertical-align: middle;
        }
        /* Правило выше весит больше, чем .account-field__verify.hidden из
           18-sessions.css, и пустая отметка показывалась, пока статус почты
           ещё грузится. Скрытое состояние — тем же весом. */
        #accountDataModal .account-field__verify.hidden {
            display: none;
        }

        /* Отметка «подтверждена» — в макете это мелкая зелёная строка с
           галочкой, без заливки и рамки: серо-зелёная пилюля рядом с
           адресом выглядела как ещё одна кнопка. */
        #accountDataModal .email-verify-badge--ok {
            padding: 0;
            background: transparent;
            font-size: 0.75rem;
            color: #1f9d5d;
        }

        /* Меню без общей рамки-коробки: в макете это отдельные строки с
           шагом 8. */
        #accountDataModal .account-menu {
            border: 0;
            border-radius: 0;
            background: transparent;
            overflow: visible;
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 18px;
        }

        /* Низ окна: кнопка во всю ширину и красная ссылка под ней. */
        #accountDataModal .account-modal__footer {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        #accountDataModal .account-modal__footer .btn {
            width: 100%;
            height: auto;
            margin: 0;
            border-radius: 12px;
            padding: 13px 22px;
            font-size: 0.95rem;
            font-weight: 700;
        }

        /* «Удалить учётную запись» — ссылка по виду. Общее правило для
           кнопок в окнах делало её широкой, высотой 48 и с отступом сверху:
           между ней и «Закрыть» выходило около 45 вместо 12. */
        #accountDataModal .account-modal__delete {
            width: auto;
            height: auto;
            margin: 0;
            padding: 2px 6px;
            border: 0;
            background: transparent;
            font-size: 0.85rem;
            font-weight: 600;
            color: #c23645;
        }

        /* --- Новости компании -------------------------------------------------
           В макете это отдельные белые карточки на подложке раздела, а не
           один блок с разделителями: контейнер делаем прозрачным, карточку
           собираем сеткой — дата встаёт справа от заголовка. */
        #news-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 0;
            margin-bottom: 18px;
            border: 0;
            background: transparent;
            box-shadow: none;
        }

        #news-container .news-item {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: baseline;
            gap: 0 10px;
            margin: 0;
            padding: 18px;
            border: 1px solid #e3e8ef;
            border-radius: 12px;
            background: #ffffff;
        }

        #news-container .news-item h3 {
            grid-column: 1;
            grid-row: 1;
            margin: 0 0 6px;
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text);
        }

        #news-container .news-item .news-date {
            grid-column: 2;
            grid-row: 1;
            margin: 0;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--text-muted);
            text-align: right;
        }

        #news-container .news-item p:not(.news-date) {
            grid-column: 1 / -1;
            margin: 0 0 12px;
            font-size: 0.9rem;
            font-weight: 500;
            line-height: 1.5;
            color: #4d6473;
        }

        #news-container .news-item__more {
            grid-column: 1 / -1;
            justify-self: start;
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--accent-info);
        }

        /* Листание: в макете кнопки по центру с шагом 12, «Предыдущая»
           белая с рамкой, «Следующая» с градиентом. */
        .pagination-container {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin: 0;
        }

        .pagination-container button {
            width: auto;
            height: auto;
            margin: 0;
            border-radius: 12px;
            padding: 12px 22px;
            font-size: 0.92rem;
            font-weight: 700;
        }

        /* Белый вид у кнопок листания — признак не «предыдущей», а
           выключенной. В макете белой нарисована «Предыдущая», но там она
           именно выключена (первая страница), а активная «Следующая» —
           с градиентом. Обе кнопки зелёные, пока по ним есть куда идти.

           Выключенная кнопка. Градиент с полупрозрачностью давал бледную
           заливку и почти белые буквы поверх неё — нечитаемо. Гасим её
           целиком: белая кнопка с серой рамкой и серым текстом, как
           «Предыдущая» на первой странице в макете. */
        .pagination-container button:disabled,
        .pagination-container button:disabled:hover {
            opacity: 1;
            border: 1.5px solid #d8e2ec;
            background: #ffffff;
            color: #a9b6c0;
            box-shadow: none;
            transform: none;
            cursor: default;
        }

        /* --- Вопросы и ответы -------------------------------------------------
           Каждый вопрос — белая карточка со скруглением 12; раскрытая
           обведена зелёным. Инлайновые стили из app.js сняты, иначе эти
           правила не имели бы силы. */
        /* Отступы мельче, чем в макете (там 16/18 и шаг 10): в макете
           нарисовано пять вопросов, а в базе их тринадцать — с макетными
           величинами список переставал помещаться на экран и страница
           начинала прокручиваться, чего до нового стиля не было. */
        #faq-list .accordion-item {
            margin-bottom: 6px;
            border: 1px solid #e3e8ef;
            border-radius: 12px;
            background: #ffffff;
            overflow: hidden;
        }

        #faq-list .accordion-item:has(.accordion-button:not(.collapsed)) {
            border-color: var(--accent-info);
        }

        #faq-list .accordion-button,
        #faq-list .accordion-button:not(.collapsed) {
            padding: 12px 16px;
            background: #ffffff;
            font-size: 0.98rem;
            font-weight: 700;
            color: var(--text);
            box-shadow: none;
        }

        #faq-list .accordion-body {
            padding: 0 16px 14px;
            background: #ffffff;
            font-size: 0.9rem;
            font-weight: 500;
            line-height: 1.55;
            color: #4d6473;
        }

        /* Реквизиты — см. блок «Реквизиты: вариант 3» ниже. Прежние правила
           карточек с двумя колонками удалены вместе со старой сборкой. */

        /* --- Платежные документы ----------------------------------------------
           В макете список квитанций — белая карточка со строками, без
           полосатых рядов и без тени; у свежей квитанции кнопка с
           градиентом, у прошлых — ссылка. */
        #receipt-page .table-container {
            margin-bottom: 16px;
            border: 1px solid #e3e8ef;
            border-radius: 12px;
            background: #ffffff;
            box-shadow: none;
            overflow: hidden;
        }

        #receipt-page .table tbody tr,
        #receipt-page .table tbody tr:nth-of-type(odd) {
            background: #ffffff;
        }

        #receipt-page .table tbody tr:hover {
            background: #f8fafc;
        }

        /* Высота строк. У верхней строки ссылка оформлена кнопкой, у
           остальных — текстом, и строки различались ровно на высоту
           кнопки. Задаём общую высоту: в таблице height работает как
           «не ниже», поэтому строка с кнопкой не сожмётся. */
        #receipt-page .table td {
            height: 64px;
            padding: 14px 18px;
            border: 0;
            border-bottom: 1px solid #eef2f7;
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text);
            vertical-align: middle;
        }

        #receipt-page .table tbody tr:last-child td {
            border-bottom: 0;
        }

        /* Вторая строка под месяцем — «к оплате N ₽» или «оплачено».
           Берётся из ведомости начислений (сальдо на конец месяца). */
        .receipt-month__sub {
            display: block;
            margin-top: 2px;
            font-size: 0.82rem;
            font-weight: 500;
            color: var(--text-muted);
        }

        #receipt-page .table td:last-child {
            text-align: right;
        }

        /* Прошлые месяцы — ссылка. */
        #receipt-page .btn-download,
        #receipt-page .btn-download:link,
        #receipt-page .btn-download:visited {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 0;
            border-radius: 0;
            background: none;
            box-shadow: none;
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--accent-info);
        }

        #receipt-page .btn-download i {
            display: none;
        }

        /* Верхняя строка — свежая квитанция, у неё кнопка. */
        #receipt-page .table tbody tr:first-child .btn-download,
        #receipt-page .table tbody tr:first-child .btn-download:link,
        #receipt-page .table tbody tr:first-child .btn-download:visited {
            padding: 9px 16px;
            border-radius: 10px;
            background: var(--brand-grad);
            box-shadow: 0 2px 6px rgba(44, 182, 125, 0.28);
            color: #ffffff;
            font-weight: 700;
        }

        #receipt-page .table tbody tr:first-child .btn-download i {
            display: inline-block;
        }

        /* Обводка вокруг кнопки. Кольцо для клавиатуры оставляем, но с
           отступом — вплотную к краю оно читалось как вторая рамка; после
           клика мышью кольца быть не должно вовсе. */
        #receipt-page .btn-download:focus:not(:focus-visible) {
            outline: none;
        }

        #receipt-page .btn-download:focus-visible {
            outline: 2px solid var(--accent-info);
            outline-offset: 3px;
        }

        /* На телефоне у карточек-переходов стрелка справа, и длинное
           название («История начислений и оплат») упиралось в неё вплотную. */
        @media (max-width: 767px) {
            #receipt-page .info-buttons-grid h3 {
                padding-right: 26px;
            }
        }

        /* Две карточки-перехода под списком — только на широком экране.
           На телефоне у них своя раскладка из 06-mobile.css: мелкий
           значок, скрытое описание и стрелка справа. Эти правила стояли
           без ограничения по ширине и ломали её. */
        @media (min-width: 768px) {
            #receipt-page .info-buttons-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 14px;
            }

            #receipt-page .info-buttons-grid button {
                gap: 6px;
                padding: 18px;
            }

            #receipt-page .info-buttons-grid img {
                width: 24px;
                height: 24px;
                margin-bottom: 0;
            }

            #receipt-page .info-buttons-grid h3 {
                margin: 0;
                font-size: 1rem;
                font-weight: 700;
            }

            #receipt-page .info-buttons-grid p {
                margin: 0;
                font-size: 0.85rem;
                font-weight: 500;
                color: var(--text-muted);
            }

            /* Стрелки в углу в макете нет. */
            #receipt-page .info-buttons-grid button > span {
                display: none;
            }
        }

        /* --- Истории: поля фильтров --------------------------------------------
           Сводка, график и таблица в этих разделах уже совпадают с макетом;
           расходились только поля выбора: в макете скругление 12, высота 50
           и общая рамка, без собственной тени. */
        /* Высота жёсткая, а не «не ниже 50»: в поле счётчика стоит значок
           26px, и с вертикальными отступами оно выходило выше поля года.
           Панель выравнивает поля по нижнему краю — год вместе с подписью
           съезжал вниз на эту разницу. */
        #history-readings-page .hist-meter-dd__trigger,
        #payment-history-page .hist-meter-dd__trigger,
        #history-readings-page .hist-toolbar__field .form-control,
        #payment-history-page .hist-toolbar__field .form-control {
            box-sizing: border-box;
            height: 50px;
            min-height: 50px;
            padding: 0 44px 0 14px;
            border: 1px solid var(--border);
            border-radius: 12px;
            font-size: 0.92rem;
            box-shadow: none;
        }

        #history-readings-page .hist-toolbar__field .form-control:hover,
        #payment-history-page .hist-toolbar__field .form-control:hover {
            box-shadow: none;
        }

        /* Год короткий — правый отступ под стрелку меньше (правило из
           16-history.css перебито сокращённой записью выше). */
        #history-readings-page .hist-meter-dd--year .hist-meter-dd__trigger,
        #payment-history-page .hist-meter-dd--year .hist-meter-dd__trigger {
            padding-right: 34px;
        }

        /* --- Тарифы -----------------------------------------------------------
           Карточка в макете с отступом 18, название чуть мельче, цена
           1.5rem вместо 1.7. */
        #actual-rates-page .tariff-card {
            padding: 18px;
        }

        #actual-rates-page .tariff-card__title {
            font-size: 0.92rem;
        }

        #actual-rates-page .tariff-card__price {
            font-size: 1.5rem;
        }

        #actual-rates-page .tariff-card__unit {
            font-size: 0.85rem;
        }

        /* --- Режим работы, приборы учета, реквизиты ---------------------------
           Карточки лежат прямо на подложке раздела: своя серая коробка с
           отступом 1rem под ними в макете не нарисована — она добавляла
           вторую рамку вокруг уже обведённых карточек. */
        .container.wide .custom-grafik-container {
            padding: 0;
            border-radius: 0;
            background: transparent;
            gap: 14px;
        }

        .container.wide .grafik-card {
            padding: 18px;
        }

        /* Плашка «Запланируйте поверку» лежит снаружи сетки карточек, и её
           боковой отступ 1rem повторял снятый выше padding сетки
           (см. 16-history.css). Отступ остался — и плашка стала уже
           карточек ровно на два его значения. Снимаем; снизу оставляем
           14, как шаг между карточками. */
        #info-counters-page .meters-pov-call {
            margin: 0 0 16px;
        }

        /* Сама плашка — по макету «Приборы учета»: предупреждение в тёплых
           тонах, а не ещё одна белая карточка. Белой она терялась среди
           карточек счётчиков, хотя это единственное действие на экране.
           Только для светлой темы: в тёмной у плашки свои цвета
           (theme-dark.css), и жёлтая подложка там бы засветилась. */
        body:not(.dark-theme) #info-counters-page .meters-pov-call {
            gap: 6px 12px;
            padding: 14px 16px;
            border: 1px solid #ffe3b0;
            border-radius: 12px;
            background: #fff8e8;
            box-shadow: none;
        }

        body:not(.dark-theme) #info-counters-page .meters-pov-call__icon {
            width: 34px;
            height: 34px;
            border-radius: 9px;
            background: #ffffff;
            color: #d28a1f;
            font-size: 0.95rem;
        }

        body:not(.dark-theme) #info-counters-page .meters-pov-call__label {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text);
        }

        body:not(.dark-theme) #info-counters-page .meters-pov-call__hint {
            font-size: 0.82rem;
            font-weight: 500;
            color: #6f7e8a;
        }

        /* Номера — тёмные жирные, как в макете; при наведении оттенок
           значка, чтобы было видно, что это ссылка на звонок. */
        body:not(.dark-theme) #info-counters-page .meters-pov-call .pov-notice__phone {
            font-weight: 700;
            color: var(--text);
            text-decoration: none;
        }

        body:not(.dark-theme) #info-counters-page .meters-pov-call .pov-notice__phone:hover,
        body:not(.dark-theme) #info-counters-page .meters-pov-call .pov-notice__phone:focus {
            color: #b8741a;
        }

        body:not(.dark-theme) #info-counters-page .meters-pov-call .pov-notice__sep {
            color: #c9a86a;
        }

        /* --- Главная кабинета: шапка -------------------------------------------
           В макете все элементы шапки — прямоугольники со скруглением 12:
           и выбор ЛС (была капсула 999), и значки (были кругами). Отступы
           у кнопок не трогаем — у них свои мобильные величины. */
        /* Шаг и отступ из макета — только на широком экране. Раньше здесь
           стояли и перенос, и шаг 12 без ограничения по ширине: на телефоне
           они перебивали мобильную раскладку из 06-mobile.css (одна строка,
           шаг 6), и кнопка «Выход» уходила на отдельную строку. */
        @media (min-width: 769px) {
            #detailed-info .logout-container {
                gap: 12px;
                margin-bottom: 16px;
            }
        }
        #detailed-info .date-weather-info {
            flex-grow: 1;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text-muted);
        }

        #detailed-info .ls-switch {
            border-radius: 12px;
        }

        #detailed-info .ls-switch__value {
            font-size: 0.92rem;
            font-weight: 700;
        }

        #detailed-info .icon-button {
            border-radius: 12px;
            color: var(--text-muted);
        }

        #detailed-info .icon-button:hover {
            color: var(--accent-info);
        }

        #detailed-info .logout-button {
            border-radius: 12px;
            padding: 11px 18px;
            font-size: 0.9rem;
            font-weight: 700;
        }

        /* Адрес под шапкой — только на широком экране. На телефоне адрес
           оформлен карточкой в 06-mobile.css с отступами 12 сверху и 16
           снизу; это правило стояло без ограничения по ширине, с тем же
           селектором и позже по порядку — обнуляло те отступы, и шапка
           почти упиралась в карточку. */
        @media (min-width: 769px) {
            #detailed-info > p:has(#address-info) {
                margin: 0 0 6px;
                font-size: 1rem;
                font-weight: 600;
                color: var(--text);
            }
        }

        /* --- Режим работы: вариант 1 («сейчас открыто») ------------------------
           Выбран владельцем на холсте «Режим работы — варианты». Один список
           отделов: часы на сегодня, статус по текущему времени, звонок;
           строка раскрывается в неделю. Сетка карточек, в которой отделы
           лежали раньше, для списка не нужна. */
        #grafik-cards-container.custom-grafik-container {
            display: block;
        }

        .gr-now {
            margin: -8px 0 14px 50px;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text-muted);
        }

        .gr-list {
            background: #ffffff;
            border: 1px solid #e3e8ef;
            border-radius: 12px;
            overflow: hidden;
        }

        .gr-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 200px 200px 16px;
            align-items: center;
            gap: 16px;
            padding: 14px 18px;
            border-bottom: 1px solid #eef2f7;
            cursor: pointer;
            transition: background-color 0.15s ease;
        }

        .gr-row:last-child {
            border-bottom: 0;
        }

        .gr-row:hover,
        .gr-row.is-open {
            background: #fbfcfd;
        }

        .gr-row:focus-visible {
            outline: 2px solid var(--accent-info);
            outline-offset: -2px;
        }

        /* Колонки заданы явно. Без этого у строки без статуса и без
           телефона («Личный прием населения») скрытый статус выпадал из
           сетки, и стрелка съезжала влево, в колонку статуса. На телефоне
           колонки переопределены в мобильном блоке ниже. */
        .gr-main { grid-column: 1; }
        .gr-pill { grid-column: 2; }
        .gr-call { grid-column: 3; }
        .gr-chev { grid-column: 4; }

        .gr-name {
            font-size: 0.98rem;
            font-weight: 700;
            color: var(--text);
        }

        .gr-today {
            margin-top: 3px;
            font-size: 0.82rem;
            font-weight: 500;
            color: var(--text-muted);
        }

        .gr-pill {
            justify-self: start;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            padding: 5px 11px;
            font-size: 0.8rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .gr-pill::before {
            content: '';
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: currentColor;
        }

        .gr-pill--open   { background: #e8f7f0; color: #1f9d5d; }
        .gr-pill--lunch  { background: #fff4e0; color: #b8741a; }
        .gr-pill--closed { background: #eef2f7; color: #6f7e8a; }
        .gr-pill--h24    { background: #eaf4ff; color: #2a78d6; }

        .gr-call,
        .gr-call:link,
        .gr-call:visited {
            justify-self: end;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: #ffffff;
            padding: 8px 12px;
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--text);
            text-decoration: none;
            white-space: nowrap;
        }

        .gr-call:hover,
        .gr-call:focus {
            border-color: rgba(44, 182, 125, 0.45);
            color: var(--text);
            text-decoration: none;
        }

        .gr-call i {
            color: var(--accent-info);
        }

        .gr-call--empty {
            border: 0;
            padding: 0;
        }

        .gr-chev {
            font-size: 1.2rem;
            line-height: 1;
            color: #a9b6c0;
            transition: transform 0.15s ease;
        }

        .gr-row.is-open .gr-chev {
            transform: rotate(90deg);
        }

        .gr-detail {
            grid-column: 1 / -1;
            cursor: default;
        }

        .gr-week {
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
            gap: 8px;
        }

        .gr-day {
            border: 1px solid #e3e8ef;
            border-radius: 10px;
            background: #ffffff;
            padding: 9px 10px;
        }

        .gr-day b {
            display: block;
            margin-bottom: 3px;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .gr-day span {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--text);
        }

        .gr-day.is-off span {
            font-weight: 600;
            color: #a9b6c0;
        }

        .gr-day .gr-day__short {
            display: none;
        }

        .gr-day.is-night span {
            color: #2a78d6;
        }

        .gr-day.is-today {
            border-color: var(--accent-info);
            box-shadow: 0 0 0 3px rgba(44, 182, 125, 0.12);
        }

        .gr-day.is-today b {
            color: var(--accent-info);
        }

        .gr-extra {
            display: flex;
            flex-wrap: wrap;
            gap: 6px 18px;
            margin-top: 10px;
            font-size: 0.82rem;
            font-weight: 500;
            color: var(--text-muted);
        }

        .gr-extra a {
            font-weight: 700;
            color: var(--accent-info);
            text-decoration: none;
        }

        /* Планшет: колонки по 200 под статус и телефон зажимали название до
           двух-трёх строк («Аварийно-/диспетчерская/служба»). Статус уходит
           под название, телефон — справа на обе строки, номер виден. */
        @media (min-width: 601px) and (max-width: 991px) {
            .gr-row {
                grid-template-columns: minmax(0, 1fr) auto;
                gap: 8px 16px;
            }

            .gr-main {
                grid-column: 1;
                grid-row: 1;
            }

            .gr-pill {
                grid-column: 1;
                grid-row: 2;
            }

            .gr-call,
            .gr-call:link,
            .gr-call:visited {
                grid-column: 2;
                grid-row: 1 / span 2;
                align-self: center;
            }

            .gr-chev {
                display: none;
            }
        }

        /* Телефон: статус под названием, звонок — квадратный значок справа. */
        @media (max-width: 600px) {
            .gr-now {
                margin: -6px 0 12px 48px;
                font-size: 0.78rem;
            }

            .gr-row {
                grid-template-columns: minmax(0, 1fr) 40px;
                gap: 6px 10px;
                padding: 12px 14px;
            }

            .gr-main {
                grid-column: 1;
                grid-row: 1;
            }

            .gr-pill {
                grid-column: 1;
                grid-row: 2;
                padding: 3px 9px;
                font-size: 0.72rem;
            }

            .gr-call,
            .gr-call:link,
            .gr-call:visited {
                grid-column: 2;
                grid-row: 1 / span 2;
                align-self: center;
                width: 40px;
                height: 40px;
                justify-content: center;
                padding: 0;
                border-radius: 12px;
            }

            .gr-call__text,
            .gr-chev {
                display: none;
            }

            .gr-week {
                gap: 4px;
            }

            .gr-day {
                padding: 6px 2px;
                border-radius: 8px;
                text-align: center;
            }

            .gr-day b {
                font-size: 0.64rem;
            }

            .gr-day span {
                font-size: 0.7rem;
            }

            /* «Выходной» в узкую плитку не помещается — прочерк. */
            .gr-day .gr-day__long {
                display: none;
            }

            .gr-day .gr-day__short {
                display: inline;
            }
        }

        /* --- Реквизиты: вариант 3 («плитки и копирование») ---------------------
           Выбран владельцем на холсте «Реквизиты — варианты». Сверху
           карточка организации с адресом, ниже коды плитками, внизу банк и
           счета с кнопкой «Скопировать» — реквизиты переписывают в банковское
           приложение, и длинный номер счёта удобнее скопировать, чем набрать. */
        .rq {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .rq-card {
            background: #ffffff;
            border: 1px solid #e3e8ef;
            border-radius: 12px;
        }

        .rq-org {
            padding: 18px;
        }

        .rq-org__name {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--text);
        }

        .rq-org__full {
            margin-top: 3px;
            font-size: 0.85rem;
            font-weight: 500;
            line-height: 1.4;
            color: var(--text-muted);
        }

        .rq-addr {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px dashed #dde3e9;
        }

        /* Второй адрес (когда юридический и фактический разные) — без
           повторной черты: оба адреса одним блоком. */
        .rq-addr + .rq-addr {
            margin-top: 10px;
            padding-top: 0;
            border-top: 0;
        }

        .rq-addr__icon {
            flex-shrink: 0;
            margin-top: 2px;
            font-size: 0.95rem;
            color: var(--accent-info);
        }

        .rq-addr__value {
            font-size: 0.9rem;
            font-weight: 600;
            line-height: 1.45;
            color: var(--text);
        }

        .rq-addr__label {
            margin-top: 2px;
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--text-muted);
        }

        .rq-codes {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
        }

        .rq-tile {
            padding: 12px 14px;
        }

        .rq-tile__label,
        .rq-row__label {
            margin-bottom: 4px;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .rq-tile__value {
            font-size: 1.02rem;
            font-weight: 700;
            color: var(--text);
            overflow-wrap: anywhere;
        }

        .rq-bank {
            overflow: hidden;
        }

        .rq-bank__head {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 18px;
            border-bottom: 1px solid #eef2f7;
            font-size: 0.92rem;
            font-weight: 700;
            color: var(--text);
        }

        .rq-bank__head i {
            color: var(--accent-info);
        }

        .rq-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 14px;
            padding: 14px 18px;
            border-bottom: 1px solid #eef2f7;
        }

        .rq-row:last-child {
            border-bottom: 0;
        }

        .rq-row__value {
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            color: var(--text);
            overflow-wrap: anywhere;
        }

        /* Кнопка копирования. Размеры и цвета заданы явно во всех
           состояниях: общее правило button:hover из 01-base.css красит
           любые кнопки в зелёный. */
        .rq-copy,
        .rq-copy:hover,
        .rq-copy:focus,
        .rq-copy:active {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: auto;
            height: auto;
            min-height: 0;
            margin: 0;
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: #ffffff;
            box-shadow: none;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text);
            cursor: pointer;
            white-space: nowrap;
        }

        .rq-copy:hover {
            border-color: rgba(44, 182, 125, 0.45);
        }

        .rq-copy i {
            color: var(--accent-info);
        }

        .rq-copy.is-done,
        .rq-copy.is-done:hover {
            border-color: var(--accent-info);
            color: var(--accent-info);
        }

        /* Телефон: плитки по две, кнопка копирования — квадратный значок. */
        @media (max-width: 600px) {
            .rq {
                gap: 10px;
            }

            .rq-org {
                padding: 16px;
            }

            .rq-codes {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }

            .rq-tile {
                padding: 11px 12px;
            }

            .rq-tile__value,
            .rq-row__value {
                font-size: 0.95rem;
            }

            .rq-bank__head,
            .rq-row {
                padding: 12px 14px;
            }

            .rq-copy,
            .rq-copy:hover,
            .rq-copy:focus,
            .rq-copy:active {
                width: 34px;
                height: 34px;
                padding: 0;
            }

            .rq-copy__text {
                display: none;
            }
        }

        /* --- Плашка про cookie -----------------------------------------------
           Всплывает над экраном входа при первом заходе, поэтому приводим
           её к тем же величинам, что у карточек и окон: скругление 18,
           рамка, мягкая тень, кнопки со скруглением 12. */
        #cookieBanner {
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 20px 22px;
            box-shadow: 0 20px 60px rgba(20, 60, 100, 0.12);
        }

        #cookieBanner button {
            border-radius: 12px;
        }

        #cookieBanner .cookie-accept {
            padding: 13px 22px;
            font-weight: 700;
        }

        /* «Подробнее» — нейтральная, как вторые кнопки в окнах: белая с
           серой рамкой. Раньше она была с зелёной рамкой и заливалась
           градиентом при наведении — ровно тот эффект, который на экране
           входа уже пришлось убрать. */
        #cookieBanner .cookie-more {
            border: 1.5px solid #d8e2ec;
            background: #ffffff;
            color: var(--text);
            padding: 12px 18px;
        }

        #cookieBanner .cookie-more:hover,
        #cookieBanner .cookie-more:focus {
            border-color: #cfd6dd;
            background: #f6f8fb;
            color: var(--text);
        }

        /* Своя граница — 768: до неё плашка стоит по центру шириной 480,
           а не растягивается, как карточки-экраны на 991. */
        @media (max-width: 768px) {
            #cookieBanner {
                left: 12px;
                right: 12px;
                bottom: 12px;
                padding: 16px 16px 14px;
            }
        }

        /* --- Мобильный ------------------------------------------------------
           На телефоне карточки прижимаются к краям (06-mobile.css и
           13-forms.css), скругление там своё — тень убираем, иначе она
           рисуется по краю экрана серой полосой. */
        @media (max-width: 991px) {
            #login-page,
            #register-page,
            #privazka-page,
            #anon-page {
                box-shadow: 0 6px 20px rgba(20, 60, 100, 0.10);
            }

            /* Поля у модальных окон. Свои мобильные правила (96vw и подобные)
               я перекрыл шириной 100%, и окна легли от края до края. Ширину
               задаём «экран минус 24» — по 12 с каждой стороны, как у
               карточек-экранов. */
            .modal .modal-content {
                width: calc(100% - 24px);
                max-width: calc(100% - 24px);
                margin-left: auto;
                margin-right: auto;
            }

            /* Политикам — тем же весом, через идентификаторы: выше им задана
               ширина селектором с id, и правило по классам его не перебивало,
               сколько бы ниже ни стояло. */
            #privacyPolicyModal .modal-content,
            #confidentialityPolicyModal .modal-content {
                width: calc(100% - 24px);
                max-width: calc(100% - 24px);
            }

            /* Центрирование. В 13-forms.css этим карточкам задан
               `align-self: stretch` с `width: auto` и `margin: 12px` — на
               узком экране это давало нужную ширину во весь экран, но на
               окне 600–991px карточка упиралась в свой max-width и
               прижималась влево.

               Одними авто-полями это не чинится: во флексе элемент с
               `margin: auto` по поперечной оси перестаёт растягиваться и
               сжимается по содержимому. Поэтому ширину задаём явно —
               «всё минус отступы», — а центрируем через align-self. */
            #login-page,
            #register-page.register-layout,
            #privazka-page,
            #anon-page {
                align-self: center !important;
                width: calc(100% - 24px) !important;
                margin: 12px auto !important;
            }

            /* Ссылки под карточкой — столбиком, как в макете телефона.
               Точки-разделители там не нужны: на переносе они оставались
               висеть в начале строки. */
            #login-policy-footer {
                flex-direction: column;
                align-items: center;
                gap: 6px;
            }

            #login-policy-footer a.help-link + a.help-link::before {
                content: none;
            }
        }

/* ===== Сеансы и устройства ===== */

/* Подпись под заголовком — по центру, как заголовок и значок над ним. */
.modal-content--sessions .sessions-modal-head__sub {
    text-align: center;
}

/* Строка «когда · где · IP · Текущий сеанс». Точки стоят перед каждым
   пунктом и прячутся за левый край, если пункт начинает новую строку —
   иначе на узком экране точка висела в конце строки. */
.session-card .session-card__meta {
    overflow: hidden;
    word-break: normal;
}

.session-card .session-card__meta-line {
    display: flex;
    flex-wrap: wrap;
    margin-left: -16px;
}

.session-card .session-card__meta span.session-card__meta-item {
    white-space: nowrap;
    color: inherit;
    font-size: inherit;
}

.session-card .session-card__meta span.session-card__meta-item::before {
    content: "·";
    display: inline-block;
    width: 16px;
    text-align: center;
}

/* ===== Удаление учётной записи ===== */

/* Необратимое действие — красная кнопка, как значок и ссылка «Удалить учётную запись». */
.modal-content #confirmDeleteBtn {
    background: #c23645;
    border-color: #c23645;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(194, 54, 69, 0.28);
}

.modal-content #confirmDeleteBtn:hover,
.modal-content #confirmDeleteBtn:focus-visible {
    background: #a82c3a;
    border-color: #a82c3a;
    color: #ffffff;
}

.modal-content #confirmDeleteBtn:disabled {
    background: #c23645;
    border-color: #c23645;
    color: #ffffff;
    opacity: 0.6;
}

/* ===== Главная ЛК, телефон: карточки «Передать показания» и др. ===== */

/* #detailed-info h3 { margin-bottom: 10px } из 02-layout.css по весу
   перебивал мобильный margin: 0 — текст сидел на 5px выше иконки и стрелки. */
@media (max-width: 768px) {
    #detailed-info .info-buttons-grid h3 {
        margin: 0;
    }
}

/* ===== Нет соединения ===== */

/* Баннер сверху — «пилюля» с круглым значком, как в макете. */
.net-banner {
    padding: 8px 20px 8px 8px;
    border-color: #dde3e9;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(20, 60, 100, 0.16);
}

.net-banner__icon {
    border-radius: 50%;
}

/* Раздел, не загрузившийся без сети: оранжевый значок вместо красного. */
.empty-state__icon {
    margin-bottom: 10px;
}

.empty-state--offline .empty-state__icon {
    background: #fff4e0;
    color: #d28a1f;
    border-radius: 16px;
}

.empty-state__title {
    font-size: 16px;
}

.empty-state__hint {
    font-size: 0.86rem;
}

.empty-state__retry,
#login-page .empty-state__retry,
#counter-page .empty-state__retry,
#register-page .empty-state__retry,
#anon-page .empty-state__retry {
    height: 42px;
    padding: 0 20px;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(44, 182, 125, 0.28);
}

@media (max-width: 480px) {
    .net-banner {
        padding: 8px 16px 8px 8px;
    }

    .empty-state--offline .empty-state__icon {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    .empty-state__title {
        font-size: 0.95rem;
    }

    .empty-state__hint {
        font-size: 0.82rem;
    }

    .empty-state__retry,
    #login-page .empty-state__retry,
    #counter-page .empty-state__retry,
    #register-page .empty-state__retry,
    #anon-page .empty-state__retry {
        height: 40px;
        padding: 0 18px;
    }
}

/* ===== Учётная запись удалена ===== */

.modal-badge--success {
    background: #e8f7f0;
    color: #1f9d5d;
}

/* Одна широкая кнопка внизу окна. */
#editModal .modal-cta {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0;
    border-radius: 12px;
}

/* Что удалено и что осталось — список в сером блоке. */
.deleted-facts {
    margin: 0 0 20px;
    background: #f3f5f9;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    text-align: left;
}

.deleted-facts__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text);
}

.deleted-facts__row + .deleted-facts__row {
    border-top: 1px solid #e3e8ef;
}

.deleted-facts__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: -2px;
    border-radius: 8px;
    flex-shrink: 0;
    font-size: 12px;
}

.deleted-facts__icon--danger {
    background: #fdecea;
    color: #c23645;
}

.deleted-facts__icon--ok {
    background: #e8f7f0;
    color: #1f9d5d;
}

.deleted-facts__icon--info {
    background: #e6f1fb;
    color: #2d7fc1;
}

#editModal .deleted-note {
    margin: 10px 0 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 480px) {
    .deleted-facts__row {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .deleted-facts__icon {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        font-size: 11px;
    }
}

/* «Повторить» внутри окон кабинета: .modal-content span из 11-news.css
   красил подпись в тёмный — возвращаем белый тексту и значку. */
.modal-content button.empty-state__retry,
.modal-content button.empty-state__retry > span,
.modal-content button.empty-state__retry:hover > span {
    color: #ffffff;
}

        /* --- Политика и согласие в окне ----------------------------------
           Текст подгружается со страниц privacy.html и consent.html, там
           есть таблицы и реквизиты. Здесь — их вид внутри окна; на
           отдельных страницах тот же вид даёт assets/css/legal.css. */
        .policy-text h2 {
            margin: 22px 0 8px;
            font-size: 1rem;
            line-height: 1.3;
            color: var(--accent-info);
        }
        .policy-text .legal-meta { color: var(--text-muted); font-size: 0.85rem; }
        .policy-text ul { padding-left: 1.2em; margin: 0 0 10px; }
        .policy-text li { margin-bottom: 4px; }
        .policy-text .legal-table {
            overflow-x: auto;
            margin: 0 0 12px;
            border: 1px solid var(--border);
            border-radius: 10px;
        }
        .policy-text .legal-table table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.88rem; }
        .policy-text .legal-table th,
        .policy-text .legal-table td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
        .policy-text .legal-table th { color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; background: #f6f8fa; }
        .policy-text .legal-table tr:last-child td { border-bottom: 0; }
        .policy-text .legal-term { white-space: nowrap; font-weight: 600; }
        .policy-text .legal-reqs { display: grid; gap: 2px 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0; padding: 12px 14px; border-radius: 10px; background: #f6f8fa; font-size: 0.88rem; }
        .policy-text .legal-reqs dt { color: var(--text-muted); font-size: 0.76rem; }
        .policy-text .legal-reqs dd { margin: 0 0 6px; }

        /* Галочка согласия на шаге «Лицевой счёт» передачи без входа —
           как у регистрации. */
        .consent-check {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin: 4px 0 6px;
            font-size: 0.9em;
            text-align: left;
            cursor: pointer;
        }
        .consent-check input { margin-top: 4px; flex-shrink: 0; }

/* ===== Окно-сообщение (showMessageModal): значок, заголовок, пояснение ===== */
#editModal .modal-content.message-modal {
    text-align: center;
}

#editModal .message-modal h2 {
    margin: 0 0 8px;
    /* Поля с обеих сторон. В режиме centered (12-toast.css) у заголовка
       было поле только справа — под крестик, и текст уезжал влево. */
    padding-inline: 28px;
    text-wrap: balance;
}

/* Крестик — квадратик 32px. Общее правило кнопок в окне
   (.modal-content--toast button: 100% × 48px) растянуло бы его в полосу. */
#editModal .message-modal .modal-close {
    top: 10px;
    right: 10px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

#editModal .message-modal .modal-close:hover {
    background: rgba(15, 25, 40, 0.06);
    color: var(--text);
}

#editModal .message-modal .modal-badge svg {
    display: block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

/* Окна подтверждения почты — тем же видом, что окно-сообщение. */
#editModal .message-modal .modal-sub b {
    color: var(--text);
    font-weight: 700;
}

#editModal .message-modal .message-modal__note {
    margin: -12px 0 18px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    text-align: center;
}

#editModal .message-modal .error:empty {
    display: none;
}

#editModal .message-modal .message-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

#editModal .message-modal .message-modal__actions .modal-cta {
    width: 100%;
    height: 48px;
    margin: 0;
    border-radius: 12px;
}

/* Окно кода при восстановлении пароля живёт в #restoreModal, а правила выше
   привязаны к #editModal — без этого кнопки «Подтвердить» и «Отправить код
   повторно» слипались без зазора. Вид тот же, что у окон в кабинете. */
#restoreModalContent .message-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

#restoreModalContent .message-modal__actions .modal-cta {
    width: 100%;
    height: 48px;
    margin: 0;
    border-radius: 12px;
}

#editModal .message-modal .code-input {
    margin: 0 0 16px;
}

/* ===== Плашка «Подтвердите электронную почту» в окне «Уведомления» =====
   Как плитки кабинета: мягкий зелёный фон без тени, значок со строкой
   текста, кнопка во всю ширину под ними — в узком окне текст больше не
   зажат между значком и кнопкой. */
#notificationModal .verify-cta {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px 12px;
    padding: 14px;
    margin-bottom: 14px;
    border: 1px solid #d7eee3;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0f9f3 0%, #e9f6f7 100%);
    box-shadow: none;
}

#notificationModal .verify-cta__icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: #ffffff;
    color: var(--brand);
    font-size: 18px;
}

#notificationModal .verify-cta__title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

#notificationModal .verify-cta__text {
    margin-top: 2px;
    font-size: 0.8rem;
    line-height: 1.4;
}

#notificationModal .modal-content button.verify-cta__btn {
    grid-column: 1 / -1;
    width: 100% !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 0.92rem !important;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(44, 182, 125, 0.28);
}

/* Окно согласия для жильцов без отметки текущей редакции (showConsentGate). */
#editModal .message-modal .consent-gate__check {
    margin: 0 0 14px;
    text-align: left;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
}

/* «Не подтверждена · Подтвердить» под адресом: ссылка тем же кеглем, высотой
   строки и полями, что текст плашки. Была 12.8px со своей высотой строки и
   сидела ниже текста плашки — строка выглядела кривой. */
#accountDataModal .account-field__verify .account-field__edit {
    padding: 2px 0;
    font-size: 12px;
    line-height: 1.4;
}

/* Строка статуса почты — под адресом, с того же левого края. Отступ слева 8px
   остался с тех пор, когда отметка стояла в строке сразу за адресом; теперь
   она переносится вниз, и плашка висела правее адреса. */
#accountDataModal .account-field__verify {
    margin: 6px 0 0;
}

/* Подвал страницы входа — в потоке страницы, а не поверх неё.
   Был position: fixed (15-overlay.css): на невысоком окне карточка входа
   доходила до низа, и ссылки на политику налезали на «Передать показания
   без входа». Теперь подвал никогда не перекрывает карточку. */
#login-policy-footer {
    position: static;
    flex-shrink: 0;
    width: 100%;
}

/* Где браузер понимает :has — как раньше на высоком экране: подвал внизу
   окна, карточка по центру свободного места над ним. Два авто-отступа
   делят свободное место поровну; на низком окне они схлопываются в ноль,
   подвал встаёт сразу под карточкой, и страница прокручивается. */
main:has(> #login-page:not(.hidden)) {
    padding-bottom: 0;
}

main:has(> #login-page:not(.hidden))::before {
    content: "";
    margin-top: auto;
}

main:has(> #login-page:not(.hidden)) > #login-policy-footer {
    margin-top: auto;
}