/* ==========================================================================
   cs2uz — дизайн-слой поверх NEO Remastered
   --------------------------------------------------------------------------
   Подключается последним (после стилей шаблона и модулей). Вендорские
   файлы не трогаем — обновление шаблона не сносит редизайн.

   Принципы:
   · плоские тональные поверхности вместо обводок и теней;
   · блоки не «подпрыгивают» при наведении — реагирует содержимое;
   · --span (#2B357D) — заливка; для текста/иконок — --span-ink;
   · золото (--money) — только деньги и премиум; у денежных CTA срезанный угол;
   · движение — пружины через linear(), без JS.
   ========================================================================== */

/* 1. Токены
   ========================================================================== */

:root {
  --font-family-1: "Unbounded", "SF Pro Display", sans-serif;
  --font-family-2: "SF Pro Display", -apple-system, "Segoe UI", sans-serif;

  /* Читаемые производные акцента. Считаются от --span, поэтому
     переживают смену палитры в редакторе тем. */
  /* Акцент #6080ff сам читается на фоне — для текста чуть осветляем,
     для ховера заливки — светлее на ступень */
  --span-ink: color-mix(in oklch, var(--span) 78%, #ffffff);
  --span-ink-dim: color-mix(in oklch, var(--span) 70%, var(--text-secondary));
  --span-bright: color-mix(in oklch, var(--span) 88%, #ffffff);
  --money-ink: color-mix(in oklch, var(--money) 85%, #fff4d6);

  /* Поверхности-«подъёмы» для поповеров: светлее карточки, без теней */
  --surface-raised: color-mix(in srgb, var(--card) 70%, #3a4466);
  --surface-glass: color-mix(in srgb, var(--card) 88%, transparent);
  --hairline: rgba(255, 255, 255, .06);

  --radius-xs: 6px;
  --radius-s: 8px;
  --radius-m: 10px;
  --radius-l: 14px;
  --radius-xl: 20px;

  /* Движение */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: var(--ease-out);
  --ease-spring-soft: var(--ease-out);
  --dur-fast: .16s;
  --dur: .26s;
  --dur-spring: .6s;

  --transition-duration: var(--dur-fast);
  --transition-ease-2: all var(--dur-fast) var(--ease-out);
  --box-shadow-b-30: none;
  --input-height: 36px;
  --nav-h: 3.75rem; /* высота шапки, 60px */
}

/* Пружины — stiffness≈380 / damping≈30, лёгкий перелёт ~3% (как в framer-motion) */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, .006, .025 2.2%, .101 4.6%, .224 7.1%, .542 13.6%,
        .68 16.7%, .791 19.8%, .88 23%, .938 25.7%, .982 28.6%, 1.009 31.6%,
        1.025 34.7%, 1.03 37.7%, 1.028 40.9%, 1.012 48.3%, 1.003 54.4%,
        .999 61.4%, .999 77.5%, 1);
    --ease-spring-soft: linear(0, .02 1.4%, .08 3%, .2 5.6%, .5 12%, .7 17.4%,
        .84 23%, .93 29%, .975 35%, .995 42%, 1.004 52%, 1.002 66%, 1);
  }
}

/* 2. База
   ========================================================================== */

html {
  scroll-padding-top: calc(var(--nav-h) + 12px); /* якоря не прячутся под липкую шапку */
  -webkit-tap-highlight-color: transparent;
}

/* Один скроллер — окно. В шаблоне body (height:100% + overflow-x:hidden)
   сам становился областью прокрутки, а html держал ещё одну полосу
   (overflow-y:scroll) — получалось две. overflow-x:clip обрезает
   переполнение, но области прокрутки не создаёт. */
body {
  height: auto;
  overflow-x: clip;
  overflow-y: visible;
}

/* Футер к низу. Шаблон прижимал его через .container-fluid { height:100% },
   а процент работал только пока у body была фиксированная height:100%.
   С height:auto растягиваем контент флексом — он съедает свободное место
   в колонке .global-container, футер уходит вниз. */
.global-container > .container-fluid {
  flex: 1 0 auto;
  height: auto;
}

body {
  font-family: var(--font-family-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--text-default);
}

::selection {
  background-color: var(--span);
  color: #fafafa;
}

/* Скроллбары: тонкие и нейтральные */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--button-hover) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: transparent;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
  background-color: var(--button-hover);
  border: 0;
  border-radius: 6px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track:hover {
  background-color: transparent;
}

.no-scrollbar,
.no_scroll {
  scrollbar-width: none;
}

/* Фокус только для клавиатуры — мышью колец нет */
:where(a, button, .button, [role="button"], [role="tab"], summary, label):focus-visible {
  outline: 2px solid var(--span-ink);
  outline-offset: 2px;
}

hr {
  border-top-color: var(--hairline);
}

/* 3. Типографика
   ========================================================================== */

h1, h2, h3, .h1, .h2, .h3 {
  letter-spacing: -.01em;
  text-wrap: balance;
}

p {
  color: var(--text-custom);
  text-wrap: pretty;
}

a {
  transition: color var(--dur-fast) var(--ease-out);
}

/* Цифры не прыгают при обновлении онлайна/счётчиков */
.statistics_number,
.online__count,
.online__item span,
.server_players_block,
.preset-amount,
#numberInput,
table td {
  font-variant-numeric: tabular-nums;
}

code {
  background-color: var(--input-form);
  border-color: transparent;
  color: var(--text-custom);
  border-radius: var(--radius-xs);
}

/* Подписи-«оверлайны» — общий приём для служебных заголовков */
table thead th,
.statistics_name,
.language__modal-title,
legend,
.lk-top__title {
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* 4. Кнопки
   ========================================================================== */

button,
.button {
  height: var(--input-height);
  /* Прозрачная 1px-рамка как в шаблоне: вендорный button:focus ставит
     border 1px — при base 0 кнопка росла на 2px и толкала соседей. */
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  padding-inline: .85rem;
  background-color: var(--button);
  color: var(--text-custom);
  font-weight: var(--font-weight-5);
  letter-spacing: .005em;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out),
    transform .22s var(--ease-out);
}

button:hover,
.button:hover {
  background-color: var(--button-hover);
  color: var(--text-default);
}

button:focus,
.button:focus {
  border-color: transparent;
}

/* Нажатие: «продавливание» внутрь своих границ + волна от точки клика
   (cs2uz.js). scale не меняет раскладку; возврат без перелёта. */
button:active:not(:disabled),
.button:active:not(.disabled),
.chips_btn:active,
.filter:active,
.popup_gateways-label:active {
  transform: scale(.97);
  filter: brightness(.94);
  transition-duration: var(--dur-fast), var(--dur-fast), .05s, .06s;
}

button.active,
.button.active,
.button-plimary:hover {
  background-color: var(--span);
  color: #fafafa;
}

button.active:hover,
.button.active:hover {
  background-color: var(--span-bright);
}

button:disabled,
button.disabled,
.button.disabled,
.button-pay:disabled,
button:disabled:hover,
button.disabled:hover,
.button.disabled:hover,
.button-pay:disabled:hover {
  background-color: var(--btn-disabled);
  color: rgba(255, 255, 255, .22);
  cursor: not-allowed;
}

.button-delete {
  background-color: var(--red-10);
  color: var(--red);
}

.button-delete:hover {
  background-color: var(--red-20);
  color: var(--red);
}

/* Кнопки пополнения (шапка и модалка) — обычная акцентная заливка.
   В шаблоне у .pay_button цвета денег заданы через !important — перебиваем так же. */
.pay_button {
  padding-inline: .85rem .95rem;
  background: var(--span) !important;
  color: #fafafa;
}

.pay_button .hide_balance_text {
  color: #fafafa !important;
  font-weight: var(--font-weight-6);
}

.pay_button svg {
  fill: currentColor !important;
}

.pay_button:hover {
  background: var(--span-bright) !important;
  color: #fafafa;
}

.button-pay {
  background-color: var(--span);
  color: #fafafa;
  font-weight: var(--font-weight-6);
}

.button-pay:not(:disabled):hover {
  background-color: var(--span-bright);
  color: #fafafa;
}

.preset-amount {
  font-weight: var(--font-weight-6);
}

/* Иконочные кнопки */
/* Квадратная иконочная кнопка: без боковых отступов, иначе у ссылок
   с классом .button (их отступы перебивают шаблонные) иконка сжималась */
.button-icon {
  width: var(--input-height);
  padding-inline: 0;
  justify-content: center;
}

.button-icon > svg {
  flex: none;
}

/* 5. Поля ввода
   ========================================================================== */

/* Специфичность — как у базовых правил шаблона (input / textarea / select),
   через :where(). Иначе любые стили модулей вида `.social-block input`
   проигрывали бы нашим и поля выглядели бы не так, как задумал модуль. */
input:where(:not([type="checkbox"]):not([type="radio"])),
input[type="number"],
textarea,
select {
  border-radius: var(--radius-s);
  padding-inline: .85rem;
  background-color: var(--input-form);
  outline: 0;
  color: var(--text-default);
  caret-color: var(--span-ink);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/* Фокус: поле чуть светлеет. (0,1,0) — ниже любых `.класс input` модулей */
:where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
  background-color: var(--button);
}

/* Вендорная обводка и brightness при фокусе — убираем, фон не трогаем */
input:focus,
input[type="number"]:focus,
textarea:focus,
select:focus:not([readonly]) {
  outline: 0;
  filter: none;
}

input:disabled,
input[readonly] {
  background-color: var(--btn-disabled);
  color: rgba(255, 255, 255, .3);
}

input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-default) !important;
}

::placeholder,
::-webkit-input-placeholder {
  color: var(--text-secondary);
  opacity: .75;
}

label {
  color: var(--text-custom);
}

label svg {
  fill: var(--text-secondary);
}

fieldset {
  border: 0;
  background-color: var(--transparent-2-w);
  border-radius: var(--radius-l);
}

/* Чекбоксы / радио / свитчи — в цветах бренда */
input[type="checkbox"],
input[type="radio"] {
  --active: var(--span);
  --active-inner: #fafafa;
  --border: rgba(255, 255, 255, .16);
  --border-hover: rgba(255, 255, 255, .3);
  --background: transparent;
  --disabled: var(--btn-disabled);
  --disabled-inner: var(--span-middle);
  --focus: 3px solid var(--span-middle);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  --d-t-e: var(--ease-spring);
}

input[type="checkbox"]:focus:not(:focus-visible),
input[type="radio"]:focus:not(:focus-visible) {
  box-shadow: none;
}

/* Загрузка файлов, спиннер */
.file-upload-container {
  border: 1px dashed rgba(255, 255, 255, .1);
  border-radius: var(--radius-m);
}

.file-upload-container label {
  border: 0;
  border-radius: var(--radius-s);
}

.spinner .path {
  stroke: var(--span-ink);
}

/* 6. Карточки, таблицы, табы, фильтры
   ========================================================================== */

.card {
  border-radius: var(--radius-l);
  background-color: var(--card);
}

.table-responsive {
  border: 0;
  border-radius: var(--radius-l);
  background-color: var(--card);
}

table {
  border-radius: var(--radius-l);
  background-color: var(--card);
}

table thead th {
  font-size: 11px;
  font-weight: var(--font-weight-6);
  color: var(--text-secondary);
  opacity: 1;
}

table tbody td,
table thead th,
table tfoot td {
  border-bottom: 1px solid var(--hairline);
}

table tbody tr:last-child td {
  border-bottom-color: transparent;
}

table tbody tr {
  transition: background-color var(--dur-fast) var(--ease-out);
}

table tbody tr:hover {
  color: var(--text-default);
  background-color: rgba(255, 255, 255, .025);
}

/* Чипсы и фильтры: нейтральные → активный залит акцентом */
.chips_btn,
.filter {
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 .8rem;
  border: 0;
  border-radius: var(--radius-s);
  background-color: var(--button);
  color: var(--text-custom);
  font-size: 13px;
  font-weight: var(--font-weight-6);
  letter-spacing: .02em;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out),
    transform .22s var(--ease-out);
}

/* Толщина рамки фиксирована во всех состояниях — иначе вендорный
   button:focus (1px) меняет размер чипса при клике */
.chips_btn,
.chips_btn:hover,
.chips_btn:focus,
.chips_btn:active,
.filter:focus,
.filter:active,
.button_pagination:focus,
[role="tab"]:focus {
  border-width: 0;
}

.chips_btn:hover,
.filter:hover {
  border: 0;
  background-color: var(--button-hover);
  color: var(--text-default);
}

.chips_active,
.chips_active:hover,
.filter.active,
.filter.active:hover {
  border: 0 !important;
  background-color: var(--span);
  color: #fafafa;
}

/* Табы */
[role="tab"] {
  border: 0;
}

[role="tab"][aria-selected="true"] {
  border: 0;
  background-color: var(--span);
  color: #fafafa;
}

[role="tabpanel"] {
  border: 0;
  border-radius: var(--radius-l);
}

/* Пагинация: отдельные плашки вместо склеенной рамки */
.pagination {
  gap: 4px;
}

.button_pagination,
.button_pagination:first-child,
.button_pagination:last-child {
  border: 0;
  border-radius: var(--radius-s);
  background-color: var(--button);
  font-weight: var(--font-weight-6);
}

.button_pagination:hover {
  background-color: var(--button-hover);
  color: var(--text-default);
}

.button_pagination.active {
  background-color: var(--span);
  color: #fafafa;
}

.button_pagination.disabled {
  background-color: transparent;
  opacity: .4;
}

/* Адаптивные селекты */
.adaptive-select {
  border: 0;
  border-radius: var(--radius-m);
}

.adaptive-select:hover {
  border: 0;
  background-color: color-mix(in srgb, var(--input-form) 80%, var(--button-hover));
}

.adaptive-select__label,
.adaptive-select__label:has(input:checked) {
  border: 0;
}

.adaptive-select__label:has(input:checked) {
  background-color: var(--span-10);
}

.adaptive-select__dropdown-list {
  border: 0;
  box-shadow: none;
  background-color: var(--surface-raised);
}

/* Скелетоны */
.skeleton--default::after,
.skeleton--slow::after,
.skeleton--fast::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .035) 45%, rgba(255, 255, 255, .035) 55%, transparent 100%);
}

/* 7. Каркас: сайдбар (по мотивам cybershoke)
   --------------------------------------------------------------------------
   Разметка — interface/sidebar.php. Бренд + онлайн сверху, кнопка
   сворачивания на кромке, плоский список (категории = группы
   с разделителями), соцсети снизу. Свёрнутый — только иконки.
   ========================================================================== */

/* Слои. В шаблоне .container-fluid имел z-index:1 — у flex-элемента это
   отдельный контекст наложения, и все модалки внутри него (z 9998)
   оказывались ниже сайдбара (z 100). Снимаем ловушку: модалки, шапка
   и сайдбар соревнуются на общем уровне. Сайдбар (120) выше шапки (110),
   чтобы стеклянная полоса шапки не перекрывала кнопку сворачивания. */
.container-fluid {
  z-index: auto;
}

.sidebar {
  z-index: 120;
}

.sidebar {
  --sb-icon: color-mix(in oklch, var(--span-ink) 45%, var(--text-secondary));
  width: 5rem;
  padding: 10px .75rem 1rem; /* центр строки бренда = центр шапки (30px) */
  gap: 0;
  background-color: var(--grey);
  border-right: 0;
  transition: width var(--dur) var(--ease-out);
}

.sidebar.opened {
  width: 16rem;
}

/* Свечение в левом верхнем углу: небольшое, медленно «дышит» —
   растут и гаснут радиус и прозрачность. Радиус анимируется внутри
   градиента (@property), поэтому свечение не выходит за края сайдбара
   даже в свёрнутом виде. z-index:-1 — над фоном сайдбара, под контентом. */
@property --ed-glow-r {
  syntax: "<length>";
  inherits: false;
  initial-value: 130px;
}

.sidebar::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 auto 0;
  width: auto;
  height: 260px;
  z-index: -1;
  background: radial-gradient(var(--ed-glow-r) var(--ed-glow-r) at 0 0,
      color-mix(in srgb, var(--span) 22%, transparent),
      transparent 100%);
  opacity: .55;
  pointer-events: none;
  animation: ed-sidebar-glow 6s var(--ease-in-out) infinite alternate;
}

@keyframes ed-sidebar-glow {
  from {
    --ed-glow-r: 120px;
    opacity: .5;
  }
  to {
    --ed-glow-r: 190px;
    opacity: 1;
  }
}

/* Бренд и онлайн */
.sidebar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  height: 40px;
  padding-inline: .5rem;
  margin-bottom: 1.25rem;
  flex: none;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--text-default);
}

.sidebar__logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.sidebar__wordmark {
  font-family: var(--font-family-1);
  font-size: 18px;
  font-weight: var(--font-weight-8);
  letter-spacing: -.01em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  color: var(--text-default);
}

.sidebar__online {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex: none;
  font-size: 14px;
  font-weight: var(--font-weight-7);
  font-variant-numeric: tabular-nums;
  color: var(--text-default);
}

.sidebar__online-count {
  color: inherit;
}

.sidebar__online {
  cursor: default;
}

.sidebar__online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: color-mix(in oklch, var(--span-ink) 30%, #5b78ff);
}

/* Кнопка сворачивания — квадрат на правой кромке */
.sidebar__toggle,
.sidebar__toggle:hover {
  position: absolute;
  /* низ кнопки — на 4px выше первого пункта (10 + 40 + 20 − 28 − 4) */
  top: 38px;
  right: -14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background-color: var(--button);
  color: var(--text-secondary);
  overflow: visible;
  perspective: none;
}

.sidebar__toggle:hover {
  background-color: var(--button-hover);
  color: var(--text-default);
}

.sidebar__toggle svg,
.sidebar.opened .sidebar__toggle svg {
  position: static;
  width: 10px;
  height: 10px;
  fill: currentColor;
  transition: transform var(--dur) var(--ease-out);
}

/* Кнопка видна только при наведении на сайдбар (и при фокусе с клавиатуры) */
.sidebar__toggle {
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.sidebar:hover .sidebar__toggle,
.sidebar__toggle:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

/* На сенсорных экранах ховера нет — кнопка видна всегда */
@media (hover: none) and (pointer: coarse) {
  .sidebar__toggle {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Раскрыт — стрелка «свернуть» (влево) */
.sidebar.opened .sidebar__toggle svg {
  transform: scaleX(-1);
}

/* Список */
.sidebar__wrapper {
  flex: 1;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  scrollbar-width: none;
}

.sidebar__list {
  gap: 4px;
  margin-top: 0;
  height: auto;
  overflow: visible;
}

/* Только отступы: перебиваем вендорное .sidebar.opened .sidebal__item.
   Цвета здесь не задаём — иначе этот селектор (0,3,0) перебил бы .active. */
.sidebar.opened .sidebal__item {
  padding: 0 .9rem;
}

.sidebal__item {
  position: relative;
  z-index: 1; /* над ползунком наведения */
  display: flex;
  align-items: center;
  gap: .85rem;
  height: 40px;
  padding: 0 .9rem;
  border: 0;
  border-radius: var(--radius-m);
  font-size: 16px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.sidebal__item svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: var(--sb-icon);
  transition: fill var(--dur-fast) var(--ease-out);
}

.sidebal__item:hover {
  border: 0;
  background-color: transparent; /* подсветку рисует общий ползунок */
  color: var(--text-default);
}

/* Ползунок наведения: один на весь список, плавно переезжает
   на пункт под курсором (cs2uz.js задаёт --y и --h) */
.sidebar__wrapper {
  position: relative;
}

.sidebar__hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: var(--h, 40px);
  border-radius: var(--radius-m);
  background-color: var(--transparent-5-w);
  transform: translateY(var(--y, 0));
  opacity: 0;
  pointer-events: none;
  transition:
    transform .32s var(--ease-out),
    height .32s var(--ease-out),
    opacity var(--dur) var(--ease-out);
}

.sidebar__hover.is-visible {
  opacity: 1;
}

/* Первое появление — без переезда из старой позиции */
.sidebar__hover.is-jump {
  transition: opacity var(--dur) var(--ease-out);
}

.sidebal__item:hover svg {
  fill: var(--text-custom);
}

/* Активный — мягкая синяя подложка, текст и иконка акцентом */
.sidebal__item.active,
.sidebal__item.active:hover {
  border: 0;
  /* непрозрачный — ползунок проезжает под ним, не смешиваясь */
  background-color: color-mix(in srgb, var(--span) 32%, var(--grey));
  color: var(--span-ink);
}

.sidebal__item.active svg {
  fill: var(--span-ink);
}

.sidebal__item.active::before {
  display: none;
}

/* Магазин / VIP — золото, как PREMIUM */
.sidebal__item.is-premium,
.sidebal__item.is-premium:hover {
  background-color: color-mix(in srgb, var(--money) 10%, var(--grey));
  color: var(--money);
}

.sidebal__item.is-premium svg {
  fill: var(--money);
}

.sidebar__divider {
  height: 1px;
  margin: .65rem .5rem;
  background-color: var(--hairline);
}

/* Соцсети */
.sidebar__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem;
  flex: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}

.sidebar__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-s);
  color: var(--text-secondary);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.sidebar__social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.sidebar__social:hover {
  background-color: var(--transparent-4-w);
  color: var(--text-default);
}

/* Свёрнутое состояние: только иконки, бренд — монограмма */
.sidebar:not(.opened) .sidebar__top {
  justify-content: center;
  padding-inline: 0;
}

.sidebar__monogram {
  display: none;
  font-family: var(--font-family-1);
  font-size: 22px;
  font-weight: var(--font-weight-8);
  line-height: 1;
  color: var(--text-default);
}

.sidebar:not(.opened) .sidebar__wordmark {
  display: none;
}

.sidebar:not(.opened) .sidebar__monogram {
  display: block;
}

.sidebar:not(.opened) .sidebar__online,
.sidebar:not(.opened) .sidebar__item-text {
  display: none;
}

.sidebar:not(.opened) .sidebal__item {
  justify-content: center;
  padding: 0;
}

.sidebar:not(.opened) .sidebar__socials {
  flex-direction: column;
  align-items: center;
}

/* Онлайн и логотип теперь живут в сайдбаре — в шапке на десктопе не дублируем */
@media (min-width: 769px) {
  body:has(.sidebar) .navbar .logo-text,
  body:has(.sidebar) .navbar .online {
    display: none;
  }
}

/* 8. Каркас: шапка
   ========================================================================== */

/* Шапка липкая. Под ней «стеклянный остров», который проявляется
   по мере прокрутки (scroll-driven animation, аналог useScroll). */
.navbar {
  position: sticky;
  top: 0;
  z-index: 110;
  isolation: isolate;
}

.navbar::before {
  /* Полоса на всю ширину окна от кромки сайдбара. fixed — значит,
     к раскладке шапки отношения не имеет: контент не сдвигается. */
  position: fixed;
  top: 0;
  left: var(--ed-sidebar-w, 0px);
  right: 0;
  bottom: auto;
  width: auto;
  max-width: none;
  height: var(--nav-h); /* = высота .navbar */
  z-index: -1;
  border-radius: 0;
  background-color: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  opacity: 0;
  pointer-events: none;
  transition: left var(--dur) var(--ease-out);
}

/* Ширина сайдбара — синхронно с его состояниями */
body:has(.sidebar) {
  --ed-sidebar-w: 5rem;
}

body:has(.sidebar.opened) {
  --ed-sidebar-w: 16rem;
}

@media (max-width: 768px) {
  body:has(.sidebar) {
    --ed-sidebar-w: 0px;
  }
}

@supports (animation-timeline: scroll()) {
  .navbar::before {
    /* Фон включается сразу на 100% с первого пикселя прокрутки */
    animation: ed-navbar-glass step-end both;
    animation-timeline: scroll(root block);
    animation-range: 0 1px;
  }
}

@supports not (animation-timeline: scroll()) {
  .navbar::before {
    opacity: 1;
  }
}

@keyframes ed-navbar-glass {
  to {
    opacity: 1;
  }
}

.navbar_usermenu {
  gap: 6px;
}

/* Логотип-визитка (текстовый): «дешифровка», как интерфейсы CS2.
   Буквы размечает cs2uz.js (brandLogo). При заходе буквы по очереди
   перебирают случайные символы и встают на место; в покое изредка
   «сбоит» одна буква; при наведении слово расшифровывается заново.
   Ширина каждой буквы зафиксирована — перебор не сдвигает соседей. */
.nav_sitename {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-family-1);
  font-weight: var(--font-weight-8);
  font-size: 20px;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--text-default);
  white-space: nowrap;
}

.nav_sitename .logo-ch {
  display: inline-block;
  text-align: center;
  color: var(--text-default);
  transition: color .25s var(--ease-out);
}

/* Точка — акцентом */
.nav_sitename .logo-ch.is-dot {
  color: var(--span);
}

/* Символ в процессе перебора — акцентный, затем «остывает» в белый */
.nav_sitename .logo-ch.is-scrambling {
  color: var(--span);
  transition: none;
}

/* Горизонтальное меню (режим navigation = navbar)
   --------------------------------------------------------------------------
   Тот же язык, что у сайдбара: компактные «таблетки», общий ползунок
   наведения (cs2uz.js), активный — мягкая синяя подложка, категории —
   со стрелкой и выпадающим блоком прямо под пунктом. */
@media (min-width: 1080px) {
  .drpdwn_menu,
  .drpdwn_menu.compact {
    position: relative;
    height: auto;
    gap: 2px;
    align-items: center;
  }

  .dropdown {
    height: auto;
  }

  /* Компактный вариант (.compact) — только геометрия. Цвета задаём
     отдельными селекторами: иначе .drpdwn_menu.compact .dropbtn (0,3,0)
     перебивает .dropbtn.active_btn (0,2,0) и активный пункт сереет. */
  .dropbtn,
  .drpdwn_menu.compact .dropbtn {
    position: relative;
    z-index: 1; /* над ползунком */
    height: var(--input-height);
    padding: 0 .75rem;
    gap: .5rem;
    flex-direction: row;
    border-bottom: 0;
    border-radius: var(--radius-s);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }

  .dropbtn {
    color: var(--text-custom);
  }

  .dropbtn svg,
  .drpdwn_menu.compact .dropbtn svg {
    width: 18px;
    height: 18px;
    transition: fill var(--dur-fast) var(--ease-out);
  }

  .dropbtn svg {
    fill: color-mix(in oklch, var(--span-ink) 45%, var(--text-secondary));
  }

  span.desc_nav_item,
  .drpdwn_menu.compact span.desc_nav_item {
    font-size: 14px;
    font-weight: var(--font-weight-6);
    line-height: 1;
  }

  span.desc_nav_item {
    color: inherit;
  }

  .dropbtn:hover,
  .dropbtn:hover .desc_nav_item {
    color: var(--text-default);
  }

  .dropbtn:hover svg {
    fill: var(--text-custom);
  }

  /* Активный пункт: текст и иконка — чистый акцент, в любом состоянии */
  .dropbtn.active_btn,
  .dropbtn.active_btn:hover,
  .dropbtn.active_btn .desc_nav_item,
  .dropbtn.active_btn:hover .desc_nav_item {
    border-bottom: 0;
    background-color: color-mix(in srgb, var(--span) 14%, var(--bg));
    color: var(--span);
  }

  .dropbtn.active_btn svg,
  .dropbtn.active_btn:hover svg {
    fill: var(--span);
  }

  /* Стрелка у категорий (у них .dropbtn — div, у обычных пунктов — a) */
  div.dropbtn::after {
    content: "";
    width: 10px;
    height: 10px;
    margin-left: -.1rem;
    background-color: currentColor;
    opacity: .6;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--dur) var(--ease-out);
  }

  /* Открытая категория: стрелка развёрнута, пункт подсвечен */
  .dropdown:has(.dropdown_show) > div.dropbtn {
    background-color: var(--transparent-5-w);
    color: var(--text-default);
  }

  .dropdown:has(.dropdown_show) > div.dropbtn::after {
    transform: rotate(180deg);
  }

  /* Выпадающий блок категории — прямо под пунктом */
  .dropdown_block {
    top: calc(100% + 8px);
    width: 280px;
    padding: 6px;
    gap: 2px;
  }

  .dropdown_item {
    padding: .65rem .75rem;
    gap: .75rem;
    align-items: center;
    border-radius: var(--radius-s);
  }

  .dropdown_item svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: color-mix(in oklch, var(--span-ink) 45%, var(--text-secondary));
  }

  .dropdown_item > div {
    width: auto;
    gap: 2px;
  }

  .dropdown_item > div h4 {
    font-size: 14px;
    font-weight: var(--font-weight-6);
  }

  .dropdown_item > div p {
    font-size: 12px;
    opacity: 1;
    color: var(--text-secondary);
  }

  .dropdown_item:hover h4 {
    color: var(--text-default);
  }

  .dropdown_item:hover div p {
    color: var(--text-custom);
  }

  .dropdown_item:hover svg {
    fill: var(--text-custom);
  }

  .dropdown_block .active_btn .dropdown_item {
    background-color: color-mix(in srgb, var(--span) 22%, transparent);
  }

  .dropdown_block .active_btn .dropdown_item h4,
  .dropdown_block .active_btn .dropdown_item svg,
  .dropdown_block .active_btn .dropdown_item:hover h4,
  .dropdown_block .active_btn .dropdown_item:hover svg {
    color: var(--span);
    fill: var(--span);
  }

  /* Ползунок наведения (создаётся cs2uz.js) */
  .drpdwn_menu > .nav__hover {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 0;
    width: var(--w, 0px);
    height: var(--input-height);
    margin-top: calc(var(--input-height) / -2);
    border-radius: var(--radius-s);
    background-color: var(--transparent-5-w);
    transform: translateX(var(--x, 0));
    opacity: 0;
    pointer-events: none;
    transition:
      transform .32s var(--ease-out),
      width .32s var(--ease-out),
      opacity var(--dur) var(--ease-out);
  }

  .drpdwn_menu > .nav__hover.is-visible {
    opacity: 1;
  }

  .drpdwn_menu > .nav__hover.is-jump {
    transition: opacity var(--dur) var(--ease-out);
  }
}

/* Бургер — светлые линии вместо тёмно-синих */
@media (max-width: 1079px) {
  .header_burger::before,
  .header_burger::after,
  .header_burger span {
    background-color: var(--text-default);
    height: 2px;
    transition: transform var(--dur) var(--ease-out), top var(--dur) var(--ease-out), bottom var(--dur) var(--ease-out);
  }

  .nav_header_menu {
    background-color: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .header_list li a,
  .header_list li:nth-child(even) a {
    background-color: transparent;
    border-radius: var(--radius-m);
    font-family: var(--font-family-1);
    font-size: 15px;
    font-weight: var(--font-weight-5);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-custom);
  }

  .header_list li a:hover,
  .header_list li a:focus {
    background-color: var(--transparent-4-w);
  }

  /* Пункты мобильного меню выезжают по очереди */
  .nav_header_menu.mmactive .header_list li {
    animation: ed-fade-up .55s var(--ease-spring-soft) backwards;
  }

  .nav_header_menu.mmactive .header_list li:nth-child(2) { animation-delay: .03s; }
  .nav_header_menu.mmactive .header_list li:nth-child(3) { animation-delay: .06s; }
  .nav_header_menu.mmactive .header_list li:nth-child(4) { animation-delay: .09s; }
  .nav_header_menu.mmactive .header_list li:nth-child(5) { animation-delay: .12s; }
  .nav_header_menu.mmactive .header_list li:nth-child(6) { animation-delay: .15s; }
  .nav_header_menu.mmactive .header_list li:nth-child(n+7) { animation-delay: .18s; }
}

/* Счётчик онлайна — в акцентном цвете (у шаблона был зелёный) */
.online__counter {
  background-color: color-mix(in srgb, var(--span) 14%, transparent);
  color: var(--span-ink);
  border-radius: var(--radius-s);
  padding: .35rem .6rem;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.online__counter:hover {
  background-color: color-mix(in srgb, var(--span) 22%, transparent);
}

.online__count {
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.online__square-wrapper {
  position: relative;
  justify-content: center;
}

.online__square-figure {
  animation: none;
}

.online__square-wrapper::after {
  content: "";
  position: absolute;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: var(--span);
  animation: ed-ping 2.4s var(--ease-out) infinite;
}

.online__square-figure {
  background-color: var(--span);
}

@keyframes ed-ping {
  0% { transform: scale(1); opacity: .6; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

.online__item span {
  background-color: var(--transparent-5-w);
  border-radius: var(--radius-xs);
}

/* Поиск в шапке */
.modal-searchcontent input {
  width: 11rem;
}

.modal-searchcontent svg {
  opacity: .35;
  fill: var(--text-custom);
  transition: opacity var(--dur-fast);
}

.user__avatar {
  border-radius: var(--radius-m);
}

.notification span {
  background-color: var(--span);
  box-shadow: 0 0 0 2px var(--bg);
}

/* 9. Поповеры: уведомления, язык, профиль, выпадающие меню, онлайн
   ========================================================================== */

.notification-wrapper,
.language__modal,
.user__menu,
.dropdown_block,
.online__wrapper,
.sidebar__flyout,
.modal_users_container .modal_blocks_content {
  border: 0;
  box-shadow: none;
  border-radius: var(--radius-l);
  background-color: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

/* Появление: пружина из точки привязки + лёгкий blur (как AnimatePresence) */
.notification-wrapper,
.language__modal,
.user__menu,
.dropdown_block,
.online__wrapper {
  /* Только вертикальный сдвиг: без scale и без точки привязки в углу,
     иначе поповер «вылетает» по диагонали */
  transform: translateY(-6px);
  scale: none;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur) var(--ease-out),
    visibility 0s linear var(--dur);
}

.notification-wrapper.modalActive,
.language__modal.modalActive,
.user__menu.modalActive,
.dropdown_block.dropdown_show,
.online__wrapper.visible {
  transform: none;
  scale: none;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur) var(--ease-out),
    visibility 0s;
}

.online__wrapper {
  top: 2.4rem;
  min-width: 14rem;
}

/* Содержимое профиль-меню появляется каскадом */
.user__menu.modalActive .user__links > * {
  animation: ed-fade-up .5s var(--ease-out) backwards;
}

.user__menu.modalActive .user__links > :nth-child(2) { animation-delay: .025s; }
.user__menu.modalActive .user__links > :nth-child(3) { animation-delay: .05s; }
.user__menu.modalActive .user__links > :nth-child(4) { animation-delay: .075s; }
.user__menu.modalActive .user__links > :nth-child(5) { animation-delay: .1s; }
.user__menu.modalActive .user__links > :nth-child(n+6) { animation-delay: .125s; }

.user__profile {
  border-bottom-color: var(--hairline);
}

.user_avatar_profile img {
  border-radius: var(--radius-m);
}

.user__links .button {
  background-color: transparent;
}

.user__links .button:hover {
  background-color: var(--transparent-5-w);
}

.user__links .pay-link {
  background-color: var(--money-bg);
  color: var(--money);
}

.user__links .pay-link:hover {
  background-color: var(--money);
  color: var(--text-default-invert);
}

.user_profile_footer {
  background-color: var(--transparent-3-w);
}

.notifications__header {
  border-bottom-color: var(--hairline);
}

.notify_body {
  border: 0;
  background-color: var(--transparent-4-w);
}

.notify_body:hover {
  border: 0;
  background-color: var(--transparent-5-w);
}

.notify_image {
  border-radius: var(--radius-m);
}

.noty_clear_all {
  background-color: var(--red-10);
}

.noty_clear_all:hover {
  background-color: var(--red-20);
}

.language__modal-current-lang {
  background-color: var(--transparent-5-w);
}

.language__modal-item {
  background-color: transparent;
}

.language__modal-item:hover {
  background-color: var(--transparent-5-w);
}

.dropdown_item {
  border: 0;
  background-color: transparent;
}

.dropdown_item:hover {
  border: 0;
  background-color: var(--transparent-5-w);
}

.dropdown_item svg {
  transition: fill var(--dur-fast);
}

.sidebar__flyout {
  transform: translateX(-6px);
  transform-origin: left top;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s;
}

.sidebar__flyout.visible {
  transform: none;
}

/* Результаты поиска */
.modal_users_header {
  background-color: var(--transparent-4-w);
  color: var(--text-custom);
}

.modal_users_container .modal_blocks_content a {
  border: 0;
  background-color: transparent;
}

.modal_users_container .modal_blocks_content a:hover {
  background-color: var(--transparent-5-w);
}

.modal_users_container .modal_blocks_content a:hover > svg {
  transform: none;
}

/* Тултипы */
.tippy-box[data-theme~="neo"] {
  border: 0;
  border-radius: var(--radius-s);
  background-color: var(--tooltip);
  color: var(--text-default);
  font-weight: var(--font-weight-5);
}

/* 10. Модальные окна
   ========================================================================== */

.popup_modal,
.modal-window,
.modal-window-server,
dialog[open]::backdrop {
  background: var(--bg-modal);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.popup_modal {
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}

.popup_modal.visible {
  transition: opacity var(--dur) var(--ease-out), visibility 0s;
}

.popup_modal_content,
.modal-window > div,
.modal-window .card,
.modal-window-server > div,
dialog {
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: none;
  background-color: var(--card);
}

/* Вход окна: подъём снизу + пружинное масштабирование */
.popup_modal_content {
  padding: 24px;
  transform: translateY(10px) scale(.98);
  transition: transform .45s var(--ease-spring-soft);
}

.popup_modal.visible .popup_modal_content {
  transform: none;
}

.modal_players_online > .modal-card {
  transform: translateY(10px) scale(.98);
  transition: transform .45s var(--ease-spring-soft);
}

.modal_players_online.modal_show > .modal-card {
  transform: none;
}

.popup_modal_head {
  font-family: var(--font-family-1);
  font-size: 18px;
  font-weight: var(--font-weight-6);
  letter-spacing: -.01em;
  padding-bottom: 18px;
}

/* Кнопки в шапке модалки (крестик, шестерёнка админа): только иконка,
   без подложки; между ними 4px. Шестерёнка прижата вправо через
   margin-left:auto из разметки шаблона, поэтому gap не раздвигает заголовок. */
.popup_modal_head {
  gap: 4px;
}

.popup_modal_close,
.modal-btn__close {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius-xs);
  background-color: transparent;
}

.popup_modal_close svg,
.modal-btn__close svg {
  width: 16px;
  height: 16px;
  fill: var(--text-default);
  opacity: .45;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.popup_modal_close:hover svg,
.modal-btn__close:hover svg {
  opacity: 1;
}

dialog {
  animation: ed-dialog-in .45s var(--ease-spring-soft) forwards;
}

@keyframes ed-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* Окно оплаты: способы оплаты без рамок, выбранный — заливка акцентом */
.popup_gateways-label {
  outline: 0;
  border-radius: var(--radius-l);
  background-color: var(--input-form);
  transition: background-color var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), transform .22s var(--ease-out) !important;
}

.popup_gateways-label:hover {
  background-color: var(--button-hover);
}

input.popup_gateways:checked + label.popup_gateways-label {
  background-color: var(--span-10);
}

input.popup_gateways:checked + label.popup_gateways-label::before {
  outline: 0;
  border-radius: var(--radius-l);
  background: linear-gradient(to top right, var(--span-middle), transparent 70%);
}

input.popup_gateways:checked + label.popup_gateways-label::after {
  outline: 0;
  background-color: var(--span);
  color: #fafafa;
}

.popup_promo_list {
  border: 0;
  background-color: var(--transparent-3-w);
}

.popup_arrow::before,
.popup_arrow::after {
  border-right-color: var(--transparent-10-w);
}

/* Уведомления-тосты */
.iziToast {
  border: 0 !important;
  border-radius: var(--radius-l);
  background-color: var(--surface-raised) !important;
}

.iziToast::after {
  box-shadow: none !important;
}

.iziToast .iziToast-icon {
  background-color: var(--span-ink) !important;
}

/* 11. Главная: статистика — минимализм без карточек
   --------------------------------------------------------------------------
   Ряд показателей прямо на фоне: тихая подпись сверху, ниже иконка
   и крупное число. Разделители тысяч ставит cs2uz.js. VIP — золотом.
   Сетка — по ширине самого блока (container query): 6 / 3 / 2 в ряд.
   ========================================================================== */

.row:has(> .col-md-2 > .statistics_container) {
  container: ed-stats / inline-size;
  /* Одна общая панель на все показатели; margin-inline 0 — края панели
     совпадают с краями карточек в соседних рядах */
  margin: .3125rem 0;
  padding: 1rem .5rem;
  border-radius: var(--radius-l);
  background-color: var(--card); /* плоский, как у остальных карточек сайта */
}

.row > .col-md-2:has(> .statistics_container) {
  position: relative;
}

/* Затухающие разделители: вертикальные — между показателями в ряду,
   горизонтальные — между рядами, когда показатели переносятся */
.row > .col-md-2:has(> .statistics_container)::before,
.row > .col-md-2:has(> .statistics_container)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  display: none;
}

.row > .col-md-2:has(> .statistics_container)::before {
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .09) 30%, rgba(255, 255, 255, .09) 70%, transparent);
}

.row > .col-md-2:has(> .statistics_container)::after {
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, .08) 70%, transparent);
}

/* 6 в ряд: вертикальные линии у всех, кроме первого */
.row > .col-md-2:has(> .statistics_container):not(:first-child)::before {
  display: block;
}

.statistics_container,
.statistic__premium,
.pulse_prem {
  display: grid;
  /* Подпись и число по центру; иконка — водяной знак (см. ниже) */
  position: relative;
  grid-template-columns: 1fr;
  grid-template-areas:
    "name"
    "number";
  justify-items: center;
  align-items: center;
  column-gap: .6rem;
  row-gap: .35rem;
  min-height: 0;
  padding: .75rem .5rem;
  background: none;
  border-radius: 0;
  outline: 0;
  animation: none;
  overflow: hidden; /* обрезает водяной знак по краям ячейки */
  isolation: isolate;
  text-align: center;
}

.statistic__premium::before {
  display: none;
}

.statistics_name {
  grid-area: name;
  font-size: 13px;
  font-weight: var(--font-weight-5);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
}

.statistics_number {
  grid-area: number;
  font-family: var(--font-family-2);
  font-size: 30px;
  font-weight: var(--font-weight-7);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-default);
}

/* Иконка — водяной знак: крупная, у левого края, выходит за границы
   ячейки (та её обрезает) и растворяется вправо маской — без наложения цвета */
.statistics_icon,
.statistic__premium .statistics_icon,
.statistic__premium:hover .statistics_icon {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 10px; /* правее разделителя, чтобы линия не резала знак */
  right: auto;
  display: flex;
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 90%);
  mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 90%);
}

.statistics_icon svg,
.statistics_container:hover .statistics_icon svg {
  width: 64px; /* помещается по высоте ячейки целиком */
  height: 64px;
  fill: var(--text-default);
  opacity: .06;
  transform: none;
  transition: none;
}

/* 4–6-й показатели (VIP, баны, муты) — знак справа, затухание зеркально */
.row > .col-md-2:nth-child(n + 4) > .statistics_container .statistics_icon {
  left: auto;
  right: 10px;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 35%, transparent 90%);
  mask-image: linear-gradient(270deg, #000 0%, #000 35%, transparent 90%);
}

/* VIP — тот же вид, но золотом; стрелка-подсказка шаблона не нужна */
.statistic__premium .statistics_name {
  color: color-mix(in srgb, var(--money) 75%, var(--text-secondary));
}

.statistic__premium .statistics_number {
  color: var(--money);
}

.statistic__premium .statistics_icon svg,
.statistic__premium:hover .statistics_icon svg {
  fill: var(--money);
  opacity: .14;
  transform: none;
}

.prem_icon {
  display: none;
}

@container ed-stats (max-width: 1000px) {
  .col-md-2:has(> .statistics_container) {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  /* 3 в ряд: вертикальные — не у первого в ряду; горизонтальная — над вторым рядом */
  .row > .col-md-2:has(> .statistics_container):nth-child(3n + 1)::before {
    display: none;
  }

  .row > .col-md-2:has(> .statistics_container):nth-child(n + 4)::after {
    display: block;
  }
}

@container ed-stats (max-width: 560px) {
  .col-md-2:has(> .statistics_container) {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* 2 в ряд */
  .row > .col-md-2:has(> .statistics_container):nth-child(3n + 1)::before {
    display: block;
  }

  .row > .col-md-2:has(> .statistics_container):nth-child(odd)::before {
    display: none;
  }

  .row > .col-md-2:has(> .statistics_container):nth-child(n + 3)::after {
    display: block;
  }

  .statistics_number {
    font-size: 22px;
  }

  .statistics_icon svg,
  .statistics_container:hover .statistics_icon svg {
    width: 48px;
    height: 48px;
  }

  .statistics_icon,
  .statistic__premium .statistics_icon {
    left: 4px;
  }

  .row > .col-md-2:nth-child(n + 4) > .statistics_container .statistics_icon {
    left: auto;
    right: 4px;
  }
}

/* 12. Главная: серверы
   ========================================================================== */

.servers_filter.card {
  padding: 6px;
  background-color: var(--card);
}

.filter_chips {
  gap: 4px;
}

a#updateservers {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-s);
  background-color: var(--button);
  transition: background-color var(--dur-fast);
}

a#updateservers:hover {
  background-color: var(--button-hover);
}

.servers_wrap {
  gap: 8px;
}

.server_block {
  border-radius: var(--radius-l) !important;
  background-color: var(--card);
  isolation: isolate;
}

.server_map_image::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--card) 50%, transparent) 55%, color-mix(in srgb, var(--card) 10%, transparent) 100%);
}

.map {
  transition: transform 1.2s var(--ease-out), filter .6s var(--ease-out);
  filter: saturate(.85);
}

.server_block:hover .map {
  scale: none;
  transform: scale(1.05);
  filter: saturate(1.05);
}

/* Заглушка «NO MAP» почти чёрная — растворяем её в карточке */
.map[src$="/-.webp"],
.server_block:hover .map[src$="/-.webp"] {
  opacity: .3;
  filter: grayscale(1);
}

.server_block:hover .server_map_image::after {
  background-color: transparent;
}

.server_name_custom {
  font-size: 16px;
  font-weight: var(--font-weight-7);
  letter-spacing: -.005em;
  color: var(--text-default);
}

.server_map_name,
.server_city,
.server_players_block > div {
  color: var(--text-custom);
}

.btn-clipboard svg {
  fill: var(--text-secondary);
}

.server_badge {
  background-color: var(--span);
  color: #fafafa;
  border-radius: var(--radius-xs);
  font-weight: var(--font-weight-6);
}

/* Кнопка Play: акцентная заливка, отскок при наведении */
.server_button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  outline: 0;
  background-color: var(--span);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.server_button:hover {
  outline: 0;
  background-color: var(--span-bright);
}

.server_button svg,
.server_button:hover svg {
  fill: #fafafa;
  transform: none;
}

.progress {
  height: 3px;
  background: var(--transparent-5-w);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.progress-value {
  height: 3px;
  background: linear-gradient(90deg, var(--span), var(--span-ink));
  transition: width 1.6s var(--ease-spring-soft);
}

/* Модалка игроков сервера */
.mon_header,
.mon_admins_header {
  background-color: var(--transparent-3-w);
}

.mon_list_body li,
.mon_admin_list_body li,
li.hover_mon:nth-of-type(2n) {
  border: 0;
}

.mon_list_body li:hover {
  background-color: var(--transparent-3-w);
}

.modal-card__footer {
  border-top-color: var(--hairline);
}

.players_modal {
  background-color: var(--transparent-5-w);
}

/* 13. Главная: топ донатеров, слайдер, баннеры
   ========================================================================== */

.lk-top__title {
  background-color: transparent;
  padding-inline: .25rem;
  font-size: 12px;
  font-weight: var(--font-weight-6);
  color: var(--text-secondary);
}

.lk-top__user-data {
  border: 0;
  border-radius: var(--radius-m);
  background-color: var(--transparent-3-w);
}

.lk-top__user-data:hover {
  background-color: var(--transparent-5-w);
}

.lk-top__user-avatar-image {
  border: 0;
  border-radius: var(--radius-s);
}

.lk-top__place-number {
  transition: opacity var(--dur) var(--ease-out), color var(--dur);
}

.lk-top__user-data:hover .lk-top__place-number {
  scale: none;
}

.loader {
  background-color: var(--transparent-3-w);
  border-radius: var(--radius-m);
}

.image-slider {
  border-radius: var(--radius-l);
  overflow: hidden;
}

.image-slider__image h3 {
  font-weight: var(--font-weight-7);
  letter-spacing: -.02em;
  text-shadow: none;
}

.image-slider__image p {
  text-shadow: none;
  color: var(--text-custom);
}

.image-slider__image .swiper_btn,
.image-slider__image .swiper_btn:hover {
  border: 0;
  border-radius: var(--radius-m);
  background-color: var(--span);
}

.swiper_action_svg {
  background-color: rgba(255, 255, 255, .12);
}

.swiper-buttons {
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--bg) 60%, transparent);
}

.info-block__card {
  border: 0;
  border-radius: var(--radius-l);
}

.info-block__card.small {
  border: 1px dashed rgba(255, 255, 255, .12);
}

/* 14. Подвал (в стиле bluesen) и мобильный таббар
   --------------------------------------------------------------------------
   Плоский, без карточки: сверху ссылки по центру, тонкая линия, ниже —
   бренд + описание слева, соцсети и язык справа. Разметка — footer.php.
   ========================================================================== */

.footer_global {
  max-width: 1366px;
  margin: 1.5rem auto 0;
  padding: 0;
  gap: 0;
  border-radius: 0;
  border-top: 1px solid var(--hairline);
  background-color: transparent;
}

.footer-nav {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline);
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 2.25rem;
}

.footer-nav a {
  font-size: 15px;
  font-weight: var(--font-weight-5);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-nav a:hover {
  color: var(--text-default);
}

.footer-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.25rem 0 1.5rem;
}

.footer-about {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  max-width: 52rem;
}

.footer-brand {
  font-size: 16px;
  font-weight: var(--font-weight-7);
  letter-spacing: .01em;
  color: var(--text-custom);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-brand:hover {
  color: var(--text-default);
}

.footer-about .footer-description {
  margin: 0;
  padding: 0;
  max-width: none;
  text-align: left;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  opacity: 1;
}

.footer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--input-height);
  height: var(--input-height);
  border-radius: var(--radius-s);
  background-color: var(--button);
  color: var(--text-secondary);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.footer-social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.footer-social:hover {
  background-color: var(--button-hover);
  color: var(--text-default);
}

.footer-watermark {
  justify-content: flex-start;
  padding-bottom: 1rem;
  opacity: .7;
}

/* Кнопка темы для админа: без радужного градиента */
.footer__theme-button {
  background: var(--button);
  animation: none;
  text-shadow: none;
  color: var(--text-custom);
  margin: 0 0 1.25rem;
}

.footer__theme-button:hover {
  background: var(--button-hover);
  color: var(--text-default);
}

@media (max-width: 768.9px) {
  .footer_global {
    padding: 0; /* отступ под таббар — в правилах таббара */
  }

  .footer-nav ul {
    gap: .5rem 1.25rem;
  }

  .footer-main {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
  }

  .footer-about {
    align-items: center;
  }

  .footer-about .footer-description {
    text-align: center;
  }

  .footer-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Мобильный таббар — плавающий островок: отступы от краёв, скругление,
   размытие подложки; активный раздел — мягкая акцентная «таблетка». */
@media (max-width: 768px) {
  .tabbar_mobile {
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 100;
    height: 60px;
    padding: 6px;
    gap: 4px;
    border-top: 0;
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }

  .tabbar_mobile a {
    position: relative;
    height: 100%;
    gap: 3px;
    border-radius: 13px;
    font-size: 11px;
    font-weight: var(--font-weight-6);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary);
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }

  .tabbar_mobile a svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

  .tabbar_mobile a:active {
    background-color: var(--transparent-5-w);
  }

  .tabbar_mobile a.tabbar_active,
  .tabbar_mobile a.tabbar_active:active {
    background-color: color-mix(in srgb, var(--span) 16%, transparent);
    color: var(--span-ink) !important;
  }

  .tabbar_mobile a.tabbar_active svg {
    fill: var(--span-ink) !important;
  }

  /* Контент внизу страницы не уходит под островок */
  .footer_global {
    padding-bottom: calc(60px + 10px + 1.5rem + env(safe-area-inset-bottom));
  }
}

/* 15. Разное
   ========================================================================== */

.rank {
  border-radius: 2px;
}

.toggle__game-wrapper {
  border: 0;
  background-color: var(--input-form);
}

.toggle__game-custom-radio:first-child:has(input:checked) {
  background-color: var(--span);
}

.list-group,
.list-group-item {
  border-color: rgba(255, 255, 255, .08);
}

.error_content {
  border: 0;
  background-color: var(--card);
}

.filepond--root {
  border-color: rgba(255, 255, 255, .12);
}

/* 16. Появление страницы
   --------------------------------------------------------------------------
   Секции главной и карточки внутри них появляются каскадом
   (аналог staggerChildren). fill-mode — только backwards: после конца
   анимация снимается полностью, иначе предок остаётся «backdrop root»
   и ломает blur у поповеров, а transform/filter — containing block у fixed-модалок.
   ========================================================================== */

@keyframes ed-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ed-pop {
  from {
    opacity: 0;
    transform: scale(.85);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.container-fluid > .row:not(.navbar),
.footer_global {
  animation: ed-fade-up .5s var(--ease-out) backwards;
}

.container-fluid > .row:nth-child(1 of .row:not(.navbar)) { animation-delay: .05s; }
.container-fluid > .row:nth-child(2 of .row:not(.navbar)) { animation-delay: .12s; }
.container-fluid > .row:nth-child(3 of .row:not(.navbar)) { animation-delay: .19s; }
.container-fluid > .row:nth-child(4 of .row:not(.navbar)) { animation-delay: .26s; }
.container-fluid > .row:nth-child(5 of .row:not(.navbar)) { animation-delay: .33s; }
.container-fluid > .row:nth-child(n + 6 of .row:not(.navbar)) { animation-delay: .4s; }
.footer_global { animation-delay: .3s; }

/* Карточки статистики */
.row > .col-md-2:has(> .statistics_container) {
  animation: ed-fade-up .5s var(--ease-out) backwards;
}

.row > .col-md-2:nth-child(2):has(> .statistics_container) { animation-delay: .04s; }
.row > .col-md-2:nth-child(3):has(> .statistics_container) { animation-delay: .08s; }
.row > .col-md-2:nth-child(4):has(> .statistics_container) { animation-delay: .12s; }
.row > .col-md-2:nth-child(5):has(> .statistics_container) { animation-delay: .16s; }
.row > .col-md-2:nth-child(6):has(> .statistics_container) { animation-delay: .2s; }

/* Карточки серверов — заодно переигрывается при переключении фильтра */
.servers_wrap > .server_block {
  animation: ed-fade-up .5s var(--ease-out) backwards;
}

.servers_wrap > .server_block:nth-child(2) { animation-delay: .035s; }
.servers_wrap > .server_block:nth-child(3) { animation-delay: .07s; }
.servers_wrap > .server_block:nth-child(4) { animation-delay: .105s; }
.servers_wrap > .server_block:nth-child(5) { animation-delay: .14s; }
.servers_wrap > .server_block:nth-child(6) { animation-delay: .175s; }
.servers_wrap > .server_block:nth-child(7) { animation-delay: .21s; }
.servers_wrap > .server_block:nth-child(8) { animation-delay: .245s; }
.servers_wrap > .server_block:nth-child(n + 9) { animation-delay: .28s; }

/* Шапка появляется сверху */
.container-fluid > .navbar > * {
  animation: ed-fade-down .5s var(--ease-out) backwards;
}

.container-fluid > .navbar > .navbar_usermenu {
  animation-delay: .06s;
}

@keyframes ed-fade-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* 17. Доступность: без движения, если пользователь так попросил
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .sidebar::before,
  .statistic__premium::before,
  .online__square-wrapper::after {
    animation: none !important;
  }
}

/* 18. Волна от точки клика (как в HeroUI)
   --------------------------------------------------------------------------
   Разметку создаёт cs2uz.js: <ed-ripple-host> растягивается по кнопке
   и обрезает волну по её скруглению, саму кнопку overflow не трогаем
   (у некоторых кнопок наружу торчат бейджи). Свой тег — чтобы вендорные
   селекторы вида `button span` его не задевали.
   ========================================================================== */

ed-ripple-host {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1; /* под текстом; кнопка изолирована скриптом */
}

ed-ripple {
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: currentColor;
  opacity: .16;
  transform: translate(-50%, -50%) scale(0);
  animation: ed-ripple .6s var(--ease-out) forwards;
  transition: opacity .45s var(--ease-out);
  pointer-events: none;
}

/* Затухание отдельным transition — расширение при этом не перезапускается */
ed-ripple.is-out {
  opacity: 0;
}

@keyframes ed-ripple {
  to { transform: translate(-50%, -50%) scale(1); }
}

/* 19. Подгонка вендорных элементов под --input-height 36px
   ========================================================================== */

.modal-searchcontent svg {
  top: 50%;
  right: .65rem;
  transform: translateY(-50%);
}

.number-minus,
.number-plus {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
}

.number-minus {
  right: 4px;
}

.number-plus {
  right: 34px;
}

.button_pagination {
  height: var(--input-height);
  width: var(--input-height);
}

.file-upload-container {
  height: calc(var(--input-height) + 8px);
}

.file-upload-container label {
  height: var(--input-height);
}

/* 20. Высота шапки 60px и всё, что к ней привязано
   ========================================================================== */

.navbar {
  height: var(--nav-h);
}

.navbar_usermenu {
  height: var(--nav-h);
}

.site_logo_neo img {
  height: 2.25rem;
}

/* Поповеры шапки: 6px под кнопками (кнопки 36px по центру 60px шапки) */
.user__menu,
.notification-wrapper,
.language__modal {
  top: calc(var(--nav-h) - 6px);
}

.modal_users_container {
  top: calc(100% + 6px);
}

@media (max-width: 1079px) {
  /* Бургер — слева от логотипа (в разметке он после него), 16×10: линии 2px с шагом 4px.
     Шаг кратен 4 — при масштабе экрана 125/150/175% все три линии попадают на целые
     физические пиксели одинаково (с шагом 5 средняя и нижняя выглядели тоньше верхней).
     top: -3px — по центру заглавных букв логотипа, а не его строки (шрифт сидит выше центра) */
  .header_burger {
    order: -1;
    top: -3px;
    width: 16px;
    height: 10px;
    margin-block: 0;
    margin-left: 0;
  }

  .header_burger::before { top: 0; }
  .header_burger span { top: 4px; }
  .header_burger::after { top: 8px; bottom: auto; }
  .header_burger.mmactive::before { top: 4px; }
  .header_burger.mmactive::after { top: 4px; bottom: auto; }

  .header_list {
    margin-top: calc(var(--nav-h) + .5rem);
  }
}

/* 21. Поиск игрока — командная палитра (Ctrl/⌘+K)
   --------------------------------------------------------------------------
   Разметка — interface/container.php, логика — assets/js/cs2uz.js.
   ========================================================================== */

/* На телефоне шаблон прятал поиск целиком — палитра доступна везде */
.search-trigger {
  display: flex;
}

.cmdk {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
}

.cmdk[hidden] {
  display: none;
}

.cmdk__backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg-modal);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .18s var(--ease-out);
}

.cmdk__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: min(560px, 80vh);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--surface-raised);
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transition: opacity .18s var(--ease-out), transform .26s var(--ease-out);
}

.cmdk.is-open .cmdk__backdrop,
.cmdk.is-open .cmdk__panel {
  opacity: 1;
  transform: none;
}

/* Поле */
.cmdk__field {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  padding: 0 1.1rem;
  height: 60px;
  flex: none;
  border-bottom: 1px solid var(--hairline);
  cursor: text;
  white-space: normal;
}

.cmdk__field > svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: var(--text-secondary);
}

/* #cmdk — чтобы перебить общий стиль полей (подложка и линия фокуса) */
#cmdk .cmdk__input,
#cmdk .cmdk__input:hover,
#cmdk .cmdk__input:focus {
  background-image: none;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 16px;
  color: var(--text-default);
}

/* Шаблон прячет placeholder в фокусе, а здесь поле в фокусе сразу — возвращаем */
#cmdk .cmdk__input::placeholder,
#cmdk .cmdk__input:focus::placeholder {
  opacity: 1;
  color: var(--text-secondary);
}

#cmdk .cmdk__input:focus::-webkit-input-placeholder {
  opacity: 1;
}

.cmdk kbd,
.cmdk__esc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  background-color: var(--transparent-5-w);
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--font-weight-6);
  color: var(--text-secondary);
}

.cmdk__esc {
  flex: none;
  cursor: pointer;
}

/* Список */
.cmdk__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
}

.cmdk__group {
  padding: .6rem .75rem .35rem;
  font-size: 11px;
  font-weight: var(--font-weight-6);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.cmdk__item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  border-radius: var(--radius-m);
  color: var(--text-custom);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.cmdk__item.is-active {
  background-color: color-mix(in srgb, var(--span) 18%, transparent);
  color: var(--text-default);
}

.cmdk__avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-s);
  background-color: var(--transparent-5-w);
  object-fit: cover;
}

.cmdk__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cmdk__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: var(--font-weight-6);
  color: inherit;
}

.cmdk__id {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.cmdk__item.is-active .cmdk__name {
  color: var(--span-ink);
}

.cmdk__message {
  padding: 2rem 1rem;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
}

.cmdk__message.is-loading::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: .5rem;
  vertical-align: -1px;
  border: 2px solid var(--transparent-10-w);
  border-top-color: var(--span-ink);
  border-radius: 50%;
  animation: rotate .7s linear infinite;
}

/* Подсказки по клавишам */
.cmdk__footer {
  display: flex;
  gap: 1rem;
  flex: none;
  padding: .6rem 1.1rem;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--text-secondary);
}

.cmdk__footer span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
}

/* На тач-устройствах клавиатурные подсказки не нужны */
@media (hover: none) and (pointer: coarse) {
  .cmdk__footer,
  .cmdk__esc {
    display: none;
  }
}

@media (max-width: 600px) {
  .cmdk {
    padding-top: 10px;
  }
}

/* 22. Панель редактора темы (module_block_main_theme)
   ========================================================================== */

/* Вкладки разной высоты: при переходе между длинной и короткой полоса
   прокрутки появлялась/исчезала и ширина контента прыгала. Место под
   полосу резервируем всегда. */
.theme__sidebar-tabs-area {
  scrollbar-gutter: stable;
}

/* 23. Переключатель языка в футере
   --------------------------------------------------------------------------
   Глобус + код текущего языка на кнопке, список остальных открывается
   вверх. Открытие/закрытие — штатный app.js (#openLanguage / .language__modal).
   ========================================================================== */

.footer-lang {
  position: relative;
}

.footer-lang__toggle {
  gap: .45rem;
  padding-inline: .7rem .8rem;
  font-size: 13px;
  font-weight: var(--font-weight-7);
  letter-spacing: .04em;
  color: var(--text-secondary);
}

.footer-lang__toggle .footer-lang__globe {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.footer-lang__code {
  color: inherit;
}

.footer-lang__toggle:hover,
.footer-lang:has(.language__modal.modalActive) .footer-lang__toggle {
  background-color: var(--button-hover);
  color: var(--text-default);
}

/* Меню открывается вверх, поэтому и сдвиг появления — снизу */
.footer-lang .language__modal {
  top: auto;
  bottom: calc(100% + 6px);
  right: 0;
  width: max-content;
  min-width: 100%;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateY(6px);
}

.footer-lang .language__modal.modalActive {
  transform: none;
}

.footer-lang__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: var(--input-height);
  padding: 0 .75rem;
  border-radius: var(--radius-s);
  font-size: 14px;
  font-weight: var(--font-weight-5);
  color: var(--text-custom);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.footer-lang__item img {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

.footer-lang__item:hover {
  background-color: var(--transparent-5-w);
  color: var(--text-default);
}

/* 24. Баннер «Создать лобби» — сетка точек (как в меню CS2)
   --------------------------------------------------------------------------
   Canvas создаёт cs2uz.js. Полосатый узор модуля убираем, левую часть
   под текстом оставляем чистой: точки проявляются к правому краю.
   ========================================================================== */

.matches__home-banner-bg.has-dots {
  background-image: none;
  opacity: 1;
}

.ed-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 78%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 78%);
}

/* 25. Кнопки в карточках серверов (копировать IP / подключиться)
   --------------------------------------------------------------------------
   Модуль задумал их иконками без фона — общие стили кнопок давали подложку
   при наведении и затемнение при нажатии. Полностью прозрачные во всех
   состояниях; волна от клика для них отключена в cs2uz.js. */
.servers__card-buttons :is(button, a),
.servers__card-buttons :is(button, a):hover,
.servers__card-buttons :is(button, a):focus,
.servers__card-buttons :is(button, a):active {
  background-color: transparent;
  filter: none;
  transform: none;
}

/* 26. Карточки режимов в мониторинге — в стиле cybershoke
   --------------------------------------------------------------------------
   Превью на всю карточку; при наведении поверх плавно проявляется видео
   режима (cs2uz.js → modeCardVideos, видео из настроек режимов),
   при уходе курсора — возврат к превью.
   ========================================================================== */

.mods__card {
  height: 300px;
  border-radius: var(--radius-m);
  justify-content: flex-end;
  isolation: isolate;
}

/* Превью — в полную силу (модуль гасил его до 10%/90%) и без зума */
.mods__first-image,
.mods__card:hover .mods__first-image {
  opacity: 1 !important;
  transform: none;
  transition: opacity .3s var(--ease-out);
}

.mods__second-image {
  display: none;
}

/* Видео режима: создаётся скриптом, проявляется только когда реально заиграло */
.mods__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-out);
}

.mods__card.is-video .mods__video {
  opacity: 1;
}

/* Превью под видео не гасим: при одновременном затухании картинки и
   проявлении видео сквозь обе просвечивал тёмный фон (до 28%) — мигание.
   Картинка всегда снизу на полную яркость, плавно меняется только видео. */

/* Подложка снизу — под читаемость названия, всегда на месте */
/* Затемнение на всю карточку ровным цветом; при наведении плавно слабеет */
.mods__shadow {
  inset: 0;
  height: 100%;
  opacity: 1;
  transform: none;
  background-image: none;
  background-color: color-mix(in srgb, var(--bg) 55%, transparent);
  /* Равномерная кривая: с ease-out 2/3 изменения проходили за 80 мс — выглядело рывком */
  transition: opacity .5s var(--ease-in-out);
}

.mods__card:hover .mods__shadow {
  opacity: .5; /* не до нуля — текст остаётся читаемым на светлых кадрах */
  transform: none;
}

/* Название и онлайн — по центру внизу; при наведении приподнимаются,
   освобождая место кнопке «Быстрая игра» */
.mods__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.1rem;
  z-index: 3;
  padding: 0 .75rem;
  justify-items: center;
  gap: .25rem;
  text-align: center;
  transition: transform .35s var(--ease-out);
}

.mods__title {
  padding: 0;
  max-width: 100%;
  font-family: var(--font-family-2);
  font-size: 18px;
  font-weight: var(--font-weight-7);
  letter-spacing: .01em;
  line-height: 1.05;
  color: #fafafa;
}

.mods__online {
  gap: .4rem;
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--text-custom);
  font-size: 13px;
}

.mods__online span {
  color: inherit; /* цифра — тем же приглушённым цветом, что и «в игре» */
  font-size: 13px;
  font-weight: var(--font-weight-6);
  font-variant-numeric: tabular-nums;
}

.mods__online .ring-online {
  display: none; /* только текст «N в игре», без индикатора */
}

/* Счётчик серверов — справа сверху, без подложки, полупрозрачный */
.mods__servers-counter {
  top: .7rem;
  right: .75rem;
  left: auto;
  z-index: 3;
  gap: .3rem;
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fafafa;
  opacity: .3; /* еле видный — иконка и цифра вместе */
  font-size: 12px;
  font-weight: var(--font-weight-6);
  font-variant-numeric: tabular-nums;
}

.mods__servers-counter svg {
  width: .75rem;
  height: .75rem;
  margin-right: 0;
  fill: currentColor;
}

.mods__servers-count {
  color: inherit;
}

/* Бейджи карточки сверху слева (NEW включается в настройках мониторинга, «Режимы») */
.mods__badges {
  position: absolute;
  top: .7rem;
  left: .7rem;
  z-index: 3;
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.mods__badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--br-5);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: var(--font-weight-7);
  line-height: 1;
  color: #fafafa;
}

.mods__badge--new {
  color: var(--orange);
  background-color: color-mix(in srgb, var(--orange) 15%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Обводка в цвет бейджа: ярче всего в верхнем левом углу,
   вдоль верхнего и левого краёв плавно уходит в прозрачность */
.mods__card:has(.mods__badge--new)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 2px solid var(--orange);
  border-radius: inherit;
  pointer-events: none;
  /* сплошная обводка по всему периметру (раньше — только угол, затухающий маской) */
}

/* Описание на карточке не показываем; кнопка выезжает без пружинного отскока */
.mod__desc-text {
  display: none;
}

.mod__bottom-info {
  bottom: .6rem;
  padding-inline: .6rem;
}

.mods__button-search {
  width: 100%;
  left: 0;
  transform: translateY(.75rem);
  transition: transform .35s var(--ease-out), opacity .25s var(--ease-out);
}

.mods__card:hover .mods__button-search {
  transform: none;
}

.mods__card:has(.mods__button-search):hover .mods__info {
  transform: translateY(calc(-1 * (var(--input-height) + .5rem)));
}

/* Телефон: две карточки в ряд и пониже — 12 режимов не растягиваются на 4 экрана */
@media (max-width: 768px) {
  .mods__row-6 .mods__card,
  .mods__row-5 .mods__card,
  .mods__row-4 .mods__card,
  .mods__row-3 .mods__card,
  .mods__row-2 .mods__card,
  .mods__row-1 .mods__card {
    flex: 0 0 calc((100% - 10px) / 2);
    min-width: 0;
    height: 220px;
  }

  .mods__title {
    font-size: 16px;
  }

  .mods__info {
    bottom: .8rem;
  }
}

/* Появление карточек режимов без «довода» в конце.
   Было три слоя анимации сразу: мой подъём всего ряда, «свайп» обёртки
   модуля (вниз, со scale) и каскад карточек модуля (вверх, со scale).
   Через 1.3 с модуль снимал класс вместе с will-change — браузер убирал
   слои карточек и перерисовывал их: микрофриз и сдвиг на пиксель.
   Оставляем только каскад карточек, без scale, а слой у карточек — постоянный. */
#rowModsServers,
#rowModFilter,
#rowServers {
  animation: none; /* эти ряды анимирует сам модуль */
}

.mods__wrapper.mods-anim-in {
  animation: none;
}

.mods-anim-in .mods__card {
  animation-name: ed-mod-card-in;
  animation-duration: .5s;
  animation-timing-function: var(--ease-out);
}

@keyframes ed-mod-card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mods__card {
  will-change: transform; /* постоянный слой — в конце анимации нечего перерисовывать */
}

/* 27. Счётчик онлайна: источник данных (его пишут модули) скрыт;
   у шаблона .online__count{display:flex} перебивает [hidden] */
#counter #servers_total[hidden] {
  display: none;
}

/* Счётчик онлайна: отступ точка↔число побольше и «прокрутка» цифр
   (разметку колонок строит cs2uz.js → onlineNow) */
.online__counter {
  gap: .45rem;
}

.odo {
  /* Окно — целое число пикселей: при 1.3em (15.6px) сдвиги цифр были дробными,
     браузер округлял их по-разному и цифры стояли на пиксель выше/ниже */
  --odo-h: 16px;
  display: inline-flex;
  align-items: flex-start;
  height: var(--odo-h);
  line-height: var(--odo-h);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.odo__col {
  display: inline-block;
  height: var(--odo-h);
  overflow: hidden;
  /* уезжающая и приезжающая цифры растворяются у краёв окна */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
}

.odo__strip {
  display: flex;
  flex-direction: column;
  transition: transform 1.3s var(--ease-out);
  will-change: transform;
}

.odo__strip > span {
  display: block;
  height: var(--odo-h);
  line-height: var(--odo-h);
  text-align: center;
}

.odo__sep {
  display: inline-block;
  white-space: pre;
}

.odo--still .odo__strip {
  transition: none;
}

/* 28. Лидерборд (module_page_leaderboard) — в духе cybershoke
   --------------------------------------------------------------------------
   Разметка — forward/interface.php модуля, строки — его assets/js/1.js.
   Слева серверы (подписи к radio name="server"), сверху баннер сервера,
   сортировка — сегменты и кликабельные заголовки (подписи к radio name="filter"),
   строки — отдельные плашки. Топ-3 — ровный оттенок, без градиентов.
   ========================================================================== */

/* Визуально скрытые radio — остаются доступными с клавиатуры */
.lb-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0 !important;
  opacity: 0;
}

/* — Левая колонка — */
.lb-side {
  position: sticky;
  top: calc(var(--nav-h) + 10px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lb-side > * {
  flex: none;
}

.lb-search__count {
  position: absolute;
  top: 50%;
  right: 38px;
  font-size: 12px;
  font-weight: var(--font-weight-6);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transform: translateY(-50%);
}

.lb-search:has(.lb-search__count) input {
  padding-right: 4.75rem;
}

.lb-search {
  position: relative;
  margin: 0;
  display: block;
}

.lb-search input {
  height: 44px;
  padding-right: 2.6rem;
  border-radius: var(--radius-m);
  background-color: var(--card);
  font-size: 14px;
}

.lb-search svg {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  fill: var(--text-secondary);
  pointer-events: none;
}

.lb {
  /* Сглаженное затухание арта: без видимой границы, где начинается картинка */
  --lb-fade: linear-gradient(90deg,
    transparent 0%,
    rgb(0 0 0 / .03) 12%,
    rgb(0 0 0 / .1) 22%,
    rgb(0 0 0 / .22) 32%,
    rgb(0 0 0 / .38) 42%,
    rgb(0 0 0 / .56) 52%,
    rgb(0 0 0 / .74) 63%,
    rgb(0 0 0 / .88) 75%,
    #000 90%);
}

.lb-servers {
  position: relative; /* offsetTop карточек — от списка (прокрутка к выбранному) */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Прокрутка — только на десктопе, где список в колонке; на телефоне он лентой */
@media (min-width: 769px) {
  /* Колонка всегда влезает в экран: длинный список серверов прокручивается внутри */
  .lb-side {
    max-height: calc(100vh - var(--nav-h) - 20px);
  }

  .lb-side > .lb-servers {
    flex: 0 1 auto;
    min-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .lb-servers::-webkit-scrollbar {
    display: none;
  }

  /* Карточки не сжимаются под высоту — список прокручивается */
  .lb-servers > .lb-server {
    flex: none;
  }
}

/* Затухание краёв, когда есть что прокручивать */
.lb-servers.fade-start { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px); mask-image: linear-gradient(to bottom, transparent, #000 40px); }
.lb-servers.fade-end { -webkit-mask-image: linear-gradient(to top, transparent, #000 40px); mask-image: linear-gradient(to top, transparent, #000 40px); }
.lb-servers.fade-start.fade-end { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.lb-servers.is-x.fade-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
.lb-servers.is-x.fade-end { -webkit-mask-image: linear-gradient(to left, transparent, #000 32px); mask-image: linear-gradient(to left, transparent, #000 32px); }
.lb-servers.is-x.fade-start.fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }

.lb-server {
  position: relative;
  display: flex;
  align-items: center;
  height: 62px;
  margin: 0;
  padding: 0 16px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-l);
  background-color: var(--card);
  cursor: pointer;
  white-space: normal;
  transition: background-color .35s var(--ease-in-out);
}

.lb-server.is-hidden {
  display: none;
}

.lb-server__art {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 80%;
  height: 100%;
  object-fit: cover;
  opacity: .16;
  -webkit-mask-image: var(--lb-fade);
  mask-image: var(--lb-fade);
  transition: opacity .35s var(--ease-in-out);
}

.lb-server__name {
  font-size: 15px;
  font-weight: var(--font-weight-7);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--text-custom);
  transition: color .35s var(--ease-in-out);
}

.lb-server:hover {
  background-color: color-mix(in srgb, var(--card) 85%, #3a4466);
}

.lb-server:hover .lb-server__art {
  opacity: .26;
}

.lb-server:hover .lb-server__name {
  color: var(--text-default);
}

.lb-server:has(input:checked) {
  background-color: color-mix(in srgb, var(--span) 22%, var(--card));
}

.lb-server:has(input:checked) .lb-server__name {
  color: #fafafa;
}

.lb-server:has(input:checked) .lb-server__art {
  opacity: .32;
}

.lb-server:has(input:focus-visible) {
  outline: 2px solid var(--span-ink);
  outline-offset: 2px;
}

/* Блок «моя статистика» — плоская карточка вместо рамки */
#userStatsContainer {
  margin: 0;
  border: 0;
  border-radius: var(--radius-l);
  background-color: var(--card);
}

#userStatsContainer:empty {
  display: none;
}

.leaderboard__my-stat-block {
  border: 0;
  background-color: var(--transparent-4-w);
}

.leaderboard__my-stat-hello-text,
.leaderboard__my-stat-description {
  color: var(--span-ink);
  filter: none;
}

.leaderboard__my-stat-auth-text {
  border: 0;
  background-color: var(--transparent-3-w);
}

/* — Баннер сервера — */
.lb-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 190px;
  margin-bottom: 8px;
  padding: 1.75rem 2.25rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-xl);
  background-color: var(--card);
}

.lb-hero__art {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 80%;
  height: 100%;
  object-fit: cover;
  opacity: .35;
  -webkit-mask-image: var(--lb-fade);
  mask-image: var(--lb-fade);
  transition: opacity .6s var(--ease-in-out);
}

/* Кроссфейд при смене сервера: новая проявляется поверх, старая гаснет под ней */
.lb-hero__art.is-entering,
.lb-hero__art.is-leaving {
  opacity: 0;
}

.lb-hero__art.is-leaving {
  z-index: -2;
  transition-duration: .7s;
}

/* Смена названия — как на баннере режима в мониторинге */
.lb-swap {
  display: inline-grid;
  max-width: 100%;
  overflow: hidden;
  vertical-align: top;
  /* запас под выносные элементы шрифта, чтобы маска их не резала */
  padding-block: .08em;
  margin-block: -.08em;
}

.lb-swap__layer {
  grid-area: 1 / 1;
  min-width: 0;
  /* На входящем слое тоже — иначе шрифт прыгнет в конце анимации */
  font-family: var(--font-family-1);
}

.lb-swap__layer.is-out {
  animation: ed-lb-swap-out .42s cubic-bezier(.4, 0, .2, 1) both;
}

.lb-swap__layer.is-in {
  pointer-events: none;
  animation: ed-lb-swap-in .5s var(--ease-out) both;
}

@keyframes ed-lb-swap-out {
  to { opacity: 0; transform: translateY(-100%); }
}

@keyframes ed-lb-swap-in {
  from { opacity: 0; transform: translateY(100%); }
}

.lb-hero__text {
  max-width: 60%;
}

.lb-hero__over {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 12px;
  font-weight: var(--font-weight-7);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--span-ink);
}

.lb-hero__over svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.lb-hero__title {
  margin: .4rem 0 .5rem;
  font-family: var(--font-family-2);
  font-size: 42px;
  font-weight: var(--font-weight-8);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fafafa;
}

.lb-hero__sub {
  max-width: 34rem;
  margin: 0;
  font-size: 14px;
  color: var(--text-custom);
}

/* — Баннер сезона (вместо баннера сервера). Данные — ext/Seasons.php, отсчёт — assets/js/1.js модуля — */
.lb-hero.lb-season {
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
  padding: 1.6rem 1.75rem 1.5rem;
}

.lb-season__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.lb-season__info {
  flex: 1 1 auto;
  min-width: 0;
}

.lb-season__title {
  margin: .45rem 0 .9rem;
  font-family: var(--font-family-1);
  font-size: 32px;
  font-weight: var(--font-weight-7);
  line-height: 1.1;
  color: #fafafa;
}

.lb-season__progress {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 380px;
}

.lb-season__bar {
  flex: 1 1 auto;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background-color: rgb(255 255 255 / .08);
}

.lb-season__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background-color: var(--span);
  transition: width .8s var(--ease-out);
}

.lb-season__pct {
  min-width: 3ch;
  font-size: 13px;
  font-weight: var(--font-weight-7);
  color: var(--text-default);
  font-variant-numeric: tabular-nums;
}

.lb-season__dates {
  display: block;
  margin-top: .45rem;
  font-size: 12px;
  color: var(--text-custom);
  font-variant-numeric: tabular-nums;
}

.lb-season__timer {
  display: flex;
  flex: none;
  gap: 6px;
}

.lb-season__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  width: 70px;
  padding: .75rem 0 .65rem;
  border-radius: var(--radius-l);
  background-color: rgb(255 255 255 / .05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.lb-season__num {
  font-family: var(--font-family-1);
  font-size: 24px;
  font-weight: var(--font-weight-7);
  line-height: 1;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
}

.lb-season__label {
  font-size: 11px;
  font-weight: var(--font-weight-5);
  color: var(--text-custom);
}

.lb-season__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 6px;
}

.lb-season__prizes {
  display: grid;
  flex: 1 1 520px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 6px;
  min-width: 0;
}

.lb-prize {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: .7rem .9rem;
  border-radius: var(--radius-l);
  background-color: color-mix(in srgb, var(--prize) 8%, rgb(255 255 255 / .04));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.lb-prize__medal {
  flex: none;
  width: 28px;
  height: 28px;
  background-color: var(--prize);
  -webkit-mask: url(/app/modules/module_page_leaderboard/assets/img/shield-medal.svg) center / contain no-repeat;
  mask: url(/app/modules/module_page_leaderboard/assets/img/shield-medal.svg) center / contain no-repeat;
}

.lb-prize__info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.lb-prize__name {
  overflow: hidden;
  font-size: 14px;
  font-weight: var(--font-weight-7);
  color: var(--text-default);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-prize__time {
  font-size: 12px;
  color: var(--text-custom);
}

.lb-prize__place {
  margin-left: auto;
  font-size: 12px;
  font-weight: var(--font-weight-6);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.lb-season__actions {
  display: flex;
  flex: none;
  align-items: flex-end;
  gap: 6px;
  margin-left: auto;
}

.lb-season__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: var(--input-height);
  padding: 0 .9rem;
  border-radius: var(--radius-m);
  font-size: 13px;
  font-weight: var(--font-weight-6);
  color: var(--text-default);
  background-color: rgb(255 255 255 / .06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.lb-season__link:hover {
  color: #fafafa;
  background-color: rgb(255 255 255 / .11);
}

.lb-season__link svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.lb-season__link--icon {
  justify-content: center;
  width: var(--input-height);
  padding: 0;
}

/* — Панель сортировки — */
.lb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.lb-seg {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-l);
  background-color: var(--card);
}

/* .lb-seg — чтобы перебить шаблонное input[type=radio] + label (16px, отступ 7px) */
.lb-seg .lb-seg__item {
  line-height: 1;
  display: flex;
  align-items: center;
  height: 34px;
  margin: 0;
  padding: 0 14px;
  border-radius: var(--radius-m);
  font-size: 13px;
  font-weight: var(--font-weight-6);
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.lb-seg__item:hover {
  background-color: var(--transparent-4-w);
  color: var(--text-default);
}

.lb-sr:checked + .lb-seg__item {
  background-color: var(--span);
  color: #fafafa;
}

.lb-sr:focus-visible + .lb-seg__item {
  outline: 2px solid var(--span-ink);
  outline-offset: 1px;
}

.lb-banned {
  display: flex;
  align-items: center;
  gap: .65rem;
  height: 42px;
  margin: 0;
  padding: 0 14px;
  border-radius: var(--radius-l);
  background-color: var(--card);
  font-size: 13px;
  color: var(--text-custom);
  cursor: pointer;
}

/* — Таблица: строки-плашки — */
.lb-table-wrap {
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: none;
}

.lb-table {
  border-collapse: separate;
  border-spacing: 0 6px;
  border-radius: 0;
  overflow: visible;
  background: none;
}

.lb-table thead tr {
  background: none;
}

.lb-table thead th {
  padding: .5rem 14px .15rem;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: var(--font-weight-5);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Заголовок = подпись к radio сортировки: клик сортирует */
.lb-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.lb-th-sort::after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: currentColor;
  opacity: .35;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lb-th-sort:hover {
  color: var(--text-default);
}

body:has(#value:checked) .lb-th-sort[for="value"],
body:has(#kills:checked) .lb-th-sort[for="kills"],
body:has(#deaths:checked) .lb-th-sort[for="deaths"],
body:has(#kd:checked) .lb-th-sort[for="kd"],
body:has(#headshots:checked) .lb-th-sort[for="headshots"],
body:has(#playtime:checked) .lb-th-sort[for="playtime"],
body:has(#lastconnect:checked) .lb-th-sort[for="lastconnect"] {
  color: var(--span-ink);
}

body:has(#value:checked) .lb-th-sort[for="value"]::after,
body:has(#kills:checked) .lb-th-sort[for="kills"]::after,
body:has(#deaths:checked) .lb-th-sort[for="deaths"]::after,
body:has(#kd:checked) .lb-th-sort[for="kd"]::after,
body:has(#headshots:checked) .lb-th-sort[for="headshots"]::after,
body:has(#playtime:checked) .lb-th-sort[for="playtime"]::after,
body:has(#lastconnect:checked) .lb-th-sort[for="lastconnect"]::after {
  opacity: 1;
}

.lb-table tbody tr,
.lb-table tbody tr:hover {
  background: none;
  color: inherit;
}

.lb-table tbody td {
  height: 60px;
  padding: 0 14px;
  border: 0;
  background-color: var(--card);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.lb-table tbody td:first-child {
  border-radius: var(--radius-l) 0 0 var(--radius-l);
}

.lb-table tbody td:last-child {
  border-radius: 0 var(--radius-l) var(--radius-l) 0;
}

.lb-table tbody .lb-row:hover td {
  background-color: color-mix(in srgb, var(--card) 85%, #3a4466);
}

/* Топ-3 — ровный тон строки и медаль */
/* Строки появляются мягко, лесенкой сверху вниз */
.lb-table tbody tr.lb-row:not(.lb-row--skeleton) {
  animation: ed-lb-row-in .4s var(--ease-out) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 28ms);
}

@keyframes ed-lb-row-in {
  from { opacity: 0; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .lb-swap__layer.is-out,
  .lb-swap__layer.is-in,
  .lb-table tbody tr.lb-row {
    animation: none;
  }
}

.lb-row.is-top-1 td { background-color: color-mix(in srgb, var(--top-one) 9%, var(--card)); }
.lb-row.is-top-2 td { background-color: color-mix(in srgb, var(--top-two) 7%, var(--card)); }
.lb-row.is-top-3 td { background-color: color-mix(in srgb, var(--top-three) 9%, var(--card)); }
.lb-row.is-top-1:hover td { background-color: color-mix(in srgb, var(--top-one) 14%, var(--card)); }
.lb-row.is-top-2:hover td { background-color: color-mix(in srgb, var(--top-two) 11%, var(--card)); }
.lb-row.is-top-3:hover td { background-color: color-mix(in srgb, var(--top-three) 14%, var(--card)); }

.lb-col-place {
  width: 70px; /* до Faceit столько же, сколько от Faceit до аватара */
}

.lb-table .lb-col-place {
  padding-right: 0;
}

.lb-place {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

.lb-place__num {
  min-width: 1.5rem;
  font-size: 15px;
  font-weight: var(--font-weight-7);
  font-variant-numeric: tabular-nums;
  color: var(--text-custom);
}

.lb-medal {
  width: 22px;
  height: 22px;
  flex: none;
  -webkit-mask: url(/app/modules/module_page_leaderboard/assets/img/shield-medal.svg) center / contain no-repeat;
  mask: url(/app/modules/module_page_leaderboard/assets/img/shield-medal.svg) center / contain no-repeat;
}

.is-top-1 .lb-medal { background-color: var(--top-one); }
.is-top-2 .lb-medal { background-color: var(--top-two); }
.is-top-3 .lb-medal { background-color: var(--top-three); }
.is-top-1 .lb-place__num { color: var(--top-one); }
.is-top-2 .lb-place__num { color: var(--top-two); }
.is-top-3 .lb-place__num { color: var(--top-three); }

/* Игрок */
.lb-avatar {
  position: relative;
  display: flex;
  flex: none;
}

.lb-avatar .top_players_avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  outline: 0;
}

.lb-avatar .user_online_status {
  top: auto;
  left: auto;
  right: -1px;
  bottom: -1px;
  border-color: var(--card);
}

.lb-table .leaderboard__table-user {
  gap: .7rem;
}

.lb-table .leaderboard__table-nickname {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}

.lb-table .leaderboard__nick-hidden {
  max-width: 13rem;
  font-size: 15px;
  font-weight: var(--font-weight-6);
  color: var(--text-default);
}

/* Faceit — своя ячейка перед игроком, размером с аватар */
.lb-table .lb-col-faceit {
  width: 28px;
  padding-right: 0;
  padding-left: 6px;
}

.lb-table .leaderboard__table-faceit {
  display: block;
  width: 28px;
  height: 28px;
  flex: none;
}

.lb-table thead .lb-col-faceit svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: var(--text-custom);
  opacity: .6;
}

.lb-table .lb-col-rank {
  white-space: nowrap;
}

.lb-table .leaderboard__badges {
  gap: .25rem;
  margin: 0;
  padding: 3px 5px;
  border: 0;
  background-color: var(--transparent-5-w);
}

.lb-table .leaderboard__badges svg {
  width: 13px;
  height: 13px;
}

/* Цифры */
.lb-num {
  font-size: 14px;
  font-weight: var(--font-weight-6);
  font-variant-numeric: tabular-nums;
  color: var(--text-default);
}

.lb-num.lb-dim {
  font-weight: var(--font-weight-5);
  color: var(--text-custom);
}

.lb-num.lb-last {
  font-size: 13px;
  color: var(--text-secondary);
}

.lb-col-rank .rank {
  scale: .75;
}

.lb-col-points {
  font-size: 15px;
  font-weight: var(--font-weight-7);
  font-variant-numeric: tabular-nums;
  color: var(--text-default);
}

/* Загрузка и пустой ответ */
.lb-table tbody .lb-row--skeleton td {
  height: auto;
  padding: 0;
  background: none;
}

.lb-skeleton {
  height: 60px;
  min-height: 60px;
  border-radius: var(--radius-l);
}

.lb-table tbody .lb-empty td {
  height: auto;
  border-radius: var(--radius-l);
}

/* — Телефон: серверы лентой, строки — карточки — */
@media (max-width: 768px) {
  .lb-side {
    position: static;
  }

  .lb-servers {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .lb-server {
    flex: 0 0 150px;
    height: 54px;
    scroll-snap-align: start;
  }

  .lb-hero {
    min-height: 140px;
    padding: 1.25rem;
  }

  .lb-hero__text {
    max-width: 75%;
  }

  .lb-hero__title {
    font-size: 28px;
  }

  .lb-hero__art {
    width: 100%;
  }

  .lb-hero.lb-season {
    gap: 1rem;
    padding: 1.2rem 1.1rem;
  }

  .lb-season__head {
    flex-direction: column;
    gap: 1rem;
  }

  .lb-season__title {
    font-size: 24px;
  }

  .lb-season__timer {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .lb-season__unit {
    width: auto;
  }

  .lb-season__num {
    font-size: 20px;
  }

  .lb-season__prizes {
    flex-basis: 100%;
    grid-template-columns: 1fr;
  }

  .lb-season__actions {
    width: 100%;
  }

  .lb-season__link:not(.lb-season__link--icon) {
    flex: 1 1 auto;
    justify-content: center;
  }

  .lb-seg {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lb-banned {
    width: 100%;
  }

  .lb-table,
  .lb-table tbody {
    display: block;
  }

  .lb-table thead {
    display: none;
  }

  .lb-table tbody tr.lb-row {
    display: flex !important; /* у шаблона table tbody tr { display: table-row !important } */
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-bottom: 6px;
    padding: 12px 14px;
    border-radius: var(--radius-l);
    background-color: var(--card);
  }

  .lb-row.is-top-1 { background-color: color-mix(in srgb, var(--top-one) 9%, var(--card)) !important; }
  .lb-row.is-top-2 { background-color: color-mix(in srgb, var(--top-two) 7%, var(--card)) !important; }
  .lb-row.is-top-3 { background-color: color-mix(in srgb, var(--top-three) 9%, var(--card)) !important; }

  .lb-table tbody tr.lb-row td,
  .lb-table tbody tr.lb-row:hover td {
    display: block;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .lb-row .lb-col-place { width: auto; flex: 0 0 3.75rem; }
  .lb-row .lb-col-faceit { flex: none; width: auto; }
  /* Игрок занимает остаток первой строки — цифры уходят на вторую */
  .lb-row .lb-col-player { flex: 1 1 0; min-width: 0; }
  .lb-row .lb-col-points { margin-left: auto; }
  /* Принудительный перенос: цифры всегда на второй строке, ширина места не важна */
  .lb-table tbody tr.lb-row::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 5;
  }

  .lb-table .leaderboard__nick-hidden {
    max-width: 9rem;
  }

  /* Вторая строка карточки — главные цифры с подписями */
  .lb-row td[data-label] {
    flex: 1 1 25%;
    order: 10;
    font-size: 14px;
  }

  .lb-row td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: var(--font-weight-5);
    color: var(--text-secondary);
  }

  .lb-row .lb-dim,
  .lb-row .lb-col-rank {
    display: none !important;
  }

  .lb-table tbody .lb-row--skeleton {
    display: block;
  }
}

/* 29. Профиль игрока (module_page_profiles) — шапка на всю ширину
   --------------------------------------------------------------------------
   Разметка — forward/interface.php и includes/info.php модуля.
   Обложка — фон профиля игрока (картинка или webm), плавно уходит в карточку.
   Под шапкой вкладки с подписями и выбор сервера, ниже «Обзор»:
   крупные ключевые цифры, сетка остального и сбоку «Аккаунт» / Faceit.
   ========================================================================== */

.pf {
  row-gap: 8px;
}

/* — Шапка — */
.pf-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 260px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-xl);
  background-color: var(--card);
}

/* Вендор задаёт .user_back высоту 8em и скругления — здесь обложка на всю шапку */
.pf-hero .pf-hero__cover {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 0;
  /* Затухание сверху вниз по сглаженной кривой — к тексту картинка сходит на нет */
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%,
    rgb(0 0 0 / .9) 25%,
    rgb(0 0 0 / .7) 42%,
    rgb(0 0 0 / .45) 58%,
    rgb(0 0 0 / .22) 74%,
    rgb(0 0 0 / .07) 88%,
    transparent 100%);
  mask-image: linear-gradient(180deg,
    #000 0%,
    rgb(0 0 0 / .9) 25%,
    rgb(0 0 0 / .7) 42%,
    rgb(0 0 0 / .45) 58%,
    rgb(0 0 0 / .22) 74%,
    rgb(0 0 0 / .07) 88%,
    transparent 100%);
}

.pf-hero .pf-hero__cover #background,
.pf-hero .pf-hero__cover video,
.pf-hero .pf-hero__cover img {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.pf-hero .pf-hero__cover video,
.pf-hero .pf-hero__cover img {
  opacity: .5;
}

.pf-hero__body {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  width: 100%;
  padding: 6rem 2rem 1.75rem;
}

.pf-avatar {
  position: relative;
  flex: none;
  /* Квадрат по высоте блока с ником, статусом и бейджами — --pf-av ставит cs2uz.js */
  width: var(--pf-av, 112px);
  height: var(--pf-av, 112px);
}

.pf-avatar #avatar {
  /* Вне потока: размер аватара задаёт строка, а не исходник картинки */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl);
  object-fit: cover;
  background-color: var(--grey);
}

/* Индикатор онлайна — точка в углу аватара, отделена от него цветом карточки */
.pf-avatar .user_online_status {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 22px;
  height: 22px;
  border: 5px solid var(--card);
  border-radius: 50%;
  background-color: var(--green);
}

.pf-avatar .user_online_status::before {
  content: none;
}

.pf-id {
  flex: 1 1 auto;
  min-width: 0;
}

.pf-name {
  margin: 0 0 .4rem;
  overflow: hidden;
  font-family: var(--font-family-1);
  font-size: 32px;
  font-weight: var(--font-weight-7);
  line-height: 1.15;
  color: #fafafa;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-seen {
  display: inline-flex;
  text-decoration: none;
}

.pf-seen .user_status_server {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: 13px;
  font-weight: var(--font-weight-5);
  color: var(--text-custom);
}

/* В игре: зелёная точка и ссылка «подключиться» */
.pf-seen .user_status_server.button_playing_server {
  color: var(--green);
  cursor: pointer;
}

.pf-seen .user_status_server.button_playing_server::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}

.pf-status {
  max-width: 40rem;
  margin: .5rem 0 0;
  overflow: hidden;
  font-size: 14px;
  color: var(--text-default);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-badges.user_roles {
  gap: 6px;
  margin-top: .85rem;
}

.pf-badges .user_badge {
  gap: 7px;
  height: 26px;
  padding: 0 11px 0 9px;
  font-size: 12px;
  line-height: 1;
}

.pf-badges .user_badge span {
  width: 7px;
  height: 7px;
}

.pf-badges .badge_player {
  opacity: 1;
  color: var(--text-custom);
  background-color: rgb(255 255 255 / .06);
}

.pf-hero__side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: .85rem;
  margin-left: auto;
}

.pf-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pf-hero .pf-socials {
  gap: 6px;
  padding: 0;
  background: none;
}

.pf-hero .social__button-profile,
.pf-hero .pf-icon-btn {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--input-height);
  height: var(--input-height);
  border-radius: var(--radius-m);
  background-color: rgb(255 255 255 / .06);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.pf-hero .social__button-profile:hover,
.pf-hero .pf-icon-btn:hover {
  background-color: rgb(255 255 255 / .11);
}

.pf-hero .social__button-profile svg {
  height: 18px;
}

.pf-hero .pf-icon-btn svg {
  width: 17px;
  height: 17px;
  opacity: .7;
  fill: #fafafa;
}

.pf-hero .pf-icon-btn:hover svg {
  opacity: 1;
}

.pf-balance {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: var(--input-height);
  padding: 0 .55rem 0 .85rem;
  border-radius: var(--radius-m);
  font-size: 14px;
  font-weight: var(--font-weight-6);
  color: #fafafa;
  background-color: var(--span);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.pf-balance:hover {
  color: #fafafa;
  background-color: var(--span-bright, var(--span));
}

.pf-balance svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* — Вкладки и выбор сервера — */
.pf-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 5px;
  border-radius: var(--radius-l);
  background-color: var(--card);
}

.pf-tabs {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.pf-tabs::-webkit-scrollbar {
  display: none;
}

.pf-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .5rem;
  height: var(--input-height);
  padding: 0 .9rem;
  border-radius: var(--radius-m);
  font-size: 14px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.pf-tab svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.pf-tab:hover {
  color: var(--text-default);
  background-color: rgb(255 255 255 / .04);
}

.pf-tab.is-active {
  color: var(--span-ink);
  background-color: color-mix(in srgb, var(--span) 16%, transparent);
}

.pf-server {
  flex: 0 0 240px;
  margin: 0;
}

.pf-server .adaptive-select {
  gap: .55rem;
}

.pf-server__icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: var(--text-custom);
}

/* — Обзор — */
.pf-main,
.pf-aside {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.pf-kpi {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-width: 0;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-l);
  color: inherit;
  background-color: var(--card);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

a.pf-kpi:hover {
  color: inherit;
  background-color: var(--surface-raised);
}

.pf-kpi__label {
  overflow: hidden;
  font-size: 13px;
  font-weight: var(--font-weight-5);
  color: var(--text-custom);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-kpi__value {
  font-family: var(--font-family-1);
  font-size: 26px;
  font-weight: var(--font-weight-7);
  line-height: 1;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pf-kpi__hash {
  color: var(--span-ink);
}

.pf-kpi__unit {
  margin-left: .12em;
  font-size: .58em;
  color: var(--text-custom);
}

.pf-card {
  padding: 1.25rem 1.4rem 1.4rem;
  border-radius: var(--radius-xl);
  background-color: var(--card);
}

.pf-card__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  font-size: 15px;
  font-weight: var(--font-weight-7);
  color: var(--text-default);
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.pf-grid__cell {
  padding: .8rem .95rem;
  border-radius: var(--radius-m);
  background-color: rgb(255 255 255 / .03);
}

.pf-grid__cell dt {
  margin: 0 0 .3rem;
  font-size: 12px;
  font-weight: var(--font-weight-5);
  color: var(--text-custom);
}

.pf-grid__cell dd {
  margin: 0;
  font-size: 18px;
  font-weight: var(--font-weight-7);
  color: var(--text-default);
  font-variant-numeric: tabular-nums;
}

.pf-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.pf-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
  padding: .5rem .85rem;
  border-radius: var(--radius-m);
  background-color: rgb(255 255 255 / .03);
}

.pf-list__row dt {
  flex: none;
  font-size: 13px;
  font-weight: var(--font-weight-5);
  color: var(--text-custom);
}

.pf-list__row dd {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: var(--font-weight-6);
  color: var(--text-default);
  text-align: right;
}

/* Кнопка копирования — без фона глобальных кнопок, иконка проявляется при наведении */
.pf-copy {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.pf-copy svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: currentColor;
  opacity: .4;
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* Глобальные button:hover / :active дают фон и «продавливание» — здесь не нужно */
.pf-copy:hover,
.pf-copy:active:not(:disabled) {
  color: var(--span-ink);
  background: none;
  transform: none;
  filter: none;
}

.pf-copy:hover svg {
  opacity: 1;
}

.pf-copy:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--span-ink);
  outline-offset: 2px;
}

.pf-country img {
  width: 20px;
  height: auto;
  border-radius: 3px;
}

/* Faceit не привязан — карточку не показываем (ник дописывает скрипт, если найдётся) */
.pf-faceit:has([faceit_nickname]:empty) {
  display: none;
}

.pf-faceit__logo {
  width: 16px;
  height: 16px;
  fill: #ff5500;
}

.pf-faceit__lvl {
  width: 24px;
  height: 24px;
}

@media (max-width: 1199px) {
  .pf-aside {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .pf-hero {
    min-height: 0;
  }

  .pf-hero__body {
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    padding: 4.5rem 1.1rem 1.1rem;
  }

  .pf-avatar {
    width: 84px;
    height: 84px;
  }

  .pf-avatar #avatar {
    border-radius: var(--radius-l);
  }

  .pf-id {
    flex-basis: calc(100% - 84px - 1rem);
  }

  .pf-name {
    font-size: 22px;
  }

  .pf-status {
    white-space: normal;
  }

  /* Ранг и кнопки — отдельной строкой под ником */
  .pf-hero__side {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
  }

  .pf-bar {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .pf-server {
    flex-basis: auto;
  }

  .pf-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pf-kpi:last-child {
    grid-column: 1 / -1;
  }

  .pf-kpi__value {
    font-size: 22px;
  }

  .pf-card {
    padding: 1rem 1rem 1.1rem;
  }

  .pf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* — Остальные вкладки профиля (блокировки, друзья, транзакции, админ) — */
.pf-page > .card {
  padding: 1.25rem 1.4rem 1.4rem;
  border: 0;
  border-radius: var(--radius-xl);
  background-color: var(--card);
}

.pf-page .card-header {
  min-height: 0;
  margin: 0 0 1.1rem;
  padding: 0;
  border: 0;
}

.pf-page .card-header .badge {
  width: auto;
  padding: 0;
  border: 0;
  font-size: 15px;
  font-weight: var(--font-weight-7);
  color: var(--text-default);
  background: none;
}

.pf-page .card-container {
  padding: 0;
}

/* Подзаголовки «Последние баны (0)» — без линии через всю карточку */
.pf-page .title_head {
  flex-direction: row;
  font-size: 13px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
}

.pf-page .title_head::before {
  content: none;
}

.pf-page .tables_info {
  gap: 1.5rem;
}

.pf-page .empty_blocks,
.pf-page .empty_friends {
  height: auto;
  min-height: 110px;
  padding: 1.5rem 1rem;
  border: 0;
  border-radius: var(--radius-l);
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
  text-align: center;
  background-color: rgb(255 255 255 / .03);
}

.pf-page .empty_friends {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-page .friends_list {
  gap: 6px;
}

.pf-page .friend_card {
  position: relative;
  gap: .75rem;
  padding: .6rem .75rem;
  border: 0;
  border-radius: var(--radius-l);
  background-color: rgb(255 255 255 / .03);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.pf-page .friend_card:hover {
  background-color: rgb(255 255 255 / .06);
}

.pf-page .friend_card img {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-m);
}

.pf-page .friend_card .user_online_status {
  position: absolute;
  top: calc(.6rem + 38px - 8px);
  left: calc(.75rem + 38px - 8px);
  width: 11px;
  height: 11px;
  border: 2px solid var(--card);
  border-radius: 50%;
  background-color: var(--green);
}

.pf-page .friend_card .user_online_status::before {
  content: none;
}

.pf-page .friend_nick {
  font-size: 14px;
  font-weight: var(--font-weight-6);
  color: var(--text-default);
}

.pf-page .friend_lc {
  font-size: 12px;
}

/* Строки банов, мутов и транзакций — плашки как в лидерборде */
.pf-page :is(.bans_comms_header, .transaction_header) li {
  border: 0;
  background: none;
}

.pf-page :is(.bans_comms_content, .transaction_content) li {
  border: 0;
  border-radius: var(--radius-m);
  background-color: rgb(255 255 255 / .03);
}

@media (max-width: 768px) {
  .pf-page > .card {
    padding: 1rem 1rem 1.1rem;
  }
}

/* 30. Блокировки (module_page_punishment) — сводка и фильтры сверху, список на всю ширину
   --------------------------------------------------------------------------
   Разметка страницы — forward/interface.php модуля, строки рисует его ext/Punishment.php
   (12 вариантов под разные системы банов, структура одна):
   li.modal_open > [тип] [аватар] [ник] [причина] [срок .current/.permanent/.expired/.remove_punish] [админ].
   Подписи «осталось»/«истёк» дописывает assets/js/1.js модуля.
   ========================================================================== */

.pn {
  row-gap: 0;
}

/* — Шапка со сводкой — */
.pn-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding: 1.6rem 1.75rem;
  border-radius: var(--radius-xl);
  background-color: var(--card);
}

.pn-hero__text {
  flex: 1 1 260px;
  min-width: 0;
}

.pn-hero__title {
  margin: 0 0 .45rem;
  font-family: var(--font-family-1);
  font-size: 28px;
  font-weight: var(--font-weight-7);
  line-height: 1.1;
  color: #fafafa;
}

.pn-hero__sub {
  max-width: 30rem;
  margin: 0;
  font-size: 14px;
  color: var(--text-custom);
}

.pn-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  flex: 0 1 640px;
}

.pn-stat {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 0;
  padding: .85rem 1rem;
  border-radius: var(--radius-l);
  background-color: rgb(255 255 255 / .03);
}

.pn-stat__value {
  font-family: var(--font-family-1);
  font-size: 22px;
  font-weight: var(--font-weight-7);
  line-height: 1;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pn-stat__value span {
  color: inherit;
}

.pn-stat.is-danger .pn-stat__value {
  color: var(--red);
}

.pn-stat__label {
  overflow: hidden;
  font-size: 12px;
  font-weight: var(--font-weight-5);
  color: var(--text-custom);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* — Панель фильтров — */
.pn-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px;
  border-radius: var(--radius-l);
  background-color: var(--card);
}

/* Сегменты модуля: подложка .selection скользит за выбранным (двигает скрипт модуля) */
.pn-seg.segmented-control {
  flex: none;
  min-width: 300px;
  height: var(--input-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius-m);
  background-color: rgb(255 255 255 / .03);
}

.pn-seg.segmented-control .selection {
  top: 0;
  bottom: 0;
  border-radius: var(--radius-m);
  background-color: var(--span);
  transition: transform .3s var(--ease-out), width .3s var(--ease-out);
}

.pn-seg.segmented-control .option label {
  padding: 0 1rem;
}

.pn-seg.segmented-control .option label span {
  font-size: 14px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
  transition: color var(--dur-fast) var(--ease-out);
}

.pn-seg.segmented-control .option input:checked + label span {
  color: #fafafa;
}

.pn-seg.segmented-control .option:active input:not(:checked) + label span {
  transform: none;
}

.pn-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.pn-search > svg {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  width: 16px;
  height: 16px;
  fill: var(--text-custom);
  pointer-events: none;
  transform: translateY(-50%);
}

.pn-search #search {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.pn-search #search input {
  width: 100%;
  height: var(--input-height);
  padding-left: 38px;
}

.pn-game {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-m);
  background-color: rgb(255 255 255 / .03);
}

.pn-game__item {
  margin: 0;
  cursor: pointer;
}

.pn-game__item span {
  display: inline-flex;
  align-items: center;
  height: calc(var(--input-height) - 6px);
  padding: 0 .75rem;
  border-radius: var(--radius-s);
  font-size: 13px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.pn-game__item:hover span {
  color: var(--text-default);
}

.pn-game__item input:checked + span {
  color: #fafafa;
  background-color: rgb(255 255 255 / .08);
}

.pn-game__item input:focus-visible + span {
  outline: 2px solid var(--span-ink);
  outline-offset: 1px;
}

.pn-server {
  flex: 0 0 220px;
  margin: 0;
}

.pn-server .adaptive-select {
  gap: .55rem;
}

.pn-server__icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: var(--text-custom);
}

/* — Мой статус — */
.pn-me {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 48px;
  margin-top: 8px;
  padding: .55rem .6rem .55rem 1rem;
  border-radius: var(--radius-l);
  font-size: 14px;
  color: var(--text-custom);
  background-color: var(--card);
}

.pn-me__icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.pn-me__text b {
  font-weight: var(--font-weight-7);
}

.pn-me__sep {
  margin: 0 .4rem;
  opacity: .5;
}

.pn-me.is-clean {
  color: var(--green);
  background-color: color-mix(in srgb, var(--green) 8%, var(--card));
}

.pn-me.is-punished {
  color: var(--red);
  background-color: color-mix(in srgb, var(--red) 9%, var(--card));
}

.pn-me__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 34px;
  margin-left: auto;
  padding: 0 .9rem;
  border-radius: var(--radius-m);
  font-size: 13px;
  font-weight: var(--font-weight-6);
  color: #fafafa;
  background-color: var(--span);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.pn-me__btn:hover {
  color: #fafafa;
  background-color: var(--span-bright, var(--span));
}

/* — Список — */
.pn {
  /* Колонки: тип, аватар, ник, причина, срок, админ — тип (иконка) и у банов, и у мутов */
  --pn-cols: 22px 34px minmax(0, 1.1fr) minmax(0, 2fr) 190px minmax(0, 1fr);
}

.pn-list {
  margin-top: 1rem;
}

.pn-head {
  display: grid;
  grid-template-columns: var(--pn-cols);
  align-items: center;
  gap: 14px;
  height: 28px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: var(--font-weight-5);
  color: var(--text-custom);
}

.pn-head__player {
  grid-column: span 2;
}



.pn-rows.punish_content {
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.pn-rows.punish_content li.modal_open {
  display: grid;
  grid-template-columns: var(--pn-cols);
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 10px 16px;
  border-radius: var(--radius-l);
  background-color: var(--card);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.pn-rows.punish_content li.modal_open:hover {
  background-color: var(--surface-raised);
}

.pn-rows.punish_content li.modal_open > span {
  font-size: 14px;
  color: var(--text-custom);
}

.pn-rows.punish_content li.modal_open > span svg {
  width: 18px;
  height: 18px;
  fill: var(--orange);
}

.pn-rows.punish_content li.modal_open > span img {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-s);
  object-fit: cover;
}

/* Ник — главный в строке */
.pn-rows.punish_content li.modal_open > span:nth-child(3),
.pn-rows.punish_content li.modal_open:hover > span:nth-child(3) {
  font-weight: var(--font-weight-6);
  color: var(--text-default);
}

.pn-rows.punish_content li.modal_open > span:nth-child(6) {
  font-size: 13px;
}

/* — Статусы срока: цвет = смысл, без зачёркиваний — */
.pn-rows :is(.current_punish, .permanent_punish, .expired_punish, .remove_punish) {
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
  width: max-content !important;
  max-width: 100%;
  height: 26px;
  padding-inline: .65rem !important;
  border-radius: var(--radius-s);
  font-size: 12px !important;
  font-weight: var(--font-weight-6);
  text-decoration: none;
}

/* Активен — оранжевый, с точкой */
.pn-rows .current_punish {
  color: var(--orange) !important;
  background-color: color-mix(in srgb, var(--orange) 13%, transparent);
}

.pn-rows .current_punish::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

.pn-rows .permanent_punish {
  color: var(--red) !important;
  background-color: color-mix(in srgb, var(--red) 13%, transparent);
}

.pn-rows .expired_punish {
  color: var(--text-custom) !important;
  background-color: rgb(255 255 255 / .05);
}

.pn-rows .remove_punish {
  color: var(--green) !important;
  background-color: color-mix(in srgb, var(--green) 12%, transparent);
}

.pn-term__word {
  font-weight: var(--font-weight-5);
  opacity: .75;
}

#punishment_pagination {
  margin-top: 1rem;
}

/* — Окно подробностей — */
.punish_body .punish_subinfo {
  border: 0;
  border-radius: var(--radius-m);
  background-color: rgb(255 255 255 / .03);
}

@media (max-width: 1199px) {
  .pn-stats {
    flex-basis: 100%;
  }
}

@media (max-width: 768px) {
  .pn-hero {
    padding: 1.2rem 1.1rem;
  }

  .pn-hero__title {
    font-size: 22px;
  }

  /* 5 цифр: «Активных» во всю ширину, остальные по две */
  .pn-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pn-stat:first-child {
    grid-column: 1 / -1;
  }

  .pn-toolbar {
    flex-wrap: wrap;
  }

  .pn-seg.segmented-control,
  .pn-search,
  .pn-server {
    flex: 1 1 100%;
    min-width: 0;
  }

  .pn-head {
    display: none;
  }

  .pn-me {
    flex-wrap: wrap;
  }

  .pn-me__btn {
    margin-left: 0;
  }

  /* Строка → карточка: ник и срок, ниже причина целиком, ниже админ */
  .pn-rows.punish_content li.modal_open {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas:
      "av name term"
      "reason reason reason"
      "admin admin admin";
    gap: 6px 10px;
    padding: 12px 14px;
  }

  .pn-rows.punish_content li.modal_open > span:first-child {
    display: none;
  }

  .pn-rows.punish_content li.modal_open > span:nth-child(2) {
    display: block !important;
    grid-area: av;
  }

  .pn-rows.punish_content li.modal_open > span:nth-child(3) {
    grid-area: name;
  }

  .pn-rows.punish_content li.modal_open > span:nth-child(4) {
    grid-area: reason;
    color: var(--text-default);
    white-space: normal;
  }

  .pn-rows.punish_content li.modal_open > span:nth-child(5) {
    grid-area: term;
  }

  .pn-rows.punish_content li.modal_open > span:nth-child(6) {
    display: block !important;
    grid-area: admin;
    font-size: 12px;
  }

  .pn-rows.punish_content li.modal_open > span:nth-child(6)[data-label]::before {
    content: attr(data-label) ": ";
    opacity: .7;
  }
}

/* Пустой список (баны, муты, админы) */
.pn .pn-empty {
  grid-column: 1 / -1; /* у админов контейнер — сетка карточек */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin-top: 6px;
  border-radius: var(--radius-l);
  font-size: 14px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
  background-color: var(--card);
}

/* Подсвеченное слово в названии сезона (<span> из настроек сезонов) */
.lb-season__title span {
  color: var(--span-ink);
}

/* — Архив сезонов (pages/seasons.php модуля лидерборда, стили модуля — assets/css/seasons.css) —
   приводим ключевые элементы к виду баннера сезона: прогресс в акцент, плитки отсчёта как в баннере */
.season-progress .progress-bar {
  height: 6px;
  border-radius: 99px;
  background-color: rgb(255 255 255 / .08);
}

.season-progress .progress-fill {
  border-radius: inherit;
  background: var(--span);
}

.season-progress .progress-percentage {
  font-size: 13px;
  font-weight: var(--font-weight-7);
  font-variant-numeric: tabular-nums;
}

.seasons-countdown .countdown-number {
  border: 0;
  border-radius: var(--radius-l);
  background-color: rgb(255 255 255 / .05);
}

.seasons-countdown .countdown-time {
  font-family: var(--font-family-1);
  font-weight: var(--font-weight-7);
  font-variant-numeric: tabular-nums;
  color: #fafafa;
}

.seasons-countdown .countdown-text {
  color: var(--text-custom);
}

.season-display-info-name span:not(.year):not(.last),
.card-info-season span {
  color: var(--span-ink);
}

/* 31. Сезоны: архив (/leaderboard/seasons/) и настройки (/leaderboard/seasons/settings/)
   --------------------------------------------------------------------------
   Разметка — pages/seasons.php и pages/settings.php модуля лидерборда, логика — assets/js/seasons.js
   (перенесены из старого модуля). Базовые стили модуля — assets/css/seasons.css, здесь — новый вид.
   Строки таблиц архива — те же lb-row, что в лидерборде (секция 28).
   ========================================================================== */

/* — Общие кнопки страниц сезонов — */
.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: var(--input-height);
  padding: 0 .9rem;
  border-radius: var(--radius-m);
  font-size: 13px;
  font-weight: var(--font-weight-6);
  color: var(--text-default);
  background-color: rgb(255 255 255 / .06);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.ss-btn:hover {
  color: #fafafa;
  background-color: rgb(255 255 255 / .11);
}

.ss-btn svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.ss-btn--icon {
  width: var(--input-height);
  padding: 0;
}

.ss-btn--danger {
  color: var(--red);
  background-color: color-mix(in srgb, var(--red) 12%, transparent);
}

.ss-btn--danger:hover {
  color: var(--red);
  background-color: color-mix(in srgb, var(--red) 18%, transparent);
}

/* — Шапки страниц — */
.ss-hero,
.sset-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: 8px;
  padding: 1.6rem 1.75rem;
  border-radius: var(--radius-xl);
  background-color: var(--card);
}

.ss-hero__title,
.sset-hero__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .6rem;
  margin: .5rem 0 0;
  font-family: var(--font-family-1);
  font-size: 30px;
  font-weight: var(--font-weight-7);
  line-height: 1.15;
  color: #fafafa;
}

.ss-hero__title > span:not([class]) {
  color: var(--span-ink);
}

.ss-hero__year {
  color: var(--text-custom);
}

.ss-hero__chip {
  align-self: center;
  padding: 4px 10px;
  border-radius: 99px;
  font-family: var(--font-family-2);
  font-size: 12px;
  font-weight: var(--font-weight-6);
  color: var(--span-ink);
  background-color: color-mix(in srgb, var(--span) 16%, transparent);
}

.sset-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Выбор сезона и года — в шапке архива */
.ss-hero .seasons-selectors {
  margin: 0;
  padding: 0;
  border: 0;
}

.ss-hero .seasons-selectors legend {
  margin-bottom: .45rem;
  padding: 0;
  font-size: 12px;
  font-weight: var(--font-weight-5);
  color: var(--text-custom);
  text-transform: none;
  letter-spacing: 0;
}

.ss-hero .seasons-selectors-content {
  display: flex;
  gap: 6px;
  padding: 0;
  background: none;
}

.ss-hero .season-selector,
.ss-hero .year-selector {
  width: 190px;
}

.ss-hero .year-selector {
  width: 120px;
}

/* — Архив: колонки — */
@media (min-width: 992px) {
  .ss .ss-main {
    order: 1;
  }

  .ss .ss-aside-col {
    order: 2;
  }

  .ss-aside {
    position: sticky;
    top: calc(var(--nav-h) + 10px);
  }
}

.ss-aside {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ss-card {
  padding: 1.25rem 1.3rem;
  border-radius: var(--radius-xl);
  background-color: var(--card);
}

.ss-card:not(:has(*)) {
  display: none;
}

.ss-card__over {
  display: block;
  margin-bottom: .4rem;
  font-size: 12px;
  font-weight: var(--font-weight-7);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--span-ink);
}

.ss-now__name {
  margin-bottom: 1rem;
  font-size: 16px;
  font-weight: var(--font-weight-7);
  line-height: 1.35;
  color: var(--text-default);
}

.ss-now__name span {
  color: var(--span-ink);
}

.ss-now .seasons-countdown {
  margin: 0 0 .75rem;
  padding: 0;
  background: none;
}

.ss-now #countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.ss-now .countdown-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  width: auto;
  height: auto;
  padding: .7rem 0 .6rem;
}

.ss-now .countdown-time {
  font-size: 22px;
  line-height: 1;
}

.ss-now .countdown-text {
  font-size: 11px;
}

.ss-now .season-progress {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  background: none;
}

.ss-now .season-progress .progress-bar {
  flex: 1 1 auto;
}

.ss-now__actions {
  display: flex;
  gap: 6px;
}

.ss-now__actions .ss-btn:first-child {
  flex: 1 1 auto;
}

/* Достижения и призы пользователя */
.ss-me .leaderboard__fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.ss-me .leaderboard__fieldset legend {
  margin-bottom: .75rem;
  padding: 0;
  font-size: 15px;
  font-weight: var(--font-weight-7);
  color: var(--text-default);
  text-transform: none;
  letter-spacing: 0;
}

.ss-me .prizes-section,
.ss-me .no-prizes {
  margin-top: 1rem;
}

.ss-me .prize-item {
  border: 0;
  border-radius: var(--radius-l);
  background-color: rgb(255 255 255 / .04);
}

.ss-me .claim-prize-btn {
  border-radius: var(--radius-m);
  font-weight: var(--font-weight-6);
  color: #fafafa;
  background-color: var(--span);
}

.ss-me .leaderboard__my-stat-auth {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* — Архив: итоги по серверам — */
.ss-server + .ss-server {
  margin-top: 1.25rem;
}

.ss-server__head {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 1.1rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-l);
  background-color: var(--card);
}

.ss-server__art {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 70%;
  height: 100%;
  object-fit: cover;
  opacity: .22;
  -webkit-mask-image: var(--lb-fade, linear-gradient(90deg, transparent, #000));
  mask-image: var(--lb-fade, linear-gradient(90deg, transparent, #000));
}

.ss {
  /* то же сглаженное затухание, что у арта в лидерборде */
  --lb-fade: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .1) 22%, rgb(0 0 0 / .38) 42%, rgb(0 0 0 / .74) 63%, #000 90%);
}

.ss-server__name {
  font-family: var(--font-family-1);
  font-size: 15px;
  font-weight: var(--font-weight-7);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fafafa;
}

.ss-table {
  margin-top: 2px;
}

.ss .season-leaderboard-pagination:not(:empty) {
  margin-top: .5rem;
}

/* — Настройки — */
.sset-nav {
  position: sticky;
  top: calc(var(--nav-h) + 10px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: var(--radius-l);
  background-color: var(--card);
}

.sset-nav__item {
  padding: .55rem .8rem;
  border-radius: var(--radius-m);
  font-size: 13px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.sset-nav__item:hover {
  color: var(--text-default);
  background-color: rgb(255 255 255 / .04);
}

.sset-nav__item.is-active {
  color: var(--span-ink);
  background-color: color-mix(in srgb, var(--span) 14%, transparent);
}

.sset-section {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* Разделы-fieldset → карточки, legend → заголовок внутри карточки */
.sset fieldset.sset-section {
  min-width: 0;
  margin: 0 0 8px;
  padding: 1.25rem 1.4rem 1.3rem;
  border: 0;
  border-radius: var(--radius-xl);
  background-color: var(--card);
}

.sset fieldset.sset-section > legend {
  float: left;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 15px;
  font-weight: var(--font-weight-7);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-default);
}

.sset fieldset.sset-section > legend + * {
  clear: both;
}

.sset fieldset.sset-section > legend .inputs-inline {
  margin: 0;
  padding: 0;
  background: none;
}

/* Строки настроек: ровная сетка, лёгкий фон, без линий */
.sset fieldset.sset-section > .inputs-inline,
.sset fieldset.sset-section > div > .inputs-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .75rem;
  min-height: 48px;
  margin: 0 0 4px;
  padding: .55rem .9rem;
  border-radius: var(--radius-m);
  background-color: rgb(255 255 255 / .03);
}

.sset fieldset.sset-section .inputs-inline > label {
  margin: 0;
  font-size: 14px;
  color: var(--text-default);
}

/* Подпись + поле: подпись слева, поле справа фиксированной ширины */
.sset fieldset.sset-section .inputs-inline:has(> input[type="text"], > input[type="number"], > .adaptive-select-wrapper, > .no_uppercase_url) {
  justify-content: space-between;
}

.sset fieldset.sset-section .inputs-inline > input[type="text"],
.sset fieldset.sset-section .inputs-inline > input[type="number"],
.sset fieldset.sset-section .inputs-inline > .adaptive-select-wrapper {
  flex: 0 0 240px;
  width: 240px;
  margin: 0;
}

.sset .no_uppercase_url {
  display: flex;
  flex: 0 1 560px;
  gap: 6px;
  min-width: 0;
}

.sset .no_uppercase_url input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.sset .no_uppercase_url .button {
  flex: none;
  gap: .4rem;
}

.sset .no_uppercase_url .button svg {
  width: 14px;
  height: 14px;
}

/* Списки (конфигурация сезонов, призы) */
.sset .sset-section--list,
.sset .sset-section--card {
  margin: 0 0 8px;
  padding: 1.25rem 1.4rem 1.3rem;
  border-radius: var(--radius-xl);
  background-color: var(--card);
}

.sset :is(.sset-section--list, .sset-section--card) > .card-header {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.sset :is(.sset-section--list, .sset-section--card) > .card-header .badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 15px;
  font-weight: var(--font-weight-7);
  color: var(--text-default);
  background: none;
}

.sset .create_buttons {
  position: static;
}

.sset :is(.sset-section--list, .sset-section--card) > .card-container {
  padding: 0;
}

.sset .navigation__menu-list {
  gap: 6px;
}

.sset .navigation__menu-point {
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border: 0;
  border-radius: var(--radius-l);
  background-color: rgb(255 255 255 / .03);
}

/* Номер — фиксированной ширины: #10 и #9 начинаются с одной линии */
.sset .navigation-icon {
  flex: 0 0 40px;
  padding: 0;
  font-family: var(--font-family-1);
  font-size: 14px;
  font-weight: var(--font-weight-7);
  line-height: var(--input-height);
  color: var(--text-custom);
}

.sset .navigation__menu-point-wrapper {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.sset .navigation__menu-point-description {
  font-size: 13px;
  font-weight: var(--font-weight-5);
  color: var(--text-default);
  white-space: normal;
}

.sset .season-fields {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .6rem;
}

.sset .season-field {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.sset .season-field:has(> .adaptive-select-wrapper + .adaptive-select-wrapper) {
  grid-template-columns: 150px 200px 140px;
}

.sset .season-field > label,
.sset .prize-field > label {
  margin: 0;
  font-size: 12px;
  font-weight: var(--font-weight-5);
  color: var(--text-custom);
  white-space: nowrap;
}

.sset .season-name-key {
  width: 240px;
  max-width: 100%;
}

/* Месяцы сезона — чипы вместо 12 растянутых чекбоксов */
.sset .season-months-container {
  gap: 4px;
}

.sset .season-months-container label {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 30px;
  margin: 0;
  padding: 0 .7rem;
  border-radius: var(--radius-s);
  font-size: 12px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
  background-color: rgb(255 255 255 / .04);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.sset .season-months-container label:hover {
  color: var(--text-default);
}

.sset .season-months-container label:has(input:checked) {
  color: var(--span-ink);
  background-color: color-mix(in srgb, var(--span) 18%, transparent);
}

.sset .season-months-container input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.sset .season-months-container label:has(input:focus-visible) {
  outline: 2px solid var(--span-ink);
  outline-offset: 1px;
}

/* Призы — поля колонкой: подпись над полем */
.sset .prize-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  align-items: end;
  gap: .75rem;
}

.sset .prize-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .35rem;
  min-width: 0;
}

.sset .prize-field.hidden {
  display: none;
}

.sset .prize-field.prize-rcon-label {
  grid-column: 1 / -1;
}

.sset .prize-fields input,
.sset .prize-fields textarea {
  width: 100%;
}

.sset .prize-color {
  height: var(--input-height);
  padding: 4px;
  cursor: pointer;
}

/* Удалить — иконкой */
.sset .navigation__menu-point .action-buttons {
  flex: none;
}

.sset .navigation__menu-point .button-delete {
  width: var(--input-height);
  padding: 0;
}

.sset .navigation__menu-point .button-delete .hide-text-button {
  display: none;
}

.sset .navigation__menu-point .button-delete svg {
  width: 14px;
  height: 14px;
}

/* Сохранение — липкая панель снизу */
.sset .action-buttons.position-sticky-bottom {
  bottom: 12px;
  gap: 6px;
  margin-top: 8px;
  padding: 6px;
  border-radius: var(--radius-l);
  background-color: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.sset .season-save-preview-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
}

.sset .season-save-preview-row input {
  width: 120px;
}

.sset .season-save-preview-hint {
  margin: 0 0 1rem;
  font-size: 13px;
  color: var(--text-custom);
}

@media (max-width: 991px) {
  /* Меню разделов — лентой с прокруткой вбок */
  .sset-nav {
    position: static;
    flex-direction: row;
    margin-bottom: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sset-nav__item {
    flex: none;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .ss-hero,
  .sset-hero {
    padding: 1.2rem 1.1rem;
  }

  .ss-hero__title,
  .sset-hero__title {
    font-size: 22px;
  }

  .ss-hero__select,
  .ss-hero .seasons-selectors,
  .ss-hero .seasons-selectors-content {
    width: 100%;
  }

  .ss-hero .season-selector {
    flex: 1 1 auto;
    width: auto;
  }

  .sset fieldset.sset-section,
  .sset .sset-section--list,
  .sset .sset-section--card {
    padding: 1rem;
  }

  .sset fieldset.sset-section .inputs-inline:has(> input[type="text"], > input[type="number"], > .adaptive-select-wrapper, > .no_uppercase_url) {
    flex-direction: column;
    align-items: stretch;
  }

  .sset fieldset.sset-section .inputs-inline > input[type="text"],
  .sset fieldset.sset-section .inputs-inline > input[type="number"],
  .sset fieldset.sset-section .inputs-inline > .adaptive-select-wrapper,
  .sset .no_uppercase_url {
    flex-basis: auto;
    width: 100%;
  }

  .sset .navigation-icon {
    flex-basis: 28px;
  }

  .sset .season-field,
  .sset .season-field:has(> .adaptive-select-wrapper + .adaptive-select-wrapper) {
    grid-template-columns: 1fr;
    gap: .35rem;
  }
}

/* Архив: одинаковые колонки во всех таблицах серверов (без автоширины по содержимому) */
@media (min-width: 769px) {
  .ss-table {
    table-layout: fixed;
    width: 100%;
  }

  .ss-table thead th:nth-child(1) { width: 70px; }
  .ss-table thead th:nth-child(2) { width: 40px; }
  .ss-table thead th:nth-child(4) { width: 130px; }
  .ss-table thead th:nth-child(n+5) { width: 12%; }

  .ss-table .leaderboard__nick-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.ss-hero .seasons-selectors,
.ss-hero .seasons-selectors-content {
  border: 0;
  background: none;
  box-shadow: none;
}

/* Настройки: каждая настройка — своей строкой (fieldset шаблона раскладывал обёртки в ряд) */
.sset fieldset.sset-section,
.sset fieldset.sset-section > div {
  display: block;
}

/* Цвет приза — квадратный образец */
.sset .prize-field .prize-color {
  width: 56px;
  height: var(--input-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius-m);
  background: none;
  -webkit-appearance: none;
  appearance: none;
}

.sset .prize-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.sset .prize-color::-webkit-color-swatch {
  border: 0;
  border-radius: var(--radius-m);
}

.sset .prize-color::-moz-color-swatch {
  border: 0;
  border-radius: var(--radius-m);
}

.sset .prize-field .adaptive-select-wrapper {
  width: 100%;
}

/* Сохранить — главное действие */
.sset .position-sticky-bottom button[name="leaderboard_settings_save"] {
  color: #fafafa;
  background-color: var(--span);
}

.sset .position-sticky-bottom button[name="leaderboard_settings_save"]:hover {
  background-color: var(--span-bright, var(--span));
}

/* 32. Магазин (module_page_store, тип 1) — каталог
   --------------------------------------------------------------------------
   Разметка — forward/interface.php модуля, логика — его assets/js/1.js (без изменений).
   Цвет товара из админки — переменная --product на карточке (бывает и градиентом):
   только акценты — название, галочки, плашка без картинки. Кнопка покупки — единая, акцентная.
   ========================================================================== */

/* — Шапка — */
.st-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-xl);
  background-color: var(--card);
}

.st-hero__title {
  margin: .5rem 0 0;
  font-family: var(--font-family-1);
  font-size: 26px;
  font-weight: var(--font-weight-7);
  line-height: 1.15;
  color: #fafafa;
}

.st-hero__title #name_server {
  color: var(--span-ink);
}

.st .st-basket {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 42px;
  padding: 0 .6rem 0 1rem;
  border: 0;
  border-radius: var(--radius-m);
  font-size: 14px;
  font-weight: var(--font-weight-6);
  color: #fafafa;
  background-color: var(--span);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.st .st-basket:hover {
  color: #fafafa;
  background-color: var(--span-bright, var(--span));
}

.st-basket svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.st-basket__count {
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: var(--font-weight-7);
  line-height: 26px;
  text-align: center;
  color: var(--span);
  background-color: #fafafa;
  font-variant-numeric: tabular-nums;
}

/* — Панель: серверы, категории, сортировка — */
.st .st-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: auto;
  margin: 8px 0;
  padding: 6px;
  border-radius: var(--radius-l);
  background-color: var(--card);
}

.st-servers,
.st-cats {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.st-servers::-webkit-scrollbar,
.st-cats::-webkit-scrollbar {
  display: none;
}

.st-servers.is-single {
  display: none;
}

.st-toolbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.st .st-chip {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .4rem;
  width: auto;
  height: 34px;
  margin: 0;
  padding: 0 .9rem;
  border: 0;
  border-radius: var(--radius-m);
  font-size: 13px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
  background-color: rgb(255 255 255 / .04);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.st .st-chip:hover {
  color: var(--text-default);
  background-color: rgb(255 255 255 / .07);
}

.st .st-chip.active {
  color: var(--span-ink);
  background-color: color-mix(in srgb, var(--span) 16%, transparent);
}

.st .st-chip--server.active {
  color: #fafafa;
  background-color: var(--span);
}

.st .st-chip--ghost {
  color: var(--span-ink);
  background: none;
}

.st-sort {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-m);
  background-color: rgb(255 255 255 / .03);
}

.st .st-seg {
  height: 28px;
  margin: 0;
  padding: 0 .75rem;
  border: 0;
  border-radius: var(--radius-s);
  font-size: 12px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
  background: none;
}

.st .st-seg:hover {
  color: var(--text-default);
  background: none;
}

.st .st-seg.active {
  color: #fafafa;
  background-color: rgb(255 255 255 / .08);
}

/* — Сетка: карточки одной высоты в ряду — */
.st .st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  align-items: stretch;
  gap: 10px;
}

.st .st-card {
  min-width: 0;
  margin: 0;
}

.st .st-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 0;
  border-radius: var(--radius-xl);
  background-color: var(--card);
}

/* Обложка 16:9 */
.st-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background-color: var(--grey);
}

.st-cover .shop_product_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Без картинки — плашка в цвете товара с первой буквой названия */
.st-cover--empty {
  display: grid;
  place-items: center;
  isolation: isolate;
}

.st-cover--empty::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--product);
  opacity: .3;
  /* Сверху вниз в прозрачность; маской — чтобы работало и когда цвет товара сам градиент */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .45) 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .45) 45%, transparent 100%);
}

.st-cover__mark {
  font-family: var(--font-family-1);
  font-size: 72px;
  font-weight: var(--font-weight-8);
  line-height: 1;
  text-transform: uppercase;
  background: var(--product);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .9;
}

.st .st-cover__badges {
  top: .7rem;
  right: auto;
  left: .7rem;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.st .st-badge {
  padding: 0 8px;
  height: 22px;
  border-radius: var(--radius-s);
  font-size: 11px;
  font-weight: var(--font-weight-7);
  line-height: 22px;
  color: #fafafa;
  background-color: rgb(10 12 20 / .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.st .st-badge--sale {
  background-color: var(--red);
}

/* Тело карточки */
.st-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .85rem;
  padding: 1rem 1.1rem 1.1rem;
}

.st-card__title {
  margin: 0;
  font-family: var(--font-family-1);
  font-size: 18px;
  font-weight: var(--font-weight-7);
  line-height: 1.2;
  background: var(--product);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.st .st-price {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}

.st-price .shop_product_price {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
}

.st-price__value {
  font-family: var(--font-family-1);
  font-size: 28px;
  font-weight: var(--font-weight-7);
  line-height: 1;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
}

.st-price__cur {
  font-size: 15px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
}

.st-price__old {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: line-through;
}

/* Выбор срока — выпадашка модуля, переоформленная */
.st .shop_product_select_title {
  margin: 0;
  padding: .65rem 2.4rem .65rem .9rem;
  border: 0;
  border-radius: var(--radius-m);
  font-size: 13px;
  font-weight: var(--font-weight-6);
  color: var(--text-default);
  background-color: rgb(255 255 255 / .04);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.st .shop_product_select_title:hover {
  background-color: rgb(255 255 255 / .07);
}

.st .shop_product_select {
  top: calc(100% + 6px);
  bottom: auto;
  padding: 4px;
  border: 0;
  border-radius: var(--radius-m);
  background-color: var(--surface-raised);
  box-shadow: none;
  transform: none;
}

.st .shop_product_option {
  height: 40px;
  padding: 0 .75rem;
  border: 0;
  border-radius: var(--radius-s);
  font-size: 13px;
  cursor: pointer;
}

.st .shop_product_option:not(:first-child) {
  border-top: 0;
}

.st .shop_product_option:hover {
  background-color: rgb(255 255 255 / .06);
}

/* Преимущества: первые 4, остальные по «+ N» — без скролла внутри карточки */
.st .st-props {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  max-height: none;
  overflow: visible;
}

.st-props__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .2rem;
  font-size: 12px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
}

.st .st-props__all,
.st .st-props__more {
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 12px;
  font-weight: var(--font-weight-6);
  color: var(--span-ink);
  background: none;
}

.st .st-props__more {
  align-self: flex-start;
  margin-top: .2rem;
}

.st .st-props__all:hover,
.st .st-props__more:hover {
  color: #fafafa;
  background: none;
}

.st .st-props.has-more:not(.is-open) form.shop_card_property:nth-of-type(n+5) {
  display: none;
}

.st .st-props .shop_product_property {
  align-items: flex-start;
  gap: .55rem;
  padding: .2rem 0;
  border: 0;
  background: none;
  font-size: 13px;
}

.st .st-props .shop_product_property_icon {
  position: static;
  flex: none;
  margin-top: 4px;
  padding: 0;
}

.st .st-props .shop_product_property_icon svg {
  width: 11px;
}

.st .st-props .shop_product_property_title {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-default);
}

.st .st-props .shop_product_property_disabled .shop_product_property_title {
  color: var(--text-secondary);
}

/* Кнопка покупки — внизу карточки, единая для всех товаров */
.st .st-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  height: 44px;
  margin-top: auto;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--radius-m);
  font-size: 14px;
  font-weight: var(--font-weight-6);
  color: #fafafa;
  background-color: var(--span);
  text-shadow: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.st .st-buy:hover {
  color: #fafafa;
  background-color: var(--span-bright, var(--span));
}

.st .st-buy svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* Добавить товар (админ) */
.st .st-card--add .shop_card {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 260px;
  border: 2px dashed rgb(255 255 255 / .08);
  border-radius: var(--radius-xl);
  background: none;
  cursor: pointer;
}

@media (max-width: 768px) {
  .st-hero {
    padding: 1.2rem 1.1rem;
  }

  .st-hero__title {
    font-size: 20px;
  }

  .st .st-basket {
    width: 100%;
    justify-content: center;
  }

  .st-toolbar__row {
    flex-direction: column;
    align-items: stretch;
  }

  .st-sort {
    justify-content: stretch;
  }

  .st .st-seg {
    flex: 1 1 0;
  }
}

/* Магазин: поправки поверх стилей модуля */
.st .st-servers,
.st .st-cats {
  flex-direction: row;
  flex-wrap: nowrap;
}

.st .st-price.shop_buy_price {
  flex-direction: row;
  justify-content: flex-start;
  width: auto;
  height: auto;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
}

.st .st-buy.shop_product_button {
  flex: none;
}

/* Нет преимуществ и нет «Смотреть все» — заголовок «Преимущества» не показываем */
.st .st-props:not(:has(form.shop_card_property)):not(:has(.st-props__all)):not(:has(.shop_table_create_button)) .st-props__head {
  display: none;
}

@media (max-width: 768px) {
  .st-sort {
    width: 100%;
  }

  .st .st-seg {
    min-width: 0;
    padding: 0 .4rem;
  }

  /* На телефоне обложка ниже — карточка не занимает весь экран */
  .st-cover {
    aspect-ratio: 21 / 9;
  }

  .st-cover__mark {
    font-size: 56px;
  }
}

/* Панель магазина не шире колонки: ленты серверов/категорий прокручиваются внутри */
.st > .col-12 {
  min-width: 0;
}

.st .st-toolbar,
.st .st-toolbar > *,
.st .st-toolbar__row > * {
  min-width: 0;
  max-width: 100%;
}

/* — Магазин: корзина (includes/basket.php модуля) — */
.sb-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 13px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
  text-decoration: none;
}

.sb-back:hover {
  color: var(--text-default);
}

.sb-back svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.sb-count {
  margin-left: .3rem;
  color: var(--text-custom);
}

.sb .st-hero {
  margin-bottom: 8px;
}

.sb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb .sb-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 64px;
  margin: 0;
  padding: .7rem .8rem .7rem 1rem;
  border: 0;
  border-radius: var(--radius-l);
  background-color: var(--card);
}

.sb-item__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--span) 14%, transparent);
}

.sb-item__icon svg {
  width: 18px;
  height: 18px;
  fill: var(--span-ink);
}

.sb-item__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.sb-item__title {
  overflow: hidden;
  font-size: 14px;
  font-weight: var(--font-weight-6);
  color: var(--text-default);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-item__server {
  font-size: 12px;
  color: var(--text-custom);
}

.sb-item__price {
  flex: none;
  font-family: var(--font-family-1);
  font-size: 15px;
  font-weight: var(--font-weight-7);
  color: #fafafa;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sb .sb-item__del {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--input-height);
  height: var(--input-height);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-m);
  color: var(--text-custom);
  background: none;
  cursor: pointer;
}

.sb .sb-item__del:hover {
  color: var(--red);
  background-color: color-mix(in srgb, var(--red) 12%, transparent);
}

.sb-item__del svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.sb .sb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 3rem 1.5rem;
  border-radius: var(--radius-xl);
  text-align: center;
  background-color: var(--card);
}

.sb-empty > svg {
  width: 40px;
  height: 40px;
  margin-bottom: .5rem;
  fill: var(--text-secondary);
}

.sb-empty__title {
  font-size: 16px;
  font-weight: var(--font-weight-7);
  color: var(--text-default);
}

.sb-empty__desc {
  max-width: 26rem;
  margin-bottom: .75rem;
  font-size: 13px;
  color: var(--text-custom);
}

/* Итог и оплата */
.sb .sb-summary {
  position: sticky;
  top: calc(var(--nav-h) + 10px);
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1.2rem;
  border-radius: var(--radius-xl);
  background-color: var(--card);
}

.sb-summary__label {
  font-size: 13px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
}

.sb .unique-toggle-switch {
  height: 42px;
  padding: 4px;
  border: 0;
  border-radius: var(--radius-m);
  background-color: rgb(255 255 255 / .04);
}

.sb .unique-toggle-option {
  font-size: 13px;
  font-weight: var(--font-weight-6);
}

.sb .unique-slider {
  height: calc(100% - 8px);
  border-radius: var(--radius-s);
  background-color: color-mix(in srgb, var(--span) 18%, transparent);
}

.sb .unique-slider.as-gift {
  background-color: color-mix(in srgb, var(--money) 16%, transparent);
}

.sb-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgb(255 255 255 / .06);
  font-size: 14px;
  color: var(--text-custom);
}

.sb-total__value {
  font-family: var(--font-family-1);
  font-size: 24px;
  font-weight: var(--font-weight-7);
  color: #fafafa;
  font-variant-numeric: tabular-nums;
}

.sb .sb-pay {
  height: 46px;
  padding: 0 1rem;
  border-radius: var(--radius-m);
  font-size: 14px;
  font-weight: var(--font-weight-6);
  text-transform: none;
  color: #fafafa;
  background-color: var(--span);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.sb .sb-pay:hover {
  filter: none;
  background-color: var(--span-bright, var(--span));
}

.sb .sb-pay.is-disabled {
  color: var(--text-secondary);
  background-color: rgb(255 255 255 / .05);
  cursor: not-allowed;
}

@media (max-width: 991px) {
  .sb .sb-summary {
    position: static;
    margin-top: 8px;
  }
}

/* Корзина: перебиваем стили модуля для строк (центровка, мелкий шрифт) и панели итога */
.sb .sb-item > span {
  justify-content: flex-start;
  text-align: left;
}

.sb .sb-item > .sb-item__info {
  flex: 1 1 auto;
  align-items: flex-start;
}

.sb .sb-item .sb-item__title {
  font-size: 14px;
}

.sb .sb-item .sb-item__server {
  font-size: 12px;
}

.sb .sb-item > .sb-item__price,
.sb .sb-item > .sb-item__icon {
  flex: none;
}

.sb .sb-item .sb-item__price {
  font-size: 15px;
}

.sb .sb-summary.shop_pay_area {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.sb .sb-summary > * {
  width: 100%;
}

/* Магазин: 4 карточки в ряд (меньше — на узких экранах) */
.st .st-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1279px) {
  .st .st-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 991px) {
  .st .st-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .st .st-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Админ: кнопки сервера — в чипе после названия, а не поверх него */
.st .st-chip--server .shop__action {
  position: static;
  order: 2;
  gap: 2px;
  margin-right: -.4rem;
}

.st .st-chip--server :is(.shop_delete_server, .shop_edit_server) {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-xs);
  background-color: rgb(255 255 255 / .1);
}

.st .st-chip--server :is(.shop_delete_server, .shop_edit_server) svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.st .st-chip--server .shop_delete_server:hover {
  color: #fafafa;
  background-color: var(--red);
}

.st .st-chip--server .shop_edit_server:hover {
  color: var(--bg);
  background-color: var(--orange);
}

/* Админ: правка/удаление товара — в правый верхний угол карточки, бейджи слева не перекрываются.
   Позиционируем сами формы от карточки; кнопки внутри — в потоке (у модуля они absolute от формы) */
.st .st-card__inner > form:is(#delete-product, #edit-ajax-product) {
  position: absolute;
  top: .7rem;
  z-index: 3;
  margin: 0;
}

.st .st-card__inner > form#delete-product {
  right: .7rem;
}

.st .st-card__inner > form#edit-ajax-product {
  right: calc(.7rem + 32px);
}

.st .st-card__inner > form:is(#delete-product, #edit-ajax-product) .shop_delete_product {
  position: static;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-s);
}

.st .st-card__inner > form .shop_delete_product svg {
  width: 11px;
  height: 11px;
}

/* Обложка без картинки — на фоне карточки: градиент уходит в неё без шва */
.st-cover--empty {
  background-color: var(--card);
}

/* 33. Скинченджер (module_page_skinchanger): экран «Доступ запрещён» (гость / нет VIP)
   Был текст absolute поверх картинки, высоту задавала картинка — на телефоне текст
   вылезал за блок и обрезался. Теперь картинка — фон, высоту задаёт содержимое. */
.skinchanger :is(.sc__auth-access-wrapper, .sc__vip-access-wrapper) {
  /* Родитель .skinchanger — flex-строка: без растяжения блок сжимался до ширины текста и уезжал влево */
  flex: 1 1 auto;
  width: 100%;
  min-height: min(620px, calc(100vh - var(--nav-h) - 120px));
  padding: 3rem 1.25rem;
}

.skinchanger :is(.sc__auth-access-wrapper, .sc__vip-access-wrapper) > img {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.skinchanger :is(.sc__auth-access-content, .sc__vip-access-content) {
  position: relative;
  max-width: 100%;
  text-align: center;
}

.skinchanger :is(.sc__auth-access-title, .sc__vip-access-title) {
  font-size: clamp(28px, 6vw, 48px);
  line-height: 1.1;
}

.skinchanger :is(.sc__auth-access-subtitle, .sc__vip-access-subtitle) {
  max-width: min(640px, 100%);
  border: 0;
  border-radius: var(--radius-l);
  background-color: rgb(255 255 255 / .05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 14px;
  font-weight: var(--font-weight-5);
  line-height: 1.5;
}

/* Навбар: «Магазин» всегда выглядит как активный пункт, только в цвете денег —
   в обычном, активном и hover-состоянии одинаково. Пункт находим по адресу ссылки. */
@media (min-width: 1080px) {
  .drpdwn_menu a.dropbtn:is([href="/store"], [href="/store/"], [href$="/store"], [href$="/store/"]),
  .drpdwn_menu a.dropbtn:is([href="/store"], [href="/store/"], [href$="/store"], [href$="/store/"]):hover {
    border-bottom: 0;
    color: var(--money);
    background-color: color-mix(in srgb, var(--money) 14%, var(--bg));
  }

  .drpdwn_menu a.dropbtn:is([href="/store"], [href="/store/"], [href$="/store"], [href$="/store/"]) .desc_nav_item {
    color: var(--money);
    background: none;
  }

  .drpdwn_menu a.dropbtn:is([href="/store"], [href="/store/"], [href$="/store"], [href$="/store/"]) svg {
    fill: var(--money);
  }
}

/* Скинченджер: значок стикеров/брелока на карточке скина — квадрат 1:1 в целых пикселях.
   У модуля были rem-отступы (.5rem .3rem) и иконка 1.2rem → 30.4×40.1px.
   Теперь каждая иконка — ячейка 30×30, с рамкой 1px одиночный значок ровно 32×32;
   если у скина и стикеры, и брелок — две квадратные ячейки столбиком. */
.skinchanger .sc__skins-decoration {
  gap: 0;
  padding: 0;
  border-radius: var(--radius-s);
}

.skinchanger .sc__skins-decoration .sc__skins-stickers-keychains {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  line-height: 0;
}

.skinchanger .sc__skins-decoration svg {
  width: 18px;
  height: 18px;
}

/* Корзина: иконка позиции — строго по центру квадрата
   (общее правило для span строк выравнивает влево, у модуля span — flex) */
.sb .sb-item > span.sb-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 34. Страница ошибки (app/page/general/iframe.php)
   --------------------------------------------------------------------------
   Без фона карточки: одна колонка по центру свободной области — крупный код,
   заголовок (описание ошибки), строка-трейс, кнопки.
   ========================================================================== */
.err {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: calc(100vh - var(--nav-h) - 240px);
  padding: 2rem 1rem;
  text-align: center;
}

.err__code {
  margin-bottom: .25rem;
  font-family: var(--font-family-1);
  font-size: clamp(96px, 16vw, 168px);
  font-weight: var(--font-weight-8);
  line-height: .9;
  letter-spacing: -.03em;
  background: linear-gradient(180deg, rgb(255 255 255 / .22) 0%, rgb(255 255 255 / .03) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}

.err__title {
  max-width: 36rem;
  margin: 0;
  font-family: var(--font-family-1);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: var(--font-weight-7);
  line-height: 1.2;
  color: #fafafa;
  overflow-wrap: anywhere;
}

/* Трейс — код и статус, моноширинным, приглушённо */
.err__trace {
  padding: 4px 10px;
  border-radius: var(--radius-s);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--red);
  background-color: color-mix(in srgb, var(--red) 10%, transparent);
}

.err__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 1rem;
}

.err__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 42px;
  margin: 0;
  padding: 0 1.1rem;
  border: 0;
  border-radius: var(--radius-m);
  font-size: 14px;
  font-weight: var(--font-weight-6);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.err__btn svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.err .err__btn--ghost {
  color: var(--text-default);
  background-color: rgb(255 255 255 / .06);
}

.err .err__btn--ghost:hover {
  color: #fafafa;
  background-color: rgb(255 255 255 / .1);
}

.err .err__btn--primary,
.err .err__btn--primary:hover {
  color: #fafafa;
}

.err .err__btn--primary {
  background-color: var(--span);
}

.err .err__btn--primary:hover {
  background-color: var(--span-bright, var(--span));
}

.err .err__btn--money,
.err .err__btn--money:hover {
  color: var(--money);
}

.err .err__btn--money {
  background-color: color-mix(in srgb, var(--money) 12%, transparent);
}

.err .err__btn--money:hover {
  background-color: color-mix(in srgb, var(--money) 18%, transparent);
}

@media (max-width: 768px) {
  .err {
    min-height: calc(100vh - var(--nav-h) - 160px);
  }

  .err__actions {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
  }

  .err__btn {
    width: 100%;
  }
}

/* 35. Лента активности на главной (module_block_main_ext_stats)
   --------------------------------------------------------------------------
   Разметка и логика модуля не тронуты (forward/interface.php, assets/js/1.js) — только вид:
   вкладки сегментом, карточки без цветного налёта и «таблеток», стрелки аккуратнее,
   на телефоне — свайп с выглядывающей следующей карточкой, аватарки крупнее и без увеличения.
   ========================================================================== */

/* — Вкладки: сегмент — */
.es__buttons {
  display: inline-flex;
  max-width: 100%;
  gap: 2px;
  margin-bottom: 8px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--radius-l);
  background-color: var(--card);
}

.es__buttons::-webkit-scrollbar {
  display: none;
}

.es__buttons button.filter {
  flex: none;
  height: 34px;
  margin: 0;
  padding: 0 .95rem;
  border: 0;
  border-radius: var(--radius-m);
  font-size: 13px;
  font-weight: var(--font-weight-6);
  color: var(--text-custom);
  background: none;
  white-space: nowrap;
}

.es__buttons button.filter:hover {
  color: var(--text-default);
  background: none;
}

.es__buttons button.filter.active,
.es__buttons button.filter.active:hover {
  color: #fafafa;
  background-color: var(--span);
}

/* — Карточки наказаний/покупок — */
.es__content {
  --es-panel-height: 8.5rem;
}

.es__card {
  gap: .55rem;
  padding: .9rem 1rem;
  border: 0;
  border-radius: var(--radius-l);
  background-color: var(--card);
}

/* Без цветного налёта на всю карточку — статус и так виден по иконке типа и замку */
.es__card-punish-status-active::before,
.es__card-punish-status-inactive::before,
.es__card-buy-status-active::before {
  content: none;
}

.es__card .es__card-name {
  gap: .6rem;
  font-size: 14px;
  font-weight: var(--font-weight-6);
  color: var(--text-default);
  text-decoration: none;
}

.es__card .es__card-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-s);
}

.es__card .es__card-type {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-s);
}

.es__card .es__card-type svg {
  width: 13px;
  height: 13px;
}

.es__card .es__card-info {
  gap: .45rem;
}

.es__card .es__card-info-item.reason {
  font-size: 13px;
  color: var(--text-default);
}

/* Нижняя строка: дата и значки — без подложки-«таблетки» */
.es__card .es__card-info-item.time {
  gap: .35rem;
  padding: 0;
  font-size: 12px;
  color: var(--text-custom);
  background: none;
  font-variant-numeric: tabular-nums;
}

.es__card .es__card-info-item.time > svg {
  width: 13px;
  height: 13px;
  opacity: .7;
}

.es__card :is(.es__card-punish-status, .es__card-buy-status) svg {
  width: 14px;
  height: 14px;
}

.es__card :is(.es__card-game-icon, .es__card-servers) {
  width: 20px;
  height: 20px;
  margin-left: .25rem;
  border-radius: var(--radius-xs);
}

/* — Стрелки листания — */
.es__nav {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  border: 0;
  color: var(--text-default);
  background-color: var(--surface-raised);
}

.es__nav:hover {
  color: #fafafa;
}

/* Без «сжатия» стрелки при исчезновении — просто гаснет */
.es__scroller.is-start .es__nav--prev,
.es__scroller.is-end .es__nav--next {
  transform: none;
}

/* — «Сегодня были» / «Сейчас в сети» — аватарки — */
.es__cards-wrapper-small {
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 8px;
  padding: 12px;
  border: 0;
  border-radius: var(--radius-l);
}

.es__card-small {
  border-radius: var(--radius-s);
  background-color: var(--grey);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

/* Наведение — обводка акцентом вместо увеличения */
.es__card-small:hover img {
  transform: none;
}

.es__card-small:hover {
  box-shadow: 0 0 0 2px var(--span);
}

.es__avatars-fade {
  border-radius: 0 0 var(--radius-l) var(--radius-l);
}

.es__avatars-show-all {
  bottom: .6rem;
  height: 30px;
  padding: 0 .9rem;
  border: 0;
  border-radius: var(--radius-m);
  font-size: 12px;
  font-weight: var(--font-weight-6);
  color: var(--text-default);
  background-color: var(--surface-raised);
}

.es__avatars-show-all:hover {
  color: #fafafa;
  background-color: var(--surface-raised);
}

@media (max-width: 768px) {
  .es__buttons {
    display: flex;
  }

  .es__buttons button.filter {
    flex: 1 0 auto;
  }

  /* Телефон: листаем свайпом, следующая карточка выглядывает — стрелки не нужны */
  .es__card {
    flex-basis: 84%;
  }

  .es__nav {
    display: none;
  }

  .es__cards-wrapper {
    scroll-snap-type: x mandatory;
  }

  .es__card {
    scroll-snap-align: start;
  }
}

/* Лента активности: аватарки фиксированного размера 40×40, свёрнутая панель — ровно два ряда
   (12 + 40 + 8 + 40 + 12 = 112px; скрипт модуля берёт высоту из --es-panel-height) */
.es__content:has(#avatars-container:not([hidden])) {
  --es-panel-height: 112px;
}

.es__cards-wrapper-small {
  grid-template-columns: repeat(auto-fill, 40px);
  grid-auto-rows: 40px;
  justify-content: space-between;
}

.es__card-small {
  min-height: 0;
}

/* Вкладки на телефоне — одной строкой (у модуля перенос на узких экранах) */
.es__buttons {
  flex-wrap: nowrap;
}

/* «Показать всех» — текст поверх размытия всегда читается */
.es__avatars-show-all {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  line-height: 30px;
}

/* Вкладки ленты активности: затухание у края, когда есть что листать (классы ставит cs2uz.js) */
.es__buttons {
  position: relative;
}

.es__buttons { position: relative; position: relative; }
.es__buttons.fade-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.es__buttons.fade-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.es__buttons.fade-start.fade-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

/* «Показать всех / Скрыть»: центрируем без transform — иначе глобальное нажатие
   (button:active { transform: scale(.97) }) подменяло translateX(-50%) и кнопка прыгала вбок */
.es__avatars-show-all {
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  transform: none;
  transition: color .2s ease, background-color .2s ease, opacity .25s ease, transform .2s var(--ease-out);
}

/* — Лента активности: карточки наказаний/покупок, новая раскладка (разметка — renderPunishment/renderBuy
   в assets/js/1.js модуля). Цвет типа: бан — красный, мут — оранжевый, покупка — деньги — */
.es__content:has(#live-feed-scroller:not([hidden])) {
  --es-panel-height: 162px;
}

.es-pcard {
  --pc: var(--red);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 14px 16px;
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.es-pcard.is-mute { --pc: var(--orange); }
.es-pcard.is-buy { --pc: var(--money); }

.es-pcard:hover {
  background-color: var(--surface-raised);
}

/* Крупная иконка типа — водяным знаком в углу */
.es-pcard__mark {
  position: absolute;
  right: -14px;
  bottom: -20px;
  z-index: -1;
  width: 104px;
  height: 104px;
  fill: var(--pc);
  opacity: .07;
  pointer-events: none;
}

.es-pcard.is-removed .es-pcard__mark {
  fill: var(--text-custom);
  opacity: .05;
}

.es-pcard__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.es-pcard__avatar {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
}

.es-pcard .es-pcard__avatar .es__card-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-m);
  object-fit: cover;
  background-color: var(--grey);
}

/* Значок типа на углу аватара, отделён от него цветом карточки */
.es-pcard__type {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 3px solid var(--card);
  border-radius: 50%;
  background-color: var(--pc);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.es-pcard:hover .es-pcard__type {
  border-color: var(--surface-raised);
}

.es-pcard__type svg {
  width: 9px;
  height: 9px;
  fill: #fafafa;
}

.es-pcard.is-buy .es-pcard__type svg {
  fill: var(--bg);
}

.es-pcard.is-removed .es-pcard__type {
  background-color: var(--text-secondary);
}

.es-pcard__who {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.es-pcard__name {
  overflow: hidden;
  font-size: 14px;
  font-weight: var(--font-weight-6);
  color: var(--text-default);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.es-pcard__ago {
  font-size: 12px;
  color: var(--text-custom);
}

.es-pcard__game {
  flex: none;
  align-self: flex-start;
  padding: 3px 6px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: var(--font-weight-7);
  letter-spacing: .04em;
}

.es-pcard__game.is-cs2 {
  color: #9cc4ff;
  background-color: rgb(31 83 128 / .5);
}

.es-pcard__game.is-csgo {
  color: #e7a64a;
  background-color: rgb(213 134 19 / .14);
}

/* Причина — главное в карточке */
.es-pcard__reason {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  font-weight: var(--font-weight-6);
  line-height: 1.35;
  color: #fafafa;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.es-pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
  margin-top: auto;
}

/* Статус плашкой: навсегда — красный, до даты — оранжевый, снято — зелёный, покупка — деньги */
.es-pcard__status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .35rem;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-s);
  font-size: 12px;
  font-weight: var(--font-weight-6);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--red);
  background-color: color-mix(in srgb, var(--red) 13%, transparent);
}

.es-pcard__status svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.es-pcard.is-temp .es-pcard__status {
  color: var(--orange);
  background-color: color-mix(in srgb, var(--orange) 13%, transparent);
}

.es-pcard.is-removed .es-pcard__status {
  color: var(--green);
  background-color: color-mix(in srgb, var(--green) 12%, transparent);
}

.es-pcard.is-buy .es-pcard__status {
  color: var(--money);
  background-color: color-mix(in srgb, var(--money) 13%, transparent);
}

.es-pcard__kind {
  overflow: hidden;
  font-size: 11px;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Скелетоны до загрузки — высота под новую карточку */
.es__cards-wrapper .es__card.skeleton--default {
  min-height: 162px;
}

/* Модалка сервера (module_block_main_servers, перенесена из новой версии модуля):
   на телефоне счётчик спецназа — справа, как у террористов (зеркалирование команд — только для ПК) */
@media (max-width: 568px) {
  #PlayersInfoModal .em__teams-team-ct .em__teams-players-count {
    margin-right: 0;
    margin-left: auto;
  }
}

/* Магазин: преимущества — видно 6 строк, остальное прокруткой внутри списка
   (строка 25.2px × 6 + 5 промежутков × 2px = 161.3px → 162px).
   Полосы прокрутки нет: край, за которым есть ещё пункты, плавно уходит в тень
   (классы fade-start / fade-end ставит cs2uz.js — storePropsFades) */
.st .st-props__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 162px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.st .st-props__list::-webkit-scrollbar {
  display: none;
}

.st .st-props__list.fade-end {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent);
}

.st .st-props__list.fade-start {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 34px);
  mask-image: linear-gradient(180deg, transparent, #000 34px);
}

.st .st-props__list.fade-start.fade-end {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 34px, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 34px, #000 calc(100% - 34px), transparent);
}

/* прежнее «+ N» больше не используется */
.st .st-props.has-more:not(.is-open) form.shop_card_property:nth-of-type(n+5) {
  display: flex;
}

/* Карточки режимов: адаптивная сетка вместо flex с фиксированной долей.
   Было: доля 1/6 + min-width 13rem — на узком экране шестая не влезала, ряд переносился на 5,
   а карточки не растягивались, и справа оставалась дыра.
   Стало: колонок не больше выбранного в настройках (mods__row-N), но каждая не уже 13rem —
   при сужении колонок становится меньше, и карточки всегда заполняют ряд целиком. */
.mods__wrapper[class*="mods__row-"] {
  --mods-n: 6;
  --mods-gap: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(13rem, (100% - (var(--mods-n) - 1) * var(--mods-gap)) / var(--mods-n)), 1fr));
  gap: var(--mods-gap);
}

.mods__wrapper.mods__row-5 { --mods-n: 5; }
.mods__wrapper.mods__row-4 { --mods-n: 4; }
.mods__wrapper.mods__row-3 { --mods-n: 3; }
.mods__wrapper.mods__row-2 { --mods-n: 2; }
.mods__wrapper.mods__row-1 { --mods-n: 1; }

.mods__wrapper[class*="mods__row-"] > .mods__card {
  flex: none;
  width: auto;
  min-width: 0;
}

/* Заглушки (настройка «пустые карточки» в мониторинге) добивают последний ряд.
   Модуль выводит их под число колонок из настроек, а колонок теперь бывает меньше —
   лишние скрывает cs2uz.js (modsPlugs), оставляя ровно столько, сколько нужно до конца ряда */
.mods__wrapper[class*="mods__row-"] > .mods__card.servers__card-block-empty.is-extra {
  display: none;
}

/* Телефон: две колонки, как раньше */
@media (max-width: 768px) {
  .mods__wrapper[class*="mods__row-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}