/* Страницы входа, регистрации и восстановления пароля.
   Один файл на оба сайта: цвета задаёт класс .auth--lkf или .auth--lk_new.
   Не зависит от Bootstrap — работает и в публичном макете, и в кабинете. */

.auth {
    --a-accent: #0f4c81;
    --a-accent-dark: #0b3a61;
    --a-accent-2: #28a7c7;
    --a-soft: #e4f0f8;
    --a-ink: #172033;
    --a-muted: #5b6676;
    --a-line: #d8e1ea;
    --a-bg: #f3f7fb;
    --a-danger: #c4262e;
    --a-danger-soft: #fdecec;
    --a-ok: #1c7c4a;
    --a-radius: 22px;
    color: var(--a-ink);
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    padding: 40px 16px 64px;
    position: relative;
    overflow: hidden;
}
.auth--lk_new {
    --a-accent: #c81e1e;
    --a-accent-dark: #8f1717;
    --a-accent-2: #f2994a;
    --a-soft: #fde7e3;
    --a-ink: #2c2420;
    --a-muted: #6b5f57;
    --a-line: #eedbd4;
    --a-bg: #fdf6f2;
}
.auth *, .auth *::before, .auth *::after { box-sizing: border-box; }
.auth a { color: var(--a-accent); text-underline-offset: 3px; }
.auth a:hover { color: var(--a-accent-dark); }
.auth :focus-visible { outline: 3px solid color-mix(in srgb, var(--a-accent) 45%, transparent); outline-offset: 2px; }

/* Фоновые круги, как на главной */
.auth::before, .auth::after {
    content: ""; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
}
.auth::before { width: 520px; height: 520px; right: -160px; top: -180px; background: var(--a-soft); }
.auth::after { width: 220px; height: 220px; left: -70px; bottom: 40px; background: color-mix(in srgb, var(--a-accent-2) 18%, transparent); }

.auth-shell {
    position: relative; z-index: 1;
    max-width: 1080px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    background: #fff; border-radius: var(--a-radius);
    box-shadow: 0 2px 4px rgba(20, 30, 50, .04), 0 24px 60px rgba(20, 30, 50, .10);
    overflow: hidden;
}
.auth-shell--wide { max-width: 1180px; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.auth-shell--narrow { max-width: 520px; grid-template-columns: 1fr; }

/* Левая панель с фестивалем */
.auth-brand {
    position: relative; overflow: hidden;
    padding: 48px 44px; color: #fff;
    background: linear-gradient(150deg, var(--a-accent) 0%, var(--a-accent-dark) 100%);
    display: flex; flex-direction: column; gap: 28px;
}
.auth-brand::before {
    content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%;
    right: -120px; bottom: -120px; background: rgba(255, 255, 255, .08);
}
.auth-brand::after {
    content: ""; position: absolute; width: 120px; height: 60px; border-radius: 0 0 120px 120px;
    right: 40px; top: 0; background: var(--a-accent-2); opacity: .9;
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    background: rgba(255, 255, 255, .14); border-radius: 999px; padding: 6px 14px;
}
.auth-brand h2 { color: #fff; font-size: 34px; line-height: 1.12; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.auth-brand p { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.auth-points li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.auth-points svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; }
.auth-help { margin-top: auto; font-size: 14px; color: rgba(255, 255, 255, .78); }
.auth-help a { color: #fff; font-weight: 700; }

/* Правая часть с формой */
.auth-main { padding: 48px 52px; }
.auth-shell--narrow .auth-main { padding: 44px 44px 40px; }
.auth-title { font-size: 30px; line-height: 1.15; font-weight: 800; margin: 0 0 8px; color: var(--a-ink); letter-spacing: -.01em; }
.auth-lead { margin: 0 0 28px; color: var(--a-muted); font-size: 16px; line-height: 1.5; }
.auth-icon-badge {
    width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
    background: var(--a-soft); color: var(--a-accent); margin-bottom: 20px;
}
.auth-icon-badge svg { width: 28px; height: 28px; }

.auth-form { display: grid; gap: 18px; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.auth-grid .auth-field--wide { grid-column: 1 / -1; }

.auth-section { display: grid; gap: 16px; padding-top: 8px; }
.auth-section + .auth-section { border-top: 1px solid var(--a-line); padding-top: 24px; margin-top: 6px; }
.auth-section-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 18px; font-weight: 800; color: var(--a-ink); }
.auth-step {
    width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: var(--a-accent); color: #fff; font-size: 14px; font-weight: 800;
}
.auth-section-note { margin: -6px 0 0 42px; color: var(--a-muted); font-size: 14px; }

.auth-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.auth-label { font-weight: 700; font-size: 15px; color: var(--a-ink); }
.auth-label-row a { font-size: 14px; font-weight: 700; }
.auth-input {
    width: 100%; min-height: 50px; padding: 12px 16px;
    border: 1.5px solid var(--a-line); border-radius: 12px; background: #fff;
    font: inherit; font-size: 16px; color: var(--a-ink);
    transition: border-color .15s, box-shadow .15s;
}
.auth-input::placeholder { color: #9aa4b2; }
.auth-input:hover { border-color: color-mix(in srgb, var(--a-accent) 35%, var(--a-line)); }
.auth-input:focus { outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a-accent) 16%, transparent); }
select.auth-input { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.auth-input.is-invalid { border-color: var(--a-danger); background-color: #fffafa; }
.auth-hint { font-size: 13.5px; color: var(--a-muted); line-height: 1.45; }
.auth-error { font-size: 14px; color: var(--a-danger); font-weight: 600; display: flex; gap: 6px; align-items: flex-start; }

.auth-password { position: relative; }
.auth-password .auth-input { padding-right: 54px; }
.auth-eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent;
    color: var(--a-muted); display: grid; place-items: center; cursor: pointer;
}
.auth-eye:hover { background: var(--a-soft); color: var(--a-accent); }
.auth-eye svg { width: 20px; height: 20px; }
.auth-eye .eye-off { display: none; }
.auth-eye[aria-pressed="true"] .eye-on { display: none; }
.auth-eye[aria-pressed="true"] .eye-off { display: block; }

/* Отметки согласий и выбор конкурсов */
.auth-checks { display: grid; gap: 10px; }
.auth-check {
    display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
    padding: 12px 14px; border: 1.5px solid var(--a-line); border-radius: 12px; cursor: pointer;
    font-size: 15px; line-height: 1.45; transition: border-color .15s, background .15s;
}
.auth-check:hover { border-color: color-mix(in srgb, var(--a-accent) 40%, var(--a-line)); }
.auth-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--a-accent); cursor: pointer; }
.auth-check:has(input:checked) { border-color: var(--a-accent); background: color-mix(in srgb, var(--a-soft) 55%, #fff); }
.auth-check.is-invalid { border-color: var(--a-danger); background: var(--a-danger-soft); }
.auth-check .auth-error { grid-column: 2; margin-top: 2px; }
.auth-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-choices .auth-check { font-weight: 600; }

/* Кнопки */
.auth-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 52px; padding: 12px 24px; border-radius: 999px;
    border: 0; cursor: pointer; font: inherit; font-size: 17px; font-weight: 800;
    background: var(--a-accent); color: #fff; text-decoration: none;
    transition: background .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--a-accent) 28%, transparent);
}
.auth-btn:hover { background: var(--a-accent-dark); color: #fff; transform: translateY(-1px); }
.auth-btn:active { transform: none; }
.auth-btn[disabled] { opacity: .75; cursor: progress; }
.auth-btn svg { width: 20px; height: 20px; }
.auth-btn--ghost { background: transparent; color: var(--a-accent); box-shadow: none; border: 1.5px solid var(--a-line); }
.auth-btn--ghost:hover { background: var(--a-soft); color: var(--a-accent-dark); }

.auth-divider { display: flex; align-items: center; gap: 14px; color: var(--a-muted); font-size: 14px; margin: 26px 0 14px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--a-line); }

.auth-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-role {
    display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center;
    padding: 14px; border: 1.5px solid var(--a-line); border-radius: 16px; text-decoration: none;
    color: var(--a-ink) !important; transition: border-color .15s, transform .15s, background .15s;
}
.auth-role:hover { border-color: var(--a-accent); background: color-mix(in srgb, var(--a-soft) 45%, #fff); transform: translateY(-1px); }
.auth-role svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--a-soft); color: var(--a-accent); }
.auth-role b { display: block; font-size: 16px; }
.auth-role span { display: block; font-size: 13.5px; color: var(--a-muted); line-height: 1.35; }

.auth-foot { text-align: center; color: var(--a-muted); font-size: 15px; margin: 6px 0 0; }
.auth-foot a { font-weight: 800; }

.auth-alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45; background: var(--a-soft); color: var(--a-ink); }
.auth-alert--error { background: var(--a-danger-soft); color: #7c1d22; }
.auth-alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

.auth-hidden { display: none !important; }

/* Телефон и планшет */
@media (max-width: 960px) {
    .auth { padding: 20px 12px 40px; }
    .auth::before { width: 320px; height: 320px; right: -140px; top: -140px; }
    .auth-shell, .auth-shell--wide { grid-template-columns: 1fr; }
    .auth-brand { padding: 28px 24px 30px; gap: 14px; }
    .auth-brand h2 { font-size: 24px; }
    .auth-brand p { font-size: 15px; }
    .auth-points, .auth-help { display: none; }
    .auth-brand::after { width: 80px; height: 40px; right: 24px; }
    .auth-main, .auth-shell--narrow .auth-main { padding: 28px 22px 30px; }
    .auth-title { font-size: 25px; }
}
@media (max-width: 600px) {
    .auth-grid, .auth-roles, .auth-choices { grid-template-columns: 1fr; }
    .auth-section-note { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .auth * { transition: none !important; } }

/* Заголовки, бейджи и кнопки — Fira Sans (после .auth-btn с font: inherit) */
.auth-eyebrow, .auth-brand h2, .auth-title, .auth-section-title, .auth-step, .auth-btn {
    font-family: 'Fira Sans', 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}