/* ============================================================
   Матч&мяч v72 — Навигация-аккордеон и единый шелл кабинета
   ------------------------------------------------------------
   Что решаем:
   1. До v72 меню было плоским (12 равнозначных ссылок) и разным на
      десктопе и мобиле. Теперь один компонент дерева на обоих экранах.
   2. Кабинеты /me, /studio, /admin выглядели по-разному. Здесь /me
      переезжает на тот же вертикальный .cab-nav, что и остальные.
   ============================================================ */

/* ---------- 1. Дерево навигации ---------- */

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Раздел верхнего уровня без вложенности (Клубы и корты) */
.sidebar-nav .nav-flat,
.sidebar-nav .nav-group-toggle {
    height: 46px;
    width: 100%;
    border-radius: 15px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 13px;
    font-weight: 720;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background-color .18s ease, color .18s ease;
}

.sidebar-nav .nav-flat .ic,
.sidebar-nav .nav-group-toggle .ic {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    flex: 0 0 21px;
}

.sidebar-nav .nav-flat .ic svg,
.sidebar-nav .nav-group-toggle .ic svg {
    width: 19px;
    height: 19px;
    stroke-width: 1.75;
}

.sidebar-nav .nav-flat:hover,
.sidebar-nav .nav-group-toggle:hover {
    background: var(--glass-2);
    color: var(--text);
}

.sidebar-nav .nav-flat.active {
    background: var(--card-elevated);
    color: var(--text);
}

.sidebar-nav .nav-flat.active .ic { color: var(--accent); }

.nav-flat-label,
.nav-group-label { flex: 1 1 auto; }

/* Группа, внутри которой открыта текущая страница, подсвечена даже свёрнутой —
   пользователь всегда видит, в какой ветке находится. */
.nav-group.has-active > .nav-group-toggle {
    color: var(--text);
}

.nav-group.has-active > .nav-group-toggle .ic { color: var(--accent); }

.nav-group-chevron {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    flex: 0 0 16px;
    color: var(--text-faint);
    transition: transform .22s var(--ease, ease);
}

.nav-group-chevron svg { width: 16px; height: 16px; }

.nav-group.is-open > .nav-group-toggle .nav-group-chevron {
    transform: rotate(180deg);
}

/* Подменю. Вертикальная линия слева читается как «это внутри раздела».

   Раскрытие анимируется через grid-template-rows 0fr → 1fr на обёртке:
   это единственный способ плавно тянуть высоту к auto без замеров в JS.
   Сама панель должна иметь min-height:0, иначе grid не даст ей сжаться. */
.nav-group-panel-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1);
}

.nav-group.is-open > .nav-group-panel-wrap { grid-template-rows: 1fr; }

.nav-group-panel {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 0;
    overflow: hidden;
    margin-left: 22px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
}

/* Линия-направляющая прорисовывается вместе с раскрытием, а не появляется рывком. */
.nav-group-panel { border-left-color: transparent; transition: border-left-color .3s ease .06s; }
.nav-group.is-open > .nav-group-panel-wrap > .nav-group-panel { border-left-color: var(--border); }

/* Каскад: пункты проявляются друг за другом с небольшой задержкой.
   Шаг маленький (28 мс) — при большем меню начинает ощущаться медленным. */
.nav-group-panel > .nav-child {
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity .26s ease, transform .26s cubic-bezier(.34, 1.2, .64, 1);
}

.nav-group.is-open > .nav-group-panel-wrap > .nav-group-panel > .nav-child {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 28ms + 40ms);
}

/* Отступ снизу тоже анимируется, иначе при закрытии остаётся зазор. */
.nav-group-panel-wrap { margin-bottom: 0; transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1), margin-bottom .32s ease; }
.nav-group.is-open > .nav-group-panel-wrap { margin-bottom: 4px; }

/* Первая отрисовка страницы — без анимации, чтобы меню не «распахивалось». */
.nav-no-anim .nav-group-panel-wrap,
.nav-no-anim .nav-group-panel,
.nav-no-anim .nav-child,
.nav-no-anim .nav-group-chevron { transition: none !important; }

/* В плоском режиме (мобильный drawer) панель всегда раскрыта. */
.nav-group.is-flat > .nav-group-panel-wrap { grid-template-rows: 1fr; }
.nav-group.is-flat .nav-group-panel { border-left-color: var(--border); }
.nav-group.is-flat .nav-child { opacity: 1; transform: none; }

.nav-group-static {
    font-family: var(--font-mono, inherit);
    font-size: 9px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 10px 12px 6px;
}

.sidebar-nav .nav-child,
.mobile-nav-scroll .nav-child {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 10px;
    border-radius: 11px;
    color: var(--text-dim);
    font-size: 12.5px;
    font-weight: 640;
    background: transparent;
    border: 0;
    transition: background-color .16s ease, color .16s ease;
}

.nav-child-label { flex: 1 1 auto; }

.sidebar-nav .nav-child:hover,
.mobile-nav-scroll .nav-child:hover {
    background: var(--glass-2);
    color: var(--text);
}

.sidebar-nav .nav-child.active,
.mobile-nav-scroll .nav-child.active {
    background: var(--card-elevated);
    color: var(--text);
    font-weight: 760;
}

/* Точка-маркер активного подпункта на вертикальной линии */
.sidebar-nav .nav-child.active::before,
.mobile-nav-scroll .nav-child.active::before {
    content: "";
    position: absolute;
    margin-left: -17px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.sidebar-nav .nav-child,
.mobile-nav-scroll .nav-child { position: relative; }

/* ---------- 2. То же дерево в мобильном drawer ---------- */

.mobile-nav-scroll .nav-flat,
.mobile-nav-scroll .nav-group-toggle {
    height: 50px;
    width: 100%;
    border-radius: 14px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 720;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.mobile-nav-scroll .nav-flat .ic,
.mobile-nav-scroll .nav-group-toggle .ic {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 22px;
}

.mobile-nav-scroll .nav-flat .ic svg,
.mobile-nav-scroll .nav-group-toggle .ic svg { width: 20px; height: 20px; }

/* Иконки подпунктов в drawer: разметка их отдаёт, но без размера SVG
   расползался и визуально пропадал. На мобильном иконка важнее, чем на
   десктопе, — пункт опознаётся до чтения подписи. */
.mobile-nav-scroll .nav-child .ic {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: inherit;
}
.mobile-nav-scroll .nav-child .ic svg { width: 17px; height: 17px; stroke-width: 1.8; }
.mobile-nav-scroll .nav-child.active .ic { color: var(--accent); }

.mobile-nav-scroll .nav-flat.active,
.mobile-nav-scroll .nav-group.has-active > .nav-group-toggle { color: var(--text); }

.mobile-nav-scroll .nav-group-panel {
    margin: 2px 0 6px 25px;
    padding-left: 13px;
}

.mobile-nav-scroll .nav-child { height: 44px; font-size: 13.5px; }

/* ---------- 3. Единый шелл кабинета для /me ---------- */

/* /me раньше использовал горизонтальные табы .me-local-nav, а /studio и /admin —
   вертикальный .cab-nav. Один и тот же объект вёл себя двумя способами.
   Здесь /me приводится к общему паттерну. */

.me-cab {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}

.me-cab-nav {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid var(--border);
}

.me-cab-nav .me-local-link {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border-radius: 13px;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 13px;
    font-weight: 680;
    text-align: left;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.me-cab-nav .me-local-link .ic {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: grid;
    place-items: center;
}

.me-cab-nav .me-local-link .ic svg { width: 17px; height: 17px; }

.me-cab-nav .me-local-link:hover {
    background: var(--glass-2);
    color: var(--text);
}

.me-cab-nav .me-local-link.is-on {
    background: var(--card-elevated);
    color: var(--text);
    font-weight: 780;
}

.me-cab-nav .me-local-link.is-on .ic { color: var(--accent); }

.me-cab-nav-label {
    font-family: var(--font-mono, inherit);
    font-size: 9px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 8px 12px 6px;
}

/* На планшете и телефоне вертикальная колонка не помещается —
   навигация становится горизонтальной лентой со скроллом. */
@media (max-width: 900px) {
    .me-cab { grid-template-columns: minmax(0, 1fr); gap: 16px; }

    .me-cab-nav {
        position: static;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 8px;
        border-radius: 16px;
    }

    .me-cab-nav::-webkit-scrollbar { display: none; }
    .me-cab-nav-label { display: none; }

    .me-cab-nav .me-local-link {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
        height: 40px;
        font-size: 12.5px;
    }
}

/* ---------- 4. Гашение старых правил .me-local-* ---------- */

/* Табы кабинета переехали из горизонтальной ленты в вертикальную колонку,
   но релизы v67/v70 и ace-v3 продолжают навязывать старую геометрию через
   !important. Перебиваем адресно, не трогая сами старые файлы. */

.page-me .me-cab-nav .me-local-link {
    height: 44px !important;
    border-radius: 13px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
}

.page-me .me-cab-nav .me-local-link:hover {
    background: var(--glass-2) !important;
    color: var(--text) !important;
}

/* Активная вкладка — приглушённая плашка, а не заливка акцентом.
   Ярко-лаймовая подсветка на шести кнопках подряд перетягивала внимание
   с самого содержимого кабинета. */
.page-me .me-cab-nav .me-local-link.is-on {
    background: var(--card-elevated) !important;
    color: var(--text) !important;
}

.page-me .me-cab-nav .me-local-link.is-on .ic { color: var(--accent) !important; }

@media (max-width: 900px) {
    .page-me .me-cab-nav .me-local-link {
        height: 40px !important;
        padding: 0 12px !important;
        font-size: 12.5px !important;
    }
}

/* ---------- 5. Гашение старых правил .sidebar-nav a ---------- */

/* ace-v3.css задаёт .sidebar-nav a высоту 48px и вес 720 через !important —
   рассчитано на плоское меню, где все ссылки равнозначны. В дереве подпункт
   должен читаться как подчинённый, поэтому геометрию возвращаем адресно. */

.sidebar-nav .nav-child {
    height: 38px !important;
    padding: 0 10px !important;
    border-radius: 11px !important;
    font-size: 12.5px !important;
    font-weight: 640 !important;
    gap: 8px !important;
    background: transparent !important;
    color: var(--text-dim) !important;
}

.sidebar-nav .nav-child:hover {
    background: var(--glass-2) !important;
    color: var(--text) !important;
}

.sidebar-nav .nav-child.active {
    background: var(--card-elevated) !important;
    color: var(--text) !important;
    font-weight: 760 !important;
    box-shadow: none !important;
}

.sidebar-nav .nav-flat {
    height: 46px !important;
    padding: 0 12px !important;
    border-radius: 15px !important;
    font-size: 13px !important;
    font-weight: 720 !important;
}

.sidebar-nav .nav-flat.active {
    background: var(--card-elevated) !important;
    color: var(--text) !important;
}

/* ---------- 6. Разгрузка главной ---------- */

/* Блок «Ещё о жизни Матч&мяч» — справочная часть главной. Свёрнут по умолчанию:
   новичок видит короткий экран с одним понятным действием, а не восемь
   конкурирующих за внимание секций. Состояние запоминается в home.js. */

.home-more {
    /* Родитель .release-home — grid с gap, собственный margin-top дал бы двойной отступ. */
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--card);
    overflow: hidden;
}

.home-more-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title chev" "hint chev";
    align-items: center;
    gap: 2px 16px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
    transition: background-color .18s ease;
}

.home-more-summary::-webkit-details-marker { display: none; }
.home-more-summary:hover { background: var(--glass-2); }

.home-more-title {
    grid-area: title;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}

.home-more-hint {
    grid-area: hint;
    font-size: 13px;
    color: var(--text-dim);
}

.home-more-chev {
    grid-area: chev;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--glass-2);
    color: var(--text-dim);
    transition: transform .22s var(--ease, ease);
}

.home-more[open] .home-more-chev { transform: rotate(180deg); }

.home-more-body {
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding: 6px 22px 26px;
}

@media (max-width: 700px) {
    .home-more { margin-top: 4px; border-radius: 18px; }
    .home-more-summary { padding: 16px 16px; }
    .home-more-title { font-size: 15px; }
    .home-more-hint { font-size: 12px; }
    .home-more-body { padding: 4px 14px 20px; gap: 26px; }
}

/* ---------- 7. Общая шапка каталога ---------- */

/* Подзаголовок-полоска для каталогов, у которых уже есть визуальный герой
   (турниры, расписание): счётчик и кнопка фильтров, без второго большого H1.

   Класс .players-page-head здесь использовать нельзя — это полноценный
   светлый герой с min-height 202px, и на этих страницах он дал бы второй
   огромный блок сразу под первым. */
.catalog-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    min-height: 0;
}

.catalog-subhead:empty { display: none; }

/* ---------- 8. Адаптив каталогов ---------- */

/* components.css схлопывает колонку фильтров правилом `#players-filters{height:0}`,
   привязанным к одному конкретному id. Новые каталоги используют свои контейнеры,
   поэтому без этого правила под шапкой оставался пустой блок высотой в панель. */
@media (max-width: 900px) {
    #coaches-filters,
    #trainings-filters { height: 0; }

    /* Кнопка «Фильтры» на мобиле показывается только внутри шапки каталога. */
    #coaches-count .players-filter-mobile,
    #trainings-count .players-filter-mobile { display: inline-flex; }
}

/* На десктопе мобильная кнопка не нужна — панель и так видна колонкой. */
@media (min-width: 901px) {
    .players-filter-mobile { display: none; }
}

/* Шапка каталога: заголовок слева, счётчик и фильтры справа.
   На узком экране — в две строки, чтобы длинное название не ломало сетку. */
.players-page-head #coaches-count,
.players-page-head #trainings-count,
.players-page-head #clubs-count,
.players-page-head #events-count {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .players-page-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .players-page-head > div:first-child { min-width: 0; }

}

/* Панель фильтров как bottom-sheet не должна прилипать к колонке. */
@media (max-width: 900px) {
    #coaches-filters [data-cf-card],
    #trainings-filters [data-cf-card] { position: fixed; }
}

/* ---------- 9. Разрешение конфликтов каскада ---------- */

/* release-v58/v59 задают геометрию `.sidebar-nav a` и `.sidebar-nav a .ic`
   через !important в @media (min-width:961px). Заголовок раздела — <button>,
   а не <a>, поэтому под эти правила не попадает: иконки групп и иконка
   плоской ссылки «Клубы и корты» рендерились бы в разных размерах.
   Выравниваем явно теми же значениями. */
@media (min-width: 961px) {
    .sidebar-nav .nav-flat,
    .sidebar-nav .nav-group-toggle {
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 11px !important;
        gap: 10px !important;
        border-radius: 15px !important;
        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .sidebar-nav .nav-flat .ic,
    .sidebar-nav .nav-group-toggle .ic {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
    }

    .sidebar-nav .nav-flat .ic svg,
    .sidebar-nav .nav-group-toggle .ic svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Подпункт остаётся визуально подчинённым и на широком экране. */
    .sidebar-nav .nav-child {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 10px !important;
        font-size: 12.5px !important;
        font-weight: 640 !important;
    }
}

/* release-v67 навязывает `.page-me .me-local-link` высоту 34px, шрифт 10.5px
   и вес 750 — параметры горизонтальной ленты. В вертикальной колонке такой
   текст нечитаем. Селектор с той же специфичностью, но ниже по каскаду. */
.page-me .me-cab-nav .me-local-link {
    font-size: 13px !important;
    font-weight: 680 !important;
    color: var(--text-dim) !important;
    white-space: normal !important;
    border-radius: 13px !important;
    border: 0 !important;
}

.page-me .me-cab-nav .me-local-link.is-on {
    font-weight: 780 !important;
}

/* ---------- 10. Профиль игрока в шелле кабинета ---------- */

/* /player/N использовал горизонтальную липкую ленту .profile-tabs, /me — свою
   ленту, /studio и /admin — вертикальную колонку. Три паттерна на один и тот же
   объект «личный раздел». Профиль приводится к общему шеллу. */

.profile-cab .me-cab-nav {
    position: sticky !important;
    top: 20px !important;
    z-index: 1 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    backdrop-filter: none !important;
    overflow: visible !important;
}

.profile-cab .profile-tab {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 12px !important;
    border-radius: 13px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-dim) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 680 !important;
    text-align: left !important;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.profile-cab .profile-tab .ic {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: grid;
    place-items: center;
}

.profile-cab .profile-tab .ic svg { width: 17px; height: 17px; }

/* components.css содержит `.profile-tab span:not(:empty)` — правило написано
   под счётчик матчей в горизонтальной ленте. В новой разметке оно перехватывало
   иконку и название, превращая их в маленькие пилюли с шрифтом 9.5px.
   Гасим его для всех дочерних span и задаём стили адресно. */
.profile-cab .profile-tab > span {
    display: inline-flex !important;
    place-items: initial;
    min-width: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: inherit !important;
}

.profile-cab .profile-tab .ic {
    display: grid !important;
    place-items: center !important;
}

.profile-cab .profile-tab-label {
    flex: 1 1 auto;
    min-width: 0 !important;
    text-align: left;
    font-size: 13px !important;
    font-weight: inherit !important;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Счётчик — единственный span, которому пилюля нужна. */
.profile-cab .profile-tab .cab-nav-count:not(:empty) {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 auto;
    min-width: 20px !important;
    height: 19px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: var(--glass-2) !important;
    color: var(--text-dim) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
}

.profile-cab .profile-tab .cab-nav-count:empty { display: none !important; }

.profile-cab .profile-tab.is-active .cab-nav-count:not(:empty) {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
}

.profile-cab .profile-tab:hover {
    background: var(--glass-2) !important;
    color: var(--text) !important;
}

/* Приглушённая плашка вместо заливки акцентом — как в /me. */
.profile-cab .profile-tab.is-active {
    background: var(--card-elevated) !important;
    color: var(--text) !important;
    font-weight: 780 !important;
}

.profile-cab .profile-tab.is-active .ic { color: var(--accent) !important; }

/* Счётчик матчей/наград справа от названия. */
.cab-nav-count:not(:empty) {
    min-width: 20px;
    height: 19px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-dim);
    font-size: 10.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.profile-cab .profile-tab.is-active .cab-nav-count {
    background: var(--accent);
    color: var(--accent-ink);
}

.profile-sections { min-width: 0; }
.profile-cab .profile-panel[hidden] { display: none; }

@media (max-width: 900px) {
    .profile-cab .me-cab-nav {
        position: static !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        padding: 8px !important;
        border-radius: 16px !important;
        scrollbar-width: none;
    }

    .profile-cab .me-cab-nav::-webkit-scrollbar { display: none; }

    .profile-cab .profile-tab {
        width: auto !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 12.5px !important;
    }
}

/* ---------- 11. Подпись активного пункта в свёрнутом разделе ---------- */

.sidebar-nav .nav-group-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.15;
    min-width: 0;
}

.nav-group-current {
    font-size: 10.5px;
    font-weight: 620;
    letter-spacing: 0;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Заголовок с подписью выше однострочного — иначе текст обрезается.
   Высота переходит плавно (transition объявлен ниже), поэтому при сворачивании
   раздела заголовок не прыгает на 6px, а мягко расширяется вместе с подписью. */
.sidebar-nav .nav-group.has-active:not(.is-open) > .nav-group-toggle {
    height: 52px !important;
    min-height: 52px !important;
    align-items: center;
}

@media (min-width: 961px) {
    .sidebar-nav .nav-group.has-active:not(.is-open) > .nav-group-toggle {
        height: 50px !important;
        min-height: 50px !important;
    }
}

/* ---------- 12. Доступность и уважение к настройкам системы ---------- */

.nav-group-toggle:focus-visible,
.nav-flat:focus-visible,
.nav-child:focus-visible,
.me-cab-nav .me-local-link:focus-visible,
.profile-cab .profile-tab:focus-visible,
.home-more-summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Пользователи с включённым «уменьшить движение» не должны получать
   вращающиеся шевроны и разъезжающиеся панели. */
@media (prefers-reduced-motion: reduce) {
    .nav-group-chevron,
    .home-more-chev,
    .nav-flat,
    .nav-group-toggle,
    .nav-child,
    .me-cab-nav .me-local-link,
    .profile-cab .profile-tab {
        transition: none !important;
    }
}

/* ---------- 13. Анимация: шеврон, подпись и общая отзывчивость ---------- */

/* Шеврон крутится в том же темпе, что и раскрытие панели, с лёгким «доводом». */
.nav-group-chevron {
    transition: transform .32s cubic-bezier(.34, 1.16, .64, 1), color .2s ease;
}

.nav-group.is-open > .nav-group-toggle .nav-group-chevron {
    color: var(--accent);
}

/* Подпись активного пункта нужна только когда раздел свёрнут: раскрытый и так
   показывает подсветку внутри. Схлопываем её высотой, а не display —
   иначе заголовок дёргается на 6px при каждом переключении. */
.nav-group-current {
    display: block;
    max-height: 14px;
    opacity: 1;
    overflow: hidden;
    transition: max-height .26s ease, opacity .18s ease, margin-top .26s ease;
    margin-top: 1px;
}

.nav-group.is-open .nav-group-current {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

/* Высота заголовка тянется плавно вместе с подписью — без скачка 46 ⇄ 52px. */
.sidebar-nav .nav-flat,
.sidebar-nav .nav-group-toggle {
    transition: background-color .18s ease, color .18s ease, height .26s ease, min-height .26s ease;
}

/* Бейдж непрочитанных виден только в свёрнутом виде: в раскрытом он дублирует
   такой же бейдж на самом пункте «Сообщения». */
.nav-unread-collapsed {
    transition: opacity .18s ease, transform .18s ease;
}

.nav-group.is-open .nav-unread-collapsed {
    opacity: 0;
    transform: scale(.7);
    pointer-events: none;
}

/* Нажатие даёт тактильный отклик — меню перестаёт казаться «неживым». */
.sidebar-nav .nav-group-toggle:active,
.sidebar-nav .nav-flat:active { transform: scale(.985); }
.sidebar-nav .nav-child:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
    .nav-group-panel-wrap,
    .nav-group-panel,
    .nav-group-panel > .nav-child,
    .nav-group-current,
    .nav-unread-collapsed {
        transition: none !important;
    }

    .nav-group-panel > .nav-child { opacity: 1; transform: none; }
    .nav-group:not(.is-open) > .nav-group-panel-wrap > .nav-group-panel > .nav-child { opacity: 0; }
    .sidebar-nav .nav-group-toggle:active,
    .sidebar-nav .nav-flat:active,
    .sidebar-nav .nav-child:active { transform: none; }
}

/* ============================================================
   Матч&мяч v72.5 — Приоритеты действий и подбор соперника
   ============================================================ */

/* ---------- 14. Блок «Требует внимания» на главной ---------- */

/* Отделён от «Быстрого старта» цветом иконок, а не размером: это не более
   важный блок визуально, а просто другой по смыслу — там, где ждут ответа. */
.release-panel-head-alert { border-bottom: 1px solid var(--border); }

.release-panel-head-alert strong { color: var(--text); }

.release-quick-attention { margin-bottom: 4px; }

.release-quick-attention a i {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}

/* Первая строка — самая срочная (подтверждение результата): тонкая рамка
   без заливки, чтобы не конкурировать с главным CTA в герое. */
.release-quick-attention a:first-child {
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}

/* ---------- 15. Причина совпадения в карточке игрока ---------- */

.pcard-match-reason {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .01em;
    white-space: nowrap;
}

.pcard-match-reason::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

/* Разрыв до 40 очков ELO — практически равный соперник. */
.pcard-match-reason.is-ideal {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
}

.pcard-match-reason.is-close {
    background: var(--glass-2);
    color: var(--text-dim);
}

.pcard-match-reason.is-active {
    background: var(--glass-2);
    color: var(--text-faint);
}

/* ---------- 16. Группы уведомлений ---------- */

.notif-group-label {
    padding: 12px 16px 6px;
    font-family: var(--font-mono, inherit);
    font-size: 9px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.notif-group-label.is-action {
    color: var(--accent);
    padding-top: 8px;
}

/* ---------- 17. Пустые состояния с действием ---------- */

/* Кнопка внутри пустого состояния не должна прилипать к тексту. */
.empty-state .btn { align-self: center; }

/* ============================================================
   Матч&мяч v72.6 — Брони игрока и подбор соперника
   ============================================================ */

/* ---------- 18. Карточка брони корта ---------- */

/* Переиспользует скелет .my-training-card: бронь и тренировка — однотипные
   записи в личном расписании, и выглядеть они должны одинаково. */

.booking-card-address {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--text-dim);
}

.booking-card-type {
    margin-top: 8px;
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-faint);
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .02em;
}

/* Статусы брони. Заявка, ждущая клуб, не должна выглядеть как подтверждённая —
   иначе игрок приедет на корт, который за ним не закреплён. */
.my-training-status.is-ok {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
}

.my-training-status.is-warn {
    background: color-mix(in srgb, #f5a524 18%, transparent);
    color: #f5a524;
}

.my-training-status.is-bad {
    background: color-mix(in srgb, #f04438 16%, transparent);
    color: #f04438;
}

.btn.is-danger { color: #f04438; }
.btn.is-danger:hover { background: color-mix(in srgb, #f04438 12%, transparent); }

@media (max-width: 640px) {
    .booking-card .my-training-card-actions {
        display: flex;
        gap: 8px;
    }

    .booking-card .my-training-card-actions .btn { flex: 1 1 0; }
}

/* ============================================================
   Матч&мяч v72.7 — Категории уровня игры
   ============================================================ */

/* ---------- 19. Бейдж категории ---------- */

/* ELO 1085 не говорит новичку ничего. Буква с расшифровкой превращает
   число в понятную идентичность и сразу задаёт ожидания от матча.
   Градация цвета намеренно сдержанная: акцент достаётся только верхним
   категориям, иначе каталог превращается в светофор. */

.play-tier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 3px;
    border-radius: 999px;
    background: var(--glass-2);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: default;
}

.play-tier b {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--card-elevated);
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .02em;
}

.play-tier span { color: var(--text-faint); }

.play-tier-B b,
.play-tier-Bplus b { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.play-tier-A b { background: var(--accent); color: var(--accent-ink); }

/* Строка сигналов под именем: категория + причина совпадения.
   Не .pcard-list-tags — этот класс уже занят строкой характеристик игрока
   и жёстко привязан к grid-area: tags в release-v53. */




/* ---------- 20. Категория в профиле игрока ---------- */










/* Подсказка вынесена из заголовка и прижата к правому краю: внутри <strong>
   она наследовала жирность и разрывала название категории. */


@media (max-width: 640px) {
    
    /* Описание категории на узком экране раньше просто пропадало, и от блока
       оставалась одна буква. Вместо этого переносим его на свою строку. */
    
    
}

/* ---------- 21. Фильтр по категориям уровня ---------- */

/* Восемь кнопок в ряд не помещаются в колонку фильтров, поэтому раскладываем
   сеткой. Буквы короткие — читаются даже в узкой ячейке. */




/* «Все» — на всю ширину первой строки, остальные под ним ровной сеткой. */


/* ---------- 22. Сигнал долгого простоя ---------- */

/* Игрок с затухшим рейтингом не «плохой» — он просто давно не выходил.
   Приглушённый серый, без красного: это не ошибка и не предупреждение. */
.pcard-match-reason.is-idle {
    background: var(--glass-2);
    color: var(--text-faint);
    opacity: .85;
}

/* В мобильном bottom-sheet колонка шире, чем в десктопной панели —
   категории раскладываются свободнее и попадают под палец. */
@media (max-width: 900px) {
    

    
}

/* ============================================================
   Матч&мяч v72.8 — Страница «Рейтинг и уровни»
   ============================================================ */

.rs-explain-link {
    display: inline-block;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
}

.rs-explain-link:hover { text-decoration: underline; }

.rs-section { margin-top: 46px; }

.rs-section h2 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 8px;
}

.rs-lead {
    max-width: 720px;
    color: var(--text-dim);
    font-size: 14.5px;
    line-height: 1.6;
}

.rs-note {
    margin-top: 18px;
    padding: 13px 16px;
    border-radius: 13px;
    background: var(--glass-2);
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.55;
}

/* Четыре исхода матча. Цвет несёт смысл: рост слева, снижение справа. */
.rs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.rs-card {
    padding: 18px;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--border);
}

.rs-card b { display: block; font-size: 14px; font-weight: 800; margin-bottom: 7px; }
.rs-card p { font-size: 13px; line-height: 1.55; color: var(--text-dim); }

.rs-card.is-up { border-top-color: var(--accent); }
.rs-card.is-up-soft { border-top-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.rs-card.is-down-soft { border-top-color: color-mix(in srgb, #f5a524 55%, transparent); }
.rs-card.is-down { border-top-color: #f04438; }

/* Таблица уровней. Строкой, а не карточками: это справочник, который читают
   сверху вниз, сравнивая соседние значения. */
.rs-tiers {
    margin-top: 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
}

.rs-tier {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.rs-tier:last-child { border-bottom: 0; }

.rs-tier-key {
    display: grid;
    place-items: center;
    height: 38px;
    border-radius: 11px;
    background: var(--card-elevated);
    color: var(--accent);
    font-size: 15px;
    font-weight: 850;
}

.rs-tier-body b { display: block; font-size: 14px; font-weight: 780; }
.rs-tier-body p { font-size: 13px; color: var(--text-dim); margin-top: 2px; }

.rs-tier-range {
    font-family: var(--font-mono, inherit);
    font-size: 12px;
    color: var(--text-faint);
    white-space: nowrap;
}

.rs-faq { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }

.rs-faq-item {
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--card);
    overflow: hidden;
}

.rs-faq-item summary {
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 720;
}

.rs-faq-item summary::-webkit-details-marker { display: none; }
.rs-faq-item summary:hover { background: var(--glass-2); }
.rs-faq-item[open] summary { color: var(--accent); }

.rs-faq-item p {
    padding: 0 18px 17px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-dim);
}

.rs-cta {
    margin: 44px 0 20px;
    padding: 24px 26px;
    border-radius: 20px;
    background: var(--card-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.rs-cta b { display: block; font-size: 16px; font-weight: 800; }
.rs-cta span { font-size: 13.5px; color: var(--text-dim); }

@media (max-width: 900px) {
    .rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .rs-section { margin-top: 34px; }
    .rs-section h2 { font-size: 19px; }
    .rs-grid { grid-template-columns: minmax(0, 1fr); }

    /* Диапазон уходит под описание — три колонки на телефоне не помещаются. */
    .rs-tier {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 13px;
        padding: 14px;
    }

    .rs-tier-key { height: 34px; font-size: 14px; }
    .rs-tier-range { grid-column: 2; margin-top: -4px; }
    .rs-cta { flex-direction: column; align-items: flex-start; }
    .rs-cta .btn { width: 100%; }
}

/* ---------- 23. Герой страницы «Рейтинг и уровни» ---------- */

/* Повторяем механику ace-v3: кремовая плоскость слева под текст, фотография
   справа, маска растворяет её под колонкой с заголовком. Управляемый фон из
   админки перекрывает это правило через .ace-content-managed (release-v64),
   поэтому здесь только значение по умолчанию. */
.visual-page-hero-rating-system {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
    background: #eef0e4 !important;
}

.visual-page-hero-rating-system::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    border: 0 !important;
    background-image: url("/assets/img/home/hero-rating.jpg");
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: cover !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.3) 30%, #000 56%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.3) 30%, #000 56%);
}

.visual-page-hero-rating-system .visual-page-hero-copy { position: relative; z-index: 1; }

/* ---------- 24. Пометка простоя в лидерборде ---------- */

/* Приглушённая, без красного: долгий перерыв — это факт, а не провинность.
   Рядом с городом и числом матчей, а не рядом с самим рейтингом, чтобы
   не читалось как «его рейтинг сейчас другой». */
.rating-idle-mark {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-faint);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

@media (max-width: 620px) {
    .rating-idle-mark { margin-left: 0; margin-top: 3px; }
}

/* ============================================================
   Матч&мяч v72.10 — Подсказки к метрикам
   ============================================================ */

/* CSS-компонент без JS: раскрытие на :hover и :focus-within.
   focus-within обязателен — на телефоне hover не существует, и без него
   подсказка была бы недоступна половине пользователей. */

.metric-hint {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 5px;
    cursor: help;
}

.metric-hint > i {
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--glass-2);
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 850;
    font-style: normal;
    line-height: 1;
    transition: background-color .16s ease, color .16s ease;
}

.metric-hint:hover > i,
.metric-hint:focus-within > i {
    background: var(--accent);
    color: var(--accent-ink);
}

.metric-hint-pop {
    position: absolute;
    z-index: 60;
    bottom: calc(100% + 9px);
    left: 50%;
    width: 262px;
    padding: 13px 15px;
    border-radius: 14px;
    background: var(--card-elevated);
    border: 1px solid var(--border);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 5px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    text-align: left;
    cursor: auto;
}

.metric-hint:hover .metric-hint-pop,
.metric-hint:focus-within .metric-hint-pop {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.metric-hint-pop b {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    margin-bottom: 5px;
    color: var(--text);
}

.metric-hint-pop em {
    display: block;
    font-style: normal;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
}

.metric-hint-pop a {
    display: inline-block;
    margin-top: 9px;
    font-size: 11.5px;
    font-weight: 750;
    color: var(--accent);
}

/* У края экрана подсказка шириной 262px вылезает за вьюпорт.
   Прижимаем её к правому краю значка, а не центрируем. */
@media (max-width: 620px) {
    .metric-hint-pop {
        width: min(262px, calc(100vw - 40px));
        left: auto;
        right: -8px;
        transform: translate(0, 5px);
    }

    .metric-hint:hover .metric-hint-pop,
    .metric-hint:focus-within .metric-hint-pop {
        transform: translate(0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .metric-hint-pop { transition: none !important; }
}

/* ============================================================
   Матч&мяч v72.11 — Блок NTRP и счётчик сообщений
   ============================================================ */

/* ---------- 25. Блок NTRP в кабинете ---------- */

/* Раньше NTRP жил мелким бейджем в шапке и строкой в боковой колонке,
   хотя это единственная метрика, которая говорит о человеке до первой игры.
   Непройденный тест подсвечен акцентной рамкой — это призыв к действию,
   пройденный выглядит спокойной справкой. */

.ntrp-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--card-elevated);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}

.ntrp-block.is-done { border-color: var(--border); }

.ntrp-block-main {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
    flex: 1 1 260px;
}

.ntrp-value {
    display: grid;
    place-items: center;
    align-content: center;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 16px;
    background: var(--glass-2);
}

.ntrp-value b {
    font-size: 22px;
    font-weight: 850;
    line-height: 1;
    color: var(--accent);
}

.ntrp-block:not(.is-done) .ntrp-value b { color: var(--text-faint); }

.ntrp-value span {
    margin-top: 3px;
    font-family: var(--font-mono, inherit);
    font-size: 8.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ntrp-copy { min-width: 0; }

.ntrp-copy strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}

.ntrp-copy small {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-dim);
}

@media (max-width: 560px) {
    .ntrp-block { padding: 14px; }
    .ntrp-block .btn { width: 100%; }
    .ntrp-value { width: 54px; height: 54px; flex-basis: 54px; }
    .ntrp-value b { font-size: 19px; }
}

/* ---------- 26. Счётчик непрочитанных на верхнем уровне меню ---------- */

/* Пункт «Сообщения» переехал из «Профиля» на верхний уровень, и бейдж теперь
   лежит в плоской ссылке, а не в подпункте. */
.sidebar-nav .nav-flat .nav-unread-badge {
    flex: 0 0 auto;
    margin-left: auto;
}

.mobile-nav-scroll .nav-flat .nav-unread-badge { margin-left: auto; }

/* ============================================================
   Матч&мяч v72.12 — Лист ожидания турниров
   ============================================================ */

/* ---------- 27. Заявка игрока ---------- */

.wl-card {
    margin-top: 26px;
    padding: 24px 26px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--border);
}

.wl-card-head { margin-bottom: 12px; }

.wl-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-dim);
    font-size: 11.5px;
    font-weight: 750;
}

.wl-badge.is-ok {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
}

.wl-card h2 { font-size: 21px; font-weight: 800; margin-bottom: 7px; }

.wl-card > p {
    max-width: 640px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dim);
}

.wl-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 24px 0;
}

.wl-field:last-child { grid-column: 1 / -1; }

.wl-field > label {
    display: block;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 750;
    color: var(--text);
}

.wl-field > label small {
    margin-left: 6px;
    font-weight: 600;
    color: var(--text-faint);
}

.wl-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wl-seg button {
    padding: 0 14px;
    height: 36px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.wl-seg button:hover { background: var(--glass-2); color: var(--text); }

.wl-seg button.is-on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

/* Множественный выбор помечается галочкой: без неё непонятно, что можно
   отметить несколько вариантов, а не переключать один. */
.wl-seg-multi button.is-on::before {
    content: "✓";
    margin-right: 6px;
    font-weight: 850;
}

.wl-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--glass-2);
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.5;
    resize: vertical;
}

.wl-field textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.wl-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.wl-card-invited { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* ---------- 28. Сводка для организатора ---------- */

.wl-org { margin-top: 40px; }

.wl-org-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.wl-org-head h2 { font-size: 20px; font-weight: 800; }
.wl-org-head span { font-size: 13px; color: var(--text-dim); }

.wl-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.wl-stat {
    padding: 15px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--border);
}

.wl-stat b {
    display: block;
    font-size: 19px;
    font-weight: 850;
    color: var(--accent);
    line-height: 1.15;
}

.wl-stat span {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-dim);
}

.wl-org-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.wl-list {
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
}

.wl-row {
    display: grid;
    grid-template-columns: 20px 36px minmax(0, 1.2fr) minmax(0, 1.4fr);
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    cursor: pointer;
    transition: background-color .14s ease;
}

.wl-row:last-child { border-bottom: 0; }
.wl-row:hover { background: var(--card-elevated); }
.wl-row input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.wl-row-id b { display: block; font-size: 13.5px; font-weight: 750; }
.wl-row-id small { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }

.wl-row-pref { display: flex; flex-wrap: wrap; gap: 5px; }

.wl-chip {
    padding: 2px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 750;
    white-space: nowrap;
}

.wl-chip.is-dim { background: var(--glass-2); color: var(--text-faint); }

/* Комментарий занимает всю ширину под строкой: он бывает длинным
   и в колонку не помещается. */
.wl-row-comment {
    grid-column: 3 / -1;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
    font-style: italic;
}

/* ---------- 29. Подсказки в шапке каталога ---------- */



@media (max-width: 1000px) {
    .wl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .wl-card { padding: 18px; border-radius: 18px; }
    .wl-card h2 { font-size: 18px; }
    .wl-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .wl-card-actions .btn { width: 100%; }
    .wl-org-actions .btn { flex: 1 1 100%; }

    /* Строка разворачивается в две полосы: чекбокс с именем сверху,
       предпочтения под ними. Четыре колонки на телефоне нечитаемы. */
    .wl-row {
        grid-template-columns: 20px 36px minmax(0, 1fr);
        gap: 10px;
        padding: 13px;
    }

    .wl-row-pref { grid-column: 2 / -1; }
    .wl-row-comment { grid-column: 2 / -1; }
}

/* Герой листа ожидания: та же механика, что у остальных страниц. */
.visual-page-hero-waitlist {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
    background: #eef0e4 !important;
}

.visual-page-hero-waitlist::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background-image: url("/assets/img/home/hero-events.jpg");
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: cover !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.3) 30%, #000 56%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.3) 30%, #000 56%);
}

.visual-page-hero-waitlist .visual-page-hero-copy { position: relative; z-index: 1; }

/* ============================================================
   Матч&мяч v72.13 — Онбординг и выбор турнира
   ============================================================ */

/* ---------- 30. Первые шаги ---------- */

/* Полоса прогресса даёт то, чего не было у статичного списка, — ощущение
   движения. Три шага из трёх, и блок исчезает сам. */
.onboard-progress {
    height: 4px;
    margin: 0 0 12px;
    border-radius: 999px;
    background: var(--glass-2);
    overflow: hidden;
}

.onboard-progress i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

/* Класс .onb-step, а не .onboard-step: последний уже занят старым макетом
   в ace-v3 и жёстко зафиксирован через !important.

   Пройденный шаг гасим, но не убираем: видеть сделанное так же важно,
   как видеть оставшееся. */
.onboard-steps .onb-step.is-done { opacity: .5; }
.onboard-steps .onb-step.is-done i { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.onboard-steps .onb-step.is-done b { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Подсвечен ровно один следующий шаг — иначе призывы конкурируют. */
.onboard-steps .onb-step.is-next {
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    border-radius: 14px;
}

.onboard-steps .onb-step.is-next i {
    background: var(--accent);
    color: var(--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
    .onboard-progress i { transition: none; }
}

/* ---------- 31. Выбор турнира при приглашении ---------- */

.wl-pick-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 16px 0 4px;
    max-height: 320px;
    overflow-y: auto;
}

.wl-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--card);
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}

.wl-pick:hover { background: var(--card-elevated); }

.wl-pick:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.wl-pick input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.wl-pick b { display: block; font-size: 14px; font-weight: 750; }
.wl-pick small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-dim); }

/* ============================================================
   Матч&мяч v72.14 — Страница турниров
   ============================================================ */

/* ---------- 32. Счётчик по фазам ---------- */

/* «4 турнира» смешивало набор и архив. Теперь фазы разделены, и первым идёт
   то, во что можно попасть. */
.events-count-line {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--text-dim);
    flex-wrap: wrap;
}

.events-count-line b {
    color: var(--accent);
    font-weight: 850;
    font-size: 15px;
    margin-right: 3px;
}

.events-count-line i {
    font-style: normal;
    color: var(--text-faint);
    opacity: .5;
}

/* ---------- 33. Заполненность набора ---------- */

/* «2/8» само по себе не срочность. Полоса и «свободно 6 мест» читаются
   мгновенно и подсказывают, надо ли торопиться. */
.tournament-row-status { min-width: 172px; }

.ev-fill {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ev-fill-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.ev-fill-state {
    font-size: 11.5px;
    font-weight: 750;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ev-fill-state.is-live { color: var(--accent); }

.ev-fill-top b {
    font-size: 15px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.ev-fill-bar {
    height: 5px;
    border-radius: 999px;
    background: var(--glass-2);
    overflow: hidden;
}

.ev-fill-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

.ev-fill-left {
    font-size: 11px;
    color: var(--text-faint);
    font-weight: 650;
}

/* Осталось два места или меньше — единственный случай, когда цвет оправдан. */
.ev-fill-left.is-hot { color: #f5a524; font-weight: 800; }
.ev-fill-left.is-full { color: var(--text-faint); }

.ev-fill-winner {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 800;
    color: var(--accent);
}

/* Турнир с открытым набором — единственная строка, которой положена рамка:
   это то, ради чего человек пришёл на страницу. */
.tournament-row.is-open-reg {
    border-color: color-mix(in srgb, var(--accent) 32%, transparent) !important;
}

/* ---------- 34. Приглашение в лист ожидания ---------- */

.events-waitlist-promo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 15px 17px;
    border-radius: 18px;
    background: var(--card);
    border: 1px dashed var(--border-strong, var(--border));
    color: inherit;
    transition: background-color .16s ease, border-color .16s ease;
}

.events-waitlist-promo:hover {
    background: var(--card-hover);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.events-waitlist-ic {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 13px;
    background: var(--glass-2);
    color: var(--accent);
}

.events-waitlist-copy { flex: 1 1 auto; min-width: 0; }
.events-waitlist-copy b { display: block; font-size: 14px; font-weight: 780; }
.events-waitlist-copy small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.events-waitlist-go { color: var(--text-faint); flex: 0 0 auto; }

/* ---------- 35. Свёрнутый архив ---------- */

/* Блок выглядел статичной подписью: ни рамки-кнопки, ни глагола — было
   непонятно, что по нему нужно кликать. Теперь у него иконка слева,
   явная кнопка «Смотреть» справа и превью содержимого вместо
   абстрактного описания. */

.events-archive {
    margin-top: 32px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card);
    overflow: hidden;
    transition: border-color .18s ease;
}

.events-archive:hover { border-color: var(--border-strong, var(--border)); }

.events-archive-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    transition: background-color .16s ease;
}

.events-archive-summary::-webkit-details-marker { display: none; }
.events-archive-summary:hover { background: var(--glass-2); }

.events-archive-ic {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 13px;
    background: var(--glass-2);
    color: var(--text-dim);
}

.events-archive-copy { flex: 1 1 auto; min-width: 0; }

.events-archive-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}

/* Число внутри заголовка, а не отдельной колонкой: так оно читается
   как часть названия, а не как самостоятельный элемент. */
.events-archive-title em {
    font-style: normal;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-faint);
    font-size: 11.5px;
    font-weight: 800;
}

.events-archive-hint {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.4;
}

/* Ключевая правка: элемент, который выглядит нажимаемым. */
.events-archive-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    height: 34px;
    padding: 0 8px 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border-strong, var(--border));
    color: var(--text);
    font-size: 12.5px;
    font-weight: 750;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.events-archive-summary:hover .events-archive-toggle {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.events-archive-chev {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--glass-2);
    transition: transform .24s var(--ease, ease), background-color .16s ease;
}

.events-archive-summary:hover .events-archive-chev {
    background: color-mix(in srgb, var(--accent-ink) 18%, transparent);
}

.events-archive[open] .events-archive-chev { transform: rotate(180deg); }

.events-archive .events-archive-grid { padding: 4px 18px 20px; }

@media (max-width: 720px) {
    .tournament-row-status { min-width: 0; width: 100%; }
    .events-archive-summary { padding: 15px 16px; }
    .events-archive .events-archive-grid { padding: 4px 14px 18px; }
    .events-waitlist-promo { padding: 13px 14px; gap: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .ev-fill-bar i,
    .events-archive-chev { transition: none !important; }
}

/* Архив на телефоне: кнопка уходит под текст, иначе заголовок сжимается
   до двух слов в строке. */
@media (max-width: 620px) {
    .events-archive-summary {
        flex-wrap: wrap;
        gap: 12px;
        padding: 15px 15px 16px;
    }

    .events-archive-copy { flex: 1 1 calc(100% - 54px); }

    .events-archive-toggle {
        flex: 1 1 100%;
        justify-content: center;
        height: 38px;
        padding: 0 14px;
    }
}

/* ============================================================
   Матч&мяч v72.17 — Геометрия героев и читаемость ссылки
   ============================================================ */

/* ---------- 36. Высота блоков-героев ---------- */

/* ace-v3 задаёт этим блокам min-height 202–228px через !important.
   На такой высоте вертикальные снимки обрезаются почти полностью,
   а заголовок с подзаголовком и ссылкой упирается в нижний край. */
.page-header,
.players-page-head,
.visual-page-hero {
    min-height: 300px !important;
}

@media (max-width: 900px) {
    .page-header,
    .players-page-head,
    .visual-page-hero {
        min-height: 260px !important;
    }
}

@media (max-width: 620px) {
    .page-header,
    .players-page-head,
    .visual-page-hero {
        min-height: 230px !important;
    }
}

/* ---------- 37. Посадка фотографии ---------- */

/*
 * История правки. Сначала стоял `cover` — снимок заполнял блок целиком, но
 * обрезался по бокам. Потом `auto 100%` — кадр вписывался по высоте, зато
 * становился узкой полоской у правого края, и середина блока пустовала.
 *
 * Правильное решение — не менять масштаб, а ограничить область фона.
 * Псевдоэлемент занимает правые 70% ширины и заполняется с обрезкой:
 * фотография видна целиком по высоте, занимает заметную часть блока,
 * пропорции не искажаются, а левые 30% остаются чистыми под заголовок.
 */
.players-page-head::before,
.visual-page-hero::before,
.visual-page-hero-rating::before,
.visual-page-hero-events::before,
.visual-page-hero-rating-system::before,
.visual-page-hero-waitlist::before {
    inset: 0 0 0 30% !important;
    width: auto !important;
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
    /* Маска работает внутри самого псевдоэлемента, поэтому растворяет
       левый край фотографии в фоне блока, а не в пустоте. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 22%, #000 46%) !important;
    mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 22%, #000 46%) !important;
}

/*
 * no-repeat был прописан только для трёх героев из десяти — на остальных
 * узкая картинка тиражировалась по горизонтали. Задаём для всех разом.
 */
.visual-page-hero-players::before,
.visual-page-hero-coaches::before,
.visual-page-hero-trainings::before,
.visual-page-hero-history::before,
.visual-page-hero-my-trainings::before {
    inset: 0 0 0 30% !important;
    width: auto !important;
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
}

/* Управляемый из админки фон подчиняется тем же правилам.
   Селекторы повторяют специфичность release-v64, иначе его правила
   с !important остаются сильнее и возвращают cover на всю ширину. */
.players-page-head.ace-content-managed::before,
.visual-page-hero.ace-content-managed::before {
    inset: 0 0 0 30% !important;
    width: auto !important;
    background-size: cover !important;
    background-position: var(--ace-managed-bg-position, center right) !important;
    background-repeat: no-repeat !important;
}

/* Вариант, где фон лежит на самом блоке, а не на псевдоэлементе:
   ограничить область нечем, поэтому оставляем cover на всю ширину. */
.visual-page-hero.ace-content-managed.ace-content-bg-root {
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* На узком экране 30% отступа слева не остаётся — текст ложится поверх
   фотографии, и её нужно увести дальше вправо и притушить сильнее. */
@media (max-width: 760px) {
    .players-page-head::before,
    .visual-page-hero::before,
    .visual-page-hero-rating::before,
    .visual-page-hero-events::before,
    .visual-page-hero-rating-system::before,
    .visual-page-hero-waitlist::before,
    .visual-page-hero-players::before,
    .visual-page-hero-coaches::before,
    .visual-page-hero-trainings::before,
    .visual-page-hero-history::before,
    .visual-page-hero-my-trainings::before,
    .players-page-head.ace-content-managed::before,
    .visual-page-hero.ace-content-managed::before {
        inset: 0 0 0 42% !important;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.4) 30%, rgba(0,0,0,.85) 62%) !important;
        mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.4) 30%, rgba(0,0,0,.85) 62%) !important;
    }
}

/* ---------- 38. Ссылка на странице рейтинга ---------- */

/* Лаймовый акцент на кремовом фоне героя нечитаем: оба цвета светлые.
   Внутри светлого героя ссылка становится тёмной, а подчёркивание
   делает её опознаваемой как ссылку без опоры на цвет. */
.rs-explain-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(18, 22, 17, .9);
    color: #eaf6dc;
    font-size: 13px;
    font-weight: 750;
    transition: background-color .16s ease, transform .16s ease;
}

.rs-explain-link:hover {
    background: #121611;
    transform: translateY(-1px);
    text-decoration: none;
}

@media (max-width: 620px) {
    .rs-explain-link { font-size: 12.5px; padding: 7px 13px; margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .rs-explain-link { transition: none; }
}

/* ============================================================
   v73. Правки по обходу интерфейса
   ============================================================ */

/* ---------- Каталог игроков: кнопка «Открыть» на ноутбуках ----------
   Сетка карточки требует ~1030px, а слева ещё колонка фильтров (~280px).
   Правило, прячущее «Предпочтения», работало только до 1180px, поэтому
   в диапазоне 1181–1440 последняя колонка с кнопкой уезжала за край. */
@media (min-width: 1181px) and (max-width: 1440px) {
    
    
    
}

/* Кнопка не должна сжиматься до многоточия ни на какой ширине. */



/* ---------- График рейтинга: видимость точек ----------
   Подложка графика светлая (rgba(255,255,255,.82)), а точка была 6px лаймом
   с полупрозрачной белой обводкой — на светлом фоне почти не читалась.
   Увеличиваем и даём тёмную обводку, плюс цвет по исходу матча. */
.page-player .fc-hit i {
    width: 9px;
    height: 9px;
    border: 2px solid #11150f;
    background: #a9ef18;
    box-shadow: 0 1px 3px rgba(17, 21, 15, .28);
}
.page-player .fc-hit.is-loss i { background: #ff6b5e; }
.page-player .fc-hit.is-win i { background: #a9ef18; }
.page-player .fc-hit:hover i,
.page-player .fc-hit:focus-visible i,
.page-player .fc-hit.is-active i {
    transform: translate(-50%, -50%) scale(1.5);
    box-shadow: 0 0 0 5px rgba(169, 239, 24, .22), 0 1px 4px rgba(17, 21, 15, .3);
}
.page-player .fc-hit.is-loss:hover i,
.page-player .fc-hit.is-loss.is-active i {
    box-shadow: 0 0 0 5px rgba(255, 107, 94, .22), 0 1px 4px rgba(17, 21, 15, .3);
}

/* ---------- Фильтры каталогов: один механизм на все страницы ----------
   Рабочие правила модального листа были написаны только под `.page-players`
   (release-v53/v54), а mobile-release.css при этом задаёт всем остальным
   `.pf-card{position:static!important}`. В результате общий компонент
   catalog-filters.js на /trainings показывал панель прямо в потоке поверх
   контента, а на /coaches она уезжала в подвал страницы.

   Здесь то же поведение, но по признаку портирования в body (data-cf-owner),
   а не по имени страницы — компонент один, поведение должно быть одно. */
@media (max-width: 900px) {
    body > .pf-overlay[data-cf-owner] {
        position: fixed !important;
        inset: 0 !important;
        z-index: 620 !important;
        display: block !important;
        background: rgba(3, 5, 3, .72) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity .18s ease !important;
    }
    body > .pf-overlay[data-cf-owner].is-open { opacity: 1 !important; pointer-events: auto !important; }

    body > .pf-card[data-cf-owner] {
        position: fixed !important;
        z-index: 630 !important;
        left: 10px !important;
        right: 10px !important;
        top: max(76px, calc(env(safe-area-inset-top) + 66px)) !important;
        bottom: max(82px, calc(env(safe-area-inset-bottom) + 72px)) !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 18px 17px !important;
        overflow: auto !important;
        overscroll-behavior: contain !important;
        border: 1px solid var(--border-strong) !important;
        border-radius: 24px !important;
        background: #171c16 !important;
        box-shadow: 0 28px 90px rgba(0, 0, 0, .58) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(14px) scale(.985) !important;
        transition: opacity .2s ease, transform .22s var(--ease), visibility 0s linear .22s !important;
    }
    body > .pf-card[data-cf-owner].is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        transition-delay: 0s !important;
    }
    body > .pf-card[data-cf-owner] .pf-drawer-head { margin: -18px -17px 14px !important; padding: 17px 17px 13px !important; }

    /* Панель, оставшаяся в колонке (лист ещё ни разу не открывали), не должна
       занимать место и висеть поверх контента. Как только лист открывают,
       узел переносится в body и правило выше перестаёт на него действовать. */
    #trainings-filters .pf-card,
    #coaches-filters .pf-card { display: none !important; }
    #trainings-filters,
    #coaches-filters { height: 0 !important; overflow: visible !important; }
}

/* ---------- Вкладки «Тип тренировок» ----------
   Три вкладки с иконками и счётчиками не помещались по ширине: на узких
   экранах текст переносился и кнопки становились разновысокими. Лента
   прокручивается горизонтально — это предсказуемее переноса. */
.page-my-trainings .rating-segmented.my-training-source-tabs {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.page-my-trainings .rating-segmented.my-training-source-tabs::-webkit-scrollbar { display: none; }

@media (max-width: 900px) {
    .page-my-trainings .rating-segmented.my-training-source-tabs { width: 100%; }
    /* Возвращаем nowrap: перенос делал кнопки разной высоты. */
    .page-my-trainings .rating-segmented.my-training-source-tabs button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 7px 10px !important;
        font-size: 11.5px !important;
    }
}

/* ---------- Hero «Мои тренировки»: читаемость заголовка ----------
   Кремовая палитра v64 рассчитана на hero без фотографии, а маска-подложка
   .visual-page-hero::before глобально выключена хотфиксом в ace-v3.css —
   на десктопе текст лежал прямо на снимке. Мобильная версия это уже чинит
   (v69), здесь то же самое для широких экранов. */
@media (min-width: 901px) {
    body.page-my-trainings .visual-page-hero-my-trainings.ace-content-bg-root { position: relative !important; overflow: hidden !important; }
    body.page-my-trainings .visual-page-hero-my-trainings.ace-content-bg-root::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        background: linear-gradient(90deg, rgba(9, 13, 8, .95) 0%, rgba(9, 13, 8, .82) 42%, rgba(9, 13, 8, .30) 78%, rgba(9, 13, 8, .12) 100%) !important;
        pointer-events: none !important;
    }
    body.page-my-trainings .visual-page-hero-my-trainings.ace-content-bg-root .visual-page-hero-copy,
    body.page-my-trainings .visual-page-hero-my-trainings.ace-content-bg-root .my-trainings-hero-actions { position: relative !important; z-index: 2 !important; }

    body.page-my-trainings .visual-page-hero-my-trainings.ace-content-managed.ace-content-bg-root .visual-page-eyebrow { color: var(--accent) !important; }
    body.page-my-trainings .visual-page-hero-my-trainings.ace-content-managed.ace-content-bg-root h1 { color: #f5f9ee !important; }
    body.page-my-trainings .visual-page-hero-my-trainings.ace-content-managed.ace-content-bg-root p { color: rgba(238, 244, 231, .84) !important; }
    /* Разделитель у карточки действия был рассчитан на светлый фон. */
    body.page-my-trainings .visual-page-hero-my-trainings.ace-content-bg-root .my-trainings-action-card { border-left-color: rgba(245, 249, 238, .18) !important; }
}

/* ============================================================
   v73. Шапка профиля игрока (.pp-hero.has-title)
   ============================================================ */

/* ---------- Баг: название категории было невидимым ----------
   .pp-tier strong наследует var(--text) (в тёмной теме почти белый),
   а шапка с титулом — кремовая. Белым по кремовому. */




/* На обложке палитра инвертируется — там фон тёмный. */



/* ---------- «Зачёркнутые» цифры ----------
   IBM Plex Mono по умолчанию рисует перечёркнутый ноль: в «1000» три нуля
   подряд сливаются в сплошную линию и число читается как зачёркнутое.
   zero:0 — стандартная OpenType-функция, отключающая слэш. */

.pp-rating-moves b, 
.pp-summary-item > b {
    font-feature-settings: "zero" 0;
}

/* ---------- Сегментированный переключатель в админке ----------
   .rating-segmented стилизован только для .page-rating / .page-players /
   .page-my-trainings / .adm-request-filter. В настройках админки класс был,
   а стилей — нет: выбранная и невыбранная кнопки выглядели одинаково,
   и переключение казалось не срабатывающим. */
.page-admin .adm-setting-card .rating-segmented {
    min-width: 0;
    display: inline-flex !important;
    align-items: center;
    gap: 3px !important;
    padding: 4px !important;
    border: 1px solid var(--border) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .025) !important;
}
.page-admin .adm-setting-card .rating-segmented button {
    appearance: none;
    min-width: 0;
    min-height: 34px !important;
    padding: 0 15px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--text-dim) !important;
    font: 700 12px/1 var(--font-body) !important;
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s var(--ease), background .16s var(--ease);
}
.page-admin .adm-setting-card .rating-segmented button:hover {
    color: var(--text) !important;
    background: rgba(255, 255, 255, .05) !important;
}
.page-admin .adm-setting-card .rating-segmented button.is-selected {
    color: var(--accent-ink) !important;
    background: var(--accent) !important;
    font-weight: 780 !important;
}
.page-admin .adm-setting-card .rating-segmented button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}