/* Floating label — единый стиль форм */
        .form-floating > .form-control {
            height: 56px;
            padding: 1rem 0.9rem 0.4rem;
        }
        /* Универсальная подсветка полей: применяется ко всем .form-control и .form-select */
        .form-control,
        .form-select {
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
        }
        .form-control:hover,
        .form-select:hover {
            border-color: var(--accent-info);
            box-shadow: 0 0 0 4px rgba(44, 182, 125, 0.22);
        }
        .form-control:focus,
        .form-select:focus {
            border-color: var(--accent-info);
            box-shadow: 0 0 0 4px rgba(44, 182, 125, 0.32);
        }
        .form-floating > label {
            color: var(--text-muted);
            padding: 1rem 0.9rem;
        }
        .form-floating > .form-control:focus,
        .form-floating > .form-control:not(:placeholder-shown) {
            padding-top: 1.4rem;
            padding-bottom: 0.3rem;
        }
        .form-floating > .form-control:focus ~ label,
        .form-floating > .form-control:not(:placeholder-shown) ~ label {
            color: var(--accent-info);
            transform: scale(0.82) translateY(-0.55rem) translateX(0.1rem);
        }
        /* Floating label + иконка-глаз: оставляем место справа */
        .form-floating.password-container > .form-control {
            padding-right: 38px;
        }
        .form-floating.password-container > .password-toggle {
            top: 50%;
            transform: translateY(-50%);
        }
        
        /* Лёгкая подсказка под полем (например, «разрешены только .ru-домены»).
           Меньше и нейтральнее, чем .error, чтобы не путать с ошибкой. */
        .form-hint {
            margin: -4px 2px 8px;
            font-size: 12px;
            line-height: 1.4;
            color: var(--text-muted, #6b7280);
        }

        .password-requirements {
            position: relative;
            border-radius: 10px;
            padding: 0 14px;
            margin-top: 0;
            margin-bottom: 0;
            font-size: 13px;
            line-height: 1.45;
            color: #475467;
            background-color: #eef2f7;
            border: none;
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            transition: max-height 0.32s ease, opacity 0.22s ease,
                        padding 0.22s ease, margin 0.22s ease;
        }
        .password-requirements.is-visible {
            max-height: 320px;
            opacity: 1;
            padding: 12px 14px;
            margin-top: 8px;
            margin-bottom: 8px;
        }
        /* Класс .hidden у нас обычно ставит display:none — но это сломает
           CSS-анимацию: при display:none transition не отрабатывает. Здесь
           снимаем display:none, чтобы анимация прошла; невидимость уже задана
           через max-height:0 + opacity:0. */
        .password-requirements.hidden {
            display: block;
        }
        .password-requirements p {
            font-weight: 600;
            margin: 0 0 6px;
        }
        .password-requirements ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .password-requirements li {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 3px 0;
            transition: color 0.2s ease;
        }
        .password-requirements li .pr-mark {
            flex-shrink: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            border: 1.5px solid #c1cad4;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: transparent;
            transition: background-color 0.2s ease, border-color 0.2s ease,
                        color 0.2s ease, transform 0.25s ease;
        }
        .password-requirements li .pr-mark::before {
            content: '\2713';
            line-height: 1;
            font-weight: 700;
        }
        .password-requirements li.is-met {
            color: #1f6f4d;
        }
        .password-requirements li.is-met .pr-mark {
            background: var(--accent-info);
            border-color: var(--accent-info);
            color: #fff;
            transform: scale(1.08);
        }

        /* =========================================================
           Красивый ввод 6-значного кода (восстановление пароля и т.п.)
           Шесть отдельных ячеек, центр, поддержка вставки кода целиком.
           ========================================================= */
        .code-input {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin: 12px 0 6px;
        }
        .code-input__cell {
            width: 44px;
            height: 54px;
            text-align: center;
            font-size: 22px;
            font-weight: 600;
            color: #1f2937;
            background: #fff;
            border: 1px solid #d6dde4;
            border-radius: 10px;
            padding: 0;
            transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
            -moz-appearance: textfield;
        }
        .code-input__cell::-webkit-outer-spin-button,
        .code-input__cell::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .code-input__cell:hover {
            border-color: #b9c3cd;
        }
        .code-input__cell:focus {
            outline: none;
            border-color: var(--accent-info);
            box-shadow: 0 0 0 4px rgba(44, 182, 125, 0.22);
        }
        .code-input__cell--filled {
            background: linear-gradient(0deg, rgba(44, 182, 125, 0.06), rgba(44, 182, 125, 0.06)), #fff;
            border-color: var(--accent-info);
        }
        .code-input--error .code-input__cell {
            border-color: #d23f3f;
            box-shadow: 0 0 0 4px rgba(210, 63, 63, 0.18);
        }

        @media (max-width: 380px) {
            .code-input { gap: 6px; }
            .code-input__cell { width: 38px; height: 48px; font-size: 20px; }
        }

        /* =========================================================
           Страница «Регистрация»: двухколоночная раскладка на десктопе.
           Слева — чек-лист «Что понадобится» и кнопка подробной инструкции.
           Справа — форма. На мобильном (<= 767px) колонки стекаются:
           сначала чек-лист, потом форма.
           ========================================================= */
        .register-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }
        @media (min-width: 992px) {
            .container.register-layout { max-width: 880px; }
            .register-grid {
                grid-template-columns: 260px 1fr;
                gap: 28px;
                align-items: start;
            }
        }
        /* На мобиле и узких планшетах возвращаем боковые отступы карточкам
           логина, регистрации, привязки, подтверждения суммы и ФИО.
           Перебиваем .container { width:100%; margin:0!important;
           border-radius:0!important } из 06-mobile.css — иначе они едут
           в edge-to-edge на части устройств.

           ВАЖНО: <main> имеет align-items: center (01-base.css). Без
           align-self: stretch flex-ребёнок с width:auto сжимается до
           ширины контента — поэтому login (узкий контент) был уже
           регистрации. align-self: stretch заставляет контейнер
           заполнять main по ширине, минус наши margin: 12px. */
        @media (max-width: 991px) {
            #login-page,
            #register-page.register-layout,
            #privazka-page,
            #payment-page,
            #fio-page {
                align-self: stretch !important;
                width: auto !important;
                margin: 12px !important;
                padding: 18px 12px !important;
                border-radius: 14px !important;
            }
        }

        /* На мобиле — кнопка под инпутом, а не справа.
           Bootstrap-овский .input-group и кастомный .payment-container ставят
           кнопку справа на одной строке; на узком экране инпут сжимается до
           неудобного размера. Перестраиваем во flex-column, обоим даём 100%. */
        @media (max-width: 767px) {
            #privazka-page .input-group,
            #payment-page .payment-container,
            #fio-page .payment-container {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }
            #privazka-page .input-group > .form-control,
            #privazka-page .input-group > .form-floating,
            #privazka-page .input-group > .btn,
            #payment-page .payment-container > .form-control,
            #payment-page .payment-container > .form-floating,
            #payment-page .payment-container > .btn,
            #fio-page .payment-container > .form-control,
            #fio-page .payment-container > .form-floating,
            #fio-page .payment-container > .btn {
                width: 100%;
                border-radius: 10px !important;
                margin: 0;
            }
            /* (#fio-page боковые отступы — теперь в общем блоке выше с
               #login-page/#register-page/#privazka-page/#payment-page) */
        }
        .register-aside {
            background: #f0f9f3;
            border: 1px solid #d4ebdf;
            border-radius: 14px;
            padding: 10px 14px;
        }
        @media (min-width: 992px) {
            .register-aside {
                position: sticky;
                top: 24px;
                padding: 20px 18px;
            }
        }
        /* На мобиле, когда карточка раскрыта, добавляем чуть больше воздуха снизу,
           чтобы пункты не лепились к границе. В свёрнутом — компактно. */
        @media (max-width: 991px) {
            .register-aside.is-open {
                padding-bottom: 16px;
            }
        }
        /* Заголовок-«кнопка»: на мобиле кликом раскрывает блок, на десктопе
           ведёт себя как обычный заголовок (без стрелки, без курсора-пальца). */
        .register-aside__toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            background: transparent;
            border: 0;
            padding: 0;
            margin: 0;
            font-size: 1.05rem;
            font-weight: 700;
            color: #1f3540;
            cursor: pointer;
            text-align: left;
        }
        .register-aside__chevron {
            color: var(--accent-info);
            font-size: 13px;
            transition: transform 0.25s ease;
        }
        .register-aside.is-open .register-aside__chevron {
            transform: rotate(180deg);
        }
        /* Перебиваем глобальный #register-page button { width:100%; height:48px } */
        #register-page .register-aside__toggle {
            width: 100%;
            height: auto;
            margin-bottom: 0;
        }
        .register-aside__body {
            overflow: hidden;
        }
        /* На мобиле — раскрывающийся список (по умолчанию свёрнут) */
        @media (max-width: 991px) {
            .register-aside__body {
                max-height: 0;
                opacity: 0;
                transition: max-height 0.35s ease, opacity 0.22s ease,
                            margin-top 0.22s ease;
                margin-top: 0;
            }
            .register-aside.is-open .register-aside__body {
                max-height: 600px;
                opacity: 1;
                margin-top: 14px;
            }
        }
        /* На десктопе — всегда раскрыт, стрелку прячем */
        @media (min-width: 992px) {
            .register-aside__toggle { cursor: default; margin-bottom: 14px; }
            .register-aside__chevron { display: none; }
            .register-aside__body { max-height: none; opacity: 1; }
        }
        .register-checklist {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .register-checklist li {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 7px 0;
            font-size: 0.95rem;
            color: #2a3b46;
        }
        .register-checklist li i {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            color: var(--accent-info);
            border-radius: 8px;
            font-size: 13px;
            border: 1px solid #d4ebdf;
        }
        .register-aside__divider {
            height: 1px;
            background: #d4ebdf;
            margin: 14px 0 12px;
        }
        .register-aside__hint {
            font-size: 0.85rem;
            color: #5b6b78;
            line-height: 1.45;
            margin: 0 0 14px;
        }
        .register-aside__btn {
            width: 100%;
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            white-space: normal;
            line-height: 1.25;
        }
        /* Перебиваем #register-page button { height: 48px; width: 100% } из 14-tooltips.css,
           чтобы кнопка «Подробная инструкция» не вылезала за карточку и не зажималась
           по высоте при двухстрочном тексте. */
        #register-page .register-aside__btn {
            height: auto;
            min-height: 44px;
            padding: 10px 14px;
            margin-bottom: 0;
        }