html {
    height: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    /* Акцентный синий UI; фирменный фон логотипа — тёмный «чернильный» */
    --es-brand: #2563eb;
    --es-brand-ink: #111827;
    --es-brand-dark: #1d4ed8;
    --es-brand-light: #3b82f6;
    --es-accent: #f97316;
    --es-accent-dark: #ea580c;
    --es-success: #16a34a;
    --es-success-dark: #15803d;
    --es-danger: #dc2626;
    --es-danger-dark: #b91c1c;
    --es-surface: #ffffff;
    --es-bg: #f0f4ff;
    --es-bg-accent: #fff7ed;
    --es-text: #1e293b;
    --es-muted: #64748b;
    --es-border: #e2e8f0;
    --es-radius: 14px;
    --es-radius-sm: 10px;
    --es-btn-radius: 10px;
    --es-shadow: 0 4px 20px rgba(37, 99, 235, 0.1);
    --es-shadow-hover: 0 10px 32px rgba(37, 99, 235, 0.18);
    --es-gradient-brand: linear-gradient(135deg, #1d4ed8 0%, #2563eb 45%, #3b82f6 100%);
    --es-gradient-warm: linear-gradient(135deg, #fff7ed 0%, #fef3c7 48%, #eff6ff 100%);
    --es-gradient-page: linear-gradient(180deg, #eef2ff 0%, #f8fafc 28%, #f1f5f9 100%);
}

body {
    margin: 0;
    min-height: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--es-bg);
    color: var(--es-text);
    font-size: 16px;
    line-height: 1.5;
}

img,
video {
    max-width: 100%;
    height: auto;
}

.container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px);
    box-sizing: border-box;
}

@media (min-width: 1100px) {
    .container {
        max-width: 1080px;
    }
}

@media (min-width: 1440px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 1440px;
    }
}

.main-container {
    min-width: 0;
}

.header {
    flex-shrink: 0;
    background: #111827;
    color: #fff;
    /* Без padding-left: иначе .container в шапке центрируется уже́же, чем герой,
       и логотип невозможно совместить с золотой рамкой. Бургер — position:fixed. */
    --header-burger-gutter: 56px;
    padding-left: 0;
    box-sizing: border-box;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: clamp(44px, 4.8vw + 0.5rem, 58px);
    padding: 4px 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

.nav-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
    min-width: 0;
    flex: 1 1 auto;
}

.nav-a11y-toggle {
    flex-shrink: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: clamp(0.8rem, 0.72rem + 0.35vw, 0.92rem);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 8px 12px;
    max-width: min(200px, 42vw);
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}

/* В ряду с «Карта»: компактнее плиток, та же высота визуально */
.nav-a11y-toggle--toolbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 52px;
    max-width: min(7.5rem, 28vw);
    padding: 5px 7px;
    border-radius: 10px;
    font-size: clamp(0.62rem, 0.55rem + 0.28vw, 0.72rem);
    line-height: 1.15;
    text-align: center;
    box-sizing: border-box;
}

@media (min-width: 520px) {
    .nav-a11y-toggle--toolbar {
        max-width: min(8.75rem, 26vw);
        font-size: clamp(0.65rem, 0.58rem + 0.22vw, 0.78rem);
    }
}

.nav-a11y-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.85);
}

.nav-a11y-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Логотип: фон цвета шапки, левый край = левый край .container / рамки героя */
.brand {
    display: block;
    flex: 0 1 auto;
    align-self: center;
    min-width: 0;
    min-height: 0;
    max-width: min(420px, 58vw);
    color: #fff;
    text-decoration: none;
    line-height: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.brand:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.brand__picture {
    display: block;
    line-height: 0;
    max-width: 100%;
}

.brand__header-logo {
    display: block;
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: clamp(32px, 3.6vw + 0.4rem, 48px);
    object-fit: contain;
    object-position: left center;
}

/* Широкий знак сливается с шапкой — без синей «плашки» */
.brand__header-logo--wide {
    max-height: clamp(36px, 3.4vw + 1rem, 56px);
    width: auto;
    max-width: min(340px, 100%);
    border-radius: 0;
    box-shadow: none;
}

.brand__header-logo--badge {
    max-height: clamp(44px, 5.2vw + 0.6rem, 72px);
    border-radius: 0;
    box-shadow: none;
}

.nav-header-minimal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.nav-minimal-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 50px;
    padding: 4px 6px 6px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    font-family: inherit;
    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

a.nav-minimal-tile {
    color: #f8fafc;
}

.nav-minimal-tile:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.nav-minimal-tile:focus-visible {
    outline: 2px solid rgba(147, 197, 253, 0.95);
    outline-offset: 2px;
}

.nav-minimal-tile.is-active {
    background: rgba(37, 99, 235, 0.45);
    box-shadow: inset 0 0 0 2px rgba(147, 197, 253, 0.55);
}

.nav-minimal-tile__svg {
    display: block;
    flex-shrink: 0;
}

.nav-minimal-tile__label {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-align: center;
    max-width: 68px;
}

.nav-auth-entry {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 6px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.nav-auth-entry:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.nav-auth-entry:focus-visible {
    outline: 2px solid rgba(147, 197, 253, 0.95);
    outline-offset: 2px;
}

.nav-auth-entry.is-active {
    background: rgba(37, 99, 235, 0.45);
    box-shadow: inset 0 0 0 2px rgba(147, 197, 253, 0.55);
}

.nav-auth-entry__ico {
    display: flex;
    flex-shrink: 0;
}

.nav-auth-entry__svg {
    display: block;
}

.nav-auth-entry[data-authed="1"] .nav-auth-entry__svg--guest {
    display: none;
}

.nav-auth-entry[data-authed="0"] .nav-auth-entry__svg--user {
    display: none;
}

.nav-auth-entry__copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.nav-auth-entry__line1 {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.nav-auth-entry__line2 {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.88;
    line-height: 1.2;
    max-width: 128px;
}

@media (max-width: 420px) {
    .nav-auth-entry__line2 {
        display: none;
    }

    .nav-auth-entry {
        padding-right: 8px;
    }
}

.nav-fav-popover__guest {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.45;
    color: #4b5563;
}

.nav-fav-popover__guest-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin-bottom: 10px;
}

.nav-fav-popover__guest-actions .nav-fav-popover__link {
    display: inline-block;
}

.nav-fav-popover__local-note {
    margin: 0 0 8px;
    font-size: 12px;
    color: #6b7280;
}

.nav-popover-wrap {
    position: relative;
    display: inline-flex;
}

.nav-fav-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200;
    min-width: min(280px, 92vw);
    max-height: min(360px, 70vh);
    overflow-y: auto;
    padding: 10px 12px;
    background: #fff;
    color: #111827;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
}

.nav-fav-popover__title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

.nav-fav-popover__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-fav-popover__item {
    margin: 0 0 6px;
}

.nav-fav-popover__link {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: none;
}

.nav-fav-popover__link:hover {
    background: #eff6ff;
}

.nav-fav-popover__empty {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

.nav-auth-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-favorites-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-minimal-tile--favorites {
    position: relative;
}

.nav-minimal-tile--favorites.has-items .nav-favorites-btn__heart {
    fill: #fb7185;
    stroke: #fda4af;
}

.nav-favorites-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f43f5e;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #111827;
    box-sizing: border-box;
}

.nav-favorites-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1100;
    width: min(300px, 92vw);
    max-height: min(70vh, 420px);
    padding: 12px 14px 10px;
    background: #fff;
    color: #111827;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.nav-favorites-popover[hidden] {
    display: none !important;
}

.nav-favorites-popover__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.nav-favorites-popover__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #111827;
    flex: 1;
}

.nav-favorites-popover__close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin: -4px -4px 0 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-favorites-popover__close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.nav-favorites-popover__close:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.nav-favorites-popover__lead {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
}

.nav-favorites-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 0 4px;
}

.nav-favorites-empty {
    margin: 4px 0 0;
    font-size: 0.88rem;
    line-height: 1.45;
}

.nav-favorites-note {
    margin: 0 0 6px;
    font-size: 0.78rem;
    line-height: 1.35;
}

.nav-favorites-ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-favorites-item {
    margin: 0 0 4px;
}

.nav-favorites-link {
    display: block;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e40af;
    text-decoration: none;
    line-height: 1.35;
    transition: background-color 0.15s ease;
}

.nav-favorites-link:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.nav-favorites-link:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.nav-favorites-popover__all {
    flex-shrink: 0;
    display: block;
    margin-top: 2px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.nav-favorites-popover__all:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

.nav-favorites-popover__all:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Узкая шапка: не рвём строку — лишнее уезжает в боковое меню (см. base.html) */
@media (max-width: 719px) {
    .nav {
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        min-height: 48px;
    }

    .nav-actions {
        flex: 1 1 auto;
        min-width: 0;
    }

    .nav-header-minimal {
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 4px;
    }

    .nav-header-minimal > .nav-a11y-toggle--toolbar,
    .nav-header-minimal > a.nav-minimal-tile[href="/routes/"],
    .nav-header-minimal > .nav-popover-wrap {
        display: none !important;
    }

    .brand {
        /* На узком экране чуть правее, чтобы не заезжать под бургер */
        max-width: min(56%, calc(100% - 9.5rem));
        flex: 1 1 auto;
        min-width: 0;
        margin-left: max(0px, calc(var(--header-burger-gutter, 56px) - clamp(16px, 4vw, 48px)));
    }

    .brand__header-logo {
        max-height: 30px;
    }

    .brand__header-logo--wide {
        max-height: 34px;
        max-width: min(200px, 52vw);
        border-radius: 0;
    }

    .brand__header-logo--badge {
        max-height: 40px;
        border-radius: 0;
    }

    .nav-auth-entry {
        padding: 6px 8px;
        gap: 6px;
    }

    .nav-auth-entry__line2 {
        display: none;
    }

    .nav-auth-entry__line1 {
        font-size: 11px;
        font-weight: 800;
        max-width: 5.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 380px) {
    .nav-auth-entry__copy {
        display: none;
    }

    .nav-auth-entry {
        padding: 8px;
    }

    .brand {
        max-width: min(52%, calc(100% - 8rem));
    }
}

.nav-auth-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1100;
    min-width: min(260px, 92vw);
    padding: 6px;
    background: #fff;
    color: #111827;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
}

.nav-auth-popover .nav-auth-popover__link {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
    line-height: 1.35;
}

.nav-auth-popover .nav-auth-popover__link:hover {
    background: #f3f4f6;
    color: #111827;
    transform: none;
    box-shadow: none;
}

.nav-auth-popover .nav-auth-popover__link--btn {
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 8px 8px;
    margin-top: 4px;
    padding-top: 12px;
}

.nav-auth-popover .nav-auth-popover__link--btn:hover {
    background: #fef2f2;
    color: #991b1b;
}

.nav-auth-popover .nav-auth-popover__link:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    color: #111827;
}

.login-mode-lead {
    margin-bottom: 0.75rem;
    max-width: 42rem;
}

/* Вход / регистрация / сброс пароля: узкая колонка по центру */
.auth-form-shell {
    max-width: min(22.5rem, 100%);
    margin-inline: auto;
    width: 100%;
    box-sizing: border-box;
}

.auth-card {
    padding: clamp(14px, 3vw, 20px);
    border-radius: 12px;
}

.auth-chooser {
    padding: clamp(1.15rem, 3.5vw, 1.6rem);
}

.auth-chooser__title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #111827;
    text-align: center;
}

.auth-chooser__lead {
    margin: 0 0 1.15rem;
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: center;
}

.auth-chooser__methods {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.auth-method-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}

.auth-method-btn:hover {
    border-color: #c9a227;
    background: #fffef8;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.auth-method-btn:active {
    transform: translateY(1px);
}

.auth-method-btn:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

.auth-method-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    color: #374151;
}

.auth-method-btn__label {
    flex: 1 1 auto;
    min-width: 0;
}

.auth-chooser__hint {
    margin: 0 0 0.65rem;
    font-size: 0.82rem;
    line-height: 1.45;
    text-align: center;
}

.auth-chooser__legal {
    margin: 0 0 1rem;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
}

.auth-chooser__register {
    margin: 0;
    text-align: center;
}

.auth-chooser__register-link {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #047857;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-chooser__register-link:hover {
    color: #065f46;
}

.auth-chooser__register-link:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
    border-radius: 4px;
}

.auth-login-form__title {
    margin: 0;
    position: relative;
    z-index: 1;
    font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: center;
    color: #111827;
}

.auth-login-panel {
    position: relative;
    overflow: hidden;
}

.auth-login-panel__top {
    display: flex;
    align-items: center;
    margin: -0.15rem 0 0.35rem;
}

.auth-login-panel__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #f3f4f6;
    color: #111827;
    cursor: pointer;
    transition: background 0.15s ease;
}

.auth-login-panel__back:hover {
    background: #e5e7eb;
}

.auth-login-panel__back:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

.auth-login-panel__hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.5rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0 0.25rem;
}

.auth-login-panel__watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    opacity: 0.55;
    pointer-events: none;
}

.auth-login-panel__watermark svg {
    width: min(7.5rem, 42vw);
    height: auto;
}

.auth-login-panel[data-login-mode="email"] .auth-login-panel__watermark--username,
.auth-login-panel[data-login-mode="username"] .auth-login-panel__watermark--email {
    display: none;
}

.auth-login-panel .login-mode-lead {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.auth-login-panel__input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.85rem;
    padding: 0.65rem 0.15rem 0.55rem;
    border: 0;
    border-bottom: 1px solid #d1d5db;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: #111827;
}

.auth-login-panel__input:focus {
    outline: none;
    border-bottom-color: #047857;
    box-shadow: 0 1px 0 0 #047857;
}

.auth-login-panel__input::placeholder {
    color: #9ca3af;
}

.auth-card--spaced {
    margin-top: 12px;
}

.auth-register-lead {
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: 0.35rem;
}

.auth-email-policy-note {
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a5f;
}

.auth-card .login-mode-lead {
    max-width: none;
    font-size: 0.9rem;
    line-height: 1.45;
}

.auth-card__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 4px;
}

.auth-card__actions .btn {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.auth-card .auth-secondary-actions {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
    width: 100%;
}

.auth-card .auth-secondary-actions .auth-secondary-actions__btn {
    width: 100%;
    min-height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 12px;
    line-height: 1.25;
    white-space: normal;
    box-sizing: border-box;
}

@media (max-width: 420px) {
    .auth-card .auth-secondary-actions {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}

.auth-register-consents--optional {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #e5e7eb;
}

.auth-register-consents__legend--optional {
    font-weight: 600;
    color: #64748b;
}

.form-pdn-consent {
    margin-top: 1rem;
}

.auth-register-consents {
    margin: 12px 0 0;
    padding: 12px 0 0;
    border: none;
    border-top: 1px solid #e5e7eb;
}

.auth-register-consents__legend {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    padding: 0;
    margin-bottom: 10px;
}

.auth-register-consents-creator {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e5e7eb;
}

.auth-register-consents-creator__lead {
    margin: 0 0 8px;
    font-size: 0.875rem;
}

.auth-checkbox-consent span {
    overflow-wrap: anywhere;
}

.auth-password-details {
    margin: 2px 0 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 10px 8px;
    background: #fafbfc;
    font-size: 0.875rem;
}

.auth-password-details__summary {
    cursor: pointer;
    font-weight: 600;
    color: #374151;
    list-style: none;
}

.auth-password-details__summary::-webkit-details-marker {
    display: none;
}

.auth-password-details .password-rules {
    margin: 8px 0 0;
    font-size: 0.8125rem;
}

@media (max-width: 520px) {
    .nav-auth-popover {
        right: auto;
        left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-minimal-tile,
    .nav-auth-entry {
        transition: background-color 0.2s ease, box-shadow 0.18s ease, opacity 0.15s ease;
    }

    .nav-minimal-tile:hover,
    .nav-auth-entry:hover {
        transform: none;
    }

    .footer-survey-link {
        transition: background 0.15s ease, box-shadow 0.2s ease;
    }

    .footer-survey-link:hover {
        transform: none;
    }
}

/* Hero: full-bleed cinematic (каталог + поиск), как у крупных аудио-турагентов */
.hero-cover {
    position: relative;
    width: 100%;
    isolation: isolate;
    overflow: hidden;
    background: #1a2332;
    border-bottom: none;
    color: #fff;
}

.hero-cover--cinema {
    min-height: clamp(420px, 72vh, 640px);
    display: flex;
    align-items: center;
}

.hero-cover__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-cover__media-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 72% 28%;
    transform: scale(1.04);
    transform-origin: 70% 35%;
    animation: hero-cover-ken 18s ease-out forwards;
}

@keyframes hero-cover-ken {
    from {
        transform: scale(1.08);
    }
    to {
        transform: scale(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-cover__media-img {
        animation: none;
        transform: none;
    }
}

.hero-cover__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(105deg, rgba(12, 18, 28, 0.88) 0%, rgba(12, 18, 28, 0.62) 42%, rgba(12, 18, 28, 0.28) 68%, rgba(12, 18, 28, 0.45) 100%),
        linear-gradient(180deg, rgba(12, 18, 28, 0.35) 0%, transparent 28%, rgba(12, 18, 28, 0.55) 100%);
}

.hero-cover__shell {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: clamp(2.5rem, 8vh, 5rem);
    padding-bottom: clamp(2.25rem, 7vh, 4.5rem);
    box-sizing: border-box;
}

.hero-cover__stage {
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.hero-cover__brand {
    margin: 0 0 0.85rem;
    font-size: clamp(1.35rem, 2.8vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
    opacity: 0;
    animation: hero-cover-rise 0.7s ease 0.08s forwards;
}

.hero-cover__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.55rem, 1.1rem + 2.2vw, 2.55rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
    opacity: 0;
    animation: hero-cover-rise 0.75s ease 0.18s forwards;
}

.hero-cover__lead {
    margin: 0 0 1.35rem;
    max-width: 34rem;
    font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.12rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
    opacity: 0;
    animation: hero-cover-rise 0.75s ease 0.28s forwards;
}

.hero-cover__search {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 36rem;
    margin: 0 0 1.1rem;
    padding: 5px 5px 5px 12px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    opacity: 0;
    animation: hero-cover-rise 0.8s ease 0.38s forwards;
}

.hero-cover__search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #9ca3af;
    padding-right: 8px;
}

.hero-cover__search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 8px;
    font: inherit;
    font-size: 16px;
    border: 0;
    background: transparent;
    color: #111827;
    box-sizing: border-box;
}

.hero-cover__search-input::placeholder {
    color: #9ca3af;
}

.hero-cover__search-input:focus {
    outline: none;
}

.hero-cover__search:focus-within {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.28),
        0 0 0 3px rgba(201, 162, 39, 0.45);
}

.hero-cover__search-btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--es-btn-radius);
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    color: #fff;
    background: var(--es-gradient-brand);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.hero-cover__search-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.hero-cover__search-btn:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
}

.hero-cover__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    opacity: 0;
    animation: hero-cover-rise 0.8s ease 0.48s forwards;
}

.hero-cover__start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    padding: 11px 22px;
    border-radius: var(--es-btn-radius);
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #fff;
    background: var(--es-gradient-brand);
    border: 0;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.hero-cover__start:hover {
    color: #fff;
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: var(--es-shadow-hover);
}

.hero-cover__start:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
}

.hero-cover__start--ghost {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(6px);
}

.hero-cover__start--ghost:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    filter: none;
}

@keyframes hero-cover-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-cover__brand,
    .hero-cover__title,
    .hero-cover__lead,
    .hero-cover__search,
    .hero-cover__cta-row {
        opacity: 1;
        animation: none;
        transform: none;
    }
}

@media (max-width: 560px) {
    .hero-cover--cinema {
        min-height: 0;
        align-items: flex-end;
    }

    .hero-cover__shell {
        padding-top: clamp(3.25rem, 10vh, 4.5rem);
        padding-bottom: clamp(1.5rem, 4vh, 2.25rem);
    }

    .hero-cover__stage {
        max-width: 100%;
    }

    .hero-cover__title {
        font-size: clamp(1.35rem, 1.05rem + 3.2vw, 1.85rem);
        margin-bottom: 0.55rem;
    }

    .hero-cover__lead {
        font-size: 0.95rem;
        margin-bottom: 1rem;
        line-height: 1.45;
    }

    .hero-cover__media-img {
        object-position: 78% 22%;
    }

    .hero-cover__search {
        max-width: 100%;
        padding: 4px 4px 4px 10px;
        gap: 6px;
        border-radius: 14px;
    }

    .hero-cover__search-icon {
        display: none;
    }

    .hero-cover__search-input {
        flex: 1 1 auto;
        min-width: 0;
        padding: 10px 4px;
        font-size: 16px; /* iOS: без автозума */
    }

    .hero-cover__search-btn {
        flex: 0 0 auto;
        padding: 10px 12px;
        font-size: 0.82rem;
    }

    .hero-cover__cta-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }

    .hero-cover__start {
        width: 100%;
        max-width: none;
        justify-content: center;
        box-sizing: border-box;
        padding: 12px 18px;
    }
}

/* ——— Страница «О нас»: hero + 3 колонки + блок контактов (как izi.TRAVEL) ——— */
.about-hero {
    width: 100%;
    background-color: #0b1628;
    background-image: linear-gradient(
        165deg,
        rgba(11, 22, 40, 0.97) 0%,
        rgba(30, 64, 120, 0.72) 48%,
        rgba(15, 118, 110, 0.55) 100%
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.about-hero__shell {
    padding: clamp(2rem, 6vw, 4.25rem) 0 clamp(2.25rem, 5vw, 3.75rem);
    max-width: min(920px, 100%);
}

.about-hero__title {
    margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: clamp(2rem, 5.5vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    letter-spacing: -0.02em;
}

.about-hero__quote {
    margin: 0;
    padding: 0;
    max-width: min(38rem, 100%);
    border: none;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    font-style: italic;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.95);
}

.about-hero__quote p {
    margin: 0;
    position: relative;
    padding-left: 0.1em;
}

.about-hero__quote p::before {
    content: "«";
    font-size: 1.35em;
    line-height: 0;
    margin-right: 0.08em;
    opacity: 0.85;
}

.about-hero__quote p::after {
    content: "»";
    font-size: 1.35em;
    line-height: 0;
    margin-left: 0.06em;
    opacity: 0.85;
}

.about-hero__cta-wrap {
    margin: clamp(1.35rem, 3.5vw, 2.25rem) 0 0;
}

.about-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: min(100%, 320px);
    padding: 14px 18px;
    border-radius: 4px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    text-decoration: none;
    color: #fff;
    background: #db2777;
    box-shadow: 0 4px 14px rgba(219, 39, 119, 0.35);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.about-hero__cta:hover {
    background: #be185d;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(219, 39, 119, 0.45);
}

.about-hero__cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.about-hero__cta-chevron {
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
    opacity: 0.95;
}

/* ——— Страница «Гуляй • Изучай» (скачать APK) ——— */
.app-download-hero {
    width: 100%;
    /* Тот же тёмный фон, что у логотипа и шапки */
    background: linear-gradient(160deg, #1a2336 0%, var(--es-brand-ink) 48%, #0b1220 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.app-download-hero__shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(2rem, 6vw, 3.5rem) 0 clamp(2.25rem, 5vw, 3.25rem);
    max-width: min(640px, 100%);
}

.app-download-hero__logo {
    width: clamp(200px, 52vw, 360px);
    height: auto;
    margin-bottom: 0.85rem;
    /* Без «карточки»: белый знак на тёмном герое */
    border-radius: 0;
    box-shadow: none;
    outline: none;
}

.app-download-hero__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.app-download-hero__lead {
    margin: 0;
    max-width: 34rem;
    font-size: clamp(1rem, 2.1vw, 1.15rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.95);
}

.app-download-hero__cta-wrap {
    margin: clamp(1.35rem, 3.5vw, 2rem) 0 0.75rem;
}

.app-download-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: min(100%, 320px);
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    text-decoration: none;
    color: #0f172a;
    background: #86efac;
    border: 1px solid rgba(74, 222, 128, 0.95);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.app-download-hero__cta:hover {
    transform: translateY(-1px);
    background: #bbf7d0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
}

.app-download-hero__cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.app-download-hero__cta-chevron {
    font-size: 1.2em;
    line-height: 1;
}

.app-download-hero__note {
    margin: 0;
    max-width: 30rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.82);
}

.app-download-info__list {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    line-height: 1.55;
}

main.page > .app-download-hero + .main-container {
    padding-top: clamp(12px, 2.2vw, 28px);
}

.about-triptych {
    margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}

.about-triptych__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
}

.about-triptych__heading {
    margin: 0 0 0.85rem;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
}

.about-triptych__col p {
    margin: 0 0 0.85rem;
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
}

.about-triptych__col p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .about-triptych__grid {
        grid-template-columns: 1fr;
    }
}

/* Полноширинный фон без 100vw — иначе на мобильных появляется горизонтальный скролл из‑за полосы прокрутки */
.about-bottom {
    box-sizing: border-box;
    width: auto;
    max-width: none;
    margin: clamp(0.5rem, 2vw, 1.25rem) calc(-1 * clamp(16px, 4vw, 48px)) 0;
    padding: clamp(2rem, 4vw, 3rem) clamp(16px, 4vw, 48px);
    background: #eff1f4;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.about-bottom__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: start;
}

.about-bottom__h {
    margin: 0 0 1rem;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: clamp(1.35rem, 2.5vw, 1.6rem);
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.about-bottom__subh {
    margin: 1.15rem 0 0.5rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}

.about-bottom__subh:first-of-type {
    margin-top: 0;
}

.about-bottom__text {
    margin: 0 0 0.65rem;
    font-size: 15px;
    line-height: 1.55;
    color: #4b5563;
}

.about-bottom__list {
    margin: 0.35rem 0 0;
    padding-left: 1.2rem;
    font-size: 15px;
    line-height: 1.55;
    color: #4b5563;
}

.about-bottom__list li {
    margin-bottom: 0.45rem;
}

@media (max-width: 720px) {
    .about-bottom__grid {
        grid-template-columns: 1fr;
    }
}

main.page > .about-hero + .main-container {
    padding-top: clamp(12px, 2.2vw, 28px);
}

.page {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-bottom: clamp(20px, 3vw, 40px);
}

/* Контент под hero: отступ сверху; на страницах без hero — полный отступ */
main.page > .main-container:first-child {
    padding-top: clamp(20px, 3vw, 40px);
}

main.page > .hero-cover + .main-container {
    padding-top: clamp(12px, 2.2vw, 28px);
}

.card {
    background: var(--es-surface);
    border-radius: var(--es-radius);
    padding: clamp(18px, 2.5vw, 24px);
    margin-bottom: 16px;
    border: 1px solid var(--es-border);
    box-shadow: var(--es-shadow);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--es-gradient-brand);
    opacity: 0.85;
}

.card--warm::before {
    background: linear-gradient(90deg, #f97316, #fb923c, #fbbf24);
}

.card--map::before {
    background: linear-gradient(90deg, #0ea5e9, #38bdf8, #2563eb);
}

.card--audio::before {
    background: linear-gradient(90deg, #8b5cf6, #a78bfa, #c084fc);
}

.card h1, .card h2, .card h3 {
    margin-top: 0;
}

.card h1 {
    font-size: 28px;
    line-height: 1.2;
}

.card h2 {
    font-size: 22px;
}

.card h3 {
    font-size: 18px;
}

.legal-hub {
    display: grid;
    gap: 1.25rem;
    margin: 0 auto clamp(20px, 3vw, 40px);
    max-width: 72rem;
    align-items: start;
}

@media (min-width: 880px) {
    .legal-hub {
        grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
        gap: 1.75rem;
    }
}

.legal-docs-nav {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 14px;
    padding: 1rem 0.85rem;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}

@media (min-width: 880px) {
    .legal-docs-nav {
        position: sticky;
        top: 5.5rem;
    }
}

.legal-docs-nav__title {
    margin: 0 0 0.65rem;
    padding: 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.legal-docs-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

@media (max-width: 879px) {
    .legal-docs-nav__list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
}

.legal-docs-nav__link {
    display: block;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    color: #334155;
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.35;
    font-weight: 550;
}

.legal-docs-nav__link:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.legal-docs-nav__link.is-active {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
}

.legal-hub__main {
    min-width: 0;
}

.legal-doc {
    max-width: 52rem;
    margin: 0 auto clamp(20px, 3vw, 40px);
    background: #fff;
    border-radius: 14px;
    padding: clamp(20px, 3vw, 36px);
    border: 1px solid #e8eaed;
    box-shadow: 0 2px 16px rgba(15, 23, 42, 0.06);
}

.legal-hub .legal-doc {
    max-width: none;
    margin: 0;
}

.legal-doc__header {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #eef0f3;
}

.legal-doc__title {
    margin: 0 0 0.5em;
    font-size: clamp(1.5rem, 2.5vw, 1.85rem);
    line-height: 1.25;
    font-weight: 700;
    color: #0f172a;
}

.legal-doc__meta {
    margin: 0 0 0.35em;
    font-size: 0.95rem;
}

.legal-doc__canonical {
    word-break: break-all;
}

.legal-doc__date {
    margin: 0;
    font-size: 0.95rem;
}

.legal-doc__lead {
    margin: 0 0 1.5rem;
    line-height: 1.65;
    color: #334155;
}

.legal-doc__sections {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: legal-section;
}

.legal-doc__section {
    margin: 0 0 1.75rem;
    padding: 0 0 1.75rem;
    border-bottom: 1px solid #f1f3f5;
}

.legal-doc__section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.legal-doc__section-title {
    margin: 0 0 0.75em;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
}

.legal-doc__subsection-title {
    margin: 1.25em 0 0.65em;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1e293b;
}

.legal-doc p,
.legal-doc li {
    line-height: 1.65;
    color: #334155;
}

.legal-doc p {
    margin: 0 0 0.85em;
}

.legal-doc p:last-child {
    margin-bottom: 0;
}

.legal-doc ul {
    margin: 0.35em 0 0.85em;
    padding-left: 1.35em;
}

.legal-doc ul li + li {
    margin-top: 0.35em;
}

.legal-doc__table {
    width: 100%;
    margin: 1em 0;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.legal-doc__table th,
.legal-doc__table td {
    padding: 0.55rem 0.65rem;
    border: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: top;
}

.legal-doc__table th {
    background: #f8fafc;
    font-weight: 600;
    color: #334155;
}

.legal-doc__facts {
    margin: 1em 0 0;
    padding: 1rem 1.15rem;
    background: #f8fafc;
    border: 1px solid #e8edf2;
    border-radius: 10px;
    display: grid;
    gap: 0.65rem;
}

.legal-doc__fact {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) 1fr;
    gap: 0.5rem 1rem;
    align-items: baseline;
}

.legal-doc__fact dt {
    margin: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: #475569;
}

.legal-doc__fact dd {
    margin: 0;
    font-size: 0.95rem;
    color: #1e293b;
}

.legal-doc__footer {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eef0f3;
}

@media (max-width: 540px) {
    .legal-doc__fact {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

.auth-register-consent-intro {
    margin-bottom: 0.75em;
}

.grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.route-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.route-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Карточки выбора маршрута (главная / список) — цвета в духе EchoStep (синий CTA, нейтральные иконки) */
.route-picker-grid {
    display: grid;
    gap: clamp(16px, 2vw, 22px);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.route-picker-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px 0;
}

.route-picker-empty--card {
    padding: clamp(28px, 5vw, 40px) 20px;
    text-align: center;
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: 14px;
}

.route-picker-empty__title {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}

.route-picker-empty__hint {
    margin: 0;
    max-width: 28rem;
    margin-inline: auto;
}

.route-picker-skeleton {
    border-radius: 8px;
    background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 45%, #e5e7eb 90%);
    background-size: 200% 100%;
    animation: route-picker-shimmer 1.2s ease-in-out infinite;
}

.route-picker-skeleton--media {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.route-picker-skeleton--title {
    height: 22px;
    width: 78%;
    margin-bottom: 14px;
}

.route-picker-skeleton--line {
    height: 14px;
    width: 92%;
    margin-bottom: 10px;
}

.route-picker-skeleton--short {
    width: 64%;
}

.route-picker-skeleton--btn {
    height: 40px;
    width: 100%;
    margin-top: 8px;
    border-radius: 8px;
}

@keyframes route-picker-shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .route-picker-skeleton {
        animation: none;
        background: #e5e7eb;
    }

    .route-picker-card,
    .route-picker-card__fav,
    .home-routes-filters__summary,
    .btn {
        transition: none;
    }

    .route-picker-card:hover,
    .route-picker-card:active {
        transform: none;
    }
}

.route-picker-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.07);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
    cursor: pointer;
}

.route-picker-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    border-color: #bfdbfe;
}

.route-picker-card:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
}

.route-picker-card:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

.route-picker-card--skeleton {
    cursor: default;
    pointer-events: none;
}

.route-picker-card--skeleton:hover,
.route-picker-card--skeleton:active {
    transform: none;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.07);
    border-color: #e5e7eb;
}

.route-picker-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #1e293b;
    overflow: hidden;
}

.route-picker-card__img-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(145deg, #1e3a8a 0%, #2563eb 48%, #3b82f6 100%);
    opacity: 0.95;
}

.route-picker-card__img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.route-gallery {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid #ececec;
    background: #1e293b;
    touch-action: pan-y;
    user-select: none;
}

.route-gallery--large {
    height: 240px;
}

.route-gallery--picker {
    position: absolute;
    inset: 0;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    z-index: 1;
}

.route-gallery__track {
    position: absolute;
    inset: 0;
}

.route-gallery__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.route-gallery__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.route-gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.route-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.45);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
}

.route-gallery__nav:hover {
    background: rgba(15, 23, 42, 0.7);
}

.route-gallery__nav--prev {
    left: 8px;
}

.route-gallery__nav--next {
    right: 8px;
}

.route-gallery__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 6px;
    pointer-events: auto;
}

.route-gallery__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
}

.route-gallery__dot.is-active {
    background: #fff;
}

.route-gallery-editor {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.route-gallery-editor__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.route-gallery-editor__item {
    position: relative;
    width: 104px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #f8fafc;
}

.route-gallery-editor__item.is-cover {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

.route-gallery-editor__item img {
    width: 100%;
    height: 78px;
    object-fit: cover;
    display: block;
}

.route-gallery-editor__badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.92);
    color: #fff;
}

.route-gallery-editor__actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
}

.route-gallery-editor__actions button {
    font-size: 0.7rem;
    padding: 4px 6px;
}

.route-gallery-editor__previews {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.route-gallery-editor__previews img {
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.route-picker-card__fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(17, 24, 39, 0.45);
    backdrop-filter: blur(6px);
    transition:
        background 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.route-picker-card__price {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    background: rgba(37, 99, 235, 0.92);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.route-picker-card__type {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    max-width: calc(100% - 64px);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    background: rgba(15, 118, 110, 0.92);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.route-price-badge {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}

.route-picker-card__fav:hover {
    background: rgba(17, 24, 39, 0.62);
    transform: scale(1.06);
}

.route-picker-card__fav:active {
    transform: scale(0.96);
}

.route-picker-card__fav.is-active {
    background: rgba(220, 38, 38, 0.92);
    color: #fff;
}

.route-picker-card__fav.is-active .route-picker-card__fav-svg {
    fill: currentColor;
    stroke: #fff;
}

.route-picker-card__fav-svg {
    display: block;
}

.route-picker-card__body {
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.route-picker-card__duration {
    margin: 0 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #6b7280;
}

.route-picker-card__duration .route-picker-card__ico {
    flex: 0 0 auto;
    color: #9ca3af;
}

.route-picker-card__title {
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.3;
    color: #111827;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.route-picker-card__teaser {
    margin: 0 0 14px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #4b5563;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.route-picker-card__footer {
    margin-top: auto;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.route-picker-card__price-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.route-picker-card__price-value {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.15;
    color: #111827;
    letter-spacing: -0.02em;
}

.route-picker-card__price-unit {
    font-size: 0.78rem;
    color: #9ca3af;
}

.route-picker-card__rating {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

.route-picker-card__rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    background: #0f766e;
}

.route-picker-card__rating-star {
    font-size: 0.78rem;
    line-height: 1;
}

.route-picker-card__rating-count {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
}

.route-picker-skeleton--teaser {
    height: 40px;
    width: 100%;
    margin-bottom: 12px;
}

.route-description-lead {
    font-size: 1.05rem;
    line-height: 1.55;
    color: #374151;
    max-width: 42rem;
}

.route-place-story {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-left: 4px solid #2563eb;
    background: #f0f7ff;
    border-radius: 0 10px 10px 0;
}

.route-place-story__label {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1d4ed8;
}

.route-place-story__text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #111827;
    white-space: pre-wrap;
}

.point-item .point-coords {
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

.route-picker-card__title {
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.3;
    color: #111827;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.route-picker-card__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-bottom: 14px;
    flex: 1;
    align-content: start;
}

.route-picker-card__meta-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.35;
    color: #4b5563;
    min-width: 0;
}

.route-picker-card__meta-item span {
    min-width: 0;
    word-break: break-word;
}

.route-picker-card__ico {
    flex-shrink: 0;
    color: #6b7280;
    margin-top: 1px;
}

.route-picker-card__distance {
    margin: -4px 0 10px;
    font-size: 13px;
}

.route-picker-card__cta {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin-top: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 600;
}

@media (max-width: 520px) {
    .route-picker-card__meta {
        grid-template-columns: 1fr;
    }
}

/* Главная: хлебные крошки, поиск, фильтры (без карты) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.breadcrumb {
    margin: 0 0 8px;
    padding: 0;
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: #6b7280;
}

.breadcrumb__item:not(:last-child)::after {
    content: "/";
    margin-left: 6px;
    color: #9ca3af;
    pointer-events: none;
}

.breadcrumb__item a {
    color: #2563eb;
    text-decoration: none;
}

.breadcrumb__item a:hover {
    text-decoration: underline;
}

.breadcrumb__item--current {
    color: #374151;
    font-weight: 500;
}

.home-features {
    margin: 0 0 1.5rem;
}

.home-features__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 720px) {
    .home-features__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

.home-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.15rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.home-feature-card__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.35rem;
    height: 3.35rem;
    border-radius: var(--es-btn-radius);
    color: var(--es-brand);
    background: linear-gradient(160deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.home-feature-card__icon svg {
    display: block;
    width: 1.7rem;
    height: 1.7rem;
}

/* —— Доступные города (витрина на главной) —— */
.home-cities {
    margin: 0 0 2rem;
}

.home-cities__title {
    margin: 0 0 1rem;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111827;
}

.home-cities__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

@media (min-width: 560px) {
    .home-cities__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (min-width: 960px) {
    .home-cities__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.1rem;
    }
}

.home-city-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    aspect-ratio: 16 / 10;
    min-height: 168px;
    color: #fff;
    isolation: isolate;
    background: #1f2937;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-city-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .home-city-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
    }

    .home-city-card:hover .home-city-card__img {
        transform: scale(1.04);
    }
}

.home-city-card__link:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}

.home-city-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    transition: transform 0.45s ease;
}

.home-city-card__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.05) 0%,
        rgba(15, 23, 42, 0.18) 36%,
        rgba(15, 23, 42, 0.72) 78%,
        rgba(15, 23, 42, 0.88) 100%
    );
    pointer-events: none;
}

.home-city-card__copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.55rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 1rem 1.05rem 0.35rem;
}

.home-city-card__name {
    font-size: clamp(1.2rem, 2.6vw, 1.55rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.home-city-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: #2563eb;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.home-city-card__badge--soon {
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
}

.home-city-card__credit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 0.35rem 0.85rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.home-city-card__credit-link {
    color: inherit;
    text-decoration: none;
    pointer-events: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.home-city-card__credit-link:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.7);
}

.home-city-card__credit-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 2px;
}


.home-feature-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.home-feature-card__title {
    margin: 0 0 0.35rem;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    color: #111827;
}

.home-feature-card__text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #6b7280;
}

#routes-list {
    scroll-margin-top: 12px;
}

.home-routes-hub {
    margin-top: 4px;
}

.home-routes-hero {
    margin-bottom: 20px;
    padding: clamp(18px, 3vw, 28px);
    border-radius: 16px;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 48%, #eef2ff 100%);
    border: 1px solid #dbeafe;
    box-shadow: 0 4px 24px rgba(37, 99, 235, 0.06);
}

.home-routes-hero__eyebrow {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2563eb;
}

.home-routes-hero__lead {
    margin: 10px 0 0;
    max-width: 42rem;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.55;
    color: #4b5563;
}

.home-routes-hub__title {
    margin: 0 0 14px;
    font-size: clamp(1.65rem, 1.4rem + 1vw, 2.15rem);
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.02em;
}

.home-routes-chip-group {
    margin-top: 2px;
}

.home-routes-chip-group--price {
    margin-top: 10px;
}

.home-routes-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.home-routes-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    color: #374151;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.home-routes-chip:hover {
    background: #e5e7eb;
}

.home-routes-chip.is-active {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}

.home-routes-chip.is-active:hover {
    background: #111827;
}

.home-routes-chip-empty {
    margin: 0;
    font-size: 0.92rem;
}

.home-routes-hub__error-wrap {
    margin-bottom: 12px;
}

.home-routes-status {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    min-height: 1.25em;
}

.home-routes-searchbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    margin-bottom: 14px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

.home-routes-searchbar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #9ca3af;
    padding-left: 2px;
}

.home-routes-searchbar__input {
    flex: 1 1 200px;
    min-width: 0;
    padding: 12px 10px 12px 0;
    font: inherit;
    font-size: 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #111827;
    box-sizing: border-box;
}

.home-routes-searchbar__input::placeholder {
    color: #9ca3af;
}

.home-routes-searchbar:focus-within {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.home-routes-searchbar__input:focus {
    outline: none;
}

.home-routes-searchbar__btn {
    flex: 0 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 600;
}

.home-routes-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.04);
}

.home-routes-filters {
    flex: 0 0 auto;
}

.home-routes-filters__summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #111827;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #e5e7eb;
    font-family: inherit;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease,
        box-shadow 0.16s ease;
}

.home-routes-filters__summary:hover {
    background: #e5e7eb;
}

.home-routes-filters__summary:active {
    transform: translateY(1px);
}

.home-routes-filters[open] .home-routes-filters__summary {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.home-routes-filters__summary::-webkit-details-marker {
    display: none;
}

.home-routes-filters__icon {
    display: flex;
    color: inherit;
}

.home-routes-filters__body {
    margin-top: 12px;
    padding: 14px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    min-width: min(100%, 420px);
}

.home-routes-filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
}

.home-routes-filters__label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    min-width: 160px;
}

.home-routes-filters__select {
    font: inherit;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
}

.home-routes-filters__hint {
    margin: 12px 0 0;
    font-size: 13px;
}

.home-routes-sort {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: auto;
}

.home-routes-sort__label {
    font-size: 13px;
    font-weight: 600;
}

.home-routes-sort__select {
    font: inherit;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    min-width: 220px;
}

.home-routes-toolbar__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

@media (max-width: 520px) {
    .home-routes-searchbar__btn {
        flex: 1 1 100%;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 720px) {
    .home-routes-sort {
        margin-left: 0;
        width: 100%;
    }

    .home-routes-sort__select {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .home-routes-toolbar {
        padding: 12px;
        gap: 10px;
    }

    .home-routes-filters {
        width: 100%;
    }

    .home-routes-filters__summary {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    .home-routes-filters__body {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 12px;
    }

    .home-routes-filters__label {
        min-width: 0;
        width: 100%;
    }

    .home-routes-filters__select {
        width: 100%;
        box-sizing: border-box;
    }

    .home-routes-toolbar__links {
        width: 100%;
    }

    .home-routes-toolbar__links .btn {
        flex: 1 1 auto;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .home-routes-hub__title {
        font-size: clamp(1.35rem, 1.15rem + 1.5vw, 1.75rem);
        margin-bottom: 12px;
    }

    .home-routes-hero {
        padding: 14px;
        border-radius: 12px;
        margin-bottom: 14px;
    }

    .home-routes-chip {
        padding: 8px 12px;
        font-size: 0.88rem;
    }

    .home-feature-card {
        padding: 0.9rem 0.95rem;
        gap: 0.7rem;
    }

    .home-feature-card__icon {
        width: 3rem;
        height: 3rem;
    }

    .home-feature-card__icon svg {
        width: 1.55rem;
        height: 1.55rem;
    }

    .route-picker-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .route-picker-card__footer {
        flex-wrap: wrap;
        gap: 8px;
    }
}

.route-cover {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid #ececec;
}

.route-cover-large {
    height: 240px;
}

.route-cover--placeholder {
    display: block;
    background: linear-gradient(145deg, #1e3a8a 0%, #2563eb 48%, #3b82f6 100%);
}

.route-card[data-route-id] {
    cursor: pointer;
}

.route-card[data-route-id]:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

.meta-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 12px;
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.badge-draft {
    background: #fef3c7;
    color: #92400e;
}

.badge-published {
    background: #dcfce7;
    color: #166534;
}

.badge-pending {
    background: #e0e7ff;
    color: #3730a3;
}

.badge-era-modern {
    background: #e0f2fe;
    color: #0369a1;
}

.badge-era-archival {
    background: #f3e8ff;
    color: #6b21a8;
}

.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: center;
    margin-top: 8px;
}

.filters-row label {
    font-weight: 600;
}

.filters-row select {
    margin-left: 6px;
    font: inherit;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
}

.home-routes-extra {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin-left: auto;
}

@media (max-width: 680px) {
    .home-routes-extra {
        margin-left: 0;
        width: 100%;
        margin-top: 4px;
    }
}

.filters-region-label {
    margin: 0 0 10px;
    font-size: 15px;
}

.filters-hint {
    margin: 12px 0 0;
    font-size: 13px;
    max-width: 40rem;
}

.faq-intro {
    margin-bottom: 1.15rem;
}

.faq-group {
    margin-top: 1.2rem;
}

.faq-group h2 {
    margin-bottom: 0.75rem;
}

.faq-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
    margin-bottom: 10px;
    overflow: hidden;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-item[open] {
    background: #fff;
    border-color: #bfdbfe;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08);
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    font-size: 1.02rem;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::before {
    content: "";
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid #2563eb;
    border-bottom: 2px solid #2563eb;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
    margin-top: -0.15rem;
}

.faq-item[open] > .faq-question::before {
    transform: rotate(45deg);
    margin-top: 0.15rem;
}

.faq-question:hover {
    color: #1d4ed8;
}

.faq-question:focus {
    outline: none;
}

.faq-question:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
    border-radius: 8px;
}

.faq-answer {
    padding: 0 14px 14px 2.1rem;
    line-height: 1.55;
    color: #374151;
}

.faq-answer p {
    margin: 0;
}

@media (max-width: 600px) {
    .faq-page.card {
        padding: clamp(14px, 4vw, 18px);
    }

    .faq-question {
        padding: 12px;
        font-size: 1rem;
    }

    .faq-answer {
        padding: 0 12px 12px 12px;
    }
}

/* —— Поддержка / ЧАВО (спокойный тёплый баннер, как у WeGoTrip) —— */
main.page > .support-hero + .main-container {
    max-width: 820px;
    padding-top: 2.25rem;
}

.support-hero {
    color: #fff;
    background-color: #0b1628;
    background-image: linear-gradient(
        165deg,
        rgba(11, 22, 40, 0.97) 0%,
        rgba(30, 64, 120, 0.72) 48%,
        rgba(15, 118, 110, 0.55) 100%
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: clamp(2.75rem, 6vw, 4.25rem) 0;
}

.support-hero__shell {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

.support-hero__title {
    margin: 0 0 0.85rem;
    font-size: clamp(1.7rem, 4.2vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.support-hero__lead {
    margin: 0 auto;
    max-width: 36rem;
    font-size: 1rem;
    line-height: 1.55;
    opacity: 0.95;
}

.support-hero__lead a {
    color: #fff;
    font-weight: 600;
    text-underline-offset: 3px;
}

.support-hero__lead a:hover {
    opacity: 0.88;
}

.support-faq {
    padding: 0 0 1.5rem;
}

.support-faq__group {
    margin: 0 0 2rem;
}

.support-faq__heading {
    margin: 0 0 0.25rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #374151;
}

.support-faq__list {
    border-top: 1px solid #e5e7eb;
}

.support-faq__item {
    border-bottom: 1px solid #e5e7eb;
}

.support-faq__question {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 0;
    padding: 1.05rem 0.1rem;
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.45;
    color: #1f2937;
}

.support-faq__question::-webkit-details-marker {
    display: none;
}

.support-faq__question::after {
    content: "+";
    flex: 0 0 auto;
    margin-top: 0.05rem;
    color: #6b7280;
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
}

.support-faq__item[open] > .support-faq__question::after {
    content: "−";
}

.support-faq__question:hover {
    color: #111827;
}

.support-faq__question:focus {
    outline: none;
}

.support-faq__question:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
    border-radius: 4px;
}

.support-faq__answer {
    padding: 0 2.25rem 1.1rem 0;
    color: #4b5563;
}

.support-faq__answer p {
    margin: 0;
    line-height: 1.6;
}

.support-faq__answer a {
    color: #2563eb;
    font-weight: 500;
}

.support-faq__more {
    margin: 0.25rem 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .support-faq__question {
        font-size: 0.95rem;
        padding: 0.95rem 0;
        gap: 0.85rem;
    }

    .support-faq__answer {
        padding-right: 0.35rem;
    }
}

.era-field-hint {
    margin-top: 4px;
    margin-bottom: 0;
    max-width: 42rem;
}

.point-item {
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    background: #fcfcfd;
}

.route-map {
    width: 100%;
    height: 360px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ececec;
}

.route-map-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 8px;
}

.route-map-section__head h2 {
    margin: 0;
}

.route-map-hint {
    margin: 0 0 12px;
    font-size: 0.95rem;
}

.route-map-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.route-map-tabs__btn {
    border: none;
    background: transparent;
    color: #475569;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.route-map-tabs__btn:hover {
    color: #1e293b;
}

.route-map-tabs__btn.is-active {
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.15);
}

.route-map-panel[hidden] {
    display: none !important;
}

.route-map-3d {
    position: relative;
    background: linear-gradient(180deg, #dbeafe 0%, #f0f4f8 100%);
}

.route-map-3d canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.route-map-3d-hint,
.route-map-3d-empty {
    margin: 10px 0 0;
    font-size: 0.9rem;
}

.route-map--explore {
    height: min(58vh, 560px);
    min-height: 320px;
}

.routes-explore-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.routes-hub-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 4px;
}

.routes-hub-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 8px 12px;
    border: none;
    border-radius: 12px;
    background: #1e293b;
    color: #f8fafc;
    cursor: pointer;
    font-family: inherit;
    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.routes-hub-tab:hover {
    background: #334155;
}

.routes-hub-tab:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

.routes-hub-tab.is-active {
    background: #2563eb;
    box-shadow: inset 0 0 0 2px rgba(147, 197, 253, 0.55);
}

.routes-hub-tab__icon {
    display: block;
    flex-shrink: 0;
}

.routes-hub-tab__label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.routes-map-panel {
    margin: 0;
}

.routes-explore-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
}

.routes-explore-toolbar__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

.routes-explore-toolbar__select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.routes-explore-toolbar__hint {
    margin: 10px 0 0;
    font-size: 13px;
}

.routes-explore-status {
    margin: 0;
    font-size: 14px;
}

.route-map-tools__buttons .btn.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1e40af;
}

.route-waypoints-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.route-waypoints-list__item.is-audio .route-waypoints-list__btn {
    border-color: #2563eb;
    background: #eff6ff;
    font-weight: 600;
}

.route-waypoints-list__btn {
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
}

.route-waypoints-list__btn:hover {
    border-color: #2563eb;
}

.audio-variants {
    margin-bottom: 14px;
}

.audio-variants__lead {
    margin: 0 0 10px;
    font-size: 14px;
    color: #4b5563;
}

.audio-variants__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.audio-variants__btn {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.35;
}

.audio-variants__btn:hover {
    border-color: #2563eb;
}

.audio-variants__btn.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    font-weight: 600;
}

.route-main-audio {
    width: 100%;
    margin-top: 4px;
}

.route-map-mode {
    border: none;
    margin: 0 0 1rem;
    padding: 0;
}

.route-map-mode .field-label {
    margin-bottom: 0.5rem;
}

.radio-inline {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    cursor: pointer;
}

.radio-inline input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.route-map-tools {
    margin-bottom: 1rem;
}

.route-map-tools__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.route-map-tools__buttons .btn.is-active {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.875rem;
}

.btn-linklike {
    background: transparent;
    border: none;
    color: #2563eb;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.35rem 0.5rem;
}

.btn-linklike:hover {
    color: #1d4ed8;
}

.route-owner-edit {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.creator-policies-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.creator-policies-modal[hidden] {
    display: none !important;
}

.creator-policies-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.creator-policies-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 32rem);
    max-height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    margin-bottom: 0;
}

.creator-policies-modal__panel > p.muted {
    line-height: 1.5;
}

.creator-policies-modal__panel .actions {
    margin-top: 1.25rem;
    justify-content: flex-start;
}

.creator-policies-check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0.85rem 0;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.45;
    cursor: pointer;
}

.creator-policies-check span {
    flex: 1;
    min-width: 0;
}

.creator-policies-check input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.15rem 0 0;
    padding: 0;
    flex: 0 0 auto;
    border-radius: 4px;
    accent-color: #2563eb;
}

.publication-consent {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.publication-consent__lead {
    margin: 0 0 0.65rem;
    font-size: 14px;
}

.publication-consent__check {
    margin: 0;
}

.routes-map-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 10px;
}

.routes-map-actions .btn {
    white-space: nowrap;
}

#routes-nearest-status {
    margin: 0;
}

.routes-nearest-list {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.routes-nearest-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fafafa;
}

.routes-nearest-item p {
    margin: 0;
}

.routes-nearest-item .muted {
    font-size: 13px;
}

.route-edit-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.route-edit-checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0.2rem 0 0;
    padding: 0;
    flex-shrink: 0;
}

.point-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.point-order {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.muted {
    color: #6b7280;
    font-size: 14px;
}

.msg-error {
    color: #991b1b;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fca5a5;
    border-radius: var(--es-radius-sm);
    padding: 12px 14px;
    margin-top: 12px;
    font-weight: 500;
}

.msg-error::before {
    content: "УПС! ";
    font-weight: 800;
}

.msg-success {
    color: #065f46;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 2px solid #6ee7b7;
    border-radius: var(--es-radius-sm);
    padding: 12px 14px;
    margin-top: 12px;
    font-weight: 500;
}

.msg-success::before {
    content: "OK ";
    font-weight: 800;
}

.btn {
    display: inline-block;
    background: var(--es-gradient-brand);
    color: #fff;
    border: 0;
    border-radius: var(--es-btn-radius);
    padding: 11px 18px;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.25;
    transition:
        background-color 0.16s ease,
        transform 0.16s ease,
        box-shadow 0.16s ease,
        filter 0.16s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}

.btn:hover {
    filter: brightness(1.06);
    box-shadow: var(--es-shadow-hover);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.btn-secondary {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

.btn-secondary:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 18px rgba(51, 65, 85, 0.28);
}

/* Позитивные действия — тот же синий бренд, без отдельного «зелёного» акцента */
.btn-success {
    background: var(--es-gradient-brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}

.btn-success:hover {
    filter: brightness(1.06);
    box-shadow: var(--es-shadow-hover);
}

.btn-danger {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    color: #fff;
}

.btn-danger:hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
}

.btn-sky {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    box-shadow: none;
}

.btn-sky:hover {
    background: #dbeafe;
    color: #1e3a8a;
    filter: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.16);
}

.route-actions-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 18px 0 8px;
    align-items: center;
}

.route-actions-toolbar .btn,
.route-actions-toolbar a.btn {
    margin: 0;
}

.route-setup-hint {
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #bae6fd;
    background: #f0f9ff;
}

.route-setup-hint p {
    margin: 0 0 10px;
}

.route-workflow-step {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    font-size: 14px;
    color: #1e3a5f;
}

.checkbox-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0;
    font-size: 15px;
    line-height: 1.4;
}

.checkbox-consent span,
.checkbox-consent__body {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.auth-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 12px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid #e5e7eb;
}

.auth-legal-links--register {
    margin-top: 8px;
    padding-top: 8px;
    border-top: none;
}

.auth-legal-link {
    color: #2563eb;
    font-weight: 600;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    pointer-events: auto;
}

.auth-legal-link:hover {
    color: #1d4ed8;
}

.checkbox-consent__body .auth-legal-link {
    position: relative;
    z-index: 2;
}

.checkbox-consent input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    margin: 4px 0 0;
    padding: 0;
    flex-shrink: 0;
}

.password-rules {
    font-size: 14px;
    margin: 0 0 8px;
}

.login-hint {
    font-size: 14px;
    margin-top: 12px;
}

.auth-secondary-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px 14px;
    margin-top: 14px;
    align-items: center;
    justify-content: space-between;
}

.btn-linklike {
    text-decoration: none;
}

/* Скрытие панелей входа/регистрации: надёжнее, чем только HTML hidden на .card */
.auth-panel--hidden {
    display: none !important;
}

.field-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 4px;
    color: #374151;
}

.upload-zone {
    margin-top: 20px;
    padding: clamp(16px, 2.5vw, 22px);
    border: 2px dashed #93c5fd;
    border-radius: var(--es-radius);
    background: linear-gradient(135deg, #f0f9ff 0%, #eff6ff 100%);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.upload-zone:hover,
.upload-zone:focus-within {
    border-color: var(--es-brand-light);
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.upload-zone-title {
    display: block;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 6px;
    color: #111827;
}

.upload-zone-hint {
    margin: 0 0 10px;
    font-size: 14px;
}

.upload-zone-input {
    margin-top: 0;
}

.upload-preview-wrap {
    margin-top: 12px;
}

.upload-preview-img {
    max-width: 100%;
    max-height: 220px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    object-fit: cover;
}

.upload-file-name {
    margin: 8px 0 0;
    font-size: 14px;
}

.route-point-actions {
    margin-top: 8px;
}

.route-point-next-hint {
    margin: 10px 0 0;
    font-size: 14px;
    max-width: 42rem;
}

.route-intro-audio {
    margin: 16px 0;
}

.route-intro-audio audio {
    display: block;
    width: 100%;
    max-width: 480px;
    margin-top: 6px;
}

.route-intro-audio__error {
    margin: 6px 0 0;
    font-size: 14px;
    color: #b45309;
}

.create-followup {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    width: 100%;
    margin: 6px 0 10px;
    padding: 11px 13px;
    border: 2px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    font: inherit;
    background: #fff;
    color: var(--es-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--es-brand-light);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1.8vw, 18px);
    align-items: center;
}

.footer {
    flex-shrink: 0;
    background: #111827;
    color: #fff;
    padding: 16px 0 clamp(18px, 3.5vh, 40px);
    margin-top: 24px;
}

.footer-sitemap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.35rem 1.5rem;
    padding: 0.35rem 0 1.35rem;
}

@media (min-width: 640px) {
    .footer-sitemap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .footer-sitemap {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem 2.5rem;
        padding-bottom: 1.6rem;
    }
}

.footer-sitemap__title {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #f9fafb;
}

.footer-sitemap__title--nested {
    margin-top: 1.25rem;
}

.footer-sitemap__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.footer-sitemap__list a {
    color: rgba(229, 231, 235, 0.82);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.4;
}

.footer-sitemap__list a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Текст гранта сверху (3–4 строки), ниже — логотипы и опрос в одной линии */
.footer-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 2vw, 20px);
}

.footer-feedback {
    margin-left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex: 0 0 auto;
}

.footer-app-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    background: #86efac;
    border: 1px solid rgba(74, 222, 128, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.15s ease;
}

.footer-app-download:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
    background: #bbf7d0;
}

.footer-app-download:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.footer-app-download__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--es-brand-ink);
}

.footer-app-download__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-survey-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    color: #111827;
    background: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.22s cubic-bezier(0.34, 1.35, 0.64, 1), background 0.15s ease, box-shadow 0.2s ease;
}

.footer-survey-link:hover {
    background: #fcd34d;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
}

.footer-survey-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.footer-feedback-note {
    margin: 6px 0 0;
    max-width: min(20rem, 100%);
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
}

.footer-grant-text {
    margin: 0;
    width: 100%;
    max-width: 100%;
    font-size: clamp(12px, 0.72rem + 0.35vw, 14px);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.01em;
    text-wrap: pretty;
}

.footer-copy {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.52);
    letter-spacing: 0.02em;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.5;
}

.form-pdn-notice {
    margin-top: 1rem;
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 36rem;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-legal a:hover {
    color: #fff;
}

.cookie-consent {
    position: fixed;
    z-index: 10050;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(15, 23, 42, 0.96);
    color: #f8fafc;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cookie-consent__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.cookie-consent__title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
}

.cookie-consent__desc {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    max-width: 52rem;
}

.cookie-consent__desc a {
    color: #93c5fd;
}

.cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0;
}

html.echostep-a11y .cookie-consent {
    border-top-width: 2px;
}

html.echostep-a11y .cookie-consent__desc a {
    text-decoration: underline;
}

.footer-partner-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(8px, 1.6vw, 16px);
    flex: 1 1 auto;
    min-width: 0;
}

.footer-partner-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.96);
    padding: 5px 8px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Не перекрашиваем в белый: тёмная плашка под белый SVG и блок с фиолетовым PNG «Технологии» */
.footer-partner-link:hover:not(.footer-partner-link--dark):not(.footer-partner-link--fp-tech) {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* Резерв: белый логотип на тёмном фоне (SVG), если снова понадобится */
.footer-partner-link--dark {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.footer-partner-link--dark:hover {
    background: #1e293b;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Фиолетовый растр «Технологии» — без белой карточки, чтобы не «съедать» фирменный фон */
.footer-partner-link--fp-tech {
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
    line-height: 0;
}

.footer-partner-link--fp-tech:hover {
    background: transparent;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.footer-tech-logo {
    display: block;
    height: clamp(40px, 8.5vw, 54px);
    width: auto;
    max-width: min(260px, 46vw);
    object-fit: contain;
    object-position: left center;
}

/* Одинаковая область для Фонда и ПУТП: contain — надписи не обрезаются */
.footer-partner-logo-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(100px, 19vw, 188px);
    height: clamp(32px, 6.5vw, 54px);
    overflow: hidden;
    border-radius: 3px;
    background: #fff;
}

.footer-partner-logo-frame .footer-fasie-logo,
.footer-partner-logo-frame .footer-putp-logo {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center center;
}

/* ПУТП: тонкая серая полоска сверху в растре — белая планка поверх, не задевает основной знак */
.footer-partner-logo-frame--putp::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #fff;
    border-radius: 3px 3px 0 0;
    z-index: 1;
    pointer-events: none;
}

/* Нацпроекты: шире по соотношению сторон, та же высота визуально рядом с Фондом */
.footer-np-logo {
    display: block;
    width: clamp(130px, 28vw, 240px);
    height: clamp(30px, 6.6vw, 60px);
    object-fit: contain;
    object-position: left center;
}

.home-about-project h2 {
    margin-top: 0;
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
    line-height: 1.25;
}

audio {
    width: 100%;
    margin-top: 10px;
}

@media (max-width: 680px) {
    .actions {
        flex-direction: column;
    }

    /* Не растягивать все кнопки сайта — только ряды .actions */
    .actions .btn {
        width: 100%;
        text-align: center;
    }

    .footer-main {
        flex-direction: column;
        align-items: stretch;
    }

    .footer-feedback {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }

    .footer-feedback-note {
        max-width: 100%;
    }

    .footer-app-download,
    .footer-survey-link {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    .footer-partner-logos {
        justify-content: flex-start;
        gap: 8px;
    }

    .footer-partner-logo-frame {
        width: min(148px, 42vw);
        height: 40px;
    }

    .footer-np-logo {
        width: min(160px, 48vw);
        height: 36px;
    }

    .footer-tech-logo {
        max-width: min(200px, 70vw);
        height: 44px;
    }

    .cookie-consent__actions {
        width: 100%;
    }

    .cookie-consent__actions .btn {
        flex: 1 1 auto;
        text-align: center;
        min-width: min(100%, 140px);
    }
}

.cabinet-page[data-cabinet-mode="loading"] .cabinet-creator-view,
.cabinet-page[data-cabinet-mode="loading"] .cabinet-listener-view {
    visibility: hidden;
}

.cabinet-favorites-section {
    margin-top: 20px;
}

.cabinet-favorites-lead {
    margin: 0 0 12px;
}

.cabinet-favorites-ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.cabinet-favorites-link {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 500;
}

.cabinet-favorites-link:hover {
    background: #eff6ff;
}

.cabinet-newsletter-foot {
    margin: 28px 0 0;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.cabinet-newsletter-trigger {
    font-size: 0.8125rem;
}

.cabinet-newsletter__meta {
    margin: 0 0 12px;
    display: grid;
    gap: 8px;
}

.cabinet-newsletter__meta-row {
    display: grid;
    grid-template-columns: minmax(0, 9rem) 1fr;
    gap: 8px 12px;
    align-items: baseline;
}

.cabinet-newsletter__meta-row dt {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted, #6b7280);
}

.cabinet-newsletter__meta-row dd {
    margin: 0;
    word-break: break-word;
}

.cabinet-newsletter__consent {
    display: block;
    margin: 0 0 12px;
    max-width: 100%;
}

@media (max-width: 520px) {
    .cabinet-newsletter__meta-row {
        grid-template-columns: 1fr;
    }
}

.cabinet-role-badge {
    display: inline-block;
    margin: 0 0 10px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cabinet-role-badge--creator {
    color: #1d4ed8;
    background: #dbeafe;
}

.cabinet-role-badge--admin {
    color: #7c2d12;
    background: #ffedd5;
}

.cabinet-whoami {
    margin: 0 0 12px;
    font-size: 0.95rem;
}

.cabinet-role-badge--listener {
    color: #4b5563;
    background: #f3f4f6;
}

.cabinet-listener-view {
    margin-bottom: 1.25rem;
}

.cabinet-listener-head {
    margin-bottom: 1.25rem;
}

.cabinet-listener-view__title {
    margin: 0 0 10px;
    font-size: clamp(1.65rem, 1.3rem + 1.2vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #111827;
}

.cabinet-listener-view .cabinet-lead {
    max-width: 40rem;
    line-height: 1.55;
    margin: 0;
}

.cabinet-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(1.5rem, 4vw, 2.5rem) 1rem;
    margin-bottom: 1.5rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #e5e7eb;
}

.cabinet-empty__visual {
    margin-bottom: 1rem;
}

.cabinet-empty__img {
    display: block;
    width: min(280px, 100%);
    height: auto;
}

.cabinet-empty__title {
    margin: 0 0 0.45rem;
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
    font-weight: 700;
    color: #374151;
}

.cabinet-empty__text {
    margin: 0 0 1.15rem;
    max-width: 28rem;
    font-size: 0.92rem;
    line-height: 1.45;
}

.cabinet-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}

.cabinet-destinations {
    margin: 0 0 1.5rem;
}

.cabinet-destinations__title {
    margin: 0 0 0.4rem;
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111827;
}

.cabinet-destinations__lead {
    margin: 0 0 1rem;
    font-size: 0.92rem;
}

.cabinet-city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
    gap: 12px;
}

.cabinet-city-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 140px;
    padding: 14px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cabinet-city-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 25%, rgba(0, 0, 0, 0.62) 100%);
    pointer-events: none;
}

.cabinet-city-card__name,
.cabinet-city-card__meta {
    position: relative;
    z-index: 1;
}

.cabinet-city-card__name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.cabinet-city-card__meta {
    margin-top: 2px;
    font-size: 0.78rem;
    opacity: 0.9;
}

.cabinet-city-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
    color: #fff;
}

.cabinet-city-card:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}

.cabinet-city-card--tomsk {
    background: linear-gradient(145deg, #0f766e 0%, #134e4a 55%, #1e3a5f 100%);
}

.cabinet-city-card--novosibirsk {
    background: linear-gradient(145deg, #1d4ed8 0%, #1e40af 50%, #312e81 100%);
}

.cabinet-city-card--krasnoyarsk {
    background: linear-gradient(145deg, #b45309 0%, #9a3412 50%, #7c2d12 100%);
}

.cabinet-city-card--omsk {
    background: linear-gradient(145deg, #0369a1 0%, #075985 55%, #0c4a6e 100%);
}

.cabinet-city-card--irkutsk {
    background: linear-gradient(145deg, #4f46e5 0%, #3730a3 50%, #1e1b4b 100%);
}

.cabinet-destinations__more {
    margin: 0.9rem 0 0;
    font-size: 0.92rem;
}

.cabinet-destinations__more a {
    font-weight: 600;
    color: #047857;
}

.cabinet-destinations__more a:hover {
    color: #065f46;
}

.cabinet-page--creator .cabinet-destinations {
    display: none;
}

.cabinet-tiles--listener {
    margin-top: 20px;
}

.cabinet-tile--listener {
    background: #fff;
    border-color: #e5e7eb;
}

.cabinet-creator-hero {
    margin-bottom: 18px;
    padding: clamp(20px, 3.5vw, 32px);
    border-radius: 16px;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 42%, #3b82f6 100%);
    color: #fff;
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.28);
}

.cabinet-creator-hero__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: clamp(18px, 3vw, 28px);
}

.cabinet-creator-hero__copy {
    flex: 1 1 240px;
    min-width: 0;
}

.cabinet-creator-hero__title {
    margin: 0 0 10px;
    font-size: clamp(1.65rem, 1.3rem + 1.2vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.cabinet-creator-hero__lead {
    margin: 0;
    max-width: 36rem;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.cabinet-creator-hero .cabinet-role-badge--creator {
    color: #1e3a8a;
    background: rgba(255, 255, 255, 0.92);
}

.cabinet-cta-primary {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 260px;
    max-width: 100%;
    padding: clamp(14px, 2vw, 18px) clamp(18px, 2.5vw, 22px);
    border-radius: 14px;
    text-decoration: none;
    color: #1e3a8a;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 4px 14px rgba(15, 23, 42, 0.12),
        0 0 0 0 rgba(255, 255, 255, 0.4);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
    box-sizing: border-box;
}

.cabinet-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 32px rgba(15, 23, 42, 0.18),
        0 0 0 4px rgba(255, 255, 255, 0.35);
    background: #f8fafc;
}

.cabinet-cta-primary:active {
    transform: translateY(0);
}

.cabinet-cta-primary:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.cabinet-cta-primary__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(145deg, #2563eb, #1d4ed8);
    color: #fff;
}

.cabinet-cta-primary__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cabinet-cta-primary__label {
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    font-weight: 800;
    line-height: 1.2;
}

.cabinet-cta-primary__hint {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    line-height: 1.35;
}

.cabinet-cta-primary--compact {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    margin-top: 4px;
}

.cabinet-cta-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
    white-space: nowrap;
}

.cabinet-cta-inline:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
    background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
}

.cabinet-cta-inline:active {
    transform: translateY(0);
}

.cabinet-cta-inline:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.cabinet-section-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.cabinet-section-link {
    font-size: 14px;
    text-decoration: none;
}

.cabinet-section-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.cabinet-empty-routes {
    grid-column: 1 / -1;
    padding: clamp(24px, 4vw, 36px) 20px;
    text-align: center;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
}

.cabinet-empty-routes__title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
}

.cabinet-empty-routes__lead {
    margin: 0 auto 16px;
    max-width: 28rem;
}

.cabinet-tile--accent {
    border-color: #93c5fd;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.1);
}

.cabinet-tile--accent .cabinet-tile-title {
    color: #1d4ed8;
}

.cabinet-tile--accent:hover {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.18);
}

.cabinet-tile--staff {
    background: #fafbfc;
}

.cabinet-routes-section {
    margin-bottom: 16px;
}

.cabinet-lead {
    margin-bottom: 0;
    max-width: 52ch;
}

.cabinet-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.cabinet-stat {
    text-align: center;
    margin-bottom: 0;
}

.cabinet-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #111827;
}

.cabinet-stat-label {
    font-size: 14px;
    color: #6b7280;
}

.cabinet-stat-btn {
    cursor: pointer;
    text-align: center;
    margin-bottom: 0;
    width: 100%;
    font: inherit;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

.cabinet-stat-btn:hover {
    border-color: #93c5fd;
    background: #f8fafc;
}

.cabinet-stat-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.cabinet-stat-btn.is-active {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb;
    background: #eff6ff;
}

.cabinet-stat-note {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
    color: #6b7280;
}

.cabinet-analytics-head .cabinet-analytics-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.cabinet-analytics-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.cabinet-analytics-kpi__value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e40af;
    line-height: 1.2;
}

.cabinet-analytics-kpi__label {
    display: block;
    margin-top: 4px;
    font-size: 0.875rem;
    color: #6b7280;
}

.cabinet-analytics-top {
    margin-bottom: 20px;
}

.cabinet-analytics-top__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cabinet-analytics-top__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid #eef2f7;
}

.cabinet-analytics-top__item:last-child {
    border-bottom: 0;
}

.cabinet-analytics-top__item a {
    color: #0f172a;
    font-weight: 600;
    text-decoration: none;
}

.cabinet-analytics-top__item a:hover {
    color: #1d4ed8;
}

.cabinet-analytics-top__item span {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #1d4ed8;
}

.cabinet-analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.cabinet-analytics-chart-card--wide {
    grid-column: 1 / -1;
}

.cabinet-analytics-chart-wrap {
    position: relative;
    height: 260px;
    margin-top: 12px;
}

.cabinet-analytics-chart-wrap--tall {
    height: 300px;
}

.cabinet-analytics-chart-hint {
    margin: 0 0 4px;
    font-size: 0.875rem;
}

.cabinet-tiles--staff {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.staff-tts-form {
    margin-top: 16px;
    max-width: 40rem;
}

.staff-tts-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    margin-top: 12px;
}

.staff-tts-label:first-of-type {
    margin-top: 0;
}

.staff-tts-textarea,
.staff-tts-select {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
}

.staff-tts-textarea {
    resize: vertical;
    min-height: 120px;
}

.staff-tts-actions {
    margin-top: 14px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.staff-tts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px 16px;
    margin-top: 8px;
}

.staff-tts-grid .staff-tts-label {
    margin-top: 0;
}

.staff-tts-range-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.staff-tts-range-row input[type="range"] {
    flex: 1;
    min-width: 0;
}

.staff-tts-range-val {
    min-width: 3ch;
    font-variant-numeric: tabular-nums;
    color: #374151;
    font-size: 14px;
}

.staff-tts-file {
    display: block;
    width: 100%;
    max-width: 40rem;
    margin-top: 4px;
    font: inherit;
}

.staff-tts-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    margin-top: 12px;
    cursor: pointer;
}

.staff-tts-check input {
    width: auto;
    margin: 0;
}

.staff-tts-audio {
    width: 100%;
    margin-top: 8px;
}

.cabinet-section-title {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 18px;
}

.cabinet-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.cabinet-section-head .cabinet-section-title {
    margin-bottom: 0;
}

.cabinet-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.cabinet-tile {
    display: block;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cabinet-tile:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.cabinet-tile-title {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
}

.cabinet-tile-desc {
    font-size: 14px;
}

#cabinet-routes-list .route-card .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

#cabinet-routes-list .route-card .actions .btn {
    margin: 0;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

@media (max-width: 680px) {
    .cabinet-creator-hero__inner {
        flex-direction: column;
    }

    .cabinet-cta-primary {
        flex: 1 1 auto;
        width: 100%;
    }

    .cabinet-section-head {
        flex-direction: column;
        align-items: stretch;
    }

    .cabinet-section-head__actions {
        width: 100%;
    }

    .cabinet-cta-inline {
        flex: 1 1 auto;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cabinet-cta-primary,
    .cabinet-cta-inline {
        transition: none;
    }

    .cabinet-cta-primary:hover,
    .cabinet-cta-inline:hover {
        transform: none;
    }
}

.staff-roles-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.staff-roles-table th,
.staff-roles-table td {
    border: 1px solid #e5e7eb;
    padding: 8px 10px;
    text-align: left;
    vertical-align: middle;
}

.staff-roles-table th {
    background: #f3f4f6;
}

.staff-roles-table select {
    max-width: 100%;
    min-width: 200px;
}

.moderation-actions {
    flex-wrap: wrap;
    margin-top: 8px;
}

.moderation-msg,
.my-route-msg {
    margin-top: 8px;
    margin-bottom: 0;
}

.my-route-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.my-route-actions .btn {
    margin: 0;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.moderation-feedback-label {
    display: block;
    margin: 12px 0 6px;
    font-size: 0.9rem;
    font-weight: 600;
}

.moderation-feedback-input {
    width: 100%;
    min-height: 72px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font: inherit;
    resize: vertical;
}

.moderation-revision-banner {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    font-size: 0.95rem;
}

.route-moderation-section {
    border: 2px solid #fcd34d;
    background: #fffbeb;
}

.route-moderation-section__lead {
    margin-top: 0;
}

.route-card-hint {
    margin: 8px 0 0;
    font-size: 0.9rem;
}

.route-moderation-toolbar {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

/* Аудиостудия (/staff/audio-studio/) */
.audio-studio__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.audio-studio__eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2563eb;
}

.audio-studio__header h1 {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.audio-studio__lead {
    max-width: 44rem;
    margin: 0;
    line-height: 1.5;
}

.audio-studio__header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.audio-studio__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 18px;
    align-items: start;
}

.audio-studio__section-title,
.audio-studio__panel-title {
    margin: 0 0 14px;
    font-size: 1.1rem;
}

.audio-studio__route-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.audio-studio__grid-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    margin-bottom: 8px;
}

.audio-studio__coords {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    grid-column: 1 / -1;
}

.audio-studio__script {
    min-height: 180px;
    resize: vertical;
}

.audio-studio__char-count {
    margin: 4px 0 12px;
    font-size: 13px;
}

.audio-studio__main-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.audio-studio__player {
    width: 100%;
    margin: 8px 0 16px;
}

.audio-studio__subsection {
    margin: 16px 0 8px;
    font-size: 1rem;
}

.audio-studio__points-list {
    margin: 0;
    padding-left: 1.2rem;
}

.audio-studio__panel {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #f1f5f9;
    border-color: #334155;
    position: sticky;
    top: 12px;
}

.audio-studio__panel .field-label {
    color: #cbd5e1;
}

.audio-studio__panel .muted {
    color: #94a3b8;
}

.audio-studio__select {
    width: 100%;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #475569;
    background: #0f172a;
    color: #f8fafc;
    font: inherit;
}

.audio-studio__voice-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.audio-studio__voice-play {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-studio__voice-play:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.audio-studio__voice-name {
    display: block;
    font-weight: 700;
    font-size: 15px;
}

.audio-studio__voice-sub {
    display: block;
    font-size: 12px;
    margin-top: 2px;
}

.audio-studio__voice-select {
    max-width: 120px;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #475569;
    background: #1e293b;
    color: #e2e8f0;
}

.audio-studio__slider-block {
    margin-bottom: 16px;
}

.audio-studio__slider-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.audio-studio__slider-label {
    font-size: 14px;
    font-weight: 600;
}

.audio-studio__slider-val {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: #94a3b8;
}

.audio-studio__range {
    width: 100%;
    height: 6px;
    margin: 0;
    accent-color: #fff;
    cursor: pointer;
}

.audio-studio__slider-hints {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-top: 4px;
}

.audio-studio__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}

.audio-studio__toggle input {
    width: auto;
    margin: 0;
}

@media (max-width: 960px) {
    .audio-studio__layout {
        grid-template-columns: 1fr;
    }

    .audio-studio__panel {
        position: static;
    }
}

@media (max-width: 600px) {
    .audio-studio__grid-form {
        grid-template-columns: 1fr;
    }
}

/* ========== Режим для слабовидящих (класс на элементе html: echostep-a11y) ========== */

html.echostep-a11y {
    font-size: 112.5%;
}

@media (min-width: 900px) {
    html.echostep-a11y {
        font-size: 118.75%;
    }
}

html.echostep-a11y body {
    background: #fff;
    color: #0a0a0a;
    letter-spacing: 0.02em;
}

html.echostep-a11y .header,
html.echostep-a11y .footer {
    background: #000;
    color: #fff;
}

html.echostep-a11y .nav-a11y-toggle {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

html.echostep-a11y .brand__header-logo {
    max-height: clamp(36px, 4vw + 0.35rem, 52px);
}

html.echostep-a11y .brand__header-logo--wide {
    max-height: clamp(42px, 4.2vw + 0.6rem, 64px);
    max-width: min(380px, 70vw);
}

html.echostep-a11y .brand__header-logo--badge {
    max-height: clamp(48px, 5.5vw + 0.5rem, 76px);
}

html.echostep-a11y .nav-minimal-tile:hover,
html.echostep-a11y .nav-auth-entry:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

html.echostep-a11y main.page a:not(.btn):not(.hero-cover__start) {
    color: #000b8a;
    text-decoration: underline;
    text-underline-offset: 3px;
}

html.echostep-a11y main.page .btn,
html.echostep-a11y main.page .hero-cover__start {
    text-decoration: none;
}

html.echostep-a11y .footer-survey-link {
    text-decoration: none;
}

html.echostep-a11y .card {
    border: 2px solid #000;
    box-shadow: none;
}

html.echostep-a11y .card h1,
html.echostep-a11y .card h2,
html.echostep-a11y .card h3 {
    color: #000;
}

html.echostep-a11y .auth-password-details {
    border: 2px solid #000;
    background: #fff;
}

html.echostep-a11y .auth-password-details__summary {
    color: #000;
}

html.echostep-a11y .btn {
    min-height: 48px;
    padding: 12px 22px;
    font-weight: 800;
    border: 2px solid #000 !important;
}

html.echostep-a11y .btn-secondary {
    color: #000 !important;
    background: #f3f4f6 !important;
}

html.echostep-a11y input,
html.echostep-a11y textarea,
html.echostep-a11y select {
    border-width: 2px !important;
    border-color: #000 !important;
}

html.echostep-a11y .hero-cover {
    background: #f0f0f0;
    border-bottom: 2px solid #000;
}

html.echostep-a11y .hero-cover__panel {
    border: 2px solid #000;
}

html.echostep-a11y .hero-cover__title,
html.echostep-a11y .hero-cover__title-line1,
html.echostep-a11y .hero-cover__title-line2,
html.echostep-a11y .hero-cover__lead {
    color: #000;
}

html.echostep-a11y .hero-cover__start {
    border: 2px solid #000;
    color: #000;
}

html.echostep-a11y .about-hero {
    background: #e5e7eb;
    border-bottom: 2px solid #000;
}

html.echostep-a11y .about-hero__title,
html.echostep-a11y .about-hero__quote,
html.echostep-a11y .about-hero__quote p {
    color: #000;
}

html.echostep-a11y .about-hero__cta {
    background: #f3f4f6;
    color: #000;
    border: 2px solid #000;
    box-shadow: none;
}

html.echostep-a11y .about-hero__cta:hover {
    background: #e5e7eb;
    transform: none;
}

html.echostep-a11y .about-bottom {
    background: #f3f4f6;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

html.echostep-a11y .footer-row {
    border-top-color: rgba(255, 255, 255, 0.55);
}

html.echostep-a11y .footer-grant-text,
html.echostep-a11y .footer-feedback-note,
html.echostep-a11y .footer-copy {
    color: rgba(255, 255, 255, 0.92);
}

html.echostep-a11y .footer-survey-link {
    border: 2px solid #000;
}

html.echostep-a11y .cabinet-tile {
    border: 2px solid #000;
    text-decoration: underline;
    text-underline-offset: 3px;
}

html.echostep-a11y .cabinet-stat-btn {
    border: 2px solid #000;
    background: #fff;
}

html.echostep-a11y .cabinet-stat-btn.is-active {
    box-shadow: none;
    background: #e0e7ff;
    border-width: 3px;
}

html.echostep-a11y .cabinet-stat-note {
    color: #222;
}

html.echostep-a11y .cabinet-creator-hero {
    background: #000;
    color: #fff;
    border: 3px solid #000;
}

html.echostep-a11y .cabinet-creator-hero__lead {
    color: #fff;
}

html.echostep-a11y .cabinet-cta-primary {
    border: 3px solid #000;
    color: #000;
    background: #fff;
}

html.echostep-a11y .cabinet-cta-primary__hint {
    color: #222;
}

html.echostep-a11y .cabinet-cta-inline {
    background: #000;
    color: #fff;
    border: 2px solid #000;
}

html.echostep-a11y .staff-roles-table th,
html.echostep-a11y .staff-roles-table td {
    border: 2px solid #000;
}

html.echostep-a11y :focus-visible {
    outline: 3px solid #0000c4 !important;
    outline-offset: 2px !important;
}

/* ——— Боковое меню (бургер слева) ——— */
body.sidebar-open {
    overflow: hidden;
}

.sidebar-burger {
    position: fixed;
    left: max(10px, env(safe-area-inset-left, 0px));
    top: max(12px, env(safe-area-inset-top, 0px));
    z-index: 1002;
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 12px;
    background: rgba(17, 24, 39, 0.92);
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    transition: background 0.15s ease, transform 0.15s ease, opacity 0.2s ease, visibility 0.2s ease;
}

/* Панель открыта — бургер убран, чтобы не перекрывать шапку и не дублировать кнопку «закрыть» */
body.sidebar-open .sidebar-burger {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sidebar-burger:hover {
    background: #1f2937;
}

.sidebar-burger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.sidebar-burger__bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1001;
    width: min(300px, 88vw);
    max-width: 100%;
    background: #fff;
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.18);
    transform: translateX(-102%);
    transition: transform 0.28s ease, visibility 0.28s step-end;
    pointer-events: none;
    visibility: hidden;
}

body.sidebar-open .sidebar-drawer {
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.28s ease, visibility 0s step-start;
}

.sidebar-drawer__panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}

.sidebar-drawer__head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #e5e7eb;
    min-height: 56px;
    box-sizing: border-box;
}

.sidebar-drawer__close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: #f3f4f6;
    color: #111827;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.sidebar-drawer__close:hover {
    background: #e5e7eb;
}

.sidebar-drawer__close:focus-visible {
    outline: 2px solid #2d6cdf;
    outline-offset: 2px;
}

.sidebar-drawer__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-drawer__link {
    display: block;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
    border: none;
    width: 100%;
    text-align: left;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    border-radius: 0;
    box-sizing: border-box;
}

.sidebar-drawer__link:hover,
.sidebar-drawer__link:focus-visible {
    background: #f0f4ff;
    color: #1e3a8a;
}

.sidebar-drawer__link.is-active {
    background: #e8efff;
    color: #1d4ed8;
    border-left: 4px solid #2d6cdf;
    padding-left: 16px;
}

.sidebar-drawer__link--btn {
    color: #b45309;
}

.sidebar-drawer__link--btn:hover {
    background: #fffbeb;
    color: #92400e;
}

.sidebar-drawer__foot {
    flex-shrink: 0;
    padding: 16px 18px 20px;
    border-top: 1px solid #e5e7eb;
}

.sidebar-vk {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #0077ff;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.sidebar-vk:hover {
    filter: brightness(1.06);
    box-shadow: 0 2px 10px rgba(0, 119, 255, 0.45);
    color: #fff;
}

.sidebar-vk:focus-visible {
    outline: 2px solid #111827;
    outline-offset: 2px;
}

.sidebar-vk__icon {
    flex-shrink: 0;
}

html.echostep-a11y .sidebar-burger {
    border: 2px solid #fff;
}

html.echostep-a11y .sidebar-drawer__link {
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── EchoStep UI: баннеры, шаги, пустые состояния ── */

.echostep-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 14px 0 0;
    padding: 14px 16px;
    border-radius: var(--es-radius);
    border: 2px solid transparent;
    animation: echostep-banner-in 0.35s ease;
}

@keyframes echostep-banner-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.echostep-banner--error {
    background: linear-gradient(135deg, #fff1f2 0%, #fee2e2 100%);
    border-color: #fca5a5;
    color: #991b1b;
}

.echostep-banner--success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #6ee7b7;
    color: #065f46;
}

.echostep-banner--info {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
    color: #1e40af;
}

.echostep-banner--warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fcd34d;
    color: #92400e;
}

.echostep-banner--loading {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: #cbd5e1;
    color: #475569;
}

.echostep-banner__icon {
    flex: 0 0 auto;
    font-size: 1.75rem;
    line-height: 1;
}

.echostep-banner__body {
    flex: 1 1 auto;
    min-width: 0;
}

.echostep-banner__title {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 0 0 2px;
}

.echostep-banner__tagline {
    margin: 0 0 4px;
    font-size: 0.82rem;
    font-weight: 600;
    opacity: 0.85;
}

.echostep-banner__message {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

.echostep-step-track {
    margin-bottom: 18px;
    padding: clamp(14px, 2.5vw, 20px);
    border-radius: var(--es-radius);
    background: var(--es-gradient-warm);
    border: 2px solid #fde68a;
    box-shadow: 0 4px 18px rgba(249, 115, 22, 0.1);
}

.echostep-step-track__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.echostep-step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 140px;
    min-width: 0;
    padding: 10px 14px;
    border-radius: var(--es-radius-sm);
    background: rgba(255, 255, 255, 0.72);
    border: 2px dashed #d1d5db;
    color: var(--es-muted);
    font-size: 0.9rem;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.echostep-step.is-current {
    background: #fff;
    border: 2px solid var(--es-brand);
    color: var(--es-text);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.15);
    transform: translateY(-1px);
}

.echostep-step.is-done {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}

.echostep-step__icon {
    font-size: 1.25rem;
    line-height: 1;
}

.echostep-step__text strong {
    color: var(--es-brand);
}

.echostep-step-track__hint {
    margin: 12px 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #92400e;
}

.echostep-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: clamp(32px, 6vw, 48px) 24px;
    text-align: center;
    background: linear-gradient(145deg, #fff 0%, #f8fafc 100%);
    border: 2px dashed #cbd5e1;
    border-radius: var(--es-radius);
}

.echostep-empty__icon {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 10px;
    animation: echostep-wiggle 2.5s ease-in-out infinite;
}

@keyframes echostep-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-6deg); }
    75% { transform: rotate(6deg); }
}

.echostep-empty__title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--es-text);
}

.echostep-empty__hint {
    margin: 0 auto;
    max-width: 30rem;
}

.echostep-ribbon {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #f97316, #fb923c);
    color: #fff;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

.home-routes-hero {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 42%, #fef3c7 100%);
    border: 2px solid #93c5fd;
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.12);
}

.home-routes-hero__eyebrow .echostep-ribbon {
    margin-right: 8px;
    vertical-align: middle;
}

.route-picker-card:hover {
    border-color: var(--es-brand-light);
    box-shadow: var(--es-shadow-hover);
}

.cabinet-stat-btn.is-active {
    border-color: var(--es-brand);
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.cabinet-creator-hero {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 38%, #3b82f6 72%, #60a5fa 100%);
}

@media (prefers-reduced-motion: reduce) {
    .echostep-banner,
    .echostep-empty__icon {
        animation: none;
    }

    .echostep-step.is-current {
        transform: none;
    }
}

html.echostep-a11y .echostep-banner {
    border-width: 3px;
    animation: none;
}

html.echostep-a11y .echostep-banner__icon {
    display: none;
}

html.echostep-a11y .echostep-step-track {
    background: #fff;
    border: 3px solid #000;
}

html.echostep-a11y .echostep-step.is-current {
    border: 3px solid #000;
    box-shadow: none;
}

html.echostep-a11y .msg-error::before,
html.echostep-a11y .msg-success::before {
    content: none;
}

html.echostep-a11y .upload-zone-title::before {
    content: none;
}

html.echostep-a11y .card::before {
    display: none;
}

html.echostep-a11y body {
    background: #fff;
}

/* ——— Блог ——— */
.blog-page__head,
.blog-manage__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 24px;
}

.blog-page__lead {
    max-width: 42rem;
    margin: 8px 0 0;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.blog-card {
    border: 2px solid var(--es-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.blog-card:hover {
    border-color: var(--es-brand-light, #93c5fd);
    box-shadow: var(--es-shadow-hover, 0 8px 24px rgba(37, 99, 235, 0.12));
}

.blog-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.blog-card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f1f5f9;
}

.blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    padding: 16px 18px 18px;
}

.blog-card__date {
    font-size: 0.85rem;
}

.blog-card__title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.35;
}

.blog-card__excerpt {
    margin: 0;
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.5;
}

.blog-card__more {
    margin-top: 4px;
    font-weight: 600;
    color: var(--es-brand, #2563eb);
}

.blog-page__empty {
    margin: 0;
    padding: 24px 0;
}

.blog-article__head {
    margin-bottom: 20px;
}

.blog-article__date {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.blog-article__title {
    margin: 0 0 12px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.25;
}

.blog-article__lead {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.55;
    color: #475569;
}

.blog-article__cover {
    margin: 0 0 24px;
    border-radius: 10px;
    overflow: hidden;
}

.blog-article__cover img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}

.blog-article__body {
    font-size: 1.05rem;
    line-height: 1.7;
}

.blog-article__body p {
    margin: 0 0 1em;
}

.blog-article__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--es-border, #e2e8f0);
}

.blog-manage__layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.blog-manage__subheading {
    margin: 0 0 12px;
    font-size: 1.05rem;
}

.blog-manage__list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.blog-manage__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 70vh;
    overflow-y: auto;
}

.blog-manage__list-item {
    margin: 0;
}

.blog-manage__list-btn {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 2px solid var(--es-border, #e2e8f0);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font: inherit;
}

.blog-manage__list-btn:hover {
    border-color: var(--es-brand-light, #93c5fd);
}

.blog-manage__list-btn.is-active {
    border-color: var(--es-brand, #2563eb);
    background: #eff6ff;
}

.blog-manage__list-title {
    display: block;
    font-weight: 600;
}

.blog-manage__list-meta {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
}

.blog-editor-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-editor-form__publish {
    margin-top: 8px;
}

.blog-editor-form__actions {
    margin-top: 12px;
}

@media (max-width: 900px) {
    .blog-manage__layout {
        grid-template-columns: 1fr;
    }

    .blog-manage__list {
        max-height: none;
    }
}

/* ——— Режим прогулки / гео-триггеры ——— */
.route-walk-section h2 {
    margin-bottom: 8px;
}

.route-walk-lead {
    margin: 0 0 12px;
    max-width: 42rem;
}

.route-walk-toolbar {
    margin-bottom: 12px;
}

.route-walk-status {
    margin: 0 0 12px;
}

.route-walk-proximity {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.route-walk-proximity__item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 2px solid var(--es-border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
}

.route-walk-proximity__item--inside {
    border-color: var(--es-brand, #2563eb);
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.route-walk-proximity__title {
    font-weight: 600;
}

.route-walk-proximity__dist {
    color: #64748b;
    white-space: nowrap;
}

.route-walk-audio {
    width: 100%;
    margin-top: 12px;
}

/* —— Стать автором —— */
.page:has(.become-author) > .main-container:empty {
    display: none;
}

.become-author {
    --ba-ink: #0f172a;
    --ba-muted: #64748b;
    --ba-line: #e2e8f0;
    --ba-surface: #f1f5f9;
    --ba-brand: #2563eb;
    --ba-brand-dark: #1d4ed8;
    --ba-brand-soft: #dbeafe;
    background: #fff;
    color: var(--ba-ink);
}

.ba-section-title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-align: center;
    color: var(--ba-ink);
}

.ba-section-title--left {
    text-align: left;
}

.ba-section-lead {
    margin: 0 auto 1.75rem;
    max-width: 40rem;
    text-align: center;
    color: var(--ba-muted);
    line-height: 1.55;
    font-size: 1.05rem;
}

.ba-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    border: 2px solid transparent;
    background: var(--ba-brand);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ba-btn:hover {
    background: var(--ba-brand-dark);
    color: #fff;
}

.ba-btn--ghost {
    background: transparent;
    border-color: var(--ba-brand);
    color: var(--ba-brand);
}

.ba-btn--ghost:hover {
    background: var(--ba-brand-soft);
    color: var(--ba-brand-dark);
}

.ba-btn--on-dark {
    background: #fff;
    color: var(--ba-brand-dark);
}

.ba-btn--on-dark:hover {
    background: #eff6ff;
    color: var(--ba-brand-dark);
}

/* Hero */
.ba-hero {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
    background: #fff;
}

.ba-hero__grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 900px) {
    .ba-hero__grid {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 2.5rem;
    }
}

.ba-hero__title {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: var(--ba-ink);
}

.ba-hero__accent {
    color: var(--ba-brand);
}

.ba-hero__lead {
    margin: 0 0 1.5rem;
    max-width: 32rem;
    font-size: 1.08rem;
    line-height: 1.55;
    color: var(--ba-muted);
}

.ba-hero__visual {
    position: relative;
    justify-self: center;
    width: min(100%, 420px);
    aspect-ratio: 1;
}

.ba-hero__orb {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ba-brand-soft);
    box-shadow: 0 0 0 14px rgba(37, 99, 235, 0.12);
}

.ba-hero__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.ba-hero__deco {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.ba-hero__deco--plane {
    top: 6%;
    left: 4%;
    background:
        radial-gradient(circle at 50% 50%, var(--ba-brand) 0 30%, transparent 31%),
        #fff;
}

.ba-hero__deco--compass {
    bottom: 10%;
    right: 2%;
    background:
        conic-gradient(from 45deg, var(--ba-brand-soft), #fff 40%, var(--ba-brand-soft)),
        #fff;
}

/* Strip */
.ba-strip {
    padding: 2rem 0 2.75rem;
    border-top: 1px solid var(--ba-line);
}

.ba-strip__grid {
    display: grid;
    gap: 1rem 2.5rem;
}

@media (min-width: 800px) {
    .ba-strip__grid {
        grid-template-columns: 1fr 1.2fr;
        align-items: start;
    }
}

.ba-strip__title {
    margin: 0;
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ba-strip__text {
    margin: 0;
    color: var(--ba-muted);
    line-height: 1.55;
    font-size: 1.05rem;
}

/* Platform */
.ba-platform {
    padding: 1rem 0 2.5rem;
    background: var(--ba-surface);
}

.ba-platform__grid {
    display: grid;
    gap: 1.75rem;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}

@media (min-width: 900px) {
    .ba-platform__grid {
        grid-template-columns: 0.9fr 1.1fr;
        align-items: center;
    }
}

.ba-platform__copy h2 {
    margin: 0 0 0.85rem;
    font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ba-platform__copy p {
    margin: 0;
    color: var(--ba-muted);
    line-height: 1.55;
}

.ba-laptop {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ba-line);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
}

.ba-laptop__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.75rem;
}

.ba-laptop__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #60a5fa;
}

.ba-laptop__body {
    display: grid;
    grid-template-columns: 140px 1fr;
    min-height: 220px;
}

.ba-laptop__side {
    padding: 0.75rem;
    background: #f8fafc;
    border-right: 1px solid var(--ba-line);
    font-size: 0.78rem;
}

.ba-laptop__side-title {
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.ba-laptop__side ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ba-laptop__side li {
    padding: 0.35rem 0.4rem;
    border-radius: 6px;
    color: var(--ba-muted);
}

.ba-laptop__side li.is-done {
    color: #15803d;
}

.ba-laptop__side li.is-active {
    background: var(--ba-brand-soft);
    color: var(--ba-brand-dark);
    font-weight: 600;
}

.ba-laptop__main {
    padding: 0.75rem;
}

.ba-laptop__map-label {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.ba-laptop__map {
    position: relative;
    height: 160px;
    border-radius: 10px;
    background:
        linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 40%, #dbeafe 100%);
}

.ba-laptop__pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: var(--ba-brand);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    display: grid;
    place-items: center;
}

.ba-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding-bottom: 2rem;
}

@media (min-width: 720px) {
    .ba-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ba-stats__item {
    padding-top: 0.65rem;
    border-top: 3px solid var(--ba-brand);
}

.ba-stats__value {
    margin: 0 0 0.25rem;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ba-ink);
}

.ba-stats__label {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ba-muted);
    line-height: 1.35;
}

/* Who */
.ba-who {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--ba-surface);
}

.ba-who__grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1.15rem;
}

@media (min-width: 800px) {
    .ba-who__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.35rem;
    }
}

.ba-who__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    min-height: 15rem;
    padding: 1.75rem 1.25rem 1.5rem;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 28px rgba(15, 23, 42, 0.07);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ba-who__card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.05),
        0 16px 36px rgba(37, 99, 235, 0.12);
}

.ba-who__card--guide .ba-who__icon {
    background: linear-gradient(160deg, #dbeafe 0%, #eff6ff 65%, #f8fafc 100%);
}

.ba-who__card--museum .ba-who__icon {
    background: linear-gradient(160deg, #e0e7ff 0%, #eef2ff 55%, #f8fafc 100%);
}

.ba-who__card--local .ba-who__icon {
    background: linear-gradient(160deg, #cffafe 0%, #ecfeff 55%, #f8fafc 100%);
}

.ba-who__icon {
    display: grid;
    place-items: center;
    width: 7.25rem;
    height: 7.25rem;
    margin-bottom: 0.35rem;
    border-radius: 50%;
    color: var(--ba-brand);
}

.ba-who__svg {
    width: 5.25rem;
    height: 5.25rem;
    display: block;
}

.ba-who__label {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ba-who__card--museum .ba-who__label {
    background: #eef2ff;
    color: #4338ca;
}

.ba-who__card--local .ba-who__label {
    background: #ecfeff;
    color: #0e7490;
}

.ba-who__card strong {
    max-width: 15rem;
    margin-top: 0.15rem;
    font-size: 1.05rem;
    font-weight: 750;
    line-height: 1.35;
    color: #0f172a;
    letter-spacing: -0.01em;
}

/* Partners */
.ba-partners {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.ba-partners__inner {
    max-width: 44rem;
    margin: 0 auto;
    text-align: center;
}

.ba-partners__text {
    margin: 0 0 2rem;
    color: var(--ba-muted);
    line-height: 1.6;
    font-size: 1.05rem;
}

.ba-partners__quote-title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 800;
}

.ba-partners__quote {
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

.ba-partners__quote p {
    margin: 0 0 0.75rem;
    color: var(--ba-muted);
    line-height: 1.55;
    font-size: 1.05rem;
}

.ba-partners__quote footer {
    font-weight: 700;
    color: var(--ba-ink);
    font-size: 0.95rem;
}

.ba-partners__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}

/* Earn */
.ba-earn {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--ba-surface);
}

.ba-earn__card {
    max-width: 36rem;
    margin: 0 auto;
    padding: 1.5rem 1.35rem;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--ba-line);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.ba-earn__card-title {
    margin: 0 0 1rem;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--ba-brand-dark);
}

.ba-earn__list {
    margin: 0;
    padding: 0 0 0 1.1rem;
    color: var(--ba-muted);
    line-height: 1.5;
}

.ba-earn__list li + li {
    margin-top: 0.45rem;
}

/* Calc */
.ba-calc {
    padding: clamp(2.5rem, 5vw, 3.5rem) 0;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 45%, #3b82f6 100%);
    color: #fff;
}

.ba-calc__grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 800px) {
    .ba-calc__grid {
        grid-template-columns: 1.2fr 0.8fr;
        align-items: center;
    }
}

.ba-calc__copy h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ba-calc__copy p {
    margin: 0;
    opacity: 0.92;
    line-height: 1.55;
}

.ba-calc__form {
    padding: 1.25rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.ba-calc__form-note {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.45;
    opacity: 0.95;
}

/* Help */
.ba-help {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.ba-help__grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 900px) {
    .ba-help__grid {
        grid-template-columns: 1.15fr 0.85fr;
        align-items: center;
    }
}

.ba-help__lead {
    margin: 0 0 1.25rem;
    color: var(--ba-muted);
    line-height: 1.55;
}

.ba-help__features {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
}

@media (min-width: 600px) {
    .ba-help__features {
        grid-template-columns: 1fr 1fr;
    }
}

.ba-help__features strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--ba-ink);
}

.ba-help__features span {
    display: block;
    font-size: 0.92rem;
    color: var(--ba-muted);
    line-height: 1.45;
}

.ba-help__blob {
    border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
    overflow: hidden;
    border: 6px solid var(--ba-brand);
    background: var(--ba-brand-soft);
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.18);
}

.ba-help__blob img {
    display: block;
    width: 100%;
    height: auto;
}

/* Steps */
.ba-steps {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--ba-surface);
}

.ba-steps__grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 860px) {
    .ba-steps__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.75rem;
    }
}

.ba-steps__num {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.85rem;
    border-radius: 50%;
    border: 2px solid var(--ba-brand);
    color: var(--ba-brand);
    font-weight: 800;
}

.ba-steps__grid h3 {
    margin: 0 0 0.55rem;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.3;
}

.ba-steps__grid p {
    margin: 0 0 0.65rem;
    color: var(--ba-muted);
    line-height: 1.5;
    font-size: 0.98rem;
}

.ba-steps__hint {
    font-weight: 700 !important;
    color: var(--ba-ink) !important;
    margin-bottom: 0.35rem !important;
}

.ba-steps__grid ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--ba-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.ba-steps__cta {
    margin: 2rem 0 0;
    text-align: center;
}

/* App */
.ba-app {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.ba-app__grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 860px) {
    .ba-app__grid {
        grid-template-columns: 1fr auto;
    }
}

.ba-app__grid > div:first-child p {
    margin: 0 0 1.15rem;
    color: var(--ba-muted);
    line-height: 1.55;
}

.ba-phone {
    width: min(260px, 80vw);
    margin: 0 auto;
    padding: 1rem 0.9rem 1.15rem;
    border-radius: 28px;
    background: #0f172a;
    color: #e2e8f0;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.28);
}

.ba-phone__stage {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: #93c5fd;
    font-weight: 700;
}

.ba-phone__title {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.ba-phone__media {
    height: 100px;
    border-radius: 10px;
    margin-bottom: 0.65rem;
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
}

.ba-phone__text {
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #94a3b8;
}

.ba-phone__player {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.ba-phone__player span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #64748b;
}

.ba-phone__play {
    width: 36px !important;
    height: 36px !important;
    background: var(--ba-brand) !important;
}

/* After */
.ba-after {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--ba-surface);
}

.ba-after__grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 900px) {
    .ba-after__grid {
        grid-template-columns: 0.85fr 1.15fr;
    }
}

.ba-after__blob {
    border-radius: 42% 58% 48% 52% / 48% 42% 58% 52%;
    overflow: hidden;
    border: 6px solid var(--ba-brand);
    background: #fff;
    max-width: 320px;
    margin: 0 auto;
}

.ba-after__blob img {
    display: block;
    width: 100%;
    height: auto;
}

.ba-after__lead {
    margin: 0 0 1rem;
    font-weight: 700;
}

.ba-after__features {
    margin: 0 0 1.35rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.95rem;
}

@media (min-width: 600px) {
    .ba-after__features {
        grid-template-columns: 1fr 1fr;
    }
}

.ba-after__features strong {
    display: block;
    margin-bottom: 0.2rem;
}

.ba-after__features span {
    display: block;
    font-size: 0.92rem;
    color: var(--ba-muted);
    line-height: 1.45;
}

/* FAQ */
.ba-faq {
    padding: clamp(2.5rem, 5vw, 4rem) 0 3.5rem;
}

.ba-faq__list {
    max-width: 44rem;
    margin: 0 auto;
}

.ba-faq__item {
    border-top: 1px solid var(--ba-line);
}

.ba-faq__item:last-child {
    border-bottom: 1px solid var(--ba-line);
}

.ba-faq__q {
    cursor: pointer;
    list-style: none;
    padding: 1rem 0;
    font-weight: 700;
    color: var(--ba-ink);
}

.ba-faq__q::-webkit-details-marker {
    display: none;
}

.ba-faq__a {
    padding: 0 0 1rem;
    color: var(--ba-muted);
    line-height: 1.55;
}

.ba-faq__a p {
    margin: 0 0 0.65rem;
}

.ba-faq__a a {
    color: var(--ba-brand);
    font-weight: 600;
}

.ba-faq__cta {
    margin: 1.75rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}

@media (max-width: 640px) {
    .ba-laptop__body {
        grid-template-columns: 1fr;
    }

    .ba-laptop__side {
        border-right: 0;
        border-bottom: 1px solid var(--ba-line);
    }
}

.become-author-hero {
    position: relative;
    isolation: isolate;
    min-height: clamp(420px, 72vh, 640px);
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    width: 100%;
}

.become-author-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.become-author-hero__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 72% 28%;
    transform: scale(1.04);
    transform-origin: 70% 35%;
    animation: become-author-hero-drift 18s ease-out forwards;
}

@keyframes become-author-hero-drift {
    from { transform: scale(1.08); }
    to { transform: scale(1.02); }
}

.become-author-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(105deg, rgba(12, 18, 28, 0.88) 0%, rgba(12, 18, 28, 0.62) 42%, rgba(12, 18, 28, 0.28) 68%, rgba(12, 18, 28, 0.45) 100%),
        linear-gradient(180deg, rgba(12, 18, 28, 0.35) 0%, transparent 28%, rgba(12, 18, 28, 0.55) 100%);
}

.become-author-hero__shell {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: clamp(2.5rem, 8vh, 5rem);
    padding-bottom: clamp(2.25rem, 7vh, 4.5rem);
    box-sizing: border-box;
}

.become-author-hero__stage {
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.become-author-hero__brand {
    margin: 0 0 0.85rem;
    font-size: clamp(1.35rem, 2.8vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
    animation: become-author-rise 0.7s ease both;
}

.become-author-hero__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.55rem, 1.1rem + 2.2vw, 2.55rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
    animation: become-author-rise 0.75s ease 0.08s both;
}

.become-author-hero__lead {
    margin: 0 0 1.35rem;
    max-width: 34rem;
    font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.12rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
    animation: become-author-rise 0.75s ease 0.14s both;
}

.become-author-hero__cta-wrap {
    margin: 0;
    animation: become-author-rise 0.75s ease 0.2s both;
}

.become-author-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.85rem;
    padding: 0.7rem 1.35rem;
    border-radius: 10px;
    background: var(--ba-accent);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(249, 115, 22, 0.35);
    transition: transform 0.18s ease, background 0.18s ease;
}

.become-author-hero__cta:hover {
    background: #ea580c;
    color: #fff;
    transform: translateY(-1px);
}

.become-author-hero__cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.become-author-hero__eyebrow {
    margin: 0 0 0.45rem;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    animation: become-author-rise 0.7s ease 0.04s both;
}

.become-author-hero__cta-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.become-author-hero__cta--ghost {
    background: transparent;
    box-shadow: none;
    border: 2px solid rgba(255, 255, 255, 0.55);
    color: #fff;
}

.become-author-hero__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-1px);
}

.become-author-intro__lead {
    max-width: 46rem;
    margin: 0 0 1.1rem !important;
    color: var(--ba-ink) !important;
}

.become-author-intro__chips {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.become-author-intro__chips li {
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 0.9rem;
    font-weight: 600;
}

.become-author-need__lead {
    max-width: 42rem;
    margin: 0 0 1.25rem !important;
}

.become-author-need__grid,
.become-author-why__grid {
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
}

@media (min-width: 720px) {
    .become-author-need__grid,
    .become-author-why__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.become-author-need__grid li,
.become-author-why__grid li {
    padding: 1.1rem 1.15rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--ba-line, #e2e8f0);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.become-author-need__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: 0.55rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.85rem;
    font-weight: 800;
}

.become-author-need__grid strong,
.become-author-why__grid strong {
    display: block;
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    color: var(--ba-ink, #111827);
}

.become-author-need__grid span,
.become-author-why__grid span {
    display: block;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ba-muted, #64748b);
}

.become-author-why__grid a {
    color: var(--es-brand, #2563eb);
    font-weight: 600;
}

.become-author-band--earn {
    background:
        radial-gradient(ellipse 70% 50% at 0% 0%, rgba(37, 99, 235, 0.12), transparent 55%),
        var(--ba-surface, #f8fafc);
}

.become-author-earn__highlight {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.25rem;
    margin: 1.1rem 0 1.35rem;
    padding: 1.15rem 1.25rem;
    border-radius: 16px;
    background: #111827;
    color: #fff;
}

.become-author-earn__rate {
    margin: 0 !important;
    font-size: clamp(2.4rem, 2rem + 2vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #93c5fd !important;
}

.become-author-earn__rate-text {
    margin: 0 !important;
    flex: 1 1 14rem;
    max-width: 28rem;
    font-size: 1.02rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92) !important;
}

@keyframes become-author-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.become-author-band {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    color: var(--ba-ink);
}

.become-author-band--muted {
    background: var(--ba-surface);
}

.become-author-band--help {
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(37, 99, 235, 0.1), transparent 55%),
        #fff;
}

.become-author-band h2 {
    margin: 0 0 0.85rem;
    font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.become-author-band p {
    margin: 0;
    color: var(--ba-muted);
    line-height: 1.55;
    font-size: 1.02rem;
}

.become-author-split {
    display: grid;
    gap: 1.75rem 2.5rem;
    align-items: center;
}

@media (min-width: 860px) {
    .become-author-split {
        grid-template-columns: 1.15fr 0.85fr;
    }
}

.become-author-mock {
    border: 1px solid var(--ba-line);
    border-radius: 16px;
    padding: 1.25rem 1.35rem;
    background:
        linear-gradient(160deg, rgba(37, 99, 235, 0.06), transparent 55%),
        #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.become-author-mock__label {
    margin: 0 0 0.85rem !important;
    font-size: 0.8rem !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ba-brand) !important;
}

.become-author-mock__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.55rem;
}

.become-author-mock__list li {
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: #f1f5f9;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ba-ink);
}

.become-author-who h2,
.become-author-partners h2,
.become-author-earn h2,
.become-author-help h2,
.become-author-steps h2,
.become-author-after h2 {
    text-align: center;
}

.become-author-who__lead,
.become-author-earn__lead,
.become-author-help__lead,
.become-author-steps__lead {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 1.75rem !important;
}

.become-author-partners p {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto !important;
}

.become-author-who__grid,
.become-author-earn__points,
.become-author-help__grid,
.become-author-after__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 720px) {
    .become-author-who__grid,
    .become-author-earn__points {
        grid-template-columns: repeat(3, 1fr);
    }

    .become-author-help__grid,
    .become-author-after__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.become-author-who__grid li,
.become-author-earn__points li,
.become-author-help__grid li,
.become-author-after__grid li {
    padding: 0.15rem 0;
}

.become-author-who__grid strong,
.become-author-earn__points strong,
.become-author-help__grid strong,
.become-author-after__grid strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
    color: var(--ba-ink);
}

.become-author-who__grid span,
.become-author-earn__points span,
.become-author-help__grid span,
.become-author-after__grid span {
    display: block;
    color: var(--ba-muted);
    line-height: 1.5;
    font-size: 0.95rem;
}

.become-author-help__cta,
.become-author-steps__cta,
.become-author-after__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 1.75rem 0 0 !important;
}

.become-author-steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.35rem;
}

@media (min-width: 860px) {
    .become-author-steps__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
    }
}

.become-author-steps__list > li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
}

.become-author-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 2px solid var(--ba-brand);
    color: var(--ba-brand);
    font-weight: 800;
}

.become-author-steps__list strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--ba-ink);
}

.become-author-steps__list p {
    margin: 0;
    font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
    .become-author-hero__img,
    .become-author-hero__brand,
    .become-author-hero__title,
    .become-author-hero__lead,
    .become-author-hero__cta-wrap {
        animation: none !important;
    }

    .become-author-hero__img {
        transform: none;
    }
}

.become-author-faq h2 {
    text-align: center;
}

.become-author-faq__lead {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 1.75rem !important;
}

.become-author-faq__list {
    max-width: 46rem;
    margin: 0 auto;
}

.become-author-faq__item {
    border-bottom: 1px solid #e5e7eb;
}

.become-author-faq__item:first-child {
    border-top: 1px solid #e5e7eb;
}

.become-author-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 0.85rem;
    margin: 0;
    list-style: none;
    cursor: pointer;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ba-ink, #0f172a);
    border-radius: 10px;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.become-author-faq__question::-webkit-details-marker {
    display: none;
}

.become-author-faq__question::after {
    content: "";
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 1.5px solid #cbd5e1;
    background:
        linear-gradient(#64748b, #64748b) center / 0.7rem 1.5px no-repeat,
        linear-gradient(#64748b, #64748b) center / 1.5px 0.7rem no-repeat;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.become-author-faq__item[open] > .become-author-faq__question {
    border: 1.5px solid var(--ba-brand, #2563eb);
    background: #fff;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.become-author-faq__item[open] > .become-author-faq__question::after {
    border-color: var(--ba-brand, #2563eb);
    background:
        linear-gradient(var(--ba-brand, #2563eb), var(--ba-brand, #2563eb)) center / 0.7rem 1.5px no-repeat;
    transform: rotate(0deg);
}

.become-author-faq__question:hover {
    color: var(--ba-brand, #2563eb);
}

.become-author-faq__question:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

.become-author-faq__answer {
    padding: 0.15rem 0.85rem 1.25rem;
    color: var(--ba-muted, #475569);
}

.become-author-faq__answer p {
    margin: 0 0 0.75rem;
    font-size: 0.98rem;
    line-height: 1.55;
}

.become-author-faq__answer p:last-child {
    margin-bottom: 0;
}

.become-author-faq__answer a {
    color: var(--ba-brand, #2563eb);
    font-weight: 600;
}

.become-author-faq__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 2rem 0 0 !important;
}

.become-author-collab h2 {
    text-align: center;
}

.become-author-collab__lead {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto 1.75rem !important;
}

.become-author-collab__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 720px) {
    .become-author-collab__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.become-author-collab__grid strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
    color: var(--ba-ink, #0f172a);
}

.become-author-collab__grid span {
    display: block;
    color: var(--ba-muted, #475569);
    line-height: 1.5;
    font-size: 0.95rem;
}

.become-author-collab__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 1.75rem 0 0 !important;
}

/* ——— Мобильная полировка (телефоны) ——— */
@media (max-width: 720px) {
    body {
        overflow-wrap: break-word;
    }

    main.page {
        overflow-x: hidden;
    }

    .main-container.container,
    .hero-cover__shell.container,
    .become-author-hero__shell.container,
    .footer .container {
        padding-left: max(14px, env(safe-area-inset-left, 0px));
        padding-right: max(14px, env(safe-area-inset-right, 0px));
    }

    .card {
        padding: 14px;
        border-radius: 12px;
        overflow: hidden;
    }

    .card h1 {
        font-size: clamp(1.35rem, 1.15rem + 1.5vw, 1.65rem);
    }

    .card h2 {
        font-size: clamp(1.15rem, 1.05rem + 0.8vw, 1.35rem);
    }

    .routes-explore-toolbar__filters {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .routes-explore-toolbar__field {
        width: 100%;
    }

    .route-map--explore,
    #routes-map {
        min-height: 260px;
        height: min(52vh, 420px);
    }

    .routes-map-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .routes-map-actions .btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        white-space: normal;
    }

    .become-author-hero {
        min-height: 0;
        align-items: flex-end;
    }

    .become-author-hero__shell {
        padding-top: clamp(3.25rem, 10vh, 4.5rem);
        padding-bottom: clamp(1.5rem, 4vh, 2.25rem);
    }

    .become-author-hero__stage {
        max-width: 100%;
    }

    .become-author-hero__title {
        font-size: clamp(1.35rem, 1.05rem + 3.2vw, 1.85rem);
        margin-bottom: 0.55rem;
    }

    .become-author-hero__img {
        object-position: 68% 22%;
        animation: none;
        transform: none;
    }

    .become-author-hero__cta,
    .become-author-help__cta .btn,
    .become-author-steps__cta .btn,
    .become-author-after__cta .btn,
    .become-author-faq__cta .btn,
    .become-author-collab__cta .btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        justify-content: center;
    }

    .become-author-band h2 {
        font-size: clamp(1.25rem, 1.1rem + 1vw, 1.55rem);
    }

    .cabinet-empty__actions {
        width: 100%;
        flex-direction: column;
    }

    .cabinet-empty__actions .btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .auth-form-shell {
        max-width: 100%;
    }

    .auth-card__actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .auth-card__actions .btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

@media (max-width: 400px) {
    .hero-cover__search {
        flex-wrap: wrap;
        border-radius: 12px;
        padding: 8px;
    }

    .hero-cover__search-input {
        flex: 1 1 100%;
        padding: 8px 4px 10px;
    }

    .hero-cover__search-btn {
        width: 100%;
        border-radius: 10px;
    }

    .home-routes-chip-list {
        gap: 6px;
    }

    .home-routes-chip {
        flex: 1 1 auto;
        min-width: calc(50% - 6px);
        justify-content: center;
    }

    .nav-auth-entry {
        padding: 8px;
    }
}

/* —— Author help center (WeGoTrip-style) —— */
.authors-help-shell {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    min-height: calc(100vh - 72px);
    align-items: start;
}

.authors-help-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow: auto;
    border-right: 1px solid var(--border, #e8ecf1);
    background: #fff;
    padding: 1.25rem 1rem 2rem;
}

.authors-help-sidebar__brand {
    margin: 0 0 1rem;
    font-weight: 700;
    font-size: 0.95rem;
}

.authors-help-sidebar__brand a {
    color: inherit;
    text-decoration: none;
}

.authors-help-sidebar__search {
    margin-bottom: 1.25rem;
}

.authors-help-sidebar__search-input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border, #d8dee8);
    border-radius: 8px;
    font: inherit;
}

.authors-help-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.authors-help-sidebar__link {
    display: block;
    padding: 0.35rem 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--text-muted, #5c6573);
}

.authors-help-sidebar__link:hover,
.authors-help-sidebar__link.is-active {
    color: var(--brand, #5b3fd6);
}

.authors-help-main {
    min-width: 0;
}

.authors-help-hero {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    color: #fff;
    text-align: center;
    background: linear-gradient(135deg, #2d1b69 0%, #4a3f9f 45%, #1e3a6e 100%);
    overflow: hidden;
}

.authors-help-hero__veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.12), transparent 55%);
    pointer-events: none;
}

.authors-help-hero__content {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.authors-help-hero__brand {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.authors-help-hero__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1.2;
}

.authors-help-hero__lead {
    margin: 0 0 1.5rem;
    opacity: 0.92;
    font-size: 1rem;
}

.authors-help-hero__search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    max-width: 560px;
    margin: 0 auto;
}

.authors-help-hero__search-input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 10px;
    font: inherit;
    color: #111;
}

.authors-help-hero__search-btn {
    flex: 0 0 auto;
    background: #111;
    color: #fff;
    border-color: #111;
}

.authors-help-promo {
    max-width: 640px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
    text-align: center;
}

.authors-help-promo__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
}

.authors-help-promo__text {
    margin: 0 0 1.25rem;
    color: var(--text-muted, #5c6573);
    line-height: 1.55;
}

.authors-help-promo__cta {
    background: var(--brand, #5b3fd6);
    border-color: var(--brand, #5b3fd6);
}

.authors-help-sections {
    padding: 1rem 1.5rem 3rem;
    max-width: 1100px;
    margin: 0 auto;
}

.authors-help-sections__title {
    text-align: center;
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
}

.authors-help-sections__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.authors-help-card {
    border: 1px solid var(--border, #e8ecf1);
    border-radius: 12px;
    padding: 1.25rem 1.25rem 1rem;
    background: #fff;
}

.authors-help-card__title {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

.authors-help-card__title a {
    color: inherit;
    text-decoration: none;
}

.authors-help-card__title a:hover {
    color: var(--brand, #5b3fd6);
}

.authors-help-card__list {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    font-size: 0.92rem;
    line-height: 1.45;
}

.authors-help-card__list a {
    color: var(--text, #1a1f2b);
    text-decoration: none;
}

.authors-help-card__list a:hover {
    text-decoration: underline;
}

.authors-help-card__more {
    margin: 0;
    font-weight: 600;
}

.authors-help-card__more a {
    color: var(--brand, #5b3fd6);
    text-decoration: none;
}

.authors-help-sections__empty {
    text-align: center;
    margin-top: 1rem;
}

.authors-help-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

.authors-help-page__crumb {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
}

.authors-help-page__crumb a {
    color: var(--brand, #5b3fd6);
}

.authors-help-page__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
}

.authors-help-page__lead {
    margin: 0 0 1.5rem;
    color: var(--text-muted, #5c6573);
    line-height: 1.55;
}

.authors-help-article-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border, #e8ecf1);
}

.authors-help-article-list__item {
    border-bottom: 1px solid var(--border, #e8ecf1);
}

.authors-help-article-list__link {
    display: block;
    padding: 1rem 0;
    text-decoration: none;
    color: inherit;
}

.authors-help-article-list__link:hover .authors-help-article-list__name {
    color: var(--brand, #5b3fd6);
}

.authors-help-article-list__name {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.authors-help-article-list__summary {
    display: block;
    font-size: 0.92rem;
    line-height: 1.45;
}

.authors-help-article__body.prose {
    line-height: 1.65;
}

.authors-help-article__body.prose p,
.authors-help-article__body.prose ul,
.authors-help-article__body.prose ol {
    margin: 0 0 1rem;
}

.authors-help-article__body.prose li {
    margin-bottom: 0.35rem;
}

.authors-help-article__foot {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #e8ecf1);
}

.authors-help-article__back {
    color: var(--brand, #5b3fd6);
    text-decoration: none;
    font-weight: 600;
}

.authors-help-page__head--solo .authors-help-page__title {
    margin-bottom: 0;
}

.authors-help-contact-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.authors-help-contact__title {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
}

.authors-help-contact__title a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.authors-help-contact__title a:hover {
    color: var(--brand, #5b3fd6);
}

.authors-help-contact__body.prose p:last-child {
    margin-bottom: 0;
}

.page:has(.authors-help-shell) > .main-container:empty {
    display: none;
}

@media (max-width: 900px) {
    .authors-help-shell {
        grid-template-columns: 1fr;
    }

    .authors-help-sidebar {
        position: static;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--border, #e8ecf1);
    }

    .authors-help-sidebar__nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }

    .authors-help-hero {
        min-height: 280px;
        padding: 2rem 1rem;
    }

    .authors-help-hero__search-btn {
        width: 100%;
    }
}