/* 2 бригада — рейтинг судей. Тёмный «спорт-аналитика» дашборд. */

:root {
  --bg-0: #080b12;
  --bg-1: #0d1220;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.07);
  --surface-3: rgba(255, 255, 255, 0.1);
  --border: rgba(255, 255, 255, 0.09);
  --border-2: rgba(255, 255, 255, 0.16);
  --ink: #eaf0f8;
  --ink-dim: #9aa7bd;
  --ink-faint: #5f6c82;
  --accent: #4f8cff;
  --accent-2: #7c5cff;

  /* Акценты геро-блоков */
  --gold-a: #ffd66b;
  --gold-b: #ff9f45;
  --red-a: #ff6b7d;
  --red-b: #e11d48;
  --yel-a: #ffe066;
  --yel-b: #f5c518;
  --blue-a: #4dd4f7;
  --blue-b: #4f8cff;
  --grn-a: #5be584;
  --grn-b: #1fae55;
  --pur-a: #b98cff;
  --pur-b: #7c3aed;

  /* Непрозрачные фоны для закреплённых (sticky-left) колонок — чтобы под ними
     не просвечивал горизонтально прокручиваемый контент. */
  --freeze-bg: #111726;
  --freeze-bg-hover: #171d2c;
  --freeze-bg-sub: #121a2b;
  --freeze-bg-head: #0d1220;
  --divider: #383c49; /* НЕПРОЗРАЧНЫЙ разделитель шапки/подвала (= border-2 поверх freeze-bg,
                         но solid): box-shadow-линия не удваивается на закреплённых колонках */

  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 34px rgba(0, 0, 0, 0.34);
  --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font: 15px/1.45 var(--font);
  color: var(--ink);
  background: var(--bg-0);
  padding: clamp(16px, 3vw, 34px) clamp(12px, 4vw, 44px) 64px;
  position: relative;
  overflow-x: hidden;
}

/* Декоративные подсветки фона */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60vw 50vh at 12% -8%, rgba(124, 92, 255, 0.22), transparent 60%),
    radial-gradient(55vw 45vh at 108% 12%, rgba(79, 140, 255, 0.18), transparent 58%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 46%);
}

/* ---------- Шапка ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.home-link {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 13px;
  border: 1px solid var(--border-2);
  border-radius: 9px;
  padding: 7px 11px;
  white-space: nowrap;
}
.home-link:hover { color: var(--accent); border-color: var(--accent); }
.brand { display: flex; align-items: center; gap: 14px; position: relative; z-index: 40; } /* z-index: дропдаун бригады поверх панели фильтров (z:20) */
.brand__mark {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  font-size: 24px; font-weight: 800; color: #0a0e17;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--gold-a), var(--gold-b));
  box-shadow: 0 6px 18px rgba(255, 159, 69, 0.35);
  letter-spacing: -0.02em;
}
.brand__text h1 {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.brand__sub { margin: 2px 0 0; color: var(--ink-dim); font-size: 13px; }
#ctxLabel { color: var(--ink-dim); }
.brand__mark svg { width: 34px; height: 34px; display: block; }

/* Селектор бригады, встроенный в заголовок: «…МКСФ. Бригада №2 ▾» */
/* .cs.cs--heading — выше специфичности, чем позже идущее .cs { width:100% } */
.cs.cs--heading { display: inline-flex; width: auto; vertical-align: baseline; }
.cs--heading .cs__trigger {
  display: inline-flex; align-items: baseline; gap: 0.3em;
  width: auto; min-width: 0; padding: 0 0 1px; margin: 0;
  border: none; border-bottom: 2px dashed rgba(255, 214, 107, 0.45);
  background: none; border-radius: 0; box-shadow: none;
  font: inherit; color: var(--gold-a); font-weight: 800; letter-spacing: -0.02em;
  cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.cs--heading .cs__trigger:hover,
.cs--open.cs--heading .cs__trigger { color: var(--gold-b); border-bottom-color: var(--gold-b); box-shadow: none; }
.cs--heading .cs__label { overflow: visible; }
.cs--heading .cs__chev {
  width: 0.62em; height: 0.62em; align-self: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffd66b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* Меню бригад — обычным текстом (не наследует крупный жирный заголовок) */
.cs--heading .cs__menu { font-size: 15px; font-weight: 500; letter-spacing: normal; }
.cs--heading .cs__opt { font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  color: var(--ink);
  padding: 9px 15px;
  border-radius: 10px;
  font-size: 14px; font-weight: 600; line-height: 1.45; /* как у инпутов, иначе кнопка ниже */
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.06s;
  backdrop-filter: blur(6px);
}
.btn:hover { background: var(--surface-3); border-color: var(--accent); }
.btn--ghost { background: transparent; border-color: var(--border); color: var(--ink-dim); font-weight: 500; }
.btn--ghost:hover { color: var(--ink); background: var(--surface); border-color: var(--border-2); }
.btn:active { transform: translateY(1px); }
.btn[hidden] { display: none; } /* иначе display:inline-flex перебивает атрибут hidden */
.btn__ico { font-size: 15px; }

/* ---------- Панель фильтров ---------- */
.controls {
  position: relative;
  z-index: 20; /* панель (и её выпадающие меню) поверх блоков-лидеров и таблицы */
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  margin-bottom: 20px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label {
  color: var(--ink-dim); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
/* Значок (i) с пояснением рядом с подписью фильтра */
.info-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 5px; vertical-align: middle;
  border: 1px solid var(--ink-faint); border-radius: 50%;
  color: var(--ink-faint); font: italic 700 9px/1 Georgia, 'Times New Roman', serif;
  text-transform: none; letter-spacing: 0; cursor: help;
}
.info-i:hover, .info-i:focus { color: var(--accent); border-color: var(--accent); outline: none; }
/* Текстовая ссылка «справочник соответствий» рядом с подписью «Турнир» */
.field__reflink {
  margin-left: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 10.5px;
  color: var(--ink-faint); text-decoration: none; border-bottom: 1px dashed var(--ink-faint); cursor: pointer; white-space: nowrap;
}
.field__reflink:hover, .field__reflink:focus { color: var(--accent); border-bottom-color: var(--accent); outline: none; }
.field--grow { flex: 1 1 240px; }
.field--search { flex: 0 1 200px; }
.field--min { flex: 0 0 auto; }

.field select,
.field input[type='search'],
.field input[type='number'] {
  font: inherit; font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: rgba(9, 13, 22, 0.6);
  color: var(--ink);
  min-width: 150px; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* «Минимум матчей» — степпер [− | ввод | +] во всю ширину подписи. Рамка и фокус-кольцо
   на всём блоке; цифра по центру; нативные стрелки убраны (шаг задают кнопки и ввод). */
.stepper {
  display: flex; align-items: stretch; width: 100%;
  border: 1px solid var(--border-2); border-radius: 10px;
  background: rgba(9, 13, 22, 0.6); overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.stepper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.22); }
.stepper__btn {
  flex: 0 0 34px; display: grid; place-items: center;
  border: none; background: transparent; color: var(--ink-dim);
  font: 600 20px/1 var(--font); cursor: pointer; user-select: none;
  transition: background 0.15s, color 0.15s;
}
.stepper__btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.stepper__btn:active:not(:disabled) { background: var(--surface-3); }
.stepper__btn:disabled { opacity: 0.3; cursor: default; }
.stepper input[type='number'] {
  flex: 1 1 auto; width: auto; min-width: 0;
  border: none; border-radius: 0; background: transparent;
  padding: 10px 2px; text-align: center;
  appearance: textfield; -moz-appearance: textfield; /* Firefox: без стрелок */
}
.stepper input[type='number']:focus { outline: none; box-shadow: none; } /* фокус — на всём .stepper */
.stepper input[type='number']::-webkit-inner-spin-button,
.stepper input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa7bd' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
  cursor: pointer;
}
.field select option { background: #0d1220; color: var(--ink); }
.field select:focus,
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.22);
}
.field input[type='search']::placeholder { color: var(--ink-faint); }

/* Тумблер (переключатель) — используется над таблицей («скрыть бригадиров») */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  position: relative; flex: none;
  width: 42px; height: 24px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  transition: background 0.2s;
}
.switch__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s;
}
.switch input:checked + .switch__track { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.3); }
.switch__text { font-size: 14px; color: var(--ink-dim); }
/* Тумблер «скрыть бригадиров» живёт в панели фильтров — ровняем по нижней линии инпутов. */
.switch--filter { align-self: flex-end; padding-bottom: 8px; }

/* ---------- Кастомный селект (свой dropdown вместо нативного) ---------- */
.cs { position: relative; width: 100%; }
.cs__native { display: none; }
.cs__trigger {
  width: 100%; min-width: 150px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: inherit; font-size: 14px; text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: rgba(9, 13, 22, 0.6);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cs__trigger:hover { border-color: var(--accent); }
.cs--open .cs__trigger,
.cs__trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.22); }
.cs__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs__lead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cs__ico { width: 18px; height: 18px; flex: none; border-radius: 4px; object-fit: contain; background: rgba(255, 255, 255, 0.06); }
.cs__chev {
  width: 12px; height: 12px; flex: none;
  background: center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa7bd' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition: transform 0.18s;
}
.cs--open .cs__chev { transform: rotate(180deg); }
.cs__menu {
  position: absolute; z-index: 50; top: calc(100% + 6px); left: 0;
  min-width: 100%; width: max-content; max-width: min(340px, 88vw); /* не режем длинные названия (бригады) */
  max-height: 300px; overflow-y: auto;
  padding: 6px;
  background: #10192b;
  border: 1px solid var(--border-2);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  animation: csIn 0.13s ease;
}
@keyframes csIn { from { opacity: 0; transform: translateY(-4px); } }
.cs__opt {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs__opt:hover, .cs__opt.is-active { background: var(--surface-2); }
.cs__opt.is-selected { color: var(--accent); font-weight: 700; }
.cs__menu::-webkit-scrollbar { width: 10px; }
.cs__menu::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; border: 3px solid #10192b; }
.cs--disabled { opacity: 0.4; }
.cs--disabled .cs__trigger { pointer-events: none; cursor: not-allowed; }

/* ---------- Мультивыбор турниров ---------- */
.ms { position: relative; width: 100%; }
.ms__trigger { width: 100%; min-width: 150px; }
.ms__all {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
  font-weight: 600; cursor: pointer;
}
.ms__opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.ms__opt:hover { background: var(--surface-2); }
.ms__opt input, .ms__all input { width: 15px; height: 15px; flex: none; accent-color: var(--accent); cursor: pointer; }
.ms__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms__count { color: var(--ink-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.ms__empty { padding: 16px; text-align: center; color: var(--ink-dim); font-size: 13px; }

/* Многоуровневый список: агрегат -> под-группа зачёта -> турниры.
   Чекбоксы — в одну колонку слева (не двигаются), счётчики матчей — в одну колонку
   справа; вложенность показываем отступом текста (margin у кнопки/иконки), а не всей строки. */
.ms__grp { border-bottom: 1px solid var(--border); }
.ms__grp:last-child { border-bottom: 0; }
.ms__ghead { display: flex; align-items: center; gap: 8px; padding: 2px 8px; }
.ms__gchk, .ms__schk { width: 15px; height: 15px; flex: none; accent-color: var(--accent); cursor: pointer; }
.ms__gtoggle {
  flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
  background: none; border: 0; padding: 6px 4px 6px 0; cursor: pointer; color: var(--ink); font: inherit; text-align: left;
}
.ms__gtoggle:hover .ms__gname { color: var(--accent); }
.ms__gcaret { color: var(--ink-faint); font-size: 11px; transition: transform 0.15s; transform: rotate(90deg); flex: none; }
.ms__grp.is-collapsed .ms__gcaret { transform: rotate(0deg); }
.ms__gname { flex: 0 1 auto; min-width: 0; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms__gcount { color: var(--ink-faint); font-size: 11.5px; font-variant-numeric: tabular-nums; flex: none; }
.ms__gitems { padding-bottom: 3px; }
.ms__grp.is-collapsed .ms__gitems { display: none; }
/* Под-уровень «Зачётные / Незачётные года» под ЛПМ/ЗПМ */
.ms__subhead { display: flex; align-items: center; gap: 8px; padding: 3px 8px; }
.ms__stoggle {
  flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: 22px;
  background: none; border: 0; padding: 3px 0; cursor: pointer; color: inherit; font: inherit; text-align: left;
}
.ms__stoggle:hover .ms__sname { color: var(--ink); }
.ms__scaret { color: var(--ink-faint); font-size: 10px; transition: transform 0.15s; transform: rotate(90deg); flex: none; }
.ms__sub.is-collapsed .ms__scaret { transform: rotate(0deg); }
.ms__sub.is-collapsed .ms__sitems { display: none; }
.ms__sname { flex: 0 1 auto; min-width: 0; font-size: 12px; font-weight: 600; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms__scount { margin-left: auto; color: var(--ink-faint); font-size: 11px; font-variant-numeric: tabular-nums; flex: none; }
/* Число турниров у названия агрегата/подгруппы: «(14)» */
.ms__tcount { flex: none; color: var(--ink-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.ms__tcount::before { content: '('; }
.ms__tcount::after { content: ')'; }
/* Отступ текста листа по уровню — чекбокс на месте, двигается только иконка+название */
.ms__gitems > .ms__opt .cs__ico { margin-left: 22px; } /* лист прямо под агрегатом (1 уровень) */
.ms__sitems .ms__opt .cs__ico { margin-left: 44px; }   /* лист под зачётом (2 уровень) */
.ms__count { flex: none; }

/* Спиннер на блоке «Турнир», пока грузятся турниры */
.ms__trigger.is-loading { position: relative; }
.ms__trigger.is-loading .cs__lead { padding-left: 20px; }
.ms__trigger.is-loading::before {
  content: ''; position: absolute; left: 11px; top: 50%; width: 13px; height: 13px; margin-top: -7px;
  border: 2px solid var(--border-2); border-top-color: var(--accent); border-radius: 50%;
  animation: msSpin 0.7s linear infinite;
}
@keyframes msSpin { to { transform: rotate(360deg); } }

/* ---------- Кастомные подсказки (data-tip) — вместо нативного title ---------- */
.tip {
  position: fixed; z-index: 200; left: 0; top: 0;
  max-width: 260px; padding: 8px 11px;
  background: #10192b; color: var(--ink-dim);
  border: 1px solid var(--border-2); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  font-size: 12.5px; line-height: 1.4; text-align: left;
  pointer-events: none;
  opacity: 0; transform: translateY(2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.tip.is-on { opacity: 1; transform: translateY(0); }
.tip::after {
  content: ''; position: absolute;
  left: var(--tip-ax, 50%); transform: translateX(-50%);
  border: 6px solid transparent;
}
.tip:not(.tip--below)::after { top: 100%; border-top-color: #10192b; }
.tip.tip--below::after { bottom: 100%; border-bottom-color: #10192b; }

/* Кнопка сброса — справа снизу в панели фильтров */
/* Кнопка сброса: справа снизу, высота как у инпутов; место зарезервировано (visibility). */
.controls__reset { margin-left: auto; align-self: flex-end; padding: 10px 14px; }
.controls__reset.is-off { visibility: hidden; }

/* ---------- Раскрывашка по судье ---------- */
tr.is-expandable { cursor: pointer; }
/* Каретка ▸ и ФИО — на одной строке (.refline) ВНУТРИ маскируемого/обрезаемого блока имени.
   Влезло полное имя → каретка видна справа от него; не влезло → каретку обрезает/гасит
   тем же клипом+градиентом, что и хвост имени (не висит поверх обрезанного ФИО).
   Каретка ВНЕ <a> (обёрнуто только имя) → клик по ней раскрывает строку, а не открывает судью. */
.refline { display: inline-flex; align-items: center; gap: 5px; }
.caret { flex: none; color: var(--ink-faint); font-size: 11px; transition: transform 0.15s; }
tr.is-open .caret { transform: rotate(90deg); color: var(--accent); }
/* Строки детализации — те же колонки, тонированный фон, имя турнира с отступом */
tr.subrow > td { background: rgba(79, 140, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
tr.subrow:hover > td { background: rgba(79, 140, 255, 0.1); }
.subrow .col-ref { padding-left: 4px; }
.subrow__name { display: inline-flex; align-items: center; color: var(--ink-dim); font-weight: 500; }
.subrow__label {
  display: inline-block; vertical-align: middle;
  overflow: hidden; white-space: nowrap;
  --namecap: 360px;
  max-width: var(--namecap); /* мягкий край — градиент на «Всего» (.col-total::before) */
}
.subrow .num--total { font-weight: 600; }
.subrow .dt-empty { color: var(--ink-dim); padding-left: 8px; }
/* Метка зачёта («Зачётные/Незачётные года») в пути турнира: по умолчанию полный
   вариант, на узких экранах — короткий «Зачёт./Незачёт.» (см. @media). */
.zsub__short { display: none; }

/* ---------- Ошибка ---------- */
.errorbox {
  background: rgba(225, 29, 72, 0.14); color: #ffb3c0;
  border: 1px solid rgba(225, 29, 72, 0.4);
  padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 14px;
}

/* ---------- Геро-блоки ---------- */
.heroes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.hero {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 245px; /* фикс. высота: скелетон-заглушка совпадает по высоте с реальным блоком -> нет прыжка */
  transition: transform 0.16s, border-color 0.16s;
  animation: heroIn 0.4s ease both;
}
.hero:hover { transform: translateY(-3px); border-color: var(--border-2); }
@keyframes heroIn { from { opacity: 0; transform: translateY(10px); } }
/* Верхняя цветная полоса-акцент */
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--a), var(--b));
}
/* Мягкое свечение угла */
.hero::after {
  content: ''; position: absolute; top: -40%; right: -30%;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, var(--a), transparent 70%);
  opacity: 0.16; pointer-events: none;
}
.hero--pavel { --a: var(--grn-a); --b: var(--grn-b); }
.hero--palach { --a: var(--red-a); --b: var(--red-b); }
.hero--gorchichnik { --a: var(--yel-a); --b: var(--yel-b); }
.hero--artist { --a: var(--pur-a); --b: var(--pur-b); }
.hero--inspector { --a: var(--blue-a); --b: var(--blue-b); }

.hero__head { display: flex; align-items: center; gap: 11px; }
.hero__icon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; font-size: 20px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07); /* единый нейтральный фон под эмодзи во всех 4 карточках */
  border: 1px solid var(--border-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hero__title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.hero__tag { margin: 1px 0 0; font-size: 11.5px; color: var(--ink-dim); }

.hero__winner {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  padding: 8px; margin: -8px -8px -4px; border-radius: 12px;
  transition: background 0.15s;
}
.hero__winner:hover { background: var(--surface-2); }
.hero__winner--empty {
  color: var(--ink-faint); font-size: 22px; font-weight: 700;
  justify-content: center; padding: 14px 8px;
}
.hero__who { display: flex; flex-direction: column; gap: 5px; min-width: 0; } /* имя + чипы бригад колонкой */
.hero__name { font-weight: 700; font-size: 15px; line-height: 1.2; }
/* Чипы бригад — сразу под ФИО (только в «Все бригады»). Несколько бригад переносятся на
   новую строку; слишком длинное название («Инспекторы-Делегаты») режется троеточием. */
.hero .badges { display: flex; flex-wrap: wrap; min-width: 0; }
.hero .badge { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hero__metric { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.hero__num {
  font-size: 34px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--a), var(--b));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero__unit { font-size: 12.5px; color: var(--ink-dim); font-weight: 600; }
.hero__runner {
  font-size: 11.5px; color: var(--ink-faint);
  border-top: 1px solid var(--border); padding-top: 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Скелетоны загрузки (лоадер блоков при перестройке сводки) ---------- */
@keyframes shimmer { 100% { background-position: -200% 0; } }
.skel {
  display: block; border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.11) 37%, rgba(255, 255, 255, 0.05) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.hero--skel { pointer-events: none; }
.hero--skel::before, .hero--skel::after { display: none; } /* без цветной полосы-акцента */
.skel--head { height: 40px; width: 62%; border-radius: 11px; }
.skel--name { height: 16px; width: 72%; }
.skel--num { height: 30px; width: 46%; margin-top: auto; }
.skel--foot { height: 11px; width: 100%; }
.skelrow td { padding: 12px; }
.skel-ref { display: flex; align-items: center; gap: 11px; } /* как .reflink — резервирует ширину колонки «Судья» */
.skel--dot { width: 32px; height: 32px; border-radius: 50%; flex: none; }
/* Резервируем ширину под длинное ФИО у потолка .refwrap (320px) + каретка —
   тогда колонка «Судья» почти не прыгает при появлении данных (и на мобиле тоже). */
.skel--name-bar { height: 14px; width: 340px; max-width: 82vw; }
.skel--bar { height: 14px; width: 100%; }

/* ---------- Таблица ---------- */
.tablewrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  /* Собственный скролл-контейнер (обе оси): даёт работать sticky-шапке/подвалу при
     вертикальном скролле и заморозке первых колонок при горизонтальном. */
  overflow: auto;
  max-height: 80vh;
  /* Резервируем место под вертикальный скроллбар, иначе он «съедает» ширину и
     на десктопе вылезает лишний горизонтальный скролл, когда таблица помещается. */
  scrollbar-gutter: stable;
  /* Гасим горизонтальную «резинку» (таблицу не оттянуть вбок), но по вертикали
     оставляем сцепление: долистал таблицу до низа/верха — дальше едет страница. */
  overscroll-behavior-x: none;
}
table { border-collapse: collapse; width: 100%; min-width: 1180px; } /* +~60px когда видна колонка «Второй» — таблица скроллится */
thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--freeze-bg-head); /* непрозрачно: при скролле числа не просвечивают под шапкой */
  text-align: right;
  font-size: 12px; color: var(--ink-dim); font-weight: 700;
  padding: 13px 12px;
  white-space: nowrap;
  /* 1-й слой — цветом шапки ВВЕРХ: перекрывает 1–2px контента, «протекающего» над
     липкой шапкой при верт.скролле (обрезается контейнером по краю).
     2-й слой — линия-разделитель ВНИЗ поверх контента: липнет к шапке (видна всегда),
     непрерывна (без разрывов), непрозрачна (не удваивается на закреплённых колонках). */
  box-shadow: 0 -4px 0 4px var(--freeze-bg-head), 0 1px 0 0 var(--divider);
}
th.col-num, td.col-num { width: 44px; text-align: center; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
th.col-ref, td.col-ref { text-align: left; padding-right: 0; } /* без правого паддинга: «Всего» вплотную, затухание имени доходит до него */
td.col-ref { white-space: nowrap; } /* имя одной строкой; ячейка sticky (ниже) — точка отсчёта для absolute-каретки */

/* ---------- Заморозка #, аватарки, имени; статистика наезжает и накрывает ---------- */
/* #, аватарка (z:4) заморожены, всегда резкие. Имя (col-ref, z:1) заморожено НИЖЕ
   статистики — резкое и на месте; наезжающая НЕПРОЗРАЧНАЯ статистика (z:3) накрывает его,
   а слева от неё имя тает ГРАДИЕНТОМ (см. .refwrap). «Судья» скрывается так же, как ФИО. */
/* Закреплённые колонки чуть НАХЛЁСТЫВАЮТ соседа слева (левый офсет на пару px меньше суммы
   ширин): при border-collapse ячейки рендерятся с субпиксельной шириной и на стыке двух
   sticky-ячеек виден тонкий анти-алиас-шов (полоска). Нахлёст (фон тот же) убирает шов.
   # выравнен вправо и с паддингом, аватар/имя тоже с паддингом — контент нахлёст не режет. */
th.col-num, td.col-num { position: sticky; left: 0; z-index: 4; background: var(--freeze-bg); }
th.col-ava, td.col-ava {
  position: sticky; left: 42px; z-index: 4; background: var(--freeze-bg);
  width: 48px; padding: 10px 8px; text-align: left; overflow: visible; /* overflow — под бабл */
}
th.col-ref, td.col-ref { position: sticky; left: 89px; z-index: 1; background: var(--freeze-bg); }
tbody td.num { position: relative; z-index: 3; background: var(--freeze-bg); }
/* Мягкий край ФИО у «Всего» — БЕЗ JS: непрозрачный градиент слева от «Всего», рисуется
   на самой «Всего» и едет вместе с ней при горизонтальном скролле. Так имя не обрывается
   жёстко под «Всего» ни в покое, ни на скролле — и никакой работы в main-потоке (sticky не дёргается). */
/* НЕ ставим position тут: тело col-total уже relative (td.num), шапка — sticky (тоже
   позиционирована). Явный position:relative перебивал бы sticky у шапки «Всего» (уезжала). */
td.col-total::before, thead th.col-total::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 46px;
  background: linear-gradient(to right, transparent, var(--freeze-bg));
  pointer-events: none;
}
thead th.col-total::before { background: linear-gradient(to right, transparent, var(--freeze-bg-head)); }
tbody tr:hover td.col-total::before { background: linear-gradient(to right, transparent, var(--freeze-bg-hover)); }
/* «Судья» скрывается статистикой так же, как ФИО. Маска — на самом тексте (.th-lbl),
   а НЕ на ячейке: иначе градиент гасит и фон, и нижнюю границу шапки → тёмный прямоугольник.
   Фон ячейки — как у остальной шапки/подвала (--freeze-bg-head), а не --freeze-bg. */
thead th.col-ref { z-index: 4; background: var(--freeze-bg-head); }
tfoot td.col-ref { background: var(--freeze-bg-head); z-index: 5; } /* z-index: иначе правило td.col-ref (z:1) перебивает tfoot td (z:5) и сквозь пустую ячейку подвала лезет прокручиваемый контент */
.th-lbl { display: inline-block; vertical-align: middle; } /* «Судья»; мягкий край у «Всего» — .col-total::before */
/* Угловые # и аватарка в шапке — поверх статистики */
thead th.col-num, thead th.col-ava { z-index: 6; background: var(--freeze-bg-head); }
/* Ховер/подстроки на закреплённых ячейках */
tbody tr:hover td.col-num, tbody tr:hover td.col-ava, tbody tr:hover td.col-ref { background: var(--freeze-bg-hover); }
/* Ячейки статистики непрозрачны (freeze-bg, чтобы накрывать имя при гор.скролле) — их фон
   перекрывает ховер строки, поэтому подсветку наведения выставляем им явно (тем же цветом). */
tbody tr:hover td.num { background: var(--freeze-bg-hover); }
tr.subrow > td.col-num, tr.subrow > td.col-ava, tr.subrow > td.col-ref { background: var(--freeze-bg-sub); }
tr.subrow:hover > td.col-num, tr.subrow:hover > td.col-ava, tr.subrow:hover > td.col-ref { background: #16213a; }
/* «Итого» переехало под # + фото (colspan 2), закреплено слева (z:6) — не уезжает и не
   накрывается, а узкое: статистика-итоги едет правее и видна при горизонтальном скролле. */
.col-foot-label {
  position: sticky; left: 0; z-index: 6; background: var(--freeze-bg-head);
  text-align: left; color: var(--ink-dim); text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.04em;
}
/* Стрелка-раскрывашка (▸) не прячется при сворачивании — она едет вслед за именем
   и остаётся кликабельной (раскрыть турниры судьи можно и в свёрнутом виде). */
th.col-card, td.col-card { width: 52px; }
th.sortable { cursor: pointer; user-select: none; transition: color 0.12s; }
th.sortable:hover { color: var(--ink); }
th.sortable::after { content: ' ⇅'; opacity: 0.3; font-size: 11px; }
th.sorted-asc::after { content: ' ↑'; opacity: 1; color: var(--accent); }
th.sorted-desc::after { content: ' ↓'; opacity: 1; color: var(--accent); }

tbody td { padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
tbody tr { transition: background 0.12s; }
tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
tbody tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
.num--total { font-weight: 800; }
.num--yellow { color: var(--yel-a); font-weight: 700; }
.num--red { color: var(--red-a); font-weight: 700; }
.num--penalty { color: var(--pur-a); font-weight: 700; }
.num--avg { font-weight: 600; } /* колонки «за игру» — чуть легче сумм */
/* «Облегчение» avg-цифр — на обёртке текста, НЕ на ячейке: иначе opacity делал
   полупрозрачным и фон ячейки, и при гор.скролле сквозь него просвечивало
   замороженное ФИО (ячейки статистики обязаны быть непрозрачны, см. ниже). */
.avgv { opacity: 0.85; }
.zero { color: var(--ink-faint); font-weight: 400; }

.medal { font-size: 15px; }

/* Зазор аватар↔имя закрывается по мере горизонтального скролла (--sx: 0..1) */
.reflink { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; flex: none; min-width: 0; }
.reflink:hover .refname { color: var(--accent); }
/* Имя + бейдж — вертикальным стеком, по центру по вертикали с аватаром */
.refwrap {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0; overflow: hidden;
  /* Имя всегда резкое и заморожено, обрезается по namecap (overflow:hidden). Мягкий край у
     «Всего» рисует градиент на самой «Всего» (.col-total::before) — едет вместе с ней, без JS. */
  --namecap: 360px;
  max-width: var(--namecap);
}
.refname { font-weight: 600; white-space: nowrap; }

/* Чипы принадлежности к бригадам (в «Все бригады») — под именем, по чипу на бригаду;
   только название бригады, нейтрально и неприметно (роль — на звезде аватарки). */
.badges { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.badge {
  display: inline-block;
  padding: 0 6px;
  font-size: 10px; font-weight: 600; line-height: 16px;
  color: var(--ink-dim); white-space: nowrap;
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--surface-3); border: 1px solid var(--border-2);
}
.avatar--ph {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--ink-dim);
}
.avatar--lg { width: 44px; height: 44px; }

/* Баблы на аватарке (по углам). Звезда статуса — правый ВЕРХ; категория — правый НИЗ. */
.avatarwrap { position: relative; display: inline-flex; flex: none; }
.catbubble {
  position: absolute; right: -3px; bottom: -3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; line-height: 1; color: var(--ink-dim);
  background: rgba(13, 18, 32, 0.82); /* приглушённо, в правом нижнем углу */
  border: 1px solid var(--border-2); border-radius: 999px;
  cursor: help; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* Звезда-бабл роли: бригадир (золото) / зам (синий). Непрозрачный — читается на любой
   аватарке: яркая заливка + тёмная ★ + тёмный ободок для контраста. */
.starbubble {
  position: absolute; right: -3px; top: -3px;
  min-width: 15px; height: 15px; padding: 0 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1; font-weight: 700;
  border: 1px solid rgba(8, 11, 18, 0.55); border-radius: 999px;
  cursor: help; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.starbubble--head { color: #1a1206; background: var(--gold-a); }
.starbubble--deputy { color: #04141c; background: var(--blue-a); }

tfoot td {
  padding: 13px 12px;
  font-weight: 800; background: var(--freeze-bg-head); /* непрозрачно (как шапка) */
  position: sticky; bottom: 0; z-index: 5;
  /* Разделитель НАД подвалом — box-shadow поверх контента: липнет к подвалу (виден
     всегда), непрерывен, непрозрачен (не удваивается на закреплённых колонках). */
  box-shadow: 0 -1px 0 0 var(--divider);
}
tfoot .col-ref { color: var(--ink-dim); text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; }

.empty { padding: 46px; text-align: center; color: var(--ink-dim); }

.pagefoot {
  display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
  align-items: baseline;
  margin-top: 18px; font-size: 12px; color: var(--ink-faint);
}
.pagefoot__lines { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.updated { color: var(--ink-dim); font-size: 13px; }
.pagefoot__fb { color: var(--ink-faint); }
.pagefoot a { color: var(--accent); text-decoration: none; }
.pagefoot a:hover { text-decoration: underline; }
.muted { color: var(--ink-faint); }

/* ---------- Адаптив ---------- */
/* Блоки-лидеры сами переносятся благодаря auto-fit (см. .heroes). */

/* На телефоне таблица не режется — все колонки на месте, широкая таблица
   прокручивается внутри .tablewrap (overflow: auto). При вертикальном скролле
   закрепляется шапка/подвал, при горизонтальном — первые колонки (#, Судья),
   а имена сворачиваются до аватарок (класс .is-hscroll вешает JS). */

/* Телефоны: блоки в один столбец, фильтры по два в ряд. */
@media (max-width: 520px) {
  body { padding: 14px 12px 44px; }
  /* Блоки-лидеры — горизонтальная карусель со снапом (свайп), а не стопка */
  .heroes {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -12px 22px;
    padding: 4px 12px 10px;
  }
  .heroes::-webkit-scrollbar { display: none; }
  .hero { flex: 0 0 82%; scroll-snap-align: center; padding: 15px; gap: 12px; }
  .hero__num { font-size: 30px; }
  .controls { gap: 10px 12px; padding: 14px; }
  .field { flex: 1 1 calc(50% - 6px); }
  .field select, .field input[type='search'], .cs__trigger { min-width: 0; }
  .field--grow, .field--search { flex: 1 1 100%; }
  .field--min { flex: 1 1 calc(50% - 6px); } /* как остальные — половина ряда; степпер тянется на 100% */
  .brand__mark { width: 40px; height: 40px; }
  .brand__text h1 { font-size: 20px; }
  /* Имя в приоритете: окно ФИО растёт максимально, пока «Всего» не упрётся в правый край
     экрана (колонки после «Всего» при этом скрыты — видны гор.скроллом). Обрезаем ФИО
     лишь когда оно длиннее этого максимума. Ширина = 100vw − (# + фото + отступы + «Всего»).
     max(120px, …) — пол на совсем узких экранах. */
  .refwrap, .subrow__label, .th-lbl { --namecap: max(120px, calc(100vw - 210px)); }
  /* Узкий экран: короткая метка зачёта — «Зачёт.»/«Незачёт.» вместо «…ные года»,
     чтобы путь турнира в раскрывашке судьи меньше обрезался. */
  .zsub__full { display: none; }
  .zsub__short { display: inline; }
}

/* ================= Экспорт: кнопка + модалка «Поделиться» ================= */
/* Кнопка «Сохранить результаты» — отдельной строкой ПОД таблицей, по центру.
   Вынесена из панели фильтров: на мобиле большая кнопка внизу фильтров читалась
   как «главная» и заслоняла таблицу — люди не докручивали до рейтинга. */
.tablesave { display: flex; justify-content: center; margin-top: 18px; }
.tablesave__btn { padding: 11px 22px; }
/* Отключённая кнопка + спиннер-лоадер (пока грузится доска) — в духе блока «Турниры». */
.btn[disabled] { opacity: 0.55; cursor: default; }
.btn.is-loading { position: relative; color: transparent; pointer-events: none; opacity: 1; }
.btn.is-loading .btn__ico { visibility: hidden; }
.btn.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--ink);
  animation: msSpin 0.6s linear infinite;
}

html.sh-open { overflow: hidden; } /* фон не скроллится, пока открыта модалка */
.sh[hidden] { display: none; }
.sh {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.sh__backdrop { position: absolute; inset: 0; background: rgba(3, 6, 12, 0.62); backdrop-filter: blur(3px); }
.sh__dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 468px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px); /* dvh — учитывает адресную строку на мобиле, попап влезает в экран */
  display: flex; flex-direction: column;
  background: #0d1322; border: 1px solid var(--border-2);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.sh__head { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--border); flex: none; }
.sh__title { font-size: 15px; font-weight: 700; }
.sh__sub { font-size: 11px; color: var(--ink-dim); margin-top: 1px; }
.sh__tabs { display: inline-flex; margin-left: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.sh__tab { border: 0; background: transparent; color: var(--ink-dim); font: inherit; font-size: 12.5px; padding: 5px 13px; border-radius: 7px; cursor: pointer; }
.sh__tab.is-on { background: var(--surface-3); color: var(--ink); }
.sh__x { width: 28px; height: 28px; border: 1px solid var(--border-2); background: transparent; color: var(--ink-dim); border-radius: 8px; cursor: pointer; font-size: 13px; }
.sh__x:hover { color: var(--ink); border-color: var(--accent); }
.sh__body { padding: 14px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 13px; }
.sh__body[hidden] { display: none; }
.sh__ctrls { display: flex; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.sh__fld { display: flex; flex-direction: column; gap: 5px; }
.sh__fld--crit { flex: 1 1 170px; min-width: 150px; }
.sh__fld--row { flex-direction: row; align-items: center; gap: 10px; }
.sh__fl { font-size: 11px; color: var(--ink-dim); }
.sh__fld--crit .cs { width: 100%; } /* кастом-селект тянется на всю ширину поля */

.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 2px; }
.seg button { border: 0; background: transparent; color: var(--ink-dim); font: inherit; font-size: 12.5px; font-weight: 500; padding: 6px 13px; border-radius: 7px; cursor: pointer; }
.seg button.is-on { background: var(--accent); color: #fff; }
/* Одинаковая высота: критерий-селект и табы Вид/Показать (иначе селект выше и смотрится инородно). */
.sh__ctrls .cs__trigger { height: 40px; padding-top: 0; padding-bottom: 0; }
.sh__ctrls .seg { height: 40px; }
.sh__ctrls .seg button { display: flex; align-items: center; justify-content: center; padding: 0 14px; }

.sh__stage { background: #070b13; border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; justify-content: center; overflow: hidden; flex: none; }

.sh__csv { display: flex; flex-direction: column; gap: 10px; }
.sh__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px 12px; }
.sh__col { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.sh__col input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
.sh__note { font-size: 11px; line-height: 1.5; color: #9fb4d6; background: rgba(79, 140, 255, 0.09); border: 1px solid rgba(79, 140, 255, 0.22); border-radius: 9px; padding: 9px 10px; }

.sh__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 15px; border-top: 1px solid var(--border); flex: none; }
.btn--primary { border: none; color: #20160a; font-weight: 700; background: linear-gradient(135deg, var(--gold-a), var(--gold-b)); }
.btn--primary:hover { border: none; filter: brightness(1.06); background: linear-gradient(135deg, var(--gold-a), var(--gold-b)); }
.btn--primary[disabled] { opacity: 0.7; cursor: default; }

@media (max-width: 520px) {
  .sh { padding: 10px; }
  .sh__dialog { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  /* «Сбросить фильтры» и «Сохранить результаты» — единый лаконичный вид: во всю ширину,
     стопкой, контент по центру (на десктопе — пара справа). Нет активных фильтров →
     «Сбросить» скрыт (display:none). */
  .controls__reset { flex: 1 1 100%; margin-left: 0; justify-content: center; }
  .controls__reset.is-off { display: none; }
  /* «Сохранить результаты» под таблицей — во всю ширину, удобно ткнуть большим пальцем. */
  .tablesave__btn { flex: 1 1 100%; justify-content: center; }
}