@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('vendor/fonts/bitter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('vendor/fonts/bitter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/golostext-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/golostext-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/golostext-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/golostext-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('vendor/fonts/golostext-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('vendor/fonts/golostext-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/jetbrainsmono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/jetbrainsmono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  --font-display: 'Bitter', Georgia, serif;
  --font-body: 'Golos Text', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;

  --bg: #131820;
  --surface: #1a212a;
  --surface-2: #212a34;
  --border: #2a333d;
  --border-strong: #3a4552;
  --text: #e8e6e0;
  --muted: #97a3ae;
  --faint: #6e7c89;
  --primary: #c69749;
  --primary-hover: #dcae5e;
  --primary-soft: #2a2318;
  --ok: #6fbf8b;
  --ok-bg: #16261f;
  --ok-border: #2c4a3a;
  --ok-fill: #3e6e5c;
  --warn: #c69749;
  --off: #97a3ae;
  --off-bg: #212a34;
  --off-border: #2a333d;
  --danger: #e2857a;
  --danger-hover: #eda49b;
  --danger-bg: #2a1a18;
  --danger-border: #4d2e2a;
  --danger-fill: #c9564a;
  --behind-near: #6b3b34;
  --behind-mid: #9a4a40;
  --err-bg: #2a1a18;
  --err-text: #e2857a;
  --err-border: #4d2e2a;
  --ring: rgba(198, 151, 73, .25);
  --radius: 6px;
  --radius-sm: 4px;
  --shadow-sm: none;
  --shadow: none;
  --av0: #6b5b3a; --av1: #3e6e5c; --av2: #4a5a6e;
  --av3: #6e4a4a; --av4: #4a6e68; --av5: #5c4a6e;

  /* Категории сбора. Держатся в стороне от патины и оксблада: те заняты
     смыслом нормы, и одинаковый цвет о разном путал бы. */
  --cat-crypts: #7a8fbf;
  --cat-citadels: #7fb2a6;
  --cat-epics: #b08bc4;
  --cat-tournaments: #c69749;
  --cat-monsters: #9a8f6b;
  --cat-other: #5d6b78;

  --track: #11161d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .08em;
  color: var(--primary);
  text-decoration: none;
}
.brand:hover { color: var(--primary-hover); text-decoration: none; }
.navlink {
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: .95rem;
  margin-left: 8px; padding: 20px 2px; border-bottom: 2px solid transparent;
}
.navlink:hover { color: var(--text); text-decoration: none; }
.navlink--active { color: var(--text); border-bottom-color: var(--primary); }
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: .92rem; }
.crumbs::before { content: "/"; color: var(--border-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.crumbs .here { color: var(--text); font-weight: 550; }
.crumbs .sep { color: var(--border-strong); }

/* ---------- Layout ---------- */
.container { max-width: 1080px; margin: 0 auto; padding: 32px 28px 80px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.page-title { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.page-sub { color: var(--muted); margin: 4px 0 0; font-size: .95rem; }

h2.section { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.005em; margin: 30px 0 12px; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0 0 20px;
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
}
.card-head h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin: 0; letter-spacing: 0; }
.card-head .count { color: var(--faint); font-size: .85rem; font-weight: 500; }
.card-body { padding: 20px; }
.card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

/* ---------- Tables ---------- */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table th {
  text-align: left;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--faint);
  padding: 11px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td { padding: 12px 20px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover td { background: var(--surface-2); }
.data-table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
/* Заголовок числовой колонки прижимается вправо — туда же, где стоят её
   числа. Моноширинный шрифт и цвет ячеек сюда не переносим: шапка живёт по
   своим правилам (.data-table th), от них меняется только выключка. */
.data-table th.num { text-align: right; }
.row-hidden { display: none !important; }

/* ---------- User cell + avatar ---------- */
.user-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.avatar {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .72rem;
  font-weight: 680;
  letter-spacing: .02em;
  background: var(--av0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.avatar.c0 { background: var(--av0); } .avatar.c1 { background: var(--av1); }
.avatar.c2 { background: var(--av2); } .avatar.c3 { background: var(--av3); }
.avatar.c4 { background: var(--av4); } .avatar.c5 { background: var(--av5); }
.user-cell .uname { font-weight: 570; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.uname:hover { color: var(--primary); }
a.user-cell:hover { text-decoration: none; }
a.user-cell:hover .uname { color: var(--primary); }

/* ---------- Аватар участника (публичная часть) ---------- */
/* Отдельный класс, а не правка .avatar: .avatar остался только у плиток
   кланов на /clans, а участников везде — в редакторе и в публичной части —
   рисует .mate-pic. Пропорция задана через aspect-ratio, а не второй
   цифрой: исходник строго 175×180, и расхождение означало бы, что картинку
   сплющили или срезали.

   Ширина 36/58, а не прежние 34/56: вырезка сборщика стала шире (влез номер
   уровня целиком), но не выше. Высота коробки считается от ширины, поэтому
   ширину и подняли — коробка осталась прежней высоты (37,0 против 36,4 и 59,7
   против 60), портрет не уменьшился, а прибавка ушла вправо, под щиток.

   height: auto обязателен. У тега стоят width/height ради стабильности вёрстки
   при ленивой загрузке, а браузер разворачивает их в презентационные подсказки
   CSS. height: 75px — уже не auto, поэтому aspect-ratio молча выключается:
   коробка становится 36×75, и object-fit: cover дорезает картинку по бокам.
   Именно так аватары и приехали сплющенными на первом же показе. */
.mate-pic {
  flex: none;
  width: 36px;
  height: auto;
  aspect-ratio: 175 / 180;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.mate-pic--lg { width: 58px; }
/* Инициалы держат ту же коробку, иначе редкая строка без аватара сдвигала бы
   столбец имён относительно соседних */
.mate-pic--initials {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .72rem;
  font-weight: 680;
  letter-spacing: .02em;
}
.mate-pic--lg.mate-pic--initials { font-size: 1.05rem; }
.mate-pic.c0 { background: var(--av0); } .mate-pic.c1 { background: var(--av1); }
.mate-pic.c2 { background: var(--av2); } .mate-pic.c3 { background: var(--av3); }
.mate-pic.c4 { background: var(--av4); } .mate-pic.c5 { background: var(--av5); }
/* Шапка карточки участника: аватар слева от имени и подписи */
.lb-head--mate { display: flex; align-items: center; gap: 14px; }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  font-size: .76rem; font-weight: 550;
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
.badge--off { color: var(--off); background: var(--off-bg); border-color: var(--off-border); }
.pill {
  display: inline-block; min-width: 22px; text-align: center;
  padding: 1px 8px; border-radius: 999px;
  font-size: .78rem; font-weight: 550; font-variant-numeric: tabular-nums;
  color: var(--muted); background: var(--off-bg); border: 1px solid var(--off-border);
}
.pill.zero { color: var(--faint); background: transparent; border-color: transparent; }
.muted { color: var(--faint); }

/* ---------- Toolbar / search ---------- */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.search {
  flex: 1 1 240px; max-width: 340px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 14px;
  box-shadow: var(--shadow-sm);
}
.search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.search svg { flex: none; color: var(--faint); }
.search input { border: none; outline: none; background: none; padding: 9px 0; width: 100%; font: inherit; color: var(--text); }

/* ---------- Forms ---------- */
form { margin: 0; }
.form-grid { display: grid; grid-template-columns: max-content 1fr; gap: 14px 18px; align-items: center; max-width: 520px; }
.form-grid > label, .form-grid > .fg-label { color: var(--muted); font-size: .9rem; font-weight: 500; }
.form-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

input[type=text], input[type=date], input[type=number], input[type=password],
input[type=datetime-local], input:not([type]), select {
  font: inherit; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: .5rem .7rem;
  max-width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--faint); }
input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
/* Всплывающий список нативного select берёт фон от контрола, а цвет — от его
   color. У панели фильтров контрол прозрачный, поэтому список получал белый
   системный фон и костяной текст на нём — то есть был нечитаем. Красим пункты
   явно, для всех select сразу. */
select option { background-color: var(--surface); color: var(--text); }

/* Toggle switch (checkbox) */
.switch { position: relative; display: inline-block; width: 40px; height: 23px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--border-strong); border-radius: 999px; transition: background .18s;
}
.switch .track::before {
  content: ""; position: absolute; height: 17px; width: 17px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track::before { transform: translateX(17px); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 4px var(--ring); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-weight: 570; line-height: 1;
  text-decoration: none;
  padding: .58rem .95rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .02s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
a.btn:hover { text-decoration: none; }
/* #131820 is --bg, used literally here as the label colour on the brass button */
.btn--primary { background: var(--primary); color: #131820; }
.btn--primary:hover { background: var(--primary-hover); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--primary); color: var(--primary); }
.btn--danger { background: transparent; color: var(--danger); border-color: var(--danger-border); }
.btn--danger:hover { background: var(--danger-bg); border-color: var(--danger); }

.btn--sm { padding: .38rem .68rem; font-size: .84rem; }
.btn--icon { padding: .4rem; }
.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- List (aliases) ---------- */
.list { list-style: none; padding: 0; margin: 0; }
.list li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
}
.list li:last-child { border-bottom: none; }
.list .txt { flex: 1; }
.add-row { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.add-row input { flex: 1; min-width: 160px; }

/* ---------- Empty state ---------- */
.empty { padding: 26px 20px; text-align: center; color: var(--faint); font-size: .92rem; }

/* ---------- Flash ---------- */
.flash {
  padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 18px;
  border: 1px solid transparent; font-size: .92rem; font-weight: 500;
  display: flex; align-items: center; gap: 9px;
}
.flash::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.flash.error { background: var(--err-bg); color: var(--err-text); border-color: var(--err-border); }
.flash.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }

.backlink { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .92rem; margin-top: 4px; }
.backlink:hover { color: var(--primary); text-decoration: none; }

.dash-form { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin: 0 0 18px; border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.dash-form label {
  display: flex; flex-direction: column; gap: 4px;
  color: var(--faint); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
}
/* Специфичнее общего input[type=date] / select — иначе коробки вернутся.
   Фон НЕ прозрачный, а цвета страницы: на вид это то же самое, контрол
   остаётся безрамочным, но Chrome рисует нативный выпадающий список от фона
   контрола — прозрачному он подставлял белый системный. */
/* Высота полей строки задана явно и одинаково — вместе с .clan-static ниже.
   Своей интринсивной высоте контролов доверять нельзя: её считает браузер, и
   у Chrome с Firefox она разная. Пока высота была браузерной, подогнанное под
   один браузер название разъезжалось в другом. */
.dash-form select, .dash-form input[type=date] {
  border: none; border-bottom: 1px solid var(--border-strong); border-radius: 0;
  background-color: var(--bg); padding: 3px 2px; color: var(--text); font-size: .95rem;
  box-sizing: border-box; height: 1.75rem; line-height: 1.25;
}
.dash-form select:focus, .dash-form input[type=date]:focus {
  outline: none; border-bottom-color: var(--primary); box-shadow: none;
}
/* Единственный клан показывается текстом вместо списка. Задача — чтобы span
   занял в строке формы ровно то же место, что занял бы select: поля выровнены
   по нижнему краю, и коробка выше соседней выталкивает свою подпись вверх.

   Высота та же 1.75rem, что и у контролов выше, и это принципиально: раньше
   здесь стояла высота, снятая с select в Chrome, — в Firefox контрол меряется
   иначе, и название разъезжалось с соседним полем. Теперь высоту всей строке
   задаём мы, а не браузер.

   flex-центрирование нужно отдельно: контрол центрирует свой текст внутри
   коробки сам, а span без этого посадил бы его по базовой линии строки.

   text-transform и letter-spacing гасим потому, что .dash-form label задаёт
   их своей подписи («КЛАН», «ПЕРИОД»). Контролу их снимает браузерный стиль,
   а span наследует всё — и «Графство» выходило вразрядку заглавными рядом с
   обычным написанием того же имени в заголовке страницы. */
.dash-form .clan-static {
  box-sizing: border-box; height: 1.75rem;
  display: flex; align-items: center;
  padding: 3px 2px; color: var(--text); font-size: .95rem;
  border-bottom: 1px solid transparent;
  text-transform: none; letter-spacing: normal;
}
.dash-form .btn { margin-left: auto; }
/* .dash-form label задаёт display: flex всем label — без этого правила
   атрибут [hidden] на .preset-dates ничего не скроет */
.preset-dates[hidden] { display: none; }

/* ---------- Dashboard: progress-to-norm ---------- */
.progress-sub { color: var(--faint); font-size: .82rem; margin-top: 6px; }

/* ---------- Рейтинг: таблица ---------- */
.toolbar-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin: 0; }
.toolbar-count { color: var(--faint); font-size: .85rem; }
.toolbar-link { color: var(--primary); font-size: .9rem; font-weight: 500; }
.toolbar-link:first-of-type { margin-left: auto; }

/* Фильтр по группе, пришедший со сводки /clan: чип называет активный фильтр
   и служит ссылкой на ту же страницу без него */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-size: .82rem; font-weight: 500;
  text-decoration: none;
}
.chip:hover { border-color: var(--border-strong); text-decoration: none; }
.chip-x { color: var(--faint); font-weight: 700; }

.lb-table td { position: relative; }
/* Колонка «#» по центру: у первых трёх мест там медаль 27px, у остальных цифра
   в один-два знака, и при выравнивании по левому краю столбик мест шёл бы
   ступенькой. В мобильной раскладке ниже это сбрасывается — там ячейка
   становится обычной строкой сверху карточки. */
.lb-table thead th:first-child,
.lb-table tbody td:first-child { text-align: center; }
.lb-row--behind td:first-child::before,
.lb-row--ok td:first-child::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
}
.lb-row--ok td:first-child::before { background: var(--ok-fill); }
.lb-row--behind td:first-child::before { background: var(--danger-fill); }

.lb-norm-col { width: 150px; }
.gap-val { margin-top: 4px; font-family: var(--font-mono); font-size: .92rem; font-weight: 500; color: var(--faint); }
.gap-val--behind { color: var(--danger); }
.gap-val--ok { color: var(--ok); }

/* Точка событий кодируется формой, а не третьим цветом: жёлтый неотличим от латуни */
.lb-events { text-align: center; }
.event-dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  vertical-align: middle; cursor: help; border: 1.5px solid var(--ok-fill);
}
.event-dot--green { background: var(--ok-fill); }
.event-dot--yellow { background: linear-gradient(90deg, var(--ok-fill) 50%, transparent 50%); }
.event-dot--red { background: transparent; border-color: var(--danger-fill); }
.chart-wrap { position: relative; height: 320px; }

/* ---------- Login ---------- */
.login-wrap { display: flex; justify-content: center; padding-top: 6vh; }
.login-card { width: 100%; max-width: 360px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: .88rem; }
.login-form .btn { margin-top: 4px; }
.topbar-inner .logout-form { margin-left: auto; }
.topbar-inner .navlink--login { margin-left: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .container { padding: 22px 16px 56px; }
  /* Ссылок больше, чем влезает в 375px: даём шапке переноситься,
     иначе вся страница едет вбок */
  .topbar-inner { height: auto; flex-wrap: wrap; row-gap: 2px; padding: 8px 16px; }
  .navlink { padding: 4px 2px; }
  .data-table th, .data-table td { padding: 10px 12px; }
  .form-grid { grid-template-columns: 1fr; gap: 6px 0; max-width: none; }
  .form-grid > label { margin-top: 8px; }
}

/* ---------- Рейтинг: шапка и сводка ---------- */
.lb-head { margin: 26px 0 14px; }
.lb-title { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.lb-sub { color: var(--muted); font-size: .92rem; margin: 4px 0 0; }

.summary { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 22px; }
.summary-figures { display: flex; flex-wrap: wrap; }
.figure { flex: 1 1 160px; padding: 14px 18px; border-right: 1px solid var(--border); }
.figure:last-child { border-right: none; }
/* Счётчики — ссылки на рейтинг с активным фильтром: сбрасываем стандартные
   стили <a>, чтобы карточка выглядела так же, как на /dashboard. */
a.figure, a.figure:hover { color: inherit; text-decoration: none; }
a.figure:hover { background: var(--surface-2); }
a.figure:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ring); }
.figure-label { color: var(--muted); font-size: .8rem; margin-bottom: 4px; }
.figure-val { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.figure-val--behind { color: var(--danger); }
.figure-val--ok { color: var(--ok); }
.figure-of { color: var(--faint); font-size: 1rem; font-weight: 700; }
.figure-caption { color: var(--muted); font-size: .72rem; margin-top: 3px; }

.stroy { padding: 13px 18px 0; line-height: 0; }
.stroy-cell { display: inline-block; width: 11px; height: 11px; margin: 0 2px 2px 0; background: var(--ok-fill); }
/* Глубина отставания от нормы: чем ярче клетка, тем дальше участник до нормы */
.stroy-cell--near { background: var(--behind-near); }
.stroy-cell--mid { background: var(--behind-mid); }
.stroy-cell--behind { background: var(--danger-fill); }
/* Ссылка не должна выглядеть ссылкой: клетка несёт цвет через фон, не текст */
a.stroy-cell, a.stroy-cell:hover { text-decoration: none; }

@media (max-width: 640px) {
  .figure { flex-basis: 50%; }
}

.summary-progress { padding: 14px 18px; border-top: 1px solid var(--border); }

@media (max-width: 640px) {
  .lb-table thead { display: none; }
  .lb-table, .lb-table tbody, .lb-table tr, .lb-table td { display: block; width: auto; }
  .lb-table tr {
    border-bottom: 1px solid var(--border);
    padding: 10px 12px 12px 15px;
    position: relative;
  }
  .lb-table td { border: none; padding: 2px 0; }
  /* Селектор с tbody, а не просто td:first-child: центрирование колонки «#»
     выше задано как .lb-table tbody td:first-child, и правило послабее его не
     перебило бы даже отсюда — номер уехал бы в середину карточки. */
  .lb-table tbody td:first-child { text-align: left; color: var(--faint); font-family: var(--font-mono); font-size: .78rem; }
  /* Полосу статуса рисуем на самой карточке: первая ячейка стала блоком
     по высоте своего содержимого, и полоса на ней схлопнулась бы в засечку */
  .lb-row--ok td:first-child::before,
  .lb-row--behind td:first-child::before { content: none; }
  .lb-table tr::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  }
  .lb-table .lb-row--ok::before { background: var(--ok-fill); }
  .lb-table .lb-row--behind::before { background: var(--danger-fill); }
  .lb-table td.num { text-align: left; }
  .lb-table td.num::before,
  .lb-table td.lb-events::before,
  .lb-table td.lb-norm-col::before {
    content: attr(data-label) " ";
    color: var(--faint); font-family: var(--font-body); font-size: .78rem;
  }
  .lb-table td.lb-norm-col { width: auto; margin-top: 6px; }
  .lb-table td.lb-events { text-align: left; }
  /* Имя — то, ради чего карточку и открывают; остаток до нормы теперь того же
     размера везде через общее правило .gap-val, отдельного переопределения не нужно */
  .lb-table .uname { font-size: 1rem; font-weight: 500; }
}

/* ---------- Клановый дашборд ---------- */
.tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: 20px 0 6px; }
.tile { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; border-top: 3px solid var(--cat-other); }
/* «Всего» — не категория, поэтому берёт нейтральный тон, а не цвет из
   категорийного набора: латунь там занята турнирами, и одинаковая кромка
   у двух плиток читалась бы как их родство */
.tile--total { border-top-color: var(--text); }
.tile--crypts { border-top-color: var(--cat-crypts); }
.tile--citadels { border-top-color: var(--cat-citadels); }
.tile--epics { border-top-color: var(--cat-epics); }
.tile--tournaments { border-top-color: var(--cat-tournaments); }
.tile--monsters { border-top-color: var(--cat-monsters); }
.tile-label { color: var(--muted); font-size: .76rem; margin-bottom: 4px; }
.tile-val { font-family: var(--font-display); font-size: 1.25rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tile-delta { margin-top: 4px; font-family: var(--font-mono); font-size: .72rem; color: var(--faint); }
/* Рост и падение сбора. Осознанный компромисс: патина и оксблад на этом же экране
   значат «норма закрыта / не закрыта» — в строе и в счётчике «Клану до нормы», —
   так что один цвет здесь говорит о двух разных вещах. Плата за читаемость:
   серыми дельты терялись. */
.tile-delta--up { color: var(--ok); }
.tile-delta--down { color: var(--danger); }
.tiles-note { color: var(--faint); font-size: .76rem; margin: 0 0 18px; }

.metric-switch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.metric-switch button { font: inherit; font-size: .82rem; padding: 4px 10px; background: transparent; color: var(--muted); border: none; cursor: pointer; }
.metric-switch button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }

.clan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

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

.bar-row { border-bottom: 1px solid var(--border); padding: 10px 0; }
.bar-row:last-child { border-bottom: none; }
.bar-row summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.bar-row summary::-webkit-details-marker { display: none; }
.bar-key { width: 10px; height: 10px; flex: none; background: var(--cat-other); }
.bar-key--crypts { background: var(--cat-crypts); }
.bar-key--citadels { background: var(--cat-citadels); }
.bar-key--epics { background: var(--cat-epics); }
.bar-key--tournaments { background: var(--cat-tournaments); }
.bar-key--monsters { background: var(--cat-monsters); }
.bar-name { flex: 1; }
.bar-val { font-family: var(--font-mono); font-size: .84rem; color: var(--muted); }
.bar-track { height: 6px; background: var(--track); border-radius: 2px; margin: 6px 0 0; overflow: hidden; }
.bar-fill { height: 100%; background: var(--cat-other); }
.bar-fill--crypts { background: var(--cat-crypts); }
.bar-fill--citadels { background: var(--cat-citadels); }
.bar-fill--epics { background: var(--cat-epics); }
.bar-fill--tournaments { background: var(--cat-tournaments); }
.bar-fill--monsters { background: var(--cat-monsters); }
.bar-sources { list-style: none; margin: 8px 0 0; padding: 0 0 0 20px; }
.bar-sources li { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .84rem; padding: 2px 0; }
.bar-source-val { font-family: var(--font-mono); }

.top-list { list-style: none; margin: 0; padding: 0; }
.top-list li { display: flex; align-items: center; gap: 12px; padding: 9px 20px; border-bottom: 1px solid var(--border); }
.top-list li:last-child { border-bottom: none; }
/* Ширина под медаль (27px), а не под цифру: иначе строки 1–3 разъехались бы с
   4–5. flex: none — чтобы флексовая строка не ужимала коробку с картинкой.
   text-align: center — цифры 4–5 иначе жались бы к левому краю коробки, которую
   медаль занимает целиком, и столбик мест выглядел бы ступенькой. */
.top-rank { flex: none; width: 27px; text-align: center; color: var(--faint); font-family: var(--font-mono); font-size: .8rem; }
/* Размер медали задан атрибутами width/height в _medal.html. Высоту здесь НЕ
   переопределять: заданная в CSS высота выключает пропорцию из атрибутов —
   ровно так когда-то приехали сплющенные аватары (см. комментарий у .mate-pic). */
.medal { vertical-align: middle; }
.top-name { flex: 1; color: var(--text); }
.top-name:hover { color: var(--primary); text-decoration: none; }
.top-val { font-family: var(--font-mono); font-size: .88rem; }

/* ---------- Свёртка: <details>, у которого summary размечен как card-head ---------- */
/* `summary` со своей раскладкой (`.card-head` — flex) теряет штатный
   треугольник, поэтому маркер рисуется сам, из бордюров. */
.fold > summary { cursor: pointer; list-style: none; border-bottom: none; transition: background .12s; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { background: var(--surface-2); }
.fold[open] > summary { border-bottom: 1px solid var(--border); }
.fold > summary h2 { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.fold > summary h2::before {
  content: ""; flex: none; width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .12s;
}
.fold[open] > summary h2::before { transform: rotate(90deg); }

/* Свёртка внутри карточки: соседние группы разделяются линией, у первой её
   роль играет нижняя граница шапки карточки. Скоуп через «.card > » —
   иначе селектор ловит и `/tournaments`, где сама свёртка — карточка
   (`.card.fold`, соседи друг другу, а не вложены в общую `.card`), и у неё
   уже есть свой бордюр: второй и следующие месяцы получали лишнюю линию
   вплотную к границе карточки. */
.card > .fold + .fold > summary { border-top: 1px solid var(--border); }
.board-more { justify-content: center; font-size: .88rem; }
.board-more a { color: var(--muted); }

/* Сводка турниров на клановом экране: строка на проведение, без раскрытия. */
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
}
.board-list li:last-child { border-bottom: none; }
.board-list li:hover { background: var(--surface-2); }
.board-name { font-weight: 500; }
.board-count { color: var(--faint); font-size: .85rem; font-family: var(--font-mono); }