/* ====== Base Reset ====== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Dark-first modern sports palette — slightly lighter */
    --bg: #181f3f;
    --bg-2: #232b54;
    --surface: rgba(255,255,255,0.06);
    --surface-strong: rgba(255,255,255,0.10);
    --surface2: rgba(255,255,255,0.13);
    --border: rgba(255,255,255,0.11);
    --border-strong: rgba(255,255,255,0.18);

    --text: #f2f4fd;
    --text-dim: #9aa3c5;
    --text-faint: #6a7296;

    --accent: #3b82f6;          /* vivid blue */
    --accent-2: #8b5cf6;         /* electric purple */
    --accent-3: #22d3ee;         /* cyan highlight */
    --accent-soft: rgba(59,130,246,0.14);
    --accent-purple-soft: rgba(139,92,246,0.14);

    --gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    --gradient-soft: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(139,92,246,0.18));
    --gradient-glow: radial-gradient(60% 60% at 50% 0%, rgba(59,130,246,0.35) 0%, transparent 70%);

    --gold: #fbbf24;
    --silver: #cbd5e1;
    --bronze: #fb923c;
    --green: #34d399;
    --red: #f87171;
    --yellow: #facc15;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 10px 30px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.25);
    --shadow-glow: 0 10px 40px rgba(59,130,246,0.25);

    /* ── Размерная шкала: ЕДИНАЯ точка управления масштабом интерфейса ──
       Корневой font-size, от которого считается весь rem-based layout
       (шрифты, паддинги, гэпы, эмодзи-иконки). Чтобы сделать всё мельче
       на мобиле — меняем --fs-root в мобильном override ниже, в одном
       месте. Десктоп — 16px (rem = привычный размер). */
    --fs-root: 16px;

    /* Поверх уже тёмной плашки (.player-hero / .tab-panel) кладутся
       плитки .tile — нужен чуть более светлый слой, иначе сливаются. */
    --surface-elev: rgba(255,255,255,0.045);
}

html { font-size: var(--fs-root); }
html, body { height: 100%; }

/* ⬇⬇⬇ ЕДИНАЯ ТОЧКА УПРАВЛЕНИЯ МОБИЛЬНЫМ МАСШТАБОМ ⬇⬇⬇
   Меньше число — мельче весь интерфейс на телефоне (шрифты, отступы,
   эмодзи-иконки). 16px = десктопный размер, 13px ≈ −19%. Крутить тут. */
/* ===========================================================================
   БРЕЙКПОИНТЫ (канон). Мобильная адаптация КОНТЕНТА — два значения:
     ≤900px — планшет/узко: стеки в одну колонку, таблицы → карточки/скролл,
              боковое меню → драуэр.
     ≤600px — телефон: уменьшенный масштаб (--fs-root) + точечная полировка.
   Исключения (свой прогрессивный/многоколоночный ресайз — НЕ сводить к паре):
     • Навбар — пошаговый коллапс: 1300 → 1000 → 900 (драуэр) → 800 → 700.
     • Матч-реплей — 3 колонки >1700 → 2 колонки 1201–1700 → стек ≤1200.
     • Состав (squad-builder) — стек ≤1280.
   =========================================================================== */
@media (max-width: 600px) {
    :root { --fs-root: 12px; }
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
    overflow-x: hidden;
}

/* Ambient background mesh */
body::before {
    content: '';
    position: fixed;
    inset: -20% -10% auto auto;
    width: 70vw;
    height: 70vw;
    background: radial-gradient(circle, rgba(59,130,246,0.22) 0%, transparent 60%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}
body::after {
    content: '';
    position: fixed;
    inset: auto auto -20% -10%;
    width: 70vw;
    height: 70vw;
    background: radial-gradient(circle, rgba(139,92,246,0.20) 0%, transparent 60%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

#app { position: relative; z-index: 1; }

a { color: var(--accent-3); text-decoration: none; transition: color .15s; }
a:hover { color: #67e8f9; text-decoration: none; }

::selection { background: rgba(59,130,246,0.4); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); background-clip: padding-box; border: 2px solid transparent; }

/* ====== App Loader (pre-Blazor) ====== */
.app-loader {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, #232b54 0%, #181f3f 70%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    font-family: 'Inter', system-ui, sans-serif;
    color: #fff;
    overflow: hidden;
}
.loader-glow {
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(59,130,246,0.35) 0%, transparent 60%);
    filter: blur(60px);
    animation: pulse 3s ease-in-out infinite;
}
.loader-ball {
    width: 4rem;
    height: 4rem;
    display: block;
    animation: bounce 1.2s ease-in-out infinite;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)) drop-shadow(0 0 12px rgba(59,130,246,0.45));
    z-index: 1;
}
.loader-prefix {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-faint);
    z-index: 1;
    margin-bottom: -2px;
}
.loader-text {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 1;
    text-transform: uppercase;
}
.loader-progress {
    width: 260px;
    height: 4px;
    margin-top: 0.4rem;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
    z-index: 1;
}
.loader-progress-bar {
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #22d3ee);
    background-size: 200% 100%;
    border-radius: 999px;
    transition: width 0.25s ease-out;
    animation: loader-shimmer 2s linear infinite;
}
.loader-progress-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.6);
    z-index: 1;
    min-height: 1em;
}
.loader-progress-text::after {
    content: var(--blazor-load-percentage-text, "0%");
}
.loader-hint {
    margin-top: 0.6rem;
    max-width: 340px;
    text-align: center;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    z-index: 1;
    padding: 0 1rem;
}

@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes pulse  { 0%,100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes loader-shimmer { 0% { background-position: 200% 0; } 100% { background-position: 0 0; } }

/* ====== Navbar ====== */
.navbar {
    display: grid;
    /* 2 колонки: левая (links) растягивается, правая занимает по контенту.
       Раньше было 3 колонки с navbar-center, но center-блок убран —
       SeasonStateBadge переехал в navbar-right (см. MainLayout.razor). */
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0 1.75rem;
    height: 76px;
    background: rgba(24,31,63,0.72);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.navbar-left {
    display: flex;
    align-items: center;
    min-width: 0;
}
.navbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.navbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-right: 2.5rem;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-prefix {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.brand-main {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-icon {
    font-size: 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    display: block;
    filter: drop-shadow(0 0 14px rgba(59,130,246,0.55));
}

.navbar-links {
    display: flex;
    gap: 0.25rem;
    flex: 1;
}

.navbar-links .nav-link { white-space: nowrap; }
.nav-short { display: none; }

.nav-link {
    padding: 0.5rem 1rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-dim);
    font-weight: 600;
    font-size: 0.9rem;
    transition: color .15s, background .15s;
    position: relative;
}

.nav-link:hover {
    color: var(--text);
    background: var(--surface);
    text-decoration: none;
}

.nav-link.active {
    color: #fff;
    background: var(--gradient-soft);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}
.user-login { font-weight: 700; color: var(--text); }

/* Группа правых кнопок (slot stale, vlad, vip, admin, messages, profile, exit).
   Сидит сразу справа от ИД. Вся navbar-user (ИД + эта группа) прижата
   к правому краю navbar через grid-template-columns: 1fr auto на .navbar. */
.navbar-right-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Бейдж капитана / вице / 3-го в карточке игрока на /squad.
   `.primary` = капитан №1 (цветной); остальные — серые лейблы. */
.captain-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.25rem;
    border-radius: 4px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}
.captain-badge.primary {
    background: rgba(251,191,36,0.18);
    border-color: rgba(251,191,36,0.6);
    color: var(--yellow);
}

/* Слот для бейджа «состав не сохранён» — фиксированная ширина даже когда
   иконки нет, чтобы соседняя информация (ИД) не прыгала. */
.lineup-stale-slot {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Слот ИД — слева в navbar-user (правая группа отделена margin-left:auto). */
.season-badge-slot {
    display: inline-flex;
    align-items: center;
}

/* Бейдж в шапке: «Состав не сохранён» (после сыгранного матча
   менеджеру нужно зайти на /squad и нажать «Сохранить»).
   См. MainLayout.razor + 0072. */
.lineup-stale-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(250,204,21,0.12);
    border: 1px solid rgba(250,204,21,0.45);
    color: var(--yellow);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.lineup-stale-badge:hover {
    background: rgba(250,204,21,0.22);
    border-color: rgba(250,204,21,0.75);
    text-decoration: none;
    color: var(--yellow);
}

/* Парный бейдж: «Состав сохранён» — зелёная галка. */
.lineup-ok-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(52,211,153,0.12);
    border: 1px solid rgba(52,211,153,0.45);
    color: var(--green);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.lineup-ok-badge:hover {
    background: rgba(52,211,153,0.22);
    border-color: rgba(52,211,153,0.75);
    text-decoration: none;
    color: var(--green);
}

.profile-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 1.05rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.profile-btn:hover { background: var(--surface2); border-color: var(--border-strong); text-decoration: none; }

.profile-btn.admin-btn {
    border-color: rgba(251,191,36,0.45);
    background: rgba(251,191,36,0.08);
}
.profile-btn.admin-btn:hover {
    background: rgba(251,191,36,0.15);
    border-color: rgba(251,191,36,0.7);
}

/* Тоггл «мобильная/полная версия» — подсветка активного состояния. */
.profile-btn.mobile-preview-on {
    background: rgba(59,130,246,0.18);
    border-color: var(--accent);
    color: var(--accent);
}
/* Кнопка нужна только на тач-устройствах (телефон/планшет). На десктопе
   (мышь, pointer:fine) viewport-мета всё равно игнорируется → всегда полная
   версия, переключать нечего — прячем. */
.mobile-toggle-btn { display: none; }
@media (pointer: coarse) {
    .mobile-toggle-btn { display: inline-flex; }
}

/* Блок «Настройки» в профиле: пока его содержимое целиком mobile-only
   (переключатель версии + установка PWA), на десктопе (pointer:fine) скрываем.
   Когда добавим десктоп-настройку — убрать этот гейт. */
.profile-settings-card { display: none; }
@media (pointer: coarse) {
    .profile-settings-card { display: block; }
}

.profile-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--yellow);
    color: #1a1300;
    font-size: 0.65rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(24,31,63,0.9);
    animation: badge-pulse 1.8s ease-in-out infinite;
}

/* Inline-вариант для мест, где бейдж должен идти ВНУТРИ текста, а не
   углом-оверлеем (sidebar nav, tab-button). Использовать в любых
   широких/inline контейнерах вместо .profile-badge.
   Box-shadow + glow дают читаемость на любом фоне; без ободка пилюля
   сливается с тёмно-синим sidebar и выглядит как обычная цифра. */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 0.45rem;
    border-radius: 999px;
    background: var(--accent-2);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    /* line-height не выставляем — у inline-flex центрирование делает
       align-items, а явный line-height сдвигает текст у тяжёлых шрифтов. */
    vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(24,31,63,0.9),
                0 0 6px rgba(139,92,246,0.3);
    animation: badge-pulse 1.8s ease-in-out infinite;
}
@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* ====== Sidebar ====== */
.sidebar {
    width: 260px;
    flex-shrink: 0;
    padding: 1.25rem 0.85rem;
    background: rgba(24,31,63,0.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-right: 1px solid var(--border);
    position: sticky;
    top: 76px;
    align-self: flex-start;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    padding-bottom: 1.5rem;
}

.sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Гамбургер и затемнение драуэра — по умолчанию (десктоп) скрыты, включаются
   в @media (max-width: 900px). См. боковое меню → драуэр ниже. */
.drawer-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 0.5rem;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 1.2rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;  /* убираем синий квадрат тапа на мобиле */
    -webkit-touch-callout: none;
    user-select: none;
}
.drawer-toggle:hover { background: var(--surface2); border-color: var(--border-strong); }
/* На нажатии/фокусе стиль НЕ меняется (Влад): без focus-ринга и без active-сдвига. */
.drawer-toggle:focus,
.drawer-toggle:focus-visible { outline: none; }
.drawer-toggle:active { background: var(--surface); border-color: var(--border); }
/* На тач-устройствах hover не должен «залипать» после тапа — держим базовый стиль. */
@media (hover: none) {
    .drawer-toggle:hover { background: var(--surface); border-color: var(--border); }
}
.drawer-backdrop { display: none; }
/* Быстрые ссылки в драуэре — на десктопе они в навбаре, тут скрыты. */
.drawer-quick { display: none; }

.sidebar-divider {
    height: 1px;
    background: var(--border, rgba(255,255,255,0.08));
    margin: 0.6rem 0.4rem;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.92rem;
    white-space: nowrap;
}

/* Пункт меню-кнопка (не навигация) — «Поддержать». Сброс дефолтов button.
   appearance: none обязателен — мобильный Safari/Chrome рисуют белую
   подложку нативной кнопки поверх background: none. */
.nav-link-btn {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: var(--text-dim);
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.nav-icon {
    font-size: 1.05rem;
    width: 1.4rem;
    text-align: center;
    filter: grayscale(0.15);
}

/* ====== Layout ====== */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-body { display: flex; flex: 1; align-items: stretch; }
.main-content { flex: 1; padding: 2rem 1.5rem 3rem; max-width: 1200px; margin: 0 auto; width: 100%; position: relative; min-width: 0; }

/* ====== Page Header ====== */
.page-header { margin-bottom: 1.75rem; }
.page-header h1 {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.subtitle { color: var(--text-dim); margin-top: 0.35rem; font-size: 0.95rem; }

/* ====== Buttons ====== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 0.65rem 1.4rem;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform .12s, box-shadow .2s, filter .15s;
    color: #fff;
    position: relative;
    /* overflow не должен обрезать абсолютно позиционированные потомки
       (в т.ч. тултипы через data-tooltip). Подсветка через .btn::before
       уже скруглена по inherited border-radius и не вылезает сама. */
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 60%);
    opacity: 0.6;
    pointer-events: none;
    border-radius: inherit;
}

.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(59,130,246,0.35); filter: brightness(1.08); }
.btn:active { transform: translateY(0); filter: brightness(0.95); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); transform: none; box-shadow: none; }

.btn-primary { background: var(--gradient); box-shadow: 0 6px 20px rgba(59,130,246,0.28); }
.btn-success { background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); box-shadow: 0 6px 20px rgba(16,185,129,0.28); }
.btn-warning { background: linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%); box-shadow: 0 6px 20px rgba(245,158,11,0.28); }
.btn-danger  { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); box-shadow: 0 6px 20px rgba(239,68,68,0.28); }
.btn-ghost   {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: none;
}
.btn-ghost::before { display: none; }
.btn-ghost:hover { background: var(--surface-strong); box-shadow: none; transform: translateY(-1px); }

/* ====== Action bar ====== */
.action-bar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

/* ====== Teams Grid ====== */
.teams-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: start;
}

.vs-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--accent-2);
    padding-top: 3rem;
}

/* ====== Glass Card Mixin (via shared selectors) ====== */
.team-card,
.card,
.fixture-row,
.pitch-container,
.stats-panel,
.events-panel,
.player-stats-block {
    background: var(--surface);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

/* ====== Team Card ====== */
.team-card {
    border-radius: var(--radius);
    overflow: hidden;
}

.team-header {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.25rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.team-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
}
.team-header > * { position: relative; z-index: 1; }

.team-label { font-size: 0.68rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
.team-name { font-size: 1.35rem; font-weight: 800; margin-top: 0.1rem; letter-spacing: -0.01em; }
.team-overall { font-size: 0.8rem; opacity: 0.9; margin-top: 0.25rem; }

.squad-section { padding: 0.5rem 0.75rem 0.75rem; }

.squad-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    padding: 0.75rem 0.5rem 0.4rem;
    font-weight: 700;
}

.bench-title { border-top: 1px solid var(--border); margin-top: 0.5rem; padding-top: 0.9rem; }

.player-table { width: 100%; border-collapse: collapse; }

.player-table th {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-faint);
    padding: 0.4rem 0.5rem;
    text-align: left;
    font-weight: 700;
}

.player-table td {
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.87rem;
}

.player-table tr:last-child td { border-bottom: none; }

/* Финансовый журнал (MyTeam → Финансовый отдел → Журнал): первая строка
   группы по ИД получает усиленную верхнюю границу — визуальное разделение
   между ИД'ами без вынесения отдельной заголовочной строки. Также гасим
   cursor:pointer / hover-фон от .player-table — строки не кликабельны. */
.player-table tr.fin-row-group-start td {
    border-top: 1px solid var(--border-strong, var(--border));
    padding-top: 0.7rem;
}
.player-table tr.fin-row-group-start:first-child td { border-top: none; }
.player-table tbody tr.fin-row-group-start,
.player-table tbody tr.fin-row-group-start + tr { cursor: default; }
.player-table tbody tr.fin-row-group-start:hover { background: transparent; }

.clickable-row { cursor: pointer; }
.clickable-row:hover { background: var(--surface2); }

/* Ссылка в строке трансферной таблицы (имя игрока, продавец).
   Наследует цвет текста, без подчёркивания; hover — акцент. */
.transfer-link { color: inherit; text-decoration: none; }
.transfer-link:hover { color: var(--accent); text-decoration: underline; }

.player-table tbody tr { cursor: pointer; transition: background .15s; }
.player-table tbody tr:hover { background: var(--surface2); }

/* Рейтинги (Страны / Команды / Менеджеры): таблица во всю ширину, «Репутация»
   прижата к правому краю. Узкие колонки (#, Репутация) — по контенту,
   колонка имени забирает остаток. Карточный/скролл-режим тут не нужен —
   таблицы узкие и помещаются на телефон. */
.ratings-table { width: 100%; }
.ratings-table .pos-col {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    color: var(--text-dim);
}
.ratings-table th.num,
.ratings-table td.num {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.gk-row { background: rgba(139,92,246,0.08); }
.gk-row:hover { background: rgba(139,92,246,0.14) !important; }

.pos-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: #93c5fd;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid rgba(59,130,246,0.25);
    min-width: 3.2rem;
    text-align: center;
    box-sizing: border-box;
}
.pos-badge.large { font-size: 0.85rem; padding: 4px 10px; min-width: 4rem; }

/* Компактный «+N» индикатор кол-ва освоенных позиций возле pos-badge.
   Используется в сжатых местах (squad pool-item, lineup) где нет места
   на полные badge'и вторичных позиций. */
.pos-extra-count {
    display: inline-block;
    margin-left: 0.2rem;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(168, 85, 247, 0.18);
    color: #c4b5fd;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.3;
    border: 1px solid rgba(168, 85, 247, 0.35);
    cursor: help;
}

/* В составе (.pool-item): на полной версии — все вторичные позиции бейджами,
   чип «+N» скрыт. На телефоне — бейджи прячем, показываем компактный «+N»
   (иначе 3 позиции съедают имя). */
.pool-item .pos-extra-count { display: none; }
@media (max-width: 600px) {
    .pool-item .pos-secondary { display: none; }
    .pool-item .pos-extra-count { display: inline-block; }
}

.ovr-cell   { font-weight: 800; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 0.95rem; }
.ovr-high { color: #34d399; text-shadow: 0 0 12px rgba(16,185,129,0.4); }
.ovr-mid  { color: #f59e0b; }
.ovr-low  { color: #94a3b8; }

.bench-table td { color: var(--text-dim); }

/* ====== Card (generic) ====== */
.card {
    border-radius: var(--radius);
    padding: 1.4rem;
}

.card-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    margin-bottom: 0.9rem;
}

/* ====== Forms / Auth ====== */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(59,130,246,0.25), transparent 60%),
        radial-gradient(ellipse 80% 60% at 80% 90%, rgba(139,92,246,0.25), transparent 60%),
        var(--bg);
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.auth-card {
    background: rgba(18,24,48,0.6);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 25px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
    position: relative;
}
.auth-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(59,130,246,0.4), rgba(139,92,246,0.4), transparent 50%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.auth-title {
    font-size: 1.65rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 0.35rem;
    letter-spacing: -0.02em;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.auth-logo {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
}

.auth-brand-full {
    text-align: center;
    color: var(--text-faint);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1.75rem;
    width: 100%;
    display: block;
}

.auth-sub { text-align: center; color: var(--text-dim); margin-bottom: 1.75rem; font-size: 0.9rem; }

.field { margin-bottom: 1rem; }

.field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.field input, .field select, .field textarea {
    width: 100%;
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    font-size: 0.95rem;
    background: rgba(255,255,255,0.04);
    color: var(--text);
    transition: border-color .15s, box-shadow .15s, background .15s;
    font-family: inherit;
}

.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }

/* Когда канонический <label class="checkbox"> живёт ВНУТРИ .field-ячейки
   (Squad-сетка, формы), правила .field label { display:block; uppercase }
   перебивают .checkbox { display:inline-flex }. Возвращаем checkbox-режим. */
.field > label.checkbox {
    display: inline-flex;
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
}

.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.field select option { background: #1a2140; color: var(--text); }

/* Dark popup for every <select> in the app — browsers render <option>
   with OS defaults (usually white) unless we force it per-element. */
select option { background: #1a2140; color: var(--text); }

/* ====== Search input ======
   Базовый поиск: лупа слева, surface-фон, accent на focus. Размеры
   совпадают с .fd-trigger / .formation-pick-btn — чтобы вставать в
   action-bar вместе с кнопками одного роста.
   Использование: <input type="text" class="search-input" placeholder="Поиск…" /> */
.search-input {
    width: 100%;
    padding: 0.55rem 0.8rem 0.55rem 2.1rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
    transition: background .15s, border-color .15s, box-shadow .15s;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(242,244,253,0.45)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
    background-repeat: no-repeat;
    background-position: 0.65rem center;
    background-size: 14px 14px;
}
.search-input::placeholder { color: var(--text-faint); }
.search-input:hover {
    background-color: var(--surface2);
    border-color: var(--accent);
}
.search-input:focus {
    outline: none;
    background-color: var(--surface2);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ====== Shared "fancy select" — themed trigger for native <select>.
   Used anywhere we want the same look as the custom set-piece dropdown
   without giving up the native popup.

   Specificity: doubled class `.fancy-select.fancy-select` gives (0,2,1) with
   the `select` type selector, which unconditionally beats legacy rules like
   `.field select` (0,1,1), `.rule-cond select` (0,1,1), and `.rule-action
   select` (0,1,1) regardless of source order. The doubled class is a
   deliberate, documented trick — don't "clean it up" or the old rules will
   reassert themselves for selects nested inside those containers. */
select.fancy-select.fancy-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    background-color: var(--surface);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%239aa3c7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s;
}
select.fancy-select.fancy-select:hover {
    background-color: var(--surface2);
    border-color: var(--accent);
}
select.fancy-select.fancy-select:focus {
    outline: none;
    border-color: var(--accent);
    background-color: var(--surface2);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
select.fancy-select.fancy-select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
select.fancy-select.fancy-select.compact {
    padding: 0.35rem 1.6rem 0.35rem 0.55rem;
    font-size: 0.82rem;
    background-position: right 0.55rem center;
}

.btn-block { width: 100%; justify-content: center; }

.auth-alt { margin-top: 1.5rem; text-align: center; font-size: 0.88rem; color: var(--text-dim); }

.alert {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: 0.87rem;
    border: 1px solid;
}
.alert-error   { background: rgba(248,113,113,0.1); color: #fca5a5; border-color: rgba(248,113,113,0.25); }
.alert-success { background: rgba(52,211,153,0.1); color: #6ee7b7; border-color: rgba(52,211,153,0.25); }
.alert-info    { background: var(--accent-soft); color: #93c5fd; border-color: rgba(59,130,246,0.3); }

.email-unconfirmed-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.email-unconfirmed-text { flex: 1 1 320px; min-width: 0; }
.email-unconfirmed-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.email-unconfirmed-msg { flex: 1 1 100%; color: var(--text-dim); font-size: 0.85rem; }

/* ====== Calendar / Fixtures ====== */
.fixture-list { display: flex; flex-direction: column; gap: 0.6rem; }

.fixture-row {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    transition: transform .2s, background .2s, border-color .2s;
}

.fixture-row:hover {
    transform: translateY(-2px);
    background: var(--surface-strong);
    border-color: var(--border-strong);
    box-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(59,130,246,0.15);
}

.fixture-date { color: var(--text-dim); font-size: 0.85rem; font-weight: 600; font-family: 'JetBrains Mono', monospace; }

.fixture-teams { display: flex; align-items: center; gap: 0.7rem; font-weight: 700; }
.fixture-teams .vs { color: var(--text-faint); font-weight: 700; font-size: 0.8rem; padding: 0 0.2rem; text-transform: lowercase; }
.fixture-home, .fixture-away { font-size: 0.98rem; color: var(--text); }

.fixture-badge {
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid transparent;
}
.fixture-badge.home { background: var(--accent-soft); color: #93c5fd; border-color: rgba(59,130,246,0.3); }
.fixture-badge.away { background: var(--accent-purple-soft); color: #c4b5fd; border-color: rgba(139,92,246,0.3); }

/* ====== Squad Selector ====== */
.squad-builder {
    display: grid;
    /* 2 колонки: состав игроков (600px) + поле/правила (1fr).
       Раньше слева была колонка auto с tactic-tabs — теперь они переехали
       наверх в горизонтальную панель. */
    grid-template-columns: 600px minmax(0, 1fr);
    gap: 1rem 1.5rem;
    align-items: stretch;
}

/* В режимах Switches/Subs/SetPieces сайдбар-грид игроков скрыт —
   правила получают всё доступное место, чтобы поля и кнопки не сжимались. */
.squad-builder.no-sidebar {
    grid-template-columns: minmax(0, 1fr);
}
.squad-builder.no-sidebar .pitch-column {
    max-width: none;
}

.pitch-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    max-width: 560px;
    width: 100%;
    margin: 0;
}

.formation-pitch {
    position: relative;
    aspect-ratio: 4/5;
    width: 100%;
    max-width: 480px;
    align-self: center;
    background:
        radial-gradient(ellipse at center, #15803d 0%, #064e3b 100%);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow), inset 0 0 60px rgba(0,0,0,0.35);
    border: 1px solid var(--border-strong);
}

/* ====== Tactic Tabs ====== */
.tactic-tabs {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    align-self: stretch;
}

.tactic-tabs.vertical {
    flex-direction: column;
    flex-wrap: nowrap;
    align-self: start;
    width: 130px;
    position: sticky;
    top: 90px;
}

/* Горизонтальная панель НАД полем состава: 5 табов тактик слева,
   3 иконки (Switches/Subs/SetPieces) после spacer, потом Сохранить и
   Сбросить с явным отступом справа. */
.tactic-tabs.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
    position: relative;
}
/* Обёртка кнопок панели. На десктопе растворяется (display:contents) —
   кнопки раскладываются flex'ом самой .tactic-tabs.horizontal как раньше.
   На мобиле становится реальным flex-боксом с горизонтальным скроллом
   (см. @media 700px), при этом overflow не клипает абсолютные статус/алерт,
   которые лежат рядом, а не внутри этой обёртки. */
.tactic-tabs-row { display: contents; }
/* Статус "Сохранено" внутри горизонтальной панели — abs позиционирован,
   чтобы не сдвигать остальные элементы при появлении (раньше "Сбросить"
   уезжал вправо когда показывался статус). */
.tactic-tabs.horizontal .sidebar-status {
    position: absolute;
    right: 3.2rem;
    bottom: calc(100% + 0.2rem);
    margin: 0;
    pointer-events: none;
}

/* Структурный alert при попытке сохранить состав с травмированным/
   дисквалифицированным игроком. См. UnavailableLineupError.cs + Squad.razor. */
.unavailable-alert {
    position: absolute;
    right: 3.2rem;
    bottom: calc(100% + 0.5rem);
    max-width: 28rem;
    padding: 0.75rem 1rem;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.55);
    border-radius: 0.5rem;
    color: var(--text-bright, #f5f5f5);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    z-index: 4;
}
.unavailable-alert-title {
    font-weight: 600;
    font-size: 0.82rem;
    color: #fca5a5;
    margin-bottom: 0.3rem;
}
.unavailable-alert-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}
.unavailable-alert-list li {
    padding: 0.1rem 0;
}
.unavailable-alert-icon {
    display: inline-block;
    width: 1.4rem;
}
.unavailable-alert-detail {
    color: var(--text-dim, #cbd5e1);
}
.tactic-tabs.horizontal .tactic-tabs-spacer {
    flex: 1;
    min-width: 1rem;
}
.tactic-tab-icon {
    padding: 0.45rem 0.7rem;
    font-size: 1.05rem;
    line-height: 1;
}
.tactic-tab-save {
    margin-left: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}
.tactic-tab-reset {
    margin-left: 1.5rem;
    padding: 0.5rem 0.7rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-faint);
}
.tactic-tab-reset:hover { color: var(--red); border-color: var(--red); }

.tactic-tab {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 0.55rem 0.95rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    text-align: left;
}
.tactic-tab:hover { background: var(--surface2); color: var(--text); }
.tactic-tab.active {
    background: var(--gradient-soft);
    color: #fff;
    border-color: var(--border-strong);
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* ====== Squad Settings ====== */
.squad-settings {
    width: 100%;
    padding: 0.9rem 1rem;
}

.settings-section-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0.25rem 0 0.4rem;
    padding-top: 0.25rem;
}
.settings-section-title:not(:first-child) {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

/* ====== Reusable checkbox control ======
   Canonical checkbox used across the app. Native input is hidden and
   replaced with a 18×18 square + drawn checkmark so the look matches
   the rest of the design. Use via:
     <label class="checkbox">
       <input type="checkbox" @bind="_value" />
       <span>Label</span>
     </label>
*/
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.85rem;
    color: var(--text);
}
.checkbox input[type="checkbox"],
.checkbox-field input[type="checkbox"] {
    /* !important guards against .field input { width:100% } leaking in when
       the checkbox lives inside a .field wrapper (AdminPolls). */
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    /* Dark fill — matches the surrounding panel, not a light accent tile. */
    background: rgba(8, 12, 30, 0.75);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    position: relative;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}
.checkbox input[type="checkbox"]:hover,
.checkbox-field input[type="checkbox"]:hover {
    border-color: rgba(255, 255, 255, 0.35);
}
.checkbox input[type="checkbox"]:checked,
.checkbox-field input[type="checkbox"]:checked {
    /* Keep the box dark when checked — only the tick signals state.
       Checkmark drawn via SVG background so it stays perfectly centered
       regardless of border width / box size. */
    background:
        rgba(8, 12, 30, 0.9)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.5 L5 9 L9.5 3.5' fill='none' stroke='%2334d399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
        no-repeat center center;
    background-size: 70% 70%;
    border-color: var(--green);
}
.checkbox input[type="checkbox"]:focus-visible,
.checkbox-field input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(52, 211, 153, 0.35);
    outline-offset: 2px;
}

.checkbox-field { align-self: end; }
.checkbox-field label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.direction-block { margin-top: 0.75rem; }
.direction-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
}
.direction-sum {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    color: var(--text);
}
.direction-sum.bad { color: var(--red); }

.direction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.35rem;
    align-items: end;
}
.direction-grid .field { margin: 0; min-width: 0; }

/* Компактный stepper внутри Лево/Центр/Право — правая колонка Squad
   ужимается на узких экранах, и кнопки −/+ при стандартных padding=0.75rem
   выпадают за пределы. */
.direction-grid .stepper-btn {
    padding: 0 0.35rem;
    font-size: 0.95rem;
}
.direction-grid .stepper-input {
    width: 2.5ch;
    font-size: 0.85rem;
    padding: 0.3rem 0.15rem;
}
.direction-grid .stepper-label {
    font-size: 0.72rem;
}

/* Shared stepper-field: label above, .stepper below.
   Used anywhere we want the Profile-style counter pattern in a form grid. */
.stepper-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
    min-width: 0;
}
.stepper-field .stepper { width: 100%; justify-content: space-between; }
.stepper-field .stepper-input { flex: 1; width: auto; }
.stepper-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}

.settings-status.bad { color: var(--red); }

/* ====== Tactic tabs divider ====== */
.tactic-tabs-divider {
    height: 1px;
    background: var(--border);
    margin: 0.4rem 0;
}

/* Pushes the Save/Reset action block to the bottom of the sticky tabs column. */
.tactic-tabs-spacer {
    flex: 1 1 auto;
    min-height: 1rem;
}

/* Save button lives at the bottom of the left sticky tabs column so its
   position is independent of whichever sub-tab the user is on. */
.sidebar-save {
    padding: 0.55rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-top: 0.2rem;
}
.sidebar-status {
    display: block;
    font-size: 0.72rem;
    color: var(--green);
    text-align: center;
    margin-top: 0.4rem;
    line-height: 1.3;
}
.sidebar-status.bad { color: var(--red); }

/* Reset sits visually apart from the rest — bigger top gap + muted tone so
   it never competes with the primary action. */
.sidebar-reset {
    margin-top: 1.25rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
    color: var(--text-dim);
    border-style: dashed;
    justify-content: center;
}
.sidebar-reset:hover { color: var(--red); border-color: var(--red); }

/* ====== Rule Editor ====== */
.rules-card {
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.rules-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.rules-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text);
}

.rules-empty {
    padding: 1rem 0.5rem;
    text-align: center;
    color: var(--text-faint);
    font-size: 0.85rem;
    font-style: italic;
}

.rule-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rule-line-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rule-conditions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Condition block — stacks vertically so labels never get squished in the
   narrow rules column. Layout:
     row 1: [========= TYPE dropdown (full width) ==========]
     row 2: [========= PLAYER dropdown (full width) ========]  (PlayerRating/Fitness only)
     row 3: [ Op ]  [ − value + ]  [× delete]
   The surrounding `.rule-cond` box gets a subtle border so multiple
   conditions inside one rule stay visually separated. */
.rule-cond {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.cond-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.cond-row .fd-wrap { min-width: 0; max-width: none; }

/* Full-width row for the two wide dropdowns (type, player). */
.cond-row.cond-row-full .fd-wrap { flex: 1 1 auto; width: 100%; }
.cond-row.cond-row-full .fd-trigger { width: 100%; }

/* Compare row: op (fixed narrow) | stepper | delete-X pushed to the end. */
.cond-row.cond-row-compare .fd-wrap { flex: 0 0 4.6rem; }
.cond-row.cond-row-compare .fd-trigger { width: 100%; }
.cond-row.cond-row-compare .stepper { flex: 0 0 auto; }
/* Wide enough for three digits (up to 120) + caret, in JetBrains Mono. */
.cond-row.cond-row-compare .stepper-input {
    width: 4.5ch;
    padding: 0.3rem 0.55rem;
}
.cond-row.cond-row-compare > .btn { margin-left: auto; }

/* Legacy selectors kept for any remaining <select>/<input> users (none now,
   but cheap to leave). */
.rule-cond select,
.rule-cond input[type="number"] {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    min-width: 0;
}

.rule-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-dim);
}
.rule-action select {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}
.rule-action > .btn { margin-left: auto; }

/* ==== Rule card header (delete button lives here instead of inside an
   action row, so the two "Уходит / Выходит" rows can span full width).
   Clicking the header toggles collapsed state; the × button stops
   propagation so it only deletes. ==== */
.rule-card-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.2rem 0.4rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
}
.rule-card.collapsed .rule-card-top {
    border-bottom: none;
    padding-bottom: 0.15rem;
}
.rule-card-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    color: var(--text-dim);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: color .15s;
}
.rule-card-top:hover .rule-card-toggle { color: var(--accent); }
.rule-card-title {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}
/* Inline summary shown only when collapsed, next to the title. */
.rule-card-summary {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* When expanded, the delete button needs to be pushed to the right manually
   since there's no flex: 1 filler element between title and delete. */
.rule-card:not(.collapsed) .rule-card-title { flex: 1 1 auto; }
.rule-card-delete {
    background: transparent;
    border: none;
    color: var(--red);
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    transition: background .12s;
    flex-shrink: 0;
}
.rule-card-delete:hover { background: rgba(248,113,113,0.15); }

/* Rules-card header counter (e.g. "Замены (3 / 10)"). */
.rules-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-faint);
    margin-left: 0.35rem;
    letter-spacing: 0.02em;
}

/* ==== Substitution action block: one row per direction. Label (fixed
   width) + colored double-chevron icon + full-width dropdown. ==== */
.rule-action-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
}
.rule-action-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.rule-action-label {
    flex: 0 0 5rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}
/* CSS-rotated « » » so it reads as a double-chevron in the required direction
   without relying on less-common Unicode codepoints. */
.rule-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
}
.rule-action-icon--out { color: var(--red);   transform: rotate(90deg); }
.rule-action-icon--in  { color: var(--green); transform: rotate(-90deg); }

.rule-action-select {
    flex: 1 1 auto;
    min-width: 0;
}
.rule-action-select .fd-wrap { max-width: none; }
.rule-action-select .fd-trigger { width: 100%; }

.btn.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.82rem; }
.btn.btn-xs { padding: 0.18rem 0.5rem; font-size: 0.75rem; border-radius: 6px; }
.btn.btn-xs.danger { color: var(--red); }
.btn.btn-xs.danger:hover { background: rgba(248,113,113,0.12); }
.btn.btn-xs:disabled { opacity: 0.35; cursor: not-allowed; }

/* ====== Set-piece takers ====== */
.rules-hint {
    font-size: 0.82rem;
    color: var(--text-dim);
    padding: 0.1rem 0 0.3rem;
    line-height: 1.4;
}

.takers-card { gap: 0.4rem; }

.taker-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.taker-rank {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    color: var(--text-dim);
    width: 1.6rem;
    text-align: right;
}

.taker-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.taker-actions {
    display: flex;
    gap: 0.2rem;
    margin-left: auto;
}

/* ====== <FancyDropdown> reusable component ======
   Custom-rendered popup (no native <select>). Trigger + panel share the
   `.dropdown-panel` / `.dropdown-option` looks used for set-piece takers;
   classes below add the value-selector variant (solid border, current value
   on the left, caret on the right). */
.fd-wrap {
    position: relative;
    min-width: 0;
}

.fd-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.8rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.fd-trigger:hover:not(:disabled) {
    background: var(--surface2);
    border-color: var(--accent);
}
.fd-trigger.open {
    background: var(--surface2);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.fd-trigger.open .dropdown-caret { transform: rotate(180deg); color: var(--accent); }
.fd-trigger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.fd-trigger.compact {
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
    border-radius: 7px;
    min-width: 0;
}
/* Soft cap for compact dropdowns in the tactic-switch action row only.
   Condition rows use .cond-col for explicit sizing, so no cap there. */
.rule-action .fd-wrap { max-width: 16rem; }

.fd-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.fd-panel {
    /* position/background inherited from .dropdown-panel */
}

.fd-option {
    /* shape/hover inherited from .dropdown-option */
    justify-content: flex-start;
}
.fd-option.selected {
    background: var(--accent-soft);
    color: #dbeafe;
}
.fd-option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fd-option-hint {
    color: var(--text-faint);
    font-size: 0.78rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    margin-left: auto;
    padding-left: 0.5rem;
}

/* Lift the card that contains an open fancy-dropdown panel above sibling
   cards, so the absolutely-positioned panel isn't clipped/covered. */
.card:has(.fd-panel) { z-index: 55; position: relative; }
/* When any dropdown is open, cards that host fancy-triggers sit above any
   page-level backdrop (not ours — but keeps behaviour sane if some future
   code adds one). Safe no-op otherwise. */
body:has(.fd-panel) .card:has(.fd-trigger) { z-index: 50; position: relative; }

/* ====== Custom dropdown (replaces native <select> for takers) ======
   Stacking rationale: `.card` has backdrop-filter → each card creates its own
   stacking context. Without lifting the rules-card, the later `.card` siblings
   (save-button card) AND the later `.takers-card` siblings paint on top of
   an absolutely-positioned dropdown. So we lift the open card chain above
   them (and above the click-catching backdrop) while the dropdown is open. */
.rules-card:has(.dropdown-panel) { z-index: 50; }
.takers-card:has(.dropdown-panel) { z-index: 5; }

.dropdown-wrap {
    /* Relative only so the absolute panel is anchored to this box.
       Deliberately NO z-index here: an unconditional z-index on every wrap
       would make closed dropdowns' wraps outrank the takers-card that holds
       the open panel (which rises to z:5 via :has below), and their trigger
       buttons would bleed through the open panel. The panel itself uses
       z-index within whichever takers-card :has() lifts. */
    position: relative;
    margin-top: 0.2rem;
}

.taker-add-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.taker-add-trigger:hover {
    background: var(--surface2);
    border-color: var(--accent);
    color: var(--text);
}
.taker-add-trigger.open {
    background: var(--surface2);
    border-style: solid;
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.dropdown-caret {
    font-size: 0.7rem;
    line-height: 1;
    transition: transform .15s;
    color: var(--text-dim);
}
.taker-add-trigger.open .dropdown-caret {
    transform: rotate(180deg);
    color: var(--accent);
}

.dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 51;
    background: #1a2140;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 0.3rem;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 14px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(99,102,241,0.08);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    animation: dropdown-in .12s ease-out;
}

@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-panel::-webkit-scrollbar { width: 8px; }
.dropdown-panel::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
}
.dropdown-panel::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.dropdown-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.dropdown-option:hover,
.dropdown-option:focus-visible {
    background: var(--accent-soft);
    outline: none;
}
.dropdown-option-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.settings-grid .field { margin: 0; min-width: 0; }

/* Single-column variant — each field on its own row. */
.settings-stack {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.settings-stack .field { margin: 0; }

.settings-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.settings-status { color: var(--green); font-weight: 600; font-size: 0.85rem; }

/* Pitch stripes */
.formation-pitch {
    background-image:
        repeating-linear-gradient(0deg,
            rgba(255,255,255,0.03) 0,
            rgba(255,255,255,0.03) 28px,
            rgba(0,0,0,0.05) 28px,
            rgba(0,0,0,0.05) 56px),
        radial-gradient(ellipse at center, #15803d 0%, #064e3b 100%);
}

.formation-pitch::before {
    content: '';
    position: absolute;
    inset: 4%;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    pointer-events: none;
}

.formation-pitch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 4%;
    right: 4%;
    height: 2px;
    background: rgba(255,255,255,0.3);
}

.slot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 56px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: transform .15s;
}
.slot:hover { transform: translate(-50%, -50%) scale(1.05); }

.slot-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    z-index: 2;                 /* фишка поверх стрелки */
    background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 100%);
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #1e3a8a;
    font-size: 0.75rem;
    overflow: hidden;
}

.slot.empty .slot-avatar {
    background: rgba(255,255,255,0.12);
    border-style: dashed;
    border-color: rgba(255,255,255,0.5);
    color: #fff;
    box-shadow: none;
}

.slot.selected .slot-avatar {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    box-shadow: 0 0 18px rgba(251,191,36,0.7);
}

.slot-label {
    color: #fff;
    font-size: 0.64rem;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    margin-top: 4px;
    margin-left: -14px;
    margin-right: -14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slot-pos {
    display: inline-block;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 0.56rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-top: 2px;
    letter-spacing: 0.4px;
    border: 1px solid rgba(255,255,255,0.15);
}

/* ── Персональные индикаторы на тактической схеме (чисто визуально) ── */
.pitch-personal-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.55);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: background .15s, border-color .15s, box-shadow .15s;
    backdrop-filter: blur(2px);
}
.pitch-personal-toggle:hover { border-color: #fff; }
.pitch-personal-toggle.on {
    background: var(--accent, #f59e0b);
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(245,158,11,0.4), 0 2px 8px rgba(0,0,0,0.4);
}

/* Стрелка движения — пунктирная SVG-линия. absolute, низ стрелки на центре
   avatar; поворот вокруг этого центра — фишка НЕ смещается (Влад: кружочки
   всегда на месте). */
.slot-arrow {
    position: absolute;
    left: 50%;
    top: -36px;                    /* низ SVG (height 55) попадает на ~центр avatar (19px) */
    transform-origin: 50% 100%;    /* поворот вокруг низа = центра фишки */
    color: #cbd5e1;                /* нейтральный серый */
    pointer-events: none;
    z-index: 1;                    /* ПОД фишкой (avatar выше) */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}

/* Вторичные иконки — absolute под фишкой, НЕ влияют на высоту слота. */
.slot-icons {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 1px;
    flex-wrap: nowrap;
    margin-top: 1px;
}
.slot-ic {
    font-size: 0.62rem;
    line-height: 1.1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.7));
}

.squad-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.squad-groups {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 0.9rem;
    flex: 1;
}

/* The last visible group fills any remaining vertical space so the card's
   bottom lines up with the right-column settings card. */
.squad-groups .squad-group:last-child { flex: 1; min-height: 0; }
.squad-groups .squad-group:last-child .squad-group-body { flex: 1; min-height: 0; }

.squad-hint {
    font-size: 0.82rem;
    color: var(--text-dim);
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    margin-bottom: 0.25rem;
}
.squad-hint b { color: var(--text); font-weight: 700; }

.squad-group {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--border);
    overflow: hidden;
}

.squad-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.75rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.squad-group-head.clickable { cursor: pointer; transition: background .12s; }
.squad-group-head.clickable:hover { background: var(--surface2); }
.squad-group-title { color: var(--text); }
.squad-group-count {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-dim);
    font-size: 0.75rem;
    letter-spacing: 0;
}

.squad-group-body {
    display: flex;
    flex-direction: column;
    padding: 0.15rem 0.25rem;
}

.squad-empty {
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-faint);
    text-align: center;
    font-style: italic;
}

.pool-item {
    display: grid;
    /* 8 колонок: №, имя, статус-бейджи (травма/дискв./школьник/СБ/U21),
       позиционные бейджи (капитан + pos), Физ., Мораль, OVR, кнопка инструкций.
       Статус и позиции — отдельные ячейки, чтобы статус не «слипался»
       с позиционным бейджем (см. PlayerBadges). */
    grid-template-columns: 22px minmax(0, 1fr) auto auto 32px 32px 32px 22px;
    gap: 0.45rem;
    align-items: center;
    padding: 0.4rem 0.55rem;
    cursor: grab;
    transition: background .12s, transform .08s;
    border-radius: 8px;
    user-select: none;
}
.pool-status-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: flex-end;
    min-width: 0;
}
.pool-badge-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    /* Pos-badge прижат к ПРАВОЙ границе ячейки — captain (если есть) уходит
       левее, не сдвигая колонок справа. Без этого добавление К-бейджа
       толкало позиционный бейдж вправо в одной строке. */
    justify-content: flex-end;
}

/* На десктопе обёртка прозрачна для грида — статус и позиции остаются
   отдельными колонками 8-колоночного pool-item. На мобиле (см. медиа ниже)
   она становится второй строкой. */
.pool-tags { display: contents; }

/* Trailing column: 🎯 instructions button on starters, blank spacer otherwise. */
.instr-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity .12s, background .12s, border-color .12s;
}
.instr-btn:hover { opacity: 1; background: var(--surface2); border-color: var(--border); }
.instr-btn.active {
    opacity: 1;
    background: var(--accent-soft);
    border-color: var(--accent);
}
.instr-spacer { width: 22px; height: 22px; }

.pool-item + .pool-item { border-top: 1px solid rgba(255,255,255,0.04); }
.pool-item:hover { background: var(--surface2); }
.pool-item:active { cursor: grabbing; transform: scale(0.99); }
.pool-item.selected {
    background: var(--gradient-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.pool-num {
    color: var(--text-faint);
    font-weight: 700;
    font-size: 0.78rem;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
}
.pool-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pool-metric {
    font-weight: 800;
    font-size: 0.82rem;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    padding: 0 0.15rem;
}

/* ====== Modal ====== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7,10,21,0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fade .2s ease-out;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.modal-box {
    background: rgba(18,24,48,0.95);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 1.75rem;
    min-width: 320px;
    max-width: 440px;
    width: 90%;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 80px rgba(0,0,0,0.6);
    animation: slide-up .25s ease-out;
}

/* Wide variant used by the player card: 3-zone grid (info | stats / matches). */
.modal-box.player-card {
    max-width: 860px;
}

/* Wide modal for forms where each field needs its own row. */
.modal-box.modal-wide {
    max-width: 560px;
}

.player-card-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr);
    grid-template-areas:
        "info stats"
        "matches matches";
    gap: 1.25rem;
    margin-top: 0.4rem;
}

.player-info    { grid-area: info; }
.player-stats   { grid-area: stats; }
.player-matches { grid-area: matches; }

.player-section-title {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0 0 0.65rem;
    font-weight: 700;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.88rem;
    color: var(--text-dim);
}
.info-row b { color: var(--text); font-weight: 700; }
.info-row.ovr-row b {
    font-size: 1.1rem;
    color: #fbbf24;
    font-family: 'JetBrains Mono', monospace;
}
.info-row:last-of-type { border-bottom: none; }

.empty-block {
    padding: 1rem;
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 10px;
    color: var(--text-dim);
    text-align: center;
    font-size: 0.88rem;
}

@media (max-width: 900px) {
    .player-card-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "info"
            "stats"
            "matches";
    }
}

.modal-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.3rem 0.55rem;
    line-height: 1;
    border-radius: 8px;
    transition: color .12s, background .12s;
}
.modal-close:hover { color: var(--text); background: var(--surface-strong); }

.modal-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
    /* Reserve space for the absolutely-positioned close button (top-right).
       Close button is ~2.1rem wide, offset 0.9rem from the edge — reserve
       3.5rem so even on narrow modals the header content never slides under. */
    padding-right: 3.5rem;
}

.modal-num { color: var(--text-dim); font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.modal-name { font-size: 1.2rem; font-weight: 800; flex: 1; letter-spacing: -0.01em; }

.modal-meta {
    display: flex;
    gap: 1rem;
    color: var(--text-dim);
    font-size: 0.83rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.stats-grid { display: flex; flex-direction: column; gap: 0.5rem; }

.stat-row {
    display: grid;
    grid-template-columns: 130px 1fr 36px;
    align-items: center;
    gap: 0.6rem;
}

.stat-label { font-size: 0.8rem; color: var(--text-dim); }
.stat-value { font-size: 0.82rem; font-weight: 700; text-align: right; font-family: 'JetBrains Mono', monospace; color: var(--text); }

.stat-bar-wrap {
    background: rgba(255,255,255,0.06);
    border-radius: 99px;
    height: 6px;
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s ease;
}

.bar-high { background: linear-gradient(90deg, #10b981, #059669); box-shadow: 0 0 8px rgba(16,185,129,0.3); }
.bar-mid  { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.bar-low  { background: linear-gradient(90deg, #94a3b8, #64748b); }

/* ====== Match Page ====== */
.match-page { display: flex; flex-direction: column; gap: 1rem; }

.scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(59,130,246,0.9) 0%, rgba(139,92,246,0.9) 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: 1.25rem 1.75rem;
    box-shadow: 0 20px 50px rgba(59,130,246,0.35);
    position: relative;
    overflow: hidden;
}
.scoreboard::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, rgba(255,255,255,0.2), transparent 60%);
    pointer-events: none;
}
.scoreboard > * { position: relative; z-index: 1; }

.team-score { display: flex; flex-direction: column; }
.team-score.home { align-items: flex-start; }
.team-score.away { align-items: flex-end; }

.score-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.score-ovr  { font-size: 0.75rem; opacity: 0.85; font-family: 'JetBrains Mono', monospace; }

.score-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.score-digits {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: 4px;
    line-height: 1;
    text-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.score-time { font-size: 0.85rem; opacity: 0.9; margin-top: 0.2rem; font-family: 'JetBrains Mono', monospace; }
.score-final { font-size: 0.78rem; color: var(--gold); font-weight: 800; margin-top: 0.25rem; letter-spacing: 2px; text-transform: uppercase; }

/* ====== Match Controls ====== */
.match-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.speed-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.speed-slider {
    -webkit-appearance: none;
    width: 100px;
    height: 4px;
    background: var(--surface2);
    border-radius: 2px;
    outline: none;
}

.speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(59,130,246,0.6);
}

.pitch-and-stats {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 1rem;
    align-items: start;
}

.pitch-container, .stats-panel, .events-panel {
    border-radius: var(--radius);
    overflow: hidden;
}

.pitch-container { padding: 0.85rem; }
.pitch-container canvas { max-width: 100%; height: auto; border-radius: 8px; }

.stats-panel-title, .events-title {
    padding: 0.7rem 0.9rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    font-weight: 800;
    border-bottom: 1px solid var(--border);
    background: var(--surface-strong);
}

.stats-panel-body { padding: 0.3rem 0; }

.srow {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    gap: 0.3rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.srow:last-child { border-bottom: none; }

.sv {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.sv:first-child { text-align: right; }
.sv:last-child  { text-align: left; }

.sl {
    font-size: 0.68rem;
    color: var(--text-faint);
    text-align: center;
    flex: 0 0 auto;
    min-width: 78px;
    padding: 0 0.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.srow.yellow .sv { color: var(--yellow); }
.srow.red    .sv { color: var(--red); }

.srow-sep {
    height: 1px;
    background: var(--border);
    margin: 0.4rem 0;
}

.events-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 0.35rem 0;
}

.event-item {
    padding: 0.5rem 1rem;
    font-size: 0.83rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    color: var(--text);
}

.event-item:last-child { border-bottom: none; }

.event-goal       { color: var(--gold); font-weight: 800; background: rgba(251,191,36,0.08); border-left: 3px solid var(--gold); padding-left: calc(1rem - 3px); }
.event-save       { color: #67e8f9; font-weight: 700; }
.event-shot       { color: #fb923c; }
.event-tackle     { color: var(--green); }
.event-pass       { color: #93c5fd; }
.event-dribble    { color: #c4b5fd; }
.event-corner     { color: #5eead4; font-weight: 700; }
.event-throwin    { color: var(--text-faint); }
.event-goalkick   { color: var(--text-faint); }
.event-offside    { color: #fca5a5; font-weight: 700; }
.event-card-yellow{ color: var(--yellow); font-weight: 700; background: rgba(250,204,21,0.08); border-left: 3px solid var(--yellow); padding-left: calc(1rem - 3px); }
.event-card-red   { color: var(--red); font-weight: 800; background: rgba(248,113,113,0.1); border-left: 3px solid var(--red); padding-left: calc(1rem - 3px); }
.event-penalty    { color: #fb923c; font-weight: 800; background: rgba(251,146,60,0.08); border-left: 3px solid #fb923c; padding-left: calc(1rem - 3px); }

.speed-select {
    background: var(--surface-strong);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
}
.speed-select option { background: #1a2140; }

/* ====== Player Stats Tables ====== */
.player-stats-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.player-stats-block {
    border-radius: var(--radius);
    overflow: hidden;
}

.player-stats-title {
    padding: 0.7rem 0.95rem;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-strong);
}

.player-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.player-stats-table th,
.player-stats-table td {
    padding: 0.4rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.player-stats-table thead th {
    color: var(--text-faint);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 1px;
    background: var(--surface);
}

.player-stats-table tbody tr:hover { background: var(--surface2); }

.player-stats-table .ps-num {
    width: 28px;
    color: var(--text-faint);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.player-stats-table .ps-name {
    text-align: left;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.no-teams {
    text-align: center;
    padding: 3rem;
    color: var(--text-dim);
}

/* ====== Match team picker ====== */
.match-picker {
    max-width: 640px;
    margin: 2rem auto;
    padding: 1.6rem 1.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.match-picker-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text);
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}
.match-picker-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 0.9rem;
}
.match-picker-side { min-width: 0; }
.match-picker-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
}
.match-picker-tactic-label {
    margin-top: 0.6rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 0.35rem;
}
.match-picker-vs {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    padding: 0 0.4rem 0.4rem;
    align-self: end;
}
.match-picker-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.match-picker-error {
    padding: 0.5rem 0.75rem;
    border-radius: 7px;
    background: rgba(248,113,113,0.12);
    border: 1px solid rgba(248,113,113,0.35);
    color: #fca5a5;
    font-size: 0.85rem;
}
.match-picker-hint {
    padding: 0.4rem 0.65rem;
    font-size: 0.82rem;
    color: var(--text-faint);
    text-align: center;
}

/* ====== Flag Icon ====== */
.flag-icon {
    display: inline-block;
    width: 22px;
    height: 16.5px; /* 4:3 aspect of the source SVG */
    object-fit: cover;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
    vertical-align: middle;
    flex-shrink: 0;
}

.flag-icon.lg { width: 32px; height: 24px; border-radius: 4px; }
.flag-icon.xl { width: 48px; height: 36px; border-radius: 5px; }

.nation-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ====== Free Teams ====== */
.country-section { margin-bottom: 1.75rem; }

.country-header {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

.country-title {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text);
}

.country-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dim);
    background: var(--surface);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
}

.team-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
    vertical-align: middle;
}

.team-crest-sm {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.team-crest-img {
    position: relative;
    z-index: 1;
    width: 78%;
    height: 78%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

/* ====== Responsive ====== */
@media (max-width: 1280px) {
    /* 1000 → 1280: после расширения pool до 600 layout не помещается на
       стандартных ноутбуках, стэкаем заранее. */
    .squad-builder { grid-template-columns: 1fr; }
    .pitch-and-stats { grid-template-columns: 1fr; }
    .tactic-tabs.vertical {
        flex-direction: row;
        flex-wrap: wrap;
        width: auto;
        position: static;
    }
}

/* ====== Squad (Состав на матч) на мобиле ====== */
@media (max-width: 900px) {
    /* Панель тактик — все кнопки (Тактика 1/2/…, иконки, Сохранить,
       Сбросить) в одну линию с горизонтальным скроллом (свайп). Скролл —
       на внутреннем .tactic-tabs-row, чтобы overflow не обрезал абсолютные
       статус/алерт, висящие над панелью. */
    .tactic-tabs-row {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        flex: 1 1 100%;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .tactic-tabs-row::-webkit-scrollbar { display: none; }
    .tactic-tabs.horizontal .tactic-tabs-spacer { display: none; }
    .tactic-tab,
    .tactic-tab-icon,
    .tactic-tab-save,
    .tactic-tab-reset { flex: 0 0 auto; }
    .tactic-tab-save { margin-left: 0.4rem; }
    .tactic-tab-reset { margin-left: 0.4rem; }

    /* Статус «Сохранено» / алерт о недоступных — над панелью во всю ширину
       (на десктопе они right:3.2rem + max-width:28rem, что на телефоне
       уезжает за край вьюпорта). */
    .tactic-tabs.horizontal .sidebar-status,
    .tactic-tabs.horizontal .unavailable-alert {
        left: 0;
        right: 0;
        max-width: none;
    }

    /* Настройки тактики — в одну колонку */
    .settings-grid { grid-template-columns: 1fr; }

    /* Строки игроков: ужать метрики и зазор, чтобы имени осталось место */
    .pool-item {
        grid-template-columns: 20px minmax(0, 1fr) auto auto 26px 26px 26px 20px;
        gap: 0.3rem;
        padding: 0.4rem 0.4rem;
    }
}

@media (max-width: 900px) {
    .player-stats-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    /* Боковое меню → выезжающий драуэр: на узком экране не ест ширину.
       Сайдбар уходит из потока (position:fixed), main-content занимает всю
       ширину; открывается гамбургером в навбаре, закрывается тапом по ссылке
       или по затемнению (Влад). */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: 272px;
        max-width: 82vw;
        padding: 1rem 0.85rem 2rem;
        border-right: 1px solid var(--border);
        border-bottom: none;
        z-index: 1300;
        transform: translateX(-100%);
        transition: transform .22s ease;
        max-height: none;
    }
    .sidebar.drawer-open {
        transform: translateX(0);
        box-shadow: 0 0 48px rgba(0,0,0,0.55);
    }
    .sidebar-links { flex-direction: column; }
    .drawer-quick { display: flex; flex-direction: column; gap: 0.2rem; }
    .drawer-toggle { display: inline-flex; }
    .drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1290;
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s ease, visibility .22s ease;
    }
    .drawer-backdrop.open { opacity: 1; visibility: visible; }

    /* ── Чистка навбара на мобиле: убираем то, что переполняет строку ── */
    .navbar { padding: 0 0.6rem; height: 60px; gap: 0.4rem; }
    .navbar-links { display: none; }   /* быстрые ссылки уехали в драуэр */
    .brand-text { display: none; }     /* оставляем только логотип */
    .navbar-brand { margin-right: 0; }
    .user-login { display: none; }     /* имя прячем — есть кнопка профиля */
    /* ИД на мобиле — компактная плашка «N · dd.MM»: только номер игрового дня +
       короткая дата. Убираем часы ⏱, слово «ИД», S{N} и «/78» — иначе не влезает
       рядом с иконками (у админа их 5). Плашку (рамку/фон) оставляем — красивее. */
    .season-badge-slot { flex: 0 0 auto; }
    .season-badge { gap: 0.28rem; padding: 0.26rem 0.5rem; border-radius: 10px; }
    .season-badge-icon { display: none; }       /* часы ⏱ */
    .season-badge-day-label { display: none; }  /* слово «ИД» */
    .season-badge-day  { font-size: 0.8rem; }
    .season-badge-of   { display: none; }        /* «/78» */
    .season-badge-date { display: none; }        /* вербозную «ср 3 июн» */
    /* Специфичность .season-badge .x выше базового .x — иначе базовое
       display:none (ниже в файле) перебивало бы и дата не показывалась. */
    .season-badge .season-badge-date-short { display: inline; font-size: 0.76rem; }
    .navbar-user { gap: 0.4rem; min-width: 0; }
    .navbar-right-group { gap: 0.35rem; }
    .profile-btn, .drawer-toggle { width: 36px; height: 36px; font-size: 1rem; }
}

@media (max-width: 700px) {
    .navbar { padding: 0 1rem; height: 64px; }
    .navbar-brand { margin-right: 1rem; gap: 0.5rem; }
    .brand-prefix { display: none; }
    .brand-main { font-size: 0.92rem; letter-spacing: 0.05em; }
    .brand-icon { font-size: 1.4rem; }
    .navbar-links { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
    .navbar-links::-webkit-scrollbar { display: none; }
    .teams-grid { grid-template-columns: 1fr; }
    .vs-badge { padding-top: 0; }
    .scoreboard { padding: 1rem; }
    .score-digits { font-size: 2rem; letter-spacing: 2px; }
    .page-header h1 { font-size: 1.5rem; }
    .main-content { padding: 1.25rem 1rem 2rem; }
    .fixture-row { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ====== Player Page ====== */
.player-page { display: flex; flex-direction: column; gap: 0.75rem; }

.back-btn { align-self: flex-start; padding: 0.3rem 0.7rem; font-size: 0.85rem; }

.player-hero {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.1rem;
    background: rgba(18,24,48,0.72);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
}

/* /team — две колонки: фото + bio. Правый блок KPI-плиток удалён
   2026-05-28, статы Средний рейтинг / Сезонная задача переехали в bio-list
   как обычные строки. */
.player-hero.team-hero {
    grid-template-columns: 160px minmax(0, 1fr);
}
.team-hero-kpis {
    align-self: stretch;
    min-width: 0;
    display: flex;
}
.team-hero-kpis .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1;
    align-content: stretch;
}

.player-photo-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 140px; /* фикс — фото игрока = размер эмблемы клуба, веб и мобилка */
}

.player-photo {
    width: 140px;
    height: 175px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
    position: relative;
    overflow: hidden;
}
.player-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.35));
}
.photo-initials {
    font-size: 2.6rem;
    font-weight: 800;
    color: rgba(255,255,255,0.92);
    letter-spacing: -0.04em;
    position: relative;
    text-shadow: 0 4px 18px rgba(0,0,0,0.45);
}

/* Аватар менеджера на странице /manager/{id} — без team color, нейтральный фон. */
.player-photo.manager-photo {
    background: linear-gradient(135deg, var(--surface2) 0%, var(--surface) 100%);
}
.photo-caption {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-faint);
}


.player-bio { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }

.bio-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.bio-num {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-dim);
    font-weight: 700;
    font-size: 0.95rem;
}

/* Stadium chip — sits on the right side of the bio-top row on the
   /team page (right of the team name, which is the "emblem" area for a
   club). Compact, pill-shaped. */
.team-stadium-chip {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
}
.team-stadium-chip-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.team-stadium-chip-name {
    font-weight: 700;
    color: var(--text);
}
.team-stadium-chip-cap {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-dim);
    font-weight: 600;
}

/* ====== Stadium tab ====== */
.stadium-card {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.2rem 1.3rem;
    background: rgba(18,24,48,0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.stadium-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border);
}
.stadium-name { font-size: 1.25rem; font-weight: 800; color: var(--text); }
.stadium-meta { font-size: 0.88rem; color: var(--text-dim); margin-top: 0.2rem; }
.stadium-cash { text-align: right; }
.stadium-cash-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.stadium-cash-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--text);
    margin-top: 0.15rem;
}

.stadium-section { display: flex; flex-direction: column; gap: 0.6rem; }
.stadium-section-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.stadium-section-sub { font-size: 0.83rem; color: var(--text-faint); }

/* ====== Training tab ====== */
.training-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.2rem 1.2rem;
    background: rgba(18,24,48,0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.training-subtabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.4rem;
}
.training-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.training-hint {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.45;
    max-width: 42rem;
}
.training-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
    margin-left: auto;
}
.training-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}
.schedule-status { font-size: 0.85rem; color: var(--green); }
.schedule-status.bad { color: var(--red); }

.training-table-wrap { overflow-x: auto; }
.training-table {
    width: 100%;
    border-collapse: collapse;
}
.training-table th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    padding: 0.5rem 0.5rem;
    text-align: left;
    font-weight: 800;
    border-bottom: 1px solid var(--border);
}
.training-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
}
.training-table .col-num   { width: 2.8rem; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; }
.training-table .col-name  { min-width: 9rem; max-width: 15rem; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.training-table .col-pos   { width: 4.2rem; }
.training-table .col-day   { width: 10.5rem; min-width: 8.5rem; }
.training-table .col-day .fd-wrap { width: 100%; }
.training-table .col-day .fd-trigger { width: 100%; }

.training-table tr:hover { background: rgba(255,255,255,0.03); }

/* Chips under each day's dropdown show which stats the chosen training
   touches. Kept tiny so 3–4 fit next to each other in the narrow column. */
.training-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.3rem;
    min-height: 1.2rem;
}
.training-stat-chip {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.1rem 0.38rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: #93c5fd;
    border: 1px solid rgba(59,130,246,0.25);
    white-space: nowrap;
}
.training-stats-empty {
    font-size: 0.7rem;
    color: var(--text-faint);
    font-style: italic;
}

/* ---- Совмещения (combos) ---- */
.combos-table .col-age { width: 3.5rem; color: var(--text-faint); }
.combos-table .col-combo-list { display: flex; gap: 0.3rem; flex-wrap: wrap; padding: 0.5rem; }
.pos-list { display: inline-flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; }
.combos-table .col-combo-progress { min-width: 12rem; }
.combos-table .col-combo-actions { width: 9rem; text-align: right; }

.combo-badge {
    background: rgba(139, 92, 246, 0.18);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: var(--accent-2);
}
.combo-badge.training {
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}

.combo-progress { display: flex; flex-direction: column; gap: 0.25rem; }
.combo-progress-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-dim);
}
.combo-progress-bar {
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.combo-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    transition: width 0.3s;
}

/* Modal — пяти-рядная сетка позиций, визуально имитирующая поле. */
.combo-grid {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 0.4rem;
    margin-top: 0.6rem;
    background:
        linear-gradient(rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.02)),
        repeating-linear-gradient(
            to bottom,
            transparent 0 40px,
            rgba(255,255,255,0.02) 40px 80px
        );
    border: 1px solid var(--border);
    border-radius: 10px;
}
.combo-grid-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
}
.combo-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-height: 3.2rem;
    padding: 0.35rem 0.2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    color: var(--text);
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .08s;
}
.combo-cell:hover:not(:disabled) {
    background: rgba(59,130,246,0.12);
    border-color: var(--accent);
}
.combo-cell:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.combo-cell.empty {
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.06);
    cursor: default;
    pointer-events: none;
}
.combo-cell.main {
    background: rgba(59,130,246,0.22);
    border-color: var(--accent);
    color: #93c5fd;
    cursor: not-allowed;
}
.combo-cell.sec {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
    color: var(--accent-2);
    cursor: not-allowed;
}
.combo-cell.picked {
    background: rgba(251, 191, 36, 0.22);
    border-color: #f59e0b;
    color: #fbbf24;
    transform: scale(1.02);
}
.combo-cell-pos {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}
.combo-cell-days {
    font-size: 0.65rem;
    color: var(--text-faint);
    font-family: 'JetBrains Mono', monospace;
}
.combo-cell.picked .combo-cell-days { color: #fbbf24; }

/* Слот, выбранный под замену в модалке совмещений — подсветка «будет
   перезаписан» (красноватая, в отличие от янтарного picked = новая позиция). */
.combo-replace-btn.active {
    background: rgba(248, 113, 113, 0.18);
    border-color: var(--red);
    color: #fca5a5;
    box-shadow: inset 0 0 0 1px var(--red);
}

/* Ticket price row — uses the shared .stepper pattern from Profile/Squad. */
.ticket-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
/* 3-digit prices (up to 200) need more room than the default 3ch. */
.ticket-row .stepper-input { width: 5ch; padding: 0.3rem 0.5rem; }
.ticket-currency { color: var(--text-dim); font-weight: 700; }
.ticket-status { font-size: 0.83rem; color: var(--green); }
.ticket-status.bad { color: var(--red); }

/* Upgrade offer / in-progress */
.upgrade-offer {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.85rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.upgrade-offer-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.4rem;
}
.upgrade-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.03em;
}
.upgrade-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    color: var(--text);
}
.upgrade-value.bad { color: var(--red); }
.upgrade-delta {
    font-size: 0.8rem;
    color: var(--green);
    margin-left: 0.3rem;
    font-weight: 600;
}
.upgrade-warn {
    margin-top: 0.3rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.82rem;
    color: #fcd34d;
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: 8px;
}
.upgrade-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
    flex-wrap: wrap;
}
.upgrade-status { font-size: 0.85rem; color: var(--green); }
.upgrade-status.bad { color: var(--red); }

.upgrade-progress {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.upgrade-progress-head { font-size: 0.95rem; color: var(--text); }
.upgrade-progress-bar {
    height: 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    overflow: hidden;
}
.upgrade-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #8b5cf6 100%);
    transition: width .25s;
}
.upgrade-progress-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-dim);
}
/* Variants used by the new Staff upgrade flow */
.upgrade-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}
.upgrade-progress-remaining {
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
}
.upgrade-progress-hint {
    font-size: 0.75rem;
    color: var(--text-faint);
}
.upgrade-proposal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    flex-wrap: wrap;
}
.upgrade-proposal-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.88rem;
    color: var(--text);
}
.upgrade-proposal-line.bad { color: var(--red); }
/* Compact stat chip stack shown on the Staff tab header */
.stadium-stats {
    display: flex;
    gap: 0.75rem;
}
.stat-chip-stack {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-end;
}
.stat-chip-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.stat-chip-value {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
}
.bio-name {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    margin: 0;
}

.bio-name-edit {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0.55;
    transition: opacity .15s, background .15s;
    margin-left: auto;
    display: inline-block;
    transform: rotate(90deg);
    transform-origin: center;
}
.bio-name-edit:hover {
    opacity: 1;
    background: rgba(255,255,255,0.08);
}

.bio-list {
    display: flex;
    flex-direction: column;
}
.bio-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.82rem;
}
.bio-line:last-child { border-bottom: none; }
.bio-line span { color: var(--text-dim); }
.bio-line b { color: var(--text); font-weight: 700; }
.bio-line b.bad { color: var(--red); }
.bio-line.ovr b {
    color: var(--gold);
    font-size: 1.05rem;
    font-family: 'JetBrains Mono', monospace;
}

.tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0 0.25rem;
    flex-wrap: wrap;
}
.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
    color: var(--text);
    border-bottom-color: var(--accent);
}

.tab-panel {
    background: rgba(18,24,48,0.72);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1.1rem;
    min-height: 120px;
}

.tabs-sm .tab-btn {
    font-size: 0.78rem;
    padding: 0.35rem 0.7rem;
}
.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2em;
    height: 1.2em;
    padding: 0 0.3em;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--bg);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.stat-list {
    display: flex;
    flex-direction: column;
    padding: 0 0.25rem;
}
.stat-line {
    display: grid;
    /* [название] [чип 28px] [слот стрелки 1.5rem]. Слот стрелки фиксирован
       — чипы выровнены даже у строк без стрелки. */
    grid-template-columns: 1fr 28px 1.5rem;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.25rem;
    border-bottom: 1px solid var(--border);
}
.stat-line:last-child { border-bottom: none; }
.stat-trend-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
}

.stat-line-label {
    font-size: 0.82rem;
    color: var(--text-dim);
    font-weight: 500;
}
.stat-chip {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    line-height: 1;
    color: var(--text);
    flex-shrink: 0;
}
/* 5-tier stat-chip градация (шкала 1-20). Пороги и классы синхронизированы
   с StatTier.ClassFor в Services/. См. UI_GUIDELINES §3.10 и
   PLAYER_IMPORT_DESIGN §3. Градиент: grey → light-yellow → amber →
   light-green → emerald (по саnасыщению и тону). */
.stat-chip.tile-high {
    /* 16-20: bright emerald — элита */
    background: linear-gradient(160deg, rgba(16,185,129,0.22), rgba(5,150,105,0.1));
    border-color: rgba(16,185,129,0.45);
    color: #34d399;
}
.stat-chip.tile-above {
    /* 14-15: light emerald — выше среднего */
    background: linear-gradient(160deg, rgba(110,231,183,0.2), rgba(52,211,153,0.08));
    border-color: rgba(110,231,183,0.4);
    color: #6ee7b7;
}
.stat-chip.tile-mid {
    /* 11-13: bright amber — средняя зона (мода распределения) */
    background: linear-gradient(160deg, rgba(245,158,11,0.22), rgba(217,119,6,0.1));
    border-color: rgba(245,158,11,0.5);
    color: #f59e0b;
}
.stat-chip.tile-below {
    /* 8-10: light amber — ниже среднего */
    background: linear-gradient(160deg, rgba(252,211,77,0.2), rgba(234,179,8,0.08));
    border-color: rgba(252,211,77,0.4);
    color: #fcd34d;
}
.stat-chip.tile-low {
    /* 1-7: slate — провальный стат (редко; обычно <8 не встречается) */
    background: linear-gradient(160deg, rgba(148,163,184,0.22), rgba(100,116,139,0.1));
    border-color: rgba(148,163,184,0.4);
    color: #94a3b8;
}

@media (max-width: 900px) {
    .player-hero {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .bio-top { justify-content: center; }
    /* bio тянем на всю ширину независимо от длины контента. Иначе из-за
       justify-items:center grid-item ужимается до ширины своего контента:
       на клубах с длинным текстом (Founder Pack, длинное имя менеджера)
       карточка раздувается, а на обычных остаётся узкой. */
    .player-bio { justify-self: stretch; }


    /* /team — та же вертикальная шапка, что и на странице чужого клуба
       (эмблема сверху, инфо во всю ширину снизу). Перебиваем десктопную
       фиксированную 140px-колонку .player-hero.team-hero (её специфичность
       0,2,0 иначе бьёт мобильный override). */
    .player-hero.team-hero { grid-template-columns: 1fr; }

    /* Табы (10 штук на /team) ломались в 4 ряда. На мобиле — один ряд
       с горизонтальным скроллом (свайп), как навбар. Скроллбар скрыт. */
    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab-btn { flex: 0 0 auto; white-space: nowrap; }
}

/* ====== Profile page ====== */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
.profile-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.profile-card { padding: 1rem 1.1rem; }

.coach-stats-edit {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.coach-stat-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
}
.coach-stat-label { font-size: 0.92rem; color: var(--text); font-weight: 600; }

/* ====== Форма rename школьника (миграция 0166) ====== */
.rename-form {
    display: grid;
    gap: 0.75rem;
}
.rename-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.rename-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}
.rename-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.92rem;
    padding: 0.55rem 0.75rem;
    font-family: inherit;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.rename-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ====== Stepper (custom number input) ====== */
.stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
    user-select: none;
}
.stepper:hover { border-color: var(--border-strong); }
.stepper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.stepper-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    transition: background .12s, color .12s;
}
.stepper-btn:hover:not(:disabled) { background: var(--surface2); color: var(--text); }
.stepper-btn:active:not(:disabled) { background: var(--gradient-soft); color: #fff; }
.stepper-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.stepper-input {
    width: 3ch;
    text-align: center;
    background: transparent;
    border: none;
    color: var(--text);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    padding: 0.3rem 0.25rem;
    appearance: textfield;
    -moz-appearance: textfield;
    outline: none;
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.coach-stats-total {
    margin-top: 0.85rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-dim);
}
.coach-stats-total b.ok  { color: var(--green); }
.coach-stats-total b.bad { color: var(--red); }

.coach-stats-view {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* ====== Register two-column helper ====== */
.auth-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.auth-two-col .field { margin-bottom: 0.75rem; }

.required { color: var(--red); font-weight: 700; }

@media (max-width: 900px) {
    .profile-grid { grid-template-columns: 1fr; }
    .auth-two-col { grid-template-columns: 1fr; }
}

/* ====== Admin hub ====== */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

/* ====== Admin: ticks page ====== */
.tick-card { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }

.tick-card-primary {
    border: 2px solid var(--accent, #3b82f6);
    background: linear-gradient(180deg, rgba(59,130,246,0.08) 0%, transparent 100%);
    box-shadow: 0 0 0 1px rgba(59,130,246,0.25), 0 4px 16px rgba(59,130,246,0.12);
    margin-bottom: 1.5rem;
}
.tick-card-primary .tick-title { font-size: 1.25rem; font-weight: 700; }
.btn-tick-primary {
    min-width: 180px;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.7rem 1.2rem;
}

.tick-section-divider {
    margin: 2rem 0 0.5rem;
    border: 0;
    border-top: 1px solid var(--border, #2a2f3a);
}
.tick-section-label {
    color: var(--text-dim);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.tick-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.tick-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text);
}
.tick-sub {
    font-size: 0.86rem;
    color: var(--text-dim);
    line-height: 1.45;
    margin-top: 0.25rem;
    max-width: 40rem;
}

.tick-report {
    padding: 0.9rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.tick-report-empty {
    padding: 0.9rem 1rem;
    font-size: 0.85rem;
    color: var(--text-faint);
    font-style: italic;
    background: rgba(255,255,255,0.02);
    border: 1px dashed var(--border);
    border-radius: 10px;
    text-align: center;
}
.tick-report-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}
.tick-report-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.tick-report-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--text-faint);
}
.tick-report-summary {
    font-size: 0.9rem;
    color: var(--text);
}
.tick-report-errors { color: var(--red); margin-left: 0.25rem; }

.tick-report-log {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-height: 320px;
    overflow-y: auto;
    padding-top: 0.2rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
}
.tick-report-line {
    padding: 0.2rem 0.35rem;
    color: var(--text-dim);
    border-radius: 4px;
}
.tick-report-line:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.admin-tile {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.1rem;
    color: var(--text);
    text-decoration: none;
    transition: transform .12s, border-color .12s;
    border: 1px solid var(--border);
}
.admin-tile:hover {
    text-decoration: none;
    transform: translateY(-2px);
    border-color: var(--border-strong);
}
.admin-tile-icon { font-size: 1.8rem; }
.admin-tile-title { font-weight: 800; font-size: 1.05rem; color: var(--text); }
.admin-tile-sub { color: var(--text-dim); font-size: 0.85rem; }

/* ====== Личные сообщения ====== */
.pm-inbox { padding: 0; overflow: hidden; }
.pm-inbox-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name time" "preview preview";
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: background .12s;
}
.pm-inbox-row:last-child { border-bottom: none; }
.pm-inbox-row:hover { background: var(--surface); }
.pm-inbox-row.has-unread { background: var(--surface-strong); }
.pm-inbox-name    { grid-area: name; display: flex; align-items: center; gap: 0.5rem; }
.pm-inbox-time    { grid-area: time; color: var(--text-faint); font-size: 0.78rem; font-family: 'JetBrains Mono', monospace; }
.pm-inbox-preview { grid-area: preview; color: var(--text-dim); font-size: 0.86rem; }
.pm-inbox-preview .pm-prefix { color: var(--text-faint); margin-right: 0.3rem; }
.pm-unread-pill {
    display: inline-block;
    background: var(--accent-2);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
}

.pm-thread {
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}
.pm-bubble {
    max-width: 70%;
    padding: 0.5rem 0.8rem;
    border-radius: 12px;
    font-size: 0.9rem;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.pm-bubble.mine  { align-self: flex-end;   background: var(--accent-soft);   color: var(--text); border: 1px solid rgba(59,130,246,0.3); }
.pm-bubble.their { align-self: flex-start; background: var(--surface);       color: var(--text); border: 1px solid var(--border); }
.pm-bubble-body  { line-height: 1.4; }
.pm-bubble-time  { color: var(--text-faint); font-size: 0.7rem; margin-top: 0.25rem; font-family: 'JetBrains Mono', monospace; text-align: right; }

.pm-compose { margin-top: 0.75rem; padding: 0.75rem 1rem; }
.pm-compose-input {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    padding: 0.6rem 0.75rem;
    resize: vertical;
}
.pm-compose-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pm-compose-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.pm-compose-count { color: var(--text-faint); font-size: 0.78rem; font-family: 'JetBrains Mono', monospace; }
.pm-compose-error { color: var(--red); font-size: 0.82rem; flex: 1; }
.pm-compose-bar .btn { margin-left: auto; }

/* Mobile: thread сжимается, compose липнет к низу — поле ввода всегда
   видно без скролла. Минимальная высота треда — две-три «пузырьки». */
@media (max-width: 900px) {
    .pm-thread {
        max-height: calc(100vh - 320px);
        min-height: 160px;
    }
    .pm-compose {
        position: sticky;
        bottom: 0;
        z-index: 5;
        background: var(--surface);
        box-shadow: 0 -6px 14px rgba(0,0,0,0.35);
    }
}

/* ====== Сезонная задача — обычный текст в bio-list, чуть приглушённый ====== */
.season-task {
    color: var(--text-dim);
    font-weight: 500;
}

/* Owner-only online-users bar (видна над legal-footer) */
.online-users-bar {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 0.4rem 1.2rem;
    font-size: 0.82rem;
    color: var(--text-dim);
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.online-users-bar .online-dot {
    color: #2ea043;
    font-size: 0.7rem;
    line-height: 1;
}
.online-users-bar .online-label { font-weight: 600; color: var(--text); }
.online-users-bar .online-user  { color: var(--text); }
.online-users-bar .online-sep   { color: var(--text-faint); }
.season-task.achieved { color: rgba(52,211,153,0.75); }
.season-task.failed   { color: rgba(248,113,113,0.75); }
.season-task .season-task-status {
    margin-left: 0.25rem;
    color: var(--text-faint);
    font-size: 0.78rem;
}

/* ====== Admin Transfers (модерация ставок) ====== */
.admin-transfer-card {
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.admin-transfer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.admin-transfer-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.admin-transfer-name .player-name {
    font-weight: 700;
    color: var(--text);
    font-size: 1rem;
}
.admin-transfer-meta {
    display: flex;
    gap: 1.25rem;
    color: var(--text-dim);
    font-size: 0.88rem;
}
.admin-forecast {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    padding: 0.35rem 0.55rem;
    background: var(--surface);
    border-radius: 6px;
    border: 1px solid var(--border);
    color: var(--text-dim);
}
.admin-forecast b { color: var(--accent); }
.admin-bids-table { width: 100%; font-size: 0.85rem; }
.admin-bids-table th { color: var(--text-faint); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; }

.bid-status-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--surface);
}
.bid-status-good    { color: var(--green); border-color: rgba(52,211,153,0.3); }
.bid-status-bad     { color: var(--red);   border-color: rgba(248,113,113,0.3); }
.bid-status-neutral { color: var(--accent); border-color: rgba(59,130,246,0.3); }
.bid-status-muted   { color: var(--text-faint); }

/* ====== Applications list (admin review) ====== */
.applications-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.application-card {
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.application-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.application-team {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    flex: 1;
    min-width: 0;
}
.application-team .team-name { color: var(--text); }
.application-team .team-meta { color: var(--text-dim); font-weight: 500; font-size: 0.9rem; }
.application-date { color: var(--text-faint); font-size: 0.82rem; white-space: nowrap; }

.application-applicant { font-size: 0.9rem; color: var(--text-dim); }
.application-applicant b { color: var(--text); }
.application-applicant .muted { color: var(--text-faint); }
.coach-inline {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--text-faint);
}

.application-reason .reason-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--text-dim);
}
.application-reason blockquote {
    margin: 0.35rem 0 0;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--accent);
    background: var(--surface);
    border-radius: 0 8px 8px 0;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.application-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.btn.danger { color: var(--red); }
.btn.danger:hover { background: rgba(248,113,113,0.12); color: var(--red); }

/* Right-aligned wrapper around the "apply for team" CTA. */
.apply-cta {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

/* Кнопки действий на странице чужого ростера: тов.матч слева, заявка справа.
   Если показывается только одна — она занимает свою сторону. */
.team-roster-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.team-roster-actions .action-slot-left  { margin-right: auto; }
.team-roster-actions .action-slot-right { margin-left: auto; }

/* ====== Manager card modal ====== */
.manager-link {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.25);
    text-underline-offset: 3px;
    transition: color 0.12s;
}
.manager-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.modal-sub {
    color: var(--text-dim);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.manager-modal-body { padding: 1rem 1.25rem 1.25rem; }
.manager-coach-title {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--text);
}

/* ====== Apply modal ====== */
.apply-modal-body { padding: 1rem 1.25rem 1.25rem; }
.apply-reason {
    width: 100%;
    padding: 0.65rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 110px;
    outline: none;
}
.apply-reason:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.apply-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: nowrap;
}
/* Split variant: leftmost button (e.g. "Reset") pushed to the left edge via
   margin-right: auto, the remaining buttons stay grouped on the right. All
   three buttons are direct children of a single flex row — no wrapper div,
   so nothing can wrap independently. */
.apply-modal-actions.split > .btn:first-child {
    margin-right: auto;
}

/* ====== Finance tab (MyTeam) ====== */
.finance-layout {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.finance-layout .mono { font-family: 'JetBrains Mono', monospace; }

/* ---- KPI strip (4 tiles) ---- */
.fin-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.fin-kpi {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 55%),
        rgba(8, 12, 30, 0.55);
    border: 1px solid var(--border);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    transition: border-color .15s, transform .15s;
}
.fin-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--accent);
    opacity: 0.75;
}
.fin-kpi.good::before { background: var(--green); }
.fin-kpi.bad::before  { background: var(--red); }
.fin-kpi.warn::before { background: var(--yellow); }
.fin-kpi:hover { border-color: var(--border-strong); }
.fin-kpi-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}
.fin-kpi-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}
.fin-kpi-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.fin-kpi-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
}
.fin-kpi.bad .fin-kpi-value  { color: var(--red); }
.fin-kpi.good .fin-kpi-value { color: var(--green); }
.fin-kpi.warn .fin-kpi-value { color: var(--yellow); }
.fin-kpi-sub {
    font-size: 0.72rem;
    color: var(--text-faint);
}
.fin-kpi-bar {
    margin-top: 0.3rem;
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}
.fin-kpi-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-3));
    transition: width .25s;
}

/* ---- Section titles ---- */
.fin-section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    font-weight: 800;
    margin-top: 0.25rem;
}

/* ---- Sponsor deal cards ---- */
.fin-deals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.fin-deal {
    --deal-accent: var(--accent);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--deal-accent) 18%, transparent) 0%, rgba(8,12,30,0.6) 70%),
        rgba(8, 12, 30, 0.6);
    border: 1px solid color-mix(in srgb, var(--deal-accent) 35%, var(--border));
    border-radius: 14px;
    padding: 1rem 1.1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "icon title"
        "icon sub"
        "value weekly";
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    position: relative;
    overflow: hidden;
    transition: border-color .15s, transform .15s;
}
.fin-deal::after {
    content: "";
    position: absolute;
    top: -30%;
    right: -30%;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--deal-accent) 30%, transparent), transparent 70%);
    pointer-events: none;
}
.fin-deal:hover { transform: translateY(-1px); border-color: var(--deal-accent); }
.fin-deal-icon  { grid-area: icon;  font-size: 1.8rem; align-self: start; }
.fin-deal-title { grid-area: title; font-size: 0.78rem; font-weight: 700; color: var(--text-dim);
                  text-transform: uppercase; letter-spacing: 0.08em; }
.fin-deal-sub   { grid-area: sub;   font-size: 0.75rem; color: var(--text-faint); }
.fin-deal-value {
    grid-area: value;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    margin-top: 0.5rem;
}
.fin-deal-per {
    grid-area: value;
    align-self: end;
    justify-self: start;
    font-size: 0.7rem;
    color: var(--text-faint);
    margin-left: 0.1rem;
    margin-bottom: 0.1rem;
    display: none; /* weekly line is enough — keep the card compact */
}
.fin-deal-weekly {
    grid-area: weekly;
    align-self: end;
    justify-self: end;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* ---- Compact inline hint in finance ---- */
.fin-hint {
    font-size: 0.82rem;
    color: var(--text-dim);
    padding: 0.6rem 0.85rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
}

/* ---- Staff tab: slot cards ---- */
.staff-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.staff-slot {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    background: rgba(8, 12, 30, 0.45);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.staff-slot-icon { font-size: 1.6rem; }
.staff-slot-body { display: flex; flex-direction: column; gap: 0.2rem; }
.staff-slot-title {
    font-size: 0.72rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.staff-slot-count {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text);
}
@media (max-width: 600px) {
    .staff-slots { grid-template-columns: 1fr; }
}

/* ---- Income / Expenses split panels ---- */
.fin-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.fin-panel {
    background: rgba(8, 12, 30, 0.45);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.fin-panel.income  { border-top: 3px solid color-mix(in srgb, var(--green) 70%, transparent); }
.fin-panel.expense { border-top: 3px solid color-mix(in srgb, var(--red) 70%, transparent); }
.fin-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.fin-panel-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.fin-panel-sum {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
}
.fin-panel.income .fin-panel-sum  { color: var(--green); }
.fin-panel.expense .fin-panel-sum { color: var(--red); }

.fin-line { display: flex; flex-direction: column; gap: 0.35rem; }
.fin-line-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: center;
}
.fin-line-icon  { font-size: 1.05rem; }
.fin-line-label { font-size: 0.88rem; color: var(--text); font-weight: 600; }
.fin-line-pct   {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--text-dim);
    font-weight: 700;
}
.fin-line-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}
.fin-line-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .25s;
    box-shadow: 0 0 10px color-mix(in srgb, currentColor 30%, transparent);
}
.fin-line-foot {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}
.fin-line-weekly { color: var(--text); }
.fin-line-annual { color: var(--text-dim); }

/* ---- Net result summary ---- */
.fin-net {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.3rem;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}
.fin-net.good {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(8, 12, 30, 0.6));
    border: 1px solid rgba(52, 211, 153, 0.4);
}
.fin-net.bad {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.14), rgba(8, 12, 30, 0.6));
    border: 1px solid rgba(248, 113, 113, 0.4);
}
.fin-net-icon {
    font-size: 2rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
}
.fin-net.good .fin-net-icon {
    background: rgba(52, 211, 153, 0.2);
    color: var(--green);
    border: 1.5px solid rgba(52, 211, 153, 0.5);
}
.fin-net.bad .fin-net-icon {
    background: rgba(248, 113, 113, 0.2);
    color: var(--red);
    border: 1.5px solid rgba(248, 113, 113, 0.5);
}
.fin-net-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.fin-net-label {
    font-size: 0.72rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.fin-net-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}
.fin-net-sub {
    font-size: 0.72rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 5ch;
}
.fin-net-row b {
    font-size: 1.05rem;
}
.fin-net-row b.big { font-size: 1.4rem; }
.fin-net.good .fin-net-row b { color: var(--green); }
.fin-net.bad  .fin-net-row b { color: var(--red); }
.fin-net-hint {
    max-width: 22rem;
    font-size: 0.78rem;
    color: var(--text-dim);
    text-align: right;
    line-height: 1.4;
}

@media (max-width: 1000px) {
    .fin-kpi-row { grid-template-columns: 1fr 1fr; }
    .fin-deals   { grid-template-columns: 1fr; }
    .fin-budgets { grid-template-columns: 1fr; }
    .fin-split   { grid-template-columns: 1fr; }
    .fin-net     { grid-template-columns: auto 1fr; }
    .fin-net-hint { display: none; }
}
@media (max-width: 600px) {
    .fin-kpi-row { grid-template-columns: 1fr; }
}

/* ====== Hired staff table (team → staff tab) ====== */
.hired-staff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 0.75rem;
}
.hired-staff-table th {
    text-align: left;
    font-size: 0.68rem;
    color: var(--text-dim);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.hired-staff-table td {
    padding: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.hired-staff-table .fin-num {
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
}
.hired-staff-table .bad { color: var(--red); font-weight: 700; }
.hired-staff-table .btn-ghost.danger {
    color: var(--red);
    border-color: rgba(248, 113, 113, 0.35);
}
.hired-staff-table .btn-ghost.danger:hover { background: rgba(248, 113, 113, 0.12); }

/* ====== Сетка выбора предсезонных сборов (вкладка «Сборы») ====== */
.camps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

/* ====== Карточка клуба на мобиле: широкие таблицы → горизонтальный скролл,
   сетки → одна колонка. Подвкладки уже скроллятся (общий .tabs ≤720px). ====== */
@media (max-width: 900px) {
    /* GitHub-стиль: таблица — блок по ширине контента, обрезанный вьюпортом,
       со скроллом по горизонтали. Колонки не схлопываются. Касается
       Персонала/Школы (hired-staff-table), журнала финансов и таблиц
       «Переходов» (только внутри карточки клуба — .tab-panel). */
    .hired-staff-table,
    .fin-journal-table,
    .transfer-table,
    .table-scroll-x,
    .match-replay-team-stats .player-table {
        display: block;
        width: max-content;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Тип/Уровень сборов — в одну колонку */
    .camps-grid { grid-template-columns: 1fr; }

    /* Шапка стадиона/инфраструктуры — стек вместо распора по краям */
    .stadium-head { flex-wrap: wrap; }

    /* Модалки — переносим кнопки действий; фильтры трансферов — на всю ширину */
    .apply-modal-actions { flex-wrap: wrap; }
    .transfer-filter,
    .transfer-filter select { width: 100%; min-width: 0; }
    .transfer-filter-actions { margin-left: 0; }
}

/* ====== Tooltip (сайт-wide) ======
   Базовый стиль для всплывающей подсказки. Любой элемент с атрибутом
   `data-tooltip="текст"` показывает тёмную плашку над собой по hover —
   без JS, без ручной сборки элементов. Пустой data-tooltip=""
   не рендерит подсказку (чтобы можно было условно отключать из Blazor
   через data-tooltip="@(cond ? "text" : "")").

   Использование:
     <button data-tooltip="Сохранить состав">💾</button>
     <span   data-tooltip="ВИП-статус">👑</span>

   Положение по умолчанию — сверху. Для других сторон добавьте
   data-tooltip-placement="bottom|left|right" (поддержка ниже).
*/
[data-tooltip]:not([data-tooltip=""]) {
    position: relative;
}
[data-tooltip]:not([data-tooltip=""]):hover::after,
[data-tooltip]:not([data-tooltip=""]):focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(8, 12, 30, 0.96);
    color: var(--text);
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    max-width: 260px;
    width: max-content;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    animation: tooltip-in 0.12s ease-out;
}
[data-tooltip]:not([data-tooltip=""]):hover::before,
[data-tooltip]:not([data-tooltip=""]):focus-visible::before {
    content: "";
    position: absolute;
    /* Reset любых чужих ::before (например, .btn::before c inset: 0) —
       иначе наши bottom/left не перекроют top/right от inset. */
    inset: auto;
    top: auto;
    right: auto;
    width: 0;
    height: 0;
    background: transparent;
    border-radius: 0;
    opacity: 1;

    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(8, 12, 30, 0.96);
    pointer-events: none;
    z-index: 1000;
    animation: tooltip-in 0.12s ease-out;
}
@keyframes tooltip-in {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* Для элементов над которыми мало места — подсказка снизу. */
[data-tooltip][data-tooltip-placement="bottom"]:hover::after,
[data-tooltip][data-tooltip-placement="bottom"]:focus-visible::after {
    bottom: auto;
    top: calc(100% + 8px);
}
[data-tooltip][data-tooltip-placement="bottom"]:hover::before,
[data-tooltip][data-tooltip-placement="bottom"]:focus-visible::before {
    bottom: auto;
    top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: rgba(8, 12, 30, 0.96);
}

/* Для элементов у правого края экрана: тултип прижимается к правому краю
   элемента (правый край тултипа == правый край элемента), не центрируется.
   Стрелка тоже сдвигается, чтобы указывать на элемент. */
[data-tooltip][data-tooltip-placement="right"]:hover::after,
[data-tooltip][data-tooltip-placement="right"]:focus-visible::after {
    left: auto;
    right: 0;
    transform: none;
}
[data-tooltip][data-tooltip-placement="right"]:hover::before,
[data-tooltip][data-tooltip-placement="right"]:focus-visible::before {
    left: auto;
    right: 12px;
    transform: none;
}
[data-tooltip][data-tooltip-placement="right"]:hover::after { animation: tooltip-in-right 0.12s ease-out; }
[data-tooltip][data-tooltip-placement="right"]:hover::before { animation: tooltip-in-right 0.12s ease-out; }
@keyframes tooltip-in-right {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Аналогично у левого края: прижать к левому краю элемента. */
[data-tooltip][data-tooltip-placement="left"]:hover::after,
[data-tooltip][data-tooltip-placement="left"]:focus-visible::after {
    left: 0;
    transform: none;
}
[data-tooltip][data-tooltip-placement="left"]:hover::before,
[data-tooltip][data-tooltip-placement="left"]:focus-visible::before {
    left: 12px;
    transform: none;
}
[data-tooltip][data-tooltip-placement="left"]:hover::after { animation: tooltip-in-right 0.12s ease-out; }
[data-tooltip][data-tooltip-placement="left"]:hover::before { animation: tooltip-in-right 0.12s ease-out; }

/* Все тултипы внутри верхней панели — всегда снизу: сверху viewport,
   стандартный «над элементом» обрезается. Распространяется и на вложенные
   .profile-badge внутри .profile-btn. Покрывает будущие иконки в шапке без
   ручной разметки data-tooltip-placement. */
.navbar [data-tooltip]:not([data-tooltip=""]):hover::after,
.navbar [data-tooltip]:not([data-tooltip=""]):focus-visible::after {
    bottom: auto;
    top: calc(100% + 8px);
}
.navbar [data-tooltip]:not([data-tooltip=""]):hover::before,
.navbar [data-tooltip]:not([data-tooltip=""]):focus-visible::before {
    bottom: auto;
    top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: rgba(8, 12, 30, 0.96);
}

/* ====== Форум ====== */
.forum-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
}
.forum-block-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: rgba(59, 130, 246, 0.08);
    border-bottom: 1px solid var(--border);
}
.forum-block-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.forum-block-sub {
    font-size: 0.82rem;
    color: var(--text-dim);
    margin-top: 0.2rem;
}
.forum-block-empty {
    padding: 0.9rem 1.1rem;
    color: var(--text-faint);
    font-size: 0.85rem;
}
.forum-block-actions { display: flex; gap: 0.3rem; align-items: center; }

/* Админские кнопки управления (↑↓ ✏️ 🗑 + Раздел) на узких экранах —
   отдельной строкой под названием блока/раздела, чтобы не теснить заголовок.
   У обычных пользователей этих кнопок нет — их вид не меняется. */
@media (max-width: 900px) {
    .forum-block-head { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .forum-block-actions { flex-wrap: wrap; }
    .forum-section-row-wrap { flex-direction: column; align-items: stretch; }
    .forum-section-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 0 0.85rem 0.7rem;
    }
}

.forum-sections { display: flex; flex-direction: column; }
.forum-section-row-wrap {
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--border);
}
.forum-section-row-wrap:first-child { border-top: none; }
.forum-section-row-wrap:hover { background: rgba(255,255,255,0.04); }
.forum-section-row-wrap .forum-section-row { border-top: none; flex: 1; }
.forum-section-actions {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    padding: 0 0.9rem;
}

.forum-section-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    border-top: 1px solid var(--border);
    text-decoration: none;
    transition: background .14s;
}
.forum-section-row:first-child { border-top: none; }
.forum-section-row:hover { background: rgba(59,130,246,0.05); }

.forum-section-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(139,92,246,0.18));
    border: 1px solid rgba(59,130,246,0.25);
    color: #93c5fd;
    transition: background .14s, border-color .14s, color .14s;
}
.forum-section-row:hover .forum-section-icon {
    background: linear-gradient(135deg, rgba(59,130,246,0.28), rgba(139,92,246,0.28));
    border-color: rgba(139,92,246,0.45);
    color: #c4b5fd;
}
.forum-section-icon svg { width: 18px; height: 18px; }

.forum-section-body { flex: 1; min-width: 0; }
.forum-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}
.forum-section-sub {
    font-size: 0.82rem;
    color: var(--text-dim);
    margin-top: 0.15rem;
}

.forum-section-arrow {
    flex: 0 0 auto;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    transition: color .14s, transform .14s;
}
.forum-section-arrow svg { width: 16px; height: 16px; }
.forum-section-row:hover .forum-section-arrow {
    color: var(--accent);
    transform: translateX(2px);
}

.forum-toolbar {
    margin-bottom: 0.9rem;
    display: flex;
    gap: 0.5rem;
}

.forum-topics-table .clickable-row { cursor: pointer; }
.forum-topics-table tr:hover td { background: rgba(255,255,255,0.04); }

/* ---- тема: посты ---- */
.forum-posts { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.25rem; }
.forum-post {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.forum-post-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
}
.forum-post-head-left  { display: flex; align-items: center; gap: 0.4rem; }
.forum-post-head-right { display: flex; align-items: baseline; gap: 0.5rem; }
.forum-post-author { font-weight: 700; color: var(--accent-3); }
.forum-post-team   { color: var(--text-dim); font-size: 0.88rem; margin-left: 0.35rem; }
.forum-post-karma  {
    color: var(--text-dim); font-size: 0.78rem; margin-left: 0.5rem;
    display: inline-flex; gap: 0.5rem;
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
.forum-post-karma .karma-like    { color: #7ee787; }
.forum-post-karma .karma-dislike { color: #ffa198; }
.forum-post-date   { color: var(--text-faint); font-family: 'JetBrains Mono', monospace; }

.forum-post-pinned {
    border-left: 3px solid var(--accent, #4ea1ff);
    background: rgba(78, 161, 255, 0.04);
}

/* "Последнее сообщение" в карточке раздела (Forum.razor) */
.forum-last-post {
    flex-shrink: 0;
    width: 220px;
    padding: 0.4rem 0.6rem;
    margin-right: 0.4rem;
    border-left: 1px solid var(--border, rgba(255,255,255,0.08));
    cursor: pointer;
    overflow: hidden;
}
.forum-last-post:hover {
    background: rgba(255,255,255,0.03);
}
.forum-last-post-topic {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.forum-last-post-meta {
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-top: 0.2rem;
}
.forum-last-post-meta b { color: var(--accent-3); font-weight: 600; }

/* Колонка "последнее сообщение" в таблице тем раздела (ForumSection.razor) */
.forum-last-post-cell { line-height: 1.35; }
.forum-last-post-preview {
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}

.forum-post-pin-mark {
    font-size: 0.95rem;
    margin-right: 0.2rem;
}

.forum-post-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-soft);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
}

.forum-inline-img {
    max-width: 100%;
    max-height: 480px;
    border-radius: 6px;
    margin: 0.4rem 0;
    display: block;
    background: var(--bg-soft);
}

.forum-img-prompt {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0;
    align-items: center;
}
.forum-img-prompt input {
    flex: 1;
    padding: 0.45rem 0.6rem;
    background: var(--bg-soft);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 6px;
    color: var(--text);
}

.avatar-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-soft);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    flex-shrink: 0;
}
.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Бейдж роли — кружок с иконкой слева от логина */
.forum-post-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.78rem;
    line-height: 1;
    flex-shrink: 0;
}
.forum-post-role.user      { background: rgba(255,255,255,0.08); }
.forum-post-role.moderator { background: rgba(34,211,238,0.18); }   /* accent-3 cyan */
.forum-post-role.admin     { background: rgba(250,204,21,0.20); }   /* yellow */
.forum-post-edited { color: var(--text-faint); font-size: 0.75rem; font-style: italic; }
/* «(изменено)» на десктопе, «(изм.)» на мобиле — экономим место. */
.edited-short { display: none; }

/* ====== Форум на мобиле ====== */
@media (max-width: 600px) {
    /* Свап подписи редактирования */
    .edited-full  { display: none; }
    .edited-short { display: inline; }

    /* Карточка раздела: название отдельной строкой, описание убираем,
       «последнее сообщение» уезжает на свою строку под названием — иначе
       фикс-ширина 220px распирала ряд за край экрана. */
    .forum-section-row {
        flex-wrap: wrap;
        gap: 0.4rem 0.7rem;
        padding: 0.7rem 0.85rem;
    }
    .forum-section-sub { display: none; }
    .forum-last-post {
        order: 3;
        width: 100%;
        flex: 1 1 100%;
        border-left: none;
        border-top: 1px solid var(--border);
        margin-right: 0;
        padding: 0.4rem 0 0;
    }

    /* Список тем раздела: таблица → карточки в столбик, чтобы ничего
       не уезжало вбок (превью последнего сообщения раньше распирало 280px). */
    .forum-topics-table thead { display: none; }
    .forum-topics-table,
    .forum-topics-table tbody { display: block; width: 100%; }
    .forum-topics-table tbody tr {
        display: block;
        padding: 0.7rem 0.85rem;
        margin-bottom: 0.5rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
    }
    .forum-topics-table tbody td {
        display: block;
        border: none;
        padding: 0;
        text-align: left !important;
    }
    /* Тема — заголовок строки */
    .forum-topics-table tbody td:first-child {
        font-weight: 700;
        font-size: 0.95rem;
        margin-bottom: 0.3rem;
    }
    /* Кол-во сообщений — компактный чип */
    .forum-topics-table tbody td.mono {
        display: inline-block;
        color: var(--text-dim);
        font-size: 0.78rem;
        margin-bottom: 0.15rem;
    }
    .forum-topics-table tbody td.mono::before { content: "💬 "; }
    /* Превью последнего сообщения больше не распирает строку */
    .forum-last-post-preview { max-width: 100%; }
}
.forum-post-body {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text);
    word-wrap: break-word;
}
.forum-post-quote {
    background: rgba(139, 92, 246, 0.08);
    border-left: 3px solid var(--accent-2);
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    margin: 0;
}
.forum-post-quote-head {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-2);
    margin-bottom: 0.25rem;
}
.forum-post-quote-body {
    font-size: 0.85rem;
    color: var(--text-dim);
    white-space: pre-wrap;
}
.forum-post-foot {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.forum-post-foot .btn.active {
    background: var(--surface2);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.forum-inline-quote {
    background: rgba(139, 92, 246, 0.06);
    border-left: 3px solid var(--accent-2);
    padding: 0.4rem 0.7rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin: 0.3rem 0;
}

/* ---- ответ / форма ---- */
.forum-reply {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.forum-reply-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 700;
    color: var(--text);
    font-size: 0.9rem;
}
.forum-reply-quote-hint {
    font-size: 0.8rem;
    color: var(--text-dim);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.forum-reply-body {
    width: 100%;
    background: rgba(8, 12, 30, 0.6);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-family: inherit;
    font-size: 0.92rem;
    resize: vertical;
    min-height: 100px;
    outline: none;
}
.forum-reply-body:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.forum-reply-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ban-choices {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

/* ---- Tournaments page ---- */
.tournaments-block { margin-bottom: 2rem; }
.tournaments-block-title {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-faint);
    margin-bottom: 0.85rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}
.tournaments-countries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
}
.country-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .14s, transform .08s;
}
.country-card:hover { border-color: rgba(59,130,246,0.35); }

.country-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: rgba(59, 130, 246, 0.08);
    border-bottom: 1px solid var(--border);
}
.country-name {
    font-size: 0.92rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.country-card-body { display: flex; flex-direction: column; }

.tournament-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.9rem;
    border: none;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background .12s;
    width: 100%;
}
.tournament-row:last-child { border-bottom: none; }
.tournament-row:hover:not(.tournament-row-disabled) {
    background: rgba(59,130,246,0.06);
}
.tournament-row-disabled {
    cursor: not-allowed;
    color: var(--text-faint);
}

.tournament-tier {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.18);
    color: var(--accent-2);
    border: 1px solid rgba(139, 92, 246, 0.3);
    min-width: 1.7rem;
    text-align: center;
}
.tournament-tier:has(.tournament-crest-img) {
    background: transparent;
    border: none;
    padding: 0;
    min-width: 0;
}
.tournament-crest-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}
.tournament-crest-head-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}
.tournament-row-disabled .tournament-tier {
    background: rgba(255,255,255,0.04);
    color: var(--text-faint);
    border-color: var(--border);
}
.tournament-name {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 600;
}
.tournament-meta {
    flex: 0 0 auto;
    font-size: 0.74rem;
    color: var(--text-faint);
    font-family: 'JetBrains Mono', monospace;
}

/* Placeholder-блоки для пока-не-готовых разделов */
.placeholder-block {
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.placeholder-icon { font-size: 2.5rem; opacity: 0.5; }
.placeholder-text {
    font-size: 0.86rem;
    color: var(--text-dim);
    line-height: 1.5;
}
.placeholder-text b { color: var(--text); }
.placeholder-text code {
    background: rgba(255,255,255,0.06);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.78rem;
}

/* ---- Emoji picker ---- */
.emoji-picker-wrap { position: relative; display: inline-block; }
.emoji-picker-popup {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    background: rgba(8, 12, 30, 0.96);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 0.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.2rem;
    z-index: 500;
}
.emoji-btn {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 1.1rem;
    padding: 0.3rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background .1s;
}
.emoji-btn:hover { background: var(--surface2); }

/* ====== VIP ====== */
.vip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 1.05rem;
    color: var(--yellow);
    background: rgba(250, 204, 21, 0.1);
    border: 1px solid rgba(250, 204, 21, 0.3);
    border-radius: 10px;
    cursor: default;
    user-select: none;
}

/* ====== Player card: Действия tab ====== */
.actions-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.actions-section {
    background: rgba(8, 12, 30, 0.45);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    align-items: flex-start;
}
.actions-section-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.actions-section-sub {
    font-size: 0.82rem;
    color: var(--text-dim);
    line-height: 1.45;
}
.min-bid-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.min-bid-row label { color: var(--text-dim); font-weight: 600; }
.min-bid-row.muted { color: var(--text-faint); }
.min-bid-row.muted b { color: var(--text); }
.min-bid-hint {
    font-size: 0.75rem;
    color: var(--text-faint);
    line-height: 1.4;
}
.min-bid-hint b { color: var(--text-dim); }
.min-bid-hint.bad { color: var(--red); }
.min-bid-hint.bad b { color: var(--red); }
.min-bid-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.transfer-status-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    font-size: 0.85rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.transfer-status-banner.bids_open { background: rgba(250, 204, 21, 0.1); border-color: rgba(250, 204, 21, 0.3); }
.transfer-status-banner.review    { background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.3); }
.transfer-status-banner.moving    { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.3); }
.transfer-status-sub {
    color: var(--text-dim);
    font-size: 0.8rem;
    margin-left: 0.2rem;
}
.transfer-locked {
    color: var(--text-faint);
    font-size: 0.82rem;
}

/* ====== Transfers: fee stepper ======
   Переиспользуем общий .stepper (см. «Stepper» ниже в файле) — но
   ширину инпута расширяем, чтобы влезали миллионы. */
.fee-stepper .stepper-input {
    width: 11ch;
    text-align: right;
    padding-right: 0.6rem;
}
.my-bid-hint {
    font-size: 0.72rem;
    color: var(--accent-3);
    margin-top: 0.2rem;
    font-family: 'JetBrains Mono', monospace;
}

/* ====== Transfers page (coaches / physios) ====== */
.transfer-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.transfer-head-stats {
    font-size: 0.88rem;
    color: var(--text-dim);
}
.transfer-filters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
.transfer-filter {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
/* Apply-button cell sits flush with the bottom of the filter selects. */
.transfer-filter-actions {
    justify-content: flex-end;
    margin-left: auto;
}
.transfer-filter label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    font-weight: 700;
}
.transfer-filter select {
    background: rgba(8,12,30,0.6);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.88rem;
    min-width: 10rem;
}
.transfer-filter select option { background: #1a2140; }
.transfer-footer {
    margin-top: 1rem;
    font-size: 0.82rem;
    color: var(--text-faint);
    text-align: center;
}
.pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}
.transfer-table .mono { font-family: 'JetBrains Mono', monospace; }
.transfer-table td { vertical-align: middle; }
.transfer-table .staff-stars { letter-spacing: 1px; font-size: 0.85rem; }
.pager-info {
    margin: 0 0.5rem;
    font-size: 0.85rem;
    color: var(--text-dim);
    white-space: nowrap;
}
.pager-info b { color: var(--text); font-weight: 700; }
.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}
.staff-card {
    background: rgba(8,12,30,0.55);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color .15s, transform .15s;
}
.staff-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.staff-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.staff-card-name {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.staff-stars { font-size: 0.85rem; letter-spacing: 1px; flex-shrink: 0; }
.staff-stars .star      { color: rgba(255,255,255,0.2); }
.staff-stars .star.on   { color: var(--yellow); }
/* Половина звезды — градиент по тексту: левая половина — жёлтая (заполнено),
   правая — серая (как у пустых). Даёт 11 ступеней (0..10 половинок). */
.staff-stars .star.half {
    background: linear-gradient(90deg, var(--yellow) 50%, rgba(255,255,255,0.2) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.staff-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-dim);
}
.staff-card-age { font-family: 'JetBrains Mono', monospace; }
.staff-card-spec { margin-top: 0.15rem; }
.staff-card-wage {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--accent-3);
    margin-top: auto;
    padding-top: 0.3rem;
}
.staff-card-action {
    align-self: stretch;
    justify-content: center;
}

/* ====== Contracts tab ====== */
.contracts-table-wrap { overflow-x: auto; }
.contracts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.contracts-table th {
    text-align: left;
    font-size: 0.68rem;
    color: var(--text-dim);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid var(--border);
}
.contracts-table td {
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}
.contracts-table .col-num      { width: 2.5rem; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
.contracts-table .col-name     { font-weight: 600; white-space: nowrap; }
.contracts-table .col-pos      { width: 4rem; }
.contracts-table .col-age      { width: 3rem; text-align: center; }
.contracts-table .col-wage     { width: 8.5rem; font-family: 'JetBrains Mono', monospace; }
.contracts-table .col-wage .wage-weekly { font-size: 0.72rem; color: var(--text-faint); }
.contracts-table .col-signed,
.contracts-table .col-expires  { width: 5.5rem; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
.contracts-table .col-left     { width: 5rem; font-family: 'JetBrains Mono', monospace; }
.contracts-table .col-left.bad { color: var(--red); font-weight: 700; }
.contracts-table .col-actions  { text-align: right; white-space: nowrap; }
.contracts-table .col-actions .btn + .btn { margin-left: 0.35rem; }
.contracts-table .btn-ghost.danger { color: var(--red); border-color: rgba(248, 113, 113, 0.35); }
.contracts-table .btn-ghost.danger:hover { background: rgba(248, 113, 113, 0.12); }
.contracts-table .bad { color: var(--red); }

/* Modal preview body (renew / terminate) */
.contract-preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 0;
}
.contract-preview-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}
.contract-preview-title.warn { color: var(--red); }
.contract-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.88rem;
    padding: 0.25rem 0;
}
.contract-preview-row span { color: var(--text-dim); }
.contract-preview-row b    { color: var(--text); font-weight: 700; }
.contract-preview-row.muted span,
.contract-preview-row.muted b { color: var(--text-faint); }
.contract-preview-row.cost b  { color: var(--yellow); }
.contract-preview-row .bad    { color: var(--red); }
.contract-preview-sep {
    height: 1px;
    background: var(--border);
    margin: 0.4rem 0;
}

/* ====== News layout (feed + poll sidebar) ====== */
.news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.5rem;
    align-items: start;
}
.news-feed { min-width: 0; }
.news-side {
    position: sticky;
    top: 90px;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.news-list-pinned { margin-bottom: 0.85rem; }
.news-item { padding: 0.9rem 1.1rem; }
.news-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}
.news-item-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
}
.news-item-date {
    color: var(--text-faint);
    font-size: 0.8rem;
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
}
.news-item-body {
    color: var(--text);
    line-height: 1.55;
    white-space: pre-wrap;
    font-size: 0.92rem;
}

.news-toggle {
    margin-top: 0.5rem;
    background: transparent;
    border: none;
    color: var(--accent, #4ea1ff);
    cursor: pointer;
    padding: 0.25rem 0;
    font-size: 0.9rem;
    font-weight: 500;
}

.news-toggle:hover {
    text-decoration: underline;
}

/* ====== Реакции и комментарии к новостям ====== */
.news-social {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.news-reactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .08s;
}
.reaction-btn:hover:not(:disabled) { background: var(--surface2); transform: translateY(-1px); }
.reaction-btn:disabled { opacity: 0.6; cursor: default; }
.reaction-btn.mine {
    background: rgba(59,130,246,0.16);
    border-color: var(--accent);
    color: var(--text);
}
.reaction-emoji { line-height: 1; }
.reaction-count { font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.news-comments-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.85rem;
    cursor: pointer;
}
.news-comments-toggle:hover, .news-comments-toggle.open {
    background: var(--surface2);
    color: var(--text);
}

.news-comments {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.news-comments-empty { color: var(--text-faint); font-size: 0.88rem; margin: 0; }
.news-comment {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
}
.news-comment-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.news-comment-author { font-weight: 700; font-size: 0.85rem; color: var(--text); }
.news-comment-time { font-size: 0.75rem; color: var(--text-faint); }
.news-comment-del {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 0.2rem;
}
.news-comment-del:hover { color: var(--red); }
.news-comment-body { color: var(--text); font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; }

.news-comment-form { display: flex; flex-direction: column; gap: 0.4rem; }
.news-comment-input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}
.news-comment-input:focus { outline: none; border-color: var(--accent); }
.news-comment-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}
.news-comment-error { color: var(--red); font-size: 0.82rem; margin-right: auto; }

/* ====== Ростер на мобиле: таблица → компактные карточки ====== */
/* Разделитель строк мобильной карточки. На десктопе таблицы он не нужен —
   прячем, чтобы не появлялась лишняя колонка. В мобильном блоке ниже он
   оживает как flex-перенос на всю ширину. */
td.card-break { display: none; }

@media (max-width: 900px) {
    .roster-mobile-cards thead { display: none; }
    .roster-mobile-cards td.card-break { display: block; }
    .roster-mobile-cards,
    .roster-mobile-cards tbody,
    .roster-mobile-cards tfoot { display: block; width: 100%; }
    .roster-mobile-cards tfoot td { display: block; border: none; padding-top: 0.5rem; }

    .roster-mobile-cards tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.6rem;
        padding: 0.55rem 0.7rem;
        margin-bottom: 0.45rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
    }
    .roster-mobile-cards tbody td {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        border: none;
        padding: 0;
        font-size: 0.85rem;
    }
    /* подпись из data-label перед значением (Возр/Физ/Мор/OVR) */
    .roster-mobile-cards tbody td[data-label]::before {
        content: attr(data-label);
        color: var(--text-faint);
        font-size: 0.66rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    /* ── Первая строка: № · Имя (обрезается) · Позиция · OVR ── */
    .roster-mobile-cards td.cell-num    { order: 1; color: var(--text-faint); font-weight: 700; font-variant-numeric: tabular-nums; }
    /* Имя обрезается многоточием, чтобы позиция и OVR не уезжали при длинных
       именах (flex:1 1 0 + min-width:0 по всей цепочке). */
    .roster-mobile-cards td.cell-name   { order: 2; flex: 1 1 0; min-width: 0; font-weight: 700; font-size: 0.98rem; }
    .roster-mobile-cards td.cell-name .nation-cell { flex: 1 1 auto; min-width: 0; max-width: 100%; }
    .roster-mobile-cards td.cell-name .name-text {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .roster-mobile-cards td.cell-pos    { order: 3; flex: 0 0 auto; }
    .roster-mobile-cards td.ovr-cell    { order: 4; flex: 0 0 auto; font-weight: 800; }
    /* Принудительный перенос: всё, что дальше, уходит на вторую строку
       независимо от ширины экрана и числа позиционных бейджей. */
    .roster-mobile-cards td.card-break  { order: 5; flex-basis: 100%; height: 0; padding: 0; margin: 0; }
    /* ── Вторая строка: Возр · Физ · Мораль · Статусы ── */
    /* Статусы больше НЕ занимают отдельную строку — встают в конец второй,
       переносятся только если реально не влезли. Пустой статус схлопывается. */
    .roster-mobile-cards td[data-label="Возр"] { order: 6; }
    .roster-mobile-cards td[data-label="Физ"]  { order: 7; }
    .roster-mobile-cards td[data-label="Мор"]  { order: 8; }
    .roster-mobile-cards td.cell-status { order: 9; }
    .roster-mobile-cards td.cell-status:empty { display: none; }
}

.news-body {
    width: 100%;
    padding: 0.65rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 110px;
    outline: none;
}
.news-body:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.news-body-preview {
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.5;
    white-space: pre-wrap;
    max-height: 10em;
    overflow: hidden;
    position: relative;
}

/* Панель фильтров новостей: категории — одной строкой с горизонтальным
   скроллом (не переносятся уродливо на мобиле), действия — строкой ниже. */
.news-filter-bar { display: flex; flex-direction: column; gap: 0.6rem; }
.news-cat-scroll {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.news-cat-scroll::-webkit-scrollbar { display: none; }
.news-cat-scroll > * { flex-shrink: 0; }
.news-cat-label { color: var(--text-dim); }
.news-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.news-filter-actions .btn { margin-left: auto; }

/* Отступ между новостями (несколько новостей в одном ИД иначе слипаются —
   у .card нет собственного margin). */
.news-item { margin-bottom: 0.7rem; }

/* ====== Pagination ====== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.page-btn {
    min-width: 34px;
    padding: 0.35rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-dim);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.page-btn:hover:not(:disabled):not(.active) {
    background: var(--surface2);
    color: var(--text);
    border-color: var(--border-strong);
}
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-btn.active {
    background: var(--gradient-soft);
    color: #fff;
    border-color: var(--accent);
}
.page-gap { color: var(--text-faint); padding: 0 0.15rem; }

/* ====== Poll widget ====== */
.poll-card { padding: 0.9rem 1rem; }
.poll-question {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    color: var(--text);
}
.poll-options {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.poll-option {
    position: relative;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .12s, background .12s;
}
.poll-option:hover { border-color: var(--border-strong); background: var(--surface2); }
.poll-option.mine {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.poll-option-bar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: var(--gradient-soft);
    z-index: 0;
    transition: width .35s ease;
}
.poll-option-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.poll-option-text { color: var(--text); font-weight: 600; font-size: 0.9rem; }
.poll-option-pct {
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}
.poll-footer {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.82rem;
}

/* ====== Poll admin ====== */
.poll-option-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.active-tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, rgba(52,211,153,0.22), rgba(16,185,129,0.12));
    color: var(--green);
    border: 1px solid rgba(52,211,153,0.4);
    border-radius: 999px;
    margin-left: 0.5rem;
}

@media (max-width: 900px) {
    .news-layout { grid-template-columns: 1fr; }
    /* Опрос (сайдбар) поднимаем НАД лентой новостей — иначе при стэке в одну
       колонку он уезжает в самый низ после всех новостей и его не видят. */
    .news-side { position: static; order: -1; }
    .news-feed { order: 0; }
}

/* ===== SeasonStateBadge — однострочная плашка в центре navbar ===== */
.season-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 1.1rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(34,211,238,0.12), rgba(59,130,246,0.10));
    border: 1px solid rgba(34,211,238,0.40);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 4px 18px rgba(34,211,238,0.15);
    color: var(--text);
    white-space: nowrap;
    transition: box-shadow .2s, border-color .2s;
}
.season-badge:hover {
    border-color: rgba(34,211,238,0.60);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 6px 24px rgba(34,211,238,0.25);
}
.season-badge-icon {
    font-size: 1.15rem;
    filter: drop-shadow(0 0 6px rgba(34,211,238,0.5));
    line-height: 1;
}
.season-badge-day {
    font-size: 1rem;
    font-weight: 800;
    color: var(--accent-3);
    letter-spacing: 0.01em;
}
.season-badge-of {
    font-size: 0.82rem;
    color: var(--text-faint);
    font-weight: 600;
}
.season-badge-season {
    color: var(--text);
    font-weight: 700;
    font-size: 0.85rem;
}
.season-badge-phase {
    color: var(--text-dim);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.season-badge-dot {
    color: var(--text-faint);
    font-size: 0.7rem;
}
/* Короткая дата «dd.MM» — только на мобиле (на десктопе показываем вербозную). */
.season-badge-date-short { display: none; }

/* Средние экраны: компактный режим — оставляем только «ИД X/78», прячем
   «Сезон N · Межсезонье». При max-width:1200px было display:none на всю
   плашку — теперь до 800px показываем сжатую, ниже скрываем целиком. */
@media (max-width: 1300px) {
    .season-badge-season,
    .season-badge-phase,
    .season-badge-dot {
        display: none;
    }
    .season-badge {
        gap: 0.35rem;
        padding: 0.4rem 0.8rem;
    }
}

/* Узкие экраны (мобилка) — прячем плашку целиком чтобы освободить место
   для меню и команды-селектора. */
@media (max-width: 800px) {
    .navbar { grid-template-columns: 1fr auto; }
    .navbar-center { display: none; }
}

/* Средние экраны: уменьшаем padding навбар-ссылок + сокращаем длинный текст. */
@media (max-width: 1000px) {
    .navbar-links .nav-link { padding: 0.4rem 0.6rem; font-size: 0.85rem; }
    .nav-full  { display: none; }
    .nav-short { display: inline; }
}

/* ===== Formation picker ===== */
.formation-pick-btn {
    width: 100%;
    padding: 0.55rem 0.8rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    text-align: center;
}
.formation-pick-btn:hover {
    background: var(--surface2);
    border-color: var(--accent);
}

/* Поле «Название» в карточке тактики — выровнять под размер дропдауна */
.squad-settings .field input {
    padding: 0.55rem 0.8rem;
    font-size: 0.88rem;
    border-radius: 8px;
}

.modal-sub {
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
    margin-left: 0.75rem;
    opacity: 0.85;
}

.modal-formation-picker {
    /* override modal-box defaults */
    max-width: 1080px !important;
    width: min(1080px, 96vw) !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}
.modal-formation-picker .modal-header {
    padding: 1.1rem 3rem 1rem 1.5rem; /* right gap for ✕ button */
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.modal-formation-picker .formation-picker-body {
    display: grid;
    grid-template-columns: 510px auto;
    gap: 1.25rem;
    /* Раньше было фиксированное height:600px → на ноут-экранах ~720px
       тело пропихивало футер «Применить» за пределы max-height:92vh,
       и кнопка не было видна. Теперь шринкаем (flex:1 в колонке flex), но
       не растём выше 600px. */
    min-height: 0;
    flex: 1 1 auto;
    max-height: 600px;
    overflow: hidden;
    padding: 1.25rem 1.5rem;
    justify-content: start;
}
.modal-formation-picker .apply-modal-actions {
    padding: 0.75rem 1.5rem 1.25rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.formation-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.6rem;
    border-right: 1px solid var(--border);
    overflow: hidden;
}

.formation-group-divider {
    height: 1px;
    background: var(--border);
    margin: 0.25rem 0;
}
.formation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
/* Кнопка тактики — стиль под .tactic-tab (как табы тактик в сайдбаре страницы) */
.formation-list-item {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.formation-list-item:hover { background: var(--surface2); color: var(--text); }
.formation-list-item.active {
    background: var(--gradient-soft);
    color: #fff;
    border-color: var(--border-strong);
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* Пич справа — соотношение 4:5 как у основного, заполняет высоту тела модалки */
.modal-formation-picker .formation-preview-pitch {
    height: 100%;
    width: auto;
    aspect-ratio: 4 / 5;
}

/* Мобайл: окно выбора схемы — в одну колонку со скроллом. Иначе список схем
   (фикс. 510px) не влезал, обрезался без прокрутки, а превью-поле сжималось
   в ноль. Теперь список сверху (скроллится), поле — снизу по центру. */
@media (max-width: 900px) {
    .modal-formation-picker .formation-picker-body {
        grid-template-columns: 1fr;
        max-height: none;
        overflow-y: auto;
        gap: 1rem;
    }
    .formation-list {
        border-right: none;
        padding-right: 0;
        overflow: visible;
    }
    .modal-formation-picker .formation-preview-pitch {
        height: auto;
        width: min(62%, 230px);
        margin: 0 auto;
    }
}

/* Превью совпадает с .formation-pitch (полосы, штрафные не рисуются — только рамка и средняя линия) */
.formation-preview-pitch {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background-image:
        repeating-linear-gradient(0deg,
            rgba(255,255,255,0.03) 0,
            rgba(255,255,255,0.03) 28px,
            rgba(0,0,0,0.05) 28px,
            rgba(0,0,0,0.05) 56px),
        radial-gradient(ellipse at center, #15803d 0%, #064e3b 100%);
    box-shadow: var(--shadow), inset 0 0 60px rgba(0,0,0,0.35);
    border: 1px solid var(--border-strong);
}
.formation-preview-pitch::before {
    content: '';
    position: absolute;
    inset: 4%;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    pointer-events: none;
}
.formation-preview-pitch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 4%;
    right: 4%;
    height: 2px;
    background: rgba(255,255,255,0.3);
}

.preview-slot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 40px;
    text-align: center;
    user-select: none;
    pointer-events: none;
}
.preview-slot-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0 auto;
    background: rgba(255,255,255,0.12);
    border: 2px dashed rgba(255,255,255,0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.6rem;
}
/* .preview-slot-label / .preview-slot-pos удалены — подписи под кружком в
   превью тактики убраны (позиция написана прямо в кружке). */

/* Мобилка: кружки игроков поменьше — на узком поле 38px великоваты и наезжают
   на подписи. Действует и на поле «Состав на матч» (.slot), и на превью в форме
   выбора тактики (.preview-slot). Блок стоит ПОСЛЕ базовых наборов (.slot ~2113,
   .preview-slot ~6628) — иначе при одинаковой специфичности базовое правило,
   что ниже в файле, перебило бы мобильное. */
@media (max-width: 700px) {
    /* Поле «Состав на матч» — кружки 30px (подписи остаются). */
    .slot { width: 46px; }
    .slot-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.6rem;
        border-width: 1.5px;
    }
    .slot-label {
        font-size: 0.56rem;
        margin-left: -8px;
        margin-right: -8px;
    }
    .slot-pos {
        font-size: 0.5rem;
        padding: 0 4px;
    }
    /* Форма выбора тактики — кружки ещё меньше (подписи под ними убраны,
       позиция написана прямо в кружке). */
    .preview-slot { width: 28px; }
    .preview-slot-avatar {
        width: 24px;
        height: 24px;
        font-size: 0.5rem;
        border-width: 1px;
    }
}

/* ===== MatchView replay layout =====
   Слева — текстовая трансляция (полная высота пича), в центре — пич,
   справа — командная сводная статистика. Внизу на всю ширину —
   две таблицы per-player (home + away). */
/* /match/{id} — на всех трёх табах (pitch / events / stats) даём
   .main-content больше воздуха. .match-view-wide — обёртка вокруг
   всего экрана матча, ставится в MatchView.razor. */
.main-content:has(.match-view-wide) { max-width: 1600px; }

/* Шапка и tabs матча — центрируются по всей ширине .main-content,
   чтобы счёт и переключатели визуально стояли посередине, а не у
   левого края. */
.match-view-header { text-align: center; }
.match-view-tabs   { justify-content: center; }

/* Карточка матч-статистики (таб «Статистика») — компактная 3-колоночная
   таблица, выглядит лучше в узкой центрированной колонке, чем растянутая
   на всю ширину. */
/* Подложка общей статистики — на всю ширину (как таблицы игроков ниже).
   Саму таблицу держим центрированной прежней шириной (текст не растягиваем),
   и добавляем отступ снизу, чтобы верхний блок не слипался с нижними. */
.match-stats-card { margin: 0 0 1rem; }
.match-stats-card table { max-width: 720px; margin: 0 auto; }

/* Layout через grid-template-areas: устойчивее чем явные grid-column/row,
   потому что при смене template-columns в hide-2d Side явно остаётся
   в правильной колонке (а не уезжает в implicit grid). */
.match-replay-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr) 320px;
    grid-template-rows: 540px auto auto;
    grid-template-areas:
        "feed main     side"
        "controls controls side"
        "players players players";
    gap: 1rem;
    align-items: stretch;
}
.match-replay-feed {
    grid-area: feed;
    overflow-y: auto;
    min-height: 0;
}
.match-replay-main         { grid-area: main; display: flex; align-items: center; justify-content: center; }
.match-replay-main > div   { width: 100%; }
.match-replay-side         { grid-area: side; }
.match-replay-controls-bar { grid-area: controls; }
.match-replay-layout.replay-hide-2d {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
        "feed side"
        "controls side"
        "players players";
}
.match-replay-side .player-table th,
.match-replay-side .player-table td {
    white-space: nowrap;
    text-align: center;
}
.match-replay-side .player-table { table-layout: fixed; }
.match-replay-side .player-table th:first-child,
.match-replay-side .player-table td:first-child,
.match-replay-side .player-table th:last-child,
.match-replay-side .player-table td:last-child {
    width: 30%;
}
.match-replay-side .player-table th:nth-child(2),
.match-replay-side .player-table td:nth-child(2) {
    width: 40%;
}

.match-replay-players {
    grid-area: players;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.match-replay-team-stats .player-table th,
.match-replay-team-stats .player-table td {
    text-align: center;
    padding: 0.3rem 0.25rem;
}
.match-replay-team-stats .player-table td:nth-child(2) {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10rem;
}
/* Длинные названия команд (Bayer 04 Леверкузен / Боруссия Менхенгладбах
   и т.п.) уезжали за границу карточки из-за letter-spacing:2px+uppercase
   на .card-title. Сжимаем интервал, разрешаем перенос — теперь имя
   разворачивается на две строки, если не помещается. */
.match-replay-team-stats .card-title {
    letter-spacing: 1px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Таблица статы игроков — 13 колонок. На телефон не влезает: даём ей жить
   в натуральную ширину и скроллиться по горизонтали ВНУТРИ карточки
   (а не распирать страницу). Имя обрезается многоточием (max-width
   td:nth-child(2) выше), остальное — узкие числовые колонки. */
.stats-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stats-table-scroll > table { min-width: max-content; }
.stats-table-scroll th,
.stats-table-scroll td { white-space: nowrap; }
.match-replay-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.match-replay-events {
    list-style: none;
    padding: 0;
    margin: 0;
}
.match-replay-events li {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}
.match-replay-events li:last-child { border-bottom: none; }
.match-replay-events .ev-min   { font-family: 'JetBrains Mono', monospace; min-width: 3rem; color: var(--text-dim); flex-shrink: 0; }
.match-replay-events .ev-icon  { width: 1.4rem; text-align: center; flex-shrink: 0; }
.match-replay-events .ev-text  { line-height: 1.45; }

/* Промежуточный layout 1201–1700: события слева, поле справа, общая
   статистика уезжает на всю ширину под поле. 3-колоночный режим оставлен
   только для очень широких мониторов (>1700px) — иначе поле зажато между
   двумя 320px-колонками и выглядит крошечным. */
@media (min-width: 1201px) and (max-width: 1700px) {
    .match-replay-layout {
        grid-template-columns: 320px minmax(0, 1fr);
        grid-template-rows: 540px auto auto auto;
        grid-template-areas:
            "feed     main"
            "controls controls"
            "side     side"
            "players  players";
    }
    .match-replay-layout.replay-hide-2d {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "feed"
            "controls"
            "side"
            "players";
    }
}

/* На узких экранах — стэкаем в одну колонку. */
@media (max-width: 1200px) {
    .match-replay-layout {
        /* minmax(0,1fr) вместо 1fr: у 1fr неявный min-width:auto, и широкий
           контент (канвас поля, плотные таблицы) распирал колонку шире экрана
           → весь блок уезжал за край. rows:auto — снимаем десктопный пин 540px
           с ленты, чтобы на телефоне она была по контенту. */
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "feed"
            "main"
            "controls"
            "side"
            "players";
    }
    .match-replay-layout.replay-hide-2d {
        /* ОБЯЗАТЕЛЬНО переопределяем колонки: базовое .replay-hide-2d
           (десктоп) задаёт «minmax(0,1fr) 320px» и по специфичности (0,2,0)
           перебивает мобильный .match-replay-layout (0,1,0). Без этой строки
           при «Скрыть 2D» на телефоне оставались 2 колонки — 320px съедала
           почти всю ширину, контент вжимался в полоску слева (bug72). */
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "feed"
            "controls"
            "side"
            "players";
    }
    .match-replay-players {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Поле держит пропорцию 800/520 (aspect-ratio на самом canvas) и просто
       ужимается по ширине контейнера. min-height не задаём — иначе на телефоне
       канвас распирало по вертикали в почти квадрат. */
    .match-replay-feed { max-height: 480px; }
}

/* ===== Полноэкранный 2D-вьювер реплея ===== */
.replay-fs {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: #0b1020;
}
.replay-fs-stage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    box-sizing: border-box;
}
/* Портрет → форсим горизонталь: оверлей повёрнут на 90°, размеры свопнуты.
   Так полный матч всегда смотрится landscape, как телефон ни держи. */
@media (orientation: portrait) {
    .replay-fs-stage {
        top: 0;
        left: 100vw;
        width: 100vh;
        height: 100vw;
        transform: rotate(90deg);
        transform-origin: top left;
    }
}
.replay-fs-top {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.replay-fs-events {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    height: 3.8em;            /* ФИКС-высота — лента не прыгает при появлении событий */
    overflow: hidden;
    box-sizing: border-box;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.4rem;
    padding: 0.3rem 0.6rem;
}
.replay-fs-ev {
    display: flex;
    gap: 0.4rem;
    font-size: 0.76rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
}
.replay-fs-ev:nth-child(2) { opacity: 0.7; }
.replay-fs-ev:nth-child(3) { opacity: 0.45; }
.replay-fs-ev .ev-min  { font-family: 'JetBrains Mono', monospace; color: var(--text-dim); flex-shrink: 0; }
.replay-fs-ev .ev-icon { flex-shrink: 0; }
.replay-fs-ev .ev-text { overflow: hidden; text-overflow: ellipsis; }
.replay-fs-close { flex: 0 0 auto; }
.replay-fs-body {
    flex: 1 1 auto;
    display: flex;
    gap: 0.5rem;
    min-height: 0;
}
.replay-fs-pitch {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.5rem;
    padding: 0.4rem;
    box-sizing: border-box;
}
.replay-fs-pitch canvas {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    aspect-ratio: 800 / 520;
    border-radius: 0.4rem;
    display: block;
}
.replay-fs-sp {
    position: absolute;
    top: 0.4rem;
    left: 0.6rem;
    padding: 0.2rem 0.55rem;
    background: rgba(0,0,0,0.55);
    color: #ffd866;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 0.3rem;
    pointer-events: none;
}
.replay-fs-stats {
    flex: 0 0 auto;
    width: 30%;
    max-width: 210px;
    min-width: 120px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.4rem;
    padding: 0.35rem 0.5rem;
}
.replay-fs-stats-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}
.replay-fs-stats-head .team-crest-sm { width: 22px; height: 22px; }
.replay-fs-score {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--accent);
}
.replay-fs-stat-table { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.replay-fs-stat-table td { padding: 0.12rem 0.15rem; }
.replay-fs-stat-table td.h { text-align: left;  font-weight: 700; width: 26%; }
.replay-fs-stat-table td.a { text-align: right; font-weight: 700; width: 26%; }
.replay-fs-stat-table td.l { text-align: center; color: var(--text-dim); font-size: 0.68rem; }
.replay-fs-controls {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.replay-fs-min {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-dim);
    font-size: 0.8rem;
    white-space: nowrap;
}
.replay-fs-seek { flex: 1 1 auto; min-width: 60px; }

/* ===== Match-table (расширение .player-table для матч-листов) ===== */
.match-table th.num,
.match-table td.num { text-align: right; font-family: 'JetBrains Mono', monospace; }
.match-table td.score-cell { font-weight: 800; }
.match-table td.score-cell.scheduled { color: var(--text-faint); font-weight: 400; }
.match-table tr.today { background: var(--surface-strong); }
.match-table tr.today td:first-child { box-shadow: inset 3px 0 0 var(--accent-3); }
.match-table tr.scheduled td { color: var(--text-dim); }
.match-table .mine-team { color: var(--accent-3); font-weight: 700; }
.match-table .result-win  { color: var(--green);  font-weight: 700; }
.match-table .result-loss { color: var(--red);    font-weight: 700; }
.match-table .result-draw { color: var(--yellow); font-weight: 700; }

/* Кликабельный счёт в Календаре — открывает /match/{id}.
   Наследует цвет от .result-win/loss/draw на td.score-cell. */
.match-table .score-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
}
.match-table .score-link:hover { text-decoration: underline; }

.match-kind-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--surface);
    border: 1px solid var(--border);
}

/* Пометка «команда играла автосоставом» (бандл не выставлен/протух). */
.auto-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #d97706;
    background: rgba(217,119,6,0.12);
    border: 1px solid rgba(217,119,6,0.35);
    vertical-align: middle;
}
.match-kind-badge.league        { color: var(--accent);   border-color: var(--accent); }
.match-kind-badge.cup           { color: var(--yellow);   border-color: var(--yellow); }
.match-kind-badge.eurocup_group,
.match-kind-badge.eurocup_ko    { color: var(--accent-2); border-color: var(--accent-2); }
.match-kind-badge.national_team { color: var(--accent-3); border-color: var(--accent-3); }
.match-kind-badge.friendly      { color: var(--text-dim); }

/* Туры лиги — статичная ширина колонок, чтобы при переключении между
   турами таблица не «прыгала» из-за разной длины имён команд. */
.tours-table { table-layout: fixed; width: 100%; }
.tours-table td, .tours-table th { overflow: hidden; }
.tours-table .opponent-cell { max-width: 100%; }
.tours-table .opponent-cell > span:not([class]) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Хвостик под счётом в кубковых матчах: «пен. 4:3» / «доп. время». */
.score-suffix {
    font-size: 0.66rem;
    color: var(--text-faint);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* Кнопка раунда кубка (1/16 / 1/8 / Финал) — шире чем числовая 36×36 для лиги. */
.round-btn[data-tooltip*="/"], .round-btn { /* default стиль уже задан */ }
.round-selector .round-btn {
    min-width: 56px;
    width: auto;
    padding: 0 0.65rem;
}

/* Дом / в гостях — пилюля во второй половине .match-table */
.venue-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--surface);
    border: 1px solid var(--border);
}
.venue-badge.home { color: var(--green); border-color: var(--green); white-space: nowrap; }
.venue-badge.away { color: var(--accent-3); border-color: var(--accent-3); white-space: nowrap; }

/* Команда-соперник в .match-table — герб + название одной строкой. */
.opponent-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
}
.opponent-cell.clickable {
    cursor: pointer;
    transition: color .15s;
}
.opponent-cell.clickable:hover { color: var(--accent-3); }
.opponent-cell.clickable:hover .team-crest-fallback-sm { transform: scale(1.05); }

/* Маркер «*» (как сноска) для клубов без менеджера в таблице чемпионата —
   намёк менеджерам что можно подать заявку. На менеджерских командах не
   рендерится. */
.team-free-mark {
    font-size: 0.85rem;
    color: var(--text-faint);
    margin-left: 0.1rem;
    cursor: help;
}

/* Зеркальный вариант для колонки «Хозяева» — герб справа от названия. */
.opponent-cell.home-side { flex-direction: row; }
td[style*="text-align:right"] .opponent-cell { float: right; }

/* Заглушка эмблемы для inline-таблиц (мини-вариант .player-photo —
   прямоугольник 22×22 со скруглением 4px, как в TeamRoster). */
.team-crest-fallback-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    color: rgba(255,255,255,0.92);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: var(--surface-strong);
    border: 1px solid var(--border-strong);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    flex-shrink: 0;
    transition: transform .15s;
}

/* ===== Матч-листы на мобиле: широкая таблица → карточки матчей =====
   Общий «каркас» карточки для Календаря (.match-mobile-cards, матчи моей
   команды) и Расписания (.matchday-mobile-cards, все матчи дня). */
@media (max-width: 900px) {
    .match-mobile-cards thead,
    .matchday-mobile-cards thead { display: none; }
    .match-mobile-cards, .match-mobile-cards tbody,
    .matchday-mobile-cards, .matchday-mobile-cards tbody { display: block; width: 100%; }

    .match-mobile-cards tbody tr,
    .matchday-mobile-cards tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.3rem 0.55rem;
        padding: 0.6rem 0.75rem;
        margin-bottom: 0.5rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
    }
    .match-mobile-cards tbody td,
    .matchday-mobile-cards tbody td {
        display: inline-flex;
        align-items: center;
        border: none;
        padding: 0;
        font-size: 0.85rem;
    }

    /* ── Календарь: дата · турнир … счёт / соперник / ИД · стадия ── */
    .match-mobile-cards td.cell-date  { order: 1; color: var(--text-dim); font-size: 0.8rem; }
    .match-mobile-cards td.cell-kind  { order: 2; }
    .match-mobile-cards td.cell-score { order: 3; margin-left: auto; font-size: 1.05rem; }
    .match-mobile-cards td.cell-opp   { order: 4; flex: 1 1 100%; font-weight: 700; }
    .match-mobile-cards td.cell-opp .opponent-cell { font-size: 0.95rem; }
    .match-mobile-cards td.cell-venue { order: 5; }
    .match-mobile-cards td.cell-gd    { order: 6; color: var(--text-faint); font-size: 0.72rem; }
    .match-mobile-cards td.cell-gd::before { content: "ИД "; }
    .match-mobile-cards td.cell-stage { order: 7; color: var(--text-faint); font-size: 0.72rem; }
    .match-mobile-cards td.cell-stage:not(:empty)::before { content: "· "; padding-right: 0.25rem; }

    /* Текущий ИД: подсветка всей карточки, а не псевдо-border на первой ячейке */
    .match-mobile-cards tr.today {
        background: var(--surface-strong);
        box-shadow: inset 3px 0 0 var(--accent-3);
    }
    .match-mobile-cards tr.today td:first-child { box-shadow: none; }

    /* ── Расписание (матчи дня): хозяева — счёт — гости сверху, под ними
          мелкая мета «турнир · стадия». ── */
    .matchday-mobile-cards td.cell-home {
        order: 1; flex: 1 1 0; min-width: 0;
        display: block; text-align: right; font-weight: 700;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .matchday-mobile-cards td.cell-score {
        order: 2; flex: 0 0 auto; justify-content: center;
        padding: 0 0.5rem; font-size: 1.05rem;
    }
    .matchday-mobile-cards td.cell-away {
        order: 3; flex: 1 1 0; min-width: 0;
        display: block; text-align: left; font-weight: 700;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .matchday-mobile-cards td.cell-kind  { order: 4; }
    .matchday-mobile-cards td.cell-stage { order: 5; color: var(--text-faint); font-size: 0.72rem; }
    .matchday-mobile-cards td.cell-stage:not(:empty)::before { content: "· "; padding-right: 0.25rem; }
}

/* ===== 78-ИД сезонная сетка ===== */
.season-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}
.season-grid-row {
    display: grid;
    grid-template-columns: 56px repeat(3, 1fr);
    gap: 0.4rem;
}
.season-grid-week {
    align-self: center;
    color: var(--text-dim);
    font-weight: 700;
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
}
.season-grid-cell-head {
    text-align: center;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 800;
    padding-bottom: 0.25rem;
}
.season-grid-cell {
    appearance: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0.5rem;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    color: var(--text);
    transition: transform .15s, border-color .15s, background .15s;
}
.season-grid-cell:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.season-grid-cell .day-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.35rem;
}
.season-grid-cell .day-date {
    font-size: 0.68rem;
    color: var(--text-dim);
    font-weight: 600;
    letter-spacing: 0.01em;
}
.season-grid-cell .day-num {
    font-size: 0.8rem;
    color: var(--text-dim);
    font-weight: 700;
}
.season-grid-cell .day-icon {
    font-size: 1.1rem;
    text-align: right;
    line-height: 1;
}
.season-grid-cell.current {
    border-color: var(--accent-3);
    box-shadow: 0 0 0 2px rgba(34,211,238,0.25);
}
.season-grid-cell.current .day-num { color: var(--accent-3); }
.season-grid-cell.selected { background: var(--surface-strong); }
.season-grid-cell.phase-preseason    { background: rgba(34,211,238,0.06);  }
.season-grid-cell.phase-first_half   { background: rgba(59,130,246,0.08);  }
.season-grid-cell.phase-winter_break { background: rgba(139,92,246,0.08);  }
.season-grid-cell.phase-second_half  { background: rgba(59,130,246,0.08);  }
.season-grid-cell.phase-post_season  { background: rgba(250,204,21,0.06);  }

.season-grid-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    color: var(--text-dim);
    font-size: 0.78rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--border);
}

/* ===== Стрелочки прогресса/деградации стат игрока (PlayerCard) =====
   Используем тот же стиль chevron что у sub-rules в Squad: один символ
   («›» одинарный / «»» двойной) + CSS-rotate. Up = rotate(-90deg) зелёный,
   down = rotate(90deg) красный. С одним символом нет проблемы сдвига,
   которая была у пары «»»/«▼▼». */
.stat-trend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
    user-select: none;
}
.stat-trend.trend-up-1,
.stat-trend.trend-up-2   { color: var(--green); transform: rotate(-90deg); }
.stat-trend.trend-down-1,
.stat-trend.trend-down-2 { color: var(--red);   transform: rotate(90deg);  }

/* ===== Round selector — горизонтальный список 30 кнопок туров ===== */
.round-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.25rem 0;
}
.round-btn {
    appearance: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform .12s, border-color .12s, background .12s, color .12s;
}
.round-btn:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
    color: var(--text);
}
.round-btn.played {
    color: var(--text);
    background: rgba(52,211,153,0.10);
    border-color: rgba(52,211,153,0.35);
}
.round-btn.partial {
    color: var(--yellow);
    background: rgba(250,204,21,0.10);
    border-color: rgba(250,204,21,0.35);
}
.round-btn.scheduled { /* default */ }
.round-btn.active {
    color: var(--text);
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.20);
}

/* ===== Таблица чемпионата ===== */
.standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.standings-table th, .standings-table td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
}
.standings-table th {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-dim);
}
.standings-table .num    { text-align: right; }
.standings-table td.num  { font-family: 'JetBrains Mono', monospace; }
.standings-table .pos-col { width: 36px; text-align: center; color: var(--text-dim); }

/* Цветовые зоны строк (см. EUROCUP_DESIGN §3) — фон + левая полоска. */
.standings-table tr.zone-ucl        { background: rgba(34,211,238,0.08);  box-shadow: inset 3px 0 0 var(--accent-3); }
.standings-table tr.zone-uel        { background: rgba(139,92,246,0.08);  box-shadow: inset 3px 0 0 var(--accent-2); }
.standings-table tr.zone-ucfl       { background: rgba(52,211,153,0.07);  box-shadow: inset 3px 0 0 var(--green); }
.standings-table tr.zone-promote    { background: rgba(52,211,153,0.10);  box-shadow: inset 3px 0 0 var(--green); }
.standings-table tr.zone-relegation { background: rgba(248,113,113,0.08); box-shadow: inset 3px 0 0 var(--red); }

/* Турнирная таблица на мобиле: компактим, чтобы все 10 колонок влезли без
   горизонтального скролла; имя команды обрезаем многоточием. Касается лиг,
   кубков и еврокубков (общий класс .standings-table). */
@media (max-width: 900px) {
    .standings-table { font-size: 0.78rem; }
    .standings-table th,
    .standings-table td { padding: 0.4rem 0.18rem; }
    .standings-table th:first-child,
    .standings-table td:first-child { padding-left: 0.3rem; }
    .standings-table .pos-col { width: 18px; }
    .standings-table td:nth-child(2) .opponent-cell { max-width: 42vw; gap: 0.3rem; }
    .standings-table td:nth-child(2) .opponent-cell > span:not([class]) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Стат-таблица турнира (Игрок + Команда + статы) — горизонтальный скролл,
       чтобы длинные имена не растягивали страницу (GitHub-стиль). */
    .tournament-stats-table {
        display: block;
        width: max-content;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Телефон: в турнирной таблице убираем «забито/пропущено» — разница (±) их
   уже суммирует, а В/Н/П и Очки важнее. Освобождаем ширину под имя команды. */
@media (max-width: 600px) {
    .standings-table .col-goals { display: none; }
}

.standings-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 0.25rem 0.25rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
    color: var(--text-dim);
    font-size: 0.78rem;
}
.standings-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.legend-zone {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
}
.legend-zone.zone-ucl        { background: rgba(34,211,238,0.5);  }
.legend-zone.zone-uel        { background: rgba(139,92,246,0.5);  }
.legend-zone.zone-ucfl       { background: rgba(52,211,153,0.5);  }
.legend-zone.zone-promote    { background: rgba(52,211,153,0.6);  }
.legend-zone.zone-relegation { background: rgba(248,113,113,0.55); }

/* Заголовок страницы лиги: флаг + название с правильным gap. */
.league-title {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}
.league-title-name { line-height: 1; }

/* ===== Кубок — bracket viz ===== */
.cup-bracket {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}
.cup-bracket-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 220px;
}
.cup-bracket-col-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 800;
    color: var(--text-dim);
    margin-bottom: 0.25rem;
}
.cup-bracket-pair {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
}
.cup-bracket-pair.tbd { opacity: 0.55; }
.cup-bracket-pair.mine { border-color: var(--accent); }
.cup-bracket-line {
    display: grid;
    grid-template-columns: 1fr 28px;
    align-items: center;
}
.cup-bracket-line.winner { font-weight: 700; color: var(--text); }
.cup-bracket-line.loser  { color: var(--text-faint); text-decoration: line-through; }
.cup-bracket-score { text-align: right; font-family: 'JetBrains Mono', monospace; }
.cup-bracket-meta { color: var(--text-faint); font-size: 0.72rem; }

/* ===== Rules page ===== */
.rules-layout {
    display: grid;
    grid-template-columns: minmax(14rem, 16rem) 1fr;
    gap: 1rem;
    align-items: start;
}
.rules-toc {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.rules-toc-link {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.92rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.rules-toc-link:hover {
    background: var(--surface-strong);
    color: var(--text);
}
.rules-content { display: flex; flex-direction: column; gap: 1rem; }
.rules-content section ul { padding-left: 1.2rem; }
.rules-content section li { margin: 0.25rem 0; }
.rules-content section p { margin: 0.5rem 0; line-height: 1.55; }
@media (max-width: 900px) {
    .rules-layout { grid-template-columns: 1fr; }
    .rules-toc { position: static; }
}

/* ===== Player badges (PlayerBadges.razor) ===== */
/* Перечёркнутая иконка через ::after — для дисквалификаций. Эмодзи
   рендерится как обычно, поверх диагональная красная линия. */
.badge-strike {
    position: relative;
    display: inline-block;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0 1px;
}
.badge-strike::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    top: 50%;
    height: 2px;
    background: #ef4444;
    transform: rotate(-22deg);
    transform-origin: center center;
    border-radius: 1px;
    pointer-events: none;
}

/* Текст-чипы для вызовов в сборные */
.badge-text-chip {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
}
.badge-senior {
    background: #1e3a8a;
    color: #fff;
}
.badge-youth {
    background: #92400e;
    color: #fef3c7;
}

/* ====== Search page ====== */
.search-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.search-row {
    width: 100%;
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.search-row:hover { background: var(--surface-hover); }
.search-row-icon { font-size: 1.1rem; }
.search-row-name { font-weight: 500; }
.search-row-meta { color: var(--text-dim); font-size: 0.85rem; }
.search-hint {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin: 0 0 0.5rem 0;
    font-style: italic;
}

/* ============================================================
   FM26-style tiles (UI_GUIDELINES §3.7)
   Универсальная вложенная плашка для KPI/сниппетов. Кладётся
   ПОВЕРХ уже тёмной плашки (.player-hero / .tab-panel / .card),
   поэтому фон чуть светлее (--surface-elev). Группируем через
   .tile-grid — CSS Grid auto-fit с min ~150px.
   ============================================================ */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.7rem;
    align-content: start;
}

.tile {
    background: var(--surface-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.65rem 0.85rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    transition: background .15s, border-color .15s, transform .15s;
}
.tile.clickable { cursor: pointer; }
.tile.clickable:hover {
    background: var(--surface-strong);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.tile-header {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
}

.tile-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    word-break: break-word;
}
.tile-value.bad  { color: var(--red); }
.tile-value.good { color: var(--green); }

.tile-sub {
    font-size: 0.7rem;
    color: var(--text-faint);
}

/* Тонкая полоска слева для статусной окраски, без перекраски фона. */
.tile.accent         { border-left: 3px solid var(--accent);  padding-left: calc(0.85rem - 2px); }
.tile.accent-success { border-left: 3px solid var(--green);   padding-left: calc(0.85rem - 2px); }
.tile.accent-danger  { border-left: 3px solid var(--red);     padding-left: calc(0.85rem - 2px); }
.tile.accent-warn    { border-left: 3px solid var(--yellow);  padding-left: calc(0.85rem - 2px); }

/* tile-text — для значений из обычного текста, а не моноширинных
   чисел (например, лейбл сезонной задачи). */
.tile.tile-text .tile-value {
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
}

/* Размерные модификаторы */
.tile.tile-wide { grid-column: span 2; }
.tile.tile-tall { grid-row: span 2; }