/* ═══════════════════════════════════════════════════════════════════════════
   Вход / регистрация / восстановление пароля.

   Раскладка снята с «вход.psd», «регистрация.psd» и «восстановление пароля.psd».
   Все три экрана нарисованы одной карточкой 952×1202 на холсте 2560, то есть
   476×601 при делении пополам.

   Эти файлы, как и «меню калибровка…», нарисованы в масштабе 0,75 — сверено
   по трём одинаковым элементам с финал.psd: лого 42 px против 56, слово
   «Boostlock» 149 против 198, красный крестик 53 против 70. По макету, значит,
   карточка должна быть 635×801.

   Мы рисуем её всё-таки в 476×601 — владелец сказал, что в макетный размер
   окно выходит слишком громоздким. Это осознанное отступление, и уменьшено
   всё разом, одним коэффициентом: пропорции внутри карточки макетные.

   Одна и та же карточка работает и отдельной страницей (/Account/Login),
   и содержимым модалки: модалка её просто переносит в оверлей, разметка
   и формы остаются те же — вся серверная логика на месте.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Страница ────────────────────────────────────────────────────────────── */
.auth-page {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px 80px;
}

/* ── Карточка ────────────────────────────────────────────────────────────── */
.auth-card {
    position: relative;
    width: 476px;
    max-width: 100%;
    /* В макете все три карточки одного размера, даже если полей меньше. */
    min-height: 601px;
    padding: 33px 38px 37px;
    border-radius: 26px;
    border: 1px solid rgba(146, 116, 232, .5);
    background: linear-gradient(40deg, #271A46 0%, #302056 55%, #432C76 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    overflow: hidden;
    text-align: center;
    color: var(--bl-text, #fff);
    font-family: var(--bl-font, sans-serif);
}
/* Арт под градиентом — как в макете, еле заметным пятном.

   Высота задана явно, а не через inset: 0. Картинка 734×613 сдвинута вверх на 45,
   то есть кончается на 568 px, и нижний край у неё ПЛОТНЫЙ — прозрачности там нет.
   На карточке выше 568 px (регистрация с тремя полями и офертой, вход с блоком
   Telegram) арт обрывался ровной горизонтальной линией поперёк карточки, а под ней
   оставался голый градиент. Отсюда и «фон не до конца».

   Растворяем низ маской: в макете арт к низу карточки сходит на нет, никакой границы
   там нет. Маска считается от высоты ЭТОГО блока, а он ровно по картинке, поэтому
   обрыв не вылезет ни при какой высоте карточки — арт просто заканчивается раньше,
   чем она. */
.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 568px;
    background: url('../img/design/auth-art.webp') no-repeat 50% -45px;
    background-size: 734px auto;
    opacity: .16;
    pointer-events: none;
    /* До 94%, а не до 100%: на дробном масштабе у самого края маски остаётся
       волосок в пиксель, и это снова была бы та же линия, только тоньше. */
    -webkit-mask-image: linear-gradient(to bottom, #000 46%, transparent 94%);
            mask-image: linear-gradient(to bottom, #000 46%, transparent 94%);
}
.auth-card > * { position: relative; }
/* Восстановление пароля: полей всего одно, и в макете форма стоит по центру
   карточки, а ссылка «Вернуться ко входу» прижата к низу. */
.auth-card--sparse { display: flex; flex-direction: column; }
.auth-card--sparse .auth-form { margin: auto 0; }
.auth-card--sparse .auth-links { margin-top: auto; }

/* ── Шапка карточки ──────────────────────────────────────────────────────── */
.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
}
.auth-logo img { width: 21px; height: 21px; }
.auth-title {
    margin: 0 0 34px;
    font-size: 27.8px;
    font-weight: 500;
    line-height: 1.1;
}

/* ── Быстрый вход через Telegram ─────────────────────────────────────────── */
/* padding у блока — из старого оформления, в макете его нет. */
.tg-login-block { margin-bottom: 34px; padding: 0; border: 0; background: none; }
.tg-label {
    margin-bottom: 9px;
    font-size: 12.5px;
    font-weight: 300;
}
/* Виджет Telegram — чужой iframe, покрасить его нельзя. Даём ему ширину
   кнопки из макета и подложку того же синего, чтобы он не выглядел вставкой. */
.tg-login-block iframe {
    max-width: 100% !important;
    border-radius: 999px;
}
.tg-hint { display: none; }
.tg-vpn-hint {
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 300;
    color: var(--bl-text-dim, rgba(255, 255, 255, .72));
}
.tg-vpn-hint b { font-weight: 700; color: var(--bl-text, #fff); }

/* ── Разделитель «Войти через E-mail» ────────────────────────────────────── */
.auth-divider {
    margin: 0 0 30px;
    font-size: 12.5px;
    font-weight: 700;
}
.auth-divider span { padding: 0; }

/* ── Форма ───────────────────────────────────────────────────────────────── */
/* gap у формы — из старого оформления; ритм полей в макете задают их отступы. */
.auth-form { margin: 0; gap: 0; }
.auth-field { margin-bottom: 13px; text-align: center; }
.auth-label {
    display: block;
    margin: 0 0 6px;
    font-size: 13.9px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--bl-text, #fff);
}
.auth-input,
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
    display: block;
    width: 100%;
    height: 41px;
    padding: 0 19px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #151324;
    color: var(--bl-text, #fff);
    font-family: inherit;
    font-size: 13.9px;
    font-weight: 300;
    text-align: left;
    transition: border-color .15s ease;
}
.auth-input::placeholder { color: rgba(255, 255, 255, .38); }
.auth-input:focus,
.auth-card input:focus { outline: none; border-color: var(--bl-violet, #8A5CF5); }
.auth-hint {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 300;
    color: var(--bl-text-dim, rgba(255, 255, 255, .6));
}
.auth-validation:not(:empty),
.auth-error:not(:empty) {
    display: block;
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 400;
    color: #FF6B7A;
}
.auth-error:not(:empty) {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 11px;
    background: rgba(229, 26, 46, .16);
}
.auth-error ul { margin: 0; padding: 0; list-style: none; }

/* Кнопка-глаз внутри поля пароля. */
.auth-input-wrap .auth-input { padding-right: 42px; }
.auth-input-wrap .auth-eye { right: 11px; color: rgba(255, 255, 255, .5); }
.auth-input-wrap .auth-eye:hover { color: var(--bl-violet, #8A5CF5); }

/* ── Главная кнопка ──────────────────────────────────────────────────────── */
.auth-btn,
.auth-card .btn.btn-primary {
    display: block;
    width: 100%;
    height: 36px;
    margin-top: 25px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--bl-grad-primary, linear-gradient(90deg, #8355E8, #6D45C8));
    color: #fff;
    font-family: inherit;
    font-size: 19.4px;
    font-weight: 600;
    line-height: 36px;
    cursor: pointer;
    transition: filter .15s ease;
}
.auth-btn:hover { filter: brightness(1.12); }

/* ── Подпись под формой и ссылки ─────────────────────────────────────────── */
.auth-notice {
    margin: 0 0 26px;
    font-size: 13.9px;
    font-weight: 300;
    line-height: 1.35;
    color: var(--bl-text, #fff);
}
.auth-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    font-size: 12.5px;
    font-weight: 400;
}
.auth-links a { color: var(--bl-text, #fff); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-links .text-yellow { color: var(--bl-text, #fff) !important; font-weight: 700; }
.auth-link-muted { order: -1; font-weight: 300; color: var(--bl-text-dim, rgba(255, 255, 255, .72)) !important; }

/* ── Согласие с офертой ──────────────────────────────────────────────────── */
.auth-card .auth-checkbox {
    display: block;
    margin: 22px 0 0;
    text-align: center;
}
.auth-card .auth-checkbox .form-check-input {
    width: 20px;
    height: 20px;
    margin: 0 0 9px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .22);
    accent-color: var(--bl-violet, #8A5CF5);
    cursor: pointer;
}
.auth-card .auth-checkbox .form-check-input:checked { background: var(--bl-violet, #8A5CF5); }
.auth-card .auth-checkbox .form-check-label {
    display: block;
    font-size: 13.9px;
    font-weight: 300;
    line-height: 1.35;
    color: var(--bl-text, #fff);
}
.auth-card .auth-checkbox a { color: var(--bl-text, #fff); text-decoration: underline; }

/* ═══ Модалка ════════════════════════════════════════════════════════════════
   Карточку в оверлей переносит скрипт в _Layout: он загружает страницу
   /Account/… и вставляет из неё .auth-card. Формы отправляются fetch'ем на те
   же адреса — сервер отвечает как обычно, поэтому логика входа не меняется. */
.bl-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    background: rgba(9, 6, 16, .74);
    backdrop-filter: blur(6px);
}
.bl-auth-modal.is-open { display: flex; }
/* max-width обязателен. Обёртка ужимается по содержимому, и без ограничения
   она вырастала до макетных 476, а `max-width:100%` у карточки считался уже
   от этих 476 — на узком экране окно вылезало за оба края. */
.bl-auth-modal__box { position: relative; max-width: 100%; margin: auto; }
.bl-auth-modal .auth-card { box-shadow: 0 40px 90px rgba(0, 0, 0, .6); }
.bl-auth-modal__close {
    position: absolute;
    top: 19px;
    right: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bl-red, #E51A2E);
    color: #fff;
    cursor: pointer;
}
.bl-auth-modal__close svg { width: 9px; height: 9px; }
.bl-auth-modal__close:hover { filter: brightness(1.12); }
.bl-auth-modal__spinner {
    width: 44px;
    height: 44px;
    margin: 80px auto;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bl-auth-spin .8s linear infinite;
}
@keyframes bl-auth-spin { to { transform: rotate(360deg); } }

/* ── Адаптив ─────────────────────────────────────────────────────────────────
   На телефоне карточка занимает всю ширину, а поля и кнопки, наоборот,
   становятся крупнее макетных: 41 px под палец не годится. */
@media (max-width: 700px) {
    .auth-page { padding: 24px 12px 56px; }
    .auth-card { min-height: 0; padding: 28px 18px 30px; border-radius: 22px; }
    .auth-title { margin-bottom: 24px; font-size: 24px; }
    .auth-logo { font-size: 15px; }
    .auth-logo img { width: 24px; height: 24px; }
    .tg-login-block { margin-bottom: 26px; }
    .auth-divider { margin-bottom: 24px; }
    .auth-label, .auth-notice,
    .auth-card .auth-checkbox .form-check-label { font-size: 15px; }
    .auth-field { margin-bottom: 15px; }
    .auth-input,
    .auth-card input[type="text"],
    .auth-card input[type="email"],
    .auth-card input[type="password"] { height: 48px; font-size: 16px; border-radius: 16px; }
    .auth-input-wrap .auth-input { padding-right: 52px; }
    .auth-btn, .auth-card .btn.btn-primary { height: 46px; font-size: 19px; line-height: 46px; }
    .auth-links, .tg-label, .tg-vpn-hint, .auth-divider { font-size: 14px; }
    .auth-card .auth-checkbox .form-check-input { width: 24px; height: 24px; }
    .bl-auth-modal { padding: 16px 12px; }
    .bl-auth-modal__close { top: 14px; right: 14px; width: 30px; height: 30px; }
    .bl-auth-modal__close svg { width: 11px; height: 11px; }
}