:root {
  --bg-1: #0a0e1a;
  --bg-2: #121a30;
  --card-bg: rgba(255,255,255,0.04);
  --card-border: rgba(255,255,255,0.08);
  --text: #e6ecf5;
  --text-dim: #8b96ad;
  --accent: #5ec4a8;
  --accent-2: #4e8fe6;
  --danger: #e0526b;
  --warn: #e6b45e;
  --radius: 16px;
  --widget-opacity: 1;
  /* Тёмная тема для системных переменных Bootstrap (иначе text-muted/
     --bs-secondary-color рисуют почти чёрный на тёмном фоне) */
  --bs-body-color: #e6ecf5;
  --bs-secondary-color: #8b96ad;
  --bs-tertiary-color: rgba(230,236,245,0.45);
  --bs-emphasis-color: #ffffff;
  --bs-secondary-bg: #121a30;
  --bs-tertiary-bg: #0d1424;
  --bs-border-color: rgba(255,255,255,0.08);
}

html {
  overflow-x: hidden;
  min-height: 100vh;
  /* Тёмный фон на html: и iOS-оверскролл тёмный, и bg-backdrop (z-index:-1)
     остаётся ПОВЕРХ градиента (когда фон на body — он перекрывал подложку). */
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(78, 143, 230, 0.18), transparent 60%),
    radial-gradient(1000px 500px at -10% 110%, rgba(94, 196, 168, 0.12), transparent 60%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2));
  background-attachment: fixed;
}
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: transparent;
  min-height: 100vh;
  overflow-x: hidden;
}
/* iOS: футер — над домашней кнопкой */
footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }

.bg-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  /* fixed-аттачмент не нужен (элемент и так fixed) и ломает iOS Safari */
  background: var(--bg-image) center/cover no-repeat;
  opacity: var(--bg-opacity, 1);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
.bg-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0, var(--bg-darken, 0));
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #7ce3c8; }

.navbar {
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--card-border);
  padding: calc(0.5rem + env(safe-area-inset-top, 0px)) 1rem 0.5rem;
}
.navbar-brand {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text) !important;
}
.brand-dot { color: var(--accent); }
.nav-link {
  color: var(--text-dim) !important;
  font-weight: 500;
  padding: 0.4rem 0.8rem !important;
  border-radius: 8px;
  transition: all 0.15s;
}
.nav-link:hover, .nav-link.active {
  color: var(--accent) !important;
  background: rgba(94, 196, 168, 0.1);
}
.nav-user-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
  padding: 0.3rem 0.55rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--card-border);
}
.nav-user-box .nav-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
}
.nav-user-avatar-fallback { font-size: 1.6rem; line-height: 1; color: var(--text-dim); }

.game-switcher {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  border-radius: 12px;
  padding: 3px;
}
.game-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.2s;
  white-space: nowrap;
}
.game-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}
.game-btn.active.gs-dota {
  color: #d9b3e8; font-weight: 700;
  background: rgba(211,44,230,0.14);
  border: 1px solid rgba(211,44,230,0.35);
}
.game-btn.active.gs-pubg {
  color: #ecc678; font-weight: 700;
  background: rgba(242,169,0,0.12);
  border: 1px solid rgba(242,169,0,0.32);
}
.game-btn.active.gs-dbd {
  color: #ef9d9d; font-weight: 700;
  background: rgba(179,18,18,0.20);
  border: 1px solid rgba(224,82,107,0.40);
}
.game-btn.active { filter: none; }
.game-btn i { font-size: 1.1rem; }
/* Логотипы-пиктограммы трекеров (монохром): белые на неактивных, чёрные на яркой активной */
.game-logo {
  height: 28px;
  width: 28px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.75;
  transition: filter .2s, opacity .2s;
}
.game-btn:hover .game-logo { opacity: 1; }
.game-btn.active .game-logo { opacity: 1; }
/* Компактный вариант для кнопок в админке */
.game-logo-sm {
  height: 15px;
  width: 15px;
  display: inline-block;
  vertical-align: -2px;
}

/* Виджеты дашборда: прозрачность/яркость управляются админом через --gx-o/--gx-b */
.gx-card { opacity: var(--gx-o, 1); filter: brightness(var(--gx-b, 1)); transition: opacity .25s; }
/* Выпадающие меню в палитре проекта */
.dropdown-menu {
  background: rgba(16, 24, 44, 0.97);
  border: 1px solid var(--card-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(94,196,168,0.12); color: var(--accent); }
.dropdown-divider { border-color: var(--card-border); }

/* Панель, у которой настройки применяются ТОЛЬКО к фону: контент всегда чёткий */
.gx-card.gx-panel { opacity: 1; filter: none; }
.card-dota.gx-panel {
  position: relative;
  background: rgba(16, 24, 44, calc(0.55 * var(--gx-o, 1)));
  backdrop-filter: blur(calc(14px + var(--gx-blur, 0px))) saturate(1.15);
  -webkit-backdrop-filter: blur(calc(14px + var(--gx-blur, 0px))) saturate(1.15);
}
.card-dota.gx-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #000;
  opacity: var(--gx-dk, 0);
  pointer-events: none;
}
.card-dota.gx-panel > * { position: relative; z-index: 1; }

/* Карточки с canvas-графиками: без brightness-фильтра (иначе текст канваса мылится) */
.gx-card.gx-nofilter { filter: none; opacity: 1; }
/* Прозрачность для графиков — только через альфу фона: контент остаётся чётким */
.card-dota.gx-nofilter {
  background: rgba(16, 24, 44, calc(0.55 * var(--gx-o, 1)));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Блюр размывает ФОН ЗА виджетом, а не его содержимое. Формула единая со стеклом карточек */
.gx-card:not(.card-dota):not(.stat-card):not(.hero-card):not(.match-row) {
  backdrop-filter: blur(calc(14px + var(--gx-blur, 0px))) saturate(1.15);
  -webkit-backdrop-filter: blur(calc(14px + var(--gx-blur, 0px))) saturate(1.15);
}

/* Админка: единые настройки стилей виджетов на трекер */
.ws-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  margin-bottom: 0.5rem;
}
.ws-row:last-child { margin-bottom: 0; }
.ws-name { font-weight: 600; font-size: 0.9rem; }
.ws-slider { display: flex; flex-direction: column; gap: 0.1rem; }
.ws-slider > .d-flex { flex: 1 1 auto; min-width: 0; width: 100%; }
.ws-slider .form-range { flex: 1 1 auto; width: auto; min-width: 60px; }
.ws-num { width: 78px; flex-shrink: 0; text-align: center; }
.ws-save { align-self: flex-end; }

/* Фоны трекеров: маркер наличия фона прижат к правому краю кнопки */
#bgAcc .accordion-button { display: flex; align-items: center; }
#bgAcc .accordion-button::after { margin-left: 0; }
/* Профиль в настройках: крупный аватар */
.profile-avatar {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 3px solid var(--accent);
}
.profile-avatar-fallback { font-size: 4.6rem; line-height: 1; color: var(--text-dim); }
.minw-0 { min-width: 0; }

.card-dota {
  background: rgba(16, 24, 44, 0.55);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  backdrop-filter: blur(calc(14px + var(--gx-blur, 0px))) saturate(1.15);
  -webkit-backdrop-filter: blur(calc(14px + var(--gx-blur, 0px))) saturate(1.15);
  opacity: var(--widget-opacity);
}
.card-title {
  color: var(--accent);
  font-weight: 600;
}

.stat-card {
  background: rgba(16, 24, 44, 0.55);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  backdrop-filter: blur(calc(14px + var(--gx-blur, 0px))) saturate(1.15);
  -webkit-backdrop-filter: blur(calc(14px + var(--gx-blur, 0px))) saturate(1.15);
}
.stat-label { color: var(--text-dim); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-value { font-size: 1.6rem; font-weight: 700; }
.stat-sub { color: var(--text-dim); font-size: 0.8rem; }

.text-win { color: var(--accent) !important; }
.text-loss { color: var(--danger) !important; }
.text-muted2 { color: var(--text-dim); }

.badge-win { background: var(--accent); color: #0a0e1a;
  box-shadow: 0 0 6px rgba(94,196,168,0.45), 0 0 12px rgba(94,196,168,0.22);
  text-shadow: 0 1px 2px rgba(255,255,255,0.25); }
.badge-win-gold {
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  color: #4a2c04;
  box-shadow: 0 0 8px rgba(255, 200, 80, 0.55), 0 0 16px rgba(255, 180, 60, 0.35);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.35);
}
.badge-silver {
  background: linear-gradient(135deg, #e8e8ef 0%, #b8bfcc 100%);
  color: #1a1f2b;
  box-shadow: 0 0 8px rgba(200, 208, 224, 0.55), 0 0 16px rgba(180, 190, 210, 0.35);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.35);
}
.badge-bronze {
  background: linear-gradient(135deg, #a9774a 0%, #6f441f 100%);
  color: #f6e6d2;
  box-shadow: 0 0 8px rgba(200, 130, 70, 0.5), 0 0 16px rgba(150, 85, 40, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.badge-loss { background: var(--danger); color: #fff;
  box-shadow: 0 0 6px rgba(224,82,107,0.4), 0 0 12px rgba(224,82,107,0.2);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.badge-role { background: var(--accent-2); color: #fff; }
.badge-dim { background: rgba(255,255,255,0.1); color: var(--text-dim); }
.badge-banned { background: var(--danger); color: #fff; }
.badge-ranked { background: rgba(255, 193, 7, 0.15); color: #ffd54a; border: 1px solid rgba(255,193,7,0.45); }

/* Мобильные карточки матчей (вместо таблицы на < md) */
.match-card { display: block; padding: .65rem .75rem; border-radius: 10px; border: 1px solid var(--card-border); background: rgba(255,255,255,.03); text-decoration: none; color: inherit; }
.match-card:hover { background: rgba(255,255,255,.06); }
.match-card-win { border-left: 3px solid var(--accent); }
.match-card-loss { border-left: 3px solid var(--danger); }
.match-card-top10 { border-left: 3px solid var(--accent-2); }


/* Toast-уведомления вместо flash-алертов */
.flash-toasts { position: fixed; bottom: 16px; right: 16px; z-index: 1090; display: flex; flex-direction: column; gap: 8px; max-width: min(92vw, 420px); }
.flash-toast { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 10px; background: #0f1420; border: 1px solid var(--card-border); color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,.5); animation: toast-in .25s ease; }
.flash-toast.hide { opacity: 0; transform: translateX(10px); transition: opacity .3s, transform .3s; }
.flash-toast-success { border-left: 3px solid var(--accent); }
.flash-toast-danger { border-left: 3px solid var(--danger); }
.flash-toast-warning { border-left: 3px solid #f2a93b; }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* Темы/акценты */
body.theme-dota { --accent: #58c98d; --accent-2: #3fae6a; }
body.theme-pubg { --accent: #e6a94e; --accent-2: #e67e22; }
body.theme-dbd  { --accent: #b06bff; --accent-2: #8a3ff2; }
body.theme-cyan { --accent: #4fd8c9; --accent-2: #2ba89c; }
.theme-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; margin-right: 6px; vertical-align: middle; }
.theme-swatch-dota { background: #58c98d; }
.theme-swatch-pubg { background: #e6a94e; }
.theme-swatch-dbd { background: #b06bff; }
.theme-swatch-cyan { background: #4fd8c9; }
.theme-swatch-default { background: #5ec4a8; }
.theme-current { border-color: #fff; }

.btn-dota {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0a0e1a;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  padding: 0.5rem 1.5rem;
}
.btn-dota:hover { filter: brightness(1.1); color: #0a0e1a; }
.btn-ghost {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--card-border);
  color: var(--text);
  border-radius: 8px;
  padding: 0.4rem 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); color: var(--accent); }
/* Свечение активного состояния кнопок управления (вип/админ) */
.btn-glow { box-shadow: 0 0 8px currentColor; }
/* Жёсткое закрепление кнопок управления пользователем: две фикс. строки
   (сверху: админ/вип/пароль, снизу: бан/удалить), одинаковая ширина,
   чтобы активация одной не сдвигала остальные. */
.admin-acts .admin-act { width: 2.25rem; flex: 0 0 auto; padding-left: 0; padding-right: 0; }
.btn-danger-ghost {
  background: rgba(224,82,107,0.1);
  border: 1px solid rgba(224,82,107,0.3);
  color: var(--danger);
  border-radius: 8px;
  padding: 0.4rem 1rem;
  cursor: pointer;
}
.btn-danger-ghost:hover { background: rgba(224,82,107,0.2); }

.table-dota { --bs-table-bg: transparent; color: var(--text); }
/* Фиксированные колонки таблицы пользователей (админка): смена статуса
   (админ/вип/бан) меняет бейдж, но не ширину колонок и не вызывает
   горизонтальный скролл / «подпрыгивание» границ строк. */
.table-dota.user-table { table-layout: auto; border-collapse: separate; border-spacing: 0; min-width: 1080px; }
.table-dota.user-table th,
.table-dota.user-table td { white-space: nowrap; }
.table-dota.user-table td:last-child { overflow: visible; }

/* Карточки пользователей в админке (скролл внутри виджета) */
.user-cards-scroll { max-height: 800px; overflow-y: auto; padding-right: .25rem; }
.user-cards-scroll::-webkit-scrollbar { width: 8px; }
.user-cards-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
.user-card-banned { border-color: var(--danger); opacity: .85; }
.user-card-info { display: grid; gap: .25rem .5rem; }
.user-card-info .lbl { color: var(--text-dim); white-space: nowrap; }
.table-dota thead th { color: var(--text-dim); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; border-bottom-color: var(--card-border); }
.table-dota td { border-color: rgba(255,255,255,0.06); vertical-align: middle; }
.table-dota tbody tr:hover { background: rgba(255,255,255,0.03); }
.table-banned { opacity: 0.5; }

/* Все таблицы внутри контента: светлый текст, тёмные разделители
   (контраст к фону карточек; совпадает с цветом служебных колонок) */
main .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: rgba(255,255,255,0.07);
  color: var(--text);
}
main .table th { color: var(--text-dim); }
main .table td, main .table th { border-color: rgba(255,255,255,0.07); vertical-align: middle; }
main .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(255,255,255,0.03);
  color: var(--text);
}
main .table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: rgba(255,255,255,0.05);
  color: var(--text);
}

/* Плейсхолдеры полей ввода — контрастнее */
.form-control::placeholder, .form-select::placeholder, textarea::placeholder {
  color: #b7c2d8;
  opacity: 1;
}

.form-control, .form-select {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--card-border);
  color: var(--text);
  border-radius: 8px;
}
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,0.08);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(94,196,168,0.15);
}
.form-select option { background: var(--bg-2); color: var(--text); }
.form-range::-webkit-slider-thumb { background: var(--accent); }
.form-range::-moz-range-thumb { background: var(--accent); }
.form-label { color: var(--text-dim); font-size: 0.8rem; }

.alert-success { background: rgba(94,196,168,0.15); border-color: rgba(94,196,168,0.3); color: var(--accent); }
.alert-danger { background: rgba(224,82,107,0.15); border-color: rgba(224,82,107,0.3); color: var(--danger); }
.alert-dismissible .btn-close { filter: invert(1); }

.login-wrap { display: flex; justify-content: center; align-items: center; min-height: 60vh; }
.login-panel { width: 100%; max-width: 460px; }

.match-feed { display: flex; flex-direction: column; gap: 6px; }
.match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(16, 24, 44, 0.55);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  border-left: 3px solid var(--card-border);
  transition: transform 0.15s, background 0.15s;
}
.match-row:hover { transform: translateX(4px); background: rgba(255,255,255,0.06); }
.match-row-win { border-left-color: var(--accent); }
.match-row-top10 { border-left-color: var(--warn); }
.match-row-loss { border-left-color: var(--danger); }
.match-main { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 auto; min-width: 0; }
.match-result {
  flex: 0 0 150px;
  max-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.15rem;
  text-align: right;
}
.match-result .badge-result {
  min-width: 122px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}
.match-kda { font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.match-arrow { color: var(--text-dim); margin-left: auto; }

/* Аватары героев Dota: пропорции исходного арта 256x144, без обрезки */
.hero-avatar { width: 34px; height: auto; aspect-ratio: 256 / 144; border-radius: 6px; object-fit: cover; }
.hero-avatar-lg { width: 64px; height: auto; aspect-ratio: 256 / 144; border-radius: 8px; object-fit: cover; }
.avatar-xl { width: 88px; height: 88px; border-radius: 50%; border: 3px solid var(--accent); object-fit: cover; }

.map-tile { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.map-tile-img { width: 100px; height: 100px; border-radius: 16px; }
.map-tile-img-lg { width: 150px; height: 150px; border-radius: 18px; }

.hero-card { transition: transform 0.15s; cursor: default; }
.hero-card:hover { transform: translateY(-2px); }
.hero-card-name {
  font-weight: 600;
  font-size: 0.85rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-card-stats { flex-shrink: 0; margin-left: auto; text-align: right; }

.pagination-dota .page-link { background: rgba(255,255,255,0.06); border: 1px solid var(--card-border); color: var(--text); }
.pagination-dota .page-link:hover { background: rgba(255,255,255,0.12); color: var(--accent); }
.pagination-dota .active .page-link { background: var(--accent); color: #0a0e1a; border-color: var(--accent); }

.navbar-nav .nav-link { font-size: 1.02rem; }
.navbar-nav .nav-link i { font-size: 1.25rem; vertical-align: -0.18em; }
.section-title { color: var(--text); font-weight: 700; }

.progress { background: rgba(255,255,255,0.06); border-radius: 8px; }
.progress-bar { border-radius: 8px; }
.progress-win { background: var(--accent); }
.progress-loss { background: var(--danger); }

.modal-content { background: linear-gradient(160deg, var(--bg-1), var(--bg-2)); border: 1px solid var(--card-border); color: var(--text); }
.modal-header { border-bottom-color: var(--card-border); }
.modal-footer { border-top-color: var(--card-border); }
.btn-close { filter: invert(1); }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner-anim { animation: spin 1s linear infinite; }

@media (max-width: 768px) {
  .game-label { display: none; }
  .game-btn { padding: 6px 10px; }
  .navbar-brand { font-size: 1rem; }
  .stat-value { font-size: 1.3rem; }
  .match-row { padding: 0.5rem 0.75rem; }
  .hero-avatar-lg { width: 48px; height: 48px; }
  /* iOS Safari fix: background-attachment: fixed не работает на body,
     но position:fixed на .bg-backdrop работает — принудительно фиксируем */
  body { background-attachment: scroll; }
  .bg-backdrop { position: fixed !important; }
}


/* ── Dota: стили страниц матчей/героев (перенесены из оригинала) ──

.table-dota th.sortable { user-select: none; }
.table-dota th.sortable:hover { color: var(--accent); }
.sort-ind { font-size: 0.7rem; color: var(--text-dim); }
.sort-ind.active { color: var(--accent); }
.chart-box { height: 320px; position: relative; }
.hero-card-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.78rem;
  flex-shrink: 0;
}
/* --- Избранные герои --- */
.fav-hero {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  height: 100%;
  color: var(--text);
  text-decoration: none;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.fav-hero:hover { transform: translateY(-2px); border-color: rgba(78,143,230,0.5); background: rgba(255,255,255,0.05); color: var(--text); }
/* Имя героя не наезжает на процент: ellipsis + % не сжимается */
.fav-hero .minw-0 div:first-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fav-hero .ms-2 { flex-shrink: 0; }
/* --- Лучшие герои (короны) --- */
.best-hero-card { display: block; color: var(--text); text-decoration: none; transition: transform 0.12s ease; }
.best-hero-card:hover { transform: translateY(-3px); color: var(--text); }
.best-hero-crown { height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.4rem; }
.best-hero-avatar { border: 2px solid var(--card-border); }
.best-hero-avatar-gold { box-shadow: 0 0 18px rgba(240,199,94,0.45); border-color: rgba(240,199,94,0.7); }
.best-hero-first { border-color: rgba(240,199,94,0.45); }
.match-hero { flex-shrink: 0; }
.match-main .hero-name { color: var(--accent); }
.badge-result { font-size: 0.95rem; padding: 0.45em 0.95em; letter-spacing: 0.3px; }
.match-row-table { cursor: pointer; }
.match-kda-big { text-align: right; }
.stat-bar { margin-bottom: 0.9rem; }
.stat-bar .progress { height: 6px; }
.progress-bar-blue { background: linear-gradient(90deg, var(--accent-2), #7bb0ff); }
.progress-bar-red { background: linear-gradient(90deg, var(--danger), #ff7a8e); }
.item-slot {
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 0.5rem;
}
.item-slot.item-neutral { border-color: rgba(230,180,94,0.4); }
.item-slot.item-consumed {
  border-style: dashed;
  border-color: rgba(126,217,87,0.45);
  background: rgba(126,217,87,0.05);
}
.item-ph { width: 56px; height: 40px; background: rgba(255,255,255,0.04); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.item-ph-sm { width: 26px; height: 26px; background: rgba(255,255,255,0.06); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 0.75rem; }
.item-name { font-size: 0.7rem; text-align: center; color: var(--text); line-height: 1.1; }
.item-cost { font-size: 0.68rem; color: var(--text-dim); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}
.stat-tile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
}
.stat-tile-icon { font-size: 1.15rem; color: var(--accent-2); }
.stat-tile-label { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.15; }
.stat-tile-value { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.purchase-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 0.25rem 0.6rem;
}
.kill-badge {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(224,82,107,0.06);
  border: 1px solid rgba(224,82,107,0.2);
  border-radius: 20px;
  padding: 0.25rem 0.7rem;
  font-size: 0.85rem;
}
.team-head { font-weight: 700; letter-spacing: 0.5px; margin-bottom: 0.4rem; font-size: 0.85rem; }
.team-head.radiant { color: var(--accent); }
.team-head.dire { color: var(--danger); }
.player-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
}
.player-row:hover { background: rgba(255,255,255,0.03); }
.player-row.player-me { background: rgba(78,143,230,0.12); border: 1px solid rgba(78,143,230,0.3); }
.widget-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid var(--card-border);
  cursor: grab;
}
.widget-row:active { cursor: grabbing; }
.widget-row:last-child { border-bottom: none; }
.widget-row.sortable-drag { opacity: 0.5; }
.widget-row.sortable-chosen { background: rgba(255, 255, 255, 0.05); }
.widget-row.sortable-ghost { opacity: 0.4; }
.widget-drag { cursor: grab; }
.widget-icon { color: var(--text-dim); font-size: 1.1rem; }
.widget-drag { color: var(--text-dim); cursor: grab; }
.widget-drag:active { cursor: grabbing; }
.widget-drag:hover { color: var(--accent); }


/* ── Портировано из оригинального dota_web_otel style.css ──

* { box-sizing: border-box; }
.navbar-brand .brand-dot { color: var(--accent); }
.navbar .navbar-nav .nav-link { color: var(--text-dim); font-weight: 500; }
.navbar .navbar-nav .nav-link:hover { color: var(--text); }
.navbar .navbar-nav .nav-link.active {
  color: var(--accent);
  background: rgba(94, 196, 168, 0.14);
  border-radius: 8px;
}
.card-dota .card-title { color: var(--accent); font-weight: 600; letter-spacing: 0.3px; }
.stat-card .stat-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--bs-body-color, #e8eaf0); }
.stat-card .stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: #fff; }
.stat-card .stat-sub { font-size: 0.8rem; color: var(--text-dim); }
.table-dota tr.table-banned td { opacity: 0.55; }
.dota-plus-logo { height: 18px; width: auto; vertical-align: -2px; }
.btn-group .btn-ghost.active, .btn-ghost.active {
  background: rgba(94, 196, 168, 0.14);
  border-color: rgba(94, 196, 168, 0.5);
  color: var(--accent);
  box-shadow: none;
}
.btn-ghost.notify-on { border-color: rgba(94,196,168,0.5); color: var(--accent); background: rgba(94,196,168,0.12); }
.table-dota th.sortable { user-select: none; }
.form-control::placeholder { color: #5c6780; }
.alert { border-radius: 12px; border: 1px solid var(--card-border); }
.section-sub { color: var(--text-dim); font-size: 0.9rem; }
/* --- Каталог героев --- */
.hero-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  color: var(--text);
  height: 100%;
  min-width: 0;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
/* тёмные переключатели Telegram */
.form-check-input {
  background-color: rgba(255,255,255,0.12);
  border-color: var(--card-border);
}
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
/* --- Лента матчей --- */
.match-feed { display: flex; flex-direction: column; gap: 0.6rem; }
/* --- Пагинация --- */
.pagination-dota .page-link {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--card-border);
  color: var(--text);
}
.pagination-dota .page-item.disabled .page-link { background: transparent; color: var(--text-dim); }
/* --- Детали матча --- */
.hero-avatar-xl { width: 96px; height: auto; aspect-ratio: 256 / 144; border-radius: 10px; object-fit: cover; border: 2px solid var(--card-border); flex-shrink: 0; }
.item-empty { background: transparent; border-style: dashed; }
.item-img { width: 56px; height: 40px; object-fit: contain; }
.purchase-time { font-size: 0.72rem; color: var(--accent-2); font-weight: 600; }
.purchase-name { font-size: 0.8rem; }
.purchase-charges { font-size: 0.72rem; color: var(--text-dim); }
.smaller { font-size: 0.72rem; }
/* модалка настройки дашборда — тёмная тема */
.modal-content {
  background-color: var(--bg-1);
  background-image: linear-gradient(160deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--card-border);
  color: var(--text);
  border-radius: var(--radius);
}
.modal-title { color: var(--accent); font-weight: 600; }
.modal-backdrop.show { opacity: 0.7; }
/* тёмные нативные элементы (выпадающие списки, автозаполнение) */
.form-select, .form-control, input, select {
  color-scheme: dark;
}

/* Dota: аватары героев в виджете избранного — увеличены вдвое */
.favorites-avatar { width: 128px; height: auto; aspect-ratio: 256 / 144; border-radius: 10px; object-fit: cover; }

/* Стат-карточки дашборда — единая высота в ряду */
[class*="col-"] > .stat-card { height: 100%; }

/* Графики на странице статистики: фиксированная высота, canvas не схлопывается */
.chart-box { height: 320px; }
@media (max-width: 767.98px) {
  .chart-box { height: 240px; }
}

/* Каталог героев Dota: аватары увеличены вдвое */
main .hero-card .hero-avatar { width: 72px; height: auto; aspect-ratio: 256 / 144; border-radius: 8px; }

/* Лента матчей: ярче текст */
.match-main { color: var(--bs-body-color, #e8eaf0); }
.match-main .fw-bold { color: #fff; }
.match-row .text-muted2 { color: #aeb8cc; }
.match-kda b { color: #fff; }

/* Плитки избранного: равномерно на всю ширину виджета */
/* Плитки избранного: равномерно на всю ширину виджета.
   min 200px — чтобы топ-5 помещался в один ряд на типичной ширине */
.fav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; }
.fav-grid .favorites-avatar { width: 104px; }
.fav-grid .fav-hero { padding: .45rem .55rem; }

/* Лента «Все матчи»: аватары героев как в виджете «Лучший винрейт» */
.match-hero .hero-avatar-lg { width: 104px; height: auto; }

/* История матчей: аватары как в ленте */
.matchlist-avatar { width: 104px; height: auto; aspect-ratio: 256 / 144; border-radius: 8px; object-fit: cover; }


/* ═══════════ Полоса страниц навбара — глобально (чипы-кнопки во всех ориентациях) ═══════════ */
.strip-row {
  display: flex; align-items: center; gap: .35rem; padding: .2rem .4rem;
  min-width: 0; max-width: 100%; overflow: visible;
}
.pages-strip {
  display: flex; gap: .35rem; overflow-x: auto; touch-action: pan-x;
  padding: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  align-items: center; flex: 1 1 0; min-width: 0;
}
.pages-strip::-webkit-scrollbar { display: none; }
.pages-strip a {
  flex: 0 0 auto; padding: .32rem .7rem; border-radius: 9px;
  font-size: .8rem; color: var(--text-dim); text-decoration: none;
  background: rgba(255,255,255,.04); border: 1px solid var(--card-border); white-space: nowrap;
}
.pages-strip a.active { color: var(--accent); background: rgba(94,196,168,.12); border-color: rgba(94,196,168,.35); }
.strip-burger {
  flex: 0 0 auto; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: .25rem .55rem; border-radius: 9px;
  background: rgba(255,255,255,.06); border: 1px solid var(--card-border);
  touch-action: manipulation;
}
/* Подсветка бургера — зелёным акцентом, не чёрным */
.strip-burger:focus, .strip-burger:focus-visible, .strip-burger:active:focus {
  outline: none;
  border-color: rgba(94,196,168,.55);
  box-shadow: 0 0 0 .22rem rgba(94,196,168,.25);
}
.strip-burger:not(.collapsed) { border-color: rgba(94,196,168,.55); background: rgba(94,196,168,.14); }
.strip-burger .navbar-toggler-icon { width: 1.05em; height: 1.05em; filter: invert(1) grayscale(1) brightness(1.6); }
.nav-user-box.nav-user-compact { min-width: 0; border: none; background: transparent; padding: 0 .2rem; }
.nav-user-avatar-sm { width: 46px; height: 32px; object-fit: cover; border-radius: 8px; border: 2px solid var(--accent); }

/* Плитки дашборда: одинаковая высота, значения не распирают колонки */
.stat-card { display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; }
.stat-card .stat-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row > .col > .stat-card,
[class*="col-"] > .stat-card,
.stat-grid4 > .col > .stat-card { height: 100%; }

/* ── Все герои: сворачиваемые группы + чипы ── */
.attr-group { border: 1px solid var(--card-border); border-radius: 12px; padding: .55rem .75rem; background: rgba(255,255,255,.02); }
.attr-head { cursor: pointer; font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .5rem;
  list-style: none; user-select: none; }
.attr-head::-webkit-details-marker { display: none; }
.attr-head::after { content: '\25BE'; margin-left: auto; color: var(--text-dim); transition: transform .15s; }
details[open] > .attr-head::after { transform: rotate(180deg); }

/* ── Лучшие герои: пирамида золото→серебро/бронза ── */
.podium { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: start; }
.podium .ph-gold { grid-column: 1 / -1; width: min(330px, 100%); justify-self: center; margin-bottom: .2rem; }
.podium .ph-bronze { margin-top: 1.4rem; }

/* Компактная таблица рейтинга */
.table-best td, .table-best th { padding: .45rem .5rem; vertical-align: middle; }
.table-best .rank-cell { width: 2rem; font-size: .8rem; }
.bh-avatar { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.bh-name { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 160px; vertical-align: middle; }
.wr-cell { font-weight: 600; font-size: .85rem; }
.table-best td.small { font-size: .74rem; }

/* История матчей: дата мелко */
.hist-date { font-size: .6rem; color: var(--text-dim); white-space: nowrap; }


/* ── Компактный лейаут <992px: ландшафт телефона и планшет ── */
@media (max-width: 991.98px) {
  .game-switcher { flex-wrap: wrap; justify-content: center; }

  /* Дашборд: 2×2 плитки, крупнее — но равного размера и с умещающимся содержимым */
  .stat-grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; align-items: stretch; }
  .stat-grid4 > .col { width: auto; padding: 0; display: flex; }
  .stat-grid4 .stat-card { width: 100%; height: 100%; padding: .8rem .6rem; text-align: center; }
  /* Приветствие на дашборде компактнее */
  .greet { font-size: 1.15rem; }
  .greet-sub { font-size: .75rem; margin-top: .1rem; }
  .stat-grid4 .stat-label { font-size: .7rem; letter-spacing: .3px; }
  .stat-grid4 .stat-sub { display: none; }
  .stat-grid4 .stat-value { font-size: 1.2rem; }
  .dash-actions .btn-ghost { padding: .26rem .55rem; font-size: .74rem; }

  /* Избранное: горизонтальные компактные плитки */
  .fav-grid { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: .6rem; }
  .fav-grid .favorites-avatar { width: 96px; height: auto; aspect-ratio: 256 / 144; flex-shrink: 0; }
  .fav-grid .fav-hero { flex-wrap: nowrap; padding: .45rem; }
  .fav-grid .fav-hero .ms-2 { margin-left: .5rem !important; }

  /* Лента «Все матчи»: компактные строки */
  .match-hero .hero-avatar-lg { width: 68px; }
  .badge-result { min-width: 0; padding: .3em .65em; }
  .match-arrow { display: none; }

  /* Превью карты в ленте PUBG */
  .match-feed .map-tile-img.map-tile-lg { width: 72px; height: 72px; border-radius: 12px; }

  /* История: аватар меньше */
  .matchlist-avatar { width: 56px; }

  /* Все герои: вертикальная плитка (баннер сверху) */
  main .hero-card { flex-wrap: wrap; padding: .5rem; }
  main .hero-card .hero-avatar { width: 100%; height: auto; margin-bottom: .35rem; }
  main .hero-card-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  main .hero-card-stats { width: 100%; display: flex; justify-content: space-between; margin-left: 0; }

  /* Матч: компактные команды */
  .team-cols .player-row { padding: .25rem .35rem; gap: .4rem; }
  .team-cols .hero-avatar { width: 30px; height: auto; }
  .team-cols .player-row .small { font-size: .68rem; }
  .team-head { font-size: .8rem; margin-bottom: .3rem; }
}

/* ── Портрет телефона ≤575: только микротипографика поверх ≤991 ── */
@media (max-width: 575.98px) {
  .hide-xs { display: none !important; }
  .stat-grid4 { gap: .4rem; }
  .stat-grid4 .stat-card { padding: .75rem .5rem; }
  .stat-grid4 .stat-label { font-size: .68rem; letter-spacing: 0; }
  .stat-grid4 .stat-value { font-size: 1.15rem; }
  .table-dota th, .table-dota td { padding: .3rem .35rem; font-size: .78rem; }
  /* Графики: на узком экране высота меньше ширины для читаемости осей */
  .chart-box { height: 240px; }
}

/* Страховка: аккордеон навбара никогда не виден на десктопе (xl = 1200px) */
@media (min-width: 1200px) {
  #nav.navbar-collapse { display: none !important; }
}

/* ── Адаптация остальных страниц (планшет + телефон) ── */
@media (max-width: 991.98px) {
  /* Крупные превью карт в таблицах — компактнее */
  .table-dota .map-tile-img-lg { width: 56px; height: 56px; border-radius: 10px; }
  .match-kda-big { text-align: left; }
}
@media (max-width: 575.98px) {
  /* Плитки статистики PUBG/DBD: 2 в ряд */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .45rem; }
  .stat-grid .stat-tile { padding: .45rem .5rem; min-width: 0; }
  .stat-grid .stat-tile .stat-value { font-size: 1rem; }
  /* Селект метрики на странице статистики DBD */
  .metric-select { max-width: 100% !important; }
}


/* ── Dota: топ героев по 3 в ряд на планшете и десктопе ── */
@media (min-width: 576px) and (max-width: 991.98px) {
  /* Самые выбираемые: 3 в ряд, Лучший винрейт: 3 в ряд */
  .fav-picks { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .45rem; }
  .fav-best  { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .45rem; }
  /* Вертикальная мини-плитка: баннер сверху, подписи под ним по центру */
  .fav-picks .fav-hero, .fav-best .fav-hero {
    flex-direction: column; align-items: stretch;
    text-align: center; padding: .4rem;
  }
  .fav-picks .favorites-avatar, .fav-best .favorites-avatar {
    width: 100%; flex-shrink: 1; min-width: 0;
  }
  .fav-picks .fav-hero .minw-0 div:first-child,
  .fav-best .fav-hero .minw-0 div:first-child {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem;
  }
  .fav-picks .fav-hero .ms-2, .fav-best .fav-hero .ms-2 {
    margin: .25rem 0 0 0 !important; text-align: center; width: 100%;
    display: flex; justify-content: center; align-items: baseline; gap: .35rem;
  }
}

/* ── Лента «Все матчи»: раскладка по ориентации ── */
/* Ландшафт телефона / планшет: одна строка, результат сразу после текста слева */
@media (min-width: 576px) and (max-width: 991.98px) {
  .match-row { flex-wrap: nowrap; gap: .45rem; padding: .55rem .6rem; }
  .match-main { flex: 1 1 auto; min-width: 0; }
  .match-result { margin-left: .45rem; flex-direction: row; align-items: center;
    gap: .5rem; flex: none; width: auto; max-width: none; text-align: left; white-space: nowrap; }
}
/* Десктоп: «Самые выбираемые» — 3 плитки в ряд (как было) */
@media (min-width: 992px) {
  .fav-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Портрет телефона: результат переносится на вторую строку с отступом под аватар */
@media (max-width: 575.98px) {
  .match-row { flex-wrap: wrap; gap: .45rem; padding: .55rem .6rem; }
  .match-main { flex: 1 1 calc(100% - 78px); min-width: 0; }
  .match-result { margin-left: calc(68px + .45rem); flex-direction: row; align-items: center;
    gap: .5rem; flex: none; width: auto; max-width: none; text-align: left; }
  .match-feed .match-main { flex-basis: calc(100% - 82px); }
  .match-feed .match-result { margin-left: calc(72px + .45rem); }
}

/* ── Плашки Победа/Поражение: единый размер, индикатор слева, надпись справа ── */
.badge-win, .badge-loss {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45em; white-space: nowrap;
}

/* ── Навбар десктопа: одинаковая высота кнопок у иконок и текста ── */
.navbar .navbar-nav .nav-link { line-height: 1.4; }
.navbar .navbar-nav .nav-link i { font-size: 1.1rem; line-height: 1; vertical-align: -0.14em; }

/* ── Виджет новостей: фиксированная высота ~10 строк, остальное — скролл ── */
.news-scroll { max-height: 220px; overflow-y: auto; padding-right: 4px; }
.news-scroll .news-pane + .news-pane { border-top: 1px solid rgba(128,128,128,.15); margin-top: .5rem; padding-top: .5rem; }
.news-scroll::-webkit-scrollbar { width: 6px; }
.news-scroll::-webkit-scrollbar-thumb { background: rgba(128,128,128,.4); border-radius: 3px; }

/* ── Патчноуты внутри виджета новостей ── */
.news-body h1, .news-body h2, .news-body h3, .news-body h4, .news-body h5 {
  font-size: .92rem; margin: .8rem 0 .3rem; color: var(--bs-secondary-color, #8b93a7);
  text-transform: uppercase; letter-spacing: .4px; font-weight: 700;
}
.news-body ul { margin: .2rem 0 .6rem 1.1rem; padding-left: .6rem; }
.news-body li { margin-bottom: .15rem; overflow-wrap: anywhere; }
.news-body p { margin: .35rem 0 0; }
/* таблицы (ротация карт PUBG) */
.news-body table {
  border-collapse: collapse; width: 100%; margin: .45rem 0;
  font-size: .78rem;
}
.news-body th, .news-body td {
  border: 1px solid rgba(128,128,128,.28);
  padding: 3px 7px; text-align: left; overflow-wrap: anywhere;
}
.news-body thead th, .news-body tr:first-child th {
  background: rgba(128,128,128,.14); font-weight: 600;
}
.news-body tbody tr:nth-child(even) td { background: rgba(128,128,128,.06); }
/* блок ротации карт: заголовок + подписи таблиц (контрастный жёлтый) */
.news-body .map-tbl-cap {
  font-size: .98rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: #ffd166;
  margin: .8rem 0 .2rem;
}
.news-body .map-block table { margin-bottom: .35rem; }
/* аккордеон секций патчноутов PUBG */
.news-body details.news-acc { border-top: 1px solid rgba(128,128,128,.18); }
.news-body details.news-acc > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .92rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--bs-secondary-color, #8b93a7); padding: .4rem 0;
}
.news-body details.news-acc > summary::-webkit-details-marker { display: none; }
.news-body details.news-acc > summary::after { content: '▸'; opacity: .7; flex: none; }
.news-body details.news-acc[open] > summary::after { content: '▾'; }
.news-body details.news-acc > summary:hover,
.news-body details.news-acc[open] > summary { color: var(--bs-body-color, #ddd); }
/* шапка виджета новостей: селект патча не должен раздвигать плитку
   (на мобилке длинная опция «Все патчи прочитаны» выталкивала его за край) */
.news-controls { min-width: 0; max-width: 100%; }
#newsSel { min-width: 0; max-width: 100%; }

/* ── Патчноуты: выравнивание и иконки ── */
.news-body, .news-body p, .news-body li, .news-body h5,
.news-body h1, .news-body h2, .news-body h3, .news-body h4 { text-align: left; }
/* аватар героя 16:9 */
img.news-hero {
  width: 44px; height: 25px; object-fit: contain; border-radius: 4px;
  margin-right: 8px; vertical-align: -7px; background: rgba(128,128,128,.15);
}
/* предмет: как в сводке матчей (.item-img), но меньше */
img.news-item {
  width: 40px; height: 28px; object-fit: contain; border-radius: 4px;
  margin-right: 8px; vertical-align: -9px; background: rgba(128,128,128,.15);
}
.patch-abl img.news-ico-sm {
  width: 34px; height: 34px; object-fit: contain; border-radius: 6px;
  margin-right: 7px; vertical-align: -11px; background: rgba(128,128,128,.15);
}
.news-hit {
  outline: 2px solid #ffc107; outline-offset: 1px; border-radius: 4px;
  background: rgba(255,193,7,.18);
}
#newsSearch { max-width: 320px; }

/* ── Кнопки прочтения новостей: зелёный оттенок ── */
.gx-card #newsReadOne, .gx-card #newsReadAll {
  color: #2e9e5b; border-color: #2e9e5b;
}
.gx-card #newsReadOne:hover, .gx-card #newsReadAll:hover,
.gx-card #newsReadOne:focus, .gx-card #newsReadAll:focus {
  background: #2e9e5b; border-color: #2e9e5b; color: #fff;
}
/* текущая неделя в таблицах ротации карт */
.news-body tr.week-now th, .news-body tr.week-now td {
  background: rgba(46,158,91,.16); font-weight: 600;
}
.news-body tr.week-now td:first-child { box-shadow: inset 3px 0 0 #2e9e5b; }

/* Единый размер подзаголовка приветствия на всех трекерах
   (pubg.css перебивает .section-sub — усиливаем селектор) */
div.greet-sub { font-size: .95rem; }
@media (max-width: 991.98px) {
  div.greet-sub { font-size: .8rem; margin-top: .15rem; }
}

/* ── Помощник «?» (аннотация) ── */
.help-tip {
  position: relative;
  display: inline-block;
  color: var(--gx-muted, #8b93a7);
  cursor: help;
  float: right;
  margin-top: .1rem;
}
.help-tip .help-tip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 50;
  top: 100%;
  right: 0;
  margin-top: .4rem;
  width: 300px;
  background: var(--gx-card-bg, #1c1f2b);
  border: 1px solid var(--gx-border, #3a3f4d);
  border-radius: .6rem;
  padding: .7rem .85rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--gx-text, #e6e8ef);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  text-align: left;
  transition: opacity .15s ease;
  pointer-events: none;
  white-space: normal;
}
.help-tip:hover .help-tip-text,
.help-tip:focus .help-tip-text,
.help-tip:focus-within .help-tip-text {
  visibility: visible;
  opacity: 1;
}

/* Мобильные/планшетные плитки избранного: ~50% компактнее (десктоп не трогаем) */
@media (max-width: 991.98px) {
  .fav-picks .fav-hero, .fav-best .fav-hero { padding: .3rem; gap: .3rem; }
  .fav-picks .favorites-avatar, .fav-best .favorites-avatar {
    width: 100px !important; height: auto; align-self: center; flex-shrink: 0;
  }
  .fav-picks .fav-hero .minw-0 div:first-child,
  .fav-best .fav-hero .minw-0 div:first-child { font-size: .74rem; }
  .fav-picks .fav-hero .text-muted2, .fav-best .fav-hero .text-muted2 { font-size: .64rem; }
  .fav-picks .fav-hero .ms-2, .fav-best .fav-hero .ms-2 { font-size: .8rem; }
  .fav-picks .fav-hero .progress, .fav-best .fav-hero .progress { height: 2px; }
}
@media (max-width: 991.98px) {
  main .hero-card-name { display: none !important; }
}