/* ========================================
   UI Kit - Navigation Bar
   ======================================== */

/* ========================================
   Desktop Navigation (Fixed + Glassmorphism)
   ======================================== */

.gc-desktop-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding: var(--spacing-sm) 0;
    /* Обе темы: поверхность как у карточек/панелей (--bg-content-main), без отдельного #fff в light */
    background: var(--bg-content-main) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--ui-border);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

[data-theme="light"] .gc-desktop-nav {
    background: var(--bg-content-main) !important;
    border-bottom: 1px solid var(--ui-border);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .gc-desktop-nav {
        background: var(--bg-content-main) !important;
        border-bottom: 1px solid var(--ui-border);
    }
}

/* Ограничиваем ширину контента в navbar */
.gc-desktop-nav .container-fluid {
    max-width: var(--layout-page-max-width);
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}

/* Уменьшенный размер текста в десктопном navbar */
.gc-desktop-nav .navbar-nav {
    gap: var(--spacing-xs); /* Расстояние между пунктами */
}

.gc-desktop-nav .navbar-nav .nav-link {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-weight: 500;
}

/* Активный пункт: как в нижнем мобильном баре — контрастная плашка по теме (--font-primary инвертируется) */
.gc-desktop-nav .navbar-nav .nav-link.active {
    background: var(--font-primary);
    color: var(--bg-content-main);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.gc-desktop-nav .navbar-nav .nav-link.active:hover {
    background: var(--font-primary);
    color: var(--bg-content-main);
    filter: brightness(1.06);
}

/* Логотип компактнее */
.gc-desktop-nav .navbar-brand {
    padding-top: var(--spacing-2xs);
    padding-bottom: var(--spacing-2xs);
}

.gc-desktop-nav .navbar-brand img {
    max-height: 32px; /* Чуть меньше логотип */
}

/* Отступ для контента под фиксированным navbar */
@media (min-width: 992px) {
    body {
        --gc-body-pad-top: var(--gc-nav-bar-height);
        padding-top: var(--gc-body-pad-top);
    }
}

/* ========================================
   Mobile Navigation Bar
   ======================================== */

/* ========================================
   Floating Search Bar (Glassmorphism)
   ======================================== */

.gc-floating-search {
    position: fixed;
    /* Над нижним навбаром: высота бара + safe-area (внутри бара) + зазор */
    bottom: calc(
        var(--spacing-sm) + var(--gc-nav-bar-height) + var(--spacing-sm) + env(safe-area-inset-bottom, 0px) +
            var(--spacing-sm)
    );
    left: 0;
    right: 0;
    padding: 0 var(--spacing-md);
    z-index: 1025; /* Ниже навбара (1030), но выше контента */
    box-sizing: border-box;
}

.gc-floating-search-inner {
    /* Glassmorphism эффект */
    background: rgba(var(--bg-rgb), 0.7) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    border: 1px solid var(--ui-border);
    
    /* Скругление */
    border-radius: var(--radius-full); /* Полное скругление */
    
    /* Внутренние отступы */
    padding: var(--spacing-sm) var(--spacing-md);
    
    /* Flexbox для иконки + input */
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.gc-floating-search-inner:focus-within {
    border-color: var(--border-tertiary);
    box-shadow: 0 0 0 2px rgba(var(--accent-link-rgb), 0.15);
}

.gc-floating-search-inner i {
    color: var(--font-secondary);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.gc-floating-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--font-primary);
    font-size: var(--font-size-base);
    padding: 0;
}

.gc-floating-search-input::placeholder {
    color: var(--font-secondary);
}

[data-theme="light"] .gc-floating-search-inner {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .gc-floating-search-inner {
        background: rgba(255, 255, 255, 0.85) !important;
        border: 1px solid rgba(0, 0, 0, 0.08);
    }
}

/* ========================================*/

/*
 * Мобильный верхний навбар (только < lg): сплошная заливка без стекла, нижние углы как у .gc-panel.
 * Фон — всегда var(--bg-content-main) (тёмный stone / светлый stone); светлая без отдельного #fff.
 */
.gc-mobile-nav-top {
    /* Bootstrap .navbar-light не подмешивает свой фон поверх токенов */
    --bs-navbar-bg: transparent;

    /* Позиционирование: на всю ширину, под чёлку/Dynamic Island */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    
    /* Внутренние отступы: safe-area сверху + боковые поля (Figma: 12px = --spacing-mdl) */
    padding-left: var(--spacing-mdl);
    padding-right: var(--spacing-mdl);
    padding-bottom: var(--spacing-sm);
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--spacing-sm));
    
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    /* overflow:hidden на всём баре давал в WebKit шов под чёлкой; скролл табов — в .gc-tabs-scrollable */
    overflow: visible;
    
    background: var(--bg-content-main) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    
    /* Нижняя граница — бар на всю ширину */
    border: none !important;
    border-bottom: 1px solid var(--ui-border) !important;
    
    box-shadow: none;

    transition: background-color var(--transition-fast), border-color var(--transition-fast),
        transform var(--transition-base) ease-out;
}

/* Скрытие шапки при скролле вниз (mobile-nav-scroll-hide.js) */
@media (max-width: 991.98px) {
    .gc-mobile-nav-top.gc-mobile-nav-top--hidden {
        transform: translate3d(0, calc(-100% - 2px), 0);
        pointer-events: none;
    }
}

/* Контейнер контента мобильного навбара */
.gc-nav-content {
    /* Flex структура для управления gap между gc-nav-header и gc-tabs-container */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm); /* Figma header: 8px между title_bar и nav_bar */
}

/* ========================================
   Градиентные overlay слои (Fade-эффект)
   ОТКЛЮЧЕНО ПО ЗАПРОСУ
   ======================================== */

/* ЗАКОММЕНТИРОВАНО: Градиенты на мобильных устройствах
@media (max-width: 991px) {
    [data-theme="dark"] body::before {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: 100px;
        background: linear-gradient(
            to bottom,
            rgba(28, 28, 30, 0.9) 0%,
            rgba(28, 28, 30, 0.6) 40%,
            rgba(28, 28, 30, 0.3) 70%,
            rgba(28, 28, 30, 0) 100%
        );
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.7) 40%,
            rgba(0, 0, 0, 0.3) 70%,
            rgba(0, 0, 0, 0) 100%
        );
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.7) 40%,
            rgba(0, 0, 0, 0.3) 70%,
            rgba(0, 0, 0, 0) 100%
        );
        pointer-events: none;
        z-index: 1020;
    }
    
    [data-theme="dark"] body::after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 90px;
        background: linear-gradient(
            to top,
            rgba(28, 28, 30, 0.9) 0%,
            rgba(28, 28, 30, 0.6) 40%,
            rgba(28, 28, 30, 0.3) 70%,
            rgba(28, 28, 30, 0) 100%
        );
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        mask-image: linear-gradient(
            to top,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.7) 40%,
            rgba(0, 0, 0, 0.3) 70%,
            rgba(0, 0, 0, 0) 100%
        );
        -webkit-mask-image: linear-gradient(
            to top,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.7) 40%,
            rgba(0, 0, 0, 0.3) 70%,
            rgba(0, 0, 0, 0) 100%
        );
        pointer-events: none;
        z-index: 1020;
    }
    
    [data-theme="light"] body::before {
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.6) 40%,
            rgba(255, 255, 255, 0.3) 70%,
            rgba(255, 255, 255, 0) 100%
        );
    }
    
    [data-theme="light"] body::after {
        background: linear-gradient(
            to top,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.6) 40%,
            rgba(255, 255, 255, 0.3) 70%,
            rgba(255, 255, 255, 0) 100%
        );
    }
    
    body.no-mobile-top-gradient::before {
        display: none !important;
    }
}
*/

/* ========================================*/

/* Скрыть на десктопе */
@media (min-width: 992px) {
    .gc-mobile-nav-top {
        display: none !important;
    }
}

[data-theme="dark"] .gc-mobile-nav-top {
    background: var(--bg-content-main) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-theme="light"] .gc-mobile-nav-top {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .gc-mobile-nav-top {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none;
    }
}

/* Системная тёмная тема до/без data-theme */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .gc-mobile-nav-top {
        background: var(--bg-content-main) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Улучшение читаемости контента внутри navbar */
.gc-mobile-nav-top .nav-title .gc-mobile-nav-logo {
    max-height: var(--spacing-lg);
    width: auto;
}

.gc-mobile-nav-top .nav-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--font-primary);
    text-align: center;
    font-weight: 500; /* Figma p/500 */
    font-size: var(--font-size-sm); /* 14px */
    line-height: 1.2;
    white-space: nowrap; /* Не переносится */
    overflow: hidden; /* Скрывает текст за пределами */
    text-overflow: ellipsis; /* Показывает ... */
    max-width: 200px; /* Максимальная ширина для раннего обрезания */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    pointer-events: none; /* Заголовок не перехватывает клики */
}

.nav-title-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.nav-title-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--ui-surface-1);
    border: 1px solid var(--ui-border);
    color: var(--font-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1;
}

/* Иконки в шапке: 40×40 — одна высота с «назад» и «создать», уровень с полем .gc-input */
.gc-mobile-nav-top .gc-nav-icon {
    background: rgba(var(--bg-rgb), 0);
    border-radius: var(--radius-md);
    padding: 0;
    transition: all 0.2s ease;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--font-primary) !important; /* Переопределяем .btn-link (акцентный цвет) */
    box-sizing: border-box;
}

.gc-mobile-nav-top .gc-nav-icon i {
    font-size: var(--font-size-mdl);
    line-height: 1;
}

.gc-mobile-nav-top .gc-nav-icon:hover {
    background: rgba(var(--bg-rgb), 0.5);
    transform: scale(1.05);
    color: var(--font-primary) !important; /* Сохраняем цвет при hover */
}

.gc-mobile-nav-top .gc-nav-icon:active,
.gc-mobile-nav-top .gc-nav-icon:focus {
    color: var(--font-primary) !important; /* Сохраняем цвет при активации */
}

/* Дропдаун в навбаре */
.gc-mobile-nav-top .gc-dropdown-toggle {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.gc-mobile-nav-top .gc-dropdown-toggle::after {
    display: none !important;
    content: none !important;
}

/* Убираем border и псевдоэлементы у элементов меню в навбаре */
.gc-mobile-nav-top .gc-dropdown-menu .gc-dropdown-item,
.gc-mobile-nav-top .gc-dropdown-menu button.gc-dropdown-item,
.gc-mobile-nav-top .gc-dropdown-menu a.gc-dropdown-item {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.gc-mobile-nav-top .gc-dropdown-menu .gc-dropdown-item::after,
.gc-mobile-nav-top .gc-dropdown-menu .gc-dropdown-item::before,
.gc-mobile-nav-top .gc-dropdown-menu button::after,
.gc-mobile-nav-top .gc-dropdown-menu button::before {
    display: none !important;
    content: none !important;
}

/* ПРИМЕЧАНИЕ: Отступы .container-fluid внутри навбаров переопределены в layout.css */

/*
 * Шапка с полосой табов: нижний padding и последний член --gc-mobile-nav-expanded-inner-height
 * (variables.css) должны совпадать — иначе .gc-mobile-nav-offset-with-tabs расходится с высотой бара.
 */
.gc-mobile-nav-top:has(.gc-tabs-container) {
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--spacing-sm)) !important;
    padding-bottom: var(--spacing-sm) !important;
}

/* Структура верхнего navbar */
.gc-mobile-nav-top .gc-nav-header {
    position: relative; /* Для абсолютного позиционирования заголовка */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: var(--gc-mobile-nav-header-row-min-height);
}

/* Отступ между gc-nav-header и gc-tabs-container управляется gap родителя */

.gc-mobile-nav-top .gc-nav-spacer {
    flex: 1 1 0; /* Занимают равное пространство независимо от содержимого */
    min-width: 0; /* Позволяет сжиматься меньше размера контента */
    display: flex;
    align-items: center;
    gap: 4px; /* Отступ между кнопками */
    z-index: 1; /* Spacer'ы выше заголовка для кликабельности кнопок */
    position: relative;
}

.gc-mobile-nav-top .gc-nav-spacer:first-child {
    justify-content: flex-start; /* Левый - прижат к левому краю */
}

.gc-mobile-nav-top .gc-nav-spacer:last-child {
    justify-content: flex-end; /* Правый - прижат к правому краю */
}

/* Ряд шапки: сортировка (иконка) + скролл табов (/stages — макет Figma) */
.gc-mobile-nav-top .gc-nav-tabs-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: calc(100% + var(--spacing-mdl) * 2);
    margin: 0 calc(var(--spacing-mdl) * -1);
    min-width: 0;
    min-height: var(--gc-mobile-nav-tabs-row-min-height);
}

.gc-mobile-nav-top .gc-nav-tabs-sort {
    flex: 0 0 auto;
    padding-left: var(--spacing-mdl);
}

.gc-mobile-nav-top .gc-nav-tabs-row .gc-tabs-container {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0;
}

/* Иконка сортировки в строке табов: 40×40, без подписи (как gc-nav-icon / .gc-input) */
.gc-mobile-nav-top .catalog-sort-dropdown--navbar.catalog-sort-dropdown .catalog-sort-dropdown__toggle--navbar,
.gc-mobile-nav-top .catalog-sort-dropdown--navbar .catalog-sort-dropdown__toggle--navbar {
    width: var(--spacing-1-5xl);
    height: var(--spacing-1-5xl);
    min-width: var(--spacing-1-5xl);
    max-width: var(--spacing-1-5xl);
    min-height: var(--spacing-1-5xl);
    padding: 0;
    justify-content: center;
    border: none;
    background: transparent;
    box-shadow: none;
    font-size: inherit;
    box-sizing: border-box;
}

.gc-mobile-nav-top .catalog-sort-dropdown--navbar .catalog-sort-dropdown__toggle--navbar::after {
    display: none !important;
}

.gc-mobile-nav-top .catalog-sort-dropdown--navbar .catalog-sort-dropdown__toggle--navbar:hover {
    background: rgba(var(--bg-rgb), 0.5);
    color: var(--font-primary);
}

.gc-mobile-nav-top .catalog-sort-dropdown--navbar .catalog-sort-dropdown__toggle-lead i {
    font-size: var(--font-size-mdl);
    line-height: 1;
}

.gc-mobile-nav-top .gc-nav-tabs-row .gc-tabs-scrollable {
    padding-left: 0;
    padding-right: var(--spacing-mdl);
}

/* Контейнер табов */
.gc-mobile-nav-top .gc-tabs-container {
    width: calc(100% + var(--spacing-mdl) * 2); /* Растягиваем на ширину боковых отступов навбара */
    margin: 0 calc(var(--spacing-mdl) * -1);
    padding: 0; /* БЕЗ padding - он будет у scrollable списка */
    /* overflow у nav снят — скролл только у .gc-tabs-scrollable */
}

/* Одна полоса табов под заголовком (/events, /channels, профиль) — та же высота, что у gc-nav-tabs-row (/stages) */
.gc-mobile-nav-top .gc-nav-content > .gc-tabs-container {
    min-height: var(--gc-mobile-nav-tabs-row-min-height);
    display: flex;
    align-items: center;
}

.gc-mobile-nav-top .gc-tabs {
    display: flex;
    gap: var(--spacing-sm);
    width: 100%;
    padding: 0 var(--spacing-mdl);
    border-radius: 0 !important; /* Убираем скругление у контейнера */
}

/* Скроллируемые табы (для длинных названий, например в профиле) */
.gc-mobile-nav-top .gc-tabs-scrollable {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling на iOS */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    scroll-behavior: auto; /* Мгновенная прокрутка по умолчанию, без анимации */
    width: 100%;
    flex-wrap: nowrap; /* Не переносим табы на новую строку */
    padding: 0 var(--spacing-mdl);
    opacity: 0; /* Скрываем до инициализации JS */
    transition: opacity 0.15s ease; /* Плавное появление */
}

/* Показываем после инициализации JS */
.gc-mobile-nav-top .gc-tabs-scrollable.initialized {
    opacity: 1;
}

/* Скрываем скроллбар в webkit */
.gc-mobile-nav-top .gc-tabs-scrollable::-webkit-scrollbar {
    display: none;
}

/* Для скроллируемых табов - элементы растягиваются, если помещаются */
.gc-mobile-nav-top .gc-tabs-scrollable .gc-tab-item {
    flex: 1 1 0; /* Растягиваем равномерно, если помещаются */
    min-width: fit-content; /* Минимум по содержимому (для скролла) */
}

/* Обычные табы растягиваются равномерно */
.gc-mobile-nav-top .gc-tabs:not(.gc-tabs-scrollable) .gc-tab-item {
    flex: 1 1 0;
    min-width: 0;
}

.gc-mobile-nav-top .gc-tab-link {
    width: 100%;
    justify-content: center;
    border-radius: var(--radius-full) !important; /* Figma: pill / full */
    padding: var(--spacing-sm) var(--spacing-mdl); /* py 8px, px 12px */
    font-size: var(--font-size-caption);
    font-weight: 500;
    line-height: 1.2;
    min-height: 0;
}

.gc-mobile-nav-top .gc-tab-link.active {
    border-radius: var(--radius-full) !important;
}

/* Вертикальный разделитель между группами фильтров (Figma: 1×24, цвет border) */
.gc-mobile-nav-top .gc-tabs-minimal .gc-tab-item.gc-tab-divider {
    display: block;
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    min-width: 1px;
    height: 24px;
    margin: 0 var(--spacing-xs);
    padding: 0;
    background: var(--ui-border);
    pointer-events: none;
    border: none;
    border-radius: 0;
}

.gc-mobile-nav-top .gc-tabs-minimal .gc-tab-item.gc-tab-divider .gc-tab-link {
    display: none;
}

/* Счётчики фильтров в табах шапки (без инлайнов) */
.gc-mobile-nav-top .gc-tab-filter-badge {
    font-size: var(--font-size-micro);
    padding: 2px 6px;
    line-height: 1.2;
    vertical-align: middle;
}

/* Активный таб в шапке: контрастная «чернильная» плашка (как задумано для верхнего бара) */
.gc-mobile-nav-top .gc-tabs-minimal .gc-tab-link.active {
    background: var(--font-primary);
    color: var(--bg-content-main);
    box-shadow: none;
}

.gc-mobile-nav-top .gc-tabs-minimal .gc-tab-link.active:hover {
    background: var(--font-primary);
    color: var(--bg-content-main);
    filter: brightness(1.08);
}

/* ========================================
   Нижний мобильный навбар с glassmorphism
   ======================================== */

.gc-mobile-nav-bottom {
    /* Как верхний моб. бар — всегда --bg-content-main */
    background: var(--bg-content-main) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* Только верхняя граница — бар на всю ширину */
    border: none !important;
    border-top: 1px solid var(--ui-border) !important;

    /* Тень для глубины (вверх) */
    box-shadow: 0 -8px 32px 0 rgba(0, 0, 0, 0.1);

    /* Анимация */
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

[data-theme="dark"] .gc-mobile-nav-bottom {
    background: var(--bg-content-main) !important;
}

[data-theme="light"] .gc-mobile-nav-bottom {
    box-shadow: 0 -8px 32px 0 rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .gc-mobile-nav-bottom {
        box-shadow: 0 -8px 32px 0 rgba(0, 0, 0, 0.08);
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .gc-mobile-nav-bottom {
        background: var(--bg-content-main) !important;
    }
}

/* Размеры и отступы нижнего navbar */
.gc-mobile-nav-bottom {
    position: fixed;
    /* На всю ширину; safe-area снизу внутри бара — фон таббара под индикатором «домой» */
    bottom: 0;
    /* iOS WebKit: сдвиг к низу видимой области при схлопывании адресной строки (mobile-fixed-bottom-visual-viewport.js) */
    transform: translateY(var(--gc-visual-viewport-bottom-shift, 0px));
    left: 0;
    right: 0;
    min-height: var(--gc-nav-bar-height);
    height: auto;
    box-sizing: border-box;
    padding: var(--spacing-sm) var(--spacing-sm) calc(env(safe-area-inset-bottom, 0px) + var(--spacing-sm))
        var(--spacing-sm);
    margin: 0;
    border-radius: 0;
    overflow: hidden; /* КРИТИЧНО: обрезаем содержимое по радиусу родителя */
    width: auto;
    z-index: var(--z-fixed, 1030);
    display: none; /* По умолчанию скрыт */
}

/* Показываем только на мобильных */
@media (max-width: 991.98px) {
    .gc-mobile-nav-bottom {
        display: block;
    }
}

/* Строка с колонками - на всю высоту */
.gc-mobile-nav-bottom .row {
    height: var(--gc-nav-bar-height);
    min-height: var(--gc-nav-bar-height);
    margin: 0;
}

/* Колонки - на всю высоту */
.gc-mobile-nav-bottom .col {
    height: 100%;
    padding: 0;
}

/* Стили для ссылок в нижнем навбаре */
.gc-mobile-nav-bottom .nav-link {
    display: flex !important; /* Flex для центрирования содержимого */
    flex-direction: column !important; /* Вертикальное расположение иконки и текста */
    align-items: center !important;
    justify-content: center !important;
    height: 100%; /* На всю высоту родителя */
    color: var(--font-secondary);
    padding: 0; /* Убираем padding, используем justify-content: center */
    font-size: var(--font-size-sm); /* 12px */
    text-decoration: none;
    transition: var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    border-radius: var(--radius-lg);
}

.gc-mobile-nav-bottom .nav-link:hover {
    background: rgba(var(--bg-rgb), 0.3);
}

/* Активный пункт: «чёрная» плашка по теме (как табы в верхнем мобильном баре) */
.gc-mobile-nav-bottom .nav-link.active {
    background: var(--font-primary);
    color: var(--bg-content-main);
    box-shadow: none;
}

.gc-mobile-nav-bottom .nav-link.active:hover {
    background: var(--font-primary);
    color: var(--bg-content-main);
    filter: brightness(1.06);
}

/* Иконки в нижнем навбаре */
.gc-mobile-nav-bottom i {
    font-size: var(--font-size-sm);
    display: block;
    margin-bottom: var(--spacing-2xs); /* 4px */
}

/* Текст под иконками */
.gc-mobile-nav-bottom small {
    font-size: var(--font-size-xs); 
    font-weight: 500;
}

/* Fallback без backdrop-filter: только снять blur; фон задают правила выше (в т.ч. светлая тема). */
@supports not (backdrop-filter: blur(20px)) {
    .gc-mobile-nav-bottom {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Закреплённые посты ленты канала — фикс. снизу (как нижний таббар): glass + blur */
.gc-mobile-nav-pinned-fixed {
    position: fixed;
    bottom: 0;
    transform: translateY(var(--gc-visual-viewport-bottom-shift, 0px));
    left: 0;
    right: 0;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--spacing-sm));
    z-index: var(--z-fixed, 1030);
    width: auto;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--bg-content-main) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-top: 1px solid var(--ui-border) !important;
    box-shadow: 0 -8px 32px 0 rgba(0, 0, 0, 0.1);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

[data-theme="dark"] .gc-mobile-nav-pinned-fixed {
    background: var(--bg-content-main) !important;
}

[data-theme="light"] .gc-mobile-nav-pinned-fixed {
    box-shadow: 0 -8px 32px 0 rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .gc-mobile-nav-pinned-fixed {
        box-shadow: 0 -8px 32px 0 rgba(0, 0, 0, 0.08);
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .gc-mobile-nav-pinned-fixed {
        background: var(--bg-content-main) !important;
    }
}

.gc-mobile-nav-pinned-fixed .gc-mobile-nav-pinned {
    width: 100%;
}

.gc-mobile-nav-pinned-fixed .channel-pinned-switcher {
    padding: var(--spacing-sm) var(--spacing-sm);
    gap: var(--spacing-sm);
    cursor: pointer;
}

.gc-mobile-nav-pinned-fixed .sidebar-list-title {
    font-size: var(--font-size-sm);
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

@supports not (backdrop-filter: blur(20px)) {
    .gc-mobile-nav-pinned-fixed {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (min-width: 992px) {
    .gc-mobile-nav-pinned-fixed {
        display: none !important;
    }
}

/* Отступ снизу у body = фактическая высота .gc-mobile-nav-bottom: padding-top + ряд + padding-bottom (с safe-area). */
@media (max-width: 991.98px) {
    body {
        --gc-body-pad-bottom: calc(
            var(--spacing-sm) + var(--gc-nav-bar-height) + var(--spacing-sm) + env(safe-area-inset-bottom, 0px)
        );
        padding-bottom: var(--gc-body-pad-bottom);
    }
}

/* ========================================
   Дуэль - специальная навигация для переключения раундов
   ======================================== */

.gc-duel-nav-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 var(--spacing-md);
}

.gc-duel-nav-btn {
    color: var(--font-primary);
    min-width: 40px;
    height: 60px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--transition-fast);
}

.gc-duel-nav-btn:hover:not(:disabled) {
    opacity: 0.85;
}

.gc-duel-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Перекрываем .gc-btn-ghost (font-secondary) и .gc-btn:disabled (opacity 0.9) в нижнем баре дуэли */
.gc-mobile-nav-bottom .gc-duel-nav-btn.gc-btn-ghost {
    color: var(--font-primary);
}

.gc-mobile-nav-bottom .gc-duel-nav-btn.gc-btn:disabled {
    opacity: 0.35 !important;
    background: transparent !important;
}

.gc-duel-nav-title {
    flex-grow: 1;
    text-align: center;
    color: var(--font-primary);
    font-size: var(--font-size-sm);
}

/* ========================================
   UI Kit Docs Preview Styles
   ======================================== */

/* Контейнер для превью нижнего навбара в документации */
.gc-nav-preview-container {
    width: 430px;
    min-height: 80px;
    position: relative;
    margin: 0 auto;
}

/* Превью нижнего навбара - позиционируем абсолютно внутри контейнера */
.gc-mobile-nav-bottom.gc-nav-preview {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    display: block !important; /* Показываем в превью на всех разрешениях */
}

/* Контейнер для превью верхнего навбара */
.gc-nav-preview-top-container {
    width: 430px;
    min-height: 160px;
    position: relative;
    margin: 0 auto;
}

/* Маленький контейнер для navbar level 2 (без табов) */
.gc-nav-preview-top-container-small {
    min-height: 80px;
}

/* Превью верхнего навбара - позиционируем абсолютно внутри контейнера */
nav.gc-mobile-nav-top.gc-nav-preview-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: block !important; /* Переопределяем display none на больших экранах */
}