/* SK Hockey · компоненты темы «Свитер». Токены — в theme.css (подключается раньше этого файла).
   Под другой клуб меняются --club-bg и --club-stripe в theme.css, здесь цвета не задаются. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 400 16px/1.4 var(--font-body); -webkit-text-size-adjust: 100%; padding-bottom: calc(24px + var(--safe-b)); }
body.has-tabbar { padding-bottom: calc(100px + var(--safe-b)); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--stripe); outline-offset: 2px; }
.wrap { max-width: 640px; margin: 0 auto; padding: 0 var(--pad-screen); }
/* Шапка: две полосы, как на подоле свитера */
.wrap::before { content: ""; display: block; height: calc(var(--stripes) * 2 + 3px); margin: 0 calc(-1 * var(--pad-screen)); background: var(--stripes-img); }
.splash, .empty { color: var(--muted); padding: 48px 4px; text-align: center; }
.empty p { margin: 0 0 16px; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); }

/* ---------- шапка экранов и подписи ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 10px; }
.top h1 { font: 700 22px/1.2 var(--font-display); margin: 0; letter-spacing: -.01em; }
.top h2 { font: 700 19px/1.25 var(--font-display); margin: 0; }
.back { display: inline-flex; align-items: center; min-height: var(--h-touch); background: none; border: 0; color: var(--muted); padding: 6px 0 0; font-size: 15px; font-weight: 600; }
.month, .subhead, .bench-title, .pick-group { font: 700 12px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.month { margin: 24px 0 8px; }
.subhead { margin: 16px 0 6px; }
.bench-title { margin: 24px 0 8px; }
.pick-group { margin: 14px 0 4px; }
.hint { color: var(--muted); font-size: 14px; margin: 8px 0; }
.lead { color: var(--muted); font-size: 15px; margin: 0 0 8px; }
.group-title { font: 700 15px/1.3 var(--font-display); margin: 28px 0 0; }
.group-note { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.title-logo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.title-text { min-width: 0; }
.title-text h1 { overflow-wrap: anywhere; }
.title-text small { display: block; color: var(--muted); font-size: 14px; margin-top: 3px; }

/* ---------- кнопки ---------- */
.btn-main { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--h-cta); border: 0; border-radius: var(--r-btn);
  padding: 0 18px; background: var(--text); color: var(--bg); font-weight: 700; font-size: 16px; }
.btn-main:disabled { opacity: .5; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--h-touch); padding: 0 16px; border: 0;
  border-radius: var(--r-pill); background: transparent; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-ghost.danger { color: var(--no); box-shadow: inset 0 0 0 1px rgba(255, 138, 122, .45); }
.btn-ghost:disabled { opacity: .5; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.btn-gear { flex: none; }
.btn-gear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.top-actions { display: flex; gap: 8px; flex: none; }
.more { display: block; width: 100%; margin: 14px 0 6px; background: none; border: 0; color: var(--muted); font-size: 15px; font-weight: 600; min-height: var(--h-touch); }

/* ---------- сегменты ---------- */
.seg { display: flex; gap: 4px; padding: 4px; margin: 6px 0 4px; background: var(--s1); border-radius: var(--r-pill); }
.seg > button, .seg > label { flex: 1; position: relative; min-height: 40px; border: 0; background: none; border-radius: var(--r-pill);
  color: var(--muted); font-size: 15px; font-weight: 600; text-align: center; }
.seg > button { padding: 0 8px; }
.seg > button.on { background: var(--text); color: var(--bg); }
.seg > label { padding: 0; cursor: pointer; }
.seg > label span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 6px; border-radius: var(--r-pill); }
.seg input { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg input:checked + span { background: var(--text); color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--stripe); }
.seg .cnt { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 11px;
  background: var(--s2); color: var(--text); font: 700 12px/1 var(--font-body); vertical-align: 1px; }
.seg .on .cnt { background: var(--bg); color: var(--text); }
.view-seg { margin: 22px 0 0; }

/* ---------- лента: события-билеты ---------- */
.ev { position: relative; display: grid; grid-template-columns: 68px 1fr; margin: 0 0 10px; background: var(--s1); border-radius: var(--r-btn); overflow: hidden; }
.ev-date { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 0;
  background: var(--s2); border-right: 2px dashed var(--bg); }
.ev-date::before, .ev-date::after { content: ""; position: absolute; right: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); }
.ev-date::before { top: -9px; }
.ev-date::after { bottom: -9px; }
.ev-date b { font: 700 26px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ev-date span { margin-top: 5px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ev.is-today .ev-date { background: var(--text); }
.ev.is-today .ev-date b, .ev.is-today .ev-date span { color: var(--bg); }
.ev.is-today .ev-date span { font-size: 10px; letter-spacing: .04em; }
.ev-body { padding: 14px 14px 13px 16px; min-width: 0; }
.ev-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ev-title { font-weight: 600; min-width: 0; }
.ev-vs { display: inline-flex; align-items: center; gap: 8px; }
.ev-time { font: 700 19px/1 var(--font-display); font-variant-numeric: tabular-nums; flex: none; }
.ev-place { color: var(--muted); font-size: 14px; margin: 3px 0 10px; }
.ev-meta { align-items: center; }
.ev-count { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; text-align: right; }
.ev-uni { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; padding: 2px; background: var(--kit); }
.ev.is-cancelled { opacity: .6; }
.ev.is-cancelled .ev-title, .ev.is-cancelled .ev-time { text-decoration: line-through; }
.chip { display: inline-block; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--s2); border-radius: var(--r-pill); padding: 2px 8px; margin-left: 6px; vertical-align: 1px; }

/* ---------- статусы отметки ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 8px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pill-yes { background: var(--yes-bg); color: var(--yes); }
.pill-maybe { background: var(--maybe-bg); color: var(--maybe); }
.pill-no { background: var(--no-bg); color: var(--no); }
.pill-wait { background: var(--res-bg); color: var(--res); }
.pill-none { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-weight: 500; }
.pill-none svg { stroke-dasharray: 2.6 2.4; stroke-width: 1.8; }

/* ---------- карточка события: афиша ---------- */
.ev-head { position: relative; margin: 12px 0 0; padding: 26px 18px 18px; background: var(--s1); border-radius: var(--r-hero); overflow: hidden; }
.ev-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--stripes) * 2 + 3px); background: var(--stripes-img); }
.ev-kind { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.clock { font: 800 56px/1 var(--font-display); color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 12px 0 6px; }
.ev-head.is-cancelled .clock { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 4px; }
.ev-day { font-size: 17px; font-weight: 600; }
.banner { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-field); background: rgba(255, 138, 122, .14); color: var(--no); font-weight: 600; }
.matchup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; margin: 16px 0 6px; }
.matchup .side { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.2; min-width: 0; }
.matchup .side > span:last-child { overflow-wrap: anywhere; }
.matchup .side .muted { font-weight: 400; font-size: 14px; }
.matchup .vs { font: 700 15px/1 var(--font-display); color: var(--muted); padding-top: 28px; }
.kit-card { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; padding: 10px; border-radius: var(--r-card); background: var(--s2); }
.kit-card .uni-img { width: 80px; height: 80px; flex: none; }
.kit-card small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.kit-card b { display: block; margin-top: 3px; font-size: 17px; line-height: 1.25; }

.facts { list-style: none; margin: 10px 0 0; padding: 2px 16px; background: var(--s1); border-radius: var(--r-card); }
.facts li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; padding: 13px 0; border-top: 1px solid var(--line); }
.facts li:first-child { border-top: 0; }
.facts .ic { color: var(--muted); }
.facts small { display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.facts a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.facts .note { white-space: pre-wrap; }

.signup { display: grid; margin: 10px 0 0; background: var(--s1); border-radius: var(--r-card); }
.signup div { min-width: 0; padding: 14px 4px 12px; text-align: center; border-left: 1px solid var(--line); }
.signup div:first-child { border-left: 0; }
.signup b { display: block; font: 700 26px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.signup span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.2; }
.signup .none b { color: var(--no); }
.signup .free b { color: var(--yes); }
.signup .full b { color: var(--res); }

.choose { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 6px; }
.choose button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--h-cta); padding: 0 4px; border: 0;
  border-radius: var(--r-btn); background: var(--s1); font-size: 15px; font-weight: 700; }
.choose button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.choose button.on[data-st="yes"] { background: var(--yes); color: var(--yes-ink); }
.choose button.on[data-st="maybe"] { background: var(--maybe); color: var(--maybe-ink); }
.choose button.on[data-st="no"] { background: var(--no); color: var(--no-ink); }
.choose button.on.is-wait { background: var(--res); color: #1E1230; }
.choose.is-closed button:not(.on) { opacity: .45; }
.pause-note { margin: 10px 0 0; padding: 12px 14px; border-radius: var(--r-field); background: var(--s2); color: var(--text); font-size: 14px; }

.tabs { display: flex; gap: 8px; overflow-x: auto; margin: 16px calc(-1 * var(--pad-screen)) 0; padding: 0 var(--pad-screen) 2px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--s1); color: var(--muted); font-size: 14px; font-weight: 600; }
.tabs button b { margin-left: 6px; color: var(--text); font: 700 14px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tabs button.on { background: var(--s2); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); }

/* ---------- списки игроков ---------- */
.card { margin: 8px 0 0; padding: 4px 16px; background: var(--s1); border-radius: var(--r-card); }
.pl { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 0;
  border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.card > .pl:last-child, .sheet-list > .pl:last-child { border-bottom: 0; }
.pl-name { font-size: 16px; font-weight: 500; line-height: 1.25; min-width: 0; }
.pl-name small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; margin-top: 1px; }
.pl-name .tag { color: var(--stripe); }
.pl-num { min-width: 28px; text-align: right; color: var(--muted); font: 700 18px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.pl-actions { display: flex; gap: 6px; }

.ava { --s: 44px; position: relative; width: var(--s); height: var(--s); flex: none; }
.ava img, .ava span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; object-fit: cover; }
.ava span { font-weight: 700; font-size: calc(var(--s) * .36); color: var(--cream); background: var(--ava-1); }
.ava[data-h="1"] span { background: var(--ava-2); }
.ava[data-h="2"] span { background: var(--ava-3); }
.ava[data-h="3"] span { background: var(--ava-4); }
.ava[data-h="4"] span { background: var(--ava-5); }
.ava i { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); box-shadow: 0 0 0 2px var(--s1); color: var(--text); font: 700 11px/1 var(--font-body); font-style: normal; }

.kv { list-style: none; margin: 10px 0 0; padding: 2px 16px; background: var(--s1); border-radius: var(--r-card); }
.kv li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.kv li:last-child { border-bottom: 0; }
.kv li span:first-child { color: var(--muted); }
.kv li span:last-child { text-align: right; }
.kv a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- формы ---------- */
.form { padding-bottom: 20px; }
.fld { display: block; margin: 16px 0; }
.fld > span { display: block; color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.fld input:not([type="radio"]):not([type="checkbox"]), .fld select, .fld textarea, .search {
  width: 100%; min-height: var(--h-field); padding: 0 16px; border: 0; border-radius: var(--r-field); background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line); color-scheme: dark; font-size: 16px; outline: none; }
.fld textarea, textarea.search { min-height: 96px; padding: 14px 16px; resize: vertical; line-height: 1.4; }
.fld select { appearance: none; -webkit-appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6ECDD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.fld input:not([type="radio"]):not([type="checkbox"]):focus, .fld select:focus, .fld textarea:focus, .search:focus { box-shadow: inset 0 0 0 2px var(--text); }
.card .fld input:not([type="radio"]):not([type="checkbox"]), .card .fld select, .card .fld textarea,
.sheet .fld input:not([type="radio"]):not([type="checkbox"]), .sheet .fld select, .sheet .fld textarea, .sheet .search,
.remind-box .fld input:not([type="radio"]):not([type="checkbox"]), .remind-box .fld select { background-color: var(--s2); }
.search { margin: 0 0 10px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.two .fld { margin: 0; }
.checks { display: flex; flex-direction: column; gap: 8px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 14px; border-radius: var(--r-field); background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font-weight: 500; }
.check:has(input:checked) { background: var(--s2); box-shadow: inset 0 0 0 1.5px var(--text); }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--text); }
.form > .check { margin: 16px 0 6px; }
.sheet .check { background: var(--s2); margin: 0 0 12px; }
.switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 16px 0; cursor: pointer; }
.switch-row b { display: block; font-weight: 600; }
.switch-row small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.switch { position: relative; flex: none; width: 50px; height: 30px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 15px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked + span { background: var(--text); box-shadow: none; }
.switch input:checked + span::after { background: var(--bg); transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--stripe); outline-offset: 2px; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.days label { position: relative; cursor: pointer; }
.days input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.days span { display: grid; place-items: center; min-height: 44px; border-radius: var(--r-tile); background: var(--s1); color: var(--muted); font-size: 14px; font-weight: 600; }
.days input:checked + span { background: var(--text); color: var(--bg); }
.days input:focus-visible + span { outline: 2px solid var(--stripe); }
.ava-edit { display: flex; align-items: center; gap: 16px; margin: 10px 0 6px; }
.ava-btns { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.team-pick select { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: var(--r-field); background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line); color-scheme: dark; font-size: 16px; }

/* ---------- нижняя панель ---------- */
/* Капсула внизу экрана, как панель в Telegram: висит над краем, под ней виден фон */
#tabbar { position: fixed; left: 12px; right: 12px; bottom: max(10px, calc(var(--safe-b) - 12px)); z-index: 5; display: flex; gap: 2px;
  max-width: 520px; margin: 0 auto; padding: 5px; box-sizing: border-box; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tabbar) 90%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(246, 236, 221, .09), 0 10px 30px rgba(0, 0, 0, .5); }
@supports not (color: color-mix(in srgb, red, blue)) { #tabbar { background: rgba(12, 5, 7, .88); } }
#tabbar a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 54px;
  border-radius: var(--r-pill); color: var(--muted); font-size: 11px; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; }
#tabbar svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
#tabbar a.on { color: var(--stripe); background: rgba(246, 236, 221, .1); }
/* Клавиатура открыта — панель прячем, чтобы не всплывала над ней */
@media (pointer: coarse) { body.kb #tabbar { display: none; } }

/* ---------- шторка и тост ---------- */
#sheet { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-end; background: var(--scrim); }
.sheet { width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; margin: 0 auto; padding: 10px 16px calc(18px + var(--safe-b));
  background: var(--s1); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .45); animation: up .18s ease-out; }
.sheet::before { content: ""; display: block; width: 40px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--line); }
.sheet h3 { margin: 0 0 12px; font: 700 17px/1.3 var(--font-display); }
.sheet .opt { position: relative; display: block; width: 100%; min-height: 52px; margin: 6px 0; padding: 14px 16px; border: 0; border-radius: var(--r-field);
  background: var(--s2); text-align: left; font-weight: 600; }
.sheet .opt small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; font-weight: 400; }
.sheet .opt.cur { box-shadow: inset 0 0 0 2px var(--text); padding-right: 48px; }
.sheet .opt.cur::after { content: ""; position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--text); background: radial-gradient(var(--text) 0 4px, transparent 4.5px); }
.sheet .opt.muted { background: none; color: var(--muted); font-weight: 500; }
.sheet .opt.danger { color: var(--no); }
.sheet label.opt { cursor: pointer; }
.sheet .btn-main { margin: 6px 0; }
.sheet .form { padding-bottom: 4px; }
.sheet-list { max-height: 55vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.sheet #invite-link { font-size: 14px; }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
#toast { position: fixed; left: 50%; bottom: calc(86px + var(--safe-b)); z-index: 20; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  min-height: 44px; max-width: 90vw; padding: 10px 18px 10px 14px; border-radius: var(--r-pill); background: var(--text); color: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-size: 15px; font-weight: 600; }
#toast svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } .switch span, .switch span::after { transition: none; } }

/* ---------- сгруппированные строки (управление, настройки) ---------- */
.tools { margin: 8px 0 0; padding: 0 16px; background: var(--s1); border-radius: var(--r-card); }
.tool { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; text-align: left; }
.tool:last-child { border-bottom: 0; }
.tool .tile { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--s2); color: var(--stripe); }
.tool b { display: block; font-size: 16px; font-weight: 600; }
.tool small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.tool::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 auto; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); }

/* ---------- логотипы и форма ---------- */
.logo { --s: 40px; width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden;
  vertical-align: middle; background: var(--crest); }
.logo img { width: 84%; height: 84%; object-fit: contain; }
.logo.mono { background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 700 calc(var(--s) * .32)/1 var(--font-display); }
.uni-img { display: grid; place-items: center; overflow: hidden; border-radius: var(--r-tile); background: var(--kit); color: #8A7D6E; }
.uni-img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.uni-img .shirt { width: 58%; height: 58%; }
.uni-none { font: 700 26px/1 var(--font-display); color: #8A7D6E; }
.kit-logo { display: flex; align-items: center; gap: 16px; margin: 14px 0 0; padding: 14px; border-radius: var(--r-card); background: var(--s1); }
.kit-logo b { display: block; font-weight: 600; }
.kit-logo small { display: block; margin: 2px 0 10px; color: var(--muted); font-size: 13px; }
.kit-logo.in-sheet { margin: 0 0 4px; background: var(--s2); }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 28px 0 10px; }
.sec-head h3 { margin: 0; font: 700 17px/1.3 var(--font-display); }
.unis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.uni { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; text-align: center; }
.uni .uni-img { width: 100%; aspect-ratio: 1; }
.uni b { font-size: 13px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.uni small { margin-top: -4px; color: var(--muted); font-size: 12px; }
.uni.off .uni-img, .opp.off .logo { opacity: .45; }
.uni:disabled, .opp:disabled { cursor: default; color: inherit; }
.uni-big { display: flex; justify-content: center; margin: 0 0 10px; }
.uni-big .uni-img { width: 168px; height: 168px; }
.opp .logo { --s: 44px; }
.opp-pick { display: flex; align-items: center; gap: 10px; }
.opp-pick select { flex: 1; min-width: 0; }
.uni-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.uni-pick { position: relative; min-width: 0; cursor: pointer; }
.uni-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.uni-pick > span { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 6px 6px 10px; border-radius: var(--r-field); background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.uni-pick .uni-img { width: 100%; aspect-ratio: 1; border-radius: 11px; }
.uni-pick b { font-size: 13px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.uni-pick input:checked + span { background: var(--s2); box-shadow: inset 0 0 0 2px var(--text); }
.uni-pick input:focus-visible + span { outline: 2px solid var(--stripe); outline-offset: 2px; }

/* ---------- напоминания, уведомления ---------- */
.remind-box { margin: 18px 0; padding: 0 16px; border-radius: var(--r-card); background: var(--s1); }
.remind-box summary { list-style: none; cursor: pointer; padding: 14px 0; }
.remind-box summary::-webkit-details-marker { display: none; }
.remind-box summary b { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.remind-box summary b::after { content: "Изменить"; color: var(--muted); font-weight: 500; font-size: 14px; }
.remind-box[open] summary b::after { content: "Свернуть"; }
.remind-box summary small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }
.remind-box > .hint { margin: 0 0 14px; }
.auds { display: grid; gap: 6px; margin: 10px 0; }
.aud { position: relative; cursor: pointer; }
.aud input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.aud > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: var(--r-field); background: var(--s2); }
.aud b { font-weight: 600; }
.aud small { color: var(--muted); font-size: 13px; white-space: nowrap; }
.aud input:checked + span { box-shadow: inset 0 0 0 2px var(--text); }
.aud input:focus-visible + span { outline: 2px solid var(--stripe); }
.aud.off { opacity: .45; cursor: default; }
.hist { list-style: none; margin: 6px 0 4px; padding: 0; }
.hist li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.hist li b { color: var(--text); font-weight: 600; }
.hist li span { display: block; margin-top: 2px; color: var(--text); white-space: pre-wrap; }
.sch { display: block; width: 100%; margin: 10px 0 0; padding: 16px; border: 0; border-radius: var(--r-card); background: var(--s1); text-align: left; }
.sch b { display: block; font-size: 17px; font-weight: 700; }
.sch span { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; }
.sch.off { opacity: .6; }

/* ---------- звенья ---------- */
.lu-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.lu-status { margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.lu-status.warn { color: var(--stripe); }
.lu-publish { margin: 12px 0 0; }
.lu-me { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-field);
  background: var(--stripe-bg); box-shadow: inset 0 0 0 1px var(--stripe-line); font-weight: 600; }
.lu-me .jersey-ic { width: 30px; height: 30px; }
.goalies { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.goalie-card { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px; border: 0; border-radius: var(--r-field); background: var(--s1); text-align: left; }
.goalie-card .ava { --s: 40px; }
.goalie-card small { display: block; color: var(--muted); font-size: 12px; }
.goalie-card.me { box-shadow: inset 0 0 0 2px var(--stripe); }
.goalie-card .q { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 2px dashed var(--line); color: var(--muted); }
.line-card { --j: var(--text); position: relative; margin: 16px 0 0; padding: 22px 12px 12px; border-radius: var(--r-hero); background: var(--s1); overflow: hidden; }
.line-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--stripes) * 2 + 3px);
  background: linear-gradient(var(--j) 0 var(--stripes), transparent var(--stripes) calc(var(--stripes) + 3px), var(--j) calc(var(--stripes) + 3px) calc(var(--stripes) * 2 + 3px)); }
.line-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 4px 12px; }
.line-title { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 17px/1.2 var(--font-display); }
.jersey-ic { width: 30px; height: 30px; flex: none; }
.jersey-ic path { fill: var(--j); stroke: rgba(246, 236, 221, .55); stroke-width: 1.2; stroke-linejoin: round; }
.line-color { padding: 4px 0; border: 0; background: none; color: var(--muted); font-size: 14px; white-space: nowrap; }
button.line-color { min-height: var(--h-touch); color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.rink { position: relative; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 300 / 330; }
.rink svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rink .ice { fill: var(--ice); }
.rink .r-red { stroke: var(--rink-red); fill: none; }
.rink .r-dot { fill: var(--rink-red); }
.rink .r-blue { stroke: var(--rink-blue); }
.rink .r-crease { fill: var(--crease); stroke: var(--rink-red); }
.rink .r-net { fill: #FBF8F3; stroke: var(--ice-ink); stroke-opacity: .45; }
.slot { position: absolute; transform: translate(-50%, -50%); width: 100px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 0; border: 0; background: none; color: var(--ice-ink); }
.slot .ava { --s: 48px; }
.slot .ava img, .slot .ava span { box-shadow: 0 0 0 3px var(--j), 0 0 0 4.5px var(--ice-ink); }
.slot .ava i { box-shadow: 0 0 0 2px var(--ice); }
.slot.me .ava img, .slot.me .ava span { box-shadow: 0 0 0 3px var(--j), 0 0 0 4.5px var(--ice-ink), 0 0 0 8px var(--stripe); }
.slot .nm { max-width: 100px; padding: 3px 8px; overflow: hidden; border-radius: var(--r-pill); background: var(--bg); color: var(--text);
  font-size: 12px; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.slot .q { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px dashed rgba(42, 23, 28, .4);
  color: rgba(42, 23, 28, .65); font: 700 12px/1 var(--font-display); }
.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 6px; }
.swatch { display: flex; align-items: center; flex-wrap: wrap; min-height: 52px; padding: 12px; border: 0; border-radius: var(--r-field); background: var(--s2); text-align: left; font-weight: 600; }
.swatch small { flex-basis: 100%; margin: 2px 0 0 21px; color: var(--muted); font-size: 12px; font-weight: 400; }
.swatch.cur { box-shadow: inset 0 0 0 2px var(--text); }
.jersey { display: inline-block; width: 14px; height: 14px; margin-right: 7px; border-radius: 4px; background: var(--j); box-shadow: inset 0 0 0 1px rgba(246, 236, 221, .45); vertical-align: -2px; }

/* Цвета свитеров звеньев — данные, от темы не зависят */
.jersey-white { --j: var(--jersey-white); }
.jersey-blue { --j: var(--jersey-blue); }
.jersey-green { --j: var(--jersey-green); }
.jersey-red { --j: var(--jersey-red); }
.jersey-yellow { --j: var(--jersey-yellow); }
.jersey-orange { --j: var(--jersey-orange); }
.jersey-black { --j: var(--jersey-black); }
.jersey-gray { --j: var(--jersey-gray); }
.jersey-none { --j: var(--text); }

/* ---------- v0.9: комментарии ---------- */
.org-note { margin: 10px 0 0; padding: 14px 16px; border-radius: var(--r-card); background: var(--stripe-bg); box-shadow: inset 0 0 0 1px var(--stripe-line); }
.org-note-h { display: flex; align-items: center; gap: 8px; color: var(--stripe); }
.org-note-h .ic { width: 18px; height: 18px; }
.org-note-h small { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.org-note p { margin: 8px 0 0; font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.org-note .by { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.ev-note { display: flex; align-items: center; gap: 6px; min-width: 0; margin: -4px 0 10px; color: var(--stripe); font-size: 13px; }
.ev-note .ic { width: 15px; height: 15px; }
.ev-note span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-note, .add-note { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 2px 0 6px; padding: 10px 14px; border: 0;
  border-radius: var(--r-field); text-align: left; }
.my-note { background: var(--s1); }
.my-note .ic { width: 18px; height: 18px; color: var(--muted); }
.my-note span { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.my-note b { flex: none; color: var(--muted); font-size: 13px; font-weight: 600; }
.add-note { flex-direction: column; align-items: flex-start; gap: 1px; background: none; border: 1.5px dashed var(--line); font-size: 15px; font-weight: 600; }
.add-note small { color: var(--muted); font-size: 13px; font-weight: 400; }
.att-note { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--stripe); font-size: 13px; line-height: 1.3; }
.att-note .ic { width: 14px; height: 14px; flex: none; }
.note-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip-btn { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--s2); color: var(--text); font-size: 14px; font-weight: 500; }

/* ---------- v0.10: тестирование ---------- */
.feat { margin: 8px 0 0; padding: 14px 16px 12px; border-radius: var(--r-card); background: var(--s1); }
.feat b { display: block; font-weight: 600; }
.feat small { display: block; margin: 3px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.feat .seg { margin: 0; background: var(--s2); }
.feat .seg > button { min-height: 36px; font-size: 14px; }
.tester-row { margin: 4px 0 16px; padding: 14px 16px; border-radius: var(--r-card); background: var(--s1); }

/* ---------- v0.11: дни рождения ---------- */
.bday-in { color: var(--muted); font-size: 13px; white-space: nowrap; }
.bday-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 999px;
  background: var(--stripe); color: var(--club-bg); font: 700 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.bday-chip .ic { width: 16px; height: 16px; }
.bday-now .pl-name small { color: var(--stripe); }
.bday-ic { display: inline-flex; vertical-align: -3px; margin-left: 6px; color: var(--stripe); }
.bday-ic .ic { width: 18px; height: 18px; }
.bday-note { margin: 6px 0 16px; }

/* ---------- v0.12: взносы ---------- */
.dues-banner, .dues-card { display: flex; align-items: center; gap: 14px; width: 100%; margin: 4px 0 14px; padding: 12px 16px; border: 0;
  border-radius: var(--r-card); background: var(--s1); text-align: left; box-shadow: inset 4px 0 0 var(--stripe); }
.dues-banner.late { box-shadow: inset 4px 0 0 var(--no); }
.dues-banner.wait { box-shadow: inset 4px 0 0 var(--res); }
.dues-banner .tile, .dues-card .tile { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--s2); color: var(--stripe); }
.dues-banner b { display: block; font-weight: 600; }
.dues-banner small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.dues-banner.late small { color: var(--no); }
.dues-card-t { flex: 1; min-width: 0; }
.dues-card-t small { display: block; color: var(--muted); font-size: 13px; }
.dues-card-t b { display: block; font: 700 20px/1.2 var(--font-display); }
.dues-st { flex: none; padding: 6px 10px; border-radius: 999px; background: var(--s2); font-size: 13px; font-weight: 600; }
.dues-card.st-paid .dues-st { background: var(--yes); color: var(--yes-ink); }
.dues-card.st-none .dues-st { background: var(--no); color: var(--no-ink); }
.dues-card.st-claimed .dues-st { background: var(--res); color: var(--bg); }
.pay-sum { margin: 2px 0 0; font: 800 34px/1.1 var(--font-display); }
.pay-card { margin: 14px 0 6px; padding: 14px 16px; border-radius: var(--r-field); background: var(--s2); }
.pay-card small { display: block; color: var(--muted); font-size: 13px; }
.pay-card b { display: block; margin: 4px 0; font: 600 22px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; user-select: all; -webkit-user-select: all; }
.dues-month { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 12px; }
.dues-month b { font: 700 18px/1.2 var(--font-display); }
.dues-month .btn-ghost { min-width: 44px; padding: 0; font-size: 22px; }
.dues-warn { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-field); background: var(--s1); color: var(--muted); font-size: 14px; box-shadow: inset 4px 0 0 var(--no); }
button.link { padding: 0; border: 0; background: none; color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.budget { padding: 16px; border-radius: var(--r-card); background: var(--s1); }
.budget-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.budget-top small { display: block; color: var(--muted); font-size: 13px; }
.budget-top b { display: block; font: 800 28px/1.15 var(--font-display); }
.budget-goal { text-align: right; }
.budget-goal span { font: 700 16px/1.3 var(--font-display); color: var(--muted); }
.bar { display: block; height: 10px; margin: 12px 0 8px; border-radius: 999px; background: var(--s2); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--stripe); }
.budget-sub { font-size: 14px; }
.budget-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 10px; }
.budget-stats span { padding: 8px 4px; border-radius: 12px; background: var(--s2); color: var(--muted); font-size: 11px; line-height: 1.2; text-align: center; }
.budget-stats b { display: block; margin-bottom: 2px; color: var(--text); font: 700 18px/1.2 var(--font-display); }
.budget-stats .st-paid b { color: var(--yes); }
.budget-stats .st-claimed b { color: var(--res); }
.budget-stats .st-none b { color: var(--no); }
.budget-note { display: block; color: var(--muted); font-size: 12px; }
.dues-pl { cursor: pointer; }
.btn-ghost.small { min-height: 36px; padding: 0 12px; font-size: 14px; }
.pl-num.ok { color: var(--yes); }
.pl-num.ok .ic, .pl-num.ok svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.hist { padding: 4px 16px; }
.hist-row { display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 0;
  border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.hist-row:last-child { border-bottom: 0; }
.hist-row.on .hist-m { font-weight: 700; }
.hist-row .bar { margin: 0; height: 8px; }
.hist-n { font: 600 14px/1.2 var(--font-display); white-space: nowrap; }
.hist-n small { color: var(--muted); font-weight: 400; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 8px; }
.chip-btn { min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--s2); font-size: 14px; }
.chip-btn.ghost { background: none; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.tg-preview { margin: 8px 0 16px; padding: 12px; border-radius: var(--r-card); background: var(--s1); }
.tg-bubble { padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--s2); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.tg-bubble code { padding: 1px 4px; border-radius: 4px; background: var(--bg); color: var(--stripe); font: 14px ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.tg-kb { display: grid; gap: 4px; margin-top: 4px; }
.tg-kb span { padding: 9px; border-radius: 10px; background: var(--s2); color: var(--muted); font-size: 13px; text-align: center; }
.dues-card-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- v0.13: карточка события — билет с корешком ---------- */
.ev-head { --stub: color-mix(in oklab, var(--bg), var(--cream) 16%); --perf: color-mix(in oklab, var(--bg), var(--cream) 28%); }
@supports not (color: color-mix(in oklab, red, blue)) { .ev-head { --stub: #3B2A2E; --perf: #5A4A4C; } }
.ev-head.has-stub { padding-bottom: 0; }
.ev-meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.ev-meta::-webkit-scrollbar { display: none; }
.ev-meta > * { display: inline-flex; align-items: center; gap: 4px; flex: none; min-width: 0; min-height: 32px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; }
.ev-meta .ic { width: 16px; height: 16px; flex: none; color: var(--muted); }
.ev-meta button { cursor: pointer; }
.ev-meta .m-arena { flex: 0 1 auto; min-width: 5em; }
.ev-meta .m-arena span { overflow: hidden; text-overflow: ellipsis; text-decoration: underline; text-decoration-color: var(--perf); text-underline-offset: 3px; }
.ev-meta .m-muted { color: var(--muted); }
.ev-perf { position: relative; height: 22px; margin: 14px -18px 0;
  background: repeating-linear-gradient(90deg, var(--perf) 0 8px, transparent 8px 14px) 18px 10px / calc(100% - 36px) 2px no-repeat,
              linear-gradient(var(--s1) 0 50%, var(--stub) 50% 100%); }
.ev-perf::before, .ev-perf::after { content: ""; position: absolute; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); }
.ev-perf::before { left: -11px; }
.ev-perf::after { right: -11px; }
.ev-stub { margin: 0 -18px; padding: 6px 16px 12px; background: var(--stub); }
.stub-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.stub-h b { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--stripe); }
.stub-h span { font-size: 13px; color: var(--muted); text-align: right; }
.stub-h.st-yes b { color: var(--yes); }
.stub-h.st-maybe b { color: var(--maybe); }
.stub-h.st-no b { color: var(--no); }
.stub-h.st-wait b { color: var(--res); }
.ev-stub .choose { margin: 10px 0 0; }
.ev-stub .choose button { flex-direction: column; gap: 2px; min-height: 64px; background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--c); }
.ev-stub .choose button[data-st="yes"] { --c: var(--yes); }
.ev-stub .choose button[data-st="maybe"] { --c: var(--maybe); }
.ev-stub .choose button[data-st="no"] { --c: var(--no); }
.ev-stub .choose button svg { width: 22px; height: 22px; color: var(--c); }
.ev-stub .choose.has-mark button:not(.on) { box-shadow: none; color: var(--muted); }
.ev-stub .choose button.on { box-shadow: none; }
.ev-stub .choose button.on svg { color: inherit; }
.ev-stub .add-note { flex-direction: row; align-items: center; gap: 10px; min-height: 48px; margin: 6px 0 0; padding: 4px 2px; border: 0; background: none;
  color: var(--stripe); font-size: 15px; font-weight: 600; text-align: left; }
.ev-stub .add-note .ic { width: 18px; height: 18px; flex: none; }
.ev-stub .add-note small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.ev-stub .add-note:disabled { opacity: .45; }
.ev-stub .my-note { margin: 8px 0 0; background: var(--bg); }
.ev-stub .my-note .ic { color: var(--stripe); }
.ev-stub .my-note b { color: var(--stripe); }
.ev-stub .hint { margin: 8px 0 0; font-size: 13px; }
.ev-stub .pause-note { background: var(--bg); }
.note-st { margin: 0 0 12px; }
.subhead.split { display: flex; justify-content: space-between; gap: 8px; }
.subhead .none { color: var(--no); }
.staff-row { gap: 6px; margin: 12px 0 0; }

/* ---------- v0.14: заголовок ленты — название своей команды ---------- */
.top h1.long { font-size: 18px; line-height: 1.25; min-width: 0; }
.top h1.long span { display: block; }

/* ---------- v0.15: вход из браузера, установка, устройства ---------- */
.login { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 0 24px; }
.login h1 { margin: 18px 0 6px; font: 700 26px/1.2 var(--font-display); }
.login .lead { max-width: 340px; }
.login .banner { align-self: stretch; }
.login-logo { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
#login-box { align-self: stretch; margin-top: 18px; }
.tg-login { gap: 10px; text-decoration: none; }
.tg-login .ic { width: 22px; height: 22px; }
.login-check { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; justify-content: center; margin: 14px 0 0; padding: 12px 16px;
  border-radius: var(--r-field); background: var(--s1); }
.login-check span { color: var(--muted); font-size: 14px; }
.login-check b { font: 700 24px/1 var(--font-display); letter-spacing: .18em; color: var(--stripe); }
.login-check small { width: 100%; color: var(--muted); font-size: 12px; }
.login-wait { margin: 16px 0 0; color: var(--muted); font-size: 14px; text-align: center; }
.login-wait .dot { display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--stripe); animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .login-wait .dot { animation: none; } }
.login-alt { margin: 22px 0 0; text-align: left; color: var(--muted); font-size: 14px; }
.login-alt summary { cursor: pointer; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.login-alt p { margin: 12px 0 8px; }
.login-alt a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.copy-line { display: flex; align-items: center; gap: 8px; }
.copy-line code { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 10px 12px; border-radius: 12px; background: var(--s1); color: var(--text);
  font: 14px ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

.install-card, .install-banner .ib-main { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 0;
  border-radius: var(--r-card); background: var(--s1); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.install-card { margin: 8px 0 0; box-shadow: inset 4px 0 0 var(--stripe); }
.install-card .tile, .install-banner .tile, .dev .tile { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: var(--s2); color: var(--stripe); }
.install-card b, .install-banner b { display: block; font-weight: 600; }
.install-card small, .install-banner small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.install-banner { position: relative; margin: 4px 0 14px; }
.install-banner .ib-main { padding-right: 52px; box-shadow: inset 4px 0 0 var(--stripe); }
.install-banner .ib-x { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; transform: translateY(-50%);
  border: 0; background: none; color: var(--muted); cursor: pointer; }
.install-banner .ib-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.web-card { padding: 14px 16px 6px; border-radius: var(--r-card); background: var(--s1); }
.web-card p { margin: 0; font-size: 15px; }
.web-card .btn-row { margin: 12px 0 8px; }
.btn-ghost .ic { width: 18px; height: 18px; }
.devs { padding: 0 16px; border-radius: var(--r-card); background: var(--s1); }
.dev { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dev:last-child { border-bottom: 0; }
.dev-t { flex: 1; min-width: 0; }
.dev-t b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-t small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.dev .btn-ghost { flex: none; min-height: 36px; padding: 0 12px; }
.steps { margin: 4px 0 12px; padding-left: 22px; }
.steps li { margin: 0 0 10px; line-height: 1.45; }
.steps .ic { width: 18px; height: 18px; vertical-align: -3px; color: var(--stripe); }


/* ---------- v0.16: пуш-уведомления ---------- */
.push-card { display: flex; align-items: center; gap: 14px; margin: 8px 0 0; padding: 12px 16px; border-radius: var(--r-card); background: var(--s1); }
.push-card .tile { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--s2); color: var(--stripe); }
.push-card.on .tile { background: var(--yes-bg); color: var(--yes); }
.push-card b { display: block; font-weight: 600; }
.push-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.push-on { margin-top: 10px; }
.field-label { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.seg.nch > label span { font-size: 15px; }

/* Тост не сжимается до половины экрана (left: 50% + translate) */
#toast { width: max-content; max-width: calc(100vw - 32px); }

/* ---------- v0.17: вкладка «Штаб», профиль-меню ---------- */
#tabbar a { position: relative; }
#tabbar a[hidden] { display: none; }
.tab-badge { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
  box-shadow: 0 0 0 2px var(--tabbar);
  background: var(--no); color: var(--no-ink); font: 700 11px/18px var(--font-body); text-align: center; }
.tab-badge[hidden] { display: none; }

.inbox { margin: 4px 0 6px; padding: 2px 16px; border-radius: var(--r-card); background: var(--stripe-bg); box-shadow: inset 0 0 0 1px var(--stripe-line); }
.inbox-h { margin: 12px 0 2px; font: 700 12px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--stripe); }
.inbox .pl { border-bottom: 1px solid var(--stripe-line); }
.inbox .pl:last-child, .inbox .tool:last-child { border-bottom: 0; }
.inbox .tool { border-bottom: 1px solid var(--stripe-line); }
.inbox .pl-actions .btn-ghost { min-height: 36px; padding: 0 12px; }
.staff-seg { margin-top: 22px; }
.staff-seg > button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-h span { text-transform: none; letter-spacing: 0; font-weight: 400; }

.me-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-radius: var(--r-card); background: var(--s1);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.me-card::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 auto; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); }
.me-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-t b { font-size: 18px; font-weight: 600; }
.me-t small { color: var(--muted); font-size: 13px; }
.me-t em { font-style: normal; color: var(--stripe); font-size: 13px; font-weight: 600; }
.pause-card { margin: 10px 0 14px; padding: 14px 16px; border-radius: var(--r-card); background: var(--s1); align-items: center; }

/* ---------- v0.18: справочник арен, «потянуть, чтобы обновить» ---------- */
.arena-info:empty { display: none; }
.arena-info { margin: -8px 0 16px; display: flex; flex-direction: column; gap: 4px; }
.arena-info small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.arena-map { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; padding: 4px 0; border: 0; background: none;
  color: var(--stripe); font: 600 14px/1.3 var(--font-body); text-align: left; cursor: pointer; }
.arena-map .ic { width: 16px; height: 16px; flex: none; }
.arena-map span { min-width: 0; overflow-wrap: anywhere; }
.arena-other { margin: -4px 0 0; padding: 2px 14px 12px; border-radius: var(--r-field); background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.arena-other .fld { margin: 12px 0; }
.arena-other .check { margin: 4px 0 0; background: var(--s2); }
.sheet .arena-other { background: var(--s2); }
.sheet .arena-other .check { background: var(--s1); }
.arena-row .tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--s2); color: var(--stripe); }
.arena-row.off { opacity: .55; }
.arena-note { margin: 4px 0 18px; white-space: pre-line; line-height: 1.45; }

/* Свой «потянуть вниз, чтобы обновить»: в установленном приложении и в Telegram браузерного нет */
html, body { overscroll-behavior-y: none; }
#ptr { position: fixed; top: env(safe-area-inset-top, 0px); left: 50%; z-index: 15; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -20px;
  border-radius: 50%; background: var(--s2); color: var(--muted); box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--line);
  opacity: 0; transform: translateY(-48px); pointer-events: none; }
#ptr.anim { transition: transform .2s ease, opacity .2s ease; }
#ptr svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
#ptr.ready { color: var(--stripe); }
#ptr.ready svg { transform: rotate(180deg); }
#ptr.spin { color: var(--stripe); }
#ptr.spin svg { animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #ptr.spin svg { animation-duration: 2s; } }

/* ---------- v0.19: статистика из лиги ---------- */
.team-view { margin-top: 10px; }
.team-view .ic { width: 17px; height: 17px; margin: 0 6px -3px 0; }
.lg-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; margin: 14px 0 0; }
.lg-sum > div { padding: 12px 6px 10px; border-radius: var(--r-tile, 14px); background: var(--s1); text-align: center; }
.lg-sum b { display: block; font: 700 22px/1.1 var(--font-display); }
.lg-sum small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.lg-sum-sheet { grid-template-columns: repeat(4, 1fr); margin: 4px 0 6px; }
.lg-sum-sheet > div { background: var(--s2); }
.lg-sum-sheet b { font-size: 19px; }
.lg-next { display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 10px 0 0; padding: 12px 16px; border: 0; border-radius: var(--r-card);
  background: var(--stripe-bg); box-shadow: inset 0 0 0 1px var(--stripe-line); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.lg-next-h { color: var(--stripe); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lg-next b { font-size: 17px; }
.lg-next span:last-child { color: var(--muted); font-size: 14px; }
.lg-games { padding: 2px 16px; }
.lg-game { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.lg-game:last-child { border-bottom: 0; }
.lg-game-t { flex: 1; min-width: 0; }
.lg-game-t b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-game-t small { display: block; color: var(--muted); font-size: 13px; }
.lg-game-s { font: 700 18px/1 var(--font-display); white-space: nowrap; }
.lg-game-s.small { font: 600 14px/1.2 var(--font-body); color: var(--muted); text-align: right; white-space: normal; max-width: 45%; }
.lg-res-chip { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; font-size: 13px; font-weight: 800; }
.lg-res-chip.res-W { background: var(--yes-bg); color: var(--yes); }
.lg-res-chip.res-L { background: var(--no-bg); color: var(--no); }
.lg-res-chip.res-T { background: var(--maybe-bg); color: var(--maybe); }

/* Таблица: № · игрок · цифры. Узкие колонки, чтобы всё влезало на телефон без прокрутки вбок */
.stbl { margin: 8px 0 0; padding: 2px 10px 4px; border-radius: var(--r-card); background: var(--s1); }
.stbl .st-h, .stbl .st-r { display: grid; align-items: center; column-gap: 2px; width: 100%; }
.stbl-sk .st-h, .stbl-sk .st-r { grid-template-columns: 26px minmax(0, 1fr) repeat(6, minmax(28px, 34px)); }
.stbl-gk .st-h, .stbl-gk .st-r { grid-template-columns: 26px minmax(0, 1fr) repeat(4, minmax(38px, 46px)); }
.stbl .st-h { min-height: 38px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; }
.stbl .st-h button { min-height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer; }
.stbl .st-h button.on { color: var(--text); background: var(--s2); }
.stbl .st-r { min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit;
  font-size: 15px; text-align: center; cursor: pointer; }
.stbl .st-r:last-child { border-bottom: 0; }
.stbl .st-r span.on { font-weight: 700; }
.stbl .st-r.me .c-name { color: var(--stripe); font-weight: 600; }
.stbl .c-n { color: var(--muted); font-size: 13px; text-align: left; }
.stbl .c-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.lg-src { margin-top: 14px; }
.link-btn { padding: 0; border: 0; background: none; color: var(--stripe); font: inherit; font-weight: 600; cursor: pointer; }

.lg-player-h { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.lg-player-h h3 { margin: 0; }
.lg-player-h small { color: var(--muted); font-size: 13px; }
.sheet .lg-games { background: var(--s2); border-radius: var(--r-card); }

/* Итог игры в карточке события */
.lg-res { margin: 14px 0 0; padding: 14px 16px 16px; border-radius: var(--r-card); background: var(--s1); text-align: center; }
.lg-res-h { display: flex; justify-content: space-between; align-items: baseline; text-align: left; }
.lg-res-h small { color: var(--muted); font-size: 13px; }
.lg-res-h b { font-size: 15px; }
.lg-res.res-W .lg-res-h b { color: var(--yes); }
.lg-res.res-L .lg-res-h b { color: var(--no); }
.lg-score { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin: 6px 0 4px; font: 800 44px/1 var(--font-display); }
.lg-score span { color: var(--muted); font-weight: 700; }
.lg-periods { display: flex; justify-content: center; gap: 18px; color: var(--muted); font-size: 14px; }
.lg-periods small { margin-right: 5px; font-size: 12px; }
.lg-goals { list-style: none; margin: 12px 0 12px; padding: 0; text-align: left; }
.lg-goals li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.lg-goals li:not(.ours) { color: var(--muted); }
.lg-goals .g-t { width: 74px; flex: none; color: var(--muted); font-size: 13px; }
.lg-goals .g-who { flex: 1; min-width: 0; }
.lg-goals .g-who b { display: block; font-weight: 600; }
.lg-goals li.ours .g-who b { color: var(--text); }
.lg-goals .g-who small { display: block; color: var(--muted); font-size: 13px; }
.lg-goals .g-str { padding: 2px 8px; border-radius: var(--r-pill); background: var(--s2); font-size: 12px; font-weight: 700; }

/* Штаб → Лига */
.lg-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); align-items: center; gap: 10px; min-height: 64px; padding: 8px 0;
  border-bottom: 1px solid var(--line); }
.lg-map:last-child { border-bottom: 0; }
.lg-map select { width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-field); background: var(--s2); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 14px; }
.lg-map.off select { box-shadow: inset 0 0 0 1px var(--stripe-line); }
.lg-err { margin: 12px 0; padding: 12px 14px; border-radius: var(--r-field); background: var(--no-bg); color: var(--no); font-size: 14px; }
.lg-sum > div { padding: 12px 3px 10px; }
.lg-sum small { font-size: 11px; overflow-wrap: anywhere; }
.sheet h3.month { margin: 18px 0 8px; font: 700 12px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- v0.20: вкладка «Статистика», игры из лиги, голосование ---------- */
/* Пять вкладок на узком экране: подписи не вылезают за кнопку */
#tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 374px) {
  #tabbar { left: 8px; right: 8px; padding: 4px; gap: 0; }
  #tabbar a { flex: 1 1 0; font-size: 10px; }
  #tabbar a[data-tab="stats"] { flex-grow: 1.25; }      /* самая длинная подпись */
  #tabbar svg { width: 24px; height: 24px; }
}
.stats-seg { margin-top: 10px; }
.lg-form { display: inline-flex; gap: 4px; flex: none; }
.lg-form .lg-res-chip { width: 22px; height: 22px; font-size: 11px; }
.lg-formrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 0; padding: 10px 16px;
  border-radius: var(--r-card); background: var(--s1); }
.lg-formrow small { color: var(--muted); font-size: 13px; }
section.lg-next { gap: 8px; cursor: default; }
.lg-next-vs { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lg-next-vs > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-next-vs span { color: var(--muted); font-size: 14px; }
.lg-facts { list-style: none; margin: 2px 0 0; padding: 0; text-align: left; }
.lg-facts li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.35; }
.lg-next .lg-facts li { border-top-color: var(--stripe-line); }
.lg-facts .f-i { flex: none; width: 20px; text-align: center; }
.lg-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lg-btns.center { justify-content: center; }
.lg-btns .ic { width: 18px; height: 18px; }
.btn-ghost.live { color: var(--no); box-shadow: inset 0 0 0 1px rgba(255, 138, 122, .45); }
.lg-game-btns { margin: 12px 0 0; }
.lg-pre { margin: 14px 0 0; padding: 12px 16px 14px; border-radius: var(--r-card); background: var(--s1); }
.lg-pre .lg-res-h small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--stripe); }
.live-on { color: var(--no); }
.lg-res .lg-btns { margin-top: 0; }
.lg-day { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 30px; flex: none; line-height: 1.05; }
.lg-day b { font: 700 16px/1 var(--font-display); }
.lg-day small { color: var(--muted); font-size: 11px; }

/* Таблица дивизиона: место · команда · И В П (Н) · шайбы · очки */
.stbl-tab .st-h, .stbl-tab .st-r { grid-template-columns: 20px minmax(0, 1fr) repeat(3, 24px) 44px 28px; }
.stbl-tab.with-t .st-h, .stbl-tab.with-t .st-r { grid-template-columns: 20px minmax(0, 1fr) repeat(4, 22px) 42px 26px; }
.stbl-tab .st-h > span:not(.c-team):not(.c-n) { text-align: center; }
.stbl-tab .c-team { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; }
.stbl-tab .c-team > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stbl-tab .c-gd { font-size: 13px; color: var(--muted); }
.stbl-tab .st-r .on { font-weight: 700; }
.stbl-tab .st-r.us { margin: 0 -10px; padding: 0 10px; width: calc(100% + 20px); background: var(--stripe-bg); font-size: 15px; text-align: center;
  min-height: 44px; border-bottom: 1px solid var(--line); }
.stbl-tab .st-r.us .c-team { font-weight: 700; }
.stbl-tab .st-r.us:last-child { border-radius: 0 0 var(--r-card) var(--r-card); border-bottom: 0; }
/* Разведка и страница игры: небольшие таблицы без сортировки */
.stbl-sc .st-h, .stbl-sc .st-r, .stbl-gl .st-h, .stbl-gl .st-r { grid-template-columns: 26px minmax(0, 1fr) repeat(4, 34px); }
.stbl-sg .st-h, .stbl-sg .st-r { grid-template-columns: 26px minmax(0, 1fr) 30px 48px 44px; }
.stbl-gg .st-h, .stbl-gg .st-r { grid-template-columns: 26px minmax(0, 1fr) 56px 50px; }
.stbl-sc .st-h, .stbl-sg .st-h, .stbl-gl .st-h, .stbl-gg .st-h { text-align: center; }
.stbl-sc .st-r, .stbl-sg .st-r, .stbl-gl .st-r, .stbl-gg .st-r { cursor: default; }
.stbl-gg { margin-top: 8px; }

.split-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.split-h .link-btn { font-size: 13px; text-transform: none; letter-spacing: 0; }
.lg-awards { padding: 2px 16px; }
.aw { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--text); font: inherit; text-align: left; }
button.aw { cursor: pointer; }
.aw:last-child { border-bottom: 0; }
.aw-i { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--s2); font-size: 20px; }
.sheet .aw-i { background: var(--s1); }
.aw-t { min-width: 0; }
.aw-t b { display: block; font-weight: 600; }
.aw-t small { display: block; color: var(--muted); font-size: 13px; }
.pair { display: flex; align-items: baseline; gap: 6px; min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pair:last-child { border-bottom: 0; }
.pair > span { flex: 1; min-width: 0; font-weight: 500; }
.pair b { font: 700 18px/1 var(--font-display); }
.pair small { color: var(--muted); font-size: 13px; }
.imp { padding: 12px 0; border-bottom: 1px solid var(--line); }
.imp:last-child { border-bottom: 0; }
.imp-n b { display: block; font-weight: 600; }
.imp-n small { display: block; color: var(--muted); font-size: 13px; }
.imp-bars { display: grid; gap: 4px; margin-top: 8px; }
.imp-bars > span { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 8px; }
.imp-bars > span::before { content: ""; grid-area: 1 / 1; height: 8px; border-radius: 4px; background: var(--s2); }
.imp-bars i { grid-area: 1 / 1; height: 8px; border-radius: 4px; background: var(--stripe); }
.imp-bars .off i { background: var(--muted); }
.imp-bars em { font-style: normal; font-size: 13px; font-weight: 700; text-align: right; }
.imp-bars .off em { color: var(--muted); font-weight: 500; }
.sheet .imp-bars > span::before { background: var(--s1); }

.ms { padding: 4px 16px; }
.ms-r { padding: 10px 0; border-bottom: 1px solid var(--line); }
.ms-r:last-child { border-bottom: 0; }
.ms-t { display: flex; justify-content: space-between; gap: 8px; }
.ms-t b { font: 700 16px/1.2 var(--font-display); }
.ms-r .bar { height: 6px; margin: 8px 0 4px; }
.ms-r small { color: var(--muted); font-size: 12px; }
.sheet .ms, .sheet .lg-awards, .sheet .card { background: var(--s2); }
.sheet .ms-r .bar { background: var(--s1); }

.opp-list { padding: 2px 12px; }
.opp-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.opp-row:last-child { border-bottom: 0; }
.opp-row .c-n { width: 18px; flex: none; color: var(--muted); font-size: 13px; text-align: center; }
.opp-t { flex: 1; min-width: 0; }
.opp-t b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-t small { display: block; color: var(--muted); font-size: 12px; }

/* Страница игры */
.lg-head { text-align: center; }
.lg-head .matchup { margin-top: 14px; }
.lg-head .lg-score { margin: 4px 0 6px; font-size: 52px; }
.lg-verdict { margin-top: 8px; font-weight: 700; }
.lg-head.res-W .lg-verdict { color: var(--yes); }
.lg-head.res-L .lg-verdict { color: var(--no); }
.lg-head .clock { margin: 4px 0; }
.lg-head .ev-day { color: var(--muted); font-size: 14px; margin-top: 6px; }
.card .lg-goals { margin: 0; }
.card .lg-goals li:first-child { border-top: 0; }
.star { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.star:last-child { border-bottom: 0; }
.star-n { font-size: 26px; width: 34px; flex: none; text-align: center; }
.star .pl-name small.inl { display: inline; }
.star:not(.ours) .pl-name { color: var(--muted); }
.vote-list { display: grid; gap: 6px; }
.vote-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 14px;
  border: 0; border-radius: var(--r-field); background: var(--s1); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.vote-opt.static { cursor: default; }
.vote-opt.on { box-shadow: inset 0 0 0 2px var(--stripe); }
.vote-opt .vo-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.vote-opt .vo-n small { color: var(--muted); font-size: 12px; }
.vote-opt .vo-c { display: flex; align-items: center; gap: 8px; }
.vote-opt .bar { width: 72px; height: 6px; margin: 0; }
.vote-opt .vo-c b { min-width: 18px; text-align: right; }

/* Штаб: игры из лиги */
.lg-offer { padding: 12px 0; border-bottom: 1px solid var(--stripe-line); }
.lg-offer:last-child { border-bottom: 0; }
.lg-offer .pl-name { font-weight: 600; }
.lg-offer .pl-actions { flex-wrap: wrap; margin-top: 10px; }
.lg-offer .btn-ghost { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn-ghost.quiet { box-shadow: none; color: var(--muted); }
.lg-was { text-decoration: line-through; }
.lg-now { color: var(--text) !important; }

/* Моя статистика */
.my-stats { margin: 0 0 14px; }
.my-facts { list-style: none; margin: 8px 0 0; padding: 4px 16px; border-radius: var(--r-card); background: var(--s1); }
.my-facts li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.my-facts li:last-child { border-bottom: 0; }
.lg-best { display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 10px 0 0; padding: 12px 16px; border: 0; border-radius: var(--r-card);
  background: var(--stripe-bg); box-shadow: inset 0 0 0 1px var(--stripe-line); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.lg-best b { font: 700 20px/1.2 var(--font-display); }
.lg-best span:last-child { color: var(--muted); font-size: 14px; }
.empty-card { padding: 16px; border-radius: var(--r-card); background: var(--s1); color: var(--muted); font-size: 15px; }
.empty-card p { margin: 0; }
.lg-sum.two { grid-template-columns: 1fr 1fr; }
.lg-sum.two small { font-size: 12px; }
.aw-more { display: block; width: 100%; min-height: 44px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--stripe);
  font: 600 14px/1.2 var(--font-body); text-align: left; cursor: pointer; }
.lg-pre .aw-more { border-top: 0; padding: 0; min-height: 36px; }
/* Узкий телефон: в таблице дивизиона без логотипов и шайб — чтобы влезли названия */
@media (max-width: 374px) {
  .stbl-tab .st-h, .stbl-tab .st-r { grid-template-columns: 18px minmax(0, 1fr) repeat(3, 24px) 28px; }
  .stbl-tab.with-t .st-h, .stbl-tab.with-t .st-r { grid-template-columns: 18px minmax(0, 1fr) repeat(4, 22px) 26px; }
  .stbl-tab .c-gd, .stbl-tab .c-team .logo { display: none; }
}

/* v0.21: club achievement collection */
.ach-entry { width:100%; display:flex; align-items:center; gap:12px; padding:16px; margin:10px 0 20px; background:var(--s1); border:1px solid var(--line); border-radius:20px; color:var(--text); text-align:left; }
.ach-entry>span:first-child { font-size:28px; }
.ach-entry>span:nth-child(2) { flex:1; }
.ach-entry small { display:block; color:var(--muted); margin-top:3px; font-size:12px; }
.ach-tabs { margin:18px 0; }
.ach-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ach-card { border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--s1); min-width:0; }
.ach-card.locked { border-style:dashed; }
.ach-card-main { color:var(--text); background:none; border:0; width:100%; padding:14px 8px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.ach-card-main b { font-size:14px; overflow-wrap:anywhere; }
.ach-card-main small { color:var(--muted); font-size:11px; }
.ach-art { width:100px; height:108px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ach-art img { width:100%; height:100%; object-fit:contain; }
.ach-art>span { font-size:46px; }
.ach-art.big { width:220px; height:235px; margin:auto; }
.ach-art.big>span { font-size:100px; }
.ach-card-tools { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; padding:0 6px 12px; }
.ach-card-tools .small { font-size:11px; padding:7px; }
.ach-person { background:var(--s1); border:1px solid var(--line); border-radius:22px; padding:16px; margin:14px 0; }
.ach-person h3 { margin:0; }
.ach-person-awards { display:flex; flex-wrap:wrap; gap:8px; }
.ach-chip { display:flex; align-items:center; text-align:left; gap:7px; padding:6px; border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:14px; max-width:100%; }
.ach-chip .ach-art { width:44px; height:48px; }
.ach-chip .ach-art>span { font-size:25px; }
.ach-chip>span { font-size:12px; overflow-wrap:anywhere; }
.ach-chip b { display:block; color:var(--yes); }
.ach-log { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px; border-bottom:1px solid var(--line); }
.ach-log:last-child { border-bottom:0; }
.ach-log>div { min-width:0; overflow-wrap:anywhere; }
.ach-log span,.ach-log small { display:block; margin-top:3px; }
.ach-log small { color:var(--muted); font-size:12px; }
.ach-log strong { color:var(--yes); white-space:nowrap; }
.ach-detail { text-align:center; padding:10px 4px; }
.ach-detail h1 { font-size:24px; overflow-wrap:anywhere; }
.ach-detail p { white-space:pre-line; }
.ach-first { padding:14px; border:1px solid var(--stripe); border-radius:18px; color:var(--muted); font-size:13px; }
.ach-check { display:flex; align-items:center; gap:10px; margin:16px 0; }
#ach-form input[type=checkbox] { width:20px; height:20px; flex-shrink:0; }
#ach-form input[type=file] { max-width:100%; font-size:13px; }
#ach-form textarea,#ach-grant-form textarea { min-height:90px; }
@media(min-width:700px) { .ach-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }