/* Общий класс для модалок-«тостов» (notification, logout, restore, accountData, edit) */
        .modal-content--toast {
            position: absolute;
            top: 24px;
            left: 50%;
            transform: translateX(-50%);
            width: 420px;
            max-width: 95%;
            display: flex;
            flex-direction: column;
            border-radius: 16px;
            animation: toastSlideIn 0.22s ease;
        }
        @keyframes toastSlideIn {
            from { opacity: 0; transform: translate(-50%, -8px); }
            to   { opacity: 1; transform: translate(-50%, 0); }
        }

        .modal-content--toast button {
            margin-top: var(--space-3);
            width: 100%;
            box-sizing: border-box;
            height: 48px;
        }
        .modal-content--toast.modal-content--confirm button {
            margin-top: 0;
            width: auto;
            height: auto;
        }

        /* Модалка короткого подтверждения (например «Подтвердите email»):
           центрируется по экрану, а две кнопки идут в один ряд, не во всю ширину. */
        .modal-content--toast.modal-content--centered {
            top: 50%;
            transform: translate(-50%, -50%);
            animation: toastSlideInCentered 0.22s ease;
        }
        @keyframes toastSlideInCentered {
            from { opacity: 0; transform: translate(-50%, calc(-50% - 8px)); }
            to   { opacity: 1; transform: translate(-50%, -50%); }
        }
        .modal-content--toast.modal-content--centered .modal-action-row {
            display: flex;
            gap: 10px;
            margin-top: var(--space-4);
        }
        .modal-content--toast.modal-content--centered .modal-action-row > button {
            flex: 1 1 0;
            margin-top: 0;
        }
        /* Вторичная кнопка модалки — белая с серой рамкой, тёмный текст.
           Эталон — кнопка «Отменить» в модалке «Открепить ЛС».
           Уравновешивает основную (градиентную) без визуальной конкуренции.

           Скоуп ослаблен до .modal-content, чтобы стиль применялся ко ВСЕМ
           модалкам сайта (раньше работало только под .modal-content--centered).
           Селектор .modal-content .modal-btn-secondary имеет специфичность
           0,2,0 — выше, чем Bootstrap .btn-secondary (0,1,0), поэтому
           перебивает его серую заливку. */
        .modal-content .modal-btn-secondary {
            background: #fff;
            color: var(--text);
            border: 1.5px solid #d8e2ec;
            font-weight: 600;
        }
        .modal-content .modal-btn-secondary:hover {
            border-color: var(--accent-info);
            color: var(--accent-info);
            background: #fff;
        }

        /* Колоночный вариант — для модалок с длинной подписью на кнопке
           («Отправить код повторно») или с тремя+ действиями. Кнопки
           растягиваются по ширине, между ними одинаковый вертикальный gap. */
        .modal-content--toast.modal-content--centered .modal-action-stack {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: var(--space-4);
        }
        .modal-content--toast.modal-content--centered .modal-action-stack > button {
            width: 100%;
            margin-top: 0;
        }
        /* Вспомогательная ссылка-действие («Отмена», «Отправить заново»).
           Не загромождает три полноразмерные кнопки. */
        .modal-content--toast.modal-content--centered .modal-link-action {
            display: inline-block;
            background: transparent;
            border: 0;
            color: var(--text-muted);
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            padding: 6px 8px;
            margin: 6px auto 0;
            text-decoration: underline;
            text-underline-offset: 3px;
            width: auto;
            height: auto;
        }
        .modal-content--toast.modal-content--centered .modal-link-action:hover {
            color: var(--text);
            background: transparent;
        }
        .modal-content--toast.modal-content--centered .modal-link-action:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }
        /* Крестик «×» в правом углу — без него заголовок-flex его прижимает к тексту. */
        .modal-content--toast.modal-content--centered h2 {
            display: block;
            margin: 0 0 var(--space-3);
            padding-right: 28px;
            font-size: 1.25rem;
            line-height: 1.3;
        }
        /* Ячейки кода — по центру модалки. */
        .modal-content--toast.modal-content--centered .code-input {
            justify-content: center;
        }
        .modal-content--toast.modal-content--centered .code-input__label {
            text-align: center;
            display: block;
            margin-bottom: var(--space-2);
        }
        /* Стили крестика — общие для всех модалок (см. 14-tooltips.css);
           специальных переопределений для .modal-content--centered не нужно. */

        .logout-container {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 10px;
        }
        
        .grey-text {
            color: #333;
        }
        
        .days-rectangle {
            border-radius: 15px;
            padding: 3px 15px;
            font-size: 0.9em; /* или другой подходящий размер */
        }
        
        .days-rectangle-blue {
            background-color: var(--accent-info);
            color: #fff;
        }
        
        .days-rectangle-green {
            background-color: #90EE90; /* Светло-зеленый */
            color: #006400; /* Темно-зеленый */
        }
        
        .password-container {
            position: relative; /* Важно для позиционирования значка внутри */
        }

        .password-input {
            padding-right: 35px; /*  Оставляем место для иконки справа  */
        }
        /* Скрываем нативную иконку «глаз» в Edge/IE */
        .password-input::-ms-reveal,
        .password-input::-ms-clear {
            display: none;
        }

        .password-toggle {
            position: absolute;
            top: 50%;
            right: 10px; /*  Регулируем положение иконки справа  */
            transform: translateY(-50%);
            cursor: pointer;
            color: #aaa; /*  Цвет иконки  */
            z-index: 5;
        }

        /* ===== Глобальный баннер «Нет интернета» / «Соединение восстановлено» =====
           Стиль повторяет карточки главной: белый фон, скругление, мягкая тень,
           цветная иконка на пастельном квадратике слева, тёмный текст.
           Статус считывается по цвету иконки: оранжевый — offline, зелёный — online.
           position: fixed, поверх всего интерфейса. */
        .net-banner {
            position: fixed;
            left: 50%;
            top: 12px;
            transform: translate(-50%, -140%);
            z-index: 10000;
            display: flex;
            align-items: center;
            gap: 12px;
            max-width: calc(100% - 24px);
            padding: 10px 16px 10px 10px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-card);
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 14px;
            line-height: 1.3;
            color: var(--text);
            opacity: 0;
            pointer-events: none;
            transition: transform 0.28s ease, opacity 0.28s ease;
        }
        .net-banner.is-visible {
            transform: translate(-50%, 0);
            opacity: 1;
        }
        .net-banner__icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            flex-shrink: 0;
            font-size: 16px;
        }
        .net-banner--offline .net-banner__icon {
            background: rgba(210, 138, 31, 0.12);
            color: var(--accent-warning);
        }
        .net-banner--online .net-banner__icon {
            background: rgba(31, 157, 93, 0.12);
            color: var(--accent-success);
        }
        .net-banner__body {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        .net-banner__title {
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .net-banner__hint {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        @media (max-width: 480px) {
            .net-banner {
                top: 8px;
                gap: 10px;
                padding: 8px 14px 8px 8px;
            }
            .net-banner__icon {
                width: 32px;
                height: 32px;
                font-size: 14px;
            }
            .net-banner__title { font-size: 13px; }
            .net-banner__hint  { font-size: 11px; }
        }

        /* ===== Универсальный empty/error-state для контейнеров =====
           Используется в местах, где сейчас показывается голое «Ошибка при загрузке»
           (новости, история, тарифы и т.п.). Стиль повторяет язык карточек:
           центрированный блок с пастельной иконкой, заголовком и подсказкой,
           опциональная кнопка «Повторить». */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 28px 20px;
            gap: 4px;
        }
        .empty-state__icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            border-radius: 14px;
            margin-bottom: 8px;
        }
        .empty-state--error .empty-state__icon {
            background: rgba(194, 54, 69, 0.10);
            color: var(--accent-danger);
        }
        .empty-state--info .empty-state__icon {
            background: rgba(44, 182, 125, 0.10);
            color: var(--accent-info);
        }
        .empty-state__title {
            font-size: 15px;
            font-weight: 700;
            color: var(--text);
            line-height: 1.3;
        }
        .empty-state__hint {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-muted);
            line-height: 1.4;
            max-width: 320px;
        }
        .empty-state__retry {
            margin-top: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: auto;            /* перебиваем родительские button { width: 100% } */
            min-width: 0;
            max-width: max-content;
            height: 40px;
            padding: 0 18px;
            border: none;
            border-radius: 10px;
            background: var(--brand-grad);
            color: var(--text-on-brand);
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            transition: background 0.18s ease, transform 0.1s ease;
        }
        /* Перебиваем глобальный button:hover из 01-base.css,
           иначе светло-зелёный фон закрашивает наш градиент. */
        .empty-state__retry:hover {
            background: var(--brand-grad-hover);
            color: var(--text-on-brand);
        }
        .empty-state__retry:active { transform: translateY(1px); }
        .empty-state__retry svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }
        .empty-state__retry > span {
            line-height: 1;
        }
        @media (max-width: 480px) {
            .empty-state { padding: 22px 16px; }
            .empty-state__icon { width: 48px; height: 48px; border-radius: 12px; }
            .empty-state__title { font-size: 14px; }
            .empty-state__hint  { font-size: 12px; }
        }
        /* Ячейка таблицы, в которой рендерится empty-state — убираем
           родные паддинги/границы, чтобы блок «жил» на всю ширину строки. */
        .empty-state-cell {
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
        }

        /* ===== Toast-уведомление в стиле сайта =====
           Используется вместо нативного alert() в неблокирующих ошибках:
           например, «не удалось получить данные пользователя».
           Появляется снизу по центру, исчезает сам через несколько секунд.
           Стек поддерживается контейнером .app-toast-stack. */
        .app-toast-stack {
            position: fixed;
            left: 50%;
            /* подняли выше, чтобы не залезать на нижнюю кнопку формы (например,
               «Отправить» под счётчиками). */
            bottom: 80px;
            transform: translateX(-50%);
            z-index: 10001;
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center;
            pointer-events: none;
            width: min(420px, calc(100% - 24px));
        }
        .app-toast {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px 12px 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-card);
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 14px;
            line-height: 1.3;
            color: var(--text);
            opacity: 0;
            transform: translateY(20px);
            transition: transform 0.24s ease, opacity 0.24s ease;
            pointer-events: auto;
            width: 100%;
            box-sizing: border-box;
        }
        .app-toast.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .app-toast__icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            flex-shrink: 0;
        }
        .app-toast--error .app-toast__icon {
            background: rgba(194, 54, 69, 0.12);
            color: var(--accent-danger);
        }
        .app-toast--info .app-toast__icon {
            background: rgba(44, 182, 125, 0.12);
            color: var(--accent-info);
        }
        .app-toast--warn .app-toast__icon {
            background: rgba(210, 138, 31, 0.12);
            color: var(--accent-warning);
        }
        /* Успешное завершение: брендовый зелёный + галочка. Тот же тон, что
           у --info (это бренд), различие задаёт иконка-checkmark. */
        .app-toast--success .app-toast__icon {
            background: rgba(44, 182, 125, 0.12);
            color: var(--accent-info);
        }
        .app-toast__text {
            flex: 1;
            min-width: 0;
            white-space: normal;
            overflow-wrap: anywhere;
        }
        @media (max-width: 480px) {
            .app-toast-stack { bottom: 88px; }
            .app-toast {
                font-size: 13px;
                padding: 10px 14px 10px 10px;
            }
            .app-toast__icon { width: 32px; height: 32px; }
        }