/* CRM Team Team — светлая дизайн-система в духе современных панелей: серый холст, белые карточки с мягкой тенью,
   крупные цифры, пилюли вместо прямоугольников, один акцент — оранжевый Team Team. Шрифт — Wix Madefor, как на сайте клуба
   (у Display — заголовки и цифры, у Text — всё остальное). Структура разметки и классы не менялись — только вид.
   Стиль — Apple glass: карточки из полупрозрачного стекла с бликом по верхней кромке поверх пастельного фона.
   Размытие фона (backdrop-filter) — только у закреплённых слоёв: меню, шапка, нижняя панель, карточка справа, всплывашки;
   карточки контента без размытия — фон под ними мягкий, стекло читается и так, а мини-приложение не тормозит.
   Движение дешёвое: только opacity и transform, одна анимация на появление. */
@font-face { font-family: 'Wix Madefor Display'; font-weight: 400 800; font-display: swap; src: url('/crm/fonts/wix-display-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Wix Madefor Display'; font-weight: 400 800; font-display: swap; src: url('/crm/fonts/wix-display-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Wix Madefor Text'; font-weight: 400 800; font-display: swap; src: url('/crm/fonts/wix-text-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Wix Madefor Text'; font-weight: 400 800; font-display: swap; src: url('/crm/fonts/wix-text-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  /* стекло: --bg-2 — поверхность карточки, --panel-2 / --hover / --field — «лунки» внутри стекла, тонированные сиренью */
  --bg: #EFECF7; --bg-2: rgb(255 255 255 / 0.68); --panel: #FFFFFF; --panel-2: rgb(104 84 184 / 0.06); --hover: rgb(104 84 184 / 0.06); --field: rgb(104 84 184 / 0.07);
  --glass-chrome: rgb(255 255 255 / 0.62); --blur: blur(28px) saturate(1.8);
  /* пастельные плитки — цветное стекло: сирень, голубой, мята, персик, роза */
  --p-lilac: rgb(206 194 252 / 0.72); --p-blue: rgb(196 218 252 / 0.75); --p-mint: rgb(196 236 206 / 0.78); --p-peach: rgb(255 214 190 / 0.78); --p-rose: rgb(250 206 222 / 0.75);
  --line: rgb(26 25 23 / 0.06); --line-2: rgb(26 25 23 / 0.1); --line-3: rgb(26 25 23 / 0.2);
  --text: #1A1917; --muted: #5F5C57; --dim: #6B6762;
  --ink: #1A1917; --ink-t: #FFFFFF;
  --acc: #FF6A13; --acc-t: #B9460B; --acc-ink: #FFFFFF; --acc-soft: rgb(255 106 19 / 0.1); --acc-line: rgb(255 106 19 / 0.35);
  --yu: var(--acc);
  --s-new: #FF6A13; --s-work: #6F9BF2; --s-noanswer: #F07C84; --s-trial: #F2C14E; --s-came: #A58BF7; --s-paid: #5FC693; --s-lost: #B4B0AA;
  --red-t: #C2333A; --green-t: #137A52; --amber-t: #8F5F06; --blue-t: #2F5FCB; --violet-t: #7A4DE0;
  --red-soft: rgb(229 72 77 / 0.1); --green-soft: rgb(30 154 102 / 0.11); --amber-soft: rgb(224 161 6 / 0.13); --blue-soft: rgb(59 111 224 / 0.1);
  --font: 'Wix Madefor Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-d: 'Wix Madefor Display', 'Wix Madefor Text', system-ui, -apple-system, sans-serif;
  --r: 24px; --r-s: 14px; --pill: 999px; --side: 248px; --pw: min(500px, 40vw); --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1);
  /* кромка стекла: блик сверху и тонкая светлая обводка; под ней — мягкая тень с сиреневым оттенком */
  --rim: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 0 0 1px rgb(255 255 255 / 0.6);
  --sh: var(--rim), 0 1px 2px rgb(60 40 120 / 0.05), 0 12px 32px rgb(60 40 120 / 0.08);
  --sh-2: var(--rim), 0 2px 6px rgb(60 40 120 / 0.06), 0 24px 60px rgb(60 40 120 / 0.16);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-3) transparent; background: var(--bg); }
body { min-height: 100dvh; background: transparent; color: var(--text); font: 400 13.5px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
/* фон — пастельные пятна, как обои macOS: сирень, голубой, персик, роза. Насыщеннее, чем раньше, — чтобы стекло над ними читалось.
   Один закреплённый слой без размытия — дёшево для мини-приложения */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(55% 45% at 6% 4%, #CDBFFF 0%, transparent 70%),
  radial-gradient(45% 40% at 96% 8%, #BED6FF 0%, transparent 70%),
  radial-gradient(38% 34% at 64% 52%, #FFDCCB 0%, transparent 70%),
  radial-gradient(55% 50% at 10% 98%, #FFCADD 0%, transparent 70%),
  radial-gradient(45% 45% at 94% 96%, #C6DAFF 0%, transparent 70%),
  linear-gradient(160deg, #ECE7FA 0%, #F2ECF8 50%, #EAEFFB 100%); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--acc); color: var(--acc-ink); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
input, textarea, select { caret-color: var(--acc); }
h1, h2, h3, .kpi dd, .club-price b, .abl-s b, .num b, .abl-next__d, .month__t b { font-family: var(--font-d); }
/* единый фокус полей: оранжевая рамка и мягкое кольцо (таблица-ячейка .cell и поле взноса — со своими правилами ниже) */
main input:focus, main select:focus, main textarea:focus, .nav__find:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); background-color: #fff; }
.fee-in input:focus { box-shadow: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--line-3); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
[hidden] { display: none !important; }
svg { flex: none; }
.mono { font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* движение: наведения плавные одной кривой; нажатие чуть утапливает кнопку; выключенные — бледнее и без наведения */
.nav__i, .chip, .sq, .subtab, .link, .icon-btn, .row, .list > li, .tbl tbody tr, .kpi, .jp, .kv, .cell-name, .ov-name, .ovx__name, .ig__n, .st-btn, .seg2__b, .paybtn, .take, .gone__ck, .mbg__b, .pay, .copy, .num, .more, .btn, .btn-ghost, .btn-sm, .send, .bell, .tabbar__i { transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.2s var(--ease), translate 0.2s var(--ease), scale 0.12s var(--ease); }
/* вход — замедление в конце (ease-out), нажатие — быстрое и чуть короче: 0,97 вниз, не больше */
.btn:active, .btn-ghost:active, .btn-sm:active, .chip:active, .seg2__b:active, .take:active, .paybtn:active, .icon-btn:active, .st-btn:active, .copy:active, .kpi--btn:active, .kpi--x:active, .jp:active, .send:active, .sq:active, .subtab:active, .nav__i:active { scale: 0.97; translate: 0 0; }
@media (hover: hover) {
}
.btn:disabled, .btn-ghost:disabled, .btn-sm:disabled, .take:disabled, .st-btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
/* смена раздела: карточки мягко всплывают снизу одна за другой — один авторский момент на экран */
.view.is-enter > * { animation: viewIn 0.32s var(--ease) both; }
.view.is-enter > :nth-child(2) { animation-delay: 0.04s; } .view.is-enter > :nth-child(3) { animation-delay: 0.08s; } .view.is-enter > :nth-child(4) { animation-delay: 0.12s; } .view.is-enter > :nth-child(n + 5) { animation-delay: 0.16s; }
@keyframes viewIn { from { opacity: 0; translate: 0 10px; } }
/* внутри раздела карточки сетки тоже всплывают по очереди: итоги, инфографика, площадки, люди в журнале */
.view.is-enter :is(.kpis, .igs, .club-grid, .jpeople, .charts, .mgrid) > * { animation: cardIn 0.4s var(--ease) both; }
.view.is-enter :is(.kpis, .igs, .club-grid, .jpeople, .charts, .mgrid) > :nth-child(1) { animation-delay: 0.05s; }
.view.is-enter :is(.kpis, .igs, .club-grid, .jpeople, .charts, .mgrid) > :nth-child(2) { animation-delay: 0.1s; }
.view.is-enter :is(.kpis, .igs, .club-grid, .jpeople, .charts, .mgrid) > :nth-child(3) { animation-delay: 0.15s; }
.view.is-enter :is(.kpis, .igs, .club-grid, .jpeople, .charts, .mgrid) > :nth-child(4) { animation-delay: 0.2s; }
.view.is-enter :is(.kpis, .igs, .club-grid, .jpeople, .charts, .mgrid) > :nth-child(5) { animation-delay: 0.25s; }
.view.is-enter :is(.kpis, .igs, .club-grid, .jpeople, .charts, .mgrid) > :nth-child(n + 6) { animation-delay: 0.3s; }
@keyframes cardIn { from { opacity: 0; translate: 0 14px; scale: 0.98; } }
/* инфографика: полосы вырастают от нуля при появлении, цифры в карточках досчитываются (см. countUp в crm.js) */
.ig__bar i, .kpi .bar i, .tbl--ov .bar i, .fnl__b i, .ig__l i, .ig__r i, .ig__stack i, .cb__col i, .rvch__col i { animation: grow 0.6s var(--ease) both; transform-origin: 0 50%; }
.ig__l i { transform-origin: 100% 50%; }
.cb__col i, .rvch__col i { transform-origin: 50% 100%; animation-name: growY; }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes growY { from { transform: scaleY(0); } }
.ig__bar i, .kpi .bar i, .tbl--ov .bar i, .fnl__b i { transition: width 0.5s var(--ease); }

/* ---------- раскладка: меню слева — белая панель, отступающая от краёв ---------- */
.side { position: fixed; inset: 16px auto 16px 16px; width: var(--side); display: flex; flex-direction: column; background: rgb(255 255 255 / 0.88); border-radius: 28px; box-shadow: var(--sh); z-index: 20; }
.side__top { padding: 18px 18px 14px; }
/* совместный логотип: знак Team Team × знак yūtone */
.lockup { display: flex; align-items: center; gap: 12px; }
/* знак yū чуть ближе к «×»: у «y» лёгкое начало слева, поэтому на глаз он стоял дальше, чем знак Team Team */
.lockup .madeby--mini { padding: 0; margin-left: -0.7px; color: var(--text); }
/* знак «×» нарисован, а не набран: у текстового символа своя высота строки, и он садился ниже логотипов */
.lockup__x { flex: none; width: 8px; height: 8px; stroke: var(--dim); stroke-width: 1.4; stroke-linecap: round; fill: none; }
.side__crm { white-space: nowrap; }
.side .side__crm { font-size: 11px; letter-spacing: 0.04em; }
.side .side__logo { gap: 9px; min-width: 0; }
.madeby--mini { padding: 4px 0; color: var(--text); }
/* знак yū вытянутый, поэтому по высоте меньше знака Team Team — так они выглядят равными; отступы до «×» с обеих сторон одинаковые */
.lockup .madeby--mini .yu { width: 40px; height: 19px; }
.madeby--mini:hover .yu, .madeby--mini:focus-visible .yu { color: var(--yu); }
.madeby--mini:hover, .madeby--mini:focus-visible { opacity: 1; }
.madeby--mini::after { display: none; }
.side__logo { display: flex; align-items: center; gap: 10px; }
.side__logo .mark { width: 28px; height: 25px; }
.side__logo { gap: 10px; }
/* «crm» по центру знака: у строчных нет выносных, поэтому строку чуть поднимаем, чтобы середина букв совпала с серединой знака */
.side__crm { display: block; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.06em; color: var(--acc-t); transform: translateY(var(--crm-shift, -1px)); }
.nav { flex: 1; overflow-y: auto; padding: 4px 10px 20px; scrollbar-width: thin; }
.nav::-webkit-scrollbar { width: 6px; }
.nav__find { display: block; width: calc(100% - 4px); max-width: none; margin: 10px 2px 2px; min-height: 38px; background-color: var(--field); box-shadow: none; }
/* заголовки разделов меню — чёрные и жирные, с линией сверху: сразу видно, где начинается новый раздел */
.nav__h { margin-top: 14px; padding: 14px 12px 6px; border-top: 1px solid var(--line-2); font-family: var(--font-d); font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.nav__find + .nav__h, .nav > .nav__h:first-child { margin-top: 4px; padding-top: 12px; border-top: 0; }
/* пункты меню: тонкие пилюли с зазором, чтобы выделенный пункт не касался соседей */
.nav__i { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; margin: 0 0 3px; padding: 0 12px; border-radius: var(--pill); color: var(--muted); font-size: 13px; font-weight: 500; text-align: left; }
.nav__i:hover { background: var(--hover); color: var(--text); }
.nav__i.is-on { background: var(--ink); color: var(--ink-t); font-weight: 600; }
.nav__i span { flex: 1; }
/* значки разделов — тот же набор и та же линия, что в нижней панели и на плитках главной */
.nav__i svg { flex: none; width: 16px; height: 16px; margin-left: -2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav__i.is-on svg { stroke: #FF9A5C; }
.nav__n { font-style: normal; font-size: 11.5px; color: var(--dim); }
.nav__i.is-on .nav__n { color: rgb(255 255 255 / 0.6); }
.nav__d { font-style: normal; font-size: 11.5px; font-variant-numeric: tabular-nums; margin-left: -2px; }
.nav__d.is-up { color: var(--green-t); } .nav__d.is-down { color: var(--red-t); }
.nav__i.is-on .nav__d.is-up { color: #7EE2B5; } .nav__i.is-on .nav__d.is-down { color: #FF9A9E; }
/* сколько игроков в составе — оранжевой плашкой, если не ноль */
.nav__n.is-on { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--pill); background: var(--acc-soft); color: var(--acc-t); font-weight: 600; font-variant-numeric: tabular-nums; }
.nav__i.is-on .nav__n.is-on { background: rgb(255 255 255 / 0.16); color: #fff; }
.badge { font-style: normal; font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--acc); color: var(--acc-ink); display: inline-grid; place-items: center; }
.side__foot { display: grid; gap: 10px; padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.side__out { justify-self: start; min-height: 24px; font-size: 11.5px; color: var(--dim); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.side__out:hover { color: var(--text); }
.side__me { display: flex; align-items: center; gap: 10px; min-width: 0; }
.side__me > span { min-width: 0; }
.side__me b { display: block; font-weight: 600; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.side__me small { display: block; margin-top: 2px; color: var(--dim); font-size: 11.5px; line-height: 1.35; }

/* отметка yūtone, вариант signal: на наведение под строкой бежит оранжевый импульс, как провод на yutone.xyz */
.madeby { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 3px 0 4px; color: var(--dim); font-size: 10.5px; letter-spacing: 0.06em; justify-self: start; transition: color 0.3s; }
.madeby .yu { width: 26px; height: 13px; color: currentColor; transition: color 0.3s; }
.madeby:hover, .madeby:focus-visible { color: var(--text); }
.madeby:hover .yu, .madeby:focus-visible .yu { color: var(--yu); }
.madeby::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--yu), transparent) no-repeat -40% 0 / 40% 100%; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.madeby:hover::after, .madeby:focus-visible::after { opacity: 1; animation: madeSignal 1.4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes madeSignal { to { background-position: 140% 0; } }

.view { margin-left: calc(var(--side) + 16px); padding: 32px 40px 60px; min-height: 100dvh; }
.view > * { max-width: 1240px; }
/* вход и загрузка — на весь экран, по центру: ограничение ширины рабочих экранов на них не действует */
body.is-out .view > * { max-width: none; }
.mtop, .shade { display: none; }
body.is-out .side, body.is-out .mtop { display: none; }
body.is-out .view, body.is-out.has-panel .view { margin: 0; padding: 0; }
.boot, .loading { display: grid; place-items: center; min-height: 60dvh; color: var(--acc-t); font-size: 13px; font-weight: 500; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

/* ---------- заголовок страницы ---------- */
.sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.title { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.sec__meta { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.sec__meta b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.sec__meta i { font-style: normal; margin-left: -8px; } /* запятая прижата к значению перед ней */
.sec__meta .is-alert, .sec__meta .is-alert b { color: var(--acc-t); }
.sec__btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* сводка пунктами: у каждого пункта своя цветная точка */
.stats { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.stat { display: inline-flex; align-items: center; gap: 8px; }
.stat::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bc, var(--text)); }
.stat b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.stat[data-k='active'] { --bc: var(--s-paid); } .stat[data-k='pause'] { --bc: var(--s-trial); } .stat[data-k='injury'] { --bc: var(--s-noanswer); }
.stat[data-k='nokit'] { --bc: var(--acc); } .stat[data-k='check'] { --bc: var(--dim); } .stat[data-k='fee'] { --bc: var(--s-work); }

/* ---------- страница состава ---------- */
.sec__sub { margin-top: 6px; font-size: 13px; color: var(--muted); }
.squads.squads--m { display: none; }
.btn--s { min-height: 30px; padding: 0 12px; font-size: 12.5px; }
.link.danger { color: var(--red-t); text-decoration-color: rgb(229 72 77 / 0.4); }
.link.danger:hover { color: var(--s-noanswer); }
/* в строке кнопок «опасные» ссылки — без верхнего отступа, по одной линии с остальными */
.kv__btns .link.danger { margin-top: 0; }
.kv__btns { align-items: center; }
.btn--red, .btn-ghost.btn--red { border-color: rgb(229 72 77 / 0.45); color: var(--red-t); }
.btn--red:hover, .btn-ghost.btn--red:hover { border-color: var(--s-noanswer); background: var(--red-soft); color: var(--red-t); }
.btn--orange { border-color: var(--acc-line); color: var(--acc-t); }
.btn--orange:hover { border-color: var(--acc); background: var(--acc-soft); }
.faq__ebtns { display: flex; flex-wrap: wrap; gap: 8px; }
.faq__ebtns > .btn-sm, .faq__ebtns > .btn-ghost { min-height: 30px; height: 30px; padding: 0 12px; font-size: 12.5px; }
.faq__ebtns .btn--red { border-color: rgb(229 72 77 / 0.45); color: var(--red-t); }
.faq__ebtns .btn--red:hover { border-color: var(--s-noanswer); background: var(--red-soft); }
.faq__ebtns .btn--orange { border-color: var(--acc-line); color: var(--acc-t); }
.faq__ebtns .btn--orange:hover { border-color: var(--acc); background: var(--acc-soft); }

/* месяц: переключатель, взнос состава, закрытие */
.month { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding: 10px 14px 10px 10px; margin-bottom: 14px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.month.is-locked { box-shadow: inset 0 0 0 1px var(--line-2); background: transparent; }
.month.is-fixing { box-shadow: var(--sh), inset 0 0 0 1px rgb(224 161 6 / 0.5); }
.month__nav { display: flex; align-items: center; gap: 6px; }
.month__nav .icon-btn:disabled { opacity: 0.25; cursor: default; }
.month__nav .icon-btn:disabled:hover { background: none; }
.month__t { display: grid; gap: 1px; min-width: 150px; text-align: center; }
.month__t b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.month__badge { font-size: 11.5px; font-weight: 500; color: var(--green-t); }
.month.is-locked .month__badge { color: var(--dim); }
.month.is-fixing .month__badge { color: var(--amber-t); }
.p-note { margin: 4px 0 12px; font-size: 12.5px; color: var(--muted); }
.sqb__spon { align-self: center; font-size: 12.5px; color: var(--green-t); }
.month.is-next { box-shadow: var(--sh), inset 0 0 0 1px rgb(59 111 224 / 0.4); }
.month.is-next .month__badge { color: var(--blue-t); }
.ask { margin: -4px 0 14px; padding: 14px 16px; border-radius: var(--r); background: var(--red-soft); }
.ask h3 { font-size: 14.5px; font-weight: 600; color: var(--text); }
.ask ul { margin: 8px 0 12px; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.ask__loss { color: var(--red-t); }
.ask__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn--danger { background: var(--s-noanswer); border-color: var(--s-noanswer); color: #fff; }
.btn--danger:hover { background: #D73C41; border-color: #D73C41; }
.next-note { margin: -4px 0 14px; padding: 10px 14px; border-radius: var(--r-s); font-size: 13px; line-height: 1.5; color: var(--blue-t); background: var(--blue-soft); }
.month__act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.month .sqb__fee { margin-left: auto; }
.warn, .lock { margin: -4px 0 14px; padding: 10px 14px; border-radius: var(--r-s); font-size: 13px; line-height: 1.5; }
.warn { color: var(--amber-t); background: var(--amber-soft); }
.lock { color: var(--muted); border: 1px dashed var(--line-3); }

/* фильтры: два блока — игроки и форма */
.fgroups { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-bottom: 12px; }
.fgroup { min-width: 0; }
.fgroup__h { margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--dim); }
.seg2 { display: flex; flex-wrap: wrap; gap: 6px; }
.seg2__b { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 13px; font-size: 12.5px; color: var(--muted); background: var(--bg-2); border: 1px solid transparent; border-radius: var(--pill); box-shadow: var(--sh); transition: background 0.15s, color 0.15s, border-color 0.15s; }
.seg2__b::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--fc, var(--text)); flex: none; }
.seg2__b b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.seg2__b:hover { color: var(--text); border-color: var(--line-2); }
.seg2__b[aria-pressed='true'] { background: var(--ink); color: var(--ink-t); box-shadow: none; }
.seg2__b[aria-pressed='true'] b { color: var(--ink-t); }
/* точка без своего цвета на выбранной (чернильной) кнопке — цвета текста кнопки, иначе сливается с фоном */
.seg2__b[aria-pressed='true']:not([data-k])::before { background: var(--ink-t); }
.seg2__b[data-k='active'] { --fc: var(--s-paid); } .seg2__b[data-k='pause'] { --fc: var(--s-trial); } .seg2__b[data-k='injury'] { --fc: var(--s-came); }
.seg2__b[data-k='left'] { --fc: var(--s-noanswer); color: var(--red-t); }
.seg2__b[data-k='left'][aria-pressed='true'] { background: var(--s-noanswer); border-color: var(--s-noanswer); color: #fff; } .seg2__b[data-k='left'][aria-pressed='true'] b { color: #fff; }
.seg2__b[data-k='kit-has'] { --fc: var(--s-paid); } .seg2__b[data-k='kit-unknown'] { --fc: var(--dim); } .seg2__b[data-k='kit-none'] { --fc: var(--acc); }
.seg2__b[data-k='pay-paid'] { --fc: var(--s-paid); } .seg2__b[data-k='pay-unpaid'] { --fc: var(--acc); } .seg2__b[data-k='pay-defer'] { --fc: var(--s-trial); }
.seg2__b[data-k='pay-late'] { --fc: var(--s-noanswer); } .seg2__b[data-k='pay-own'] { --fc: var(--s-work); } .seg2__b[data-k='pay-free'] { --fc: var(--dim); }
.tools__n { font-size: 12.5px; color: var(--dim); }

/* ушедший игрок — красная строка: её нужно убрать из состава */
.tbl tr[data-s='left'] td { background: rgb(229 72 77 / 0.05); }
.tbl tr[data-s='left'] td:first-child { box-shadow: inset 3px 0 0 var(--s-noanswer); }
.tbl--edit tr[data-s='left'] .cell { color: var(--red-t); }
.list > li:has(.st[data-s='left']) { background: rgb(229 72 77 / 0.05); box-shadow: inset 3px 0 0 var(--s-noanswer); }
.tbl--edit.is-locked .cell, .tbl--edit.is-locked select { cursor: default; }
.tbl--edit.is-locked .cell:hover { box-shadow: none; }
.cell.cell--ro { display: flex; align-items: center; }
.cell.cell--ro.cell--fee { justify-content: flex-end; }
.cell--fee.is-free { color: var(--green-t); font-weight: 600; }
.w-pay { width: 214px; min-width: 214px; padding: 0 10px !important; white-space: nowrap; }
/* подпись у галочки — постоянной ширины под «оплачено», чтобы столбец не прыгал при нажатии */
.pay span { display: inline-block; min-width: 9ch; }
.pay { display: inline-flex; align-items: center; min-height: 24px; gap: 7px; cursor: pointer; font-size: 12.5px; color: var(--dim); }
.pay input { width: 17px; height: 17px; accent-color: var(--s-paid); cursor: pointer; }
.pay input:checked + span { color: var(--green-t); }
/* оплата в таблице: галочка + отсрочка с календарём */
.payc { display: flex; align-items: center; gap: 8px; }
.payc .pay span { min-width: 8ch; }
.defer { position: relative; display: inline-flex; align-items: center; }
.defer__b { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 1px dashed var(--line-3); border-radius: var(--pill); font-size: 11.5px; color: var(--muted); white-space: nowrap; transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background-color 0.18s var(--ease); }
.defer__b svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.defer__b:hover { border-color: var(--s-trial); color: var(--amber-t); }
.defer.is-set .defer__b { border-style: solid; border-color: transparent; background: var(--amber-soft); color: var(--amber-t); }
.defer.is-late .defer__b { border-style: solid; border-color: transparent; background: var(--red-soft); color: var(--red-t); }
.defer__x { display: grid; place-items: center; width: 20px; height: 24px; margin-left: 2px; border-radius: 6px; color: var(--dim); font-size: 14px; }
.defer__x:hover { color: var(--text); background: var(--hover); }
.defer__in { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.defer--big .defer__b { height: 34px; padding: 0 14px; font-size: 12.5px; }
.paydefer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; font-size: 12.5px; color: var(--dim); }
.paybtn + .paydefer { margin-top: 10px; }
.kpi__def { display: block; margin-top: 4px; font-weight: 600; color: var(--amber-t); }
.kpi__def.is-late { color: var(--red-t); }
.kpi__hint { display: block; margin-top: 4px; color: var(--acc-t); }
.ovx__ppl li > b.is-def { color: var(--amber-t); }
.pay input:disabled { cursor: default; }
.free { font-size: 12.5px; color: var(--green-t); }
.is-paid { color: var(--green-t); }
.paybtn { width: 100%; min-height: 42px; margin-top: 16px; border-radius: var(--pill); border: 1px solid var(--s-paid); color: var(--green-t); font-size: 13px; font-weight: 600; }
.paybtn:hover { background: var(--green-soft); }
.paybtn.is-on { background: var(--s-paid); color: #fff; }
.paybtn:disabled { opacity: 0.6; cursor: default; }

/* итоги месяца — карточки с крупной цифрой */
.sum-h { margin: 34px 0 12px; }
.view { container-type: inline-size; }
/* итоги: колонок столько, сколько помещается без переноса слов — 6 в ряд, 3 × 2 или 2 × 3 */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container (min-width: 620px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1180px) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi { display: block; padding: 16px 18px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); text-align: left; }
.kpi dt { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.kpi dd { margin-top: 8px; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi p { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.kpi--main { background: var(--p-lilac); box-shadow: none; color: var(--text); }
.kpi--main dt, .kpi--main p { color: rgb(26 25 23 / 0.62); }
.kpi--main dd { color: var(--text); }
.kpi--main .kpi__left, .kpi--main .kpi__more, .kpi--main .kpi__hint, .kpi--main p b { color: var(--text); }
.kpi--got { background: var(--p-mint); box-shadow: none; }
.kpi--warn { background: var(--p-peach); box-shadow: none; }
.kpi--got dd { color: var(--text); }
/* «осталось собрать» — отдельной строкой и заметнее остальной подписи */
.kpi__left { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--amber-t); font-variant-numeric: tabular-nums; }
.kpi--warn dd { color: var(--text); }
.kpi--btn { cursor: pointer; }
.kpi--btn:hover { box-shadow: var(--sh-2); }
.kpi--btn.is-on { box-shadow: var(--sh), inset 0 0 0 2px var(--acc); }
.kpi .bar { display: block; height: 6px; margin-bottom: 8px; border-radius: var(--pill); background: var(--panel-2); overflow: hidden; }
.kpi .bar i { display: block; height: 100%; border-radius: var(--pill); background: var(--s-paid); }
.kpi--main .bar, .kpi--got .bar, .kpi--warn .bar { background: rgb(255 255 255 / 0.55); }

/* динамика по месяцам */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.chart { margin: 0; padding: 16px 18px 12px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); min-width: 0; }
.chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.chart figcaption b { font-weight: 600; color: var(--text); }
.cbars { display: flex; align-items: flex-end; gap: 8px; height: 170px; padding-top: 4px; }
.cb { flex: 1 1 0; max-width: 72px; height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; gap: 4px; min-width: 0; }
.cb__v { font-size: 11.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cb__col { position: relative; width: 100%; max-width: 44px; }
.cb__col i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 8px 8px 4px 4px; }
.cb__l { font-size: 11.5px; color: var(--dim); }
.cb__d { display: flex; gap: 6px; min-height: 15px; font-size: 11.5px; }
.cb__d b { font-weight: 600; }
.cb.is-on .cb__v, .cb.is-on .cb__l { color: var(--text); }
.cb.is-on .cb__col { box-shadow: 0 0 0 2px var(--acc); border-radius: 8px 8px 4px 4px; }
.lg b { font-weight: 600; margin-left: 4px; }
.lg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dim); }
.lg i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-left: 4px; }
.lg-plan { background: var(--line-2); } .lg-got { background: var(--s-paid); } .lg-in { background: var(--s-work); } .lg-out { background: var(--s-noanswer); }
.c-plan { background: var(--line-2); } .c-got { background: var(--s-paid); } .c-in { background: var(--s-work); }
.cb.is-on .c-plan { background: var(--line-3); }
.lg .up, .cb__d .up { color: var(--green-t); } .lg .down, .cb__d .down { color: var(--red-t); }
.cmp { list-style: none; display: grid; }
.cmp li { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 12.5px; border-top: 1px solid var(--line); }
.cmp li:first-child { border-top: 0; }
.cmp span { color: var(--muted); }
.cmp b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmp b + b { min-width: 74px; text-align: right; color: var(--dim); }
.cmp .up { color: var(--green-t) !important; } .cmp .down { color: var(--red-t) !important; }
.cmp-none { font-size: 12.5px; line-height: 1.55; }

/* документы месяца */
.docs { border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); overflow: hidden; }
.docs__list { list-style: none; }
.docs__list li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.doc-ic { flex: none; display: grid; place-items: center; width: 42px; height: 28px; border-radius: 8px; background: var(--acc-soft); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--acc-t); }
.docs__t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.docs__t a { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.docs__t small { display: block; font-size: 11.5px; color: var(--dim); }
.docs__drop { display: grid; gap: 2px; justify-items: center; margin: 12px 16px 0; padding: 18px; border: 1px dashed var(--line-3); border-radius: var(--r-s); text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.docs__drop b { font-weight: 600; color: var(--acc-t); }
.docs__drop small { font-size: 12px; color: var(--dim); }
.docs__drop:hover, .docs__drop.is-over { border-color: var(--acc); background: var(--acc-soft); }
.docs__drop:focus-within { outline: 1px solid var(--acc); outline-offset: 2px; }
.docs__list li .btn--s { flex: none; }
.docs__add { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; padding: 12px 16px 16px; }
.docs__add input { min-height: 38px; padding: 0 14px; background: var(--field); border: 1px solid transparent; border-radius: var(--pill); font-size: 13px; min-width: 0; }
.docs__add input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }

/* ---------- блок состава: шапка с взносом, таблица, итог ---------- */
.sqb { margin-bottom: 28px; }
.sqb__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 10px; }
.sqb__t { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.sqb__t b { margin-left: 6px; font-weight: 400; font-size: 12.5px; color: var(--dim); }
.sqb__s { margin-top: 2px; font-size: 12.5px; color: var(--dim); }
.sqb__fee { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; color: var(--dim); }
.fee-in { display: inline-flex; align-items: center; min-height: 36px; padding-left: 4px; border: 1px solid transparent; border-radius: var(--pill); background: var(--field); text-transform: none; letter-spacing: 0; }
.fee-in:focus-within { border-color: var(--acc); background: #fff; }
.fee-in input { width: 86px; min-height: 32px; padding: 0 4px 0 10px; background: none; border: 0; outline: none; font-size: 13.5px; font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.fee-in i { font-style: normal; padding-right: 10px; font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.sqb__empty { padding: 18px 16px; border: 1px dashed var(--line-3); border-radius: var(--r); color: var(--dim); font-size: 13px; }
.sqb__foot { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 8px; padding: 12px 16px; border-radius: var(--r-s); background: var(--bg-2); box-shadow: var(--sh); font-size: 13px; color: var(--muted); }
.sqb__foot b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.sqb .list { margin-bottom: 0; }
.is-own { color: var(--acc-t); }

/* ---------- кнопки и поля ---------- */
.btn, .btn-ghost, .btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: var(--pill); border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.btn { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); box-shadow: 0 4px 12px rgb(26 25 23 / 0.14); }
.btn:hover { background: #FF7A2E; border-color: #FF7A2E; box-shadow: 0 4px 12px rgb(26 25 23 / 0.14); }
.btn-ghost { background: var(--bg-2); }
.btn-ghost:hover { background: var(--hover); border-color: var(--line-3); }
.btn-sm { min-height: 32px; padding: 0 14px; font-size: 12.5px; background: var(--ink); border-color: var(--ink); color: var(--ink-t); }
.btn-sm:hover { background: #2E2C29; border-color: #2E2C29; }
/* малый размер — один для всех видов кнопок (раньше общий стиль перебивал его у кнопок в рамке) */
.btn.btn--s, .btn-ghost.btn--s, .btn-sm.btn--s { min-height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn--text { border-color: transparent; background: none; color: var(--dim); padding: 0 6px; min-height: 28px; font-size: 12.5px; box-shadow: none; }
.btn--text:hover { color: var(--text); }
/* три уровня действий: основное — оранжевая кнопка; обычное — белая в рамке (.btn-ghost); удаление — красная рамка (.btn--red).
   Текстовая ссылка (.link) — только «Отмена», «Сбросить», «Свернуть»: подчёркнута, чтобы было видно, что она нажимается */
.link { display: inline-flex; align-items: center; min-height: 24px; font-size: 12.5px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.link:hover { color: var(--text); text-decoration-color: var(--text); }
.take { flex: none; align-self: center; min-height: 30px; padding: 0 12px; border-radius: var(--pill); border: 1px solid var(--acc-line); color: var(--acc-t); font-size: 12.5px; font-weight: 600; transition: background 0.15s, color 0.15s; }
.take:hover { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.go { align-self: center; font-size: 12.5px; color: var(--acc-t); }
.icon-btn { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--hover); }
.icon-btn svg { width: 18px; height: 18px; stroke: var(--text); stroke-width: 1.8; fill: none; }

.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.tools__add { margin-left: auto; }
.search { flex: 1 1 260px; max-width: 400px; min-height: 38px; padding: 0 14px 0 38px; background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375716C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E") no-repeat 13px 50% / 16px; border: 1px solid transparent; border-radius: var(--pill); box-shadow: var(--sh); font-size: 13px; }
.search:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.search::placeholder { color: var(--dim); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 13px; border-radius: var(--pill); border: 1px solid transparent; background: var(--bg-2); box-shadow: var(--sh); font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: border-color 0.15s, color 0.15s; }
.chip b { font-weight: 500; color: var(--dim); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--line-2); color: var(--text); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--ink-t); box-shadow: none; }
.chip.is-on b { color: rgb(255 255 255 / 0.65); }

/* ---------- плашка «Скопировать» у текста: значок + слово; после нажатия — галочка и «Скопировано» ---------- */
.copy { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 26px; padding: 0 10px 0 8px; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--bg-2); color: var(--muted); font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: middle; }
.copy:hover { color: var(--text); border-color: var(--line-3); background: var(--hover); }
.copy svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.copy .copy__ck, .copy .copy__ok { display: none; }
.copy.is-done { color: var(--green-t); border-color: transparent; background: var(--green-soft); animation: pop 0.3s cubic-bezier(0.34, 1.4, 0.64, 1); }
@keyframes pop { 50% { scale: 1.06; } }
.copy.is-done .copy__cp, .copy.is-done .copy__l { display: none; }
.copy.is-done .copy__ck, .copy.is-done .copy__ok { display: inline; }
.copy.is-done .copy__ck { display: block; }
/* блок текста с плашкой в правом верхнем углу — текст не заходит под неё */
.copyable { position: relative; padding-right: 128px; }
.copyable > .copy { position: absolute; top: 10px; right: 10px; }
.faq__a.copyable { padding-right: 120px; }
/* готовый текст для чата: кнопка «Скопировать» — под текстом слева, вровень с ним, без пустой полосы сверху */
.chat-text.copyable { padding: 18px 20px 56px; }
.chat-text.copyable > .copy { top: auto; right: auto; bottom: 16px; left: 20px; }
.club-addr__a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.club-copy .copy { height: 30px; padding: 0 12px 0 10px; font-size: 12px; }

/* ---------- статусы, люди ---------- */
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.st::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sc, var(--dim)); }
[data-s='video'] { --sc: var(--s-work); } [data-s='new'] { --sc: var(--s-new); } [data-s='work'] { --sc: var(--s-work); } [data-s='noanswer'] { --sc: var(--s-noanswer); }
[data-s='trial'] { --sc: var(--s-trial); } [data-s='came'] { --sc: var(--s-came); } [data-s='paid'] { --sc: var(--s-paid); } [data-s='lost'] { --sc: var(--s-lost); }
[data-s='active'] { --sc: var(--s-paid); } [data-s='pause'] { --sc: var(--s-trial); } [data-s='injury'] { --sc: var(--s-came); } [data-s='left'] { --sc: var(--s-noanswer); }
.st[data-s='new'] { color: var(--text); font-weight: 500; }
.who { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ava { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 9px/1 var(--font); color: #fff; }
.ava--lg { width: 32px; height: 32px; font-size: 11.5px; }
.ava--free { background: transparent !important; border: 1px dashed var(--line-3); color: var(--dim); }

/* ---------- списки (телефон) ---------- */
.list { list-style: none; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); margin-bottom: 22px; overflow: hidden; }
.list > li + li { border-top: 1px solid var(--line); }
.list > li:hover { background: var(--hover); }
.row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; text-align: left; }
.row.is-new::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acc); }
.row__main { flex: 1; min-width: 0; display: block; text-align: left; }
.row__title { display: block; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; font-size: 12px; color: var(--dim); }
.group-h { font-size: 12.5px; color: var(--dim); font-weight: 500; margin: 0 0 8px; }
.group-h b { color: var(--muted); font-weight: 600; margin-left: 6px; }
.empty { display: grid; justify-items: center; gap: 12px; padding: 56px 24px; text-align: center; color: var(--dim); border: 1px dashed var(--line-3); border-radius: var(--r); }
.empty img { width: 30px; height: 27px; opacity: 0.35; }
.more { width: 100%; min-height: 42px; color: var(--muted); font-size: 13px; font-weight: 500; border: 1px dashed var(--line-3); border-radius: var(--pill); }
.more:hover { color: var(--text); border-color: var(--line-3); background: var(--bg-2); }

/* ---------- таблица ---------- */
.tbl-wrap { overflow: auto; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); max-height: calc(100dvh - 210px); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-2); box-shadow: 0 1px 0 var(--line-2); text-align: left; font-size: 12px; font-weight: 500; color: var(--dim); padding: 12px 14px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover { background: var(--hover); }
.tbl tbody tr.is-open { background: var(--acc-soft); }
.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.is-new td:first-child { color: var(--acc-t); box-shadow: inset 3px 0 0 var(--acc); }
.cell-name { padding-block: 2px; font-weight: 600; text-align: left; }
.cell-name:hover { color: var(--acc-t); }
.notes { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 6px; border-radius: var(--pill); background: var(--panel-2); font-size: 11px; font-weight: 600; color: var(--muted); vertical-align: 1px; }
/* статус в строке — выпадающий список с цветной точкой */
.st-select { position: relative; display: inline-flex; align-items: center; }
.st-select::before { content: ''; position: absolute; left: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--sc); pointer-events: none; }
.st-select select { appearance: none; -webkit-appearance: none; padding: 6px 26px 6px 23px; border: 1px solid transparent; border-radius: var(--pill); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375716C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 7px center / 14px; font-size: 13px; cursor: pointer; }
.st-select select:hover, .st-select select:focus { border-color: var(--line-2); outline: none; background-color: var(--bg-2); }
.tbl select option, .cell option { background: var(--panel); color: var(--text); }

/* таблица составов — как Google Таблица: правка прямо в ячейке, тонкие вертикальные линии */
.tbl--edit td { padding: 0; border-right: 1px solid var(--line); }
.tbl--edit td:last-child, .tbl--edit thead th:last-child { border-right: 0; }
.tbl--edit thead th { padding: 0; border-right: 1px solid var(--line); }
.tbl--edit tbody tr { cursor: default; }
.tbl--edit .st-select { padding: 0 6px; }
.tbl .grp td { padding: 18px 14px 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--panel-2); border-right: 0; }
.tbl .grp:hover { background: none; }
.tbl .grp b { margin-left: 8px; font-weight: 400; color: var(--dim); letter-spacing: 0; }
.sort { display: inline-flex; align-items: center; gap: 4px; width: 100%; padding: 12px 14px; font-size: 12px; font-weight: 500; color: var(--dim); white-space: nowrap; }
.sort:hover, .sort.is-on { color: var(--text); }
.sort i { font-style: normal; color: var(--acc-t); }
.tbl--edit thead th.w-num, .tbl--edit thead th.w-c { padding: 12px 14px; }
.w-num, .tbl thead th.w-num { width: 44px; text-align: center; } /* «№» в шапке — по центру, над цифрами */
.w-c { width: 56px; }
.rownum { width: 100%; min-height: 40px; color: var(--dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rownum:hover { color: var(--acc-t); }
.cell { display: block; width: 100%; min-width: 64px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; font-size: 13px; }
.cell::placeholder, .cell.is-empty { color: var(--dim); }
.cell:hover { box-shadow: inset 0 0 0 1px var(--line-3); }
.cell:focus { outline: none; box-shadow: inset 0 0 0 2px var(--acc); background: #fff; }
select.cell { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375716C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 8px center / 13px; }
.cell--name { min-width: 120px; font-weight: 600; }
.cell--first { min-width: 100px; }
.cell--first { min-width: 120px; }
.cell--num { width: 70px; font-variant-numeric: tabular-nums; }
.cell--size { min-width: 112px; }
.cell--kit { min-width: 190px; }
.cell--fee { width: 104px; text-align: right; font-variant-numeric: tabular-nums; }
.cell--fee.is-own { color: var(--acc-t); font-weight: 600; }
.tbl--edit tr[data-s='left'] .cell { color: var(--dim); }
.tbl--edit thead th.w-num, .tbl--edit thead th.w-c { padding: 12px 6px; }
.open-p { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; width: 100%; min-height: 40px; padding: 0 10px; color: var(--dim); }
.open-p svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }
.open-p .notes { margin: 0; }
.open-p:hover { color: var(--acc-t); }
/* вкладки составов — сегментный переключатель в белой пилюле, активная вкладка тёмная */
.squads { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: -6px 0 20px; padding: 4px; border-radius: 22px; background: var(--bg-2); box-shadow: var(--sh); }
.sq { position: relative; min-height: 34px; padding: 6px 14px; border-radius: var(--pill); color: var(--muted); white-space: nowrap; font-size: 13px; font-weight: 500; }
.sq b { font-weight: 400; color: var(--dim); margin-left: 4px; }
.sq:hover { color: var(--text); background: var(--hover); }
.sq.is-on { color: var(--ink-t); background: var(--ink); }
.sq.is-on b { color: rgb(255 255 255 / 0.65); }
.sq--add { color: var(--acc-t); }
.jersey { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--panel-2); font-family: var(--font-d); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.jersey.is-empty { color: var(--dim); font-weight: 400; background: transparent; border: 1px dashed var(--line-3); }

/* ---------- панель карточки: справа, таблица остаётся видна ---------- */
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--pw); z-index: 40; pointer-events: none; }
.panel__shade { display: none; }
.panel__box { position: absolute; inset: 16px 16px 16px 0; overflow-y: auto; overscroll-behavior: contain; background: var(--bg-2); border-radius: 28px; box-shadow: var(--sh-2); pointer-events: auto; opacity: 0; translate: 30px 0; transition: translate 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.15s cubic-bezier(0.4, 0, 1, 1); }
.panel.is-on .panel__box { opacity: 1; translate: 0 0; transition: translate 0.32s var(--ease), opacity 0.22s ease-out; }
.panel__x { position: absolute; top: 14px; right: 14px; z-index: 1; background: var(--panel-2); }
.panel__body { padding: 26px 26px 40px; }
body.has-panel .view { padding-right: calc(var(--pw) + 40px); }
/* таблица не помещается — второстепенные столбцы прячутся по очереди (см. fitTables в crm.js) */
.tbl.hide-p1 .p1, .tbl.hide-p2 .p2, .tbl.hide-p3 .p3 { display: none; }
.p-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 12px; color: var(--dim); margin: 0 40px 10px 0; }
.p-title { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; margin-right: 36px; overflow-wrap: anywhere; }
.p-sub { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.p-h { display: block; margin: 26px 0 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.p-h small { font-size: 12px; font-weight: 400; color: var(--dim); margin-left: 6px; }
.p-src { margin-top: 20px; font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.owner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-s); background: var(--panel-2); margin-top: 18px; }
.owner > div { flex: 1; min-width: 0; }
.owner small { display: block; font-size: 11.5px; color: var(--dim); }
.owner b { font-weight: 600; }
.owner > div > span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.st-btn { display: flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: var(--pill); border: 1px solid var(--line-2); font-size: 12.5px; color: var(--muted); text-align: left; transition: border-color 0.15s, color 0.15s; }
.st-btn:hover { border-color: var(--line-3); color: var(--text); background: var(--hover); }
.st-btn .st { font-size: 12.5px; }
.st-btn.is-on { background: var(--ink); border-color: var(--ink); color: var(--ink-t); font-weight: 600; }
.st-btn.is-on .st { color: var(--ink-t); }
.pass { display: flex; flex-wrap: wrap; gap: 6px; }
.pass .chip { padding-left: 6px; }
.note { margin-bottom: 6px; padding: 10px 12px; border-radius: var(--r-s); background: var(--panel-2); }
.note small { display: block; font-size: 11.5px; color: var(--dim); margin-bottom: 4px; }
.note p { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-form { display: flex; gap: 8px; align-items: flex-end; }
.note-form textarea, .kv textarea, .kv input, .kv select, .form input, .form select { width: 100%; min-height: 40px; padding: 9px 14px; background: var(--field); border: 1px solid transparent; border-radius: 20px; font-size: 13px; color-scheme: light; }
.note-form textarea { min-height: 44px; resize: vertical; line-height: 1.55; }
.note-form textarea:focus, .kv textarea:focus, .kv input:focus, .kv select:focus, .form input:focus, .form select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); background: #fff; }
.note-form textarea::placeholder { color: var(--dim); }
.send { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); box-shadow: 0 4px 12px rgb(26 25 23 / 0.14); }
.send svg { width: 16px; height: 16px; stroke: var(--acc-ink); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kvs { border-radius: var(--r-s); background: var(--panel-2); overflow: hidden; }
.kvs > * + * { border-top: 1px solid var(--bg-2); }
.kv { position: relative; display: grid; grid-template-columns: 130px 1fr 14px; align-items: baseline; gap: 12px; width: 100%; padding: 10px 14px; text-align: left; font-size: 13px; }
.kv > span { color: var(--dim); font-size: 12.5px; }
.kv b { font-weight: 500; overflow-wrap: anywhere; }
.kv .pen { width: 13px; height: 13px; stroke: var(--dim); stroke-width: 1.8; fill: none; opacity: 0.45; align-self: center; transition: opacity 0.15s, stroke 0.15s; }
button.kv:hover { background: var(--hover); }
button.kv:hover .pen, .in-tg .kv .pen { opacity: 1; stroke: var(--acc-t); }
.kv__hint { display: block; margin-top: 2px; font-size: 11.5px; color: var(--dim); }
.kv--ro { grid-template-columns: 130px 1fr; }
.kv.is-edit { grid-template-columns: 1fr; gap: 8px; }
.kv__btns { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.hist { list-style: none; padding-left: 14px; border-left: 2px solid var(--line-2); display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }
.hist .mono { color: var(--dim); margin-right: 8px; }
.form { display: grid; gap: 14px; margin-top: 20px; }
.form label { display: grid; gap: 6px; }
.form label > span { font-size: 12px; font-weight: 500; color: var(--dim); }
.form label small { font-weight: 400; font-size: 11.5px; margin-left: 6px; }
.form select { appearance: none; padding-right: 30px; background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375716C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 13px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.form .btn { margin-top: 4px; min-height: 40px; }

/* ---------- вход ---------- */
.gate { min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 28px; padding: 24px 16px; }
.gate__card { width: min(460px, 100%); border-radius: 24px; padding: 30px; background: var(--bg-2); box-shadow: var(--sh-2); }
.gate__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.gate__logo .mark { width: 28px; height: 25px; }
.gate__card h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; }
.gate__card p { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.gate__card .list { margin: 0; box-shadow: none; }
.gate__q { width: 100%; margin-bottom: 8px; }
.gate__bot { width: 100%; justify-content: center; }
.gate__list { display: grid; }
.gate__list .row { padding: 10px 12px; margin: 0 -12px; width: calc(100% + 24px); border-radius: var(--r-s); }
.gate__list .row:hover, .gate__list .row:focus-visible { background: var(--hover); }
.gate__list .row { box-shadow: none; }
.gate__list .row + .row { border-top: 1px solid var(--line); }
.gate__list .row:hover + .row, .gate__list .row:hover { border-top-color: transparent; }
.gate__none { padding: 16px 0; color: var(--dim); font-size: 13px; }
.gate__h { margin: 14px 0 4px; font-size: 12px; font-weight: 500; color: var(--dim); }
.team__h { padding: 14px 14px 6px; font-size: 12px; font-weight: 500; color: var(--dim); border-bottom: 1px solid var(--line); }
.gate .madeby { margin: 0; justify-self: center; }

/* left: 50% даёт блоку только половину ширины экрана — ширина по тексту, но не шире экрана без полей: одна-две тонкие строки */
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); translate: -50% 0; z-index: 60; width: max-content; max-width: min(560px, calc(100vw - 32px)); background: var(--ink); color: var(--ink-t); padding: 9px 16px; border-radius: 18px; font-size: 13px; line-height: 1.35; font-weight: 500; text-align: center; text-wrap: balance; box-shadow: var(--sh-2); animation: up 0.3s var(--ease); }
.toast.is-err { background: var(--s-noanswer); color: #fff; }
.toast.is-out { animation: toastOut 0.18s cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes up { from { translate: -50% 12px; opacity: 0; } }
@keyframes toastOut { to { translate: -50% -8px; opacity: 0; } }

/* ---------- телефон и Telegram ---------- */
/* ---------- администратор: статистика составов ---------- */
.tbl--ov td { vertical-align: middle; }
.tbl--ov small { font-size: 11.5px; }
.tbl--ov tfoot td { border-top: 1px solid var(--line-3); font-weight: 600; color: var(--text); }
.ov-name { padding-block: 2px; font-weight: 600; color: var(--text); text-align: left; }
.ov-name:hover { color: var(--acc-t); }
.ov-got { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tbl--ov .bar { display: block; height: 5px; margin-top: 6px; border-radius: var(--pill); background: var(--panel-2); overflow: hidden; min-width: 80px; }
.tbl--ov .bar i { display: block; height: 100%; border-radius: var(--pill); background: var(--s-paid); }
.ov-warn { color: var(--acc-t); }
.ov-month { align-items: center; }
.ov-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); }
.ov-pick select { min-height: 34px; padding: 0 12px; background: var(--bg-2); border: 1px solid transparent; box-shadow: var(--sh); border-radius: var(--pill); font-size: 13px; color: var(--text); }
.ov-none td { background: none; }
.ov-total { display: grid; gap: 4px; margin: 28px 0 8px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--text); }
.ov-total b { color: var(--acc-t); font-weight: 700; }
.ov-total small { font-size: 12.5px; color: var(--muted); }
.ov-total small.dim { color: var(--dim); }
.ov-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -4px 0 14px; padding: 10px 14px; border: 1px dashed var(--line-3); border-radius: var(--r-s); }
.ov-plan .fee-in input { width: 120px; }
.kpi p b.up { color: var(--green-t); font-weight: 600; } .kpi p b.down { color: var(--red-t); font-weight: 600; }
.ov-flag { margin: -4px 0 12px; font-size: 13px; color: var(--muted); }
.tbl--ov .up { color: var(--green-t); font-weight: 400; } .tbl--ov .down { color: var(--red-t); font-weight: 400; }
.tbl--ov tbody tr { cursor: default; }
/* ---------- команда ---------- */
.lead-end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.lead-end .link.danger { margin-top: 0; }
.lead-end p { flex-basis: 100%; font-size: 12px; color: var(--dim); }
.chip[data-filter='arch'] { margin-left: auto; }
.team-note { margin: -8px 0 16px; max-width: 760px; font-size: 13px; color: var(--muted); }
.team-add { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin-bottom: 16px; }
.team-add input, .team-add select, .team__i input, .team__i select { min-height: 38px; min-width: 0; padding: 0 14px; background: var(--field); border: 1px solid transparent; border-radius: var(--pill); font-size: 13px; }
.team-add input:focus, .team-add select:focus, .team__i input:focus, .team__i select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); background: #fff; }
.team { list-style: none; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); overflow: hidden; }
.team__i { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr) 70px; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.team__i:last-child { border-bottom: 0; }
.team__i input, .team__i select { border-color: transparent; background: transparent; }
.team__i input:hover, .team__i select:hover { background: var(--field); }
.team__name { font-weight: 600; }
.team__title { color: var(--muted); }
.team__st { font-size: 12px; color: var(--green-t); }
.team__i.is-off .team__st { color: var(--red-t); }
.team__me { font-size: 12px; color: var(--dim); text-align: right; }
.team__i .link { justify-self: end; }
@container (max-width: 760px) {
  .team-add { grid-template-columns: 1fr 1fr; }
  .team-add .btn { grid-column: 1 / -1; }
  .team__i { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .team__name { grid-column: 1 / -1; }
}
/* ---------- техническая поддержка ---------- */
.sup { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr); gap: 12px; max-width: 980px; align-items: start; }
@container (max-width: 760px) { .sup { grid-template-columns: minmax(0, 1fr); } }
.sup__tg, .sup__f { display: grid; gap: 12px; padding: 18px 20px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.sup__tg { background: var(--p-blue); box-shadow: none; }
.sup h2 { font-size: 16px; font-weight: 600; }
.sup__tg p { font-size: 13px; color: rgb(26 25 23 / 0.68); }
.sup__tg .btn { justify-self: start; }
.sup__f label:not(.split-ck) { display: grid; gap: 4px; font-size: 12px; font-weight: 500; color: var(--dim); }
.sup__f label small { margin-left: 6px; font-size: 11.5px; font-weight: 400; }
.sup__f input:not([type=checkbox]), .sup__f textarea { width: 100%; min-height: 38px; padding: 8px 12px; background: var(--field); border: 1px solid transparent; border-radius: var(--r-s); font-size: 13px; color: var(--text); resize: vertical; }
.sup__f input:disabled { color: var(--muted); }
.sup__f .split-ck { margin: 0; }
.sup__f .split-ck:has(input:disabled) { opacity: 0.6; }
.sup__l { list-style: none; display: grid; gap: 8px; max-width: 980px; }
.sup__i { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); font-size: 13px; }
.sup__i.is-done { opacity: 0.65; }
.sup__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sup__h b { font-weight: 600; }
.sup__h small { font-size: 11.5px; color: var(--dim); }
.sup__st { margin-left: auto; padding: 2px 10px; border-radius: var(--pill); font-size: 11px; font-weight: 600; background: var(--acc-soft); color: var(--acc-t); }
.sup__i.is-done .sup__st { background: var(--green-soft); color: var(--green-t); }
.sup__i p { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- колокольчик уведомлений ---------- */
.side__top { position: relative; }
.bell { position: relative; display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; border-radius: 50%; background: var(--panel-2); color: var(--muted); transition: background-color 0.18s var(--ease), color 0.18s var(--ease); }
.bell:hover { background: var(--hover); color: var(--text); }
.bell svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bell.has-new { color: var(--text); }
.bell__n { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--acc); color: var(--acc-ink); font: 700 9.5px/17px var(--font); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg-2); }
.bellpop { position: fixed; top: 72px; left: 28px; z-index: 70; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(400px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 90px)); border-radius: 20px; background: var(--panel); box-shadow: var(--sh-2); animation: viewIn 0.2s var(--ease) both; }
.bellpop__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.bellpop__h b { font-weight: 600; font-size: 15px; }
.bellpop__l { list-style: none; overflow-y: auto; padding: 6px; }
.bellpop__e { padding: 18px 14px; font-size: 13px; color: var(--dim); }
.ntf { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 12px; width: 100%; padding: 12px 14px 12px 12px; border-radius: 14px; text-align: left; transition: background-color 0.18s var(--ease); }
.ntf:hover { background: var(--hover); }
.ntf + .ntf, .bellpop__l li + li { margin-top: 2px; }
.ntf__k { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--panel-2); color: var(--muted); }
.ntf__k svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ntf__k--defer { background: var(--amber-soft); color: var(--amber-t); }
.ntf__k--book { background: var(--red-soft); color: var(--red-t); }
.ntf__k--chat { background: var(--acc-soft); color: var(--acc-t); }
.ntf__k--trial { background: var(--green-soft); color: var(--green-t); }
.ntf__k--support { background: var(--blue-soft); color: var(--blue-t); }
.ntf__b { display: grid; gap: 3px; min-width: 0; }
.ntf__h { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ntf__h b { flex: 1; min-width: 0; overflow: hidden; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.ntf__h time { flex: none; font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.ntf__t { font-size: 13.5px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.ntf.is-new .ntf__t { color: var(--text); }
.ntf.is-new .ntf__h b { color: var(--text); }
.ntf.is-new::after { content: ''; position: absolute; top: 17px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.ntf.is-new .ntf__h { padding-right: 12px; }
.bellpop__e { display: grid; gap: 4px; }
.bellpop__e b { font-weight: 600; color: var(--text); }
.bellpop__h .link { font-size: 12.5px; }
@media (max-width: 899px) { .mtop .bell { position: absolute; right: 10px; top: 50%; translate: 0 -50%; margin: 0; } .bellpop { top: calc(60px + var(--tg-top, 0px)); left: auto; right: 12px; } }

/* ---------- штаб клуба: чат ---------- */
.badge--at { background: var(--acc); }
.subtab .badge { margin-left: 6px; vertical-align: 1px; }
.chat { display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; max-width: 900px; height: calc(100dvh - 236px); min-height: 380px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); overflow: hidden; }
.chat__list { list-style: none; overflow-y: auto; overscroll-behavior: contain; padding: 10px 0; }
.chat__empty { padding: 40px 24px; text-align: center; color: var(--dim); font-size: 13px; }
.chat__day { display: flex; justify-content: center; margin: 14px 0 6px; }
.chat__day span { padding: 3px 12px; border-radius: var(--pill); font-size: 11.5px; font-weight: 500; color: var(--dim); background: var(--panel-2); }
.msg { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 10px; padding: 6px 16px 4px; transition: background-color 0.18s var(--ease); animation: msgIn 0.25s var(--ease) both; }
@keyframes msgIn { from { opacity: 0; translate: 0 6px; } }
.msg:hover { background: var(--hover); }
.msg.is-cont { padding-top: 1px; }
.msg.is-at { background: var(--acc-soft); box-shadow: inset 3px 0 0 var(--acc); }
.msg.is-flash { background: var(--amber-soft); }
.msg__ava .ava { margin-top: 2px; }
.msg__b { min-width: 0; }
.msg__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.msg__h b { font-weight: 600; font-size: 13px; }
.msg__h small { font-size: 11.5px; color: var(--dim); }
.msg__h time { font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.msg__t { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg__t a { color: var(--blue-t); text-decoration: underline; text-underline-offset: 3px; }
.msg__tm { margin-left: 8px; font-size: 11px; color: var(--dim); opacity: 0; transition: opacity 0.18s var(--ease); }
.msg:hover .msg__tm { opacity: 1; }
.msg__ed { font-size: 11.5px; color: var(--dim); }
.ment { padding: 0 4px; border-radius: 4px; background: var(--blue-soft); color: var(--blue-t); }
.ment.is-me { background: var(--acc-soft); color: var(--acc-t); font-weight: 600; }
.msg__rep { display: grid; margin: 3px 0 4px; padding: 3px 10px; max-width: 520px; border-left: 2px solid var(--line-3); text-align: left; font-size: 12.5px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.msg__rep b { font-size: 12px; font-weight: 600; color: var(--text); }
.msg__rep:hover { border-left-color: var(--acc); }
.msg__a { position: absolute; top: 2px; right: 12px; display: flex; gap: 10px; padding: 2px 10px; border-radius: var(--pill); background: var(--panel); box-shadow: var(--sh); opacity: 0; pointer-events: none; transition: opacity 0.18s var(--ease); }
.msg:hover .msg__a, .msg:focus-within .msg__a { opacity: 1; pointer-events: auto; }
.msg.is-del .msg__t { font-style: italic; font-size: 12.5px; }
.chat__bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--acc-t); }
.chat__bar span { display: grid; flex: 1; min-width: 0; }
.chat__bar small { color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat__in { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg-2); }
.chat__in textarea { flex: 1; min-height: 44px; max-height: 180px; padding: 11px 14px; resize: none; background: var(--field); border: 1px solid transparent; border-radius: 22px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.chat__in .send { flex: none; }
.chat__hint { padding: 0 12px 8px; font-size: 11.5px; color: var(--dim); background: var(--bg-2); }
.chat__pop { position: absolute; left: 12px; bottom: calc(100% - 4px); z-index: 5; display: grid; width: min(360px, calc(100% - 24px)); max-height: 280px; overflow-y: auto; padding: 6px; border-radius: 16px; background: var(--panel); box-shadow: var(--sh-2); }
.chat__pu { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 8px; align-items: center; padding: 7px 10px; border-radius: 10px; text-align: left; }
.chat__pu b { font-size: 13px; font-weight: 600; }
.chat__pu small { grid-column: 2; font-size: 11.5px; color: var(--dim); }
.chat__pu:hover, .chat__pu.is-on { background: var(--panel-2); }
.staff { list-style: none; max-width: 760px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); overflow: hidden; }
.staff li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.staff li:last-child { border-bottom: 0; }
.staff li > span { display: grid; min-width: 0; }
.staff b { font-weight: 600; font-size: 13px; }
.staff li > span > small { font-size: 12px; color: var(--dim); }
@media (max-width: 899px) { .chat { height: calc(100dvh - 210px); } .msg__a { position: static; grid-column: 2; opacity: 1; pointer-events: auto; box-shadow: none; background: none; padding: 2px 0 0; } .msg__tm { opacity: 1; } }

/* ---------- сверка номеров ---------- */
.nums__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.num { display: grid; gap: 2px; align-content: start; min-height: 68px; padding: 10px 12px; border: 1px dashed var(--line-3); border-radius: 14px; font-size: 12.5px; }
.num b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dim); }
.num.is-busy { border-style: solid; border-color: transparent; background: var(--bg-2); box-shadow: var(--sh); }
.num.is-busy b { color: var(--text); }
.num span { min-width: 0; overflow-wrap: break-word; line-height: 1.35; }
.num small { display: block; font-size: 11px; color: var(--amber-t); }
.num.is-dup { border-color: transparent; background: var(--red-soft); }
.num.is-dup b { color: var(--red-t); }
.num em { display: block; font-style: normal; font-size: 11px; color: var(--dim); }
.subtabs--in { margin: 0 0 14px; }
.nums__shared { margin: -4px 0 14px; padding: 10px 14px; border-radius: var(--r-s); background: var(--bg-2); box-shadow: var(--sh); font-size: 13px; color: var(--muted); }
.nums__none { font-size: 13px; color: var(--muted); }
/* ---------- статистика: раскрывающиеся карточки ---------- */
.kpi--x { cursor: pointer; }
.kpi--x:hover { box-shadow: var(--sh-2); }
.kpi--x.is-on { box-shadow: var(--sh), inset 0 0 0 2px var(--acc); }
.kpi--x { display: flex; flex-direction: column; }
.kpi__more { margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 500; color: var(--acc-t); }
.kpi--x:hover .kpi__more { text-decoration: underline; text-underline-offset: 3px; }
.ovx { margin: 10px 0 6px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh), inset 0 0 0 2px var(--acc); overflow: hidden; container-type: inline-size; }
.ovx header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--acc-soft); }
.ovx h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ovx h3 span { font-weight: 400; color: var(--muted); }
.ovx__list { list-style: none; display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) auto; }
/* строка состава: название — полоса и метки — сумма; на узком экране сумма встаёт рядом с названием, полоса и метки — строкой ниже */
/* строки делят общую сетку списка (subgrid): полосы одной длины, суммы — в одну колонку */
.ovx__sq { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-areas: 'name body r'; gap: 8px 24px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 13px; }
.ovx__sq:first-child { border-top: 0; }
.ovx__sq:not(:has(.ovx__body)) { grid-template-areas: 'name . r'; }
.ovx__name { grid-area: name; justify-self: start; padding-block: 2px; font-size: 14px; font-weight: 600; text-align: left; }
.ovx__name:hover { color: var(--acc-t); }
.ovx__r { grid-area: r; display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; padding-left: 0; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ovx__r b { font-size: 15px; color: var(--text); font-weight: 600; }
.ovx__r small { font-size: 12.5px; color: var(--dim); }
.ovx__r b.up { color: var(--green-t); } .ovx__r b.down { color: var(--red-t); }
.ovx__pc { align-self: center; min-width: 46px; padding: 3px 8px; border-radius: var(--pill); background: rgb(242 193 78 / 0.22); color: var(--amber-t); font-style: normal; font-size: 12px; font-weight: 600; text-align: center; }
.ovx__pc.is-full { background: rgb(95 198 147 / 0.2); color: var(--green-t); }
.ovx__body { grid-area: body; display: grid; gap: 8px; min-width: 0; }
.ovx__tags { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--muted); }
.ovx__tags > span { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border-radius: var(--pill); background: var(--panel-2); }
.ovx__tags b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ovx__tags .is-ok { background: rgb(95 198 147 / 0.16); } .ovx__tags .is-ok b { color: var(--green-t); }
.ovx__tags .is-warn { background: rgb(240 124 132 / 0.16); } .ovx__tags .is-warn b { color: var(--red-t); }
.ovx__tags .is-amber { background: rgb(242 193 78 / 0.2); } .ovx__tags .is-amber b { color: var(--amber-t); }
.ovx__tags .is-acc { background: var(--acc-soft); } .ovx__tags .is-acc b { color: var(--acc-t); }
.ovx__bar { display: block; height: 8px; border-radius: var(--pill); background: var(--panel-2); overflow: hidden; }
.ovx__bar i { display: block; height: 100%; border-radius: var(--pill); background: var(--s-paid); animation: grow 0.6s var(--ease) both; transform-origin: 0 50%; }
.ovx__ppl { list-style: none; display: grid; gap: 6px; }
.ovx__ppl li { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; font-size: 12.5px; }
.ovx__ppl li > b { font-weight: 600; font-size: 11.5px; color: var(--muted); }
.ovx__ppl li > b.up { color: var(--green-t); } .ovx__ppl li > b.down { color: var(--red-t); } .ovx__ppl li > b.is-own { color: var(--acc-t); } .ovx__ppl li > b.free { color: var(--green-t); }
.ovx__ppl li > span { color: var(--dim); font-variant-numeric: tabular-nums; }
.ovx__c { grid-column: 2 / -1; font-size: 12px; color: var(--muted); }
/* скидки: человек и комментарий слева, справа новая цена крупно, полная зачёркнута, процент скидки плашкой */
.dsc__l { list-style: none; display: grid; }
.dsc { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.dsc:first-child { border-top: 0; padding-top: 2px; }
.dsc__n { display: grid; gap: 2px; min-width: 0; font-size: 13px; }
.dsc__n b { font-weight: 600; }
.dsc__n .ovx__c { grid-column: auto; font-size: 12px; color: var(--muted); }
.dsc__p { display: flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dsc__p b { font-size: 15px; font-weight: 600; color: var(--acc-t); }
.dsc__p b.is-free { color: var(--green-t); }
.dsc__p s { font-size: 12.5px; color: var(--dim); text-decoration-thickness: 1px; }
.dsc__pc { min-width: 46px; padding: 3px 8px; border-radius: var(--pill); background: var(--acc-soft); color: var(--acc-t); font-style: normal; font-size: 12px; font-weight: 600; text-align: center; }
.dsc__pc.is-free { background: rgb(95 198 147 / 0.16); color: var(--green-t); }
.ovx__none { grid-column: 1 / -1; padding: 16px 18px; color: var(--dim); font-size: 13px; }
@container (max-width: 640px) {
  .ovx__list { grid-template-columns: minmax(0, 1fr) auto; }
  .ovx__sq { grid-template-areas: 'name r' 'body body'; gap: 8px 12px; padding: 12px 14px; }
  .ovx__sq:not(:has(.ovx__body)) { grid-template-areas: 'name r'; }
  .ovx header { padding: 12px 14px; }
  .ovx__ppl li { grid-template-columns: minmax(0, 1fr) auto; } .ovx__ppl li > b { grid-column: 1 / -1; } .ovx__c { grid-column: 1 / -1; }
}
/* ---------- статистика: инфографика ---------- */
.igs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px; margin-bottom: 8px; }
.ig { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; min-width: 0; margin: 0; padding: 18px 20px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.ig figcaption b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ig figcaption small { display: block; margin-top: 2px; font-size: 12px; color: var(--dim); }
.ig__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 64px; align-items: center; gap: 10px; font-size: 12.5px; }
.ig__n { min-width: 0; min-height: 24px; padding-block: 2px; text-align: left; color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig__n:hover { color: var(--acc-t); }
.ig__bar { display: flex; gap: 2px; height: 10px; border-radius: var(--pill); background: var(--panel-2); overflow: hidden; }
.ig__bar i { display: block; height: 100%; min-width: 2px; border-radius: var(--pill); }
.ig__v { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; font-weight: 600; }
.ig__v small { display: block; font-size: 11px; font-weight: 400; color: var(--dim); }
.ig__v b { font-weight: 600; } .ig__v b.up { color: var(--green-t); } .ig__v b.down { color: var(--red-t); }
.ig__row--2 { grid-template-columns: 96px minmax(0, 1fr) 92px; }
.ig__dbl { display: grid; gap: 3px; } .ig__dbl .ig__bar { height: 6px; }
.ig__div { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.ig__l, .ig__r { display: flex; height: 10px; background: var(--panel-2); overflow: hidden; }
.ig__l { justify-content: flex-end; border-radius: var(--pill) 0 0 var(--pill); } .ig__r { border-radius: 0 var(--pill) var(--pill) 0; }
.ig__l i { background: var(--s-noanswer); border-radius: var(--pill) 0 0 var(--pill); } .ig__r i { background: var(--s-paid); border-radius: 0 var(--pill) var(--pill) 0; }
.ig__stack { display: flex; height: 16px; border-radius: var(--pill); overflow: hidden; gap: 2px; }
.ig__stack i { display: block; height: 100%; border-radius: 3px; }
.ig__stack i:first-child { border-radius: var(--pill) 3px 3px var(--pill); } .ig__stack i:last-child { border-radius: 3px var(--pill) var(--pill) 3px; }
.ig__lg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--dim); }
.ig__lg span { display: inline-flex; align-items: center; gap: 5px; }
.ig__lg i { width: 9px; height: 9px; border-radius: 3px; }
.ig__one { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 6px 14px; width: 100%; min-width: 0; }
/* подпись к полосе — целиком: название и число не обрезаются, лишние переносятся строкой ниже */
.ig__one span { display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap; }
.ig__one b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ig__row--lg { align-items: start; }
.ig__row--lg .ig__n { min-height: 24px; padding-block: 0; line-height: 16px; display: flex; align-items: flex-start; }
.ig__lgb { display: grid; gap: 4px; min-width: 0; padding-top: 2px; }
.ig__lgb small { font-size: 11px; line-height: 1.35; color: var(--dim); }
.ig__row--lg .ig__v { line-height: 14px; }
.ig__empty { font-size: 12.5px; color: var(--dim); }
/* ---------- посты с результатами ---------- */
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 24px; align-items: start; }
@container (max-width: 860px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
.pform { display: grid; gap: 10px; min-width: 0; }
.pform .p-h { margin: 14px 0 0; }
.pform .p-h:first-child { margin-top: 0; }
.pgames { list-style: none; display: grid; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); overflow: hidden; }
.pgames li + li { border-top: 1px solid var(--line); }
.pg { display: grid; grid-template-columns: 17px 116px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; cursor: pointer; transition: background-color 0.18s var(--ease); }
.pg:hover { background: var(--hover); }
.pg.is-on { background: var(--acc-soft); }
.pg input { width: 17px; height: 17px; accent-color: var(--acc); }
.pg__d { color: var(--dim); font-size: 12.5px; }
.pg__t { min-width: 0; overflow-wrap: anywhere; }
.pg__s { font-weight: 600; font-variant-numeric: tabular-nums; }
.pg__s.up, .ptop h3 .up { color: var(--green-t); } .pg__s.down, .ptop h3 .down { color: var(--red-t); }
.pfield { width: 100%; min-height: 38px; padding: 0 12px; background: var(--field); border: 1px solid transparent; border-radius: var(--pill); font-size: 13px; color: var(--text); }
.pfield option, .pfield optgroup { background: var(--panel); color: var(--text); }
.pvars { display: grid; gap: 6px; }
.pvar { padding: 10px 14px; border: 1px solid transparent; border-radius: var(--r-s); background: var(--bg-2); box-shadow: var(--sh); text-align: left; font-size: 13px; line-height: 1.5; color: var(--muted); transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease); }
.pvar:hover { border-color: var(--line-2); color: var(--text); }
.pvar.is-on { border-color: var(--acc); background: var(--acc-soft); color: var(--text); box-shadow: none; }
.ptop { display: grid; gap: 6px; padding: 14px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.ptop h3 { font-size: 13px; font-weight: 600; }
.ptop__s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--green-t); }
.ptop__s.is-err { color: var(--amber-t); }
.ptop__h, .ptop__r { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 52px); gap: 6px; }
.ptop__h span { font-size: 11px; font-weight: 500; color: var(--dim); }
.ptop__r input { min-width: 0; min-height: 34px; padding: 0 8px; background: var(--field); border: 1px solid transparent; border-radius: var(--pill); font-size: 13px; color: var(--text); }
.ptop__r input[inputmode] { text-align: center; font-variant-numeric: tabular-nums; }
.ppre { position: sticky; top: 20px; display: grid; gap: 8px; min-width: 0; }
.ppre .p-h { margin: 0; }
.ppre__t { margin: 0; max-width: none; }
.ppre__n { font-size: 12px; color: var(--dim); }
@container (max-width: 560px) { .ptop__h, .ptop__r { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .ptop__h span:first-child { display: none; } .ptop__r input:first-child { grid-column: 1 / -1; } .ptop__r + .ptop__r { margin-top: 6px; } .pg { grid-template-columns: 17px minmax(0, 1fr) auto; } .pg__d { grid-column: 2 / -1; grid-row: 2; } }
@media (max-width: 899px) { .ppre { position: static; } }

/* ---------- отчёт по заявкам ---------- */
.fnl { grid-column: 1 / -1; }
.fnl__r { display: grid; grid-template-columns: 200px minmax(0, 1fr) 150px; align-items: center; gap: 12px; font-size: 13px; }
.fnl__l { color: var(--muted); font-weight: 500; }
.fnl__b { position: relative; display: flex; align-items: center; height: 28px; border-radius: var(--pill); background: var(--panel-2); overflow: hidden; }
.fnl__b i { display: block; height: 100%; border-radius: var(--pill); background: var(--acc); }
.fnl__b--red i { background: var(--s-noanswer); opacity: 0.7; }
.fnl__b b { position: absolute; left: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.fnl__b i[style*='width: 100%'] + b, .fnl__b.is-full b { color: #fff; }
.fnl__p { text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fnt-w { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.fnt { font-size: 12.5px; }
.fnt td.mono, .fnt th:not(:first-child) { text-align: right; }
.fnt th { padding: 8px 10px; font-size: 11.5px; }
.fnt td { padding: 7px 10px; }
.fnt__n { white-space: normal; min-width: 100px; width: 100%; }
@container (max-width: 560px) { .fnl__r { grid-template-columns: minmax(0, 1fr) 70px; } .fnl__l { grid-column: 1 / -1; } }

/* ---------- разбор соперника ---------- */
.scout-btn { margin-top: 8px; justify-self: start; }
.abl-list .scout-btn { margin-top: 6px; }
.sc__k { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-top: 14px; }
.frms { display: inline-flex; gap: 3px; }
.frm { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; }
.frm.is-w { background: var(--green-soft); color: var(--green-t); } .frm.is-l { background: var(--red-soft); color: var(--red-t); }
.sc__h2h { margin-top: 10px; font-size: 13px; color: var(--muted); }
.sc__h2h b.up { color: var(--green-t); } .sc__h2h b.down { color: var(--red-t); }
.sc__n { list-style: none; display: grid; gap: 6px; }
.sc__n li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.5; color: var(--text); }
.sc__n li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.sc__t { max-height: none; }
.sc__t td small { display: block; font-size: 11px; color: var(--dim); font-weight: 400; }
.sc__t td b { font-weight: 600; }
.sc__t .is-warn { color: var(--amber-t); }
.sc__l { font-size: 13px; line-height: 1.6; color: var(--muted); }
.sc__g { list-style: none; border-radius: var(--r-s); background: var(--panel-2); overflow: hidden; }
.sc__g li { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 8px 12px; border-bottom: 1px solid var(--bg-2); font-size: 13px; }
.sc__g li:last-child { border-bottom: 0; }
.sc__g li small { grid-column: 2 / -1; font-size: 11.5px; }
.sc__g b.up { color: var(--green-t); font-weight: 600; } .sc__g b.down { color: var(--red-t); font-weight: 600; }
.sc__btns { flex-wrap: wrap; margin-top: 16px; }

/* ---------- конкуренты ---------- */
.rvc { display: grid; gap: 12px; max-width: 900px; margin: 0 0 22px; padding: 18px 20px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.rvc h2 { font-size: 16px; font-weight: 600; }
.rvc__f { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.rvc__f label { display: grid; gap: 4px; flex: 1 1 280px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--dim); }
.rvc__f input { width: 100%; min-height: 38px; padding: 0 12px; background: var(--field); border: 1px solid transparent; border-radius: var(--pill); font-size: 13px; color: var(--text); }
.rvc__n { font-size: 13px; color: var(--muted); }
.rvc__l { list-style: none; display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.rvc__l .split-ck { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 7px 10px; border-radius: 10px; }
.rvc__l .split-ck:hover { background: var(--hover); }
.rvc__l b { font-weight: 600; color: var(--text); }
.rvc__l .dim { font-size: 12px; }
.rv__tabs .sq b { margin-left: 8px; color: var(--acc-t); font-weight: 600; }
.rv__tabs .sq.is-on b { color: #FFB380; }
.rv__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.rvch { grid-column: 1 / -1; }
/* пять карточек — в один ряд, если помещаются; иначе ровными рядами без пустых мест */
.kpis.kpis--fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.tbl td b + small { display: block; font-size: 11.5px; }
.kpis + .igs, [data-ovf] + .igs, .tbl-wrap + .igs, .tbl-wrap + .kpis, .list + .igs { margin-top: 12px; }
.rv__div { white-space: normal; min-width: 180px; font-size: 12.5px; color: var(--muted); }
.rv__ta { display: flex; align-items: center; justify-content: flex-end; gap: 14px; white-space: nowrap; }
.rv__ta .abl-src { min-height: 28px; }
.rvc__s { flex: 0 1 220px !important; }
.rvc__s select { width: 100%; min-height: 38px; padding: 0 12px; background: var(--field); border: 1px solid transparent; border-radius: var(--pill); font-size: 13px; color: var(--text); }
.rvch__b { display: flex; align-items: stretch; gap: 4px; height: 190px; overflow-x: auto; padding-bottom: 2px; }
.rvch__c { flex: 1 0 34px; max-width: 64px; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; padding: 4px 2px 0; border-radius: 10px; }
.rvch__c:hover, .rvch__c.is-on { background: var(--hover); }
.rvch__c.is-on .rvch__l, .rvch__c.is-on .rvch__v { color: var(--acc-t); }
.rvch__v { font-size: 11.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.rvch__col { position: relative; align-self: end; display: flex; align-items: flex-end; width: 70%; min-height: 2px; border-radius: 6px 6px 3px 3px; background: var(--acc-soft); overflow: hidden; }
.rvch__col i { display: block; width: 100%; background: var(--acc); }
.rvch__l { font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.rv__add { margin: 10px 0 18px; }
.rv__add input { flex: 1 1 280px; min-height: 36px; padding: 0 12px; background: var(--field); border: 1px solid transparent; border-radius: var(--pill); font-size: 13px; color: var(--text); }
.rvp { list-style: none; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); overflow: hidden; }
.rvp li { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 1.4fr) auto; gap: 4px 14px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.rvp li:last-child { border-bottom: 0; }
.rvp b { font-weight: 600; }
.rvp span { color: var(--muted); min-width: 0; }
.rv__note { margin-top: 14px; max-width: 820px; font-size: 12.5px; color: var(--dim); }
.rv__danger { margin-top: 18px; }
.is-err { color: var(--red-t); }
@container (max-width: 640px) { .rvp li { grid-template-columns: 1fr; } }

/* ---------- скрипт продаж ---------- */
.faq-ask { display: grid; gap: 10px; max-width: 760px; margin: 0 0 18px; padding: 16px 18px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh), inset 0 0 0 1px var(--acc-line); }
.faq-ask label, .faq.is-edit label { display: grid; gap: 4px; font-size: 12px; font-weight: 500; color: var(--dim); }
.faq-ask label small, .faq.is-edit label small { color: var(--dim); font-size: 11px; font-weight: 400; }
.faq-ask select, .faq-ask textarea, .faq.is-edit select, .faq.is-edit textarea { width: 100%; padding: 9px 12px; background: var(--field); border: 1px solid transparent; border-radius: var(--r-s); font-size: 13px; color: var(--text); resize: vertical; }
.faqs { list-style: none; display: grid; gap: 8px; max-width: 900px; }
/* фильтры разделов отделены от списка вопросов — карточки не липнут к кнопкам */
.chips + .faqs, .chips + .empty { margin-top: 18px; }
.faq { display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.faq.is-open { box-shadow: var(--sh), inset 0 0 0 1px var(--acc-line); }
.faq.is-edit form { display: grid; gap: 10px; }
.faq__q { font-size: 14.5px; font-weight: 600; }
.faq__q small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--dim); }
.faq__badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--pill); background: var(--acc); color: var(--acc-ink); font-size: 10.5px; font-weight: 600; vertical-align: 2px; }
.faq__a { font-size: 13px; line-height: 1.6; color: var(--muted); white-space: pre-line; }
.faq__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.faq__a { overflow-wrap: anywhere; }
.rb { display: grid; gap: 12px; max-width: 820px; margin: 4px 0 8px; padding: 18px 20px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.rb__h h2 { font-size: 15px; font-weight: 600; }
.rb__h p { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.rb__f { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.rb__f label { display: grid; gap: 4px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--dim); }
.rb__f select, .rb__f input { width: 100%; min-width: 0; min-height: 38px; padding: 0 12px; background: var(--field); border: 1px solid transparent; border-radius: var(--pill); font-size: 13px; color: var(--text); }
.rb__f option, .rb__f optgroup { background: var(--panel); color: var(--text); }
.rb__out { margin: 0; max-width: none; }
.rb__left { font-size: 12.5px; color: var(--amber-t); }
.rb__left b { font-weight: 600; }
.rb__left.is-ok { color: var(--green-t); }
.steps { list-style: none; counter-reset: st; display: grid; gap: 8px; max-width: 820px; margin-bottom: 8px; }
.steps li { counter-increment: st; position: relative; display: grid; gap: 8px; padding: 16px 18px 16px 54px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.steps li::before { content: counter(st); position: absolute; left: 16px; top: 15px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); font-size: 12px; font-weight: 700; }
.steps b { font-weight: 600; font-size: 13.5px; }
.steps__msg { padding: 12px 14px; border-radius: var(--r-s); background: var(--panel-2); font-size: 13px; line-height: 1.6; white-space: pre-line; }
.steps__tip { font-size: 12px; color: var(--dim); }
.steps .btn--s { justify-self: start; }
/* ---------- материалы клуба ---------- */
.mtools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mtools .chips { margin: 0; }
.mbg { display: flex; gap: 6px; }
.mbg__b { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-3); }
.mbg__b.is-on { outline: 2px solid var(--acc); outline-offset: 2px; }
.mbg--light, .is-light { background: #FFFFFF; }
.mbg--dark, .is-dark { background: #0F0F10; }
.mbg--grid, .is-grid { background: repeating-conic-gradient(#E4E4E8 0 25%, #F6F6F8 0 50%) 0 0 / 14px 14px; }
.mhint { margin: 0 0 12px; font-size: 12px; color: var(--dim); }
.mcats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 12px; }
.mcats .mhint { margin: 0; }
.mcats__f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mcats__f input { min-height: 34px; width: min(260px, 100%); padding: 0 12px; background: var(--field); border: 1px solid transparent; border-radius: var(--pill); font-size: 13px; color: var(--text); }
.mgrid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@container (max-width: 900px) { .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 620px) { .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mtile { display: grid; grid-template-rows: auto 1fr; min-width: 0; border-radius: var(--r); overflow: hidden; background: var(--bg-2); box-shadow: var(--sh); }
.mtile__pv { display: grid; place-items: center; aspect-ratio: 1; border-bottom: 1px solid var(--line); }
.mtile__pv img { width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.mtile__ext { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--dim); }
.mtile__pv.is-dark .mtile__ext { color: #9A9690; }
.mtile__b { display: grid; align-content: start; gap: 4px; padding: 12px 14px 14px; min-width: 0; }
.mtile__t { font-size: 13px; font-weight: 600; line-height: 1.4; overflow-wrap: break-word; }
.mtile__m { font-size: 11.5px; line-height: 1.4; color: var(--dim); } /* описание — целиком, переносится строкой ниже */
.mtile__a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.mtile__edit { display: grid; gap: 6px; }
.mtile__edit input, .mtile__edit select { min-height: 32px; min-width: 0; padding: 0 10px; background: var(--field); border: 1px solid transparent; border-radius: 8px; font-size: 12.5px; color: var(--text); }
label.btn { cursor: pointer; }
/* ---------- журнал действий ---------- */
.jpeople { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; margin-bottom: 24px; }
.jp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; width: 100%; padding: 12px 14px; text-align: left; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.jp:hover { box-shadow: var(--sh-2); }
.jp.is-on { box-shadow: var(--sh), inset 0 0 0 2px var(--acc); }
.jp__n { min-width: 0; font-weight: 600; }
.jp b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.jp > small { grid-column: 1 / -1; font-size: 11.5px; color: var(--dim); }
/* должность — одной строкой у всех карточек, длинная обрезается многоточием (полностью — в подсказке) */
.jp > .jp__r { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp.is-idle { background: var(--red-soft); box-shadow: none; }
.jp.is-idle b { color: var(--red-t); }
.jfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.jfilters select { min-height: 34px; padding: 0 12px; background: var(--bg-2); border: 1px solid transparent; box-shadow: var(--sh); border-radius: var(--pill); font-size: 13px; color: var(--text); max-width: 100%; }
.jlist { list-style: none; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); overflow: hidden; }
.jlist li { display: grid; grid-template-columns: 96px 150px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.jlist li:last-child { border-bottom: 0; }
.jl__t { color: var(--dim); font-size: 12px; }
.jl__who { font-weight: 600; min-width: 0; }
.jl__what { min-width: 0; overflow-wrap: break-word; color: var(--muted); }
.jl__what small { display: block; font-size: 11.5px; color: var(--dim); }
.jl__a { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--pill); background: var(--panel-2); color: var(--muted); }
@container (max-width: 700px) { .jlist li { grid-template-columns: minmax(0, 1fr) auto; } .jl__what { grid-column: 1 / -1; } .jl__a { grid-row: 1; grid-column: 2; } }
/* ---------- матчи лиг (ABL, МЛБЛ) и расписание игр ---------- */
.subtabs { display: inline-flex; gap: 4px; margin: -6px 0 18px; padding: 4px; border-radius: 22px; background: var(--bg-2); box-shadow: var(--sh); }
.subtab { position: relative; min-height: 34px; padding: 6px 14px; border-radius: var(--pill); font-size: 13px; font-weight: 500; color: var(--muted); }
.subtab:hover { color: var(--text); background: var(--hover); }
.subtab.is-on { color: var(--ink-t); background: var(--ink); }
.cab { display: grid; gap: 12px; max-width: 760px; margin: 0 0 22px; padding: 18px 20px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.cab__h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cab__h h2 { font-size: 16px; font-weight: 600; }
.cab__h p { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.cab__l { display: grid; gap: 8px; }
.cab__r { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px; }
.cab__r dt { font-size: 12px; color: var(--dim); }
.cab__r dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
/* «Скопировать» у всех строк — у правого края на одной вертикали; «Показать» — слева от неё */
.cab__r dd > .copy { margin-left: auto; }
.cab__v { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; font-size: 13px; color: var(--text); }
.cab__ed { justify-self: start; }
.cab__edit { display: grid; gap: 10px; }
.cab__edit label { display: grid; gap: 4px; font-size: 12px; font-weight: 500; color: var(--dim); }
.cab__edit input { width: 100%; min-height: 36px; padding: 0 12px; background: var(--field); border: 1px solid transparent; border-radius: var(--pill); font-size: 13px; color: var(--text); }
@media (max-width: 640px) { .cab__r { grid-template-columns: 1fr; gap: 4px; } }
.abl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.abl-head h2, .abl-empty h2 { font-size: 16px; font-weight: 600; }
.abl-head p { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.abl-links { list-style: none; display: grid; gap: 8px; margin: 0 0 12px; }

/* привязанная команда: шапка (название · лига · ссылка), ниже — название для чата с кнопками в одну линию */
.abl-links li { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); font-size: 13px; }
.abl-links__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.abl-links__h b { font-weight: 600; font-size: 13.5px; }
.abl-links__h .abl-src { margin-left: auto; }
.abl-name { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.abl-name label { font-size: 12px; font-weight: 500; color: var(--dim); }
.abl-name label small { margin-left: 6px; font-size: 11.5px; font-weight: 400; }
.abl-name__r { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.abl-name__r input { flex: 1 1 260px; max-width: 420px; width: auto !important; min-height: 36px !important; }
.abl-name__r .btn--s { min-height: 36px; padding: 0 14px; }
.abl-team { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--acc-t); }
.abl-link { margin-bottom: 14px; }

.abl-name input, .abl-link input { min-height: 34px; min-width: 0; width: min(320px, 100%); padding: 0 12px; background: var(--field); border: 1px solid transparent; border-radius: var(--pill); font-size: 13px; color: var(--text); }
/* ближайший матч — оранжевая карточка, как главная плитка в современных панелях */
.abl-next { display: grid; min-width: 0; gap: 6px; padding: 22px; border-radius: var(--r); background: var(--p-lilac); color: var(--text); }
.abl-next__k { font-size: 12px; font-weight: 500; color: rgb(26 25 23 / 0.62); }
.abl-next__d { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.abl-next__d b { font-weight: 700; color: var(--text); }
.abl-next__vs { font-size: 15px; font-weight: 500; }
.abl-next__m { font-size: 13px; color: rgb(26 25 23 / 0.7); }
.abl-next__m a, .abl-list a { text-decoration: underline; text-decoration-color: rgb(26 25 23 / 0.3); text-underline-offset: 3px; }
.abl-list a { text-decoration-color: var(--line-3); }
.abl-chat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgb(26 25 23 / 0.1); }
/* строка для чата и плашка «Скопировать» — в одной рамке рядом; строка всегда в одну строку, лишнее мягко гаснет справа (можно прокрутить вбок) */
.abl-chat__c.copyable { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; contain: inline-size; padding: 5px 5px 5px 14px; background: #fff; border-radius: var(--pill); color: var(--text); }
.abl-chat__c.copyable > .copy { position: static; flex: none; translate: none; }
.abl-chat code { flex: 1; display: block; min-width: 0; padding: 4px 0; font: inherit; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.abl-chat code::-webkit-scrollbar { display: none; }
.abl-next .book { background: #fff; color: var(--red-t); border-color: transparent; }
.abl-next .book.is-ok { background: #fff; color: var(--green-t); }
.abl-next .book small { color: var(--muted); }
.abl-next .scout-btn { background: var(--ink); border-color: var(--ink); color: var(--ink-t); box-shadow: none; }
.abl-next .scout-btn:hover { background: #2E2C29; border-color: #2E2C29; }
.abl-src { display: inline-flex; align-items: center; min-height: 24px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; white-space: nowrap; }
.abl-src:hover { color: var(--acc-t); }
.abl-new { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--pill); background: var(--acc); color: var(--acc-ink); font-size: 10.5px; font-weight: 600; text-transform: none; vertical-align: 1px; }
/* бронь зала перед матчем МЛБЛ: красная плашка — не забронирован, зелёная с галочкой — забронирован */
.book { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; padding: 9px 14px; border: 1px solid transparent; border-radius: var(--r-s); background: var(--red-soft); color: var(--red-t); font-size: 13px; transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease); }
.book__ck input { width: 17px; height: 17px; accent-color: var(--s-paid); cursor: pointer; }
.book__t { font-weight: 600; }
.book__ck { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.book__at { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--muted); }
.book__at b { font-weight: 600; color: inherit; }
.book__f { display: inline-flex; align-items: center; gap: 6px; }
.book__f input { height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: 600 13px/1 var(--font); font-variant-numeric: tabular-nums; }
.book__f button { display: none; }
.book__f.is-dirty button { display: inline-flex; }
.book.is-ok { background: var(--green-soft); color: var(--green-t); }
.book__ck:has(input:disabled) { cursor: default; }
.abl-list .book { margin-top: 6px; padding: 7px 12px; font-size: 12.5px; }
.book-alert { display: grid; gap: 2px; width: 100%; margin: -6px 0 16px; padding: 12px 16px; border-radius: var(--r); background: var(--red-soft); text-align: left; font-size: 13px; color: var(--muted); transition: background-color 0.18s var(--ease); }
.book-alert b { font-weight: 600; color: var(--red-t); }
.book-alert:hover { background: rgb(229 72 77 / 0.15); }
.abl-list { list-style: none; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); overflow: hidden; }
.abl-list li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.abl-list li:last-child { border-bottom: 0; }
.abl-list small { display: block; font-size: 11.5px; color: var(--dim); }
.abl-d { color: var(--muted); font-weight: 500; }
.abl-o { min-width: 0; }
.abl-s { text-align: right; font-size: 11.5px; color: var(--dim); }
.abl-s b { display: block; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.abl-s.is-w b { color: var(--green-t); } .abl-s.is-l b { color: var(--red-t); }
.abl-empty { display: grid; gap: 10px; max-width: 640px; padding: 20px; border: 1px dashed var(--line-3); border-radius: var(--r); }
.abl-empty p { font-size: 13px; color: var(--muted); }
.abl-link { display: grid; gap: 6px; }
.abl-link label { font-size: 12px; font-weight: 500; color: var(--dim); }
.abl-link label small { margin-left: 6px; font-size: 11.5px; font-weight: 400; }
.abl-link .abl-name__r input { max-width: 560px; }
/* узкий экран: поле во всю строку, кнопки парой под ним */
@container (max-width: 640px) { .abl-name__r input { flex-basis: 100%; max-width: none !important; } .abl-name__r .btn--s { flex: 1 1 0; } }
.week-note { display: grid; gap: 4px; max-width: 820px; margin: 0 0 12px; padding: 12px 16px; border: 1px dashed var(--line-3); border-radius: var(--r); font-size: 13px; color: var(--muted); }
.empty .btn-ghost { margin-top: 4px; }
.chat-text { margin: 0 0 14px; padding: 18px 20px; max-width: 820px; white-space: pre-wrap; overflow-wrap: break-word; font: inherit; font-size: 13px; line-height: 1.7; background: var(--bg-2); border-radius: var(--r); box-shadow: var(--sh); }
@container (max-width: 560px) { .abl-list li { grid-template-columns: minmax(0, 1fr) auto; } .abl-d { grid-column: 1 / -1; } }
/* ---------- покинули клуб ---------- */
.gone { margin-top: 18px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); overflow: hidden; }
.gone.has-todo { box-shadow: var(--sh), inset 0 0 0 1px rgb(229 72 77 / 0.4); }
.gone__h { display: grid; gap: 2px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.gone__h h2 { font-size: 14px; font-weight: 600; color: var(--red-t); }
.gone:not(.has-todo) .gone__h h2 { color: var(--muted); }
.gone__h p { font-size: 12.5px; color: var(--muted); }
.gone__list { list-style: none; }
.gone__i { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: rgb(229 72 77 / 0.05); box-shadow: inset 3px 0 0 var(--s-noanswer); }
.gone__i:last-child { border-bottom: 0; }
.gone__i.is-done { background: none; box-shadow: none; }
.gone__name { display: grid; text-align: left; font-weight: 600; color: var(--red-t); min-width: 0; }
.gone__i.is-done .gone__name { color: var(--muted); }
.gone__name small { font-size: 11.5px; font-weight: 400; color: var(--dim); }
.gone__cks { display: flex; flex-wrap: wrap; gap: 6px; }
.gone__ck { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--pill); font-size: 12.5px; color: var(--muted); cursor: pointer; }
.gone__ck input { accent-color: var(--s-paid); }
.gone__ck.is-on { border-color: transparent; background: var(--green-soft); color: var(--green-t); }
.gone__ck:has(input:disabled) { cursor: default; opacity: 0.7; }
.gone__st { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--pill); background: var(--red-soft); color: var(--red-t); white-space: nowrap; }
.gone__i.is-done .gone__st { background: var(--panel-2); color: var(--dim); }
.gone-alert { display: block; width: 100%; margin: -4px 0 14px; padding: 10px 14px; border-radius: var(--r-s); background: var(--red-soft); color: var(--red-t); font-size: 13px; text-align: left; }
.gone-alert:hover { background: rgb(229 72 77 / 0.15); }
@container (max-width: 640px) { .gone__i { grid-template-columns: minmax(0, 1fr) auto; } .gone__cks { grid-column: 1 / -1; grid-row: 2; } }
.gone__i:has([data-comeback]) { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.arch { margin-top: 12px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); overflow: hidden; }
.arch summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.arch summary::-webkit-details-marker { display: none; }
.arch summary span { font-size: 13px; font-weight: 600; color: var(--muted); }
.arch summary span::before { content: '▸'; display: inline-block; margin-right: 8px; transition: transform 0.15s; }
.arch[open] summary span::before { transform: rotate(90deg); }
.arch summary small { font-size: 12.5px; color: var(--dim); }
.abl-arch { margin-top: 18px; }
.abl-arch .abl-list { border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; }
.abl-tbd { margin-top: 12px; padding: 12px 16px; border-radius: var(--r-s); background: var(--bg-2); box-shadow: var(--sh); font-size: 13px; color: var(--muted); }
.abl-tbd b { color: var(--ink); font-weight: 600; }
.arch__list { list-style: none; border-top: 1px solid var(--line); }
.arch__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.arch__list li:last-child { border-bottom: 0; }
.arch__name { display: grid; min-width: 0; font-weight: 600; }
.arch__name small { font-size: 11.5px; font-weight: 400; color: var(--dim); }
@container (max-width: 640px) { .gone__i:has([data-comeback]) { grid-template-columns: minmax(0, 1fr) auto; } }
.size2 { display: flex; align-items: center; }
.size2 select.cell { min-width: 0; width: 64px; padding-right: 18px; background-position: right 3px center; }
.size2 i { font-style: normal; color: var(--dim); }
.split-ck { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.split-ck input { accent-color: var(--acc); }
.form:has(.split-toggle:not(:checked)) .split-only, .form:has(.split-toggle:not(:checked)) .split-only-i { display: none; }
/* ---------- капитан состава ---------- */
.cap { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-left: 8px; border-radius: 6px; background: var(--acc); color: var(--acc-ink); font-size: 10.5px; font-weight: 700; letter-spacing: 0; vertical-align: 2px; flex: none; }
.td-name { position: relative; }
.td-name .cap { position: absolute; right: 10px; top: 50%; margin: -9px 0 0; pointer-events: none; }
.td-name.has-cap .cell--name { padding-right: 36px; }
.p-title .cap { width: 22px; height: 22px; font-size: 12px; vertical-align: 4px; }
.cap-box { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-s); background: var(--panel-2); font-size: 13px; color: var(--muted); }
.cap-box.is-on { background: var(--acc-soft); }
.cap-box b { display: block; margin-bottom: 2px; font-weight: 600; color: var(--text); }
.cap-box .btn-ghost { justify-self: start; }
.cap-link { display: block; margin-top: 6px; font-size: 12px; color: var(--text); word-break: break-all; }
.kpis--cap { margin-bottom: 18px; }
.kpis--cap .kpi--btn { display: flex; flex-direction: column; }
.kpis--cap .kpi--btn p { margin-top: auto; padding-top: 6px; color: var(--acc-t); }
.kpis--cap .kpi--btn:not(.kpi--warn) p { color: var(--dim); }
@container (min-width: 1000px) { .kpis--cap { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tbl--ro tbody tr { cursor: default; }
.tbl--ro tbody tr:hover { background: none; }
.td-ro-name { font-weight: 600; }
/* ---------- менеджер: составы и площадки ---------- */
.club-h { margin: 28px 0 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.sec + .club-h, .sec + .tips .club-h { margin-top: 0; }
.tips + .tips { margin-top: 28px; }
.tips .club-h { margin-top: 0; }
.club-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 12px; }
/* карточки составов — по своей высоте: короткая карточка не тянется до самой длинной в ряду */
.club-grid:not(.club-grid--halls) { align-items: stretch; }
.club-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.club-card__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.club-card__h h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.tag { display: inline-flex; align-items: center; min-height: 22px; max-width: 100%; padding: 0 9px; border-radius: var(--pill); background: var(--panel-2); font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.club-price { color: var(--muted); font-size: 12.5px; }
.club-price b { margin-right: 4px; font-size: 24px; font-weight: 600; color: var(--acc-t); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.club-kv { display: grid; gap: 4px; }
.club-kv div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; font-size: 12.5px; line-height: 1.45; }
.club-kv dt { color: var(--dim); }
.club-kv b { font-weight: 600; color: var(--text); }
.club-sched { list-style: none; display: grid; }
.club-sched li { display: grid; grid-template-columns: 82px 96px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.4; }
.club-sched li:last-child { border-bottom: 1px solid var(--line); }
.club-sched__d { color: var(--muted); font-weight: 500; }
.club-sched__p { min-width: 0; color: var(--muted); overflow-wrap: break-word; hyphens: none; }
.club-sched__p small { display: block; font-size: 11.5px; color: var(--dim); }
/* расписание состава: короткий день, время, зал — залу остаётся вся ширина, подпись «с United / Rise» не рвётся */
.club-sched--sq li { grid-template-columns: 22px 84px minmax(0, 1fr); }
.club-sched--sq .club-sched__d { color: var(--text); font-weight: 600; }
.club-note { font-size: 12.5px; color: var(--muted); }
.club-extra { display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--r-s); background: var(--acc-soft); font-size: 12.5px; color: var(--muted); }
.club-extra b { font-weight: 600; color: var(--acc-t); }
.club-copy { align-self: center; }
/* низ карточки: слева действие для клиента, справа — правка и порядок */
.club-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.club-foot .club-btns { margin-top: 0; }
.club-ed { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.club-ord { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--pill); overflow: hidden; }
.club-ord__b { display: grid; place-items: center; width: 32px; height: 28px; color: var(--muted); }
.club-ord__b + .club-ord__b { border-left: 1px solid var(--line-2); }
.club-ord__b svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.club-ord__b:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.club-ord__b:disabled { opacity: 0.3; cursor: default; }

.cf { gap: 10px; box-shadow: var(--sh), inset 0 0 0 1px var(--acc-line); grid-column: 1 / -1; }
.cf h3 { font-size: 16px; font-weight: 600; }
.cf__g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.cf label, .ros__f label:not(.split-ck) { display: grid; gap: 4px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--dim); }
.cf input, .cf select, .ros__f input:not([type=checkbox]) { width: 100%; min-width: 0; min-height: 36px; padding: 0 12px; background: var(--field); border: 1px solid transparent; border-radius: var(--pill); font-size: 13px; color: var(--text); }
.cf option { background: var(--panel); color: var(--text); }
.cf__h { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cf__h small { margin-left: 6px; font-weight: 400; color: var(--dim); }
.cf__note { font-size: 12.5px; color: var(--muted); }
.cf__rows { display: grid; gap: 6px; }
.cf__row { display: grid; grid-template-columns: 140px 130px minmax(0, 1fr) minmax(0, 1.2fr) 32px; gap: 6px; align-items: center; }
.cf .link { justify-self: start; }
@container (max-width: 760px) { .cf__row { grid-template-columns: 1fr 1fr 32px; } .cf__row [name=hall], .cf__row [name=note] { grid-column: 1 / 3; } }
.ros { list-style: none; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); margin-bottom: 10px; overflow: hidden; }
.ros > li + li { border-top: 1px solid var(--line); }
.ros__i { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.8fr) auto; gap: 12px; align-items: center; padding: 12px 16px; font-size: 13px; }
.ros__i b { font-weight: 600; }
.ros__f { display: grid; gap: 10px; padding: 14px 16px; background: var(--panel-2); }
.ros__ck { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ros__ck .split-ck { margin: 0; }
.ros__add { margin-bottom: 8px; }
.club-h small { margin-left: 8px; font-weight: 400; font-size: 12px; color: var(--dim); }
@container (max-width: 760px) { .ros__i { grid-template-columns: minmax(0, 1fr) auto; } .ros__i > span { grid-column: 1; } }
.club-hall { padding-top: 0; overflow: hidden; }
.club-hall__img { display: block; width: calc(100% + 36px); margin: 0 -18px; aspect-ratio: 16 / 8; object-fit: cover; background: var(--panel-2); }
.club-addr { display: grid; font-size: 13px; }
.club-addr span { font-size: 12.5px; color: var(--dim); }
.club-hall .club-sched li { grid-template-columns: 82px minmax(0, 1fr); }
.club-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.club-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
@container (max-width: 360px) { .club-sched li { grid-template-columns: 70px minmax(0, 1fr); } .club-sched__p { grid-column: 2; } .club-sched--sq li { grid-template-columns: 22px 84px minmax(0, 1fr); } .club-sched--sq .club-sched__p { grid-column: auto; } }

/* ---------- нижняя панель разделов (телефон и мини-приложение Telegram) ---------- */
.tabbar { display: none; }
@media (max-width: 899px) {
  :root { --tab-h: 60px; --tg-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }
  /* панель — белая, без размытия фона (размытие дорого стоит в мини-приложении) */
  .tabbar:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; padding: 4px 4px var(--safe-b); background: rgb(255 255 255 / 0.94); box-shadow: 0 -1px 0 var(--line), 0 -8px 24px rgb(60 40 120 / 0.08); border-radius: 24px 24px 0 0; }
  body.is-out .tabbar { display: none; }
  .tabbar__i { position: relative; flex: 1 1 0; display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; height: var(--tab-h); color: var(--dim); font-size: 10.5px; font-weight: 500; transition: color 0.18s var(--ease); -webkit-tap-highlight-color: transparent; }
  .tabbar__i svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 1; }
  .tabbar__i span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar__i.is-on { color: var(--acc-t); }
  /* активный раздел: значок в мягком оранжевом круге */
  .tabbar__i.is-on::before { content: ''; position: absolute; top: 6px; left: 50%; width: 40px; height: 28px; margin-left: -20px; border-radius: var(--pill); background: var(--acc-soft); animation: tabIn 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
  .tabbar__i.is-on svg { animation: tabIcon 0.3s var(--ease) both; }
  @keyframes tabIn { from { scale: 0.6; opacity: 0; } }
  @keyframes tabIcon { from { translate: 0 3px; } }
  .tabbar__i:active { scale: 0.94; }
  .tabbar__b { position: absolute; top: 4px; left: calc(50% + 6px); z-index: 2; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--acc); color: var(--acc-ink); font: 700 10px/17px var(--font); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg-2); }
  .tabbar__dot { position: absolute; top: 8px; left: calc(50% + 8px); z-index: 2; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 2px var(--bg-2); }
  body.has-tabbar .view { padding-bottom: calc(var(--tab-h) + 28px + var(--safe-b)); }
  body.has-tabbar .toast { bottom: calc(var(--tab-h) + 14px + var(--safe-b)); }
  body.has-tabbar .mtop [data-menu] { display: none; }
  body.has-tabbar .mtop { justify-content: center; }
  .mtop { padding-top: var(--tg-top); }
  .side { padding-top: var(--tg-top); }
  /* меню «Ещё» открывается над панелью — панель видна, «Ещё» подсвечен */
  body.menu-open .tabbar { z-index: 55; }
  body.has-tabbar .side { bottom: calc(var(--tab-h) + var(--safe-b)); }
  body.has-tabbar .chat { height: calc(100dvh - 250px - var(--tab-h) - var(--safe-b)); min-height: 320px; }
  /* мини-приложение: шапка Telegram уже есть — логотип скромнее, без лишней высоты */
  .in-tg .mtop .lockup { padding: 8px 16px; }
  .in-tg .side__out { display: none; }
  .chat__hint { display: none; }
  .chat__in { padding-bottom: 10px; }
}
@media (max-width: 899px) {
  .side { inset: 0 auto 0 0; border-radius: 0 28px 28px 0; background: #fff; transform: translateX(-100%); transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1); width: min(300px, 86vw); z-index: 50; box-shadow: var(--sh-2); }
  body.menu-open .side { transform: none; transition: transform 0.32s var(--ease); }
  .shade { display: block; position: fixed; inset: 0; z-index: 45; background: rgb(26 25 23 / 0.35); opacity: 0; pointer-events: none; transition: opacity 0.18s ease-in; }
  body.menu-open .shade { opacity: 1; pointer-events: auto; transition: opacity 0.28s ease-out; }
  .mtop { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 0; background: rgb(240 236 247 / 0.92); box-shadow: 0 1px 0 var(--line); }
  .mtop .lockup { padding: 12px 16px; }
  .view { margin: 0; padding: 20px 16px calc(40px + var(--safe-b)); }
  body.has-panel .view { padding-right: 16px; }
  .title { font-size: 24px; }
  .sec { margin-bottom: 18px; }
  .sec__btns { width: 100%; }
  .sec__btns .btn { flex: 1; min-height: 40px; }
  .search { max-width: none; flex-basis: 100%; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; }
  .chips::-webkit-scrollbar, .squads::-webkit-scrollbar { display: none; }
  .squads, .subtabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; margin: -4px -16px 16px; padding: 2px 16px 6px; background: none; box-shadow: none; border-radius: 0; }
  .sq, .subtab { flex: none; white-space: nowrap; padding: 7px 13px; background: var(--bg-2); box-shadow: var(--sh); font-size: 12.5px; }
  .sq.is-on, .subtab.is-on { background: var(--ink); color: var(--ink-t); box-shadow: none; }
  .panel { left: 0; width: 100%; top: auto; height: 92dvh; pointer-events: none; }
  .panel__shade { display: block; position: fixed; inset: 0; background: rgb(26 25 23 / 0.35); opacity: 0; transition: opacity 0.15s ease-in; pointer-events: none; }
  .panel.is-on .panel__shade { opacity: 1; pointer-events: auto; transition: opacity 0.25s ease-out; }
  .panel__box { inset: auto 0 0 0; max-height: 92dvh; border-radius: 28px 28px 0 0; box-shadow: var(--sh-2); translate: 0 40px; }
  .panel__body { padding: 22px 16px calc(32px + var(--safe-b)); }
  .contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact .btn, .contact .btn-ghost { padding: 0 6px; }
  .kv { grid-template-columns: 1fr 14px; gap: 2px 12px; }
  .kv > span { grid-column: 1 / -1; }
  .kv--ro { grid-template-columns: 1fr; }
  .squads.squads--m { display: flex; }
  .month { padding: 10px; }
  .month__nav { width: 100%; justify-content: space-between; }
  .month .sqb__fee, .month__act { margin-left: 0; }
  .fgroups { gap: 12px; }
  .fgroup { width: 100%; }
  .kpi { padding: 14px; }
  .kpi dd { font-size: 24px; }
  .charts { grid-template-columns: 1fr; }
  .docs__add { grid-template-columns: 1fr; }
  .copyable:not(.abl-chat__c) { padding-right: 0; padding-bottom: 40px; }
  .copyable:not(.abl-chat__c) > .copy { top: auto; bottom: 10px; left: 10px; right: auto; }
  .faq__a.copyable { padding-right: 0; padding-bottom: 36px; }
  .faq__a.copyable > .copy { left: 0; bottom: 0; }
  .chat-text.copyable { padding: 16px 16px 52px; }
  .chat-text.copyable > .copy { bottom: 14px; left: 16px; }
  .madeby { color: var(--muted); }
  .madeby .yu { color: var(--yu); }
  .madeby--mini .yu { color: var(--text); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .madeby::after { background-position: 50% 0; } }
/* наведение поднимает карточку только там, где есть мышь — на телефоне лишних движений нет */
@media (hover: none) { .kpi--btn:hover, .kpi--x:hover, .jp:hover { translate: none; box-shadow: var(--sh); } }

/* кнопка «Обновить» у списков матчей */
.psync { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.psync .chips { margin: 0; }
.ig { position: relative; }
.ig__sync { position: absolute; top: 16px; right: 16px; }
/* многострочные поля — скруглённые, но не капсулы */
.sup__f textarea, .faq-ask textarea, .faq.is-edit textarea, .note-form textarea, .kv textarea, .chat__in textarea, .rb__f textarea { border-radius: 18px; }
.jp.is-idle { background: var(--p-rose); }
/* подписи на пастельных плитках — темнее, чтобы контраст держался не ниже 4,5:1 */
.kpi--got .kpi__left, .kpi--warn .kpi__def, .kpi--main .kpi__def { color: #6E4A04; }
.kpi--warn .kpi__def.is-late { color: #A12A30; }

/* ---------- Apple glass: закреплённые слои — матовое стекло с размытием того, что под ними ---------- */
.side, .panel__box, .bellpop, .chat__pop, .gate__card { background: var(--glass-chrome); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--sh-2); }
/* список уведомлений лежит поверх плиток и кнопок — сплошной фон, чтобы яркие элементы под ним не просвечивали пятнами */
.bellpop { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
.side { box-shadow: var(--sh); }
.panel__box { background: rgb(255 255 255 / 0.7); }
.panel__x { background: rgb(255 255 255 / 0.7); box-shadow: var(--rim), 0 2px 8px rgb(60 40 120 / 0.08); }
.toast { background: rgb(26 25 23 / 0.82); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 12px 32px rgb(26 25 23 / 0.22); }
.toast.is-err { background: rgb(194 51 58 / 0.9); }
/* шапка таблицы липкая — под ней прокручиваются строки, поэтому она непрозрачная, в тон стекла */
.tbl thead th { background: #FBFAFE; }
/* стеклянные плитки цветные — у них тоже кромка */
.kpi--main, .kpi--got, .kpi--warn, .abl-next, .sup__tg, .jp.is-idle { box-shadow: var(--sh); }
/* кнопки: основная — оранжевая с бликом сверху; обычная — стеклянная капсула; тёмная — с тонким бликом */
.btn { background: linear-gradient(180deg, #FF8638 0%, #FF6A13 100%); border-color: transparent; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 4px 12px rgb(26 25 23 / 0.14); }
.btn:hover { background: linear-gradient(180deg, #FF9150 0%, #FF7424 100%); border-color: transparent; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 4px 12px rgb(26 25 23 / 0.14); }
.btn.btn--danger { background: linear-gradient(180deg, #F2777E 0%, #E5484D 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 6px 18px rgb(229 72 77 / 0.25); }
.btn.btn--danger:hover { background: linear-gradient(180deg, #EE6A71 0%, #D73C41 100%); }
.btn-ghost { background: rgb(255 255 255 / 0.6); border-color: rgb(255 255 255 / 0.85); box-shadow: 0 1px 2px rgb(60 40 120 / 0.06), 0 4px 12px rgb(60 40 120 / 0.05); }
.btn-ghost:hover { background: rgb(255 255 255 / 0.85); border-color: #fff; }
.btn-sm, .sq.is-on, .subtab.is-on, .nav__i.is-on, .seg2__b[aria-pressed='true'], .st-btn.is-on { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 4px 12px rgb(26 25 23 / 0.16); }
.btn--red { background: rgb(255 255 255 / 0.5); }
.icon-btn:hover { background: rgb(255 255 255 / 0.7); }
/* полоса прокрутки таблицы не заезжает на скруглённые углы карточки */
.tbl-wrap::-webkit-scrollbar-track { margin: 18px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .side, .panel__box, .bellpop, .chat__pop, .gate__card { background: rgb(255 255 255 / 0.94); } }
@media (prefers-reduced-transparency: reduce) { :root { --bg-2: #FFFFFF; --glass-chrome: #FFFFFF; } .panel__box { background: #fff; } }
@media (max-width: 899px) {
  .side { background: rgb(255 255 255 / 0.72); box-shadow: var(--sh-2); }
  .mtop { background: rgb(240 236 250 / 0.6); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 1px 0 rgb(255 255 255 / 0.7), 0 6px 20px rgb(60 40 120 / 0.06); }
  .panel__box { background: rgb(255 255 255 / 0.78); }
  /* нижняя панель — стеклянная капсула над контентом, как таб-бар iOS */
  .tabbar:not([hidden]) { left: 10px; right: 10px; bottom: calc(8px + var(--safe-b)); padding: 4px; border-radius: 30px; background: rgb(255 255 255 / 0.84); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--rim), 0 10px 30px rgb(60 40 120 / 0.16); }
  .tabbar__i.is-on::before { background: rgb(255 106 19 / 0.12); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7); }
  body.has-tabbar .view { padding-bottom: calc(var(--tab-h) + 40px + var(--safe-b)); }
  body.has-tabbar .toast { bottom: calc(var(--tab-h) + 24px + var(--safe-b)); }
  body.has-tabbar .side { bottom: calc(var(--tab-h) + 16px + var(--safe-b)); border-radius: 0 28px 28px 0; }
  .sq:not(.is-on), .subtab:not(.is-on) { background: rgb(255 255 255 / 0.6); }
}
/* панель: крестик закрытия остаётся на месте при прокрутке длинной карточки */
.panel__x { position: sticky; top: 12px; z-index: 3; display: grid; margin: 12px 12px -46px auto; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
/* разбор соперника: таблица шире панели — столбец с игроком закреплён слева, цифры прокручиваются рядом с ним */
.sc__t th:nth-child(2), .sc__t td:nth-child(2) { position: sticky; left: 0; z-index: 1; background: #FBFAFE; box-shadow: 1px 0 0 var(--line-2); white-space: normal; min-width: 150px; }
.sc__t thead th:nth-child(2) { z-index: 3; }
.sc__t tbody tr:hover td:nth-child(2) { background: #F6F4FC; }
.sc__t { margin-bottom: 4px; }
/* поддержка: карточка Telegram — голубое стекло, круглый значок, подсказка что приложить, стеклянная кнопка со значком */
.sup__tg { grid-template-columns: minmax(0, 1fr); padding: 16px 18px; background: linear-gradient(150deg, rgb(205 228 255 / 0.85) 0%, rgb(196 218 252 / 0.6) 100%); }
/* заголовок, подсказки и кнопка — по одной левой линии */
.sup__tgb { display: grid; justify-items: start; min-width: 0; }
.sup__tgb h2 { font-size: 15px; line-height: 1.3; }
.sup__tgb > p:first-of-type { margin-top: 2px; }
.sup__tips { list-style: none; display: grid; gap: 1px; margin-top: 3px; }
.sup__tg .sup__tipsh { margin-top: 10px; font-size: 12px; font-weight: 500; color: rgb(26 25 23 / 0.68); }
.sup__tips li { position: relative; padding-left: 14px; font-size: 13px; line-height: 1.5; color: var(--text); }
.sup__tips li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: #229ED9; }
.sup__go { margin-top: 12px; min-height: 36px; padding: 0 16px 0 12px; font-size: 13px; }
.sup__go svg { width: 16px; height: 16px; fill: #229ED9; }

/* ---------- главная: приветствие и плитки разделов ---------- */
.hero { position: relative; overflow: hidden; display: grid; gap: 6px; padding: 26px 28px 24px; margin-bottom: 8px; border-radius: 28px; background: linear-gradient(135deg, rgb(214 202 252 / 0.85) 0%, rgb(255 255 255 / 0.6) 55%, rgb(255 222 204 / 0.75) 100%); box-shadow: var(--sh); }
.hero__d { font-size: 12.5px; font-weight: 500; color: rgb(26 25 23 / 0.62); }
.hero__d::first-letter { text-transform: uppercase; }
.hero__t { font-family: var(--font-d); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.hero__s { max-width: 620px; font-size: 13.5px; color: rgb(26 25 23 / 0.7); }
.hero__todo { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.hero__c { min-height: 34px; padding: 0 14px; border-radius: var(--pill); background: var(--ink); color: var(--ink-t); font-size: 12.5px; font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 4px 12px rgb(26 25 23 / 0.16); transition: translate 0.2s var(--ease), scale 0.12s var(--ease); }
.hero__ok { margin-top: 8px; font-size: 12.5px; font-weight: 500; color: var(--green-t); }
.home__h { margin: 26px 0 12px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.home__g { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.home__g--1 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.htile { position: relative; display: grid; align-content: start; gap: 4px; min-height: 150px; padding: 18px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); text-align: left; transition: translate 0.25s var(--ease), box-shadow 0.25s var(--ease), scale 0.12s var(--ease); }
.htile__i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 14px; box-shadow: var(--rim); }
.htile__i svg { width: 22px; height: 22px; stroke: var(--text); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.htile--lilac .htile__i { background: var(--p-lilac); } .htile--blue .htile__i { background: var(--p-blue); } .htile--mint .htile__i { background: var(--p-mint); } .htile--peach .htile__i { background: var(--p-peach); } .htile--rose .htile__i { background: var(--p-rose); }
.htile b { font-family: var(--font-d); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.htile > span:last-child { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.htile::after { content: ''; position: absolute; top: 22px; right: 20px; width: 9px; height: 9px; border-top: 2px solid var(--line-3); border-right: 2px solid var(--line-3); rotate: 45deg; transition: translate 0.25s var(--ease), border-color 0.2s; }
.htile__n { position: absolute; top: 16px; right: 40px; padding: 3px 10px; border-radius: var(--pill); background: var(--acc); color: var(--acc-ink); font-style: normal; font-size: 11.5px; font-weight: 600; }
.home__sq { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.hsq { display: grid; gap: 2px; padding: 14px 16px; border-radius: 20px; background: var(--bg-2); box-shadow: var(--sh); text-align: left; transition: translate 0.25s var(--ease), box-shadow 0.25s var(--ease), scale 0.12s var(--ease); }
.hsq b { font-size: 14px; font-weight: 600; }
.hsq span { font-size: 12px; color: var(--muted); }
.hsq i { font-style: normal; font-weight: 600; } .hsq .up { color: var(--green-t); } .hsq .down { color: var(--red-t); }
.htile:active, .hsq:active, .hero__c:active { scale: 0.97; }
@media (hover: hover) {
  .htile:hover, .hsq:hover { box-shadow: var(--sh-2); }
  .htile:hover::after { translate: 3px 0; border-color: var(--acc); }
}
/* плитки и составы всплывают по очереди, как карточки других разделов */
.view.is-enter :is(.home__g, .home__sq) > * { animation: cardIn 0.4s var(--ease) both; }
.view.is-enter :is(.home__g, .home__sq) > :nth-child(2) { animation-delay: 0.04s; } .view.is-enter :is(.home__g, .home__sq) > :nth-child(3) { animation-delay: 0.08s; }
.view.is-enter :is(.home__g, .home__sq) > :nth-child(4) { animation-delay: 0.12s; } .view.is-enter :is(.home__g, .home__sq) > :nth-child(5) { animation-delay: 0.16s; } .view.is-enter :is(.home__g, .home__sq) > :nth-child(n + 6) { animation-delay: 0.2s; }
@media (max-width: 899px) {
  .hero { padding: 20px 18px; border-radius: 24px; }
  .hero__t { font-size: 26px; }
  .home__g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .htile { min-height: 0; padding: 14px; }
  .htile__i { width: 38px; height: 38px; margin-bottom: 6px; border-radius: 12px; }
  .htile__i svg { width: 19px; height: 19px; }
  .htile b { font-size: 13.5px; }
  .htile > span:last-child { font-size: 11.5px; }
  .htile::after { display: none; }
  .htile__n { top: 14px; right: 12px; padding: 2px 8px; font-size: 10.5px; }
  .home__sq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* «Главное меню» — выделенная кнопка над разделами меню */
.nav__home { display: flex; align-items: center; gap: 10px; width: calc(100% - 4px); min-height: 42px; margin: 10px 2px 2px; padding: 0 14px; border-radius: var(--pill); background: rgb(255 255 255 / 0.85); box-shadow: var(--rim), 0 2px 8px rgb(60 40 120 / 0.08); color: var(--text); font-size: 13.5px; font-weight: 700; text-align: left; transition: background-color 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.2s var(--ease), scale 0.12s var(--ease); }
.nav__home svg { width: 18px; height: 18px; stroke: var(--acc); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nav__home:hover { background: #fff; box-shadow: var(--rim), 0 4px 14px rgb(60 40 120 / 0.12); }
.nav__home:active { scale: 0.97; }
.nav__home.is-on { background: var(--ink); color: var(--ink-t); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 4px 12px rgb(26 25 23 / 0.16); }
.nav__home.is-on svg { stroke: #FF9A5C; }
.nav__home + .nav__h { margin-top: 10px; }
/* подсказки в поддержке — столбиком, по одной на строку */
/* поддержка: поле ника с «@» внутри */
.sup__nick { position: relative; display: block; }
.sup__nick i { position: absolute; left: 14px; top: 50%; translate: 0 -50%; font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); pointer-events: none; }
.sup__f .sup__nick input { padding-left: 30px; }
.sup__f label small.sup__hint { display: block; margin: 2px 0 0; }
/* первая загрузка: знак Team Team и подпись по центру экрана, мягко пульсируют */
.boot { min-height: 100dvh; align-content: center; gap: 14px; color: var(--muted); }
.boot img { justify-self: center; width: 34px; height: 31px; }

/* ---------- тёмная тема ----------
   Включается по data-theme на <html>: «Авто» берёт тему Telegram (в мини-приложении) или системы, «Светлая» и «Тёмная» — вручную.
   Та же система: стекло поверх пятен, только ночью — графитовое стекло над приглушёнными сиреневыми и синими пятнами.
   Цвета текста подобраны под 4,5:1 на самом светлом пятне. */
.theme { display: flex; gap: 2px; padding: 3px; border-radius: var(--pill); background: var(--field); }
.theme button { flex: 1; min-height: 28px; padding: 0 8px; border-radius: var(--pill); font-size: 11.5px; font-weight: 500; color: var(--dim); white-space: nowrap; transition: background-color 0.15s, color 0.15s; }
.theme button:hover { color: var(--text); }
.theme button[aria-pressed='true'] { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgb(26 25 23 / 0.12); }
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #121019; --bg-2: rgb(38 35 50 / 0.72); --panel: #24212E; --panel-2: rgb(255 255 255 / 0.05); --hover: rgb(255 255 255 / 0.06); --field: rgb(255 255 255 / 0.07);
  --glass-chrome: rgb(30 28 40 / 0.66);
  --p-lilac: rgb(128 106 230 / 0.26); --p-blue: rgb(90 140 235 / 0.24); --p-mint: rgb(70 180 120 / 0.22); --p-peach: rgb(255 140 80 / 0.22); --p-rose: rgb(235 100 150 / 0.22);
  --line: rgb(255 255 255 / 0.07); --line-2: rgb(255 255 255 / 0.12); --line-3: rgb(255 255 255 / 0.24);
  --text: #F2F0EC; --muted: #BDB9B3; --dim: #A8A49E;
  --ink: #F2F0EC; --ink-t: #16141C;
  --acc-t: #FF9A5C; --acc-soft: rgb(255 106 19 / 0.16); --acc-line: rgb(255 106 19 / 0.45);
  --s-lost: #7D7A75;
  --red-t: #FF8E93; --green-t: #63D6A0; --amber-t: #F2C658; --blue-t: #93B3FF; --violet-t: #BCA4FF;
  --red-soft: rgb(229 72 77 / 0.18); --green-soft: rgb(30 154 102 / 0.2); --amber-soft: rgb(224 161 6 / 0.2); --blue-soft: rgb(59 111 224 / 0.2);
  --rim: inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 0 0 1px rgb(255 255 255 / 0.05);
  --sh: var(--rim), 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px rgb(0 0 0 / 0.32);
  --sh-2: var(--rim), 0 2px 6px rgb(0 0 0 / 0.35), 0 24px 60px rgb(0 0 0 / 0.5);
}
:root[data-theme='dark'] body::before { background:
  radial-gradient(55% 45% at 6% 4%, #2E2363 0%, transparent 70%),
  radial-gradient(45% 40% at 96% 8%, #1B2C55 0%, transparent 70%),
  radial-gradient(38% 34% at 64% 52%, #3A2219 0%, transparent 70%),
  radial-gradient(55% 50% at 10% 98%, #3B1A30 0%, transparent 70%),
  radial-gradient(45% 45% at 94% 96%, #1A2A52 0%, transparent 70%),
  linear-gradient(160deg, #15121F 0%, #17141E 50%, #12141E 100%); }
/* знак Team Team — светлый вариант; тёмная «чернильная» заливка заменяется на светлую */
:root[data-theme='dark'] img.mark, :root[data-theme='dark'] .boot img { content: url('/crm/logo-light.svg'); }
/* чернильные кнопки и выбранные вкладки ночью светлые, текст на них тёмный */
:root[data-theme='dark'] .nav__i.is-on .nav__n, :root[data-theme='dark'] .chip.is-on b, :root[data-theme='dark'] .sq.is-on b { color: rgb(22 20 28 / 0.6); }
:root[data-theme='dark'] .nav__i.is-on .nav__n.is-on { background: rgb(22 20 28 / 0.12); color: var(--ink-t); }
:root[data-theme='dark'] .nav__i.is-on .nav__d.is-up { color: #137A52; } :root[data-theme='dark'] .nav__i.is-on .nav__d.is-down { color: #C2333A; }
:root[data-theme='dark'] .btn-sm:hover, :root[data-theme='dark'] .abl-next .scout-btn:hover { background: #FFFFFF; border-color: #FFFFFF; }
:root[data-theme='dark'] .nav__home.is-on svg { stroke: #C94A00; }
:root[data-theme='dark'] .nav__i.is-on svg { stroke: #C94A00; }
:root[data-theme='dark'] .rv__tabs .sq.is-on b { color: #C94A00; }
:root[data-theme='dark'] .btn-sm, :root[data-theme='dark'] .sq.is-on, :root[data-theme='dark'] .subtab.is-on, :root[data-theme='dark'] .nav__i.is-on, :root[data-theme='dark'] .seg2__b[aria-pressed='true'], :root[data-theme='dark'] .st-btn.is-on, :root[data-theme='dark'] .hero__c, :root[data-theme='dark'] .nav__home.is-on { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 4px 12px rgb(0 0 0 / 0.3); }
/* поверхности, которые в светлой теме белые */
:root[data-theme='dark'] main input:focus, :root[data-theme='dark'] main select:focus, :root[data-theme='dark'] main textarea:focus, :root[data-theme='dark'] .nav__find:focus,
:root[data-theme='dark'] .fee-in:focus-within, :root[data-theme='dark'] .cell:focus, :root[data-theme='dark'] .note-form textarea:focus, :root[data-theme='dark'] .kv textarea:focus, :root[data-theme='dark'] .kv input:focus, :root[data-theme='dark'] .kv select:focus,
:root[data-theme='dark'] .form input:focus, :root[data-theme='dark'] .form select:focus, :root[data-theme='dark'] .team-add input:focus, :root[data-theme='dark'] .team-add select:focus, :root[data-theme='dark'] .team__i input:focus, :root[data-theme='dark'] .team__i select:focus { background-color: var(--panel); }
:root[data-theme='dark'] .abl-chat__c.copyable, :root[data-theme='dark'] .abl-next .book, :root[data-theme='dark'] .abl-next .book.is-ok { background: var(--panel); }
:root[data-theme='dark'] .side { background: rgb(30 28 40 / 0.88); }
:root[data-theme='dark'] .panel__box { background: rgb(30 28 40 / 0.78); }
:root[data-theme='dark'] .panel__x, :root[data-theme='dark'] .icon-btn:hover { background: rgb(255 255 255 / 0.1); }
:root[data-theme='dark'] .tbl thead th, :root[data-theme='dark'] .sc__t th:nth-child(2), :root[data-theme='dark'] .sc__t td:nth-child(2) { background: #221F2C; }
:root[data-theme='dark'] .sc__t tbody tr:hover td:nth-child(2) { background: #2A2736; }
:root[data-theme='dark'] .btn-ghost { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.2); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.25); }
/* «Разбор соперника» в карточке ближайшего матча — сплошная светлая кнопка, как в светлой теме (чернильная) */
:root[data-theme='dark'] .abl-next .scout-btn { background: var(--ink); border-color: var(--ink); color: var(--ink-t); }
:root[data-theme='dark'] .btn-ghost:hover { background: rgb(255 255 255 / 0.16); border-color: rgb(255 255 255 / 0.3); }
:root[data-theme='dark'] .btn--red { background: rgb(229 72 77 / 0.1); }
:root[data-theme='dark'] .nav__home:not(.is-on) { background: rgb(255 255 255 / 0.08); }
:root[data-theme='dark'] .nav__home:not(.is-on):hover { background: rgb(255 255 255 / 0.13); box-shadow: var(--rim), 0 4px 14px rgb(0 0 0 / 0.3); }
:root[data-theme='dark'] .toast { background: rgb(242 240 236 / 0.92); color: #16141C; }
:root[data-theme='dark'] .toast.is-err { background: rgb(194 51 58 / 0.94); color: #fff; }
/* полупрозрачный тёмный текст на цветных плитках и шапках */
:root[data-theme='dark'] .kpi--main dt, :root[data-theme='dark'] .kpi--main p, :root[data-theme='dark'] .abl-next__k, :root[data-theme='dark'] .hero__d { color: rgb(242 240 236 / 0.68); }
:root[data-theme='dark'] .abl-next__m, :root[data-theme='dark'] .hero__s, :root[data-theme='dark'] .sup__tg p, :root[data-theme='dark'] .sup__tg .sup__tipsh { color: rgb(242 240 236 / 0.76); }
:root[data-theme='dark'] .abl-next__m a, :root[data-theme='dark'] .abl-list a { text-decoration-color: rgb(242 240 236 / 0.3); }
:root[data-theme='dark'] .abl-chat { border-top-color: rgb(255 255 255 / 0.1); }
:root[data-theme='dark'] .kpi--main .bar, :root[data-theme='dark'] .kpi--got .bar, :root[data-theme='dark'] .kpi--warn .bar { background: rgb(255 255 255 / 0.12); }
:root[data-theme='dark'] .kpi--got .kpi__left, :root[data-theme='dark'] .kpi--warn .kpi__def, :root[data-theme='dark'] .kpi--main .kpi__def { color: #F2C658; }
:root[data-theme='dark'] .kpi--warn .kpi__def.is-late { color: #FF8E93; }
:root[data-theme='dark'] .hero { background: linear-gradient(135deg, rgb(110 90 220 / 0.32) 0%, rgb(38 35 50 / 0.6) 55%, rgb(255 106 19 / 0.14) 100%); }
:root[data-theme='dark'] .sup__tg { background: linear-gradient(150deg, rgb(55 120 210 / 0.32) 0%, rgb(40 80 160 / 0.2) 100%); }
:root[data-theme='dark'] .tbl tr[data-s='left'] td, :root[data-theme='dark'] .list > li:has(.st[data-s='left']), :root[data-theme='dark'] .gone__i { background: rgb(229 72 77 / 0.1); }
:root[data-theme='dark'] .theme button[aria-pressed='true'] { background: rgb(255 255 255 / 0.14); box-shadow: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root[data-theme='dark'] .side, :root[data-theme='dark'] .panel__box, :root[data-theme='dark'] .bellpop, :root[data-theme='dark'] .chat__pop, :root[data-theme='dark'] .gate__card { background: rgb(30 28 40 / 0.96); } }
@media (prefers-reduced-transparency: reduce) { :root[data-theme='dark'] { --bg-2: #24212E; --glass-chrome: #24212E; } :root[data-theme='dark'] .panel__box { background: #24212E; } }
@media (max-width: 899px) {
  :root[data-theme='dark'] .side { background: rgb(30 28 40 / 0.86); }
  :root[data-theme='dark'] .mtop { background: rgb(22 20 30 / 0.66); box-shadow: 0 1px 0 rgb(255 255 255 / 0.06), 0 6px 20px rgb(0 0 0 / 0.3); }
  :root[data-theme='dark'] .panel__box { background: rgb(30 28 40 / 0.9); }
  :root[data-theme='dark'] .tabbar:not([hidden]) { background: rgb(30 28 40 / 0.86); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 10px 30px rgb(0 0 0 / 0.45); }
  :root[data-theme='dark'] .tabbar__i.is-on::before { background: rgb(255 106 19 / 0.18); box-shadow: none; }
  :root[data-theme='dark'] .sq:not(.is-on), :root[data-theme='dark'] .subtab:not(.is-on) { background: rgb(255 255 255 / 0.07); }
}

/* ---------- запись на пробную ---------- */
.trial { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-s); background: var(--panel-2); box-shadow: inset 3px 0 0 var(--s-trial); }
.trial.is-past { box-shadow: inset 3px 0 0 var(--line-3); }
.trial--pick { box-shadow: none; }
.trial__d { display: grid; gap: 2px; }
.trial__d b { font-family: var(--font-d); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.trial__d span { font-size: 13px; color: var(--muted); }
.trial__d small { font-size: 12px; color: var(--dim); }
.trial__note { font-size: 12px; color: var(--dim); }
.trial__step { font-size: 12px; font-weight: 600; color: var(--muted); }
.trial__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.trial__go { gap: 8px; }
.trial__go svg { width: 16px; height: 16px; stroke: var(--acc); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trial__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.slot { display: grid; gap: 1px; padding: 9px 12px; border-radius: 12px; background: var(--bg-2); box-shadow: var(--sh); text-align: left; transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.slot:hover { box-shadow: var(--sh), inset 0 0 0 1px var(--acc-line); }
.slot:active { transform: scale(0.98); }
.slot b { font-size: 13px; font-weight: 600; }
.slot span { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.slot small { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trial-tag { display: inline-flex; align-items: center; min-height: 20px; margin-left: 8px; padding: 0 8px; border-radius: var(--pill); background: var(--amber-soft); color: var(--amber-t); font-size: 11px; font-weight: 600; white-space: nowrap; }
.row__meta .trial-tag { margin-left: 0; }
/* главная: кто придёт на пробную */
.trials { display: grid; gap: 10px; margin-bottom: 8px; }
.trials__day { padding: 6px 0; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.trials__day h3 { padding: 10px 18px 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.trials__i { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 18px; }
.trials__i + .trials__i { border-top: 1px solid var(--line); }
.trials__t { font-family: var(--font-d); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--amber-t); }
.trials__i b { display: block; font-size: 14px; font-weight: 600; }
.trials__i span, .trials__i small { display: block; font-size: 12.5px; color: var(--muted); }
.trials__i small { font-size: 12px; color: var(--dim); }
@media (max-width: 899px) { .trials__i { grid-template-columns: 46px minmax(0, 1fr); } .trials__i .btn-ghost { grid-column: 2; justify-self: start; } }
/* «Удалить из состава» — отдельно от истории, внизу карточки игрока */
.p-del { margin-top: 28px; }
/* «Подписка» в листе: только тариф — LITE, PRO, PRO УТРО; цена — в карточке игрока */
select.cell--plan { min-width: 112px; }
/* «+2 −1» — пришли и ушли: два числа своими цветами, без разделителя */
.mv { display: inline-flex; gap: 0.5em; white-space: nowrap; }
.mv b { font-weight: inherit; }
.mv .up { color: var(--green-t); } .mv .down { color: var(--red-t); }
/* раскрытая «Подробнее по составам» — сразу под рядом нажатой карточки */
.kpis { grid-auto-flow: row dense; }
.kpis > .ovx { grid-column: 1 / -1; margin: 0; }
/* составы в записи на пробную — без аватарок, поэтому поля у текста ровные с обеих сторон (у .pass .chip левое поле под аватар) */
.trial__sq .chip { padding: 0 14px; }
/* «Шорты другого размера» — опция прямо под полем размера формы, в той же плашке */
.split-ck--kv { display: flex; margin: -2px 0 0; padding: 0 14px 10px; font-size: 12.5px; white-space: nowrap; }

/* ---------- статистика игроков состава ---------- */
.pst__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 32px 0 14px; }
.pst__bar .p-h { margin: 0; }
.pst--ext { margin-top: 2px; }
.tbl-wrap:has(.pst) + .p-h { margin-top: 36px; }
.pst__note { margin: 14px 0 0; font-size: 12px; line-height: 1.55; color: var(--dim); }
.pst__links { margin-bottom: 12px; }
.pst .num-c { text-align: right; }
.pst .num-c .sort { justify-content: flex-end; }
.pst td.is-sort { font-weight: 600; color: var(--text); }
.pst th { line-height: 1.25; }
.pst--ext td.up { color: var(--green-t); } .pst--ext td.down { color: var(--red-t); }
/* в широкой таблице статистики имя игрока остаётся на месте при прокрутке вбок */
.pst--ext th, .pst--ext td { padding-left: 10px; padding-right: 10px; }
.pst th:first-child, .pst td:first-child { position: sticky; left: 0; z-index: 1; background: #FBFAFE; box-shadow: 1px 0 0 var(--line-2); }
.pst thead th:first-child { z-index: 3; }
:root[data-theme='dark'] .pst th:first-child, :root[data-theme='dark'] .pst td:first-child { background: #221F2C; }
/* прокрутка таблиц вбок не тянет за собой страницу: без «резинки» и жеста «назад» по краю, без увеличения двойным касанием */
html { overflow-x: hidden; overscroll-behavior-x: none; scrollbar-gutter: stable; }
/* место под полосу прокрутки занято всегда: при переходе между короткими и длинными разделами страница не сдвигается вбок */
body { touch-action: manipulation; }
.tbl-wrap { overscroll-behavior-x: contain; }
/* таблицы статистики — во всю высоту: без вложенной вертикальной прокрутки, которая на телефоне перехватывает жест страницы */
.tbl-wrap:has(.pst) { max-height: none; }

/* Смена месяца на «Статистике составов»: сама 1-го числа, досрочно — кнопкой руководителя */
.month-ctl { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 4px 2px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.month-ctl p { margin: 0; }
.month-ctl b { color: var(--text); font-weight: 600; }
.month-ctl.is-early b { color: var(--acc-t); }
/* телефон: под шапкой и нижней панелью всё время едет содержимое — размытие слабее, чтобы прокрутка не проседала */
@media (max-width: 899px) { :root { --blur: blur(16px) saturate(1.6); } }
/* сортировка списком на телефоне, отсрочка в строке игрока */
.sortsel { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; font-size: 12.5px; color: var(--dim); }
.sortsel select { min-height: 36px; padding: 0 12px; border-radius: var(--pill); border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; }
.row__meta .is-defer { color: var(--amber-t); } .row__meta .is-late { color: var(--red-t); }

/* поле, которое не прошло проверку: своя подсказка вместо окна браузера */
.is-invalid, .form input.is-invalid, .form select.is-invalid, .kv input.is-invalid { border-color: var(--red-t) !important; box-shadow: 0 0 0 3px var(--red-soft) !important; }
.ferr { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--red-t); animation: ferr-in 0.18s var(--ease) both; }
@keyframes ferr-in { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ferr { animation: none; } }

/* ---------- меню: группы разделов (сворачиваются щелчком по названию) ---------- */
.navg { margin: 0; }
.navg__h { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; border-radius: 10px; }
.navg__h > span { flex: 1; min-width: 0; }
.navg__h svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--dim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate 0.22s var(--ease); }
.navg:not(.is-open) .navg__h svg { rotate: -90deg; }
.navg__h:disabled { cursor: default; }
.navg__h:disabled svg { opacity: 0.35; }
.navg__h:not(:disabled):hover svg { stroke: var(--text); }
.navg__h:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.navg__h .badge { margin-right: 2px; }
.navg.is-open .navg__b { animation: navgIn 0.24s var(--ease) both; }
@keyframes navgIn { from { opacity: 0; transform: translateY(-4px); } }
.nav .navg__h { margin: 8px 0 2px; padding: 10px 12px 6px; }
.nav__home + .navg .navg__h { margin-top: 12px; }
.navg__b { padding-bottom: 2px; }

/* ---------- «?» у заголовков и всплывающее пояснение ---------- */
.q { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-left: 8px; padding: 0; border-radius: 50%; border: 1px solid var(--line-3, var(--line-2)); background: transparent; color: var(--dim); font: 600 12px/1 var(--font); letter-spacing: 0; vertical-align: middle; cursor: pointer; transition: color 0.16s, border-color 0.16s, background-color 0.16s; }
.q:hover, .q[aria-expanded='true'] { color: var(--text); border-color: var(--text); }
.q:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.title { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; }
.title .q { width: 24px; height: 24px; margin-left: 10px; font-size: 13px; translate: 0 1px; }
.fgroup__h .q, .p-h .q, .home__h .q { width: 18px; height: 18px; margin-left: 6px; font-size: 10.5px; translate: 0 -1px; }
.hintpop { position: fixed; z-index: 90; padding: 12px 14px; border-radius: 14px; background: var(--panel); color: var(--text); font-size: 13px; line-height: 1.5; box-shadow: var(--sh-2); border: 1px solid var(--line-2); opacity: 0; transform: translateY(var(--hy, -4px)); transition: opacity 0.16s var(--ease-in), transform 0.16s var(--ease-in); pointer-events: none; }
.hintpop[data-side='above'] { --hy: 4px; }
.hintpop.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.2s var(--ease), transform 0.24s var(--ease); }
.hintpop::before { content: ''; position: absolute; left: calc(var(--ax, 50%) - 6px); width: 12px; height: 12px; background: inherit; border: inherit; rotate: 45deg; }
.hintpop[data-side='below']::before { top: -7px; border-right: 0; border-bottom: 0; }
.hintpop[data-side='above']::before { bottom: -7px; border-left: 0; border-top: 0; }
@media (prefers-reduced-motion: reduce) { .hintpop, .hintpop.is-on { transition: none; } }

/* ---------- руководство ---------- */
.gb { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 0 0 28px; }
.gb__i { padding: 14px 16px; border-radius: var(--r-s); background: var(--bg-2); box-shadow: var(--sh); }
.gb__i dt { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
.gb__i dd { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.gd { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.gd__h { display: flex; gap: 12px; align-items: flex-start; }
.gd__h h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.gd__h p { margin-top: 2px; font-size: 12.5px; color: var(--dim); line-height: 1.45; }
.gd__i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--acc-soft); }
.gd__i svg { width: 18px; height: 18px; fill: none; stroke: var(--acc-t); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gd__s { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: gd; }
.gd__s li { position: relative; padding-left: 28px; font-size: 13px; line-height: 1.5; color: var(--text); counter-increment: gd; }
.gd__s li::before { content: counter(gd); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--field); color: var(--dim); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gd__go { align-self: flex-start; margin-top: auto; }
.view.is-enter :is(.gd-grid, .gb) > * { animation: cardIn 0.4s var(--ease) both; animation-delay: calc(min(var(--i, 0), 8) * 0.035s); }
@media (max-width: 899px) { .gd-grid, .gb { grid-template-columns: 1fr; } .gd { padding: 16px; } }
.home__g--2 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* ---------- страница состава на телефоне и в узком окне: шапка в одну строку, фильтры под кнопкой ---------- */
.tools--f { flex-wrap: nowrap; margin-bottom: 12px; }
.tools--f .search { flex: 1 1 auto; min-width: 0; flex-basis: auto; }
.ftog { flex: none; gap: 6px; min-height: 40px; padding: 0 14px; }
.ftog svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ftog b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--acc); color: var(--acc-ink); font-size: 10.5px; font-weight: 700; }
.ftog.is-on { background: var(--ink); color: var(--ink-t); border-color: var(--ink); }
@media (max-width: 899px) {
  .fgroups:not([hidden]) { animation: fgIn 0.26s var(--ease) both; margin-bottom: 14px; }
  @keyframes fgIn { from { opacity: 0; transform: translateY(-6px); } }
  .sec--row { flex-wrap: nowrap; align-items: flex-start; }
  .sec--row > div:first-child { min-width: 0; flex: 1; }
  .sec--row .sec__btns { width: auto; flex: none; }
  .sec--row .sec__btns .btn-ghost { min-height: 36px; padding: 0 14px; font-size: 12.5px; }
}
/* выбор сортировки над списком (телефон) — как остальные поля, со своей стрелкой */
.sortsel select { appearance: none; -webkit-appearance: none; padding-right: 34px; background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375716C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 13px; box-shadow: var(--sh); border-color: transparent; }
/* мини-приложение на компьютере и окна с мышью: ряды кнопок переносятся, а не прокручиваются вбок (колёсиком вбок не прокрутить) */
@media (max-width: 899px) and (hover: hover) and (pointer: fine) {
  .chips, .squads, .subtabs { flex-wrap: wrap; overflow-x: visible; }
}
@media (max-width: 899px) {
  .tools:not(.tools--f) > .btn-ghost, .tools:not(.tools--f) > .tools__add { flex: 1 1 auto; min-height: 36px; margin-left: 0; }
}
/* в строке поиска все кнопки одной высоты с полем поиска */
.tools > .btn-ghost.btn--s, .tools > .btn, .tools > .btn-ghost { min-height: 38px; }
.tools > .btn-ghost.btn--s { padding: 0 14px; font-size: 13px; }
/* все выпадающие списки — одной стрелкой, как поля формы (системная стрелка выглядела чужой) */
:is(main, .panel) select:not(.cell):not([multiple]):not(.st-select select) { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375716C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 13px; }
[data-sheet].is-swap { animation: sheetSwap 0.22s var(--ease) both; }
@keyframes sheetSwap { from { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { [data-sheet].is-swap { animation: none; } }
/* заголовок столбца: при наведении видно, что по нему можно отсортировать */
@media (hover: hover) {
  .sort:not(.is-on) i::after { content: '↕'; opacity: 0; transition: opacity 0.15s; }
  .sort:not(.is-on):hover i::after { opacity: 0.45; }
  /* «отсрочка» у неоплаченных — тихая, пока не наведёшь на строку; выбранная дата видна всегда */
  .tbl tbody tr:not(:hover):not(:focus-within) .defer:not(.is-set):not(.is-late) .defer__b { opacity: 0.4; }
  .defer__b { transition: opacity 0.15s; }
}
/* низ меню в одну строку: кто вошёл и переключатель темы значками */
.side__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.side__row .side__out { margin-left: auto; }
.theme--i { flex: none; gap: 0; padding: 2px; }
.theme--i button { display: grid; place-items: center; width: 28px; min-height: 28px; padding: 0; }
.theme--i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side__foot { gap: 6px; padding: 12px 14px 14px 16px; }
/* выезжающее меню на телефоне — сплошное: сквозь стекло просвечивали размытые кнопки страницы */
@media (max-width: 899px) { .side { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.side__row .side__out { white-space: nowrap; font-size: 11px; }
.btn-ghost.ftog.is-on, :root[data-theme='dark'] .btn-ghost.ftog.is-on { background: var(--ink); color: var(--ink-t); border-color: var(--ink); }
/* мелкие оранжевые метки с белыми цифрами — на тон темнее фирменного: белый текст читается (4,4:1 вместо 2,9:1) */
:root { --acc-chip: #D14C06; }
.badge, .badge--at, .bell__n, .tabbar__b, .cap, .faq__badge, .abl-new, .htile__n, .ftog b, .navg__h .badge { background: var(--acc-chip); }
.theme__l { display: none; }
.side__row.is-solo .theme--i { flex: 1; }
.side__row.is-solo .theme--i button { flex: 1; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 6px; font-size: 11.5px; }
.side__row.is-solo .theme__l { display: inline; }
/* скрипт продаж: фильтры «Тема» и «Ответ», найденное подсвечено */
.faq-f { margin-top: 4px; }
.faq-n { display: flex; align-items: center; gap: 10px; margin: -2px 0 12px; }
.faqs mark { background: var(--acc-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.seg2__b[data-k='faq-answered'] { --fc: var(--s-paid); } .seg2__b[data-k='faq-open'] { --fc: var(--acc); }
.faq-f .seg2__b:not([data-k])::before { display: none; }
@media (max-width: 899px) and (hover: none) {
  .faq-f .fgroup:first-child .seg2 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; }
  .faq-f .fgroup:first-child .seg2::-webkit-scrollbar { display: none; }
  .faq-f .seg2__b { flex: none; }
  .faq-f .fgroup { min-width: 0; width: 100%; }
}
.seg2__b[data-k='faq-all']::before { display: none; }
/* аналитика конкурентов: динамика за период — было, стало, кто прибавился и кто выпал */
.rvd { margin: 16px 0 8px; padding: 18px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.rvd__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.rvd__h .p-h { margin: 0; }
.rvd .seg2__b[data-k='rvd']::before { display: none; }
.rvd__sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 12px; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rvd__sum .up { color: var(--green-t); } .rvd__sum .down { color: var(--red-t); } .rvd__sum > span:not(.rvd__sum-n) { font-size: 16px; }
.rvd__sum-n { flex-basis: 100%; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--dim); }
.rvd__sum-n b { font-weight: 600; } .rvd__sum-n .up { color: var(--green-t); } .rvd__sum-n .down { color: var(--red-t); }
/* срез «было → стало»: полосы одной шкалы, остались — нейтрально, пришли — зелёным, ушли — красным */
.rvf { display: grid; gap: 8px; margin-bottom: 18px; }
.rvf__r { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; align-items: center; gap: 12px; }
.rvf__l { display: grid; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.rvf__l small { font-weight: 400; font-size: 11px; color: var(--dim); }
.rvf__b { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--field); }
.rvf__s { display: flex; align-items: center; justify-content: center; min-width: 22px; height: 100%; font-style: normal; font-size: 11.5px; font-weight: 600; transform-origin: left center; animation: rvfIn 0.5s var(--ease) both; }
.rvf__s + .rvf__s { border-left: 2px solid var(--panel); }
.rvf__s--stay { background: color-mix(in srgb, var(--text) 18%, transparent); color: var(--text); }
.rvf__s--came { background: var(--green-soft); color: var(--green-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green-t) 35%, transparent); }
.rvf__s--gone { background: var(--red-soft); color: var(--red-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red-t) 35%, transparent); }
.rvf__n { text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; }
.rvf__k { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 0 108px; font-size: 11.5px; color: var(--dim); }
.rvf__k span { display: inline-flex; align-items: center; gap: 6px; }
.rvf__d { width: 10px; height: 10px; border-radius: 3px; }
.rvf__d--stay { background: color-mix(in srgb, var(--text) 18%, transparent); } .rvf__d--came { background: var(--green-t); } .rvf__d--gone { background: var(--red-t); }
@keyframes rvfIn { from { transform: scaleX(0.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rvf__s { animation: none; } }
@media (max-width: 640px) { .rvf__r { grid-template-columns: 64px minmax(0, 1fr) 32px; gap: 8px; } .rvf__k { margin-left: 0; } .rvd__sum { font-size: 20px; } }
.rvd__c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rvd__c h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; }
.rvd__c h3 .up { color: var(--green-t); } .rvd__c h3 .down { color: var(--red-t); }
.rvd__l { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rvd__l li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 10px; border-radius: 10px; font-size: 13px; }
.rvd__l li.is-up { background: var(--green-soft); } .rvd__l li.is-down { background: var(--red-soft); }
.rvd__l li span { font-size: 12px; color: var(--dim); }
.rvd__e { font-size: 13px; }
@media (max-width: 640px) { .rvd { padding: 14px; } .rvd__c { grid-template-columns: 1fr; } }
.gb__i { display: flex; gap: 12px; align-items: flex-start; }
.gb__ic { width: 32px; height: 32px; border-radius: 10px; }
.gb__ic svg { width: 17px; height: 17px; }

/* ---------- фильтры состава: три строки — игроки, оплата, форма; в строке выбирается один вариант ---------- */
.fpanel { display: grid; margin: 0 0 14px; padding: 6px 16px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.fpanel__r { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 0; }
.fpanel__r + .fpanel__r { border-top: 1px solid var(--line); }
.fpanel__l { display: flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--text); }
.fpanel__l .q { width: 18px; height: 18px; margin-left: 6px; font-size: 10.5px; }
.fseg { display: flex; flex-wrap: wrap; gap: 2px; justify-self: start; max-width: 100%; padding: 3px; border-radius: 18px; background: var(--field); }
.fseg__b { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: var(--pill); font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: background-color 0.16s, color 0.16s, box-shadow 0.16s; }
.fseg__b b { font-weight: 600; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.fseg__b:hover { color: var(--text); }
.fseg__b.is-on { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgb(26 25 23 / 0.12); }
.fseg__b.is-on b { color: var(--text); }
/* цветная точка — только у вариантов со смыслом (оплатили, долг, пауза…) */
.fseg__b[data-k]::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--fc, transparent); }
.fseg__b[data-k='active'], .fseg__b[data-k='pause'], .fseg__b[data-k='injury'], .fseg__b[data-k='left'], .fseg__b[data-k^='pay-']:not([data-k='pay-all']), .fseg__b[data-k^='kit-']:not([data-k='kit-all']) { --dot: block; }
.fseg__b[data-k='active'] { --fc: var(--s-paid); } .fseg__b[data-k='pause'] { --fc: var(--s-trial); } .fseg__b[data-k='injury'] { --fc: var(--s-came); } .fseg__b[data-k='left'] { --fc: var(--s-noanswer); }
.fseg__b[data-k='pay-paid'] { --fc: var(--s-paid); } .fseg__b[data-k='pay-unpaid'] { --fc: var(--acc); } .fseg__b[data-k='pay-defer'] { --fc: var(--s-trial); } .fseg__b[data-k='pay-late'] { --fc: var(--s-noanswer); } .fseg__b[data-k='pay-own'] { --fc: var(--s-work); } .fseg__b[data-k='pay-free'] { --fc: var(--dim); }
.fseg__b[data-k='kit-has'] { --fc: var(--s-paid); } .fseg__b[data-k='kit-unknown'] { --fc: var(--dim); } .fseg__b[data-k='kit-none'] { --fc: var(--acc); }
.fseg__b::before { display: var(--dot, none); }
:root[data-theme='dark'] .fseg__b.is-on { background: rgb(255 255 255 / 0.14); box-shadow: none; }
@media (max-width: 899px) {
  .fpanel { padding: 4px 14px; }
  .fpanel__r { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; }
  .fpanel:not([hidden]) { animation: fgIn 0.26s var(--ease) both; }
}
/* телефон: варианты в строке прокручиваются пальцем; мышью — переносятся */
@media (max-width: 899px) and (hover: none) {
  .fseg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-self: stretch; }
  .fseg::-webkit-scrollbar { display: none; }
  .fseg__b { flex: none; }
}
.fsum { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: -4px 0 12px; font-size: 12.5px; color: var(--dim); }
.fsum b { color: var(--text); font-weight: 600; }
.fseg__b[data-k='faq-answered'] { --dot: block; --fc: var(--s-paid); } .fseg__b[data-k='faq-open'] { --dot: block; --fc: var(--acc); }
/* свёрнутая группа, в которой открыт текущий раздел: оранжевая точка у названия */
.navg__h.has-on > span::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--acc); vertical-align: 2px; }
/* конкуренты: показатели недели одной строкой в одной карточке, без россыпи плиток */
.rvk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 12px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); overflow: hidden; }
.rvk__i { display: grid; align-content: start; gap: 2px; padding: 14px 16px; min-width: 0; }
.rvk__i + .rvk__i { border-left: 1px solid var(--line); }
.rvk__i dt { font-size: 12px; color: var(--dim); }
.rvk__i dd { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rvk__i p { font-size: 12px; line-height: 1.4; color: var(--dim); }
.rvk__i p .up { color: var(--green-t); } .rvk__i p .down { color: var(--red-t); }
.rvk__i.is-main dd { color: var(--acc-t); }
@media (max-width: 1100px) { .rvk { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rvk__i:nth-child(4) { border-left: 0; } .rvk__i:nth-child(n + 4) { border-top: 1px solid var(--line); } }
@media (max-width: 640px) { .rvk { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rvk__i { border-left: 0 !important; border-top: 1px solid var(--line); } .rvk__i:nth-child(-n + 2) { border-top: 0; } .rvk__i:nth-child(even) { border-left: 1px solid var(--line) !important; } .rvk__i dd { font-size: 22px; } }
/* сводка расписания: показываем так, как она вставится в Telegram — жирный, подчёркивание, курсив */
.chat-text--rich { white-space: normal; }
.chat-text__b { font-size: 13px; line-height: 1.55; }
.chat-text__b b { font-weight: 700; } .chat-text__b u { text-underline-offset: 2px; } .chat-text__b i { font-style: italic; }

/* карточки составов одной высоты в ряду: низ с кнопками прижат книзу; у Lite подпись «с United / Rise» — в той же строке, Pro — одной строкой */
.club-sched--sq .club-sched__p small { display: inline; margin-left: 6px; }
.club-extra { display: block; padding: 8px 12px; }
.club-extra b { margin-right: 6px; }
/* низ меню: кто вошёл, ниже отдельной строкой по центру — переключатель темы со значками и подписями */
.side__foot { gap: 12px; padding: 14px 16px 16px; }
.side__row { display: flex; justify-content: center; }
.side__row .theme--i { flex: 1; max-width: 240px; }
.side__row .theme--i button { flex: 1; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 6px; font-size: 11.5px; }
.side__row .theme__l { display: inline; }
.side__foot > .side__out { justify-self: center; margin-top: -4px; white-space: nowrap; font-size: 11px; }
.ov-text { margin: 0 0 14px; }
.ov-text__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ov-text__h .p-h { margin: 0; }

/* ---------- руководство: два единых списка вместо плиток разной высоты ---------- */
.gl { display: grid; margin: 0 0 28px; padding: 4px 18px; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); }
.gl__r { display: grid; grid-template-columns: 32px 170px minmax(0, 1fr); align-items: start; gap: 4px 14px; padding: 12px 0; }
.gl__r + .gl__r { border-top: 1px solid var(--line); }
.gl__i { width: 32px; height: 32px; border-radius: 10px; }
.gl__i svg { width: 17px; height: 17px; }
.gl__r dt { padding-top: 6px; font-size: 13.5px; font-weight: 600; }
.gl__r dd { margin: 0; padding-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.gl__n { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--dim); }
.gxs { display: grid; border-radius: var(--r); background: var(--bg-2); box-shadow: var(--sh); overflow: hidden; }
.gx + .gx { border-top: 1px solid var(--line); }
.gx__s { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; transition: background-color 0.16s; }
.gx__s::-webkit-details-marker { display: none; }
.gx__s:hover { background: var(--hover); }
.gx__s:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.gx__t { display: grid; gap: 2px; min-width: 0; }
.gx__t b { font-size: 14.5px; font-weight: 600; }
.gx__t small { font-size: 12.5px; color: var(--dim); line-height: 1.4; }
.gx__ch { width: 16px; height: 16px; fill: none; stroke: var(--dim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate 0.22s var(--ease); }
.gx[open] .gx__ch { rotate: 180deg; }
.gx[open] { background: var(--hover); }
.gx[open] .gx__s:not(:hover) { background: transparent; }
.gx__b { display: grid; gap: 16px; justify-items: start; padding: 2px 18px 20px 68px; animation: gxIn 0.24s var(--ease) both; }
.gx__b .gd__s { gap: 10px; }
.gx__b .gd__s li { padding-left: 18px; font-size: 13.5px; }
.gx__b .gd__s li::before { content: ''; top: 0.72em; width: 8px; height: 2px; border-radius: 1px; background: var(--acc); }
@keyframes gxIn { from { opacity: 0; transform: translateY(-4px); } }
.view.is-enter :is(.gl, .gxs) { animation: cardIn 0.4s var(--ease) both; }
@media (max-width: 899px) {
  .gl { padding: 2px 14px; }
  .gl__r { grid-template-columns: 32px minmax(0, 1fr); }
  .gl__r dd { grid-column: 2; padding-top: 0; }
  .gx__s { padding: 12px 14px; gap: 12px; grid-template-columns: 32px minmax(0, 1fr) 16px; }
  .gx__b { padding: 2px 14px 16px 58px; }
}
@media (prefers-reduced-motion: reduce) { .gx__b { animation: none; } }
.glw__s { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.glw__s::-webkit-details-marker { display: none; }
.glw__s svg { width: 16px; height: 16px; fill: none; stroke: var(--dim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate 0.22s var(--ease); rotate: -90deg; }
.glw[open] .glw__s svg { rotate: 0deg; }
.glw:not([open]) { margin-bottom: 18px; }