/* ============================================================
   СОВМЕСТНЫЕ ПОЕЗДКИ — Premium Green / Map Marker
   ============================================================ */

:root {
    color-scheme: dark;

    /*
     * Фирменная палитра эмблемы.
     */
    --brand-green: #129f4e;
    --brand-dark-green: #073310;
    --brand-middle-green: #1a5922;
    --brand-soft-green: #4ea471;
    --brand-pale-green: #95d0af;
    --brand-gray: #868686;
    --brand-white: #fefefe;
    --brand-pink: #c14b61;

    /*
     * Premium Green — тёмная тема.
     */
    --bg: #17191c;
    --surface: #292b2d;
    --surface-raised: #303235;
    --surface-hover: #383a3d;

    --accent: var(--brand-pale-green);
    --accent-hover: #b6dfc7;
    --accent-soft: rgba(149, 208, 175, 0.12);
    --accent-contrast: var(--brand-dark-green);

    --primary: var(--brand-green);
    --primary-hover: #0d843f;
    --primary-soft: rgba(18, 159, 78, 0.16);
    --primary-contrast: var(--brand-white);

    --text: #f8fbf9;
    --muted: #a7aaad;
    --border: #494c4f;

    --danger: var(--brand-pink);
    --danger-hover: #a63e52;
    --success: var(--brand-green);
    --warning: #c59d5b;
    --info: var(--brand-soft-green);

    --route-from: var(--brand-green);
    --route-to: var(--brand-pink);

    --header-bg:
        rgba(
            41,
            43,
            45,
            0.92
        );

    --overlay-bg:
        rgba(
            3,
            13,
            6,
            0.78
        );

    --radius: 18px;
    --radius-sm: 12px;
    --radius-xs: 9px;

    --shadow-sm:
        0
        9px
        28px
        rgba(0, 0, 0, 0.24);

    --shadow-md:
        0
        22px
        64px
        rgba(0, 0, 0, 0.46);

    --content-width: 1320px;
    --header-width: 1080px;
    --header-height: 78px;

    --app-header-height:
        var(--header-height);

    /*
     * Семантический контракт компонентов.
     * Страницы используют эти роли вместо собственной
     * палитры, поэтому тёмная и светлая темы совпадают
     * по логике состояний и контрасту.
     */
    --color-on-accent: var(--brand-dark-green);
    --color-on-primary: var(--brand-white);
    --color-on-danger: var(--brand-white);
    --control-bg: var(--surface-raised);
    --control-bg-hover: var(--surface-hover);
    --control-border: var(--border);
    --focus-ring:
        color-mix(
            in srgb,
            var(--accent) 52%,
            transparent
        );
    --status-success: var(--success);
    --status-warning: var(--warning);
    --status-danger: var(--danger);
    --status-info: var(--info);
    --page-gutter:
        clamp(
            14px,
            3vw,
            24px
        );
    --touch-target: 44px;
    --motion-fast: 0.16s ease;
    --motion-normal: 0.22s ease;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
}


html.light-theme {
    color-scheme: light;

    /*
     * Map Marker — светлая тема.
     */
    --bg: #e4e6e8;
    --surface: #ebecee;
    --surface-raised: #f4f5f6;
    --surface-hover: #dfe1e3;

    --accent: var(--brand-green);
    --accent-hover: #0d843f;
    --accent-soft: rgba(18, 159, 78, 0.12);
    --accent-contrast: var(--brand-white);

    --primary: var(--brand-green);
    --primary-hover: #0d843f;
    --primary-soft: rgba(18, 159, 78, 0.12);
    --primary-contrast: var(--brand-white);

    --text: var(--brand-dark-green);
    --muted: #69716c;
    --border: #bec1c4;

    --danger: var(--brand-pink);
    --danger-hover: #9f3c50;
    --success: var(--brand-green);
    --warning: #9a7548;
    --info: var(--brand-soft-green);

    --header-bg:
        rgba(
            235,
            236,
            238,
            0.92
        );

    --overlay-bg:
        rgba(
            55,
            58,
            61,
            0.46
        );

    --shadow-sm:
        0
        9px
        28px
        rgba(55, 58, 61, 0.10);

    --shadow-md:
        0
        22px
        58px
        rgba(55, 58, 61, 0.15);
}


html.light-theme .header,
html.light-theme .app-header {
    border-bottom-color:
        color-mix(
            in srgb,
            var(--brand-green) 14%,
            var(--border)
        );
}


html.light-theme .card,
html.light-theme .trip-card {
    border-color:
        color-mix(
            in srgb,
            var(--brand-green) 4%,
            var(--border)
        );
}


/*
 * В тёмной Premium Green поверхности получают
 * едва заметный зелёный объём без кислотного свечения.
 */
html:not(.light-theme) .card,
html:not(.light-theme) .trip-card {
    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--surface) 98%,
                transparent
            ),
            color-mix(
                in srgb,
                var(--surface-raised) 86%,
                var(--surface)
            )
        );
}


/* ============================================================
   Сброс и базовые элементы
   ============================================================ */

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

html {
    min-width: 320px;
    min-height: 100%;

    background: var(--bg);

    scroll-behavior: smooth;
    scrollbar-color:
        var(--border)
        transparent;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
blockquote,
figure {
    margin: 0;
}

body {
    min-width: 320px;
    min-height: 100dvh;

    color: var(--text);

    background: var(--bg);

    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;

    overflow-x: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input,
select,
textarea,
summary {
    -webkit-tap-highlight-color:
        transparent;
}

img,
svg,
video,
canvas {
    display: block;

    max-width: 100%;
}

button {
    color: inherit;
}

a {
    color: var(--accent);

    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--accent) 58%,
            transparent
        );

    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

::selection {
    color: var(--text);

    background:
        color-mix(
            in srgb,
            var(--accent) 36%,
            transparent
        );
}


/* ============================================================
   Доступность
   ============================================================ */

.skip-link {
    position: fixed;

    top: 10px;
    left: 10px;

    z-index: 10000;

    padding:
        10px
        14px;

    color: var(--primary-contrast);
    background: var(--primary);

    border-radius: var(--radius-xs);

    font-weight: 700;

    transform:
        translateY(-160%);

    transition:
        transform 0.16s ease;
}

.skip-link:focus {
    transform:
        translateY(0);
}

.sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip:
        rect(
            0,
            0,
            0,
            0
        )
        !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* ============================================================
   Каркас приложения
   ============================================================ */

.app-container {
    display: flex;

    width: 100%;
    min-height: 100dvh;

    flex-direction: column;
}

.app-main {
    width:
        min(
            100%,
            var(--content-width)
        );

    flex:
        1
        0
        auto;

    margin:
        0
        auto;

    padding:
        28px
        clamp(
            18px,
            3vw,
            42px
        )
        48px;

    outline: none;
}


/* ============================================================
   Специальный каркас страницы чата
   ============================================================ */

body.has-chat-page {
    height: 100dvh;
    min-height: 100dvh;

    padding-bottom: 0 !important;

    overflow: hidden;

    overscroll-behavior: none;
}

body.has-chat-page .app-container {
    height: 100dvh;
    min-height: 100dvh;

    overflow: hidden;
}

body.has-chat-page .app-main-chat {
    width: 100%;
    max-width: none;
    min-height: 0;

    flex:
        1
        1
        0;

    margin: 0;
    padding: 0 !important;

    overflow: hidden;
}

body.has-chat-page .chat-page {
    width: 100% !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    border-radius: 0 !important;

    overflow: hidden !important;
}

body.has-chat-page .chat-container {
    width: 100%;
    height: 100%;
    min-height: 0;

    overflow: hidden;
}


/* ============================================================
   Общая шапка
   ============================================================ */

.header,
.app-header {
    position: sticky;

    top: 0;

    z-index: 1200;

    width: 100%;

    background: var(--header-bg);

    box-shadow:
        0
        8px
        30px
        color-mix(
            in srgb,
            var(--brand-dark-green) 8%,
            transparent
        );

    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--border) 86%,
            transparent
        );

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}

.app-header-inner {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(
            52px,
            1fr
        )
        auto
        minmax(
            52px,
            1fr
        );

    align-items: center;

    width:
        min(
            calc(
                100%
                - 24px
            ),
            var(--header-width)
        );

    min-height:
        var(--header-height);

    margin:
        0
        auto;

    padding:
        8px
        0;

    gap: 12px;
}

.app-header:not(
    :has(.app-header-inner)
) {
    display: grid;

    grid-template-columns:
        minmax(
            52px,
            1fr
        )
        auto
        minmax(
            52px,
            1fr
        );

    align-items: center;

    min-height:
        var(--header-height);

    padding:
        8px
        max(
            12px,
            calc(
                (
                    100vw
                    - var(--header-width)
                )
                / 2
            )
        );

    gap: 12px;
}

.app-header-region,
.app-header-primary,
.app-header-actions {
    display: flex;

    min-width: 0;

    align-items: center;
}

.app-header-region--start {
    grid-column: 1;

    justify-self: start;
}

.app-header-region--center {
    grid-column: 2;

    justify-self: center;
}

.app-header-region--end {
    grid-column: 3;

    justify-self: end;
}

.app-header-primary {
    gap: 18px;
}

.app-header-actions {
    justify-content: flex-end;

    gap: 10px;
}

.app-brand {
    display: inline-flex;

    flex:
        0
        0
        auto;

    align-items: center;

    gap: 10px;

    color: var(--text);

    border-radius: var(--radius-sm);

    font-weight: 800;
    letter-spacing: -0.02em;

    text-decoration: none;
}

.app-brand:hover {
    color: var(--accent);

    text-decoration: none;
}

.app-brand-mark {
    display: inline-flex;

    width: 42px;
    height: 42px;

    flex:
        0
        0
        42px;

    align-items: center;
    justify-content: center;

    color: var(--brand-white);

    background:
        linear-gradient(
            145deg,
            var(--brand-green),
            var(--brand-middle-green)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 36%,
            transparent
        );

    border-radius: 14px;

    box-shadow:
        0
        10px
        28px
        rgba(18, 159, 78, 0.22);
}

.app-brand-text {
    font-size: 1rem;
}

.app-page-heading,
.page-header-heading,
.subscription-header-heading,
.tariffs-header-heading,
.help-header-heading,
.contacts-header-heading,
.profile-header-heading {
    min-width: 0;
}

.app-page-heading {
    padding-left: 18px;

    border-left:
        1px solid
        var(--border);
}

.app-page-heading h1,
.header h1,
.page-header-title,
.subscription-header-title,
.tariffs-header-title,
.help-header-title,
.contacts-header-title,
.profile-header-title {
    max-width: 100%;

    color: var(--text);

    font-size:
        clamp(
            1rem,
            2vw,
            1.2rem
        );

    font-weight: 760;
    line-height: 1.25;

    letter-spacing: -0.02em;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-page-heading p {
    margin-top: 3px;

    color: var(--muted);

    font-size: 0.75rem;
}

.page-header-heading,
.subscription-header-heading,
.tariffs-header-heading,
.help-header-heading,
.contacts-header-heading,
.profile-header-heading {
    grid-column: 2;

    justify-self: center;

    text-align: center;
}

.page-header-eyebrow,
.subscription-header-eyebrow,
.tariffs-header-eyebrow,
.help-header-eyebrow,
.contacts-header-eyebrow,
.profile-header-eyebrow {
    display: block;

    margin-bottom: 3px;

    color: var(--accent);

    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.page-header-back,
.subscription-header-back,
.tariffs-header-back,
.help-header-back,
.contacts-header-back,
.profile-header-back {
    display: inline-flex;

    grid-column: 1;

    justify-self: start;

    width: 44px;
    height: 44px;

    flex:
        0
        0
        44px;

    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--muted);
    background: var(--surface-raised);

    border:
        1px solid
        var(--border);

    border-radius: 13px;

    box-shadow: var(--shadow-sm);

    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;

    text-decoration: none;

    transition:
        color 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease;
}

.page-header-back:hover,
.subscription-header-back:hover,
.tariffs-header-back:hover,
.help-header-back:hover,
.contacts-header-back:hover,
.profile-header-back:hover {
    color: var(--text);
    background: var(--surface-hover);

    border-color:
        color-mix(
            in srgb,
            var(--accent) 36%,
            var(--border)
        );

    text-decoration: none;

    transform:
        translateX(-2px);
}

.desktop-nav {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 5px;
}

.desktop-nav > a {
    display: inline-flex;

    min-height: 42px;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        8px
        12px;

    color: var(--muted);

    border:
        1px solid
        transparent;

    border-radius: var(--radius-sm);

    font-size: 0.82rem;
    font-weight: 650;

    text-decoration: none;

    transition:
        color 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease;
}

.desktop-nav > a:hover {
    color: var(--text);
    background: var(--surface-hover);

    text-decoration: none;
}

.desktop-nav > a.active,
.desktop-nav > a[aria-current="page"] {
    color: var(--accent);
    background: var(--accent-soft);

    border-color:
        color-mix(
            in srgb,
            var(--accent) 26%,
            transparent
        );
}

.desktop-nav-icon {
    display: inline-flex;

    flex:
        0
        0
        auto;

    align-items: center;
    justify-content: center;
}

.app-header .notification-container {
    display: inline-flex;

    min-width: 44px;
    min-height: 44px;

    align-items: center;
    justify-content: flex-end;
}

.user-avatar-header {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 8px;
}

.user-avatar-header-link {
    display: inline-flex;

    min-width: 0;

    align-items: center;

    gap: 9px;

    padding:
        5px
        8px
        5px
        5px;

    color: var(--text);

    border:
        1px solid
        transparent;

    border-radius: 999px;

    text-decoration: none;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease;
}

.user-avatar-header-link:hover {
    background: var(--surface-hover);

    border-color: var(--border);

    text-decoration: none;
}

.user-avatar-header-media,
.user-avatar-header-image,
.user-avatar-header-initials {
    width: 36px;
    height: 36px;
}

.user-avatar-header-media {
    display: inline-flex;

    flex:
        0
        0
        36px;

    align-items: center;
    justify-content: center;
}

.user-avatar-header-image,
.user-avatar-header-initials {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 36%,
            transparent
        );

    border-radius: 50%;
}

.user-avatar-header-image {
    object-fit: cover;
}

.user-avatar-header-initials {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: var(--accent);
    background: var(--accent-soft);

    font-size: 0.76rem;
    font-weight: 800;
}

.user-avatar-header-name {
    max-width: 132px;

    color: var(--text);

    font-size: 0.78rem;
    font-weight: 650;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   Карточки
   ============================================================ */

.card,
.trip-card {
    background: var(--surface);

    border:
        1px solid
        var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);
}

.card {
    margin:
        14px
        0;

    padding:
        clamp(
            16px,
            2.4vw,
            22px
        );
}

.trip-card {
    margin-bottom: 12px;

    padding: 17px;

    transition:
        border-color 0.16s ease,
        transform 0.16s ease,
        box-shadow 0.16s ease;
}

.trip-card:hover {
    border-color:
        color-mix(
            in srgb,
            var(--accent) 46%,
            var(--border)
        );

    box-shadow:
        0
        12px
        32px
        color-mix(
            in srgb,
            var(--accent) 8%,
            transparent
        );

    transform:
        translateY(-1px);
}

.trip-card strong {
    color: var(--accent);
}


/*
 * Фирменная пара точек маршрута:
 * отправление — зелёное, назначение — розовое.
 */
.route-point-from,
.route-marker-from,
.map-marker-from,
.marker-from {
    color: var(--route-from);
}


.route-point-to,
.route-marker-to,
.map-marker-to,
.marker-to {
    color: var(--route-to);
}


/*
 * Мягкий фирменный разделитель для карточек
 * и активных интерактивных элементов.
 */
.card-accent,
.is-accented {
    border-color:
        color-mix(
            in srgb,
            var(--brand-green) 30%,
            var(--border)
        );
}


/* ============================================================
   Кнопки
   ============================================================ */

.btn {
    display: inline-flex;

    min-height: 44px;

    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        10px
        17px;

    border:
        1px solid
        transparent;

    border-radius: var(--radius-sm);

    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease,
        opacity 0.16s ease;
}

.btn:hover {
    text-decoration: none;

    transform:
        translateY(-1px);
}

.btn:active {
    transform:
        translateY(0);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.56;

    cursor: not-allowed;

    pointer-events: none;

    transform: none;
}

.btn-primary {
    color: var(--primary-contrast);
    background: var(--primary);

    border-color: var(--primary);

    box-shadow:
        0
        10px
        26px
        color-mix(
            in srgb,
            var(--primary) 22%,
            transparent
        );
}

.btn-primary:hover {
    background: var(--primary-hover);

    border-color: var(--primary-hover);
}

.btn-secondary {
    color: var(--text);
    background: var(--surface-raised);

    border-color: var(--border);
}

.btn-secondary:hover {
    background: var(--surface-hover);

    border-color:
        color-mix(
            in srgb,
            var(--muted) 44%,
            var(--border)
        );
}

.btn-danger {
    color: #ffffff;
    background: var(--danger);

    border-color: var(--danger);
}

.btn-danger:hover {
    background: var(--danger-hover);

    border-color: var(--danger-hover);
}

.btn-sm {
    min-height: 36px;

    padding:
        7px
        12px;

    border-radius: var(--radius-xs);

    font-size: 0.78rem;
}


/* ============================================================
   Формы
   ============================================================ */

.form-group {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 7px;

    margin-bottom: 16px;
}

label {
    display: block;

    color: var(--muted);

    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.4;
}

input,
select,
textarea {
    width: 100%;
    min-width: 0;

    padding:
        11px
        13px;

    color: var(--text);
    background: var(--surface-raised);

    border:
        1px solid
        var(--border);

    border-radius: var(--radius-sm);

    outline: none;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

input,
select {
    min-height: 46px;
}

textarea {
    min-height: 112px;

    line-height: 1.5;

    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color:
        color-mix(
            in srgb,
            var(--muted) 74%,
            transparent
        );
}

input:hover,
select:hover,
textarea:hover {
    border-color:
        color-mix(
            in srgb,
            var(--muted) 48%,
            var(--border)
        );
}

input:focus,
select:focus,
textarea:focus {
    background: var(--surface);

    border-color: var(--accent);

    box-shadow:
        0
        0
        0
        3px
        color-mix(
            in srgb,
            var(--accent) 20%,
            transparent
        );
}

input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.62;

    cursor: not-allowed;
}

.form-hint {
    color: var(--muted);

    font-size: 0.72rem;
    line-height: 1.45;
}


/* ============================================================
   Уведомления
   ============================================================ */

.notification-bell-btn {
    position: relative;

    display: inline-flex;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--muted);
    background: transparent;

    border:
        1px solid
        transparent;

    border-radius: 50%;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        color 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease,
        transform 0.12s ease;
}


.notification-bell-btn:hover,
.notification-bell-btn[aria-expanded="true"] {
    color: var(--accent);
    background: var(--surface-hover);

    border-color:
        color-mix(
            in srgb,
            var(--accent) 28%,
            var(--border)
        );
}


.notification-bell-btn:active {
    transform: scale(0.93);
}


.notification-bell-btn:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--accent) 62%,
            transparent
        );

    outline-offset: 2px;
}


.notification-btn-badge,
.badge {
    position: absolute;

    display: inline-flex;

    min-width: 18px;
    height: 18px;

    align-items: center;
    justify-content: center;

    padding:
        0
        5px;

    color: #ffffff;
    background: var(--danger);

    border:
        2px solid
        var(--bg);

    border-radius: 999px;

    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1;

    font-variant-numeric:
        tabular-nums;
}


.notification-btn-badge[hidden],
.badge[hidden] {
    display: none !important;
}


.notification-btn-badge {
    top: -2px;
    right: -2px;
}


.notify-panel {
    position: fixed;

    top:
        calc(
            var(--header-height)
            + 8px
        );

    right:
        clamp(
            12px,
            3vw,
            36px
        );

    z-index: 2200;

    display: flex;
    flex-direction: column;

    width:
        min(
            400px,
            calc(
                100vw
                - 24px
            )
        );

    max-height:
        min(
            560px,
            calc(
                100dvh
                - var(--header-height)
                - 24px
            )
        );

    background: var(--surface-raised);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 20%,
            var(--border)
        );

    border-radius: var(--radius);

    box-shadow: var(--shadow-md);

    overflow: hidden;

    animation:
        fade-in 0.16s ease;
}


.notify-panel::before {
    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent),
            color-mix(
                in srgb,
                var(--accent) 42%,
                var(--surface-raised)
            )
        );

    content: "";

    pointer-events: none;
}


.notify-panel-header {
    display: flex;

    min-height: 54px;

    flex:
        0
        0
        auto;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        11px
        11px
        9px
        15px;

    border-bottom:
        1px solid
        var(--border);
}


.notify-panel-title {
    margin: 0;

    color: var(--text);

    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.3;
}


.notify-panel-close {
    display: inline-flex;

    width: 38px;
    height: 38px;

    flex:
        0
        0
        38px;

    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--muted);
    background: transparent;

    border:
        1px solid
        transparent;

    border-radius: 50%;

    font: inherit;
    font-size: 1.35rem;
    line-height: 1;

    cursor: pointer;
}


.notify-panel-close:hover {
    color: var(--text);
    background: var(--surface-hover);

    border-color: var(--border);
}


.notify-panel-close:focus-visible,
.notify-panel-retry:focus-visible,
.notify-link:focus-visible,
.notify-delete-btn:focus-visible,
.notify-panel-all-link:focus-visible,
.notify-mark-all:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--accent) 58%,
            transparent
        );

    outline-offset: 2px;
}


.notify-panel-content {
    display: flex;
    flex-direction: column;

    min-height: 0;

    overflow: hidden;
}


.notify-panel-state {
    display: flex;

    min-height: 150px;

    align-items: center;
    justify-content: center;

    margin: 0;

    padding:
        28px
        20px;

    color: var(--muted);

    font-size: 0.84rem;
    line-height: 1.5;

    text-align: center;
}


.notify-panel-state--error {
    min-height: 110px;

    padding-bottom: 12px;

    color:
        color-mix(
            in srgb,
            var(--danger) 82%,
            var(--text)
        );
}


.notify-panel-retry {
    min-height: 42px;

    align-self: center;

    margin:
        0
        16px
        18px;

    padding:
        8px
        16px;

    color: var(--accent);
    background: var(--surface-hover);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 34%,
            var(--border)
        );

    border-radius: var(--radius-sm);

    font: inherit;
    font-weight: 700;

    cursor: pointer;
}


.notify-list {
    min-height: 0;
    max-height: 430px;

    padding: 8px;

    overflow-y: auto;

    overscroll-behavior: contain;
}


.notify-item {
    display: flex;
    flex-direction: column;

    gap: 6px;

    padding:
        12px
        13px;

    border:
        1px solid
        transparent;

    border-radius: 11px;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}


.notify-item + .notify-item {
    margin-top: 5px;
}


.notify-item:hover {
    background: var(--surface-hover);

    border-color:
        color-mix(
            in srgb,
            var(--accent) 20%,
            var(--border)
        );
}


.notify-msg {
    margin: 0;

    color: var(--text);

    font-size: 0.84rem;
    line-height: 1.45;

    white-space: pre-wrap;

    overflow-wrap: anywhere;
}


.notify-time {
    color: var(--muted);

    font-size: 0.68rem;
    line-height: 1.35;
}


.notify-item-actions {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-top: 3px;
}


.notify-link,
.notify-delete-btn,
.notify-panel-all-link,
.notify-mark-all {
    display: inline-flex;

    min-height: 38px;

    align-items: center;
    justify-content: center;

    padding:
        7px
        10px;

    border-radius: 9px;

    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;

    text-decoration: none;

    cursor: pointer;
}


.notify-link,
.notify-panel-all-link {
    color: var(--accent);
    background: transparent;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 24%,
            transparent
        );
}


.notify-link:hover,
.notify-panel-all-link:hover {
    background:
        color-mix(
            in srgb,
            var(--accent) 9%,
            var(--surface-hover)
        );

    border-color:
        color-mix(
            in srgb,
            var(--accent) 42%,
            transparent
        );
}


.notify-delete-btn,
.notify-mark-all {
    color:
        color-mix(
            in srgb,
            var(--danger) 84%,
            var(--text)
        );

    background:
        color-mix(
            in srgb,
            var(--danger) 8%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--danger) 32%,
            transparent
        );
}


.notify-delete-btn:hover,
.notify-mark-all:hover {
    background:
        color-mix(
            in srgb,
            var(--danger) 14%,
            var(--surface-hover)
        );

    border-color:
        color-mix(
            in srgb,
            var(--danger) 52%,
            transparent
        );
}


.notify-delete-btn:disabled,
.notify-mark-all:disabled {
    opacity: 0.58;

    cursor: wait;
}


.notify-panel-footer {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    flex:
        0
        0
        auto;

    gap: 8px;

    padding:
        9px;

    border-top:
        1px solid
        var(--border);
}


.notify-panel-footer > * {
    width: 100%;
    min-width: 0;
}


@media (max-width: 440px) {
    .notify-panel {
        top:
            calc(
                var(--header-height)
                + 6px
            );

        right: 8px;
        left: 8px;

        width: auto;

        max-height:
            calc(
                100dvh
                - var(--header-height)
                - 18px
            );
    }


    .notify-list {
        max-height:
            calc(
                100dvh
                - var(--header-height)
                - 145px
            );
    }
}


@media (max-width: 340px) {
    .notify-item-actions,
    .notify-panel-footer {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .notify-item-actions {
        display: grid;
    }


    .notify-item-actions > * {
        width: 100%;
    }
}


@media (prefers-reduced-motion: reduce) {
    .notification-bell-btn,
    .notify-panel,
    .notify-item {
        animation: none;
        transition: none;
    }
}


/* ============================================================
   Toast
   ============================================================ */

.toast-container {
    position: fixed;

    top:
        calc(
            var(--header-height)
            + 14px
        );

    right:
        clamp(
            12px,
            3vw,
            28px
        );

    z-index: 9999;

    display: flex;
    flex-direction: column;

    width:
        min(
            380px,
            calc(
                100vw
                - 24px
            )
        );

    gap: 9px;

    pointer-events: none;
}

.toast {
    width: 100%;

    padding:
        13px
        15px;

    color: #ffffff;

    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 22%,
            transparent
        );

    border-radius: var(--radius-sm);

    box-shadow: var(--shadow-md);

    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.45;

    overflow-wrap: anywhere;

    animation:
        toast-in 0.2s ease;

    pointer-events: auto;
}

.toast-success {
    background:
        color-mix(
            in srgb,
            var(--success) 88%,
            #172019
        );
}

.toast-error {
    background:
        color-mix(
            in srgb,
            var(--danger) 90%,
            #241417
        );
}

.toast-warning {
    color: #ffffff;

    background:
        color-mix(
            in srgb,
            var(--warning) 88%,
            #2b2110
        );
}


/* ============================================================
   PWA, карта и боковая панель
   ============================================================ */

.pwa-install-banner {
    position: fixed;

    right: 16px;
    bottom: 16px;

    z-index: 2500;

    width:
        min(
            420px,
            calc(
                100vw
                - 32px
            )
        );

    padding: 14px;

    color: var(--text);
    background: var(--surface-raised);

    border:
        1px solid
        var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow-md);
}

#map-modal {
    position: fixed;

    inset: 0;

    z-index: 1900;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 18px;

    background: var(--overlay-bg);

    backdrop-filter:
        blur(8px);
}

#map-modal.active {
    display: flex;
}

.map-container {
    width:
        min(
            100%,
            880px
        );

    max-height:
        calc(
            100dvh
            - 36px
        );

    padding: 18px;

    background: var(--surface);

    border:
        1px solid
        var(--border);

    border-radius: 22px;

    box-shadow: var(--shadow-md);

    overflow: auto;
}

.desktop-actions {
    display: block;
}

.menu-toggle {
    display: none;
}

.overlay {
    position: fixed;

    inset: 0;

    z-index: 1490;

    display: none;

    background: var(--overlay-bg);

    backdrop-filter:
        blur(4px);
}

.overlay.show {
    display: block;
}

.sidebar {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 1500;

    display: flex;
    flex-direction: column;

    width:
        min(
            320px,
            86vw
        );

    height: 100dvh;

    padding:
        20px
        16px
        calc(
            20px
            + env(
                safe-area-inset-bottom,
                0px
            )
        );

    background: var(--surface-raised);

    border-right:
        1px solid
        var(--border);

    box-shadow: var(--shadow-md);

    overflow-y: auto;

    transform:
        translateX(-105%);

    transition:
        transform 0.2s ease;
}

.sidebar.open {
    transform:
        translateX(0);
}

.sidebar-close-btn {
    width: 40px;
    height: 40px;

    align-self: flex-end;

    padding: 0;

    color: var(--muted);
    background: transparent;

    border:
        1px solid
        var(--border);

    border-radius: 50%;

    cursor: pointer;
}

.sidebar-actions {
    display: flex;
    flex-direction: column;

    gap: 9px;

    margin-top: 16px;
}

.sidebar-actions .btn {
    width: 100%;

    justify-content: flex-start;
}

.sidebar .btn .icon {
    flex:
        0
        0
        auto;

    font-size: 1.1em;
}


/* ============================================================
   Страница безопасности
   ============================================================ */

.security-page {
    display: flex;
    flex-direction: column;

    gap: 20px;
}

.security-section {
    padding:
        clamp(
            17px,
            2.5vw,
            22px
        );
}

.security-section h2 {
    color: var(--text);

    font-size: 1.05rem;
}

.security-description {
    margin-top: 6px;
    margin-bottom: 18px;

    color: var(--muted);

    font-size: 0.8rem;
    line-height: 1.5;
}

.security-section-header,
.session-item {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;
}

.sessions-list {
    display: flex;
    flex-direction: column;

    gap: 11px;
}

.session-item {
    padding: 14px;

    background:
        color-mix(
            in srgb,
            var(--surface-hover) 62%,
            transparent
        );

    border:
        1px solid
        var(--border);

    border-radius: var(--radius-sm);
}

.session-item-current {
    border-color:
        color-mix(
            in srgb,
            var(--accent) 70%,
            var(--border)
        );
}

.session-details {
    min-width: 0;
}

.session-title {
    margin-bottom: 5px;

    color: var(--text);

    font-weight: 700;
}

.session-meta {
    margin-top: 3px;

    color: var(--muted);

    font-size: 0.75rem;
    line-height: 1.45;

    overflow-wrap: anywhere;
}

.session-current-label {
    display: inline-flex;

    margin-left: 6px;

    color: var(--accent);

    font-size: 0.72rem;
}

.security-status {
    color: var(--muted);
}

.security-error,
.security-message-error {
    color: var(--danger);
}

.security-message {
    position: fixed;

    right: 18px;
    bottom: 88px;

    z-index: 2200;

    width:
        min(
            360px,
            calc(
                100vw
                - 36px
            )
        );

    padding:
        13px
        15px;

    background: var(--surface-raised);

    border:
        1px solid
        var(--border);

    border-radius: var(--radius-sm);

    box-shadow: var(--shadow-md);
}


/* ============================================================
   Совместимость и утилиты
   ============================================================ */

.trip-details-collapsed {
    display: none;
}

.trip-details-expanded {
    display: block;
}

.chat-message.own {
    align-self: flex-end;

    color: var(--primary-contrast);
    background: var(--primary);

    border-bottom-right-radius: 4px;
}

.chat-message.other {
    align-self: flex-start;

    color: var(--text);
    background: var(--surface-hover);

    border-bottom-left-radius: 4px;
}

.route-detail {
    display: flex;

    align-items: center;

    gap: 12px;
}

.route-point {
    min-width: 0;
}

.route-arrow {
    flex:
        0
        0
        auto;

    color: var(--accent);
}

.text-center {
    text-align: center;
}

.mt-2 {
    margin-top: 16px;
}

.mb-2 {
    margin-bottom: 16px;
}


/* ============================================================
   Анимации
   ============================================================ */

@keyframes toast-in {
    from {
        opacity: 0;

        transform:
            translateX(18px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;

        transform:
            translateY(-7px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ============================================================
   Планшеты
   ============================================================ */

@media (max-width: 980px) {
    .desktop-nav {
        display: none;
    }

    .app-page-heading {
        padding-left: 14px;
    }

    .desktop-actions {
        display: none !important;
    }
}


/* ============================================================
   Бургер
   ============================================================ */

@media (max-width: 900px) {
    .menu-toggle:not([hidden]),
    #profile-menu-toggle:not([hidden]) {
        display: inline-flex;
        visibility: visible;

        align-items: center;
        justify-content: center;

        pointer-events: auto;
    }
}

@media (min-width: 901px) {
    .menu-toggle,
    #profile-menu-toggle {
        display: none !important;
        visibility: hidden !important;

        pointer-events: none !important;
    }

    .overlay,
    .profile-sidebar-overlay {
        display: none !important;
    }

    .sidebar,
    .profile-sidebar {
        pointer-events: none !important;

        transform:
            translateX(-105%)
            !important;
    }
}


/* ============================================================
   Мобильные устройства
   ============================================================ */

@media (max-width: 700px) {
    :root {
        --header-height: 64px;

        --app-header-height:
            var(--header-height);
    }

    body[data-authenticated="true"]:not(
        .has-chat-page
    ) {
        padding-bottom:
            var(
                --bottom-nav-total-height,
                calc(
                    68px
                    + env(
                        safe-area-inset-bottom,
                        0px
                    )
                )
            );
    }

    .app-main:not(.app-main-chat) {
        padding:
            18px
            14px
            calc(
                30px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

    .app-header-inner,
    .app-header:not(
        :has(.app-header-inner)
    ) {
        grid-template-columns:
            44px
            minmax(
                0,
                1fr
            )
            44px;

        min-height:
            var(--header-height);

        gap: 6px;
    }

    .app-header-inner {
        width:
            calc(
                100%
                - 18px
            );

        padding:
            7px
            0;
    }

    .app-header:not(
        :has(.app-header-inner)
    ) {
        padding:
            7px
            9px;
    }

    .app-header-region--start {
        grid-column: 1;

        justify-self: start;

        min-width: 0;
    }

    .app-header-region--start:has(
        .app-header-primary
    ) {
        grid-column:
            1
            / 3;

        justify-self: stretch;
    }

    .app-header-region--center {
        display: flex;

        grid-column: 2;

        justify-self: center;

        min-width: 0;
    }

    .app-header-region--center:has(
        .desktop-nav
    ) {
        display: none;
    }

    .app-header-region--end {
        grid-column: 3;

        justify-self: end;

        min-width: 0;
    }

    .page-header-heading,
    .subscription-header-heading,
    .tariffs-header-heading,
    .help-header-heading,
    .contacts-header-heading,
    .profile-header-heading {
        width:
            min(
                100%,
                440px
            );

        text-align: center;
    }

    .app-header-primary {
        width: 100%;

        gap: 10px;
    }

    .app-brand-mark {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        border-radius: 13px;
    }

    .app-brand-text {
        display: none;
    }

    .app-page-heading {
        padding-left: 0;

        border-left: 0;
    }

    .app-page-heading h1,
    .header h1,
    .page-header-title,
    .subscription-header-title,
    .tariffs-header-title,
    .help-header-title,
    .contacts-header-title,
    .profile-header-title {
        font-size: 0.98rem;
    }

    .app-page-heading p {
        display: none;
    }

    .page-header-back,
    .subscription-header-back,
    .tariffs-header-back,
    .help-header-back,
    .contacts-header-back,
    .profile-header-back {
        width: 42px;
        height: 42px;

        flex-basis: 42px;

        border-radius: 12px;

        font-size: 1.1rem;
    }

    .page-header-eyebrow,
    .subscription-header-eyebrow,
    .tariffs-header-eyebrow,
    .help-header-eyebrow,
    .contacts-header-eyebrow,
    .profile-header-eyebrow {
        margin-bottom: 2px;

        font-size: 0.59rem;
        letter-spacing: 0.08em;
    }

    .app-header-actions {
        gap: 4px;
    }

    .app-header .notification-container {
        min-width: 42px;
        min-height: 42px;
    }

    .user-avatar-header {
        display: none !important;
    }

    .notification-bell-btn {
        width: 40px;
        height: 40px;
    }

    .card {
        margin:
            11px
            0;

        padding: 15px;
    }

    .trip-card {
        padding: 15px;
    }

    .btn {
        min-height: 46px;

        padding:
            11px
            16px;

        font-size: 0.9rem;
    }

    .btn-sm {
        min-height: 38px;

        padding:
            8px
            12px;

        font-size: 0.8rem;
    }

    input,
    select {
        min-height: 48px;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    .notify-panel {
        top:
            calc(
                var(--header-height)
                + 6px
            );

        right: 8px;
        left: 8px;

        width: auto;

        max-height:
            calc(
                100dvh
                - var(--header-height)
                - var(
                    --bottom-nav-total-height,
                    68px
                )
                - 20px
            );
    }

    .toast-container {
        top:
            calc(
                var(--header-height)
                + 8px
            );

        right: 10px;
        left: 10px;

        width: auto;
    }

    .toast {
        font-size: 0.78rem;
    }

    .pwa-install-banner {
        right: 10px;

        bottom:
            calc(
                var(
                    --bottom-nav-total-height,
                    68px
                )
                + 16px
            );

        left: 10px;

        width: auto;
    }

    #map-modal {
        align-items: flex-end;

        padding: 0;
    }

    .map-container {
        width: 100%;
        max-height: 92dvh;

        padding:
            16px
            14px
            calc(
                18px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        border-radius:
            22px
            22px
            0
            0;
    }

    .route-detail {
        flex-direction: column;
        align-items: stretch;

        gap: 8px;
    }

    .route-arrow {
        position: relative;

        min-height: 24px;

        color: transparent;

        text-align: center;
    }

    .route-arrow::after {
        position: absolute;

        inset: 0;

        display: flex;

        align-items: center;
        justify-content: center;

        color: var(--accent);

        content: "↓";
    }

    .security-section-header,
    .session-item {
        flex-direction: column;
    }

    .security-section-header button,
    .session-item button {
        width: 100%;
    }

    .security-message {
        right: 10px;

        bottom:
            calc(
                var(
                    --bottom-nav-total-height,
                    68px
                )
                + 14px
            );

        left: 10px;

        width: auto;
    }

    .sidebar {
        padding-bottom:
            calc(
                var(
                    --bottom-nav-total-height,
                    68px
                )
                + 24px
            );
    }

    /*
     * Чат резервирует точную высоту
     * нижней навигации.
     */
    body.has-chat-page .app-main-chat {
        padding-bottom:
            var(
                --bottom-nav-total-height,
                calc(
                    68px
                    + env(
                        safe-area-inset-bottom,
                        0px
                    )
                )
            )
            !important;
    }
}


/* ============================================================
   Точная геометрия чата
   ============================================================ */

@media (max-width: 768px) {
    body.has-chat-page .chat-info,
    body.has-chat-page .chat-overview {
        width:
            calc(
                100%
                - 4px
            )
            !important;

        margin:
            2px
            2px
            0
            !important;
    }

    body.has-chat-page .chat-input,
    body.has-chat-page .chat-input-area,
    body.has-chat-page .chat-compose {
        position: relative !important;

        inset: auto !important;

        width:
            calc(
                100%
                - 4px
            )
            !important;

        margin:
            0
            2px
            2px
            !important;

        transform: none !important;
    }

    body.has-chat-page .chat-messages {
        min-height: 0 !important;

        padding-bottom: 14px !important;
    }
}


/* ============================================================
   Маленькие телефоны
   ============================================================ */

@media (max-width: 390px) {
    .app-main:not(.app-main-chat) {
        padding-right: 10px;
        padding-left: 10px;
    }

    .app-header-inner {
        width:
            calc(
                100%
                - 12px
            );
    }

    .app-header:not(
        :has(.app-header-inner)
    ) {
        padding-right: 6px;
        padding-left: 6px;
    }

    .app-brand-mark {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

    .page-header-back,
    .subscription-header-back,
    .tariffs-header-back,
    .help-header-back,
    .contacts-header-back,
    .profile-header-back {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    .page-header-eyebrow,
    .subscription-header-eyebrow,
    .tariffs-header-eyebrow,
    .help-header-eyebrow,
    .contacts-header-eyebrow,
    .profile-header-eyebrow {
        display: none;
    }

    .app-page-heading h1,
    .header h1,
    .page-header-title,
    .subscription-header-title,
    .tariffs-header-title,
    .help-header-title,
    .contacts-header-title,
    .profile-header-title {
        font-size: 0.94rem;
    }

    .card,
    .trip-card {
        padding: 13px;
    }

    .btn {
        width: 100%;
    }
}


/* ============================================================
   Широкие экраны
   ============================================================ */

@media (min-width: 1500px) {
    :root {
        --content-width: 1440px;
        --header-width: 1160px;
    }
}


/* ============================================================
   Печать
   ============================================================ */

@media print {
    body {
        color: #000000;
        background: #ffffff;
    }

    .header,
    .app-header,
    .bottom-nav,
    .toast-container,
    .notify-panel,
    .pwa-install-banner,
    .menu-toggle,
    .sidebar,
    .overlay {
        display: none !important;
    }

    .app-main {
        width: 100%;

        padding: 0;
    }

    .card,
    .trip-card {
        background: #ffffff;

        border-color: #cccccc;

        box-shadow: none;
    }
}


/* ============================================================
   Уменьшение анимации
   ============================================================ */

@media (
    prefers-reduced-motion: reduce
) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms
            !important;

        animation-iteration-count:
            1
            !important;

        scroll-behavior:
            auto
            !important;

        transition-duration:
            0.01ms
            !important;
    }
}


/* ============================================================
   Глобальная мобильная шапка и выезжающее меню
   ============================================================ */

.app-header-mobile,
.app-mobile-menu,
.app-mobile-menu-overlay {
    display: none;
}


/* ============================================================
   Мобильная версия: в шапке только логотип и бургер
   ============================================================ */

@media (max-width: 700px) {
    :root {
        --mobile-header-height:
            calc(
                58px
                + env(
                    safe-area-inset-top,
                    0px
                )
            );
    }

    body.mobile-menu-open {
        overflow: hidden;
        touch-action: none;
    }

    .app-header {
        position: sticky;
        top: 0;

        height:
            var(--mobile-header-height);

        min-height:
            var(--mobile-header-height);

        padding-top:
            env(
                safe-area-inset-top,
                0px
            );

        background:
            color-mix(
                in srgb,
                var(--surface) 94%,
                transparent
            );

        border-bottom:
            1px solid
            var(--border);

        box-shadow:
            0
            10px
            28px
            rgba(
                0,
                0,
                0,
                0.18
            );

        transform:
            translateY(0);

        transition:
            transform 0.24s ease,
            box-shadow 0.18s ease;

        will-change:
            transform;
    }

    html.light-theme .app-header {
        background:
            color-mix(
                in srgb,
                var(--surface-raised) 94%,
                transparent
            );

        box-shadow:
            0
            10px
            28px
            rgba(
                42,
                45,
                48,
                0.12
            );
    }

    .app-header.app-header--hidden {
        transform:
            translateY(
                calc(
                    -100%
                    - 2px
                )
            );
    }

    body.mobile-menu-open
    .app-header {
        transform:
            translateY(0);
    }

    .app-header-desktop {
        display: none !important;
    }

    .app-header-mobile {
        display: flex;

        width: 100%;
        height: 58px;

        align-items: center;
        justify-content: space-between;

        padding:
            7px
            12px;

        box-sizing: border-box;
    }

    .app-mobile-brand,
    .app-mobile-menu-brand {
        color: var(--text);
        text-decoration: none;
    }

    .app-mobile-brand {
        display: inline-flex;

        width: 44px;
        height: 44px;

        align-items: center;
        justify-content: center;

        border-radius: 15px;
    }

    .app-mobile-brand:hover,
    .app-mobile-menu-brand:hover {
        text-decoration: none;
    }

    .app-mobile-brand-mark,
    .app-mobile-menu-brand-mark {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        color: var(--brand-white);

        background:
            linear-gradient(
                145deg,
                var(--brand-green),
                color-mix(
                    in srgb,
                    var(--brand-middle-green) 72%,
                    var(--brand-gray)
                )
            );

        border:
            1px solid
            color-mix(
                in srgb,
                var(--brand-green) 34%,
                var(--border)
            );

        box-shadow:
            0
            9px
            22px
            rgba(
                18,
                159,
                78,
                0.20
            );
    }

    .app-mobile-brand-mark {
        width: 42px;
        height: 42px;

        border-radius: 14px;
    }

    .app-mobile-menu-toggle,
    .app-mobile-menu-close {
        display: inline-flex;

        width: 44px;
        height: 44px;

        flex:
            0
            0
            44px;

        align-items: center;
        justify-content: center;

        padding: 0;

        color: var(--text);
        background: var(--surface-hover);

        border:
            1px solid
            var(--border);

        border-radius: 14px;

        box-shadow: var(--shadow-sm);

        cursor: pointer;

        -webkit-tap-highlight-color:
            transparent;
    }

    .app-mobile-menu-toggle {
        flex-direction: column;
        gap: 5px;
    }

    .app-mobile-menu-toggle > span {
        display: block;

        width: 19px;
        height: 2px;

        background: currentColor;

        border-radius: 999px;

        transition:
            transform 0.18s ease,
            opacity 0.18s ease;
    }

    .app-mobile-menu-toggle[aria-expanded="true"]
    > span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }

    .app-mobile-menu-toggle[aria-expanded="true"]
    > span:nth-child(2) {
        opacity: 0;
    }

    .app-mobile-menu-toggle[aria-expanded="true"]
    > span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }

    .app-mobile-menu-overlay {
        position: fixed;
        z-index: 1450;

        inset: 0;

        display: block;

        padding: 0;

        background:
            rgba(
                0,
                0,
                0,
                0.52
            );

        border: 0;

        opacity: 0;
        visibility: hidden;

        cursor: default;

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease;

        backdrop-filter:
            blur(3px);

        -webkit-backdrop-filter:
            blur(3px);
    }

    .app-mobile-menu-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    .app-mobile-menu {
        position: fixed;
        z-index: 1500;

        top: 0;
        right: 0;
        bottom: 0;

        display: flex;

        width:
            min(
                88vw,
                360px
            );

        min-width: 0;

        flex-direction: column;

        padding:
            calc(
                12px
                + env(
                    safe-area-inset-top,
                    0px
                )
            )
            12px
            calc(
                14px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        background:
            var(--surface-raised);

        border-left:
            1px solid
            var(--border);

        box-shadow:
            -18px
            0
            54px
            rgba(
                0,
                0,
                0,
                0.34
            );

        overflow-y: auto;
        overscroll-behavior: contain;

        transform:
            translateX(105%);

        visibility: hidden;

        transition:
            transform 0.24s ease,
            visibility 0.24s ease;
    }

    html.light-theme
    .app-mobile-menu {
        box-shadow:
            -18px
            0
            54px
            rgba(
                42,
                45,
                48,
                0.18
            );
    }

    .app-mobile-menu.is-open {
        transform:
            translateX(0);

        visibility: visible;
    }

    .app-mobile-menu-head {
        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 12px;

        padding-bottom: 13px;

        border-bottom:
            1px solid
            var(--border);
    }

    .app-mobile-menu-brand {
        display: grid;

        grid-template-columns:
            auto
            minmax(
                0,
                1fr
            );

        align-items: center;

        gap: 10px;

        min-width: 0;
    }

    .app-mobile-menu-brand-mark {
        width: 44px;
        height: 44px;

        border-radius: 15px;
    }

    .app-mobile-menu-brand > span:last-child {
        min-width: 0;
    }

    .app-mobile-menu-brand strong,
    .app-mobile-menu-brand small {
        display: block;

        min-width: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-mobile-menu-brand strong {
        color: var(--text);

        font-size: 0.9rem;
        line-height: 1.3;
    }

    .app-mobile-menu-brand small {
        margin-top: 2px;

        color: var(--muted);

        font-size: 0.67rem;
        line-height: 1.3;
    }

    .app-mobile-menu-close {
        font-size: 1.45rem;
        font-weight: 400;
        line-height: 1;
    }

    .app-mobile-menu-user {
        display: grid;

        grid-template-columns:
            auto
            minmax(
                0,
                1fr
            );

        align-items: center;

        gap: 11px;

        margin-top: 13px;

        padding: 12px;

        background:
            color-mix(
                in srgb,
                var(--surface-hover) 90%,
                var(--brand-gray)
            );

        border:
            1px solid
            var(--border);

        border-radius: 16px;
    }

    .app-mobile-menu-user[hidden] {
        display: none !important;
    }

    .app-mobile-menu-avatar {
        display: inline-flex;

        width: 44px;
        height: 44px;

        align-items: center;
        justify-content: center;

        overflow: hidden;

        color: var(--brand-white);

        background:
            linear-gradient(
                145deg,
                color-mix(
                    in srgb,
                    var(--brand-green) 68%,
                    var(--brand-gray)
                ),
                color-mix(
                    in srgb,
                    var(--brand-pink) 64%,
                    var(--brand-gray)
                )
            );

        border-radius: 14px;

        font-size: 0.82rem;
        font-weight: 850;
        line-height: 1;
    }

    .app-mobile-menu-avatar img,
    .app-mobile-menu-avatar > span {
        width: 100%;
        height: 100%;
    }

    .app-mobile-menu-avatar img {
        object-fit: cover;
    }

    .app-mobile-menu-avatar > span {
        display: inline-flex;

        align-items: center;
        justify-content: center;
    }

    .app-mobile-menu-user-copy {
        min-width: 0;
    }

    .app-mobile-menu-user-copy small,
    .app-mobile-menu-user-copy strong {
        display: block;

        min-width: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-mobile-menu-user-copy small {
        color: var(--muted);

        font-size: 0.64rem;
        line-height: 1.3;
    }

    .app-mobile-menu-user-copy strong {
        margin-top: 3px;

        color: var(--text);

        font-size: 0.82rem;
        line-height: 1.35;
    }

    .app-mobile-menu-nav {
        display: flex;

        flex-direction: column;

        gap: 5px;

        margin-top: 13px;
    }

    .app-mobile-menu-nav > a,
    .app-mobile-menu-nav > button {
        display: grid;

        grid-template-columns:
            42px
            minmax(
                0,
                1fr
            );

        align-items: center;

        gap: 10px;

        min-height: 58px;

        padding:
            8px
            10px;

        color: var(--muted);

        background: transparent;

        border:
            1px solid
            transparent;

        border-radius: 15px;

        text-decoration: none;
    }

    .app-mobile-menu-nav > a:hover,
    .app-mobile-menu-nav > button:hover {
        color: var(--text);
        background: var(--surface-hover);

        text-decoration: none;
    }

    .app-mobile-menu-nav > a.active,
    .app-mobile-menu-nav > a[aria-current="page"],
    .app-mobile-menu-nav > button.active,
    .app-mobile-menu-nav > button[aria-current="page"] {
        color: var(--text);

        background:
            color-mix(
                in srgb,
                var(--brand-green) 7%,
                var(--surface-hover)
            );

        border-color:
            color-mix(
                in srgb,
                var(--brand-green) 18%,
                var(--border)
            );
    }

    .app-mobile-menu-nav > a
    > span:first-child,
    .app-mobile-menu-nav > button
    > span:first-child {
        display: inline-flex;

        width: 40px;
        height: 40px;

        align-items: center;
        justify-content: center;

        color:
            color-mix(
                in srgb,
                var(--brand-pale-green) 52%,
                var(--brand-gray)
            );

        background:
            var(--surface);

        border:
            1px solid
            var(--border);

        border-radius: 13px;

        font-size: 1rem;
        font-weight: 800;
        line-height: 1;
    }

    .app-mobile-menu-nav > a.active
    > span:first-child,
    .app-mobile-menu-nav > a[aria-current="page"]
    > span:first-child,
    .app-mobile-menu-nav > button.active
    > span:first-child,
    .app-mobile-menu-nav > button[aria-current="page"]
    > span:first-child {
        color: var(--brand-white);

        background:
            color-mix(
                in srgb,
                var(--brand-green) 68%,
                var(--brand-gray)
            );

        border-color: transparent;
    }

    .app-mobile-menu-nav > a
    > span:last-child,
    .app-mobile-menu-nav > button
    > span:last-child {
        min-width: 0;
    }

    .app-mobile-menu-nav strong,
    .app-mobile-menu-nav small {
        display: block;

        min-width: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-mobile-menu-nav strong {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .app-mobile-menu-nav small {
        margin-top: 2px;

        color: var(--muted);

        font-size: 0.64rem;
        line-height: 1.3;
    }

    .app-mobile-menu-nav > button {
        width: 100%;

        font: inherit;
        text-align: left;

        cursor: pointer;
    }

    .app-mobile-menu-nav
    .app-mobile-menu-link--danger {
        color:
            color-mix(
                in srgb,
                var(--danger) 78%,
                var(--muted)
            );
    }

    .app-mobile-menu-nav
    .app-mobile-menu-link--danger:hover,
    .app-mobile-menu-nav
    .app-mobile-menu-link--danger.active,
    .app-mobile-menu-nav
    .app-mobile-menu-link--danger[aria-current="page"] {
        color:
            color-mix(
                in srgb,
                var(--danger) 88%,
                var(--text)
            );

        background:
            color-mix(
                in srgb,
                var(--danger) 8%,
                var(--surface-hover)
            );

        border-color:
            color-mix(
                in srgb,
                var(--danger) 28%,
                var(--border)
            );
    }

    .app-mobile-menu-nav
    .app-mobile-menu-link--danger
    > span:first-child {
        color: var(--danger);

        background:
            color-mix(
                in srgb,
                var(--danger) 9%,
                var(--surface)
            );

        border-color:
            color-mix(
                in srgb,
                var(--danger) 26%,
                var(--border)
            );
    }

    .app-mobile-menu-nav
    .app-mobile-menu-link--danger.active
    > span:first-child,
    .app-mobile-menu-nav
    .app-mobile-menu-link--danger[aria-current="page"]
    > span:first-child {
        color: #ffffff;
        background: var(--danger);
        border-color: transparent;
    }


    .app-mobile-menu-footer {
        display: grid;

        gap: 8px;

        margin-top: auto;

        padding-top: 14px;

        border-top:
            1px solid
            var(--border);
    }

    .app-mobile-menu-footer .btn {
        width: 100%;
        min-height: 46px;
    }

    .app-mobile-menu-toggle:focus-visible,
    .app-mobile-menu-close:focus-visible,
    .app-mobile-brand:focus-visible,
    .app-mobile-menu-nav > a:focus-visible,
    .app-mobile-menu-nav > button:focus-visible {
        outline:
            3px solid
            color-mix(
                in srgb,
                var(--brand-green) 42%,
                transparent
            );

        outline-offset: 2px;
    }
}


/* ============================================================
   Уменьшение анимации мобильной шапки
   ============================================================ */

@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {
    .app-header,
    .app-mobile-menu,
    .app-mobile-menu-overlay,
    .app-mobile-menu-toggle > span {
        transition: none;
    }
}


/* ============================================================
   Окно установки PWA
   ============================================================ */

.pwa-install-dialog[hidden] {
    display: none !important;
}

.pwa-install-dialog {
    position: fixed;

    right: 18px;
    bottom:
        calc(
            18px
            + env(
                safe-area-inset-bottom,
                0px
            )
        );

    z-index: 2600;

    display: grid;

    width:
        min(
            430px,
            calc(
                100vw
                - 36px
            )
        );

    grid-template-columns:
        58px
        minmax(
            0,
            1fr
        );

    gap: 13px;

    padding:
        17px
        18px
        16px;

    color: var(--text);

    background:
        color-mix(
            in srgb,
            var(--surface-raised) 94%,
            transparent
        );

    border:
        1px solid
        var(--border);

    border-radius: 20px;

    box-shadow:
        0 22px 65px
        rgba(
            0,
            0,
            0,
            0.34
        );

    backdrop-filter:
        blur(18px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(
            calc(
                100%
                + 32px
            )
        );

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
}

.pwa-install-dialog.is-visible {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}

.pwa-install-close {
    position: absolute;

    top: 8px;
    right: 9px;

    display: inline-flex;

    width: 32px;
    height: 32px;

    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--text-muted);
    background: transparent;

    border: 0;
    border-radius: 50%;

    cursor: pointer;

    font-size: 1.45rem;
    line-height: 1;
}

.pwa-install-close:hover {
    color: var(--text);

    background:
        color-mix(
            in srgb,
            var(--text) 9%,
            transparent
        );
}

.pwa-install-icon {
    display: flex;

    width: 58px;
    height: 58px;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 15px;

    box-shadow:
        0 9px 24px
        rgba(
            0,
            0,
            0,
            0.22
        );
}

.pwa-install-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.pwa-install-content {
    min-width: 0;

    padding-right: 20px;
}

.pwa-install-eyebrow {
    display: block;

    margin-bottom: 3px;

    color: var(--text-muted);

    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.25;

    text-transform: uppercase;
}

.pwa-install-content h2 {
    margin: 0;

    font-size: 1.08rem;
    line-height: 1.25;
}

.pwa-install-content > p {
    margin:
        6px
        0
        0;

    color: var(--text-muted);

    font-size: 0.83rem;
    line-height: 1.45;
}

.pwa-install-instructions {
    display: grid;

    gap: 4px;

    margin:
        9px
        0
        0;

    padding-left: 20px;

    color: var(--text-muted);

    font-size: 0.78rem;
    line-height: 1.4;
}

.pwa-install-actions {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 7px;

    margin-top: 13px;
}

.pwa-install-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 40px;

    padding:
        8px
        11px;

    font-size: 0.78rem;
}


/* ============================================================
   Мобильная версия окна установки
   ============================================================ */

@media screen and (max-width: 700px) {
    .pwa-install-dialog {
        right: 10px;

        bottom:
            calc(
                var(
                    --bottom-nav-total-height,
                    68px
                )
                + 12px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        left: 10px;

        width: auto;

        grid-template-columns:
            48px
            minmax(
                0,
                1fr
            );

        gap: 11px;

        padding:
            14px
            14px
            13px;

        border-radius: 17px;
    }

    .pwa-install-icon {
        width: 48px;
        height: 48px;

        border-radius: 13px;
    }

    .pwa-install-content {
        padding-right: 16px;
    }

    .pwa-install-eyebrow {
        font-size: 0.59rem;
    }

    .pwa-install-content h2 {
        font-size: 0.98rem;
    }

    .pwa-install-content > p {
        margin-top: 4px;

        font-size: 0.74rem;
        line-height: 1.4;
    }

    .pwa-install-instructions {
        gap: 3px;

        margin-top: 7px;

        padding-left: 18px;

        font-size: 0.71rem;
    }

    .pwa-install-actions {
        gap: 6px;

        margin-top: 10px;
    }

    .pwa-install-actions .btn {
        min-height: 37px;

        padding:
            7px
            8px;

        font-size: 0.71rem;
    }
}


@media screen and (max-width: 360px) {
    .pwa-install-dialog {
        grid-template-columns:
            42px
            minmax(
                0,
                1fr
            );

        padding:
            12px
            11px;
    }

    .pwa-install-icon {
        width: 42px;
        height: 42px;
    }

    .pwa-install-actions {
        grid-template-columns:
            minmax(
                0,
                1fr
            );
    }
}