/*
 * ============================================================
 *  AviaTrack — десктопный редизайн (май 2026, v3)
 *  Сайдбар (290px) + топбар + тулбар + светлые карточки.
 *  Активен только при ширине >= 901px.
 *  Мобильная версия использует прежний layout (.fs-hero + .fs-mtabs).
 * ============================================================
 */

:root {
    --at-blue:      oklch(52% 0.22 255);
    --at-blue-dk:   oklch(40% 0.22 255);
    --at-blue-lt:   oklch(95% 0.06 255);
    --at-blue-xlt:  oklch(98% 0.025 255);
    --at-amber:     oklch(72% 0.18 55);
    --at-amber-lt:  oklch(96% 0.05 70);
    --at-green:     oklch(58% 0.18 155);
    --at-green-lt:  oklch(95% 0.05 155);
    --at-red:       oklch(56% 0.2 20);
    --at-red-lt:    oklch(97% 0.03 20);
    --at-bg:        oklch(97% 0.005 250);
    --at-surface:   #ffffff;
    --at-text:      oklch(16% 0.015 250);
    --at-text-md:   oklch(38% 0.01 250);
    --at-text-lt:   oklch(58% 0.008 250);
    --at-border:    oklch(91% 0.005 250);
    --at-border-md: oklch(85% 0.007 250);
    --at-tg:        oklch(45% 0.22 230);
    --at-tg-bg:     oklch(97% 0.04 230);
    --at-tg-border: oklch(88% 0.07 230);

    --at-radius-sm: 8px;
    --at-radius-md: 9px;
    --at-radius-lg: 14px;
}

/* ─── DESKTOP-ONLY (>900px) ───────────────────────────────── */
@media (min-width: 901px) {

    /* Скрываем старый верхний навбар и мобильные вкладки на десктопе */
    .fs-nav,
    .fs-mtabs { display: none !important; }

    body {
        background: var(--at-bg) !important;
        margin: 0;
    }

    /* Контейнер на всю высоту экрана: сайдбар + основная область */
    .at-layout {
        display: flex;
        min-height: 100vh;
        align-items: stretch;
    }

    /* ─── Сайдбар ────────────────────────────────────────── */
    .at-sidebar {
        width: 290px;
        flex-shrink: 0;
        background: var(--at-surface);
        border-right: 1px solid var(--at-border);
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }

    .at-brand {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 20px 22px 16px;
        border-bottom: 1px solid var(--at-border);
        text-decoration: none;
        color: inherit;
    }

    .at-brand-logo {
        width: 30px;
        height: 30px;
        background: linear-gradient(135deg, var(--at-blue), oklch(55% 0.22 280));
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        flex-shrink: 0;
    }

    .at-brand-name {
        font-weight: 800;
        font-size: 17px;
        letter-spacing: -0.02em;
        color: var(--at-text);
        line-height: 1.1;
        /* Без flex-gap, иначе появляется пустое место между «Fly» и «Spy» */
    }

    .at-brand-accent { color: var(--at-blue); }

    .at-brand-beta {
        background: var(--at-blue-lt);
        color: var(--at-blue);
        font-size: 10px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 4px;
        letter-spacing: 0.04em;
        margin-left: 6px;
        vertical-align: middle;
    }

    .at-brand-sub {
        font-size: 11px;
        color: var(--at-text-lt);
        margin-top: 2px;
    }

    .at-tabs {
        display: flex;
        padding: 10px 12px 0;
        gap: 4px;
    }

    .at-tab {
        flex: 1;
        padding: 8px 4px;
        border: none;
        border-radius: var(--at-radius-sm);
        background: transparent;
        color: var(--at-text-lt);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        transition: all 0.15s;
    }

    .at-tab:hover { color: var(--at-text-md); }

    .at-tab.is-active {
        background: var(--at-blue-lt);
        color: var(--at-blue);
    }

    .at-pane-wrap {
        flex: 1;
        padding: 16px 18px;
    }

    .at-pane { display: none; }
    .at-pane.is-active { display: block; }

    .at-pane-section-title {
        font-size: 11px;
        font-weight: 700;
        color: var(--at-text-lt);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin: 0 0 10px;
    }

    /* Настройки */
    .at-setting-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
    }

    .at-setting-row + .at-setting-row {
        border-top: 1px dashed var(--at-border);
        padding-top: 10px;
        margin-top: 4px;
    }

    .at-setting-label {
        font-size: 13px;
        color: var(--at-text-md);
    }

    .at-setting-pill {
        font-size: 11px;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 6px;
    }

    .at-setting-pill--ok {
        background: var(--at-green-lt);
        color: var(--at-green);
    }

    .at-setting-pill--info {
        background: var(--at-blue-lt);
        color: var(--at-blue);
    }

    .at-setting-pill--off {
        background: var(--at-bg);
        color: var(--at-text-lt);
    }

    .at-setting-select {
        border: 1px solid var(--at-border);
        border-radius: var(--at-radius-sm);
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 600;
        background: var(--at-surface);
        font-family: inherit;
        cursor: pointer;
        color: var(--at-text);
    }

    /* Статистика */
    .at-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .at-stat-card {
        background: var(--at-bg);
        border-radius: 10px;
        padding: 10px 12px;
    }

    .at-stat-value {
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--at-text);
        line-height: 1;
    }

    .at-stat-label {
        font-size: 11px;
        color: var(--at-text-lt);
        margin-top: 3px;
    }

    /* Подвал сайдбара (хост для #user-dropdown / #login-btn) */
    .at-sidebar-foot {
        padding: 14px 18px;
        border-top: 1px solid var(--at-border);
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Кнопка «Войти» (#login-btn) внутри сайдбар-фута */
    .at-sidebar-foot #login-btn,
    .at-sidebar-foot #login-btn.fs-btn {
        width: 100%;
        background: var(--at-bg) !important;
        border: 1px solid var(--at-border) !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        color: var(--at-text) !important;
        font-family: inherit;
        font-size: 12px !important;
        font-weight: 600 !important;
        cursor: pointer;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;
        height: auto !important;
    }

    .at-sidebar-foot #login-btn:hover {
        border-color: var(--at-blue) !important;
        color: var(--at-blue) !important;
        background: var(--at-blue-lt) !important;
    }

    /* Дропдаун пользователя в сайдбар-футе */
    .at-sidebar-foot #user-dropdown { position: relative; width: 100%; }

    .at-sidebar-foot #user-dropdown-btn,
    .at-sidebar-foot #user-dropdown-btn.fs-btn {
        width: 100%;
        background: var(--at-bg) !important;
        border: 1px solid var(--at-border) !important;
        border-radius: 10px !important;
        padding: 8px 12px !important;
        color: var(--at-text) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        height: auto !important;
    }

    .at-sidebar-foot #user-dropdown-btn:hover {
        border-color: var(--at-blue) !important;
        color: var(--at-blue) !important;
        background: var(--at-blue-lt) !important;
    }

    .at-sidebar-foot #user-avatar { width: 22px !important; height: 22px !important; }

    /* Меню над кнопкой (сайдбар-фут внизу — открываем вверх) */
    .at-sidebar-foot .user-dropdown-menu {
        right: 0;
        left: 0;
        bottom: calc(100% + 6px);
        top: auto;
        z-index: 200;
    }

    /* ─── Основная область (топбар + тулбар + контент) ───── */
    .at-main {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .at-topbar {
        background: var(--at-surface);
        border-bottom: 1px solid var(--at-border);
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        flex-shrink: 0;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .at-topbar-left {
        font-size: 14px;
        color: var(--at-text-lt);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .at-topbar-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .at-topbar-status {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 13px;
        color: var(--at-text-lt);
    }

    .at-topbar-status::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--at-green);
        box-shadow: 0 0 5px var(--at-green);
    }

    .at-topbar-divider {
        width: 1px;
        height: 16px;
        background: var(--at-border);
    }

    .at-topbar-btn {
        background: none;
        border: 1px solid var(--at-border);
        border-radius: 8px;
        padding: 6px 13px;
        font-size: 13px;
        font-weight: 600;
        color: var(--at-text-md);
        cursor: pointer;
        font-family: inherit;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: all 0.15s;
    }

    .at-topbar-btn:hover {
        border-color: var(--at-blue);
        color: var(--at-blue);
        background: var(--at-blue-lt);
    }

    /* Перенесённые в at-topbar контролы аутентификации (#user-dropdown / #login-btn).
       auth.js сам тоггл.ит .d-none — поэтому после входа кнопка «Войти» прячется,
       а появляется кнопка профиля с дропдауном. */
    .at-topbar-right #user-dropdown { position: relative; }

    .at-topbar-right #user-dropdown:not(.d-none),
    .at-topbar-right #login-btn:not(.d-none) {
        display: inline-flex;
    }

    .at-topbar-right #user-dropdown-btn.fs-btn,
    .at-topbar-right #login-btn.fs-btn {
        padding: 5px 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        border: 1px solid var(--at-border) !important;
        background: var(--at-surface) !important;
        color: var(--at-text-md) !important;
        height: auto !important;
        line-height: 1.2 !important;
    }

    .at-topbar-right #user-dropdown-btn.fs-btn:hover,
    .at-topbar-right #login-btn.fs-btn:hover {
        border-color: var(--at-blue) !important;
        color: var(--at-blue) !important;
        background: var(--at-blue-lt) !important;
    }

    .at-topbar-right #user-avatar { width: 18px !important; height: 18px !important; }

    .at-topbar-right .user-dropdown-menu {
        right: 0;
        top: calc(100% + 6px);
        z-index: 200;
    }

    .at-toolbar {
        padding: 0 24px;
        height: 52px;
        background: var(--at-surface);
        border-bottom: 1px solid var(--at-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        gap: 12px;
        position: sticky;
        top: 48px;
        z-index: 19;
    }

    .at-toolbar-title {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--at-text);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .at-toolbar-pill {
        background: var(--at-blue-lt);
        color: var(--at-blue);
        font-size: 13px;
        font-weight: 700;
        padding: 2px 10px;
        border-radius: 20px;
    }

    .at-toolbar-actions {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .at-filter-btn {
        background: var(--at-surface);
        border: 1px solid var(--at-border);
        border-radius: var(--at-radius-sm);
        padding: 6px 13px;
        font-size: 14px;
        font-weight: 600;
        color: var(--at-text-md);
        cursor: pointer;
        font-family: inherit;
        transition: all 0.15s;
    }

    .at-filter-btn:hover {
        border-color: var(--at-border-md);
        color: var(--at-text);
    }

    .at-filter-btn.is-active {
        background: var(--at-blue);
        border-color: var(--at-blue);
        color: #fff;
    }

    .at-toolbar-divider {
        width: 1px;
        height: 18px;
        background: var(--at-border);
        margin: 0 4px;
    }

    .at-interval {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        color: var(--at-text-lt);
    }

    .at-interval::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--at-green);
        box-shadow: 0 0 6px var(--at-green);
    }

    .at-interval select {
        border: 1px solid var(--at-border);
        border-radius: 6px;
        padding: 3px 6px;
        font-size: 11px;
        font-weight: 600;
        background: var(--at-surface);
        font-family: inherit;
        cursor: pointer;
        color: var(--at-text-md);
    }

    /* ─── Hero с формой — на десктопе скрыт (форма едет в сайдбар) ── */
    #fs-hero { display: none !important; }

    /* На десктопе компактный список «Мои маршруты» дублирует данные из карточек
       (#routes-container). Прячем — одна карточка, всё в ней. */
    .custom-routes-section { display: none !important; }

    /* ─── Список маршрутов — основной контейнер ───────────── */
    .fs-main {
        max-width: none;
        margin: 0;
        padding: 20px 24px 60px;
        flex: 1;
        background: var(--at-bg);
    }

    .fs-section-head { display: none; }

    /* Контейнер маршрутов: убираем Bootstrap-сетку, делаем колонкой */
    #routes-container > .row,
    #routes-container > .row > .col-12 {
        margin: 0 0 10px !important;
        padding: 0 !important;
    }

    #routes-container > .row:last-child { margin-bottom: 0 !important; }

    /* ─── Карточка маршрута — лёгкая, светлая, с тенью при ховере ── */
    .at-main .route-table.card {
        background: var(--at-surface) !important;
        border-radius: var(--at-radius-lg) !important;
        border: 1px solid var(--at-border) !important;
        box-shadow: none;
        overflow: hidden;
        transition: box-shadow 0.18s ease;
    }

    .at-main .route-table.card:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    }

    /* Объединяем «шапку маршрута» и тело-таблицу в одну сплошную карточку
       (как на дизайне — без визуального разрыва между ними) */
    .at-main .route-table .card-header {
        background: var(--at-surface) !important;
        border-bottom: none !important;
        padding: 14px 18px 10px !important;
    }

    /* Скрытый чекбокс TG в .route-settings (он остаётся в DOM ради совместимости
       с auth/route-actions, но визуально не нужен — состоянием рулит кнопка TG) */
    .at-main .route-table .route-settings .d-none { display: none !important; }

    /* ─── Действия по карточке маршрута (нижняя строка) ───────── */
    .at-main .route-table .route-actions-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 18px;
        border-top: 1px solid var(--at-border);
        background: var(--at-surface);
    }

    /* Группа основных действий — занимает естественную ширину, не растягивается */
    .at-main .route-table .route-actions-main {
        display: flex;
        gap: 8px;
        flex: 0 1 auto;
    }

    .at-main .route-table .route-actions-main .route-action-btn {
        flex: 0 0 auto;
    }

    /* Корзина — на правом краю строки */
    .at-main .route-table .route-actions-row > .btn-trash { margin-left: auto; }

    /* Порог цены — компактный inline-блок в начале строки действий */
    .at-main .route-table .route-threshold-inline {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--at-bg);
        border: 1px solid var(--at-border);
        border-radius: var(--at-radius-md);
        padding: 4px 6px 4px 10px;
        flex: 0 0 auto;
        margin-right: 4px;
    }
    .at-main .route-table .route-threshold-inline .rti-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--at-text-lt);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .at-main .route-table .route-threshold-inline .rti-input {
        width: 80px !important;
        padding: 4px 8px !important;
        font-size: 13px !important;
        font-family: 'DM Mono', ui-monospace, monospace;
        border: 1px solid var(--at-border) !important;
        border-radius: 6px !important;
        background: var(--at-surface) !important;
        color: var(--at-text) !important;
        height: auto !important;
        text-align: right;
    }
    .at-main .route-table .route-threshold-inline .rti-input:disabled {
        opacity: 0.6;
    }
    .at-main .route-table .route-threshold-inline .rti-currency {
        font-size: 13px;
        color: var(--at-text-lt);
    }
    .at-main .route-table .route-threshold-inline .rti-save {
        background: var(--at-blue);
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
        line-height: 1;
    }
    .at-main .route-table .route-threshold-inline .rti-save:hover { background: var(--at-blue-dk); }
    .at-main .route-table .route-threshold-inline .rti-save:disabled {
        background: var(--at-border);
        color: var(--at-text-lt);
        cursor: not-allowed;
    }

    .at-main .route-table .route-action-btn {
        background: var(--at-surface);
        border: 1px solid var(--at-border);
        border-radius: var(--at-radius-md);
        padding: 7px 14px;
        font-size: 14px;
        font-weight: 600;
        color: var(--at-blue);
        cursor: pointer;
        font-family: inherit;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all 0.15s;
        line-height: 1;
        min-height: 36px;
    }

    .at-main .route-table .route-action-btn .rab-ico {
        font-size: 14px;
        color: var(--at-blue);
    }

    .at-main .route-table .route-action-btn:hover {
        border-color: var(--at-blue);
        background: var(--at-blue-lt);
    }

    /* TG-кнопка во включённом состоянии — голубая «таблетка» */
    .at-main .route-table .route-action-btn.btn-tg.is-active {
        background: var(--at-tg-bg);
        border-color: var(--at-tg-border);
        color: var(--at-tg);
    }

    /* Корзина: квадратная, красная, справа */
    .at-main .route-table .route-action-btn.btn-trash {
        flex: 0 0 auto;
        width: 36px;
        padding: 0;
        background: var(--at-red-lt);
        border-color: oklch(90% 0.04 20);
        color: var(--at-red);
        font-size: 14px;
    }

    .at-main .route-table .route-action-btn.btn-trash:hover {
        background: var(--at-red);
        border-color: var(--at-red);
        color: #fff;
    }

    /* Время вылета — лёгкая «пилюля» рядом с датой */
    .at-main .route-table .flight-time {
        font-family: 'DM Mono', ui-monospace, SFMono-Regular, monospace;
        font-size: 12px;
        color: var(--at-text-md);
        background: var(--at-bg);
        padding: 1px 6px;
        border-radius: 4px;
        margin-left: 4px;
    }

    .at-main .route-table .route-header-top {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--at-text);
        margin-bottom: 6px !important;
    }

    /* Чипы маршрута: «Москва [SVO] → Санкт-Петербург [LED]» */
    .at-main .route-table .route-title { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .at-main .route-table .route-chips { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
    .at-main .route-table .route-city {
        font-weight: 700;
        font-size: 17px;
        color: var(--at-text);
        letter-spacing: -0.01em;
    }
    .at-main .route-table .route-iata {
        background: var(--at-bg);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 700;
        color: var(--at-text-lt);
        letter-spacing: 0.02em;
    }
    /* Метро-IATA (например MOW = все аэропорты Москвы) — выделяем синим */
    .at-main .route-table .route-iata--multi {
        background: var(--at-blue-lt);
        color: var(--at-blue);
    }
    .at-main .route-table .route-arrow {
        color: var(--at-blue);
        font-weight: 700;
        font-size: 15px;
    }

    .at-main .route-table .badge.price-badge {
        font-family: 'DM Mono', ui-monospace, SFMono-Regular, monospace;
        font-size: 18px;
        font-weight: 700;
        padding: 6px 12px;
        border-radius: var(--at-radius-sm);
        letter-spacing: -0.01em;
    }

    .at-main .route-table .badge.price-badge.bg-success {
        background: var(--at-green-lt) !important;
        color: var(--at-green) !important;
    }

    .at-main .route-table .badge.price-badge.bg-primary {
        background: var(--at-blue-lt) !important;
        color: var(--at-blue) !important;
    }

    .at-main .route-table .badge.price-badge.bg-secondary {
        background: var(--at-bg) !important;
        color: var(--at-text-lt) !important;
    }

    /* (Бывшие .btn-compact / .chart-button квадраты в шапке убраны —
       все действия теперь в .route-actions-row, см. ниже.) */

    .at-main .route-settings {
        border-top: 1px dashed var(--at-border);
        padding-top: 12px;
        margin-top: 12px;
        flex-wrap: wrap;
    }

    /* Тело карточки — таблица рейсов, без верхней границы (склеена с шапкой) */
    .at-main .route-table .card-body {
        padding: 0 !important;
        border-top: 1px dashed var(--at-border);
    }

    .at-main .route-table .table { margin: 0 !important; }

    .at-main .route-table .table thead th {
        background: var(--at-surface);
        color: var(--at-text-lt);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--at-border);
        border-top: none;
        padding: 10px 18px;
    }

    .at-main .route-table .table tbody td {
        padding: 14px 18px;
        border-color: var(--at-border);
        border-top: 1px solid var(--at-border);
        font-size: 15px;
        vertical-align: middle;
        color: var(--at-text);
    }

    .at-main .route-table .table tbody tr:first-child td { border-top: none; }

    .at-main .route-table .table tbody td strong {
        font-family: 'DM Mono', ui-monospace, monospace;
        font-weight: 700;
        font-size: 15px;
        color: var(--at-text);
    }

    /* Подписи под названием авиакомпании (длительность, направление) */
    .at-main .route-table .table tbody td .text-muted {
        color: var(--at-text-lt) !important;
        font-size: 13px;
    }

    .at-main .route-table .table tbody tr:hover { background: var(--at-bg); }

    /* Кнопки «Купить» / «Найти» — в стилистике дизайна */
    .at-main .route-table .table .btn.btn-outline-primary,
    .at-main .route-table .table .btn.btn-outline-secondary,
    .at-main .route-table .table .btn.btn-success {
        border-radius: var(--at-radius-sm) !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        padding: 6px 14px !important;
    }

    .at-main .route-table .table .btn.btn-outline-primary {
        border-color: var(--at-blue) !important;
        color: var(--at-blue) !important;
        background: var(--at-surface) !important;
    }

    .at-main .route-table .table .btn.btn-outline-primary:hover {
        background: var(--at-blue) !important;
        color: #fff !important;
    }

    .at-main .route-table .table .btn.btn-success {
        background: var(--at-green) !important;
        border-color: var(--at-green) !important;
        color: #fff !important;
    }

    .at-main .route-table .table .btn.btn-outline-secondary {
        border-color: var(--at-border) !important;
        color: var(--at-text-md) !important;
    }

    .at-main .route-table .table .btn.btn-outline-secondary:hover {
        border-color: var(--at-blue) !important;
        color: var(--at-blue) !important;
        background: var(--at-blue-lt) !important;
    }

    /* Анонимные маршруты-уведомление — тоже компактнее */
    .at-main .alert-warning {
        background: var(--at-amber-lt);
        border-color: oklch(85% 0.1 85);
        color: oklch(35% 0.12 60);
        border-radius: var(--at-radius-lg);
    }

    /* ─── Форма в сайдбаре: переопределение тёмных стилей hero ─ */
    .at-sidebar .fs-search-card {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column;
        gap: 10px;
    }

    /* Порядок блоков формы: грид (поля) → дата обратно → опции (чекбокс direct) → submit */
    .at-sidebar .fs-search-grid { order: 1; }
    .at-sidebar #return-date-container { order: 2; }
    .at-sidebar .fs-search-options { order: 3; margin-top: 0 !important; }
    .at-sidebar .fs-submit { order: 4; }

    .at-sidebar .fs-search-grid {
        display: flex !important;
        flex-direction: column;
        gap: 10px !important;
        grid-template-columns: none !important;
    }

    .at-sidebar .fs-search-grid > * {
        order: unset !important;
        grid-column: auto !important;
        width: 100% !important;
    }

    /* Поля и их обёртки — на всю ширину сайдбара */
    .at-sidebar .fs-field,
    .at-sidebar .airport-autocomplete,
    .at-sidebar .input-with-clear {
        width: 100% !important;
        display: block;
    }

    .at-sidebar .input-with-clear {
        position: relative;
    }

    .at-sidebar .fs-field-from { order: 1 !important; }
    .at-sidebar .fs-swap-wrap { order: 2 !important; padding: 0 !important; }
    .at-sidebar .fs-field-to { order: 3 !important; }
    .at-sidebar .fs-field-dates { order: 4 !important; }
    .at-sidebar #return-date-container { order: 5 !important; display: block !important; margin-top: 0 !important; }
    .at-sidebar .fs-submit { order: 6 !important; }

    /* «Поднять всё после кнопки поменять местами на ~3 мм»
       Отрицательный margin-top на .fs-field-to сдвигает её вверх; следующие
       элементы (даты / даты обратно / submit) идут за ней — они тоже сдвигаются. */
    .at-sidebar .fs-swap-wrap + .fs-field { margin-top: -12px !important; }

    .at-sidebar .fs-field-label {
        color: var(--at-text-lt) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
        margin-bottom: 6px !important;
    }

    .at-sidebar .fs-search-card input.fs-field-input,
    .at-sidebar .fs-search-card input.airport-input,
    .at-sidebar .fs-search-card input.form-control,
    .at-sidebar .fs-search-card input[type="text"]:not(.fs-swap) {
        background: var(--at-surface) !important;
        border: 1px solid var(--at-border) !important;
        border-radius: var(--at-radius-md) !important;
        /* справа резервируем место под кнопку очистки (×), чтобы текст не налезал */
        padding: 11px 36px 11px 12px !important;
        color: var(--at-text) !important;
        font-size: 15px !important;
        height: auto !important;
    }

    /* Кнопка очистки (×) — компактная и без фона, чтобы не перекрывала текст */
    .at-sidebar .fs-search-card .input-with-clear .clear-button {
        right: 8px;
        width: 22px;
        height: 22px;
        padding: 0;
        font-size: 12px;
        line-height: 1;
        color: var(--at-text-lt);
    }
    .at-sidebar .fs-search-card .input-with-clear .clear-button:hover {
        color: var(--at-red);
    }

    .at-sidebar .fs-search-card input::placeholder {
        color: var(--at-text-lt) !important;
    }

    .at-sidebar .fs-search-card input:focus {
        background: var(--at-surface) !important;
        border-color: var(--at-blue) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px var(--at-blue-lt) !important;
    }

    .at-sidebar .fs-swap {
        width: 32px;
        height: 32px;
        border-radius: var(--at-radius-md) !important;
        background: var(--at-blue-lt) !important;
        border: 1px solid oklch(88% 0.08 255) !important;
        color: var(--at-blue) !important;
    }

    .at-sidebar .fs-swap:hover { background: oklch(92% 0.08 255) !important; }

    .at-sidebar .fs-btn-primary {
        width: 100%;
        background: var(--at-blue) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 14px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        margin-top: 4px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .at-sidebar .fs-btn-primary:hover {
        background: var(--at-blue-dk) !important;
        color: #fff !important;
    }

    .at-sidebar .fs-search-options {
        margin-top: 12px;
        flex-direction: column;
        gap: 8px;
    }

    .at-sidebar .fs-search-options label {
        color: var(--at-text-md);
        font-size: 14px;
    }

    .at-sidebar .fs-search-options input[type="checkbox"] {
        accent-color: var(--at-blue);
    }

    /* На десктопе скрываем чекбокс «Туда-обратно» — поле даты обратно
       видно всегда (с пометкой опц.), его заполнение и означает round-trip. */
    .at-sidebar .fs-search-options label:has(#round-trip-checkbox) {
        display: none !important;
    }

    .at-sidebar .fs-return-row .fs-field-label {
        color: var(--at-text-lt) !important;
    }

    .at-sidebar .input-with-clear .clear-button {
        color: var(--at-text-lt);
    }

    /* Подсказки автокомплита в сайдбаре */
    .at-sidebar .airport-results {
        background: var(--at-surface);
        color: var(--at-text);
        border: 1px solid var(--at-border);
        border-radius: var(--at-radius-md);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
        margin-top: 4px;
        z-index: 50;
    }

    /* Прячем фиолетовый «footer» внизу — на десктопе он не нужен в новой раскладке */
    .at-main .fs-footer {
        background: transparent;
        border-top: 1px solid var(--at-border);
        margin-top: 0;
        padding: 16px 24px 24px;
        font-size: 11px;
        text-align: left;
    }
}

/* ─── MOBILE / TABLET (<= 900px) ─────────────────────────── */
@media (max-width: 900px) {
    /* На мобиле/планшете прячем все «at-*» элементы — оставляем старый layout */
    .at-sidebar,
    .at-topbar,
    .at-toolbar { display: none !important; }

    /* Размечаем .at-layout как обычный поток (контент остаётся на своих местах) */
    .at-layout { display: block; }
    .at-main { display: block; }

    /* На мобиле новая нижняя строка действий тоже должна выглядеть аккуратно */
    .route-table .route-actions-row {
        display: flex;
        gap: 6px;
        padding: 10px 12px;
        border-top: 1px solid var(--at-border, #e5e7eb);
        align-items: center;
        flex-wrap: wrap;
    }
    .route-table .route-actions-main {
        display: flex;
        gap: 6px;
        flex: 0 1 auto;
        flex-wrap: wrap;
    }
    .route-table .route-actions-main .route-action-btn {
        flex: 0 0 auto;
    }
    .route-table .route-actions-row > .btn-trash { margin-left: auto; }
    .route-table .route-action-btn {
        background: #fff;
        border: 1px solid var(--at-border, #e5e7eb);
        border-radius: 9px;
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 600;
        color: var(--at-blue, #2563eb);
        cursor: pointer;
        font-family: inherit;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        line-height: 1;
        min-height: 34px;
    }
    .route-table .route-action-btn .rab-ico { color: var(--at-blue, #2563eb); }
    .route-table .route-action-btn.btn-trash {
        flex: 0 0 auto;
        width: 36px;
        padding: 0;
        background: oklch(97% 0.03 20);
        border-color: oklch(90% 0.04 20);
        color: oklch(56% 0.2 20);
    }
    .route-table .route-action-btn.btn-tg.is-active {
        background: oklch(97% 0.04 230);
        border-color: oklch(88% 0.07 230);
        color: oklch(45% 0.22 230);
    }
    .route-table .route-settings .d-none { display: none !important; }
    .route-table .flight-time {
        font-family: 'DM Mono', ui-monospace, SFMono-Regular, monospace;
        font-size: 12px;
        color: var(--at-text-md, #4b5563);
        background: var(--at-bg, #f3f4f6);
        padding: 1px 6px;
        border-radius: 4px;
        margin-left: 4px;
    }
}