@import 'empty_states.css';

/* Шрифты перенесены в header.php для оптимизации загрузки с preload */



:root {
    /* Система z-index, централизованная для всего приложения */
    /* --z-dropdown: 9999; */ /* Используем значение из variables.css */
    --z-modal: 1200;
    --z-search-button: 10; /* Понижен - достаточно для отображения поверх инпута */
    --z-form-elements: 10; /* Понижен - не должен перекрывать fixed элементы */
}

/* Гарантируем, что выпадающие меню всегда впереди */
.dropdown-menu {
    z-index: var(--z-dropdown) !important;
}

/* Предотвращаем создание нового stacking context при hover (только для list-group-item) */
.list-group .list-group-item:hover {
    z-index: auto !important;
    position: relative !important;
    transform: none !important;
    background-color: var(--surface-control) !important;
}


/* Оптимизация загрузки шрифтов - font-display настроен в @font-face правилах */

/* Предотвращаем layout shift при загрузке шрифтов */
body {
    /* Фиксируем базовые метрики для стабильности */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Плавный переход шрифтов */
    transition: font-family 0ms;
}

/* Когда шрифты загружены, применяем их без анимации */
html.fonts-loaded body {
    font-family: var(--font-family-base);
}

html.fonts-loaded h1,
html.fonts-loaded h2, 
html.fonts-loaded h3, 
html.fonts-loaded h4, 
html.fonts-loaded h5, 
html.fonts-loaded h6 {
    font-family: var(--font-family-heading);
}

/* DEPRECATED: font-size перенесен в typography.css (UI Kit)
   Оставлены только специфичные стили для html */
html {
    overflow-y: scroll;
    color: var(--text-primary);
    /* font-family: 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; */
    /* font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif; */
    font-family: var(--font-family-base);
    /* Холст страницы — --gc-app-content-bg (= Surface/Page); рейлы — Surface/Primary */
    background-color: var(--gc-app-content-bg);
    min-height: 100%;
    min-height: -webkit-fill-available;
}

/* Safari: окраска overscroll и UI под темой страницы, не системная чёрная полоса */
html[data-theme='dark'] {
    color-scheme: dark;
}
html[data-theme='light'] {
    color-scheme: light;
}

@supports (scrollbar-gutter: stable) {
    html {
        scrollbar-gutter: stable;
    }
}


/* DEPRECATED: Базовый стиль small перенесен в typography.css (UI Kit)
   Оставлено для обратной совместимости до полной миграции */

body {
    font-family: var(--font-family-base);
     margin: 0;
     padding: 0;
     /* Синхронно с padding в navbar.css — для min-height .gc-app-frame (прижатие футера на коротких страницах) */
     --gc-body-pad-top: 0px;
     --gc-body-pad-bottom: 0px;
     display: flex;
     flex-direction: column;
     background-color: var(--gc-app-content-bg);
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     user-select: auto;
     min-height: 100vh;
     min-height: -webkit-fill-available;
     box-sizing: border-box;
 }

 .navbar {
    background-color: var(--surface-sunken);
    border-bottom: 1px solid var(--border-subtle);
    z-index: 1050 !important;
 }

 .border-dark-av {
    border-color: var(--surface-panel) !important;
 }

 .bg-custom-dark {
    background-color: color-mix(in srgb, var(--text-on-solid) 8%, transparent);
 }

 .bg-dark {
    background-color: var(--surface-panel) !important;
 }

 p {
     color: var(--text-primary);
 }

 hr {
    border-top: 1px solid var(--border-subtle);
    opacity: 1;
 }

 .super-text-small {
    font-size: var(--font-size-tertiary);
 }

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    margin-top: 0;
    /* font-family: "Unbounded", sans-serif; */
    font-family: var(--font-family-heading);
    font-optical-sizing: auto;
}

a {
    color:var(--accent-link);
    text-decoration: none;
}


.btn-link {
    color:var(--accent-link);
}

.btn-link:hover {
    color:var(--accent-link-hover);
}

.btn-link:active {
    color:var(--accent-link-hover) !important;
}

.btn-link:focus {
    color:var(--accent-link-hover) !important;
}

.btn-link .btn.show {
    color:var(--accent-link-hover);
}

.shadow-lg {
    box-shadow: var(--shadow-xl) !important;
}

.dropdown-menu {
    min-width: 220px;
}

a:hover {
    color:var(--accent-link-hover);
    text-decoration: none;
}

.border {
    border-color: var(--border-subtle) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--border-subtle) !important;
}

.border-end {
    border-color: var(--border-subtle) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

/**CUSTOM BG**/
.bg-dark-green {
    background-color: var(--tint-tinted-green);
}


.card-auth {
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    overflow: hidden;
    /*box-shadow: 0px 3px 6px 0px #25292e1f;*/
    background-color: var(--surface-panel);
    text-decoration: none !important;
    transition: 0.2s;
}

.list-card-stage {
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    overflow: hidden;
    background-color: var(--surface-canvas);
    text-decoration: none !important;
    transition: 0.2s;
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

.list-card-stage:hover {
    box-shadow: var(--shadow-sm);
    background-color: var(--surface-sunken) !important;
}
}

.list-group-item.disabled, .list-group-item:disabled {
    background-color: var(--surface-panel) !important; 
}

.main-stage-form {
    overflow: hidden;
    text-decoration: none !important;
    transition: 0.2s;
}

.add-stage-form {
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    overflow: hidden;
    /*box-shadow: 0px 3px 6px 0px #25292e1f;*/
    background-color: var(--surface-panel);
    text-decoration: none !important;
    transition: 0.2s;
}

.text-accent {
    color: var(--font-accent-orange);
}


.stage-card {
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    overflow: hidden;
    background-color: var(--surface-panel) !important;
    text-decoration: none !important;
    transition: 0.2s;
}

/* Добавляем стиль для контентной области */
.stage-card .card-body {
    height: 180px !important; /* фиксированная высота контентной области */
    display: flex;
    flex-direction: column;
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

.stage-card:hover {
    background-color: var(--surface-control) !important;
    transition: 0.3s;
    text-decoration:solid;
    transition: 0.2s;
}
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

.card:hover {
    background-color: var(--surface-control) !important;
    transition: 0.3s;
    text-decoration:solid;
    transition: 0.2s;
}
}

.card .accent-heading {
    color: var(--font-accent-orange);
}

.card p {
    color: var(--text-primary);
}

.card small {
    color: var(--font-small);
}

.card-add  {
    border: 1px solid var(--border-subtle);
    border-radius: 8px !important;
    border-radius: 8px !important;
    overflow: hidden;
    background-color: var(--surface-panel);
    text-decoration: none !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

.card-add:hover  {
    color: var(--font-small) !important;
}
}

/**LIST-GROUP**/


/* Скругления для всех list-group */
.list-group {
    border-radius: 12px;
}

/* Скругление для первого и последнего элемента в группе */
.list-group-item:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.list-group-item:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Если используется list-group-flush, обеспечиваем скругление */
.list-group-flush {
    border-radius: 12px;
}

/* Если list-group находится внутри карточки, поддерживаем скругления */
.card .list-group {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}



.list-group-item {
    border-color:var(--border-subtle);
    background-color: var(--surface-panel);
    transition: 0.2s;
}

.list-group-item-action:focus, .list-group-item-action:hover {
    background-color: var(--surface-control);
}

.list-group-item:hover {
    transition: 0.2s;
}

/* UI Kit - Panel Component (content container) */
.gc-panel {
    /* Передаёт значение для bleed gc-list-group-flush внутри gc-panel-content (= горизонтальный инсет секций) */
    --gc-content-bleed: var(--gc-panel-inset);
    --gc-input-float-notch-bg: var(--surface-panel);
    /* Контекст концентричных углов (variables.css --gc-corner-*) */
    --gc-corner-outer: var(--radius-16);
    --gc-corner-nest: 0px;
    background-color: var(--surface-panel);
    border: none;
    border-radius: var(--gc-corner-outer);
    display: flex;
    flex-direction: column;
    /* padding: 0, gap: 0 — gc-panel чистый shell.
       Секции (gc-panel-header, gc-panel-content, gc-panel-footer)
       управляют своими отступами сами. */
}

/* Когда gc-panel внутри контейнера с gap - убираем margin */
.event-content .gc-panel,
.gc-panel-content .gc-panel,
.catalog-main .gc-panel,
.catalog-sidebar .gc-panel,
.split-right .gc-panel {
    margin-bottom: 0; /* Отступом управляет gap родителя */
}

/* Панель без внутренних отступов — контент заполняет её от края до края.
   Двойной селектор нужен для победы над @media (max-width: 576px) { .gc-panel }
   overflow: visible — каждый дочерний элемент сам управляет своим clipping,
   иначе позиционированные тултипы обрезаются. */
.gc-panel.gc-panel--flush {
    padding: 0;
    gap: 0;
}

/* Панель без chrome-оформления: без фона и рамки; flex-колонка без собственной поверхности.
   Секции: шапка — отступ от предыдущего блока + шаг mdl к контенту + горизонтальный инсет xs только у .gc-panel-header; футер — только сверху; контент без инсетов,
   кроме gc-panel-content--list / --list-cards — там сохраняется padding списка (hover до краёв).
   Для сеток самодостаточных карточек и плоских секций без второй «коробки». */
.gc-panel.gc-panel-plain {
    --gc-content-bleed: 0;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    overflow: visible;
}

.gc-panel.gc-panel-plain > .gc-panel-header {
    padding: var(--layout-section-gap) var(--layout-content-inset-x) var(--space-4) var(--layout-content-inset-x);
}

/* Список во plain-панели оставляем с padding --list; иначе интерактивные ряды теряют просвет */
.gc-panel.gc-panel-plain > .gc-panel-content:not(.gc-panel-content--list) {
    padding: 0;
}

.gc-panel.gc-panel-plain > .gc-panel-footer {
    padding: var(--space-4) 0 0 0;
}

.gc-panel.gc-panel-plain > .gc-panel-header-hero {
    --gc-panel-header-hero-padding: var(--space-4) 0;
}

/* Ниже lg — как gc-panel-plain; от lg — обычный chrome. Один корень в разметке, без второй копии панели. */
@media (max-width: 991.98px) {
    .gc-panel.gc-panel--plain-below-lg {
        --gc-content-bleed: 0;
        background: transparent;
        border: none;
        padding: 0;
        border-radius: 0;
        overflow: visible;
    }

    .gc-panel.gc-panel--plain-below-lg > .gc-panel-header {
        /* Отступ от секции выше + короткий шаг к контенту (карточки, сетки) */
        padding: var(--layout-section-gap) var(--layout-content-inset-x) var(--space-4) var(--layout-content-inset-x);
    }

    .gc-panel.gc-panel--plain-below-lg > .gc-panel-content:not(.gc-panel-content--list) {
        padding: 0;
    }

    .gc-panel.gc-panel--plain-below-lg > .gc-panel-footer {
        padding: var(--space-4) 0 0 0;
    }

    .gc-panel.gc-panel--plain-below-lg > .gc-panel-header-hero {
        --gc-panel-header-hero-padding: var(--space-4) 0;
    }

    /* «Вторичная» панель + plain ниже lg: без второй коробки на адаптиве (перебивает chrome --secondary) */
    .gc-panel.gc-panel--secondary.gc-panel--plain-below-lg {
        background: transparent;
        border: none;
        padding: 0;
        border-radius: 0;
        overflow: visible;
        --gc-content-bleed: 0;
        gap: 0;
    }

    .gc-panel.gc-panel--secondary.gc-panel--plain-below-lg > .gc-panel-content:not(.gc-panel-content--list) {
        padding: 0;
        gap: var(--space-4);
    }

    .gc-panel.gc-panel--secondary.gc-panel--plain-below-lg > .gc-panel-body {
        padding: 0;
        gap: var(--space-4);
    }
}

/*
 * gc-panel--secondary — вторичная панель на canvas: Surface/Secondary без рамки.
 * Инсеты/gap как у .catalog-nav (catalog.css); зона --list без сдвига контракта.
 */
.gc-panel.gc-panel--secondary {
    --catalog-nav-inset: var(--gc-panel-inset);
    --catalog-nav-stack-gap: var(--space-1);
    --gc-tabs-r-outer: var(--radius-16);
    --gc-tabs-r-inner: max(0px, calc(var(--gc-tabs-r-outer) - var(--catalog-nav-inset)));
    --gc-content-bleed: calc(var(--catalog-nav-inset) + var(--gc-list-row-padding));
    --gc-corner-outer: var(--gc-tabs-r-outer);

    --gc-input-float-notch-bg: var(--surface-secondary);
    background-color: var(--surface-secondary);
    border: none;
    border-radius: var(--gc-tabs-r-outer);
    gap: var(--catalog-nav-stack-gap);
    padding: var(--catalog-nav-inset);
    overflow: hidden;
}

/* Инсет-список сам держит линию контента. Панель — только поверхность, без второго padding. */
.gc-panel.gc-panel--secondary:has(> .gc-inset-list) {
    padding: 0;
    gap: 0;
}

.gc-panel.gc-panel--secondary > :is(.gc-panel-header, .gc-panel-footer) {
    padding: var(--gc-panel-inset);
}

.gc-panel.gc-panel--secondary > .gc-panel-content:not(.gc-panel-content--list) {
    padding: var(--gc-panel-inset);
    gap: var(--space-4);
}

.gc-panel.gc-panel--secondary > .gc-panel-body {
    padding: var(--gc-panel-inset);
    gap: var(--space-4);
}

/* Ниже lg: secondary + plain — шапка/футер после правил .gc-panel--secondary > * (иначе 2sm снизу + gap дают «дыру» до карточек) */
@media (max-width: 991.98px) {
    .gc-panel.gc-panel--secondary.gc-panel--plain-below-lg > .gc-panel-header {
        padding: var(--layout-section-gap) var(--layout-content-inset-x) var(--space-4) var(--layout-content-inset-x);
    }

    .gc-panel.gc-panel--secondary.gc-panel--plain-below-lg > .gc-panel-footer {
        padding: var(--space-4) 0 var(--space-2) 0;
    }
}

/* Hero первым — к краям панели, скругление как у внешней коробки catalog-nav */
.gc-panel.gc-panel--secondary > .gc-panel-header-hero:first-child {
    margin-top: calc(-1 * var(--catalog-nav-inset));
    margin-inline: calc(-1 * var(--catalog-nav-inset));
    align-self: stretch;
    width: auto;
    max-width: none;
    --gc-panel-header-hero-padding: var(--space-2);
    border-radius: var(--gc-tabs-r-outer) var(--gc-tabs-r-outer) 0 0;
}

/* Flush в --list: padding зоны xs, не sm — свой bleed */
.gc-panel.gc-panel--secondary .gc-panel-content--list :is(.gc-list-group-flush, .gc-list-shell-flush) {
    margin-left: calc(-1 * (var(--catalog-nav-inset) + var(--gc-list-zone-padding)));
    margin-right: calc(-1 * (var(--catalog-nav-inset) + var(--gc-list-zone-padding)));
}

/*
 * gc-panel--roster — модификатор на .gc-panel (вместе с .gc-panel-content--list):
 * списки людей / участники / подписчики канала. Стили empty state и чипов оружия — event-layout.css.
 */

/* Каталог / колонка мероприятия (split-right): ниже lg на всю ширину экрана — без боковых линий у краёв */
@media (max-width: 991.98px) {
    .catalog-main .gc-panel,
    .split-right .gc-panel {
        /* border-left: none;
        border-right: none; */
    }
}

/* Тело внутри flush-панели — возвращает стандартный padding */
.gc-panel-body {
    padding: var(--gc-panel-inset);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Panel Title - стандартный заголовок панели */
.gc-panel-title {
    color: var(--text-primary);
    margin: 0;
}

/* Когда gc-panel-title - первый элемент внутри контейнера с gap */
.event-content > .gc-panel > .gc-panel-title:first-child,
.rating-content > .gc-panel > .gc-panel-title:first-child,
.split-right > .gc-panel > .gc-panel-title:first-child {
    margin-bottom: 0; /* Отступ создаст gap родителя */
}

/* Секции не должны добавлять внешние margin — spacing через padding секции */
.gc-panel > * {
    margin: 0;
}

/* Скрытые/пустые элементы не должны создавать gap */
#coorganizerSearchResults:empty {
    display: none;
}

/* Panel Header — строка: title слева, actions справа.
   Только когда прямым потомком являются табы — уходим в колонку. */
.gc-panel-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0;
    padding: var(--gc-panel-inset);
}

.gc-panel-header:has(> .gc-tabs),
.gc-panel-header:has(> .tabs-scroll-wrapper) {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.gc-panel-header .gc-panel-title {
    margin: 0; /* Отступом управляет parent */
}

/* Убираем margin у всех детей gc-panel-header */
.gc-panel-header > * {
    margin: 0;
}

/* Контентные шапки секций (Figma 1277:18913): bordered sm 32px — размер задаёт .gc-btn-bordered / .gc-btn-sm.
   md (40px) — только явный .gc-btn-md на кнопке (loadout, модалки, каталог). */

/* Заголовок панели + вторая строка (описание / мета) — одна колонка слева */
.gc-panel-header-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}

.gc-panel-header-description {
    margin: 0;
    font-size: var(--font-size-13);
    color: var(--text-secondary);
    line-height: var(--line-height-list-description);
    font-weight: 400;
}

/* Заголовок и бейдж в одну линию справа от названия (перенос при узкой колонке) */
.gc-panel-header-text--title-badge-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

/* .gc-list-title без .gc-panel-header-text — явный inline-flex для бейджа черновика */
.gc-list-title.gc-panel-header-text--title-badge-row {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.gc-panel-header-text--title-badge-row .gc-panel-title {
    min-width: 0;
}

/* Рейтинг сезона: блок заголовка и ⋯ от верхнего края шапки (не вертикальное центрирование по высоте текста) */
.gc-panel-header--season-ranking {
    align-items: flex-start;
}

/* Hero-шапка панели: иллюстрация над строкой заголовка (первый ребёнок .gc-panel).
 *
 * Регулировка без правки селекторов — переопредели переменные на .gc-panel-header-hero
 * (или на конкретной панели: .gc-panel.my-panel > .gc-panel-header-hero):
 *
 * --gc-panel-header-hero-padding — внутренние отступы шапки (по умолчанию блок / инлайн из токенов).
 * --gc-panel-header-hero-img-max-height — макс. высота картинки (по умолчанию 14rem). Значение none снимает лимит.
 * --gc-panel-header-hero-img-max-width — макс. ширина (по умолчанию 100% контентной области после паддинга).
 */
.gc-panel > .gc-panel-header-hero {
    --gc-panel-header-hero-padding: var(--space-4) var(--space-4);
    --gc-panel-header-hero-img-max-height: 8rem;
    --gc-panel-header-hero-img-max-width: 100%;

    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--gc-panel-header-hero-padding);
    border-radius: var(--radius-16) var(--radius-16) 0 0;
    overflow: hidden;
}

@media (max-width: 576px) {
    .gc-panel > .gc-panel-header-hero {
        display: none;
    }
}

.gc-panel > .gc-panel-header-hero .gc-empty-state-image,
.gc-panel > .gc-panel-header-hero .gc-panel-header-hero-image {
    display: block;
    width: 100%;
    max-width: var(--gc-panel-header-hero-img-max-width);
    height: auto;
    max-height: var(--gc-panel-header-hero-img-max-height);
    margin: 0 auto;
    opacity: 1;
    object-fit: contain;
}

/* Panel Content — контент панели: текст, формы, виджеты */
.gc-panel-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--gc-panel-inset);
}

/* Убираем margin у всех прямых детей - отступами управляет gap секции */
.gc-panel-content > * {
    margin: 0;
}

/* Смежные секции: убираем верхний padding у «нижней» секции —
   верхняя уже создаёт нужный gap своим padding-bottom. */
.gc-panel-header + .gc-panel-content,
.gc-panel-header + .gc-panel-content--list,
.gc-panel-header + .gc-panel-footer,
.gc-panel-content + .gc-panel-footer,
.gc-panel-content--list + .gc-panel-footer {
    padding-top: 0;
}

/* Подиум + список рейтинга — один вертикальный шаг (иначе padding двух .gc-panel-content суммируется) */
.gc-panel-content + .gc-panel-content--list {
    padding-top: 0;
}

/* Panel Footer — нижний блок панели (пагинация, итоги, действия) */
.gc-panel-footer {
    display: flex;
    align-items: center;
    padding: var(--gc-panel-inset);
    gap: var(--space-2);
}

/*
 * ─── List zone (--list): единый контракт отступов (панель, модалка, карточка) ───
 *
 * Секция без списка (.gc-panel-content, .gc-modal-content): padding = --gc-panel-inset (8px).
 * Зона --list: padding = --gc-list-zone-padding (8px); gap между пунктами = xs (4px, --gc-list-zone-gap). Строка (.gc-interactive-row, .gc-list-item в --list-cards):
 * padding = --gc-list-row-padding (space/3 = 12px). Inset до иконки: zone + row = 20px (--gc-list-zone-content-inset).
 *
 * Текст/шапка в зоне (не строка): .gc-list-zone-inset на блоке (тот же row-padding).
 *
 * Корни: .gc-panel-content--list, .gc-card-body--list,
 *        .gc-modal .modal-body--list, .gc-modal .gc-modal-content--list
 *
 * Важно: панель/карточка и модалка — отдельные правила. Один :is() с
 * `.gc-modal .modal-body.modal-body--list` раздувает specificity до (0,3,0)
 * и перебивает `.gc-panel-header + .gc-panel-content--list { padding-top: 0 }` (0,2,0) —
 * под шапкой панели получается двойной вертикальный шаг.
 */
.gc-panel-content--list,
.gc-card-body--list {
    padding: var(--gc-list-zone-padding);
    gap: var(--gc-list-zone-gap);
}

.gc-modal .modal-body.modal-body--list,
.gc-modal .gc-modal-content--list {
    padding: var(--gc-list-zone-padding);
    gap: var(--gc-list-zone-gap);
}

.gc-panel-content--list > .gc-list-zone-inset,
.gc-card-body--list > .gc-list-zone-inset,
.gc-modal .modal-body.modal-body--list > .gc-list-zone-inset,
.gc-modal .gc-modal-content--list > .gc-list-zone-inset {
    padding: var(--gc-list-row-padding);
    min-width: 0;
    box-sizing: border-box;
}

.gc-panel-content--list > .gc-stack-sm,
.gc-card-body--list > .gc-stack-sm,
.gc-modal .modal-body.modal-body--list > .gc-stack-sm,
.gc-modal .gc-modal-content--list > .gc-stack-sm {
    gap: var(--gc-list-zone-gap);
}

/*
 * gc-panel-content--list-cards — модификатор на том же узле, что и gc-panel-content--list:
 * прямые дочерние .gc-list-item ведут себя как отдельные карточки (скругление, без глобального
 * border-top между соседями — см. lists.css :not(:first-child)). Ритм между строками задаёт gap у --list.
 * Используй с паттерном gc-list-item-primary-row внутри gc-list-item-body при многострочном теле строки.
 */
.gc-panel-content--list.gc-panel-content--list-cards > :is(
    .gc-list-item,
    .gc-list-item-add,
    .gc-list-item-action,
    .gc-list-stack-item,
    .gc-interactive-row,
    .profile-logistics-list-item
) {
    border-top: none;
    --gc-list-divider-color: transparent;
    border-radius: var(--gc-list-row-radius, var(--radius-12));
    --gc-list-item-padding-y: var(--gc-list-row-padding);
    --gc-list-item-padding-x: var(--gc-list-row-padding);
}

/* Заголовки групп внутри --list: горизонтальный inset как у строк (sm внутри xs зоны) */
.gc-panel-content--list :is(.gc-list-group-header, .challenge-in-panel-section-title),
.gc-card-body--list :is(.gc-list-group-header, .challenge-in-panel-section-title),
.gc-modal .modal-body.modal-body--list :is(.gc-list-group-header, .challenge-in-panel-section-title),
.gc-modal .gc-modal-content--list :is(.gc-list-group-header, .challenge-in-panel-section-title) {
    padding-left: var(--gc-list-row-padding);
    padding-right: var(--gc-list-row-padding);
}

/* Зона gc-panel-content--list: без bleed у flush (lists.css подключается после styles.css — нужна специфичность выше .gc-panel-content .gc-list-group-flush). */
.gc-panel-content.gc-panel-content--list .gc-list-group-flush {
    margin-left: 0;
    margin-right: 0;
}

/* Чип месяца (Figma list_events: px sm поверх padding xs зоны --list) */
:is(.gc-panel-content--list, .gc-card-body--list) .gc-month-toggle-wrap {
    padding-left: var(--gc-list-row-padding);
    padding-right: var(--gc-list-row-padding);
}

/* Bootstrap-обёртки tab-content и tab-pane внутри gc-panel-content--list
 * становятся прозрачными для flex-лейаута (display: contents):
 * gap и порядок айтемов управляются самим gc-panel-content--list,
 * а не дублируются на каждом уровне вложенности.
 * !important — перебивает bootstrap-tab-fix (.tab-pane.active { display: block !important }). */
.gc-panel-content--list .tab-content,
.gc-panel-content--list .tab-pane.show.active,
.gc-panel-content--list > .event-participants-order-pane,
.gc-panel-content--list > .event-participants-weapons-pane,
.gc-panel-content--list > .event-participants-transport-pane {
    display: contents !important;
}

/* Скрытые pane должны оставаться невидимы */
.gc-panel-content--list .tab-pane:not(.show) {
    display: none !important;
}

/*
 * ─── Open-section list: canvas header + boxed shell (Figma 1277:18931) ───
 * Панель без chrome; заголовок на canvas; пункты — в gc-list-section-shell.
 * См. docs/ui-kit/LIST_STACK.md
 */
.gc-panel.gc-panel--sectioned {
    display: flex;
    flex-direction: column;
    gap: var(--gc-list-section-header-gap);
}

.gc-panel.gc-panel--open-section {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    --gc-content-bleed: 0;
    gap: var(--space-6);
}

/* Figma programm: header (canvas) + list shell, gap space/2 (--gc-list-section-header-gap) */
.gc-open-list-section {
    --gc-open-list-section-inset: var(--space-3);
    /* Row Y: space/3 — паритет с inset X; раньше space/2 было тесно во flush-строках */
    --gc-open-list-section-row-padding-y: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--gc-list-section-header-gap);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.gc-panel.gc-panel--open-section > .gc-panel-header.gc-panel-header--list-open,
.gc-open-list-section:not(.gc-open-list-section--framed) > .gc-panel-header.gc-panel-header--list-open {
    padding-block: var(--gc-list-section-header-padding, 0);
    padding-inline: 0;
    background: transparent;
}

/*
 * Open-section canvas header (Figma 1277:18913 / section 1459:19543):
 * row always 32px (title alone or title + CTA) — no jump when button is absent.
 * Title: Heading/H4 (`--type-heading-h4-*`). Gap title↔CTA: md-lg (10px).
 */
.gc-panel-header--list-open {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2-5);
    box-sizing: border-box;
    height: var(--space-8);
    min-height: var(--space-8);
}

.gc-panel-header--list-open .gc-panel-title,
.gc-panel-header--list-open .gc-section-header-trigger__label .gc-panel-title {
    font-size: var(--type-heading-h4-size);
    font-weight: 500;
    line-height: var(--type-heading-h4-line-height);
    color: var(--text-primary);
}

.gc-panel-header--list-open > .gc-section-header-trigger,
.gc-panel-header--list-open > .gc-dropdown > .gc-section-header-trigger {
    min-width: 0;
    height: 100%;
}

/* ─── Section header trigger (Figma 1457:18872) — Heading/H4 + optional meta Body/Medium ─── */
.gc-panel-header--section-trigger {
    justify-content: flex-start;
}

.gc-panel-header--section-trigger .gc-panel-title,
.gc-section-header-trigger .gc-panel-title {
    font-size: var(--type-heading-h4-size);
    font-weight: 500;
    line-height: var(--type-heading-h4-line-height);
    color: var(--text-primary);
}

/*
 * Expand/collapse caret contract (Figma, единый для секций, месяцев, дропдаунов, модалов).
 * Иконка: ph-caret-down / ph-bold ph-caret-down — не менять класс в JS.
 * Закрыто: ↓ · открыто: rotate(-180deg) → ↑
 * Сигналы: [aria-expanded="true"], :checked (toggle), .active (select), [open] (details).
 */
.gc-section-header-trigger__caret i,
button.gc-month-toggle .gc-month-icon,
.gc-toggle-chevron i,
.gc-caret,
.gc-dropdown-caret,
.gc-select-arrow,
.name-history-trigger-caret,
.gc-event-description-modal-collapse-chevron i,
.challenge-form-details__chev,
.channel-members-invite-details__chev {
    transition: transform var(--transition-fast) var(--ease-in-out);
}

.gc-section-header-trigger--toggle[aria-expanded="true"] .gc-section-header-trigger__caret i,
button.gc-month-toggle[aria-expanded="true"] .gc-month-icon,
.gc-toggle-expandable:has(> .gc-toggle-wrapper > .gc-toggle-native:checked) .gc-toggle-chevron i,
.gc-toggle-expandable:has(> .gc-toggle-wrapper > input.gc-toggle:checked) .gc-toggle-chevron i,
[aria-expanded="true"] .gc-caret,
[aria-expanded="true"] .gc-dropdown-caret,
.gc-select-trigger.active .gc-select-arrow,
.gc-select-trigger.active .gc-caret,
.gc-select-trigger[aria-expanded="true"] .gc-select-arrow,
.gc-select-trigger[aria-expanded="true"] .gc-caret,
.gc-select-trigger[data-state="open"] .gc-select-arrow,
.gc-select-trigger[data-state="open"] .gc-caret,
.name-history-trigger[aria-expanded="true"] .name-history-trigger-caret,
.gc-event-description-modal-collapse-hit[aria-expanded="true"] .gc-event-description-modal-collapse-chevron i,
.challenge-form-details[open] .challenge-form-details__chev,
.channel-members-invite-details[open] .channel-members-invite-details__chev {
    transform: rotate(-180deg);
}

@media (prefers-reduced-motion: reduce) {
    .gc-section-header-trigger__caret i,
    button.gc-month-toggle .gc-month-icon,
    .gc-toggle-chevron i,
    .gc-caret,
    .gc-dropdown-caret,
    .gc-select-arrow,
    .name-history-trigger-caret,
    .gc-event-description-modal-collapse-chevron i,
    .challenge-form-details__chev,
    .channel-members-invite-details__chev {
        transition: none;
    }
}

.gc-section-header-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--gc-section-header-trigger-gap);
    box-sizing: border-box;
    margin: 0;
    padding: var(--gc-section-header-trigger-padding-block) var(--gc-section-header-trigger-padding-inline);
    border: none;
    border-radius: var(--gc-section-header-trigger-radius);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
    max-width: 100%;
    -webkit-appearance: none;
    appearance: none;
    transition: background var(--transition-fast) var(--ease-in-out);
}

.gc-section-header-trigger--static {
    cursor: default;
}

@media (hover: hover) and (pointer: fine) {
    .gc-section-header-trigger:not(.gc-section-header-trigger--static):hover {
        background: var(--gc-section-header-trigger-hover-bg);
    }
}

.gc-section-header-trigger__label {
    display: inline-flex;
    align-items: center;
    gap: var(--gc-section-header-trigger-gap);
    min-width: 0;
}

.gc-section-header-trigger__label > a {
    display: inline-flex;
    flex-shrink: 0;
    color: inherit;
    text-decoration: none;
}

.gc-section-header-trigger__label .gc-panel-title {
    margin: 0;
    font-size: var(--font-size-16);
    font-weight: 500;
    line-height: var(--type-heading-h4-line-height);
    color: var(--text-primary);
}

.gc-section-header-trigger__meta {
    font-size: var(--type-body-size);
    font-weight: 500;
    line-height: var(--type-body-line-height);
    color: var(--text-secondary);
}

.gc-section-header-trigger__lead,
.gc-section-header-trigger__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--font-size-16);
    height: var(--font-size-16);
}

.gc-section-header-trigger__lead {
    color: var(--text-primary);
}

.gc-section-header-trigger__caret {
    color: var(--text-primary);
}

.gc-section-header-trigger__lead i,
.gc-section-header-trigger__caret i {
    font-size: var(--font-size-16);
    line-height: 1;
    transition:
        transform var(--transition-fast) var(--ease-in-out),
        color var(--transition-fast) var(--ease-in-out);
}

/* Figma section 1457:18872 — caret rest tertiary · hover secondary (gray/700 light) */
.gc-section-header-trigger--toggle .gc-section-header-trigger__caret {
    color: var(--text-tertiary);
}

.gc-section-header-trigger--toggle .gc-section-header-trigger__caret i {
    color: inherit;
}

@media (hover: hover) and (pointer: fine) {
    .gc-section-header-trigger--toggle:not(.gc-section-header-trigger--static):hover .gc-section-header-trigger__caret {
        color: var(--text-secondary);
    }
}

.gc-section-header-trigger--toggle:not(.gc-section-header-trigger--static):focus-visible .gc-section-header-trigger__caret {
    color: var(--text-secondary);
}

.gc-section-header-trigger:focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: 2px;
}

/* Canvas open-section (Figma 1459:19541): dropdown-заголовок — caret-right, без chip-hover */
@media (min-width: 1280px) and (hover: hover) and (pointer: fine){
.gc-open-list-section > .gc-panel-header--section-trigger .gc-section-header-trigger.gc-dropdown-toggle:is(:hover, [aria-expanded="true"]) {
    background: transparent;
    border: none;
    box-shadow: none;
}
}
.gc-open-list-section > .gc-panel-header--section-trigger .gc-section-header-trigger.gc-dropdown-toggle:is( [aria-expanded="true"]) {
    background: transparent;
    border: none;
    box-shadow: none;
}

.gc-open-list-section > .gc-panel-header--section-trigger .gc-section-header-trigger.gc-dropdown-toggle .gc-section-header-trigger__caret {
    color: var(--text-primary);
}

.gc-section-header-trigger.gc-dropdown-toggle {
    padding: var(--gc-section-header-trigger-padding-block) var(--gc-section-header-trigger-padding-inline);
    border: none;
    background: transparent;
    font-size: var(--font-size-16);
    font-weight: 500;
    line-height: var(--type-heading-h4-line-height);
    transition: background var(--transition-fast) var(--ease-in-out);
}

.gc-section-header-trigger.gc-dropdown-toggle::after {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .gc-section-header-trigger.gc-dropdown-toggle:not(.gc-section-header-trigger--static):hover {
        background: var(--gc-section-header-trigger-hover-bg);
        border: none;
        box-shadow: none;
    }
}

.gc-section-header-trigger.gc-dropdown-toggle:not(.gc-section-header-trigger--static)[aria-expanded="true"] {
    background: var(--gc-section-header-trigger-hover-bg);
    border: none;
    box-shadow: none;
}

.gc-section-header-trigger.gc-dropdown-toggle:focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: 2px;
    box-shadow: none;
}

/*
 * Open-section canvas header — CTA (Figma btns/bordered sm, 1277:18913).
 * «Добавить» / «Изменить» / «Перемешать» — 32px, UI/Caption/Medium (13); md только явный .gc-btn-md.
 */
.gc-panel-header--list-open :is(
    > .gc-btn-bordered,
    > .gc-dropdown > .gc-btn.gc-btn-bordered.gc-dropdown-toggle,
    .gc-panel-actions .gc-btn-bordered,
    .gc-panel-actions .gc-dropdown > .gc-btn.gc-btn-bordered.gc-dropdown-toggle
) {
    font-size: var(--font-size-13);
    font-weight: 500;
    line-height: var(--type-ui-caption-line-height);
}

/* Figma 1346:16295 — subheader вокруг tab-track; padding на .gc-tabs не трогаем.
   Ширина: по умолчанию fit-content (tabs.css); во всю — только .gc-tabs-full. */
.gc-list-section-shell > .gc-list-section-shell-subheader {
    padding: var(--gc-list-open-row-padding) var(--gc-list-open-row-padding) var(--space-1);
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

/* Tab subheader: full-width track или fit-content (default без full) */
.gc-list-section-shell-subheader--tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.gc-list-section-shell-subheader--tabs-fit {
    align-items: flex-start;
}

.gc-list-section-shell-subheader--tabs:not(.gc-list-section-shell-subheader--tabs-fit) > .gc-tabs,
.gc-list-section-shell-subheader > .gc-tabs.gc-tabs-full {
    width: 100%;
}

.gc-open-list-section-chrome > .gc-list-section-shell-subheader {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Underline в framed open-section: track-line на всю ширину карточки = разделитель */
.gc-open-list-section--framed:not(.gc-open-list-section--header-above) > .gc-open-list-section-chrome.gc-open-list-section-chrome--underline-tabs {
    padding-bottom: 0;
    border-bottom: none;
}

/* Chrome: bleed из padding chrome — margin alone не расширяет border-box flex-item */
.gc-open-list-section-chrome > .gc-list-section-shell-subheader--underline-tabs {
    position: relative;
    box-sizing: border-box;
    margin-inline: calc(-1 * var(--gc-open-list-section-inset, var(--space-3)));
    width: calc(100% + (2 * var(--gc-open-list-section-inset, var(--space-3))));
    max-width: none;
    padding: 0;
    align-self: stretch;
    border-bottom: none;
}

/* Shell (header-above / legacy): subheader = full shell, без bleed */
.gc-open-list-section--framed .gc-list-section-shell--flush > .gc-list-section-shell-subheader--underline-tabs {
    position: relative;
    box-sizing: border-box;
    margin-inline: 0;
    width: 100%;
    max-width: none;
    padding: 0;
    align-self: stretch;
    border-bottom: none;
}

.gc-list-section-shell-subheader--underline-tabs > .gc-tabs.gc-tabs--underline,
.event-participants-add-stack--underline-tabs > .gc-tabs.gc-tabs--underline,
.weapon-class-inset-selector__tabs > .gc-tabs.gc-tabs--underline {
    --gc-tabs-underline-track-inset: 0;
    --gc-tabs-underline-block-px: var(--gc-open-list-section-inset, var(--space-3));
    width: 100%;
    max-width: none;
    display: flex;
    padding-inline: 0;
    padding-top: 0;
    box-sizing: border-box;
}

.weapon-class-inset-selector__tabs > .gc-tabs.gc-tabs--underline {
    /* Подписи на линии контента списка (кикер и название класса), не на линии
       заголовка модалки. Линия — на ширину chrome. Ячейки по тексту.
       Ховер — только цвет текста: плашка elevated рисуется в tabs.css и
       на короткой подписи висит над линией. */
    --gc-tabs-underline-block-px: var(--space-2);
    --gc-tabs-underline-block-outset: 0px;
    --gc-tabs-underline-block-bg-hover: transparent;
    --gc-tabs-underline-block-bg-active: transparent;
    --gc-tabs-underline-block-shadow-active: none;
    --weapon-class-tabs-label-inset: calc(
        var(--gc-list-zone-padding) + var(--space-1-5) + var(--gc-list-row-padding)
    );
}

.weapon-class-inset-selector__tabs > .gc-tabs.gc-tabs-full .gc-tab-item {
    flex: 0 0 auto;
}

.weapon-class-inset-selector__tabs > .gc-tabs.gc-tabs--underline > .gc-tab-item:first-of-type {
    margin-inline-start: calc(
        var(--weapon-class-tabs-label-inset) - var(--gc-tabs-underline-block-px)
    );
}

.weapon-class-inset-selector__tabs > .gc-tabs.gc-tabs--underline :is(.gc-tab-link, button.gc-tab-link) {
    flex: 0 0 auto;
    width: auto;
}

.weapon-class-inset-selector__tabs > .gc-tabs.gc-tabs--ghost :is(.gc-tab-link, button.gc-tab-link) {
    font-size: var(--font-size-12);
}

.gc-list-section-shell-subheader--underline-tabs > .gc-tabs.gc-tabs--underline::before,
.event-participants-add-stack--underline-tabs > .gc-tabs.gc-tabs--underline::before,
.weapon-class-inset-selector__tabs > .gc-tabs.gc-tabs--underline::before {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 100%;
}

/* Add footer: underline track = border-top секции */
.event-participants-add-section--underline-tabs {
    padding-top: 0;
    border-top: none;
}

.event-participants-add-stack--underline-tabs {
    position: relative;
    box-sizing: border-box;
    margin-inline: calc(-1 * var(--gc-open-list-section-inset, var(--space-3)));
    width: calc(100% + (2 * var(--gc-open-list-section-inset, var(--space-3))));
    max-width: none;
    padding-inline: 0;
    padding-top: 0;
    align-self: stretch;
}

.gc-open-list-section--framed .gc-list-section-shell--flush:not(:has(> .event-participants-add-section)):not(:has(> .event-show-hero-stats)) > :is(
    .event-participants-transport-pane,
    .event-participants-weapons-pane
):last-child {
    padding-bottom: var(--gc-open-list-section-inset, var(--space-3));
    box-sizing: border-box;
}

.gc-list-section-shell > .gc-panel-header--list-shell {
    padding: var(--gc-list-open-row-padding) var(--gc-list-open-row-padding) var(--gc-list-section-shell-header-padding-block-end);
    margin: 0;
    background: transparent;
}

.gc-list-section-shell > .gc-panel-header--list-shell .gc-panel-title {
    font-size: var(--type-heading-h4-size);
    font-weight: 600;
    line-height: var(--type-heading-h4-line-height);
}

/* Footer внутри белой оболочки — форма добавления участника и др. */
.gc-list-section-shell > .gc-panel-footer--list-shell {
    padding: var(--gc-list-section-shell-header-padding-block-end) var(--gc-list-open-row-padding) var(--gc-list-open-row-padding);
    margin: 0;
    background: transparent;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* Grouping shell списка — Surface/Secondary без рамки */
.gc-list-section-shell,
.event-show-list-shell,
.gc-panel-content.gc-panel-content--list:is(.gc-list-section-shell, .event-show-list-shell) {
    display: flex;
    flex-direction: column;
    gap: var(--gc-list-section-shell-gap);
    padding: var(--gc-list-section-shell-padding);
    background: var(--surface-secondary);
    border: none;
    border-radius: var(--gc-list-section-shell-radius);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    /* Dark panel/shell: иконки не surface-control (800) — иначе «hover в покое» */
    --gc-list-media-frame-bg: var(--surface-subtle);
}

/* Opt-in: shell с рамкой */
.gc-list-section-shell.gc-list-section-shell--bordered {
    border: 1px solid var(--border-subtle);
}

/*
 * Flush shell — только тело списка без inset оболочки.
 * Chrome (subheader, footer, empty, stats) — inset через gc-open-list-section--framed.
 */
.gc-list-section-shell--flush {
    padding: 0;
    --gc-list-section-shell-padding: 0;
    gap: 0;
    --gc-list-section-shell-gap: 0;
    --gc-list-row-radius: 0;
}

/*
 * Open-section framed card (Figma programm / roster).
 *
 * Frame placement (только где border/bg):
 *   default — рамка на секции (header inside)
 *   --header-above — рамка на shell; header на canvas
 *
 * Отступы (не зависят от placement):
 *   --inset (space/3 = 12) — chrome: header / tabs / footer / края карточки
 *   --row-padding-y (space/3 = 12) — Y у строк списка (= inset X; ритм flush-айтема)
 *   X у строк = inset (выравнивание с chrome)
 *   divider: chrome (header±tabs) → border-bottom; footer → border-top
 *
 * Row padding — в lists.css (после .gc-list-stack-item--roster), иначе shorthand roster затирает края.
 */
.gc-open-list-section--framed {
    --gc-open-list-section-inset: var(--space-3);
    --gc-open-list-section-chrome-inset: var(--gc-open-list-section-inset);
    --gc-open-list-section-row-padding-y: var(--space-3);
    /* Список: Y = row-padding-y. Не подменять на отдельный inset-токен вне --framed. */
    --gc-list-open-row-padding: var(--gc-open-list-section-row-padding-y);
    gap: 0;
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-16);
    box-sizing: border-box;
    overflow: hidden;
}

/* Header на canvas: тот же inset-gap, что chrome внутри карточки */
.gc-open-list-section--framed.gc-open-list-section--header-above {
    gap: var(--gc-open-list-section-inset);
    background: transparent;
    border: none;
    border-radius: 0;
}

/*
 * Framed inside chrome: title + optional tabs — одна border-bottom.
 * (tabs больше не в shell и не дублируют линию)
 */
.gc-open-list-section-chrome {
    display: flex;
    flex-direction: column;
    gap: var(--gc-open-list-section-row-padding-y, var(--space-3));
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.gc-open-list-section--framed:not(.gc-open-list-section--header-above) > .gc-open-list-section-chrome {
    padding: var(--gc-open-list-section-inset);
    border-bottom: 1px solid var(--border-subtle);
}

.gc-open-list-section--framed:not(.gc-open-list-section--header-above) > .gc-open-list-section-chrome > .gc-panel-header.gc-panel-header--list-open {
    box-sizing: border-box;
    height: var(--space-8);
    min-height: var(--space-8);
    max-height: var(--space-8);
    align-items: center;
    padding: 0;
    border: none;
}

.gc-open-list-section--framed:not(.gc-open-list-section--header-above) > .gc-open-list-section-chrome > .gc-panel-header--list-open > .gc-section-header-trigger,
.gc-open-list-section--framed:not(.gc-open-list-section--header-above) > .gc-open-list-section-chrome > .gc-panel-header--list-open > .gc-dropdown > .gc-section-header-trigger {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--space-8);
    min-height: var(--space-8);
    align-self: center;
}

.gc-open-list-section--framed:not(.gc-open-list-section--header-above) > .gc-open-list-section-chrome > .gc-panel-header--list-open > .gc-panel-actions {
    flex-shrink: 0;
    align-self: center;
    height: var(--space-8);
    min-height: var(--space-8);
}

.gc-open-list-section--framed:not(.gc-open-list-section--header-above) > .gc-open-list-section-chrome > .gc-list-section-shell-subheader {
    padding: 0;
    border: none;
    border-radius: 0;
}

/* Fallback: header без chrome-обёртки (legacy) — тот же inset + одна линия */
.gc-open-list-section--framed:not(.gc-open-list-section--header-above) > .gc-panel-header.gc-panel-header--list-open {
    box-sizing: border-box;
    height: calc((2 * var(--gc-open-list-section-inset)) + var(--space-8));
    min-height: calc((2 * var(--gc-open-list-section-inset)) + var(--space-8));
    max-height: calc((2 * var(--gc-open-list-section-inset)) + var(--space-8));
    align-items: center;
    padding: var(--gc-open-list-section-inset);
    border-bottom: 1px solid var(--border-subtle);
}

.gc-open-list-section--framed:not(.gc-open-list-section--header-above) > .gc-panel-header--list-open > .gc-section-header-trigger,
.gc-open-list-section--framed:not(.gc-open-list-section--header-above) > .gc-panel-header--list-open > .gc-dropdown > .gc-section-header-trigger {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--space-8);
    min-height: var(--space-8);
    align-self: center;
}

.gc-open-list-section--framed:not(.gc-open-list-section--header-above) > .gc-panel-header--list-open > .gc-panel-actions {
    flex-shrink: 0;
    align-self: center;
    height: var(--space-8);
    min-height: var(--space-8);
}

/* Header above: canvas 32px */
.gc-open-list-section--framed.gc-open-list-section--header-above > .gc-panel-header.gc-panel-header--list-open {
    box-sizing: border-box;
    height: var(--space-8);
    min-height: var(--space-8);
    max-height: var(--space-8);
    align-items: center;
    padding: 0;
    background: transparent;
}

.gc-open-list-section--framed.gc-open-list-section--header-above > .gc-panel-header--list-open > .gc-section-header-trigger,
.gc-open-list-section--framed.gc-open-list-section--header-above > .gc-panel-header--list-open > .gc-dropdown > .gc-section-header-trigger {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--space-8);
    align-self: center;
}

.gc-open-list-section--framed.gc-open-list-section--header-above > .gc-panel-header--list-open > .gc-panel-actions {
    flex-shrink: 0;
    align-self: center;
    height: var(--space-8);
}

.gc-open-list-section--framed > .gc-list-section-shell--flush {
    background: transparent;
    border: none;
    border-radius: 0;
    --gc-list-row-radius: 0;
}

/* Footer внутри framed-карточки (сезоны «Весь сезон», usage CTA) */
.gc-open-list-section--framed > .gc-panel-footer {
    padding: var(--gc-open-list-section-inset);
    border-top: 1px solid var(--border-subtle);
    box-sizing: border-box;
}

.gc-open-list-section--framed > .gc-panel-footer.gc-panel-footer--post-link {
    padding: 0;
}

.gc-open-list-section--framed > .gc-panel-footer.gc-panel-footer--post-link > .gc-post-discussion-link {
    border-radius: 0;
}

.gc-open-list-section--framed.gc-open-list-section--header-above > .gc-list-section-shell--flush {
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-16);
}

/*
 * Body chrome — footer (inset = 12).
 * Tabs в shell (header-above / legacy) — одна линия на subheader.
 * Tabs в .gc-open-list-section-chrome — без своей линии (линия на chrome).
 */
.gc-open-list-section--framed .gc-list-section-shell--flush > .gc-list-section-shell-subheader {
    padding: var(--gc-open-list-section-inset);
    box-sizing: border-box;
    border-radius: 0;
    border-bottom: 1px solid var(--border-subtle);
}

.gc-open-list-section--framed .gc-list-section-shell--flush > .event-show-hero-stats {
    padding: var(--gc-open-list-section-inset);
    box-sizing: border-box;
    border-radius: 0;
    border-top: 1px solid var(--border-subtle);
}

/*
 * Stats as sole body (stage show «Статистика»): chrome already has border-bottom.
 * Keep border-top only when stats are a footer after list rows (event program).
 */
.gc-open-list-section--framed .gc-list-section-shell--flush > .event-show-hero-stats:first-child {
    border-top: none;
}

/* Description / prose / skeleton bones — inset when flush shell has no pad */
.gc-open-list-section--framed .gc-list-section-shell--flush > .gc-list-zone-inset.event-description-text {
    padding: var(--gc-open-list-section-inset, var(--space-3));
    box-sizing: border-box;
}

/* Add: inset только на .event-participants-add-stack (tabs+инпут); секция без pad — результаты на ширину shell */
.gc-open-list-section--framed .gc-list-section-shell--flush > .event-participants-add-section {
    padding: 0;
    box-sizing: border-box;
    border-radius: 0;
    border-top: 1px solid var(--border-subtle);
}

.gc-open-list-section--framed .gc-list-section-shell--flush > .gc-empty-state {
    padding: var(--space-6) var(--gc-open-list-section-inset);
    box-sizing: border-box;
    border-radius: 0;
}

/* Weapon rows в framed flush — Y/X = row-padding-y / inset (оба space/3) */
.gc-open-list-section--framed .gc-list-section-shell--flush .event-participants-weapons-pane .gc-list-shell-weapon {
    gap: 0;
    background: transparent;
    border-radius: 0;
}

.gc-open-list-section--framed .gc-list-section-shell--flush .event-participants-weapons-pane .gc-list-shell-weapon > .gc-list-item.event-participants-weapons-owner {
    --gc-list-item-padding-x: var(--gc-open-list-section-inset);
    --gc-list-item-padding-y: var(--gc-open-list-section-row-padding-y);
    background: var(--gc-list-open-item-bg);
    border-radius: 0;
}

.gc-open-list-section--framed .gc-list-section-shell--flush .event-participants-weapons-pane .gc-list-shell-extra-list {
    gap: 0;
}

.gc-open-list-section--framed .gc-list-section-shell--flush .event-participants-weapons-pane .gc-list-shell-extra-list > .gc-list-item {
    --gc-list-item-padding-x: var(--gc-open-list-section-inset);
    --gc-list-item-padding-y: var(--gc-open-list-section-row-padding-y);
    padding: var(--gc-open-list-section-row-padding-y) var(--gc-open-list-section-inset);
    border-radius: 0;
    background: var(--gc-list-open-item-bg);
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

.gc-open-list-section--framed .gc-list-section-shell--flush .event-participants-weapons-pane .gc-list-shell-extra-list > .gc-list-item:hover {
    background: var(--gc-list-open-item-hover-bg);
}
}

/*
 * Event / context rail modules — Surface/Secondary без рамки
 * (about_event 1075:7121, loadout 1279:20949, transport 1279:21420).
 * Dark: холст Page = gray/1000; рейлы и карточки Primary/Secondary = gray/900.
 * App rail — app-rail.css.
 */
.gc-rail-section-shell,
.sidebar-profile-block,
.sidebar-event-info-block,
.event-context-sidebar-loadout,
.sidebar-list-block {
    background: var(--surface-secondary);
    border: none;
    box-shadow: none;
    --gc-list-media-frame-bg: var(--surface-subtle);
}

/* Обёртка roster с табами / edge chrome на event show */
.event-show-list-chrome {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Open-зона: без inset на корне; shell — на том же узле или внутри */
.gc-panel-content.gc-panel-content--list.gc-panel-content--list-open:not(.gc-list-section-shell):not(.event-show-list-shell) {
    padding: 0;
    gap: 0;
    background: transparent;
}

.gc-panel-content--list-open--stack-gap:not(.gc-list-section-shell):not(.event-show-list-shell) {
    gap: var(--gc-list-section-shell-gap);
}

.gc-panel-content--list-rows-2xl {
    --gc-list-row-radius: var(--radius-16);
    --gc-list-media-radius: var(--gc-list-row-radius);
}

/* Panel Actions — группировка нескольких элементов справа в gc-panel-header.
   Используй только когда элементов >1 (например, табы + кнопка).
   Для одного элемента — помести его прямо в gc-panel-header. */
.gc-panel-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.gc-panel-actions--spread {
    justify-content: space-between;
    width: 100%;
}

/* Панель с табами/dropdown внутри — не обрезать меню (event roster и др.) */
@media (max-width: 991px) {
    .gc-panel--dropdown-host {
        overflow: visible !important;
    }

    .gc-panel--dropdown-host :is(.gc-panel-content, .tab-content) {
        overflow: visible !important;
    }

    .gc-panel--dropdown-host .event-participants-order-pane,
    .gc-panel--dropdown-host .event-participants-transport-pane,
    .gc-panel--dropdown-host .event-participants-weapons-pane {
        overflow: visible !important;
    }

    .gc-panel--dropdown-host .event-participants-order-pane :is(.gc-list-group, .event-participants-grid),
    .gc-panel--dropdown-host .event-participants-transport-pane :is(.gc-list-group, .event-participants-grid),
    .gc-panel--dropdown-host .event-participants-weapons-pane .gc-list-shell-weapon {
        overflow: visible !important;
    }
}

/* Убираем margin у всех детей gc-panel-actions */
.gc-panel-actions > * {
    margin: 0;
}

/* Убираем margin у заголовков и мета-информации внутри gc-panel-actions */
.gc-panel-actions h1,
.gc-panel-actions h2,
.gc-panel-actions h3,
.gc-panel-actions h4,
.gc-panel-actions h5,
.gc-panel-actions h6,
.gc-panel-actions p,
.gc-panel-actions .gc-list-meta,
.gc-panel-actions .gc-panel-title {
    margin: 0;
}

/* Убираем margin у всех детей gc-panel-footer */
.gc-panel-footer > * {
    margin: 0;
}

/* Полноширинная нижняя ссылка как «Обсуждение» у поста (канал → сезоны и др.) */
.gc-panel-footer.gc-panel-footer--post-link {
    padding: 0;
}

.gc-panel-footer.gc-panel-footer--post-link > .gc-post-discussion-link {
    margin-top: 0;
    border-radius: 0 0 var(--gc-corner-outer) var(--gc-corner-outer);
}


/* Rating Content - контейнер для результатов рейтинга */
.rating-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.class-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Info Block - информационный блок */
.gc-info-block {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    padding: 0;
    font-size: var(--font-size-13);
    color: var(--text-secondary);
    line-height: 1.4;
}

.gc-info-block i {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Callout — информационный баннер: иконка слева, текст и действия в одной колонке */
.gc-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-2);
    row-gap: var(--space-2);
    align-items: start;
    padding: var(--space-4);
    border-radius: var(--radius-12);
    border: 1px solid var(--border-subtle);
    background: var(--surface-control);
}

.gc-callout-header {
    display: contents;
}

.gc-callout-icon {
    grid-column: 1;
    grid-row: 1;
    flex-shrink: 0;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1;
    margin-top: 2px;
}

.gc-callout-title {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-size: var(--font-size-14);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0;
}

.gc-callout-desc {
    grid-column: 2;
    min-width: 0;
    font-size: var(--font-size-13);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.gc-callout-actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
}

.gc-callout--warning {
    border-color: rgba(var(--warning-color-rgb), 0.45);
    background: rgba(var(--warning-color-rgb), 0.06);
}

.gc-callout--warning .gc-callout-icon {
    color: var(--warning-color);
}

.gc-callout--danger {
    border-color: rgba(var(--danger-color-rgb), 0.5);
    background: rgba(var(--danger-color-rgb), 0.08);
}

.gc-callout--danger .gc-callout-icon {
    color: var(--danger-color);
}

.gc-callout--danger .gc-callout-desc {
    color: var(--text-primary);
}

.gc-callout--success {
    border-color: rgba(var(--success-color-rgb), 0.45);
    background: rgba(var(--success-color-rgb), 0.06);
}

.gc-callout--success .gc-callout-icon {
    color: var(--success-color);
}

/* Lead: иконка + title одной строкой, описание на всю ширину ниже */
.gc-callout--stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gc-callout--stack .gc-callout-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.gc-callout--stack .gc-callout-icon {
    font-size: var(--font-size-20);
    margin-top: 0;
}

.gc-callout--stack .gc-callout-title,
.gc-callout--stack .gc-callout-desc,
.gc-callout--stack .gc-callout-actions {
    grid-column: unset;
}

/* Figma Tint/Tinted/Blue — поверхность, не mix хроматического Violet */
.gc-callout--tint {
    background: var(--tint-tinted-blue);
    border-color: color-mix(in srgb, var(--tint-blue) 22%, var(--border-subtle));
}

.gc-callout--tint .gc-callout-icon {
    color: var(--tint-blue);
}

/* Help Button - кнопка справки в панели */
.gc-help-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    padding: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-20);
    cursor: pointer;
    transition: color var(--transition-fast) ease, 
                background-color var(--transition-fast) ease;
    flex-shrink: 0;
    border-radius: var(--radius-full);
}

.gc-help-button:hover {
    color: var(--text-primary);
    background: var(--surface-row-hover);
}

/* Inline вариант кнопки справки */
.gc-help-button--inline {
    display: inline-flex;
    width: var(--space-6);
    height: var(--space-6);
    font-size: var(--font-size-base);
    vertical-align: middle;
    margin-left: 0;
}

/* Top Participants Grid - сетка для топ-3 */
.gc-top-participants-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

@media (max-width: 991px) {
    .gc-top-participants-grid {
        grid-template-columns: 1fr;
    }
}

/* Score Wrapper - обертка для очков и процента */
.gc-score-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

/* Exercise Title Wrapper - обертка для заголовка упражнения */
/* Секция упражнения (без аккордеона) */
.gc-exercise-section {
    display: flex;
    flex-direction: column;
}

/* Список упражнений в теле панели: gap панели даёт ритм; не дублируем с margin */
.gc-panel-content:has(> .gc-exercise-section) {
    gap: var(--space-2);
}

.gc-panel-content > .gc-exercise-section + .gc-exercise-section {
    margin-top: 0;
}

.gc-exercise-section + .gc-exercise-section {
    margin-top: var(--space-1);
}

/* Результаты мероприятия: «Зачётные / Тренировочные» — секции внутри tab-pane,
 * не прямые дети gc-panel-content (bootstrap-tab-fix задаёт display:block !important).
 * Flex + gap вместо margin-соседей .gc-exercise-section. */
#exercises-scored.tab-pane.active,
#exercises-training.tab-pane.active {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-4);
}

#exercises-scored.tab-pane.active .gc-exercise-section + .gc-exercise-section,
#exercises-training.tab-pane.active .gc-exercise-section + .gc-exercise-section {
    margin-top: 0;
}

.gc-exercise-section__card {
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-16);
    overflow: hidden;
}

.gc-exercise-section__header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.gc-exercise-result-card__badge-push {
    margin-inline-start: auto;
}

/* Заголовок упражнения */
.gc-exercise-title {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--font-size-14);
    font-weight: 500;
    color: var(--text-primary);
}

/* Карточка результата одного стрелка (мобильный вид) */
.gc-exercise-result-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.gc-exercise-result-card:last-child {
    border-bottom: none;
}

.gc-exercise-result-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

button.gc-exercise-result-card__person {
    appearance: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

button.gc-exercise-result-card__person:hover .gc-exercise-result-card__name {
    color: var(--accent-link);
}
}


button.gc-exercise-result-card__person:focus-visible .gc-exercise-result-card__name {
    color: var(--accent-link);
}

.gc-exercise-result-card__label {
    display: block;
    font-size: var(--font-size-13);
    color: var(--text-secondary);
}

.gc-exercise-result-card__name {
    font-weight: 600;
    font-size: var(--font-size-14);
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

a.gc-exercise-result-card__name:hover {
    color: var(--accent-link);
}
}

.gc-exercise-number {
    color: var(--text-secondary);
}

/* Пустое состояние — нет результатов */
.gc-exercise-empty {
    padding: var(--space-2) var(--space-4);
    color: var(--text-secondary);
    font-size: var(--font-size-14);
    margin: 0;
}

/* ─── Таблица UI Kit (shadcn-style) ─────────────────────────────── */

/* Враппер для горизонтального скролла */
.gc-table-wrapper {
    position: relative;
    width: 100%;
    overflow-x: auto;
}

.gc-table {
    width: 100%;
    border-collapse: collapse;
    caption-side: bottom;
    font-size: var(--font-size-14);
    color: var(--text-primary);
}

.gc-table caption {
    margin-top: var(--space-2);
    font-size: var(--font-size-14);
    color: var(--text-secondary);
    text-align: center;
}

/* Заголовок: только нижний бордер под всей строкой */
.gc-table thead tr {
    border-bottom: 1px solid var(--border-subtle);
}

.gc-table thead th {
    height: 2.5rem; /* 40px — как в shadcn */
    padding: 0 var(--space-4);
    text-align: left;
    vertical-align: middle;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Тело: нижний бордер на каждой строке, hover с переходом */
.gc-table tbody tr {
    border-bottom: 1px solid var(--border-subtle);
    transition: background-color 0.15s ease;
}

.gc-table tbody tr:last-child {
    border-bottom: none;
}

.gc-table tbody tr:hover {
    background: var(--surface-row-hover);
}

.gc-table tbody td {
    padding: var(--space-2) var(--space-4);
    vertical-align: middle;
}

/* Футер таблицы */
.gc-table tfoot tr {
    border-top: 1px solid var(--border-subtle);
}

.gc-table tfoot td {
    padding: var(--space-2) var(--space-4);
    vertical-align: middle;
    font-weight: 500;
}

/* Враппер таблицы упражнений — расширяет gc-table-wrapper */
.gc-exercise-table {
    overflow-x: auto;
}

.gc-exercise-table .gc-table {
    font-variant-numeric: tabular-nums;
}

.gc-exercise-table .gc-table thead th {
    height: auto;
    padding: var(--space-2) var(--space-2);
    font-size: var(--font-size-12);
    font-weight: 500;
    white-space: nowrap;
}

.gc-exercise-table .gc-table tbody td {
    padding: var(--space-1-5) var(--space-2);
}

/* Числовые ячейки результатов по центру, кроме первой (имя стрелка) */
.gc-exercise-table .gc-table thead th:not(:first-child),
.gc-exercise-table .gc-table tbody td:not(:first-child) {
    text-align: center;
}

.gc-exercise-table .gc-table thead th:first-child,
.gc-exercise-table .gc-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    background: var(--surface-primary);
    box-shadow: 1px 0 0 var(--border-subtle);
}

.gc-exercise-table .gc-table tbody tr:hover td:first-child {
    background: var(--surface-interaction-row-hover);
}

/* Ячейка стрелка в таблице (аватар + имя) */
.gc-table-shooter {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    min-width: 0;
}

.gc-table-shooter .avatar-with-rank {
    flex-shrink: 0;
}

.gc-table-shooter__name {
    font-weight: 500;
    color: inherit;
    text-decoration: none;
}

button.gc-table-shooter {
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

button.gc-table-shooter:hover .gc-table-shooter__name,
button.gc-table-shooter:focus-visible .gc-table-shooter__name {
    color: var(--accent-link);
}

a.gc-table-shooter__name:hover {
    color: var(--accent-link);
}

/* Иконка "Вне зачёта" рядом с именем */
.gc-not-qualified-icon {
    color: var(--color-warning);
    margin-left: var(--space-1);
    vertical-align: middle;
}

/* ── Интерактивность таблицы результатов ─────────────────────── */

/* Кликабельные строки */
.gc-table tbody tr.profile-trigger {
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.gc-table tbody tr.profile-trigger:hover td {
    background-color: var(--surface-row-hover);
}

/* Строка текущего пользователя */
.gc-table-row--mine td {
    background-color: color-mix(in srgb, var(--accent-link) 8%, transparent);
}

.gc-table tbody tr.gc-table-row--mine:hover td {
    background-color: color-mix(in srgb, var(--accent-link) 12%, transparent);
}

.gc-exercise-table .gc-table tbody tr.gc-table-row--mine td:first-child {
    background-color: color-mix(in srgb, var(--accent-link) 8%, var(--surface-primary));
}

.gc-exercise-table .gc-table tbody tr.gc-table-row--mine:hover td:first-child {
    background-color: color-mix(in srgb, var(--accent-link) 12%, var(--surface-primary));
}

/* Лучшее значение в колонке */
.gc-cell--best {
    font-weight: 600;
    color: var(--accent-link);
}

/* Все зоны Alpha */
.gc-cell--perfect {
    font-weight: 600;
    color: var(--success-color);
}

/* Промахи */
.gc-cell--bad {
    color: var(--danger-color);
    font-weight: 600;
}

/* Мобильная карточка — hover и своя */
.gc-exercise-result-card.profile-trigger {
    cursor: pointer;
    transition: background-color var(--transition-base);
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

.gc-exercise-result-card.profile-trigger:hover {
    background-color: var(--surface-row-hover);
}
}

.gc-exercise-result-card.gc-table-row--mine {
    background-color: color-mix(in srgb, var(--accent-link) 8%, transparent);
}

/* Сетка статистики в мобильной карточке */
.gc-exercise-result-card__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-1) var(--space-2);
}

.gc-exercise-result-card__grid-item {
    min-width: 0;
}

.gc-exercise-result-card__grid-item--hero {
    grid-column: span 2;
}

/* Первый элемент в панели - убираем верхний отступ */
.gc-panel > *:first-child {
    margin-top: 0 !important;
}

/* Последний элемент в панели - убираем нижний отступ */
.gc-panel > *:last-child {
    margin-bottom: 0 !important;
}

/* Backwards compatibility - удалить после рефакторинга */
.solid-list {
    background-color: var(--surface-panel);
    padding: var(--space-4);
    border-radius: var(--radius-16);
    margin-bottom: var(--space-4);
}

@media (max-width: 576px) {
    .solid-list {
        padding: var(--space-2);
    }
}

.solid-list .form-control {
    background-color: var(--surface-canvas);
}

/**BADGES**/
.badge {
    font-weight: 500;
    font-size: var(--font-size-tertiary);
}

.card .bg-dark {
    background-color: var(--surface-control) !important;
    color: var(--text-secondary) !important;
}

.text-light {
    color: var(--text-secondary) !important;
}

.badge-accent {
    background: var(--badge-accent) !important;
}

/**BTNS**/
.btn-accent {
    background-color: var(--accent-btn-primary) !important;
    color: var(--text-primary);
    border-color: var(--accent-btn-primary);
    font-weight: 500;
}

.btn-outline-secondary {
    border-color: var(--border-subtle);
    color: var(--text-secondary);
}

.btn-outline-secondary:hover {
    background-color: var(--surface-control);
    border-color: var(--border-subtle);
}

.btn-outline-secondary.show {
    background-color: var(--surface-control) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-secondary);
    box-shadow: var(--inner-shadow);
}

.btn-outline-secondary:active {
    background-color: var(--surface-control) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-secondary);
    box-shadow: var(--inner-shadow);
}


.btn-accent:hover {
    background-color: var(--accent-btn-primary-hover) !important;
    border-color: var(--accent-btn-primary-hover);
    color: var(--text-primary);
    box-shadow: var(--inner-shadow);
}

.btn-accent:active {
    background-color: var(--accent-btn-primary-hover) !important;
    border-color: var(--accent-btn-primary-hover) !important;
    box-shadow: var(--inner-shadow);
}

.btn-fixed {
    background-color: var(--accent-btn-primary) !important;
    color: var(--text-primary);
    border-color: var(--accent-btn-primary);
    font-weight: 500;
    height: 64px;
    border-radius: var(--gc-btn-radius);
}


.list-group-item {
    padding: 10px 12px;
}

.btn-primary {
    --bs-btn-color: var(--text-on-solid);
    --bs-btn-bg: var(--accent-link);
    --bs-btn-border-color: var(--accent-link);
    --bs-btn-hover-color: var(--text-on-solid);
    --bs-btn-hover-bg: var(--accent-link-hover);
    --bs-btn-hover-border-color: var(--accent-link-hover);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--text-on-solid);
    --bs-btn-active-bg: var(--accent-link);
    --bs-btn-active-border-color: var(--accent-link);
    --bs-btn-active-shadow: inset 0 3px 5px color-mix(in srgb, var(--fill-emphasis) 12.5%, transparent);
    --bs-btn-disabled-color: var(--text-on-solid);
    --bs-btn-disabled-bg: var(--accent-link);
    --bs-btn-disabled-border-color: var(--accent-link);
}



/**INPUTS**/
.form-control {
    border: 1px solid var(--border-subtle);
    background-color: var(--surface-panel);
}

.input-group-lg {
    font-size: var(--font-size-base) !important;
}

.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after {
    background-color: var(--surface-panel) !important;
}

.form-control:focus {
    background-color: var(--surface-panel) !important;
}

.form-floating>.form-control:-webkit-autofill {
    background-color: var(--surface-panel) !important;
}

.shooter-id-input {
    border-radius: 8px;
    font-family: monospace;
    font-weight: 600;
    transition: all 0.2s ease;
    flex: 1; /* Добавляем flex-grow для равномерного распределения */
    min-width: 0; /* Предотвращаем переполнение flex-контейнера */
    height: 88px; /* Увеличиваем высоту */
    font-size: var(--font-size-24); /* крупные цифры shooter id */
    line-height: 88px; /* Центрируем текст по вертикали */
    padding: 0; /* Убираем внутренние отступы */
    border: 1px solid var(--border-subtle);
    background-color: var(--surface-panel);
    font-family: "Tektur", serif;
}

.shooter-id-input:focus {
    border-color: var(--accent-link);
    box-shadow: 0 0 0 3px rgba(var(--accent-link-rgb), 0.15);
}

.shooter-id-input:not(:placeholder-shown) {
    border: 1px solid var(--border-subtle);
    background-color: var(--surface-panel);
}

/* Обновляем контейнер для инпутов */
.shooter-id-container {
    display: flex;
    gap: 8px; /* Отступ между инпутами */
    width: 100%; /* На всю ширину */
}


/**SELECTS**/
.form-select {
    border: 1px solid var(--border-subtle);
    background-color: transparent;
}


/**TABS**/

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: var(--accent-btn-primary);
}

.nav-pills .nav-link {
    color: var(--accent-link);
}

.nav-pills .nav-link.active {
    background-color: color-mix(in srgb, var(--text-on-solid) 10%, transparent) !important;
    color: var(--text-on-scrim);
}

.nav-pills .nav-link.active:hover {
}

.nav-pills .nav-link {
    color: color-mix(in srgb, var(--text-on-solid) 60%, transparent);
    font-weight: 400 !;
}

.nav-pills .nav-link:hover {
    color: color-mix(in srgb, var(--text-on-solid) 90%, transparent);
}




/**btn-group**/

.btn-outline-dark {
    border: 1px solid var(--border-subtle) !important;
    color: var(--font-size-secondary);
    background-color: var(--surface-panel);
}

.btn-outline-dark:hover {
    background-color: var(--surface-control) !important;
    color: var(--text-primary) !important;
}

.btn-outline-dark.active {
    background-color: var(--surface-control) !important;
}

.btn-outline-dark.show {
    background-color: var(--surface-control) !important;
}

.dropdown-menu {
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary);
    background-color: var(--surface-panel);
    margin-top: 8px !important;
}

.dropdown-item:focus, .dropdown-item:hover {
    background-color: var(--surface-control);
}


/**accordion**/
.accordion-body {
    padding: 16px;
}

.accordion-item {
    border-color: var(--border-subtle);
}

.accordion-button {
    background-color: var(--surface-panel);
    border-color: var(--border-subtle);
}

.accordion-button:hover {
    background-color: var(--surface-control) !important;
}

.accordion-item .accordion-button {
    background-color: var(--surface-panel);
}

.accordion-button:not(.collapsed) {
    background-color: var(--surface-panel) !important;
    color: var(--text-primary);
}

.accordion-body {
    background-color: var(--surface-panel);
}

.accordion-item {
    --bs-accordion-border-color: var(--border-subtle) !important;
}

.accordion-button::after {
    display: none !important; 
}

    .accordion-button::after {
        display: none !important;
    }
    
    .accordion-button {
        padding-right: 1.25rem !important;
    }
  

/** CALC **/

/* Уникальные стили для калькулятора (exercise calc; подача челленджа переопределяет в calculator.css) */
.calculator-container:not(:has(.challenge-submit-proof)) {
    padding-bottom: 60px; /* Отступ для кнопки */
}

.calculator-form {
    flex-grow: 1;
    overflow-y: auto;
    overflow: visible;
}

/* Только горизонтальные поля калькулятора — не gc-form-label в блоке доказательств */
.calculator-fields label,
.calc-form-group-horizontal > label {
    color: rgba(33, 37, 41, 0.75);
    font-size: var(--font-size-15);
}

.calculator-form .form-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
}

.calculator-form .form-group label {
    flex: 0 0 80px; /* Фиксированная ширина для лейблов */
    margin-right: 10px;
}

.calculator-form .input-group {
    display: flex;
    align-items: center;
    width: 100%;
}



.calculator-form .input-group .btn {
    flex: 1;
}

.calculator-form .input-group .form-control {
    flex: 0 0 40px; /* Фиксированная ширина для значения */
    text-align: center;
    padding: 0;
}

/* Добавляем стили для фиксированной кнопки */
.calculator-container .btn-primary.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
    z-index: var(--z-fixed); /* Изменено с 1000 */
}

.calculator-container .calc-control {
    border: 0px !important;
    height: 45px;
    margin: 0px 12px 0px 12px !important;
    border-radius: var(--gc-btn-radius) !important;
    font-weight: 600 !important;
    font-size: var(--font-size-base) !important;
    text-align: center;
}

.calculator-form .btn-secondary {
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--gc-btn-radius) !important;
    overflow: hidden;
    background-color: var(--surface-panel);
    text-decoration: none !important;
    color: var(--text-primary);
    padding: 8px 20px;
    font-size: var(--font-size-20);
}

.form-group label {
    color: var(--font-small);
}

.calc-control::-webkit-outer-spin-button,
.calc-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.calc-control[type=number] {
    -moz-appearance: textfield;
}

/**BANNERS**/
.info-banner {
    padding: 20px;
    background-color: var(--surface-panel);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
}


.head-sidebar {
    padding: 8px;
    background-color: var(--gray-0);
}

.head-sidebar .logo {
    background-color: var(--gray-900);
    padding: 12px;
    display: block;
    border-radius: 50%;
    max-width: 80px;
    max-height: 80px;
    margin: auto;
    margin-top: -32px;
}

.head-sidebar .logo img {
    max-width: 100%;
}

/**NAV-ITEM**/



.bg-custom-white {
    background-color: var(--gray-0) !important;
    border: 1px solid var(--border-subtle) !important;
}

.alert-white {
    background-color: var(--gray-0) !important;
    border: 1px solid var(--border-subtle) !important;
}

.input_list {
    border: 1px solid var(--border-subtle) !important;
    border-top: 0px !important;
    border-radius: 0px !important;
    min-height: 56px;
    border-radius: 0px 0px 8px 8px !important;
}




.img-thumbnail {
    width: 150px;
    height: 150px;
    object-fit: cover; /* Заливает пространство внутри объекта */
    border-radius: 50%; /* Делает изображение круглым, если это необходимо */
    padding: 0px !important;
    background: none !important;
    border: 0px !important;
}

.profile-actions .d-flex {
    display: flex;
    align-items: center;
}

.profile-actions .d-flex p {
    margin-left: 8px; /* Отступ между аватаркой и именем пользователя */
    margin-top: 0; /* Убираем верхний отступ */
    margin-bottom: 0; /* Убираем нижний отступ */
}

.profile-actions {
    margin-top: auto;
}

#nprogress .bar {
    background: var(--accent-link) !important;
    height: var(--space-1) !important;
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    top: var(--gc-top-loader-offset, 0px) !important; /* desktop: под fixed-шапкой */
    z-index: var(--gc-page-loader-z) !important;
    box-shadow: none;
}

#nprogress .spinner {
    top: calc(var(--gc-top-loader-offset, 0px) + var(--space-2)) !important;
    z-index: var(--gc-page-loader-z) !important;
}

#nprogress .peg {
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent-link) 35%, transparent) !important;
}

#nprogress .spinner-icon {
    border-top-color: var(--accent-link) !important;
    border-left-color: var(--accent-link) !important;
}

/*
 * Визит-индикатор: выше .gc-modal (9050) и sheet/editor overlay —
 * переход из модалки не должен прятать полосу. Локальный z, не глобальный токен.
 */
.gc-top-loader,
#nprogress .bar,
#nprogress .spinner {
    --gc-page-loader-z: 12000;
}

/* Фиксированный трек; заполнение — только NProgress (.bar), слева направо */
.gc-top-loader {
    position: fixed;
    top: var(--gc-top-loader-offset, 0px);
    left: 0;
    right: 0;
    z-index: var(--gc-page-loader-z);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}

/*
 * Адаптив: всегда верх viewport (safe-area), не нижний tab bar.
 * Таббар прячется по скроллу / отсутствует / под модалкой — линия там висела бы сиротой.
 */
@media (max-width: 991.98px) {
    .gc-top-loader,
    #nprogress .bar {
        top: env(safe-area-inset-top, 0px) !important;
        bottom: auto !important;
    }

    #nprogress .spinner {
        top: calc(env(safe-area-inset-top, 0px) + var(--space-2)) !important;
        bottom: auto !important;
    }
}

html.gc-top-loader-active .gc-top-loader,
html.nprogress-busy .gc-top-loader {
    opacity: 1;
}

/* Standalone PWA: pull-to-refresh. GIF поверх контента, fade opacity; main чуть уезжает. */
html.gc-web-app-standalone:has(body.inertia-shell) .gc-app-body > .gc-app-main {
    transform: translate3d(0, var(--gc-pull-refresh-height, 0px), 0);
}

html.gc-web-app-standalone .gc-app-main__scroll > .gc-scroll-area__viewport.gc-pull-refresh--lock {
    overflow: hidden !important;
}

.gc-pull-refresh {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--space-2));
    left: 0;
    right: 0;
    z-index: 1040;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    pointer-events: none;
    opacity: 0;
}

/* Brand mark (light GIF / dark NVG) */
.gc-pull-refresh__gif,
.gc-brand-loader__gif {
    display: block;
    width: calc(var(--space-12) * 2);
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Soft pull-reload: маска main, пока Inertia reload; GIF остаётся на .gc-pull-refresh. */
html.gc-pull-refreshing body.inertia-shell .gc-app-body > .gc-app-main {
    position: relative;
}

.gc-pull-refresh-cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: var(--gc-app-content-bg, var(--surface-page));
}

.gc-top-loader__track {
    height: var(--space-1);
    background: var(--surface-control);
}


/* Основной контейнер для всего содержимого */
.wrapper {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.wrapper {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    flex: 1 0 auto;
}

@media (max-width: 991.98px) {
    /* Legacy .content-wrapper: тот же отступ, что у #gcMobileNavOffset */
    .content-wrapper {
        padding-top: calc(env(safe-area-inset-top, 0px) + var(--gc-mobile-nav-compact-inner-height));
    }

    /* Специальный класс для root маршрута, где нет шапки */
    .is-root-route .content-wrapper,
    .is-root-route .container {
        padding-top: 0;
    }
}

footer {
    margin-top: auto;
}

.btn-link {
    text-decoration: none !important;
}


.section {
    padding: 4px;
    box-sizing: border-box;
    display: block;
    unicode-bidi: isolate;
    position: relative;
}

.card a {
    text-decoration: none !important;
}

.card-body {
    text-decoration: none !important;
}

.card-body p {
    font-weight: 500 !important;
}


.card-body.d-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-text.description {
    flex-grow: 1; /* Занимает оставшееся пространство */
}

.card-body .card-footer {
    display: flex;
    align-items: center;
    margin-top: auto; /* Прижимает к низу */
    border: 0px !important;
    background: none !important;
    padding: 0px !important;
}

.content-container {
    margin: 16px auto;
}


/* Стили для кликабельных элементов списка */
.exercise-list .media {
    position: relative;
}

.exercise-list .media-content {
    display: block;
    width: 100%;
    padding: 10px;
    text-decoration: none;
    color: inherit;
}

.exercise-list .media-content:hover {
    background-color: var(--gray-100);
}

/* Стили для сайдбара */
#sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed); /* Изменено с 1000 на var(--z-fixed) для правильной иерархии */
    background: var(--gray-800);
    padding: 20px;
    border-right: 1px solid var(--border-subtle);
}


@media (max-width: 991.98px) {
    #sidebar {
        display: none;
    }
    #main-content {
        margin-left: 0;
    }

    .navbar.fixed-bottom {
        height: 60px;
        padding: 0;
        margin: 0 0.75rem 0.75rem 0.75rem;
        border-radius: 30px;
        left: 0;
        right: 0;
        width: auto;
        z-index: var(--z-fixed); /* Ниже модалов (1030 < 1050) */
    }

    .navbar.fixed-bottom .nav-link {
        color: var(--text-secondary);
        padding: 10px 0;
        font-size: var(--font-size-13);
    }

    .navbar.fixed-bottom .nav-link.active {
        color: var(--accent-link);
    }

    .navbar.fixed-bottom i {
        font-size: var(--font-size-base);
        display: block;
        margin-bottom: 4px;
    }

    .navbar.fixed-bottom small {
        font-size: var(--font-size-12);
    }

    .navbar .nav-title {
        font-size: var(--font-size-15);
        margin: 0;
        flex-grow: 1;
        text-align: center;
    }
    
    .navbar .nav-item {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar .nav-item .btn {
        font-size: var(--font-size-20) !important;
    }
    
    .navbar .btn-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        color: var(--text-on-solid-inverse);
    }

    .navbar.fixed-bottom .nav-link {
        -webkit-tap-highlight-color: transparent;
    }
    
    .navbar.fixed-bottom .nav-link:active {
        background: none !important;
    }

    .has-fixed-nav {
        margin-top: 72px !important; /* Высота навигации */
    }
    
}

/** RADIO **/
/* Увеличиваем размер радиокнопки */
.mini-stage-card .form-check-input[type="radio"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin: 0;
    border: 0;
}

/* Увеличиваем область нажатия */
.mini-stage-card .position-absolute.top-0.end-0 {
    padding: 16px;
    margin: 0 !important;
    right: 0;
    top: 0;
}

/* Стилизуем отмеченное состояние */
.mini-stage-card .form-check-input[type="radio"]:checked {
    background-size: 14px;
    border-width: 2px;
}

/* Стили для кнопки выбора стейджа */
.stage-select-btn {
    border: 1px solid var(--border-subtle);
    background-color: var(--surface-panel);
    color: var(--text-primary);
    transition: all 0.2s ease;
    min-width: 80px;
}

/* Стиль для выбранной кнопки */
.form-check-input:checked ~ .stage-select-btn {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--text-on-solid);
}

/* Показываем/скрываем соответствующий текст */
.form-check-input:checked ~ .stage-select-btn .not-selected {
    display: none;
}

.form-check-input:checked ~ .stage-select-btn .selected {
    display: inline !important;
}















.badge-outline {
    border: 1px solid var(--border-default);
    font-size: var(--font-size-15);
}

/* BANNERS */
/* Добавляем стили для баннера */
.banner {
    position: relative;
    background-size: cover;
    margin-bottom: 30px;
    display: flex;
    overflow: hidden; /* Скрываем выходящее за границы содержимое */
    background-color: var(--gray-900);
    min-height: auto;
    padding: 24px 0;
}

.banner-image {
    background: url('../uploads/assets/dm_crop.png') no-repeat center center;
    background-size: contain;
    padding: 0;
}

.banner-content {
    padding: 56px 56px;
    text-align: left; /* Выравниваем текст по левому краю */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Распределяем пространство между элементами */
}

.banner h3 {
    margin-bottom: 16px;
    margin-top: 0; /* Прижимаем заголовок к верху */
}

.banner a {
    align-self: flex-start !important; /* Прижимаем кнопку к низу */
}

.banner-bottom {
    align-self: flex-start !important; /* Прижимаем кнопку к низу */
}

.banner small {
    align-self: flex-start !important; /* Прижимаем кнопку к низу */
    margin-bottom: 16px; /* Отступ снизу для текста */
}

@media (max-width: 768px) {
    .banner h3 {
        font-size: var(--font-size-24);
    }

    .banner small {
        font-size: var(--font-size-14);
    }

    @media (max-width: 768px) {
        .no-border-md {
          border: none !important;
        }
      }
}




.card-text.description {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Ограничиваем высоту до трех строк */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Добавляем многоточие, если текст превышает ограничение */
}

.card .btn-dark.btn-sm {
    width: 20px; /* Устанавливаем ширину кнопки */
    height: 20px; /* Устанавливаем высоту кнопки */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Убираем внутренние отступы */
    border-radius: 50%; /* Делаем углы кнопки квадратными */
    font-size: var(--font-size-15);
    background-color: color-mix(in srgb, var(--text-on-solid) 20%, transparent);
    border: 0px;
    color: var(--text-primary);
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

.card .btn-dark.btn-sm:hover {
    background-color: color-mix(in srgb, var(--text-on-solid) 80%, transparent);
    color: var(--font-dark);
}
}

.list-card-stage .btn-dark.btn-sm {
    width: 20px; /* Устанавливаем ширину кнопки */
    height: 20px; /* Устанавливаем высоту кнопки */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Убираем внутренние отступы */
    border-radius: 50%; /* Делаем углы кнопки квадратными */
    font-size: var(--font-size-15);
    background-color: color-mix(in srgb, var(--text-on-solid) 20%, transparent);
    border: 0px;
    color: var(--text-primary);
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

.list-card-stage .btn-dark.btn-sm:hover {
    background-color: color-mix(in srgb, var(--text-on-solid) 80%, transparent);
    color: var(--font-dark);
}
}


.navbar-toggler {
    border: 0px !important;
}

/* Добавляем стили для элементов мобильной шапки */
.navbar .btn-link,
.navbar .navbar-brand,
.navbar .navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Добавляем стили для фиксированной кнопки */
.btn-primary.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
    z-index: var(--z-fixed); /* Изменено с 1000 */
}


/* Стили для призовых мест (токены — как .rank-badge--place-*) */
.bg-gold {
    background-color: var(--gc-rank-place-1-bg) !important;
    color: var(--gc-rank-medal-fg) !important;
}

.bg-silver {
    background-color: var(--gc-rank-place-2-bg) !important;
    color: var(--gc-rank-medal-fg) !important;
}

.bg-bronze {
    background-color: var(--gc-rank-place-3-bg) !important;
    color: var(--gc-rank-medal-fg) !important;
}

.icon-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-15);
    top: 24px;
    outline: 8px solid var(--surface-panel);
}

.form-check-input:hover {
}

.form-check-input:checked ~ .stage-select-btn {
    background-color: var(--font-accent-orange) !important;
    border: 1px solid var(--font-accent-orange);
}

.icon {
    width: 20px;
    border-radius: 50%;
    display: inline-block;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-15);
}

.avatar {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-small {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}

.position-absolute {
    position: absolute !important;
}

.top-0 {
    top: 0 !important;
}

.start-0 {
    left: 0 !important;
}

.translate-middle {
    transform: translate(-50%, -50%) !important;
}

.m-1 {
    margin: 0.25rem !important;
}

/* Стили для hero блока */


/* Уникальные стили для баннера на странице результатов */
.results-banner {
    position: relative;
    background-size: cover;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 24px;
    /*background-image: url('../uploads/banner_result.jpg');*/
    background-color: var(--surface-panel);
    border: 1px solid var(--border-subtle)
}

.results-banner .card {
    box-shadow: var(--shadow-sm);
}

.results-banner .container {
    height: auto !important;
}

.title-content {
    display: block;
}

.results-banner .container {
    position: relative;
    z-index: 1;
}

.stage-shots p {
    font-weight: 500;
    font-size: var(--font-size-15);
    color: var(--text-secondary);
}

.detail-container-sidebar {
    background-color: var(--surface-canvas);
    border-radius: 8px;
    padding: 0px 0px 0px 24px;
}

@media (max-width: 576px) {
    .detail-container-sidebar {
        padding: 12px 16px;
        background-color: var(--surface-panel);
        border-radius: 8px;
        border: 1px solid var(--border-subtle);
    }

    .detail-container-sidebar .label {
        background-color: var(--surface-panel) !important;
    }
    }

.stage-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
}

.stage-detail:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-bottom: 1px dotted var(--border-subtle);
    z-index: 1;
}

.stage-detail .label {
    padding-right: 8px;
    position: relative;
    z-index: 2;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: var(--font-size-tertiary) !important;
    background-color: var(--surface-panel);
}

.stage-detail .value {
    padding-left: 8px;
    position: relative;
    z-index: 2;
    text-align: right;
}

.stage-content {
    padding: 12px 16px;
    background-color: var(--surface-panel);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
}

.stage-stats {
    background-color: var(--surface-panel);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
}

.stage-stats .stage-detail .label {
    background-color: var(--surface-panel) !important;
    font-size: var(--font-size-tertiary) !important;
}

.stage-stats .list-group-item {
    background-color: var(--surface-panel);
}

.stage-form {
    padding: 12px 16px;
    background-color: var(--surface-panel);
    border-radius: 8px;
    border: 1px solid var(--border-subtle) !important;
}

.list-switch {
    padding: 12px 16px;
    background-color: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    display: inline-block; /* Добавляем это свойство */
    width: auto; /* Добавляем это свойство */
}

.list-switch .form-switch {
 padding-top: 4px;
 padding-bottom: 2px;

}

.event-header {
    flex: 1; /* занимает доступное пространство */
}

/* убедимся что навигация всегда внизу */
.nav-pills {
    margin-top: auto;
}

/* Фоновые стили для карточек топ-3 участников */
.card-top-gold {
    background: linear-gradient(180deg, rgba(255,215,0,0) 0%, rgba(255,215,0,0.07) 100%);
}

.card-top-silver {
    background: linear-gradient(180deg, rgba(192,192,192,0) 0%, rgba(192,192,192,0.06) 100%);
}

.card-top-bronze {
    background: linear-gradient(180deg, rgba(205,127,50,0) 0%, rgba(205,127,50,0.06) 100%);
}

/* Эффект наведения для карточек */
@media (min-width: 1280px) and (hover: hover) and (pointer: fine){
.card-top-gold:hover {
}
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

.card-top-silver:hover {
}
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

.card-top-bronze:hover {
}
}

.card-top {
    overflow: hidden;
    text-decoration: none;
    min-height: auto;
    transition: 0.3s;
    display: block;
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

.card-top:hover {
    background-color: var(--surface-control);
    transition: 0.3s;
}
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

.card-top:hover .icon-badge {
    outline: 8px solid var(--surface-control);
}
}

/* Добавьте эти стили в styles.css */


.stage-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.stage-card .card-title {
    font-weight: 500;
    margin-bottom: 3px;
}

.stage-card .description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-tertiary);
    margin-bottom: auto;
}

.stage-card .badge {
    font-weight: 500;
    padding: 6px 12px;
}

.stage-card .card-footer {
    background: none;
    border: 0;
    padding: 0;
    margin-top: auto;
}

.stage-card .author-avatar {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 50%;
}


.card-add {
    min-height: 180px;
}

/**PROFILE_CALENDAR**/
.activity-calendar {
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(52, 1fr);
    gap: 2px;
}

.activity-calendar .calendar-grid {
    display: grid;
    grid-template-columns: repeat(52, 1fr);
    gap: 2px;
    margin-top: 8px;
}

.calendar-day {
    aspect-ratio: 1;
    border-radius: 2px;
    cursor: pointer;
}

.intensity-0 {
    background-color: var(--surface-control);
}

.intensity-1 {
    background-color: var(--font-accent-orange);
}

.intensity-2 {
    background-color: var(--font-accent-yellow);
}

.intensity-3 {
    background-color: var(--font-accent-yellow);
}

.fix-container {
    position: fixed;
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 300px; /* Максимальная ширина как у container в Bootstrap */
    border-radius: 0;
    z-index: 1050;
    padding: 16px;
    margin: 0;
    box-shadow: 0 -2px 10px color-mix(in srgb, var(--fill-emphasis) 10%, transparent);
    border-radius: 12px;
}

.radio-cat {
    font-size: var(--font-size-15) !important;
}

.radio-cat .rounded {
    background-color: var(--surface-canvas);
}

.radio-cat .btn-check {
    font-size: var(--font-size-15) !important;
}


.radio-cat .btn-check+.btn:hover {
    background-color: var(--surface-panel) !important;
}

.radio-cat .btn-check:checked {
    border: 1px solid var(--accent-btn-primary) !important;
    color: var(--text-primary) !important;
}

.radio-cat .btn-outline-dark:hover {
    border: 1px solid var(--accent-btn-primary) !important;
    color: var(--text-primary) !important;
}

.radio-cat .btn-check:checked+.btn {
    border: 1px solid var(--accent-btn-primary) !important;
    color: var(--text-primary) !important;
}

table.table {
    background-color: var(--surface-control) !important;
    border-color: var(--border-subtle) !important;
}

.table-hover {
    --bs-table-bg: var(--surface-canvas);
    --bs-table-border-color: var(--border-subtle);
}

.border-top {
    --bs-border-color: var(--border-subtle);
}

.offcanvas {
    background-color: var(--surface-canvas);
}

.fix-container {
    position: fixed;
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%) translateY(100%); /* Начально скрыт */
    width: 100%;
    max-width: 300px;
    padding: 16px;
    margin: 0;
    transition: transform 0.3s ease-out;
    z-index: 1050;
    opacity: 0;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xl);
}

.fix-container.visible {
    transform: translateX(-50%) translateY(0); /* Показываем */
    opacity: 1;
}

.fix-container.hidden {
    transform: translateX(-50%) translateY(100%); /* Скрываем */
}

.mini-stage-card.selected {
    border-color: var(--font-accent-orange) !important;
    border-width: 1px !important;
    background-color: var(--surface-control);
}

.offcanvas.show {
    z-index: 1060;
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-primary);
    background: none;
    border: none;
}

.btn-icon:hover {
    background-color: var(--surface-control);
}

@media (max-width: 991.98px) {
    .btn-icon {
        margin-left: auto; /* Прижимаем к правому краю на мобильных */
    }
}

.stat-numb {
    background-color: var(--surface-control);
}


.event-results-banner {
    position: relative;
    overflow: hidden;
}

.event-results-banner__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../uploads/assets/banner-bg_2.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: 1;
}

.event-results-banner__bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        var(--surface-panel) 0%, 
        transparent 100%);
}

.event-results-banner__content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-4);
    padding-bottom: 0;
}

@media (max-width: 767px) {
    .event-results-banner__content {
        padding: 0;
    }
}

.event-results-banner__header {
    margin-bottom: 12px;
}

.event-results-banner__date {
    font-size: var(--font-size-13);
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.event-results-banner__title {
    font-size: var(--font-size-18);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.event-results-banner__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 12px;
    margin-top: auto;
}

.event-results-banner__stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.event-results-banner__stat-label {
    color: var(--text-secondary);
}

/* Эффективность стрелка с круговой диаграммой */
.event-results-banner__stat-item--performance {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    position: relative;
}

.event-results-banner__stat-item--performance .gc-help-button--mobile {
    width: var(--space-8);
    height: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-base) ease, 
                color var(--transition-base) ease;
    margin-left: auto;
}

.event-results-banner__stat-item--performance .gc-help-button--mobile:hover {
    background: var(--surface-control);
    color: var(--text-primary);
}

/* Label не переносится */
.event-results-banner__stat-item--performance .event-results-banner__stat-label {
    white-space: nowrap;
}


.event-results-banner__stat-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Круговая диаграмма */
.circular-progress {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    position: relative;
}

.circular-progress__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circular-progress::after {
    content: attr(data-percentage) '%';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-11);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    pointer-events: none;
}

.circular-progress__bg {
    stroke: var(--surface-control);
    opacity: 0.3;
}

.circular-progress__fill {
    stroke: var(--accent-link);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dasharray 0.6s ease;
}


@media (max-width: 576px) {
    
    .event-results-banner__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .event-results-banner__title {
        font-size: var(--font-size-20);
    }
    
    .event-results-banner__stat-label {
        font-size: var(--font-size-13);
    }
    
    /* Эффективность на отдельной строке на мобильных */
    .event-results-banner__stat-item--performance {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
    
    /* На мобильных порядок: текст, диаграмма, кнопка */
    .event-results-banner__stat-item--performance .event-results-banner__stat-details {
        order: 1;
    }
    
    .event-results-banner__stat-item--performance .circular-progress {
        order: 2;
    }
    
    .event-results-banner__stat-item--performance .gc-help-button--mobile {
        order: 3;
        margin-left: auto;
    }
    
    /* На мобильных скрываем inline кнопку */
    .gc-help-button--inline {
        display: none;
    }
}

/* На десктопе показываем inline кнопку и скрываем мобильную */
@media (min-width: 577px) {
    .event-results-banner__stat-item--performance .gc-help-button--mobile {
        display: none !important;
    }
}






.stage-section-banner {
    position: relative;
    padding: 16px;
    overflow: hidden;
    background-color: var(--surface-canvas);
    border-radius: 8px;
    height: 240px; 
    display: flex; /* Делаем контейнер флексбоксом */
    border: 1px solid var(--border-subtle);
}

.stage-section-banner__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../uploads/assets/bg-stage.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: 1;
}

.stage-section-banner__bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        var(--surface-panel) 0%, 
        transparent 50%);
}

.stage-section-banner__content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Распределяем контент по вертикали */
}

.stage-section-banner__header {
    margin-bottom: 24px;
}

.stage-section-banner__date {
    font-size: var(--font-size-15);
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.stage-section-banner__title {
    font-size: var(--font-size-24);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.stage-section-banner__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 24px;
    margin-top: auto; /* Прижимаем статистику к низу */
}

.stage-section-banner__stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stage-section-banner__stat-value {
    font-size: var(--font-size-30);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.stage-section-banner__stat-label {
    font-size: var(--font-size-15);
    color: var(--text-secondary);
}

@media (max-width: 576px) {
    .stage-section-banner {
        padding: 20px;
        border-radius: 12px;
    }
    
    .estage-section-banner__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .stage-section-banner__stat-value {
        font-size: var(--font-size-24);
    }
    
    .stage-section-banner__title {
        font-size: var(--font-size-20);
    }
    
    .stage-section-banner__stat-label {
        font-size: var(--font-size-13);
    }
}

.reg-form {
}

.bg-image {
    background-image: url('../uploads/assets/bg-reg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 100%;
}

.overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
    var(--surface-canvas) 0%, 
    rgba(20, 20, 20, 0.5) 100%);
    z-index: 1;
}

.bg-image .position-relative {
    z-index: 2;
}

/* Контейнер для фиксированной кнопки */
.fix-cont {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    z-index: 1050;
    background-color: var(--surface-canvas);
}

/* Стили для фиксированной кнопки */
.btn-fixed.fixed-bottom-calc {
    position: relative !important;
    background-color: var(--accent-btn-primary);
    border: 0 !important;
    border-radius: var(--gc-btn-radius);
    width: 100%;
    display: block;
    margin: 0;
    bottom: 0;
}

.fixed-bottom-calc:hover {
    background-color: var(--accent-btn-primary-hover) !important;
    color: var(--text-on-solid);
}

.btn-fixed {
    padding: 12px;
    width: 100%;
}

.btn-fixed .d-flex {
    min-width: 150px;
    margin: 0 auto;
    width: 100%;
    justify-content: center;
}

.btn-fixed .submit-text {
    font-size: var(--font-size-18);
    font-weight: 500;
    text-align: center;
}

.btn-fixed .shots-counter {
    font-size: var(--font-size-13);
    opacity: 0.9;
    margin-top: 0px;
    text-align: center;
    width: 100%;
}


.profile-avatar {
    transition: transform 0.2s;
}
.profile-avatar:hover {
    transform: scale(1.05);
}

.input-group-text {
    background-color: var(--surface-panel);
}

input:-webkit-autofill {
    background-color: var(--surface-panel) !important;
    box-shadow: 0 0 0px 1000px var(--surface-panel) inset !important;
}

.form-control:disabled {
    background-color: var(--surface-panel);
    color: color-mix(in srgb, var(--text-on-solid) 20%, transparent);
}



@media (max-width: 576px) {
.reg-mobile {
    margin-top: -60px;
}
}

.avatars-stack {
    display: flex;
    flex-direction: row;
}

.participant-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 4px solid var(--surface-panel);
    object-fit: cover;
    box-shadow: var(--shadow-sm);
    margin-left: -12px; /* Фиксированный отступ для всех аватарок */
}

.participant-avatar:first-child {
    margin-left: 0; /* Убираем отступ у первой аватарки */
}

.vehicle-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    border: none !important;
    background-color: var(--gray-700) !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    object-fit: cover;
    flex-shrink: 0;
}

.vehicle-avatar i {
    font-size: var(--font-size-20) !important;
    line-height: 1 !important;
    color: var(--text-secondary) !important;
}

.list-group-item:hover .avatars-stack img {
    transition: 0.2s;
    border: 4px solid var(--surface-control);
}

.bg-main {
    background-color: var(--surface-canvas);
}

@media (min-width: 768px) {
    .stage-filters .row.min-vh-100 {
        height: 100%;
    }
    
    .stage-filters .row.min-vh-100 > .col-md-4,
    .stage-filters .row.min-vh-100 > .col-lg-3,
    .stage-filters .row.min-vh-100 > .col-lg-2 {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

/* Стили для мобильной навигации */
.d-md-none .btn-outline-light {
    font-size: var(--font-size-15);
    font-weight: 500;
    color: color-mix(in srgb, var(--text-on-solid) 80%, transparent);
    background: transparent;
    border-color: transparent;
}

.d-md-none .btn-outline-light:hover,
.d-md-none .btn-outline-light.active {
    background-color: color-mix(in srgb, var(--text-on-solid) 15%, transparent);
    border-color: transparent;
    color: var(--text-on-solid);
}

/* Скрываем скроллбар но оставляем функциональность */
.overflow-auto {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.overflow-auto::-webkit-scrollbar {
    display: none;
}


.bg-login {
    background-image: url('../uploads/assets/bg-reg.jpg');
    background-size: cover;
    background-position: center;
    position: fixed; /* Меняем на fixed */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh; /* Используем viewport height */
    min-height: 100vh;
    z-index: 1;
}

.bg-login .overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, 
        var(--surface-canvas) 0%, 
        rgba(20, 20, 20, 0.5) 100%);
    z-index: -1;
}

/* Контейнер с контентом тоже нужно позиционировать */
.bg-login .position-relative {
    position: relative;
    z-index: 2;
    min-height: 100vh;
}

.badge-outline {
    color: var(--text-tertiary);
    border: 1px solid var(--surface-control); /* Граница */
    background-color: transparent; /* Прозрачный фон */
}

.squad {
    min-height: 240px;
}

.btn-outline-primary {
    --bs-btn-color: var(--accent-link);
    --bs-btn-border-color: var(--accent-link);
    --bs-btn-hover-color: var(--text-on-solid);
    --bs-btn-hover-bg: var(--accent-link);
    --bs-btn-hover-border-color: var(--accent-link);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--text-on-solid);
    --bs-btn-active-bg: var(--accent-link);
    --bs-btn-active-border-color: var(--accent-link);
    --bs-btn-active-shadow: inset 0 3px 5px color-mix(in srgb, var(--fill-emphasis) 12.5%, transparent);
    --bs-btn-disabled-color: var(--accent-link);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--accent-link);
    --bs-gradient: none;
}

.badge-nav {
    padding: 3px 11px !important;
}

.bg-main {
    background-color: var(--surface-canvas);
}

.filter-cloud {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.filter-cloud::-webkit-scrollbar {
    display: none;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-200);
    border-radius: 100px;
    color: var(--bs-gray-700);
    font-size: var(--font-size-15);
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.2s;
}

.filter-tag:hover {
    background: var(--bs-gray-200);
    color: var(--bs-gray-800);
}

.filter-tag.active {
    background: var(--bs-dark);
    border-color: var(--bs-dark);
    color: var(--text-on-solid);
}

.filter-count {
    font-size: var(--font-size-13);
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background: var(--bs-dark) !important;
    color: var(--text-on-solid);
}

.filter-tag-clear {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    background: var(--bs-gray-200);
    color: var(--bs-gray-600);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.filter-tag-clear:hover {
    background: var(--bs-gray-300);
    color: var(--bs-gray-700);
}

.filter-tag.active {
    background: var(--bs-dark);
    color: var(--text-on-solid);
}

.alerts-container {
    width: 100%;
    max-width: 500px;
    padding: 0 1rem;
    margin-bottom: var(--gc-mobile-bottom-nav-outer-height) !important;
}

@media (min-width: 992px) {
    .alerts-container {
        margin-bottom: 2rem !important;
    }
}

.alerts-container .alert {
    box-shadow: var(--shadow-md);
    border-radius: 12px;
}

/* Обновляем стили для textarea в форме редактирования */
.form-floating textarea.form-control {
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    line-height: 1.5;
    min-height: 120px;
    padding: 1.625rem 0.75rem 0.625rem;
    resize: vertical; /* Позволяет изменять высоту вертикально */
}

.stage-description p {
    white-space: pre-line;
    word-wrap: break-word;
    word-break: break-word;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

.section-description {
    white-space: pre-line;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

textarea[data-bs-autosize] {
    word-wrap: break-word;
    word-break: break-word;
    line-height: 1.5;
    min-height: auto;
}

/* Обновление стилей для input при фокусе */
.form-floating input.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--surface-panel) !important;
    border-color: var(--gc-input-focus-border) !important;
    outline: 0;
    box-shadow: var(--gc-input-shadow-focus) !important;
}

/* Это перезаписывает общий стиль для form-control:focus, применяя его к input */
input.form-control:focus {
    border-color: var(--gc-input-focus-border) !important;
    box-shadow: var(--gc-input-shadow-focus) !important;
}

/* Обновление стилей для всех form-control при фокусе (общий стиль) */
.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--surface-panel) !important;
    border-color: var(--gc-input-focus-border) !important;
    outline: 0;
    box-shadow: var(--gc-input-shadow-focus) !important;
}






/* Weapon Cards Grid */
/* Weapon Photo Cards */
.weapon-photo-card {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 */
    background: var(--surface-subtle);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}

.weapon-photo-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.weapon-photo-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 193, 7, 0.95);
    color: var(--text-on-solid-inverse);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-13);
    z-index: 2;
}

.weapon-photo-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--fill-emphasis) 72%, transparent), transparent);
    padding: 8px;
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.2s;
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

.weapon-photo-card:hover .weapon-photo-actions {
    opacity: 1;
}
}

/* Upcoming event cards in communities */
.upcoming-event-card,
.activity-card {
    background-color: var(--gray-800);
    border: 1px solid var(--border-subtle);
    color: inherit;
    transition: background-color 0.2s ease;
    overflow: visible;
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine){

.upcoming-event-card:hover,

.activity-card:hover {
    background-color: color-mix(in srgb, var(--text-on-solid) 5%, transparent);
    transition: background-color 0.2s ease;
}
}

/* Защита ценника - дата обрезается, ценник всегда виден */

.upcoming-event-card .content-section-body {
    overflow: visible !important;
    padding: 16px;
}

.upcoming-event-card .d-flex.align-items-center.mb-1 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.upcoming-event-card .event-time-container {
    overflow: hidden !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    max-width: none !important;
}

.upcoming-event-card .ms-auto,
.upcoming-event-card h5.ms-auto {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin-left: auto !important;
}

/* ===== УНИВЕРСАЛЬНЫЕ СЕКЦИИ КОНТЕНТА ===== */
/* Секции контента мигрированы на gc-panel. См. event-layout.css */