/* ============================================================
   Stargate Keycloak Theme — CSS
   Based on the React login page design (AuthLayout.tsx)
   ============================================================ */

/* ---------- Локальные шрифты (ADR-067, 3_1_58) ----------
   Раньше Montserrat и Poppins тянулись с fonts.googleapis.com прямо из template.ftl —
   страница входа отправляла IP и User-Agent каждого посетителя в США. Файлы лежат
   в ../fonts/, путь относительный: Keycloak отдаёт ресурсы темы под
   /resources/<hash>/login/stargate/, и ../fonts/ разрешается внутри этого префикса.

   Montserrat вариативен по оси wght: один файл на подмножество обслуживает весь
   диапазон, поэтому здесь два объявления, а не восемь. Запись font-weight: 400 700 —
   дословно то, что отдаёт Google на запрос wght@400..700. Курсива в теме нет
   (grep по italic пуст), поэтому курсивные файлы сюда не копируются.

   Poppins нужен только для .stargate-title и только в весе 300; веса 400-700
   запрашивались у Google, но не применялись ни разу. Кириллического подмножества
   у Poppins нет — на русской локали заголовок и раньше отрисовывался запасным
   Montserrat, поведение не меняется.                                            */

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/montserrat-var-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/montserrat-var-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/poppins-300-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.stargate-body {
    font-family: "Montserrat", "Segoe UI", "Noto Sans", sans-serif;
    background: #0e82c0;
    color: #0f172a;
    line-height: 1.5;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Main layout: split-screen ---------- */
.stargate-layout {
    min-height: 100dvh;
    position: relative;
    display: flex;
    overflow: hidden;
    background:
        radial-gradient(960px 460px at 74% 16%, rgba(255, 255, 255, 0.18), transparent 60%),
        linear-gradient(145deg, #0e82c0 0%, #17a6dc 52%, #0f8fcb 100%);
}

/* ---------- Left panel: branding ---------- */
.stargate-brand-panel {
    flex: 1;
    display: none;            /* hidden on mobile */
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    padding: 40px;
}

.stargate-brand-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(840px 320px at 12% 96%, rgba(255, 255, 255, 0.14), transparent 55%),
        radial-gradient(540px 280px at 88% 12%, rgba(255, 255, 255, 0.2), transparent 72%);
    pointer-events: none;
}

.stargate-logo {
    position: absolute;
    top: 28px;
    left: 32px;
    width: 160px;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    z-index: 1;
}

.stargate-network-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    pointer-events: none;
}

.stargate-brand-spacer {
    flex: 1;
}

.stargate-brand-content {
    position: relative;
    margin-bottom: 32px;
    font-family: "Montserrat", "Segoe UI", sans-serif;
}

.stargate-hero-title {
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    margin-bottom: 24px;
}

.stargate-hero-desc {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
    margin-bottom: 24px;
}

.stargate-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin-bottom: 24px;
}

/* Feature cards row */
.stargate-features {
    display: flex;
    gap: 24px;
}

.stargate-feature-card {
    flex: 1;
}

.stargate-feature-title {
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 5px;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

.stargate-feature-desc {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    letter-spacing: 0.03em;
}

/* ---------- Right panel: form ---------- */
.stargate-form-panel {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    background-color: #ffffff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.10);
    font-family: "Montserrat", "Segoe UI", sans-serif;
    letter-spacing: 0.05em;
}

.stargate-form-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
}

.stargate-form-container {
    width: 100%;
    max-width: 380px;
}

/* ---------- Locale switcher ---------- */
.stargate-locale {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
    position: relative;
}

.stargate-locale-dropdown {
    position: relative;
}

.stargate-locale-btn {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, color 0.2s;
}

.stargate-locale-btn:hover {
    border-color: #3182CE;
    color: #3182CE;
}

.stargate-locale-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    list-style: none;
    min-width: 120px;
    z-index: 100;
    overflow: hidden;
}

.stargate-locale-menu--open {
    display: block;
}

.stargate-locale-link {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    color: #0f172a;
    text-decoration: none;
    transition: background-color 0.15s;
}

.stargate-locale-link:hover {
    background-color: #f1f5f9;
    color: #3182CE;
}

/* ---------- Heading ---------- */
.stargate-heading {
    margin-bottom: 24px;
    text-align: center;
}

.stargate-title {
    font-size: 26px;
    font-weight: 300;
    color: #0f172a;
    font-family: "Poppins", "Montserrat", sans-serif;
    margin: 0;
    line-height: 1.3;
}

.stargate-subtitle {
    text-align: center;
    color: #64748b;
    font-size: 14px;
    margin-top: 6px;
    margin-bottom: 20px;
}

/* ---------- Attempted username ---------- */
.stargate-attempted-user {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.stargate-attempted-user label {
    font-size: 14px;
    color: #0f172a;
    font-weight: 500;
}

.stargate-attempted-user a {
    color: #64748b;
    text-decoration: none;
}

.stargate-attempted-user a:hover {
    color: #3182CE;
}

/* ---------- Alert messages ---------- */
.stargate-alert {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.stargate-alert-error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.stargate-alert-warning {
    background-color: #fffbeb;
    border: 1px solid #fed7aa;
    color: #92400e;
}

.stargate-alert-success {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.stargate-alert-info {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* ---------- Form fields ---------- */
.stargate-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.stargate-field {
    display: flex;
    flex-direction: column;
}

.stargate-field-label {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    margin-bottom: 5px;
    letter-spacing: 0.03em;
}

.stargate-field-input {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: #0f172a;
    background-color: #ffffff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    letter-spacing: 0.02em;
}

.stargate-field-input:focus {
    border-color: #3182CE;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.stargate-field-input--error {
    border-color: #ef4444;
}

.stargate-field-input--error:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.stargate-field-error {
    font-size: 12px;
    color: #ef4444;
    margin-top: 4px;
    display: block;
}

.stargate-field-error-container:empty {
    display: none;
}

/* Required marker (*) рядом с label или текстом чекбокса */
.stargate-field-required {
    color: #ef4444;
    margin-left: 4px;
    font-weight: 600;
}

.stargate-field-label-text {
    display: inline;
}

/* Helper-текст под/над инпутом (UP inputHelperTextBefore/After) */
.stargate-field-helper {
    font-size: 12px;
    color: #64748b;
    margin: 4px 0 0;
    line-height: 1.4;
}

/* User Profile group header (когда атрибуты сгруппированы) */
.stargate-form-group-header {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
}

.stargate-form-group-header:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.stargate-form-group-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 4px;
}

.stargate-form-group-desc {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 4px;
}

/* Textarea / select под общий стиль stargate-field-input */
.stargate-field-textarea {
    height: auto;
    min-height: 80px;
    padding: 10px 12px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.45;
}

.stargate-field-select-wrap {
    position: relative;
}

.stargate-field-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* Список радио / чекбоксов из UP-атрибута */
.stargate-field-choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Чекбокс-поле как отдельная строка формы (terms, logout-other-sessions) */
.stargate-field--checkbox {
    margin-top: 4px;
}

/* Terms & Conditions блок (текст соглашения над чекбоксом) */
.stargate-terms-block {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 4px;
}

.stargate-terms-title {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 6px;
}

.stargate-terms-text {
    font-size: 12px;
    line-height: 1.5;
    color: #475569;
    max-height: 160px;
    overflow-y: auto;
}

/* Ссылка на политику в блоке согласия больше не отдельной строкой: она внутри подписи
   чекбокса и наследует .stargate-link (см. privacyConsent в register-commons.ftl, ADR-064) —
   правило .stargate-terms-privacy удалено вместе со своей разметкой. */

/* Требования к паролю (макрос passwordHint): плашка под полем «Пароль» на страницах
   регистрации и смены пароля. Оформление намеренно повторяет stargate-terms-block,
   чтобы на форме регистрации оба блока читались как один тип элемента. */
.stargate-password-hint {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 14px;
}

.stargate-password-hint-title {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 6px;
}

.stargate-password-hint-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.5;
    color: #475569;
}

/* Form options (logout-other-sessions, аналог remember-me, но в update-password) */
.stargate-form-options {
    margin-top: 4px;
}

/* Password field with toggle */
.stargate-field-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.stargate-field-password-wrap .stargate-field-input {
    padding-right: 44px;
}

.stargate-password-toggle-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.2s;
}

.stargate-password-toggle-btn:hover {
    color: #64748b;
}

.stargate-eye-icon {
    width: 20px;
    height: 20px;
}

/* ---------- Form meta row (remember me + forgot password) ---------- */
.stargate-form-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
}

.stargate-remember-me {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 6px;
}

.stargate-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #3182CE;
    cursor: pointer;
    margin: 0;
}

.stargate-remember-me-text {
    font-size: 13px;
    color: #475569;
}

/* ---------- Links ---------- */
.stargate-link {
    font-size: 13px;
    color: #126aa6;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.stargate-link:hover {
    color: #0e5a8a;
    text-decoration: underline;
}

.stargate-link--bold {
    font-weight: 600;
}

/* ---------- Submit button ---------- */
.stargate-form-buttons {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stargate-submit-btn {
    width: 100%;
    height: 44px;
    padding: 8px 16px;
    background-color: #3182CE;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    text-transform: none;
}

.stargate-submit-btn:hover {
    background-color: #2b6cb0;
    box-shadow: 0 2px 8px rgba(49, 130, 206, 0.3);
}

.stargate-submit-btn:active {
    background-color: #2c5282;
}

.stargate-submit-btn:disabled {
    background-color: #94a3b8;
    cursor: not-allowed;
}

/* Secondary button (cancel, etc.) */
.stargate-btn-secondary {
    width: 100%;
    height: 44px;
    padding: 8px 16px;
    background-color: transparent;
    color: #3182CE;
    border: 1px solid #3182CE;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s;
}

.stargate-btn-secondary:hover {
    background-color: #eff6ff;
}

/* Состояния :active / :disabled / :focus-visible заведены в 3_1_60 вместе с демо-кнопкой.
   До неё у класса были только базовое правило и :hover, и этого хватало: единственный
   вторичной кнопкой была отмена. Демо-кнопка вводит НОВУЮ точку остановки Tab на самой
   посещаемой странице продукта, а невидимый фокус там недопустим. box-shadow, а не
   outline, — по образцу .stargate-consent-btn и .stargate-otp-item. */
.stargate-btn-secondary:active {
    background-color: #dbeafe;
}

.stargate-btn-secondary:disabled {
    color: #94a3b8;
    border-color: #cbd5e1;
    background-color: transparent;
    cursor: not-allowed;
}

.stargate-btn-secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.35);
}

/* ---------- Публичный демо-доступ (3_1_60) ----------
   Разделитель между формой входа и кнопкой — существующий .stargate-social-divider,
   поэтому верхний отступ блока такой же, как у секции соцпровайдеров (20px), а нижний
   зазор до кнопки даёт margin-bottom самого разделителя.

   Видимой подписи под кнопкой больше нет (страница была перегружена текстом);
   предупреждение «только для просмотра» осталось скрытым классом .sr-only и читается
   скринридером вместе с кнопкой. */
.stargate-demo-block {
    margin-top: 20px;
}

/* ---------- Info / Registration footer ---------- */
.stargate-info {
    margin-top: 16px;
}

.stargate-info-divider {
    width: 100%;
    height: 1px;
    background-color: #e2e8f0;
    margin-bottom: 13px;
}

.stargate-info-content {
    text-align: center;
}

.stargate-registration-link,
.stargate-back-to-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 16px;
    text-align: center;
}

.stargate-registration-text {
    color: #64748b;
    font-size: 13px;
}

/* ---------- Privacy policy footer (STARGATE-10) ---------- */
.stargate-privacy {
    margin-top: 24px;
    text-align: center;
}

.stargate-privacy-link {
    color: #64748b;
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s;
}

.stargate-privacy-link:hover {
    color: #126aa6;
    text-decoration: underline;
}

/* ---------- Cookie-согласие (3_1_59, ADR-068) ----------
   Разметку создаёт js/stargate-consent.js — в FTL её нет, иначе баннера не было бы на
   страницах, которые Keycloak рендерит из base-темы.

   Мобильная раскладка — по умолчанию, и она НЕ fixed. Форма входа на телефоне занимает
   весь экран, и плашка, прижатая к низу вьюпорта, закрыла бы кнопку «Вход» (риск 6 плана).
   Баннер встраивается в колонку формы обычным потоком: `.stargate-form-center` центрирует
   содержимое целиком, поэтому на обычном телефоне форма и баннер видны вместе, без
   прокрутки, и ничто ничего не перекрывает.

   Fixed включается только с 900px — с той же точки, где появляется брендовая панель
   (см. «Responsive breakpoints» ниже). Баннер уезжает в её нижний левый угол: там нет ни
   одного интерактивного элемента, только декоративная графика, — а колонка формы остаётся
   чистой на любой высоте вьюпорта.                                                      */

.stargate-consent {
    margin-top: 20px;
    padding: 16px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
    text-align: left;
    animation: stargate-consent-appear 220ms ease-out;
}

.stargate-consent-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 8px;
    line-height: 1.4;
}

.stargate-consent-text {
    font-size: 12px;
    line-height: 1.55;
    color: #475569;
}

/* Условия изменились с прошлого решения (CONSENT_EPOCH). Оформление — как у
   stargate-alert-info: на странице входа это тот же по смыслу элемент. */
.stargate-consent-updated {
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 6px;
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.stargate-consent-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* Обе кнопки — один класс и одна ширина. Это юридическое свойство, а не оформление:
   визуально неравные «принять» и «отказаться» подрывают признак «свободно, своей волей»
   ч. 1 ст. 9 152-ФЗ. Отдельного стиля для «Только необходимые» здесь нет намеренно —
   если он появится, это регрессия (ADR-065). Высота задана min-height, а не height:
   «Только необходимые» на узком экране переносится в две строки. */
.stargate-consent-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    background-color: #3182CE;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.3;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.stargate-consent-btn:hover {
    background-color: #2b6cb0;
    box-shadow: 0 2px 8px rgba(49, 130, 206, 0.3);
}

.stargate-consent-btn:active {
    background-color: #2c5282;
}

.stargate-consent-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.35);
}

.stargate-consent-footer {
    margin-top: 10px;
}

.stargate-consent-link {
    font-size: 12px;
    font-weight: 500;
    color: #126aa6;
    text-decoration: none;
    transition: color 0.2s;
}

.stargate-consent-link:hover {
    color: #0e5a8a;
    text-decoration: underline;
}

/* Браузер не дал записать куку: сообщение встаёт на место кнопок. Оформление — как у
   stargate-alert-warning; тостов в теме нет. */
.stargate-consent-notice {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background-color: #fffbeb;
    border: 1px solid #fed7aa;
}

.stargate-consent-notice-title {
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 4px;
}

.stargate-consent-notice-text {
    font-size: 12px;
    line-height: 1.5;
    color: #92400e;
}

@keyframes stargate-consent-appear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stargate-consent {
        animation: none;
    }
}

/* ---------- Social providers ---------- */
.stargate-social-section {
    margin-top: 20px;
}

.stargate-social-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.stargate-social-divider-line {
    flex: 1;
    height: 1px;
    background-color: #e2e8f0;
}

.stargate-social-divider-text {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stargate-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stargate-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: #334155;
    text-decoration: none;
    background-color: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.stargate-social-btn:hover {
    border-color: #3182CE;
    background-color: #f8fafc;
}

/* ---------- Error & info pages ---------- */
.stargate-error-page,
.stargate-info-page {
    text-align: center;
    padding: 16px 0;
}

.stargate-info-message {
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 16px;
}

.stargate-error-trace {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    margin: 8px 0 16px;
    word-break: break-all;
}

/* ---------- Select authenticator ---------- */
.stargate-select-auth-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stargate-select-auth-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, background-color 0.2s;
}

.stargate-select-auth-item:hover {
    border-color: #3182CE;
    background-color: #f8fafc;
}

.stargate-select-auth-heading {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.stargate-select-auth-desc {
    font-size: 13px;
    color: #64748b;
}

/* ---------- OTP credentials list ---------- */
.stargate-otp-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}

.stargate-otp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background-color: #ffffff;
    color: #0f172a;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.stargate-otp-item:hover {
    border-color: #3182CE;
    background-color: #f8fafc;
}

.stargate-otp-item:focus-visible {
    outline: none;
    border-color: #3182CE;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.stargate-otp-item--selected {
    border-color: #3182CE;
    background-color: #eff6ff;
    box-shadow: 0 0 0 1px #3182CE inset;
}

.stargate-otp-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 6px;
    background-color: #eff6ff;
    color: #3182CE;
    transition: background-color 0.2s, color 0.2s;
}

.stargate-otp-item-icon svg {
    width: 18px;
    height: 18px;
}

.stargate-otp-item--selected .stargate-otp-item-icon {
    background-color: #3182CE;
    color: #ffffff;
}

.stargate-otp-item-title {
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
}

/* OTP code field — monospace, expanded letter spacing for readability */
.stargate-field-input--otp {
    font-family: "JetBrains Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 18px;
    letter-spacing: 0.4em;
    text-align: center;
    padding-left: 18px;
}

.stargate-field-input--otp::placeholder {
    letter-spacing: normal;
}

/* ---------- Checkbox component ---------- */
.stargate-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.stargate-check-input {
    width: 16px;
    height: 16px;
    accent-color: #3182CE;
    margin-top: 2px;
}

.stargate-check-label {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}

/* ============================================================
   Responsive breakpoints
   ============================================================ */

/* Tablet and up: show brand panel */
@media (min-width: 900px) {
    .stargate-brand-panel {
        display: flex;
        padding: 40px;
    }

    .stargate-form-panel {
        width: min(440px, 45%);
    }

    .stargate-form-center {
        padding: 32px;
    }

    .stargate-logo {
        top: 28px;
        left: 32px;
        width: 160px;
    }

    .stargate-brand-content {
        margin-bottom: 32px;
    }

    /* Cookie-баннер (3_1_59) переходит в нижний левый угол — поверх брендовой панели,
       где нет ни одного интерактивного элемента. Ширина с запасом влезает в панель на
       самой узкой раскладке этого брейкпоинта (900px: панель ≈495px против 400+2×24),
       поэтому колонку формы плашка не задевает никогда. max-height — на случай
       низкого вьюпорта: баннер скроллится сам, а не вылезает за экран. */
    .stargate-consent {
        position: fixed;
        left: 24px;
        bottom: 24px;
        z-index: 50;
        width: min(400px, calc(100vw - 48px));
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
        margin-top: 0;
        padding: 20px;
    }
}

/* Large desktop */
@media (min-width: 1200px) {
    .stargate-brand-panel {
        padding: 48px;
    }

    .stargate-form-panel {
        width: min(480px, 45%);
    }

    .stargate-logo {
        top: 36px;
        left: 44px;
        width: 200px;
    }

    .stargate-hero-title {
        font-size: 52px;
    }

    .stargate-hero-desc {
        font-size: 18px;
        white-space: nowrap;
    }

    .stargate-brand-content {
        margin-bottom: 48px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .stargate-form-center {
        padding: 24px 16px;
    }

    .stargate-title {
        font-size: 24px;
    }
}

/* Medium mobile */
@media (min-width: 600px) and (max-width: 899px) {
    .stargate-title {
        font-size: 30px;
    }

    .stargate-form-center {
        padding: 32px;
    }
}