/* ============================================================
   Landing-страница (для неавторизованных пользователей)
   Современный Material Design 3, mobile-first, без сайдменю.
   Использует токены из variables.css (--md-primary и т.д.).
   ============================================================ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.landing-body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    background: var(--md-surface, #ffffff);
    color: var(--md-on-surface, #1e1e1e);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Страницы входа/восстановления пароля и правовые документы подключают этот же файл,
   поэтому получают тот же шрифт проекта (файлы — public/fonts/, объявления — css/fonts.css). */
body.auth-page,
body.legal-page {
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Поля и кнопки по умолчанию не наследуют шрифт тела — включаем наследование */
body.auth-page button,
body.auth-page input,
body.auth-page select,
body.auth-page textarea,
body.legal-page button,
body.legal-page input,
body.legal-page select,
body.legal-page textarea {
    font-family: inherit;
}

.landing-ctn {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Шапка ---------- */
.landing-header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    background: color-mix(in srgb, var(--md-surface, #fff) 82%, transparent);
    border-bottom: 1px solid var(--md-outline-variant, #e0e0e0);
}

.landing-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
}

.landing-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.landing-logo__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--md-primary, #6200ee), var(--md-primary-light, #7c4dff));
    color: var(--md-on-primary, #fff);
    box-shadow: var(--md-elevation-2);
}

.landing-logo__mark .material-icons { font-size: 22px; }

.landing-logo__img {
    height: 38px;
    width: auto;
    display: block;
}

.landing-logo__text { display: flex; flex-direction: column; line-height: 1; }

.landing-logo__text small {
    font-size: 0.58rem;
    font-weight: 500;
    color: var(--md-text-secondary);
    letter-spacing: normal;
    text-transform: none;
    margin-top: 0;
}

.landing-nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

.landing-nav__link {
    display: none;
    text-decoration: none;
    color: var(--md-text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 10px;
    transition: color 0.2s, background-color 0.2s;
}


/* ---------- Кнопки ---------- */
.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform 0.16s, box-shadow 0.2s, background-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.landing-btn:active { transform: scale(0.97); }

.landing-btn--primary {
    background: var(--md-primary, #6200ee);
    color: var(--md-on-primary, #fff);
    box-shadow: var(--md-elevation-2);
}

.landing-btn--primary:hover {
    box-shadow: var(--md-elevation-3);
    transform: translateY(-1px);
}

.landing-btn--outline {
    background: transparent;
    color: var(--md-primary, #6200ee);
    border: 1.5px solid var(--md-primary, #6200ee);
}

.landing-btn--outline:hover {
    background: color-mix(in srgb, var(--md-primary, #6200ee) 8%, transparent);
}

.landing-btn--lg { padding: 16px 30px; font-size: 1.05rem; border-radius: 16px; }
.landing-btn--sm { padding: 9px 18px; font-size: 0.9rem; border-radius: 12px; }

/* ---------- Hero ---------- */
.landing-hero {
    position: relative;
    padding: 72px 0 88px;
    overflow: hidden;
}

.landing-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.landing-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.35;
}

.landing-hero__orb--1 {
    width: 480px; height: 480px; top: -120px; right: -100px;
    background: var(--md-primary, #6200ee);
}

.landing-hero__orb--2 {
    width: 380px; height: 380px; bottom: -120px; left: -100px;
    background: var(--md-secondary, #03dac6);
}

.landing-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--md-outline-variant, #e0e0e0) 1px, transparent 1px),
        linear-gradient(90deg, var(--md-outline-variant, #e0e0e0) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.25;
    z-index: -2;
}

.landing-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

.landing-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--md-primary, #6200ee) 10%, transparent);
    color: var(--md-primary, #6200ee);
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 22px;
}

.landing-hero__badge .material-icons { font-size: 18px; }

.landing-hero__title {
    font-size: clamp(2.1rem, 5.5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
}

.landing-hero__title .accent {
    background: linear-gradient(90deg, var(--md-primary, #6200ee), var(--md-secondary-dark, #00a896));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.landing-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.6;
    color: var(--md-text-secondary);
    max-width: 560px;
    margin: 0 0 30px;
}

.landing-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.landing-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 38px;
    padding-top: 26px;
    border-top: 1px solid var(--md-outline-variant, #e0e0e0);
}

.landing-hero__meta-item { display: flex; flex-direction: column; gap: 2px; }

.landing-hero__meta-item strong { font-size: 1.4rem; font-weight: 700; }


/* Hero визуал (карточка-иллюстрация) */
.landing-hero__visual { position: relative; display: none; }

.landing-visual-card {
    border-radius: 24px;
    background: var(--md-surface, #fff);
    border: 1px solid var(--md-outline-variant, #e0e0e0);
    box-shadow: var(--md-elevation-4);
    padding: 24px;
}

.landing-visual-card__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--md-surface-variant, #f5f5f5);
}

.landing-visual-card__row:last-child { border-bottom: none; }

.landing-visual-card__icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--md-on-primary, #fff);
    flex-shrink: 0;
}

.landing-visual-card__icon--a { background: var(--md-primary, #6200ee); }
.landing-visual-card__icon--b { background: var(--md-secondary, #03dac6); color: #00332c; }
.landing-visual-card__icon--c { background: var(--md-info, #2196f3); }

.landing-visual-card__text { display: flex; flex-direction: column; gap: 3px; }

.landing-visual-card__text strong { font-size: 0.9rem; font-weight: 600; }

.landing-visual-card__text span { font-size: 0.78rem; color: var(--md-text-secondary); }

/* ---------- Секции ---------- */
.landing-section { padding: 80px 0; }

.landing-section--alt { background: var(--md-surface-variant, #f5f5f5); }

.landing-section__head { max-width: 640px; margin: 0 auto 52px; text-align: center; }

.landing-section__eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-primary, #6200ee);
    margin-bottom: 12px;
}

.landing-section__title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
}

.landing-section__subtitle {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--md-text-secondary);
    margin: 0;
}

/* ---------- Карточки возможностей ---------- */
.landing-features { display: grid; grid-template-columns: 1fr; gap: 20px; }

.landing-feature {
    background: var(--md-surface, #fff);
    border: 1px solid var(--md-outline-variant, #e0e0e0);
    border-radius: 20px;
    padding: 28px 24px;
    transition: transform 0.2s, box-shadow 0.25s;
}

.landing-feature:hover { transform: translateY(-4px); box-shadow: var(--md-elevation-3); }

.landing-feature__icon {
    width: 52px; height: 52px;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    font-size: 26px;
    color: var(--md-on-primary, #fff);
    background: linear-gradient(135deg, var(--md-primary, #6200ee), var(--md-primary-light, #7c4dff));
}

.landing-feature h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; }

/* ---------- Шаги ---------- */
.landing-steps { display: grid; grid-template-columns: 1fr; gap: 24px; }

.landing-step {
    position: relative;
    padding: 30px 24px;
    border-radius: 20px;
    background: var(--md-surface, #fff);
    border: 1px solid var(--md-outline-variant, #e0e0e0);
}

.landing-step__num {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--md-primary, #6200ee);
    color: var(--md-on-primary, #fff);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 16px;
    box-shadow: var(--md-elevation-2);
}

.landing-step h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }

.landing-step p { font-size: 0.92rem; line-height: 1.6; color: var(--md-text-secondary); margin: 0; }

/* ---------- Цифры/статистика ---------- */
.landing-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; text-align: center; }

.landing-stat {
    padding: 28px 16px;
    border-radius: 20px;
    background: var(--md-surface, #fff);
    border: 1px solid var(--md-outline-variant, #e0e0e0);
}

.landing-stat strong {
    display: block;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    background: linear-gradient(120deg, var(--md-primary, #6200ee), var(--md-secondary, #03dac6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.landing-stat span { display: block; margin-top: 6px; font-size: 0.88rem; color: var(--md-text-secondary); }

/* ---------- CTA ---------- */
.landing-cta {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 56px 28px;
    text-align: center;
    background: linear-gradient(135deg, var(--md-primary, #6200ee), var(--md-primary-light, #7c4dff));
    color: var(--md-on-primary, #fff);
    box-shadow: var(--md-elevation-3);
}

.landing-cta h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; margin: 0 0 14px; }

.landing-cta p { font-size: 1.05rem; line-height: 1.6; margin: 0 0 28px; opacity: 0.92; }

.landing-cta .landing-btn--primary { background: #fff; color: var(--md-primary, #6200ee); box-shadow: none; }

/* ---------- Футер ---------- */
.landing-footer { padding: 40px 0; border-top: 1px solid var(--md-outline-variant, #e0e0e0); }

.landing-footer__inner { display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }

.landing-footer__links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }

.landing-footer__links a { font-size: 0.9rem; color: var(--md-text-secondary); text-decoration: none; }

.landing-footer__links a:hover { color: var(--md-primary, #6200ee); }

.landing-footer__copy { font-size: 0.82rem; color: var(--md-text-disabled); }

/* ---------- Анимация появления ---------- */
.landing-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }

.landing-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   Адаптивность
   ============================================================ */

@media (min-width: 640px) {
    .landing-features { grid-template-columns: repeat(2, 1fr); }
    .landing-stats { grid-template-columns: repeat(4, 1fr); }
    .landing-footer__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

@media (min-width: 900px) {
    .landing-nav__link { display: inline-flex; }
    .landing-hero__inner { grid-template-columns: 1.15fr 0.85fr; }
    .landing-hero__visual { display: block; }
    .landing-features { grid-template-columns: repeat(4, 1fr); }
    .landing-steps { grid-template-columns: repeat(3, 1fr); }
    .landing-stats { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .landing-reveal { opacity: 1; transform: none; transition: none; }
    .landing-btn { transition: none; }
}

/* ============================================================
   Auth-страницы (единый стиль с лендингом — центрированная карточка)
   ============================================================ */

.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--md-surface, #ffffff);
}

.auth-page__main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 56px;
    position: relative;
    overflow: hidden;
}

.auth-page__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.auth-page__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.28;
}

.auth-page__orb--1 { width: 420px; height: 420px; top: -140px; right: -120px; background: var(--md-primary, #6200ee); }
.auth-page__orb--2 { width: 340px; height: 340px; bottom: -140px; left: -120px; background: var(--md-secondary, #03dac6); }

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--md-surface, #fff);
    border: 1px solid var(--md-outline-variant, #e0e0e0);
    border-radius: 24px;
    box-shadow: var(--md-elevation-3);
    padding: 40px 32px;
}

.auth-card__header { text-align: center; margin-bottom: 28px; }

.auth-card__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--md-primary, #6200ee), var(--md-primary-light, #7c4dff));
    color: var(--md-on-primary, #fff);
    margin-bottom: 16px;
    box-shadow: var(--md-elevation-2);
}

.auth-card__mark .material-icons { font-size: 26px; }

.auth-card h1 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--md-on-surface, #1e1e1e);
}

.auth-card p {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--md-text-secondary);
    margin: 0;
}

.auth-form { margin-top: 6px; }

/* Honeypot: поле-ловушка невидимо для людей, но доступно автозаполнителям ботов */
.auth-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.auth-field { margin-bottom: 18px; }

/* Подсказка под полем формы (правила ввода): мелкий приглушённый текст, не «инлайн-стиль». */
.auth-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--md-text-secondary);
}

.auth-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--md-text-secondary);
}

.auth-input-wrap { position: relative; }

.auth-input-wrap .input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--md-input-icon);
    pointer-events: none;
}

.auth-input-wrap input {
    width: 100%;
    padding: 14px 50px 14px 46px;
    border: 1px solid var(--md-input-border);
    border-radius: 13px;
    font-size: 1rem;
    background: var(--md-input-bg);
    color: var(--md-input-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-input-wrap input:focus {
    outline: none;
    border-color: var(--md-input-border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary, #6200ee) 14%, transparent);
}

.auth-input-wrap input::placeholder { color: var(--md-input-placeholder); }

.auth-input-wrap input.no-icon { padding-left: 16px; }

.auth-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-input-icon);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.auth-toggle:hover { color: var(--md-link); }

.auth-toggle .material-icons { font-size: 20px; }

/* Кнопка submit */
.auth-submit {
    width: 100%;
    padding: 14px;
    background: var(--md-primary, #6200ee);
    color: var(--md-on-primary, #fff);
    border: none;
    border-radius: 13px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 20px;
    transition: box-shadow 0.2s, transform 0.16s, opacity 0.2s;
    box-shadow: var(--md-elevation-1);
}

.auth-submit:hover { box-shadow: var(--md-elevation-2); }
.auth-submit:active { transform: scale(0.99); }

/* Строка опций (запомнить / забыл пароль) */
.auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.auth-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--md-text-secondary); }

.auth-checkbox input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--md-link); }

/* Блок обязательных согласий при регистрации (152-ФЗ) */
.auth-legal { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 22px; }
.auth-legal .auth-checkbox { align-items: flex-start; line-height: 1.45; }
.auth-legal a { color: var(--md-primary, #6200ee); font-weight: 600; text-decoration: none; }
.auth-legal a:hover { text-decoration: underline; }

/* Публичная страница правового документа (/legal/{code}) */
.legal-page { min-height: 100vh; background: var(--md-surface, #ffffff); }
.legal-main { padding: 40px 20px 64px; display: flex; justify-content: center; }
.legal-card { width: 100%; max-width: 860px; background: var(--md-surface, #fff); border: 1px solid var(--md-outline-variant, #e0e0e0); border-radius: 24px; box-shadow: var(--md-elevation-2); padding: 40px 32px; }
.legal-card__title { margin: 0 0 8px; font-size: 1.6rem; color: var(--md-on-surface); }
.legal-card__meta { color: var(--md-text-secondary); font-size: 0.9rem; margin-bottom: 24px; }
.legal-card__body { color: var(--md-on-surface); font-size: 0.95rem; line-height: 1.65; }
.legal-card__body h2 { font-size: 1.15rem; margin: 24px 0 8px; }
.legal-card__body p { margin: 0 0 12px; }
.legal-card__back { margin-top: 28px; }

/* Модальное окно правового документа: затемнение фона (базовый .crud-modal__overlay декоративный) */
#legal-modal .crud-modal__container { max-width: 760px; }
#legal-modal .crud-modal__body h2 { font-size: 1.1rem; margin: 18px 0 8px; }
#legal-modal .crud-modal__body p { margin: 0 0 12px; line-height: 1.6; }

.auth-link { font-size: 0.85rem; color: var(--md-primary, #6200ee); text-decoration: none; font-weight: 600; }

.auth-link:hover { text-decoration: underline; }

/* Разделитель */
.auth-divider { display: flex; align-items: center; gap: 14px; color: var(--md-text-disabled); font-size: 0.75rem; margin-bottom: 18px; }

.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--md-outline-variant, #e0e0e0); }

/* Социальные кнопки */
.auth-social { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }

.auth-social-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px;
    border: 1px solid var(--md-input-border);
    border-radius: 13px;
    background: var(--md-input-bg);
    color: var(--md-input-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: border-color 0.2s, background-color 0.2s;
}

.auth-social-btn:hover { border-color: var(--md-link); background: color-mix(in srgb, var(--md-primary, #6200ee) 5%, transparent); }

.auth-social-btn--yandex { background: #ffcc00; border-color: #ffcc00; color: #1a1a1a; }
.auth-social-btn--yandex:hover { background: #e6b800; border-color: #e6b800; }

.auth-social-btn--esia { background: #0056b3; border-color: #0056b3; color: #fff; }
.auth-social-btn--esia:hover { background: #004499; border-color: #004499; }

/* Нижние ссылки */
/* Кнопка входа по отпечатку/лицу (WebAuthn) */
.auth-webauthn-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px;
    background: var(--md-input-bg);
    border: 1px solid var(--md-input-border);
    border-radius: 13px;
    color: var(--md-input-text);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 22px;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.auth-webauthn-btn:hover {
    border-color: var(--md-link);
    background: color-mix(in srgb, var(--md-primary, #6200ee) 5%, transparent);
    box-shadow: var(--md-elevation-1);
}

.auth-webauthn-btn:active { transform: scale(0.995); }

.auth-webauthn-btn:disabled { opacity: 0.6; cursor: default; }

.auth-webauthn-btn .material-icons {
    font-size: 22px;
    color: var(--md-link);
}


.auth-alt { text-align: center; padding-top: 20px; border-top: 1px solid var(--md-outline-variant, #e0e0e0); font-size: 0.88rem; color: var(--md-text-secondary); }

.auth-alt a { color: var(--md-primary, #6200ee); text-decoration: none; font-weight: 600; }

.auth-alt a:hover { text-decoration: underline; }

/* Ссылки-действия внизу (forgot/reset) */
.auth-links { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 4px; }

/* Автозаполнение */
.auth-input-wrap input:-webkit-autofill,
.auth-input-wrap input:-webkit-autofill:hover,
.auth-input-wrap input:-webkit-autofill:focus,
.auth-input-wrap input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--md-input-bg) inset !important;
    -webkit-text-fill-color: var(--md-input-text) !important;
    caret-color: var(--md-input-text) !important;
}

.auth-input-wrap input:autofill,
.auth-input-wrap input:autofill:hover,
.auth-input-wrap input:autofill:focus {
    background-color: var(--md-input-bg) !important;
    color: var(--md-input-text) !important;
}

/* Сообщения (alert) на auth-страницах */
.auth-card .alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 0.875rem;
}

.auth-card .alert i { font-size: 20px; flex-shrink: 0; }

.auth-card .alert-error {
    background: color-mix(in srgb, var(--md-error, #b00020) 10%, transparent);
    color: var(--md-error, #b00020);
    border-left: 3px solid var(--md-error, #b00020);
}

.auth-card .alert-success {
    background: color-mix(in srgb, var(--md-success, #4caf50) 12%, transparent);
    color: var(--md-success, #4caf50);
    border-left: 3px solid var(--md-success, #4caf50);
}







/* ============================================================
   Блок: баннер регистрации на судейский семинар (landing)
   ============================================================ */
.landing-seminar { padding: 40px 0; }

.landing-seminar__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--md-primary, #6200ee) 16%, transparent);
    color: var(--md-primary, #6200ee);
    margin-bottom: 16px;
}

.landing-seminar__badge .material-icons { font-size: 18px; }

.landing-seminar__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--md-on-surface, #1a1a2e);
}

.landing-seminar__text {
    font-size: 1rem;
    color: var(--md-secondary, #5f6368);
    margin: 0 0 24px;
    max-width: 560px;
}

/* Организатор в баннере: логотип и название — чтобы не путать семинар и мероприятие */
.landing-seminar__organizer {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding: 8px 14px 8px 8px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--md-primary, #6200ee) 8%, transparent);
}

.landing-seminar__organizer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 4px;
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
}

.landing-seminar__organizer-logo--empty { color: var(--md-primary, #6200ee); }
.landing-seminar__organizer-logo--empty .material-icons { font-size: 24px; }

.landing-seminar__organizer-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    line-height: 1.25;
}

.landing-seminar__organizer-text small {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--md-secondary, #5f6368);
}

.landing-seminar__organizer-text strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--md-on-surface, #1a1a2e);
}

/* Шапка баннера: организатор и бейдж на одной строке */
.landing-seminar__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.landing-seminar__head .landing-seminar__organizer { margin-bottom: 0; }
.landing-seminar__head .landing-seminar__badge { margin-bottom: 0; }

/* Несколько баннеров мероприятий подряд (у каждого мероприятия своя галка) */
.landing-banners {
    display: grid;
    gap: 24px;
}

/* Несколько баннеров на компьютере: колонок столько же, сколько баннеров (2, 3 или 4,
   но не больше четырёх). Блок с картинкой всегда ровно по картинке (не растягивается),
   а программные баннеры ужимаются типографикой под ту же высоту.
   Ниже 900 px баннеры идут в один столбец во всю ширину (обычные крупные шрифты). */
@media (min-width: 900px) {
    .landing-banners--cols-2,
    .landing-banners--cols-3,
    .landing-banners--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    /* Картинка: ширина колонки, высота — по пропорции картинки. align-self: start —
       блок не растягивается на высоту ряда, поэтому «воздуха» под картинкой нет. */
    .landing-banners--multi .landing-seminar__banner--image {
        display: flex;
        width: 100%;
        justify-self: stretch;
        align-self: start;
    }

    .landing-banners--multi .landing-seminar__banner--image .landing-seminar__banner-img {
        width: 100%;
        height: auto;
        /* Картинка видна целиком: не обрезается и не искажается */
        object-fit: contain;
    }

    /* Программный баннер в ряду: боковая иконка (group) на компьютере занимает 200 px
       и оставляет тексту в карточке 270 px всего ~56 px — в ряду она не нужна, карточка
       становится контейнером. Размеры внутри считаются от ширины карточки (cqw), поэтому
       при 2, 3 и 4 колонках карточка заполняется одинаково и не выглядит пустой. */
    .landing-banners--multi .landing-seminar__banner:not(.landing-seminar__banner--image) {
        grid-template-columns: 1fr;
        align-content: stretch;
        container-type: inline-size;
        padding: 2.9%;
        gap: 0;
    }

    /* Контент заполняет карточку целиком: бейдж/заголовок/текст сверху, кнопка внизу,
       поэтому в высоких карточках не остаётся «пустоты» */
    .landing-banners--multi .landing-seminar__banner:not(.landing-seminar__banner--image) .landing-seminar__content {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .landing-banners--multi .landing-seminar__aside {
        display: none;
    }

    /* Размеры — в cqw (1 cqw = 1% ширины карточки); при 270 px это прежние «плотные» значения,
       при 370–560 px пропорционально крупнее — заполнение одинаковое при любом числе колонок */
    .landing-banners--multi .landing-seminar__content .landing-seminar__head {
        margin-bottom: 0.9cqw;
        gap: 1.7cqw;
    }

    .landing-banners--multi .landing-seminar__content .landing-seminar__organizer {
        padding: 0.8cqw 2cqw 0.8cqw 0.8cqw;
        gap: 1.7cqw;
    }

    .landing-banners--multi .landing-seminar__content .landing-seminar__organizer-logo {
        flex: 0 0 9cqw;
        width: 9cqw;
        height: 9cqw;
    }

    .landing-banners--multi .landing-seminar__content .landing-seminar__organizer-text strong { font-size: 4.7cqw; }
    .landing-banners--multi .landing-seminar__content .landing-seminar__organizer-text small { font-size: 3.6cqw; }

    .landing-banners--multi .landing-seminar__content .landing-seminar__badge {
        padding: 1cqw 2.6cqw;
        font-size: 4.1cqw;
    }

    .landing-banners--multi .landing-seminar__content .landing-seminar__badge .material-icons { font-size: 4.8cqw; }

    .landing-banners--multi .landing-seminar__content .landing-seminar__title {
        font-size: 6.9cqw;
        line-height: 1.2;
        margin-bottom: 1.2cqw;
    }

    .landing-banners--multi .landing-seminar__content .landing-seminar__text {
        font-size: 4.8cqw;
        margin-bottom: 1.7cqw;
    }

    .landing-banners--multi .landing-seminar__content .landing-seminar__text small { font-size: 4.4cqw; }

    .landing-banners--multi .landing-seminar__content .landing-seminar__cta {
        margin-top: auto;
        padding: 2.1cqw 4.1cqw;
        font-size: 4.7cqw;
    }

    .landing-banners--multi .landing-seminar__content .landing-seminar__cta .material-icons { font-size: 5.7cqw; }
}

/* Три и четыре баннера — по три в ряд, когда места достаточно
   (на узких экранах остаются две колонки, иначе карточки становятся слишком мелкими) */
@media (min-width: 1024px) {
    .landing-banners--cols-3,
    .landing-banners--cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* В узких колонках кнопка «Подать заявку» — компактнее */
    .landing-banners--cols-3 .landing-seminar__banner--image .landing-seminar__cta,
    .landing-banners--cols-4 .landing-seminar__banner--image .landing-seminar__cta {
        left: 12px;
        bottom: 12px;
        padding: 8px 14px;
        font-size: 0.82rem;
    }
}

/* Четыре баннера — по четыре в ряд на широком экране */
@media (min-width: 1280px) {
    .landing-banners--cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.landing-seminar__form { display: flex; flex-direction: column; gap: 16px; }

.landing-seminar__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.landing-seminar__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.landing-seminar__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.landing-seminar__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--md-on-surface, #1a1a2e);
}

.landing-seminar__label b { color: var(--md-error, #b00020); }

.landing-seminar__field input,
.landing-seminar__field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--md-outline, rgba(0,0,0,0.16));
    border-radius: 12px;
    font-size: 1rem;
    background: var(--md-surface, #fff);
    color: var(--md-on-surface, #1a1a2e);
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.landing-seminar__field input:focus,
.landing-seminar__field textarea:focus {
    outline: none;
    border-color: var(--md-primary, #6200ee);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary, #6200ee) 14%, transparent);
}

.landing-seminar__field input.landing-seminar__field--error,
.landing-seminar__field--error input {
    border-color: var(--md-error, #b00020);
}

.landing-seminar__error {
    font-size: 0.8rem;
    color: var(--md-error, #b00020);
    min-height: 1em;
}

.landing-seminar__actions { margin-top: 4px; }

.landing-seminar__actions .landing-btn { width: 100%; justify-content: center; }

.landing-seminar__status {
    font-size: 0.9rem;
    min-height: 1.4em;
    margin-top: 4px;
}

.landing-seminar__status--success { color: var(--md-success, #4caf50); }
.landing-seminar__status--error { color: var(--md-error, #b00020); }


/* ============================================================
   Баннер + модалка регистрации на семинар (обновлённая версия)
   ============================================================ */
.landing-seminar__banner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--md-primary, #6200ee) 12%, transparent), color-mix(in srgb, var(--md-primary, #6200ee) 4%, transparent));
    border: 1px solid var(--md-outline, rgba(0,0,0,0.12));
    border-radius: 24px;
    padding: 32px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    /* Как у <button>: карточка дашборда — div, иначе наследуется line-height страницы (1.5) */
    line-height: normal;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.landing-seminar__banner:hover {
    box-shadow: 0 10px 30px color-mix(in srgb, var(--md-primary, #6200ee) 20%, transparent);
    transform: translateY(-2px);
}

/* Баннер мероприятия, где судья уже в штате: кнопка «Отказаться от участия» */
.landing-seminar__banner.is-registered .landing-seminar__cta {
    background: var(--md-surface-variant, #ececec);
    color: var(--md-on-surface-variant, #555);
}

.landing-seminar__banner.is-registered:hover .landing-seminar__cta {
    background: color-mix(in srgb, var(--md-error, #b00020) 14%, transparent);
    color: var(--md-error, #b00020);
}

/* Кнопка «×» на баннере дашборда: отказаться от участия (баннер больше не показывается) */
.landing-seminar__decline {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--md-surface, #fff) 82%, transparent);
    color: var(--md-secondary, #5f6368);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.landing-seminar__decline:hover,
.landing-seminar__decline:focus-visible {
    background: color-mix(in srgb, var(--md-error, #b00020) 14%, transparent);
    color: var(--md-error, #b00020);
}

.landing-seminar__decline .material-icons { font-size: 17px; }

/* Баннер с загруженной картинкой (настройка мероприятия): картинка заменяет
   программную подложку, кнопка «Подать заявку» лежит поверх неё внизу слева. */
.landing-seminar__banner--image {
    display: block;
    padding: 0;
    background: var(--md-surface, #fff);
    line-height: 0;
}

.landing-seminar__banner-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
}

.landing-seminar__banner--image .landing-seminar__cta {
    position: absolute;
    left: 24px;
    bottom: 24px;
    margin-top: 0;
    line-height: 1.2;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* На компьютере картинка занимает половину ширины контейнера и стоит по центру:
   во всю ширину она выглядит слишком крупной (01.11.2026). На мобильном — вся ширина. */
@media (min-width: 641px) {
    .landing-seminar__banner--image {
        width: 50%;
        justify-self: center;
    }

    /* Кнопка на уменьшенном баннере — компактнее, чтобы не закрывать картинку */
    .landing-seminar__banner--image .landing-seminar__cta {
        left: 16px;
        bottom: 16px;
        padding: 10px 18px;
        font-size: 0.9rem;
    }
}

@media (max-width: 640px) {
    .landing-seminar__banner--image .landing-seminar__cta {
        left: 12px;
        bottom: 12px;
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}

.landing-seminar__aside {
    display: none;
}

.landing-seminar__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 22px;
    border-radius: 12px;
    background: var(--md-primary, #6200ee);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}
.landing-seminar__cta .material-icons { font-size: 20px; }

.landing-seminar__specs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.landing-seminar__spec {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--md-on-surface, #1a1a2e);
    cursor: pointer;
}
.landing-seminar__spec input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--md-primary, #6200ee);
    cursor: pointer;
}

.landing-seminar__field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--md-outline, rgba(0,0,0,0.16));
    border-radius: 12px;
    font-size: 1rem;
    background: var(--md-surface, #fff);
    color: var(--md-on-surface, #1a1a2e);
    font-family: inherit;
}

.landing-seminar__field input[type="date"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--md-outline, rgba(0,0,0,0.16));
    border-radius: 12px;
    font-size: 1rem;
    background: var(--md-surface, #fff);
    color: var(--md-on-surface, #1a1a2e);
    font-family: inherit;
}

.landing-seminar__input--error {
    border-color: var(--md-error, #b00020) !important;
}

/* Модальное окно */
.seminar-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
}
.seminar-modal--open { display: block; }

.seminar-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.seminar-modal__dialog {
    position: relative;
    max-width: 720px;
    max-height: 90vh;
    margin: 5vh auto;
    background: var(--md-surface, #fff);
    border-radius: 20px;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.seminar-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--md-surface-variant, #eee);
    position: sticky;
    top: 0;
    background: var(--md-surface, #fff);
    z-index: 1;
}

.seminar-modal__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--md-on-surface, #1a1a2e);
}

.seminar-modal__close {
    border: none;
    background: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--md-text-secondary, #5f6368);
}

.seminar-modal__body {
    padding: 24px;
}

.seminar-modal__meta {
    margin: 0 0 16px;
    font-size: 0.9rem;
    color: var(--md-text-secondary, #5f6368);
}

@media (min-width: 640px) {
    .landing-seminar__row { grid-template-columns: 1fr 1fr; }
    .landing-seminar__field--wide { grid-column: span 1; }
}

@media (min-width: 900px) {
    .landing-seminar__banner { grid-template-columns: 1fr 200px; }
    .landing-seminar__aside {
        display: flex;
        align-items: center;
        justify-content: center;
        color: color-mix(in srgb, var(--md-primary, #6200ee) 40%, transparent);
    }
    .landing-seminar__aside .material-icons { font-size: 120px; }
    .landing-seminar__row { grid-template-columns: 1fr 1fr 1fr; }
    .landing-seminar__field--wide { grid-column: span 2; }
}

/* ============================================================
   SelectSearch (выбор организации с поиском в форме семинара)
   ============================================================ */
.ss-wrapper { position: relative; width: 100%; }

.ss-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--md-outline, rgba(0,0,0,0.16));
    border-radius: 12px;
    font-size: 1rem;
    background: var(--md-surface, #fff);
    color: var(--md-on-surface, #1a1a2e);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-align: left;
    gap: 8px;
    box-sizing: border-box;
    font-family: inherit;
}
.ss-trigger:hover { border-color: var(--md-primary, #6200ee); }
.ss-trigger:focus,
.ss-trigger[aria-expanded='true'] {
    outline: none;
    border-color: var(--md-primary, #6200ee);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary, #6200ee) 14%, transparent);
}
.ss-trigger-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-arrow { font-size: 10px; color: var(--md-on-surface-variant, #5f6368); transition: transform 0.2s; flex-shrink: 0; }
.ss-trigger[aria-expanded='true'] .ss-arrow { transform: rotate(180deg); }

.ss-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--md-surface, #fff);
    border: 1px solid var(--md-outline, rgba(0,0,0,0.16));
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 200;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ss-search {
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--md-outline, rgba(0,0,0,0.1));
    font-size: 1rem;
    background: var(--md-surface, #fff);
    color: var(--md-on-surface, #1a1a2e);
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}
.ss-search:focus { border-bottom-color: var(--md-primary, #6200ee); }

.ss-options { overflow-y: auto; max-height: 220px; }

.ss-option {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--md-on-surface, #1a1a2e);
    transition: background 0.15s;
    border-bottom: 1px solid var(--md-outline, rgba(0,0,0,0.06));
}
.ss-option:last-child { border-bottom: none; }
.ss-option:hover { background: var(--md-surface-variant, #f1f0f6); }
.ss-option--selected { background: color-mix(in srgb, var(--md-primary, #6200ee) 10%, transparent); font-weight: 500; }
.ss-option--placeholder { color: var(--md-on-surface-variant, #5f6368); font-style: italic; }
.ss-option--empty { color: var(--md-on-surface-variant, #5f6368); cursor: default; text-align: center; padding: 20px 14px; font-style: italic; }

/* ============================================================
   Дашборд судьи: компактные баннеры быстрой регистрации
   ============================================================ */
.judge-dashboard {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.judge-dashboard__title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
}

/* Одиночный баннер на дашборде — компактный вид страницы.
   Специфичность понижена через :where(), чтобы правила сетки баннеров
   (.landing-banners--cols-*) могли задавать свои размеры для ряда из нескольких. */
:where(.judge-dashboard) .landing-seminar__banner {
    width: 100%;
    text-align: left;
    margin: 0;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 14px;
}

:where(.judge-dashboard) .landing-seminar__title {
    font-size: 1.15rem;
    margin: 6px 0;
}

:where(.judge-dashboard) .landing-seminar__text {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

:where(.judge-dashboard) .landing-seminar__cta {
    margin-top: 10px;
    padding: 8px 16px;
    font-size: 0.9rem;
    border-radius: 10px;
}

:where(.judge-dashboard) .landing-seminar__cta .material-icons {
    font-size: 18px;
}

:where(.judge-dashboard) .landing-seminar__badge {
    font-size: 0.85rem;
}

/* На дашборде обе иконки-aside скрыты, баннер всегда в одну колонку. */
:where(.judge-dashboard) .landing-seminar__banner {
    grid-template-columns: 1fr;
}

:where(.judge-dashboard) .landing-seminar__banner .landing-seminar__aside {
    display: none;
}

/* Ряд баннеров: отступ между карточками меньше, чем на главной */
:where(.judge-dashboard) .landing-banners {
    gap: 12px;
}

/* Баннер-картинка на дашборде: как на главной — половина ширины, высота по картинке.
   Правила выше задают паддинг 16/20 px и радиус 14 px — для картинки паддинг не нужен. */
:where(.judge-dashboard) .landing-seminar__banner--image {
    display: block;
    width: 50%;
    max-width: 560px;
    padding: 0;
    line-height: 0;
    background: var(--md-surface, #fff);
}

:where(.judge-dashboard) .landing-seminar__banner--image .landing-seminar__banner-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

:where(.judge-dashboard) .landing-seminar__banner--image .landing-seminar__cta {
    position: absolute;
    left: 16px;
    bottom: 16px;
    margin-top: 0;
    padding: 8px 14px;
    font-size: 0.85rem;
    border-radius: 10px;
}

@media (max-width: 720px) {
    :where(.judge-dashboard) .landing-seminar__banner--image { width: 100%; }
}