:root {
  --bg: #131314;
  /* "Мутное стекло" — нейтральная серая полупрозрачная заливка + сильное
     размытие фона под ней (тот же приём, что у .btn-glass). Раньше --panel/
     --panel-2/--border были сплошным тёмно-коричневым цветом, теперь это
     алиасы на --glass-* — то есть ВСЕ окошки сайта (карточки, слоты, панели,
     админка) стали стеклянными разом, одной правкой здесь, без переопределений
     по разделам. Если где-то нужен именно непрозрачный тёмный фон (не стекло),
     используйте не --panel, а конкретный цвет. */
  --panel: var(--glass-panel);
  --panel-2: var(--glass-panel-2);
  --border: var(--glass-border);
  --text: #f5ece0;
  --muted: #a3906f;
  --accent: #ffb800;
  --accent-2: #ffd24d;
  --neon-glow: 0 0 12px rgba(255, 184, 0, .55), 0 0 28px rgba(255, 184, 0, .25);
  --neon-glow-soft: 0 0 8px rgba(255, 184, 0, .35);
  --glass-panel: rgba(255, 255, 255, .05);
  --glass-panel-2: rgba(255, 255, 255, .09);
  --glass-border: rgba(255, 255, 255, .14);
  --glass-blur: blur(26px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* [hidden] по умолчанию значит display:none, но это правило браузера, а не
   наше — любое наше правило вида ".что-то { display: flex/inline-flex }"
   (например .steam-profile или a.btn-ghost/.btn-primary) имеет тот же
   приоритет и, будучи в АВТОРСКОЙ таблице стилей, всегда перебивает базовое
   правило браузера [hidden] — элемент с hidden всё равно оставался видимым.
   Отсюда и был баг: пустое окошко профиля/кнопка "Админ" показывались, даже
   когда JS выставлял им hidden. Явно переутверждаем hidden здесь. */
[hidden] { display: none !important; }

/* Скроллбары в стиле сайта — везде: страница целиком и любые внутренние
   overflow-контейнеры (список ставок в Crash, редактор кейса и т.д.).
   Стандартные scrollbar-width/scrollbar-color сюда намеренно НЕ добавляем:
   в Chrome их присутствие ломает сокрытие стрелок-кнопок ниже (кнопки
   продолжают рисоваться даже с display:none на ::-webkit-scrollbar-button,
   просто перекрашиваясь в цвет ползунка) — проверено. Раз весь сайт и так
   тестируется в Chrome/Edge, оставляем только webkit-версию. */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--panel); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-radius: 8px;
  border: 2px solid var(--panel);
}
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }
*::-webkit-scrollbar-corner { background: var(--panel); }
/* Прячем стрелки-кнопки на концах скроллбара — браузер рисует их светлыми
   квадратами со стрелкой, никак не завязанными на тему сайта. Голого
   ::-webkit-scrollbar-button{display:none} недостаточно (в актуальном Chrome
   стрелки всё равно остаются) — нужно явно погасить конкретные состояния
   кнопки, иначе они просто перекрашиваются в цвет ползунка, но не исчезают. */
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:end:increment,
*::-webkit-scrollbar-button:horizontal:start:decrement,
*::-webkit-scrollbar-button:horizontal:end:increment {
  display: none;
  width: 0;
  height: 0;
}

/* Базовый тёмный стиль для ЛЮБОГО текстового/числового поля на сайте — с
   нулевой специфичностью через :where(), поэтому любой более конкретный
   класс (.field input, .target-price-input и т.п.) спокойно переопределяет
   его; но поля, у которых своего стиля вообще нет, больше не остаются
   белыми браузерными по умолчанию. Чекбоксы/радио/т.п. явно исключены —
   у них свой, отдельно стилизованный вид. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="file"], [type="color"]), textarea) {
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
}
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="file"], [type="color"]), textarea)::placeholder {
  color: var(--muted);
}
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="file"], [type="color"]), textarea):focus {
  outline: none;
  border-color: var(--accent);
}
/* Нативные стрелки-спиннеры number-инпута — тоже светлые и не в стиле сайта. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

body {
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--text);
  min-height: 100vh;
  background-color: var(--bg);
}

/* Анимированный фон (bg.js) — на всю страницу, позади всего контента,
   клики сквозь него не ловит. */
#bgCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* grid, а не flex + justify-content:space-between: раньше .nav (Кейсы/Апгрейд/
   Контракт/Crash) держался ровно "чем шире .wallet — тем левее nav", поэтому
   когда цифра баланса меняла ширину (например 1000 -> 999999), кнопки
   навигации заметно съезжали. Средняя auto-колонка грида всегда стоит точно
   по центру между двумя равными 1fr-колонками, независимо от того, что внутри
   левой/правой — тот же приём, что и для колеса апгрейда. */
header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 76px;
  border-bottom: 1px solid var(--border);
  background: rgba(19, 19, 20, 0.8);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 rgba(255, 184, 0, .12), 0 6px 24px -12px rgba(255, 184, 0, .35);
}

.logo {
  justify-self: start;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.logo-vinny { color: #ffb800; text-shadow: 0 0 10px rgba(255, 184, 0, .45); text-transform: uppercase; }
.logo-drop { color: #fff; text-transform: uppercase; }

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-link {
  position: relative;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 19px;
  padding: 8px 16px;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
  transition: color .2s ease;
}
.nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120px 60px at 50% 100%, rgba(240, 165, 0, 0.35), transparent 70%);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .25s ease, transform .25s ease;
  z-index: -1;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
  box-shadow: 0 0 8px var(--accent);
}
.nav-link:hover {
  color: var(--accent-2);
}
.nav-link:hover::before {
  opacity: 1;
  transform: scale(1);
}
.nav-link:hover::after {
  transform: scaleX(1);
}
.nav-link.active {
  color: var(--accent-2);
}
.nav-link.active::after {
  transform: scaleX(1);
}

.wallet {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}
.balance {
  background: var(--panel-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.balance b { color: var(--accent-2); text-shadow: var(--neon-glow-soft); }
.balance:hover { border-color: var(--accent); }

/* Значок игровой валюты ("баночка мёда") — вставляется рядом с любой суммой
   вместо "₽". Размер в em, чтобы совпадать с высотой текста, где бы ни стоял. */
.coin-icon {
  width: 1.15em;
  height: 1.15em;
  min-width: 14px;
  min-height: 14px;
  vertical-align: -0.2em;
  flex-shrink: 0;
}

/* Профиль = кнопка "Инвентарь" (см. index.html) — та же подсветка, что
   раньше была у отдельной #invBtn, плюс курсор и hover как у кликабельных
   div-кнопок сайта (.balance). */
.steam-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--accent);
  padding: 5px 10px 5px 6px;
  border-radius: 10px;
  box-shadow: var(--neon-glow-soft);
  cursor: pointer;
}
.steam-profile:hover { box-shadow: var(--neon-glow); }
.steam-avatar { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; }

/* Выключатель звука — та же панельная кнопка, что .balance, но круглая и
   без текста. .is-muted приглушает иконку, чтобы состояние читалось с ходу. */
.sound-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--panel-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}
.sound-toggle-btn:hover { border-color: var(--accent); }
.sound-toggle-btn.is-muted { color: var(--muted); }
.steam-name { font-size: 13px; font-weight: 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

button, a.btn-ghost, a.btn-primary {
  cursor: pointer;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-family: inherit;
  letter-spacing: 0.5px;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
a.btn-ghost, a.btn-primary {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
button:active, a.btn-ghost:active, a.btn-primary:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #1a0e00;
  padding: 10px 18px;
  box-shadow: 0 0 10px rgba(255, 184, 0, .35);
}
.btn-primary:hover { filter: brightness(1.1); box-shadow: var(--neon-glow); }
.steam-login-btn { white-space: nowrap; }
.steam-icon { vertical-align: -5px; margin-right: 8px; border-radius: 50%; }
.btn-ghost {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 18px;
}
.btn-ghost:hover { border-color: var(--accent); box-shadow: var(--neon-glow-soft); }
.btn-danger {
  background: linear-gradient(180deg, #ff7a7a, #ff5c5c);
  color: #2b0a0a;
  padding: 10px 18px;
  box-shadow: 0 0 10px rgba(255, 92, 92, .35);
}
.btn-danger:hover { filter: brightness(1.1); box-shadow: 0 0 14px rgba(255, 92, 92, .55); }

/* Обводка без заливки — для "глобальных" кнопок нормализации/сброса шансов */
.btn-outline-accent {
  background: transparent;
  color: var(--accent-2);
  border: 1px solid var(--accent);
  padding: 10px 18px;
}
.btn-outline-accent:hover { background: rgba(255, 184, 0, .1); box-shadow: var(--neon-glow-soft); }
.btn-outline-danger {
  background: transparent;
  color: #ff5c5c;
  border: 1px solid #ff5c5c;
  padding: 10px 18px;
}
.btn-outline-danger:hover { background: rgba(255, 92, 92, .1); box-shadow: 0 0 10px rgba(255, 92, 92, .35); }

.btn-icon { vertical-align: -2px; margin-right: 6px; flex-shrink: 0; }
.icon-wrap svg { width: 100%; height: 100%; display: block; }

main { margin: 0 auto; padding: 28px 76px; }

h2 { margin-bottom: 16px; font-size: 20px; }
/* Заголовки-названия разделов — везде одинаковые: крупнее и светло-серые
   вместо обычного тёплого текстового цвета сайта. */
#casesView > h2,
#upgradeView > h2,
#contractView > h2,
#adminView > h2 {
  text-align: center;
  font-size: 30px;
  color: #c8c8c8;
}
.inventory-header h2 { font-size: 30px; color: #c8c8c8; }
.muted { color: var(--muted); font-size: 13px; }

/* Витрина кейсов */
.case-group-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px 16px;
  margin-bottom: 20px;
  position: sticky;
  top: 70px;
  z-index: 5;
  /* было холодным тёмно-синим (rgba(14,17,22,...)) — не в тон остальному
     чёрно-оранжевому неону; теперь прозрачное "стекло" с тёплым оттенком. */
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.12), rgba(19, 19, 20, 0.3));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 184, 0, 0.22);
  border-radius: 16px;
}
/* "Жидкое стекло" (Apple Liquid Glass) — не крашеная кнопка, а настоящее
   выпуклое стекло: сильно прозрачная основа (цвет проступает еле-еле, в
   основном за счёт backdrop-filter), яркое пятно-блик в углу (не полоса на
   всю ширину — так свет отражается от ВЫПУКЛОЙ поверхности), светлая кромка
   и лёгкая тень внутри снизу для объёма. Оттенок остался фирменным
   (оранжевый), просто нанесён гораздо тоньше — как тонировка стекла, а не
   заливка. */
.case-group-nav-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  backdrop-filter: blur(20px) saturate(220%) brightness(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(220%) brightness(1.08);
  color: var(--accent-2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .3);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow:
    0 6px 18px -8px rgba(0, 0, 0, .55),
    inset 0 1px 1px rgba(255, 255, 255, .55),
    inset 0 -10px 14px -10px rgba(0, 0, 0, .45);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
/* Блик — яркое пятно света в верхнем левом углу, тающее по радиусу (как на
   выпуклой линзе), плюс еле заметная общая подсветка сверху. mix-blend-mode
   даёт эффект настоящего отражения, а не белой кляксы поверх цвета. */
.case-group-nav-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(200deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 50%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.case-group-nav-btn:hover {
  filter: brightness(1.1);
  box-shadow:
    0 8px 22px -8px rgba(0, 0, 0, .6),
    inset 0 1px 1px rgba(255, 255, 255, .65),
    inset 0 -10px 14px -10px rgba(0, 0, 0, .45);
}
.case-group-nav-btn:active { transform: scale(.96); }

.case-group { scroll-margin-top: 82px; }
.case-group-title {
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-align: center;
  margin: 2cm 0 1cm;
}

.cases-grid {
  /* flex вместо grid: с grid'ом колонки — общие для всех строк, поэтому
     неполная последняя строка карточек липла к левому краю; у flex-строк
     своя раскладка на каждой линии переноса, и justify-content центрирует
     даже неполный последний ряд. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-bottom: 40px;
}
.case-card {
  /* flex-grow:0 — карточки не растягиваются шире расчётной ширины на
     неполном последнем ряду, а calc-ширина держит ровно 5 в ряд (минус
     зазоры), пока не сработает min-width и ряд не начнёт переноситься раньше. */
  position: relative;
  isolation: isolate; /* свой стек контекста — glow-псевдоэлемент с z-index:-1 не конфликтует с общим фоном сайта (у него тоже z-index:-1) */
  flex: 0 1 calc((100% - 72px) / 5);
  max-width: calc((100% - 72px) / 5);
  min-width: 260px;
  background: none;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
  cursor: pointer;
  transition: transform .15s ease;
}
/* Подсветка при наведении — больше не контур вокруг всей карточки, а мягкое
   пятно света в цвет редкости (--tile-color, из badgeColor; у обычных кейсов —
   дефолтный оранжевый) прямо за картинкой, будто она подсвечена сзади. */
.case-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10px;
  left: -8%;
  right: -8%;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tile-color, var(--accent)) 0%, transparent 68%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.case-card:hover {
  transform: scale(1.06);
}
.case-card:hover::before {
  opacity: .85;
}
.case-emoji {
  /* Вертикальная (не квадратная) рамка — уже, чем высокая, как на референсах:
     картинка кейса занимает почти всю карточку по высоте, а не маленький
     квадратик наверху. */
  font-size: 180px;
  height: 280px;
  width: 78%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Раньше было overflow:hidden — сама рамка-ячейка держит прежний размер
     (280×78%), а картинка внутри теперь на 1см больше и намеренно чуть
     выходит за её границы, а не обрезается по краю. */
  overflow: visible;
}
/* --img-scale — своя для каждого кейса подгонка картинки под карточку
   (задаётся в админке) — применяется поверх общего увеличения на 1см ниже. */
.case-emoji .case-icon-img {
  display: block;
  height: calc(280px + 1cm);
  width: calc(100% + 1cm);
  object-fit: contain;
  margin: 0 auto;
  transform: scale(var(--img-scale, 1));
}
.case-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid var(--badge-ring, var(--accent));
  background: rgba(255, 184, 0, .08);
  color: var(--text);
  box-shadow: 0 0 14px -2px var(--badge-ring, var(--accent));
}
.case-name { font-weight: 800; font-size: 19px; margin-bottom: 6px; }
.case-price { color: var(--accent-2); font-weight: 700; font-size: 16px; }

/* Страница одного кейса */
#backToCases { margin-bottom: 20px; }
.case-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  margin-bottom: 28px;
}
.case-header.is-hidden { display: none; }
.case-header-emoji { font-size: 280px; height: 360px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.case-header-emoji .case-icon-img { display: block; height: 360px; width: 360px; object-fit: contain; margin: 0 auto; transform: scale(var(--img-scale, 1)); }
.case-header-emoji .case-icon-badge { width: 280px; height: 280px; }
.case-header-name { font-weight: 800; font-size: 26px; }

.open-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 28px;
}
.open-controls[hidden] { display: none; }
.qty-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* display:flex выше перебивает встроенное [hidden]{display:none} браузера
   (авторские стили всегда сильнее стилей браузера) — возвращаем скрытие явно. */
.qty-row[hidden] { display: none; }
.open-controls-label { font-size: 13px; color: var(--muted); }
.qty-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.qty-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--panel-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 13px;
}
.qty-btn:hover { border-color: var(--accent); box-shadow: var(--neon-glow-soft); }
.qty-btn.active {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #1a0e00;
  border-color: var(--accent);
  box-shadow: var(--neon-glow);
}
.open-controls .btn-primary { padding: 12px 30px; font-size: 15px; }
.open-controls #openCaseFastBtn {
  margin-left: auto;
  padding: 12px 22px;
  font-size: 15px;
  /* Точечно, не на весь .btn-ghost — этот класс переиспользует и кнопка
     "Продать" внутри каждой карточки инвентаря (см. .inv-item), которая уже
     сама стеклянная; повесить блюр ещё и на кнопку внутри нее — это
     вложенный backdrop-filter на потенциально десятках карточек разом. */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
@media (max-width: 640px) {
  .open-controls .btn-primary { width: 100%; }
  .open-controls #openCaseFastBtn { margin-left: 0; width: 100%; text-align: center; }
}

/* Результат открытия кейса — без окна/оверлея: ячейки выпавших предметов
   появляются прямо на странице, на месте остановившейся рулетки. Закрывается
   только кнопками "Далее"/"Забрать всё" или "Продать". */
.drop-result-inline { margin-bottom: 28px; }
.drop-result-inline h2 { margin-bottom: 16px; text-align: center; }

/* Один выпавший предмет — крупная ячейка (та же карточная стилистика, что и
   у "Возможного дропа" ниже, просто крупнее и с лёгкой анимацией появления) */
.drop-result-single {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 16px 24px;
  background: color-mix(in srgb, var(--tile-color, #444) 26%, var(--panel));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-bottom: 4px solid var(--tile-color, #444);
  border-radius: 14px;
  margin: 0 auto 22px;
  max-width: calc(320px - 3cm);
  animation: drop-cell-in .3s cubic-bezier(0.2, 0.8, 0.3, 1.15) both;
}
.drop-result-single .ic { width: 150px; height: 150px; object-fit: contain; margin: 0 auto 12px; display: block; }
.drop-result-single .nm { font-size: 20px; font-weight: 700; }
.drop-result-single .pr { font-size: 18px; color: var(--accent-2); font-weight: 700; }

/* Несколько предметов (открытие пачкой) — ряд ячеек, у каждой своя кнопка
   продажи. Флекс, а не grid: так неполная последняя строка (например, 2
   ячейки из 5) центрируется сама, а не липнет к левому краю. Каждая ячейка —
   точно того же размера, что и карточка одиночного дропа выше (одинаковые
   padding/картинка/шрифты), просто их может быть несколько в ряд. */
.drop-result-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-bottom: 18px;
}
.drop-result-tile {
  flex: 0 0 calc(320px - 3cm);
  max-width: calc(320px - 3cm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 16px 24px;
  background: color-mix(in srgb, var(--tile-color, #444) 26%, var(--panel));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-bottom: 4px solid var(--tile-color, #444);
  border-radius: 14px;
  text-align: center;
  transition: opacity .2s ease;
  animation: drop-cell-in .25s cubic-bezier(0.2, 0.8, 0.3, 1.15) both;
}
@keyframes drop-cell-in {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}
.drop-result-tile .ic { width: 150px; height: 150px; object-fit: contain; margin: 0 auto 12px; display: block; }
.drop-result-tile .nm { font-size: 20px; font-weight: 700; }
.drop-result-tile .pr { font-size: 18px; color: var(--accent-2); font-weight: 700; margin-bottom: 4px; }
/* margin-top: auto — кнопка прибита к низу плитки, а не идёт сразу за
   названием/ценой: у карточек в одном ряду высота выравнивается по самой
   высокой (flex stretch), но без auto-margin кнопка осталась бы на разной
   высоте от верха, если название у одного предмета переносится на 2 строки,
   а у соседнего нет. */
.drop-result-tile .tile-sell-btn { width: 100%; padding: 12px 26px; font-size: 15px; margin-top: auto; }
.drop-result-tile.is-sold { opacity: .75; }

/* Место кнопки "Продать" после продажи занимает надпись "Продано за N ₽" —
   в плитке она встаёт туда же, где была кнопка; в общем футере (одиночный
   дроп) — рядом с кнопкой "Далее" на месте скрытой кнопки "Продать за N ₽". */
.drop-result-sold-label { font-weight: 800; font-size: 15px; color: var(--accent-2); }
.drop-result-tile .drop-result-sold-label { display: block; width: 100%; padding: 12px 26px; margin-top: auto; }
.drop-result-actions .drop-result-sold-label { padding: 12px 26px; }
/* [hidden] у браузера по умолчанию слабее правил выше (display:block их
   перебивал) — возвращаем скрытие явно, с более высокой специфичностью. */
.drop-result-tile .drop-result-sold-label[hidden] { display: none; }
.drop-result-total { font-size: 15px; color: var(--muted); margin-bottom: 4px; text-align: center; }
.drop-result-total b { color: var(--accent-2); }

.drop-result-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.drop-result-actions .btn-primary, .drop-result-actions .btn-ghost { padding: 12px 26px; font-size: 15px; }
.drop-result-actions button:disabled { opacity: .45; cursor: not-allowed; }

.drop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
/* Скелетон-заглушка, пока картинка предмета/кейса ещё грузится — мерцающий
   прямоугольник вместо пустого места. Класс img-loaded вешает JS (см.
   document.addEventListener("load", ..., true) в app.js) сразу как только
   картинка реально отрисовалась — тогда мерцание убирается. */
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.ic, .case-icon-img {
  background: linear-gradient(100deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
.ic.img-loaded, .case-icon-img.img-loaded {
  background: none;
  animation: none;
}

/* "Жидкое стекло" — полупрозрачный фон в цвет редкости предмета (--tile-color)
   поверх размытия того, что под карточкой, плюс лёгкий тонированный контур. */
.drop-item {
  background: color-mix(in srgb, var(--tile-color, #444) 22%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--tile-color, #444) 50%, transparent);
  border-bottom: 4px solid var(--tile-color, #444);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.drop-item .ic { display: block; height: 60px; width: 100%; object-fit: contain; margin: 0 auto; }
.drop-item .nm { font-size: 12px; margin: 6px 0; }
.drop-item .pr { font-size: 12px; color: var(--accent-2); font-weight: 700; }

/* Рулетка */
.roller-wrap { display: none; margin-bottom: 40px; }
.roller-wrap.active { display: block; }
.roller-title { display: flex; justify-content: center; align-items: center; margin-bottom: 12px; }
.roller-row { display: flex; flex-direction: column; gap: 14px; }
.roller-subrow { display: flex; justify-content: center; gap: 14px; }
.roller-subrow .roller { flex: 1 1 auto; min-width: 0; }
/* Ширина ленты зависит от того, сколько лент реально в этом ряду (1–3),
   а не всегда делится на 3 — иначе при открытии одного кейса лента была бы
   втрое уже, чем нужно. */
.roller-subrow[data-count="1"] .roller { max-width: calc((100% - 28px) / 3); }
.roller-subrow[data-count="2"] .roller { max-width: calc((100% - 14px) / 2); }
.roller-subrow[data-count="3"] .roller { max-width: calc((100% - 28px) / 3); }
/* Широкая на весь экран лента — только когда открывается ровно один кейс */
.roller-row.single .roller-subrow[data-count="1"] .roller { max-width: 100%; }
.roller {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #0b0e13;
  height: 240px;
}
/* Центральная метка — не полоса на всю высоту, а две стрелки-треугольника,
   сверху и снизу, указывающие друг на друга на позицию выигрышной плитки. */
.roller::before,
.roller::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 0 6px var(--accent));
}
.roller::before {
  top: 0;
  border-top: 13px solid var(--accent);
}
.roller::after {
  bottom: 0;
  border-bottom: 13px solid var(--accent);
}
.strip {
  display: flex;
  height: 100%;
  align-items: center;
  will-change: transform;
}
.tile {
  flex: 0 0 240px;
  height: 180px;
  margin: 0 5px;
  border-radius: 12px;
  /* Тот же тон в цвет редкости, что и у окошка предмета в инвентаре/дропе
     (.inv-item и т.п.) — но без backdrop-filter: лента едет непрерывной
     анимацией (transform), блюр на каждой из полутора десятков плиток разом
     во время прокрутки будет подтормаживать. */
  background: color-mix(in srgb, var(--tile-color, #444) 26%, var(--panel));
  border-bottom: 4px solid var(--tile-color, #444);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
}
.tile .ic { display: block; height: 110px; width: 100%; object-fit: contain; margin: 0 auto; }
.tile .nm { font-size: 12px; margin-top: 10px; color: var(--text); line-height: 1.3; }
.tile .pr { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Инвентарь */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.inv-item {
  display: flex;
  flex-direction: column;
  /* Стекло, подмешанное в цвет редкости предмета (тот же приём, что у
     заполненной ячейки контракта — .contract-hex-slot.is-filled polygon),
     а не нейтрально-серое: окошко предмета должно читаться в цвет его
     редкости, а не одинаково для всех. */
  background: color-mix(in srgb, var(--tile-color, #444) 26%, var(--panel));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-bottom: 4px solid var(--tile-color, #444);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.inv-item .ic { display: block; height: 60px; width: 100%; object-fit: contain; margin: 0 auto; }
.inv-item .nm { font-size: 12px; margin: 6px 0; }
.inv-item .pr { font-size: 12px; color: var(--accent-2); font-weight: 700; }
/* margin-top:auto прижимает кнопку к низу карточки независимо от того, в
   сколько строк перенеслось название — иначе кнопки "Продать" в одном ряду
   инвентаря оказывались на разной высоте (та же правка, что и для дропа из кейса). */
.inv-item button { margin-top: auto; font-size: 12px; padding: 6px 10px; width: 100%; }
/* Кнопки "Продать"/"Вывести" в один ряд — .inv-item .inv-item-actions button
   явно перебивает .inv-item button выше (иначе одинаковая специфичность
   зависела бы от порядка правил в файле). */
.inv-item-actions { display: flex; gap: 6px; margin-top: auto; }
.inv-item .inv-item-actions button { width: auto; flex: 1 1 0; min-width: 0; margin-top: 0; padding: 6px 4px; }
.inv-withdraw-btn:disabled { opacity: .45; cursor: not-allowed; }

.empty { color: var(--muted); padding: 20px 0; }

.inventory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.inventory-header h2 { margin-bottom: 0; }
.inventory-header-actions { display: flex; align-items: center; gap: 10px; }

/* Карточка профиля наверху "Инвентаря" — 2 строки, 2 колонки. Grid, а не
   flex-wrap (как было раньше): нужно, чтобы правая колонка (рефкод/промокод)
   была СТРОГО одной ширины в обеих строках — grid считает ширину колонки
   один раз на весь контейнер, а не отдельно на каждую "строку", как было бы
   при двух независимых flex-рядах. Левая колонка первой строки — identity
   (аватар/ник/трейд-линк/баланс), второй — .profile-row-group (три мелкие
   карточки статистики внутри, сами по себе flex). */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 380px);
  gap: 12px;
  margin-bottom: 20px;
}
.profile-cell-identity { grid-column: 1; grid-row: 1; }
.profile-cell-referral { grid-column: 2; grid-row: 1; }
.profile-row-group { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 12px; }
.profile-cell-promo { grid-column: 2; grid-row: 2; }
@media (max-width: 720px) {
  /* На узком экране колонки друг под другом не помещаются читаемо —
     схлопываем в одну колонку, все ячейки идут одна под другой по DOM-порядку. */
  .profile-grid { grid-template-columns: 1fr; }
  .profile-cell-identity, .profile-cell-referral, .profile-row-group, .profile-cell-promo { grid-column: 1; }
  .profile-cell-identity { grid-row: 1; }
  .profile-cell-referral { grid-row: 2; }
  .profile-row-group { grid-row: 3; flex-direction: column; }
  .profile-cell-promo { grid-row: 4; }
}
.profile-cell {
  background: var(--glass-panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 16px;
}
.profile-cell-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
/* Колонкой вниз: аватар+ник+баланс (шапка), трейд-линк. Ширину задаёт
   грид-колонка (.profile-grid). position:relative — точка отсчёта для
   абсолютной кнопки "Выйти" в правом верхнем углу (см. .profile-logout-btn). */
.profile-cell-identity {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Немного места справа зарезервировано под кнопку "Выйти" (2см + отступ от
   края), чтобы ник/баланс не заезжали под неё на неширокой карточке. */
.profile-identity-header { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: calc(3cm + 26px); }
.profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--accent);
  box-shadow: var(--neon-glow-soft);
  flex-shrink: 0;
}
/* Ник обрезается многоточием, а не переносится на вторую строку, и не
   растягивается на всю ширину (flex:1 отдал бы весь остаток ему, отодвинув
   баланс далеко вправо) — баланс должен стоять сразу ВПЛОТНУЮ к нику. */
.profile-name {
  flex: 0 1 auto;
  max-width: 200px;
  font-size: 15px;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Баланс рядом с ником — тот же "чиповый" стиль, что у баланса в шапке сайта
   (.balance), только компактнее и внутри карточки профиля. */
.profile-identity-balance {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
}
.profile-identity-balance-label { color: var(--muted); font-size: 12px; }
.profile-tradelink-input {
  width: 8cm;
  max-width: 100%;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 12px;
  font-family: inherit;
}
.profile-tradelink-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--neon-glow-soft); }
/* Вынесена из потока в правый верхний угол карточки (была растянута на всю
   ширину внизу, под трейд-линком) — фиксированная ширина 3см. Снова
   стеклянная — тот же backdrop-blur, что у карточек (.profile-cell), просто
   с красным оттенком фона/рамки/текста вместо нейтрального, как у
   разрушающего/выходного действия (единственная красная кнопка на сайте). */
.profile-logout-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 3cm;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  font-size: 12px;
  background: rgba(239, 68, 68, .16);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(239, 68, 68, .55);
  color: #ff8080;
}
.profile-logout-btn:hover { background: rgba(239, 68, 68, .28); border-color: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, .45); }
.profile-cell-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--accent-2);
  text-shadow: var(--neon-glow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* "+" пополнения прямо у баланса — тот же переход на /deposit, что и по
   клику на баланс в шапке (см. $("balanceBtn") в app.js), просто ближе к
   месту, где на баланс и так уже смотрят. */
.profile-deposit-btn {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #1a0e00;
  border: none;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255, 184, 0, .35);
}
.profile-deposit-btn:hover { filter: brightness(1.1); box-shadow: var(--neon-glow-soft); }
/* Карточка растягивается по высоте до соседей (выигрыш/любимый кейс), внутри
   свободно места намного больше, чем нужно списку — поэтому сам список
   flex:1 и центрируется в оставшемся пространстве по обеим осям, а не
   прилипает к подписи сверху. Подпись ("Активность") при этом не в потоке
   этого flex-column, а отдельным элементом сверху — см. .profile-cell-activity. */
.profile-cell-activity { display: flex; flex-direction: column; }
/* Три группы в ряд по горизонтали, а внутри каждой — крупная иконка сверху,
   число под ней (было наоборот: мелкая иконка и число рядом в одну строку). */
.profile-activity-list {
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 22px;
  margin-top: 10px;
}
.profile-activity-row { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Без рамки-квадрата вокруг значка — просто иконка нужного цвета над числом. */
.profile-activity-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
.profile-activity-icon svg { width: 28px; height: 28px; }
.profile-activity-value { font-weight: 800; color: var(--accent-2); text-shadow: var(--neon-glow-soft); }
/* Фиксированная ширина, без align-self — .profile-row-group растягивает все
   карточки на одинаковую высоту, стоят вплотную друг к другу. Активность —
   та же ширина, что у "Самого большого выигрыша" (раньше была шире, 7см). */
.profile-cell-activity, .profile-cell-biggest-win, .profile-cell-favorite, .profile-cell-personal-referral, .profile-cell-personal-referral-stats { flex: 0 0 5cm; }
.profile-cell-biggest-win .profile-cell-label, .profile-cell-favorite .profile-cell-label { margin-bottom: 10px; }
.profile-biggest-win-item { padding: 10px; background: var(--glass-panel-2); }
.profile-biggest-win-item .ic { height: 44px; }
/* Название в одну строку принудительно (обрезаем многоточием) — иначе у
   "Самого большого выигрыша" и "Любимого кейса" была разная высота плитки:
   выигрыш обычно называется коротко и в одну строку, а название кейса
   (или очень длинное название предмета) переносилось на вторую строку и
   делало ровно эту плитку заметно выше соседней. */
.profile-biggest-win-item .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "Ваш реферальный код" — подпись + значок "?" в одну строку, сам код кнопкой
   (не инпутом — только просмотр/копирование, см. .profile-personal-referral-code). */
.profile-cell-personal-referral { display: flex; flex-direction: column; }
/* align-items:flex-start, а не center — подпись здесь двухстрочная (узкая
   карточка 5см), центр по всей высоте увёл бы "?" в межстрочный зазор. */
.profile-cell-label-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.profile-cell-label-row .profile-cell-label { margin-bottom: 0; }
.profile-cell-label-row .profile-info { margin-top: 1px; }
.profile-info { position: relative; display: flex; }
.profile-info-btn {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
  cursor: help;
}
.profile-info-btn:hover, .profile-info-btn:focus-visible { color: var(--accent); border-color: var(--accent); }
/* Тултип — своя стеклянная карточка (не нативный title у браузера), скрыта по
   умолчанию через visibility+opacity (а не display), чтобы переход был плавным
   и чтобы наведение на сам тултип (не только на "?") не закрывало его раньше
   времени. Прижата к правому краю (right:0), а не центрирована — иначе на
   узкой карточке вылезала бы за левый край .profile-grid. */
.profile-info-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  z-index: 5;
  background: var(--glass-panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.profile-info:hover .profile-info-tooltip,
.profile-info-btn:focus-visible + .profile-info-tooltip {
  visibility: visible;
  opacity: 1;
}
/* Сам код — кнопка, не инпут: нельзя ничего напечатать, можно только нажать
   и скопировать (см. copyPersonalReferralCode в app.js). flex:1 + центровка,
   как у остальных карточек второй строки — код по центру, а не прилипает
   к подписи сверху. */
.profile-personal-referral-code {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #0b0e13;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--accent-2);
  text-shadow: var(--neon-glow-soft);
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .12em;
  cursor: pointer;
}
.profile-personal-referral-code:hover { border-color: var(--accent); box-shadow: var(--neon-glow-soft); }
.profile-personal-referral-hint { font-size: 12px; color: #3ecf6a; text-align: center; margin-top: 6px; }
/* .profile-row-group переключается на flex-direction:column (см. медиа-выше)
   — flex:0 0 7cm/5cm у детей стал бы ВЫСОТОЙ, а не шириной (лишняя пустота
   под активностью), поэтому здесь, ПОСЛЕ базовых правил по порядку в файле
   (иначе они и победят при равной специфичности), сбрасываем базис на auto. */
@media (max-width: 720px) {
  .profile-cell-activity, .profile-cell-biggest-win, .profile-cell-favorite, .profile-cell-personal-referral, .profile-cell-personal-referral-stats { flex: 0 0 auto; }
}

/* Статистика по коду (личному или, у медиа, выданному админом — см.
   renderPersonalReferralCard в app.js) — подпись ("Статистика кода") держим
   сверху отдельно (как у активности/выигрыша/кейса), а сами строки
   "подпись/число" — во flex:1 body, центрированном в оставшемся пространстве
   по вертикали, а не прилипшем к подписи. Кнопка "Получить вознаграждение"
   (только у медиа, см. .profile-referral-claim-btn ниже) — в этом же body. */
.profile-cell-personal-referral-stats { display: flex; flex-direction: column; }
.profile-personal-referral-stats-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.profile-personal-referral-stats-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.profile-personal-referral-stats-row span { color: var(--muted); }
.profile-personal-referral-stats-row b { color: var(--accent-2); text-shadow: var(--neon-glow-soft); }

/* Реферальный код / промокод — правая колонка грида (.profile-grid), ширину
   задаёт сам грид (minmax(260px, 380px)), одинаковую в обеих строках. */
/* Обе карточки растягиваются по высоте до соседей (рефкод — до активности,
   промокод — до выигрыша/кейса и т.п.), поэтому подпись держим сверху
   отдельно, а сам блок с полем ввода — flex:1, центрированный в оставшемся
   пространстве по вертикали, вместо того чтобы прилипать к подписи. */
.profile-cell-referral, .profile-cell-promo { display: flex; flex-direction: column; }
#referralEnterBlock, .profile-promo-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profile-referral-enter-row, .profile-promo-enter-row { display: flex; gap: 8px; }
.profile-referral-enter-row input, .profile-promo-enter-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 1.5cm;
  box-sizing: border-box;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 0 12px;
  font-size: 13px;
  font-family: inherit;
}
.profile-referral-enter-row input:focus, .profile-promo-enter-row input:focus { outline: none; border-color: var(--accent); box-shadow: var(--neon-glow-soft); }
/* height:auto — стрейчится по флексу до высоты соседнего инпута (1.5см,
   выше), но текст внутри кнопки центрируем явно, а не полагаемся на
   дефолтное поведение <button>. */
.profile-referral-enter-row .btn-primary, .profile-promo-enter-row .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font-size: 13px;
  white-space: nowrap;
}
.profile-referral-hint, .profile-promo-hint { font-size: 12px; color: var(--muted); margin-top: 8px; }
.profile-promo-hint.is-error { color: #ff5c5c; }
.profile-promo-hint.is-ok { color: #3ecf6a; }
.profile-referral-claim-btn { width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 6px; padding: 9px 14px; font-size: 13px; }
.profile-referral-claim-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Брейкпоинт для .profile-grid — см. @media (max-width: 720px) выше, рядом
   с самим объявлением грида. */

/* Апгрейд */
/* grid, а не flex: у двух боковых колонок фикс. равная ширина (1fr/1fr),
   так что колесо посередине (auto-колонка) не съезжает, даже когда слева и
   справа выбрано разное число предметов (и слоты у них занимают разную
   ширину) — при flex с justify-content:center колесо смещалось бы вслед за
   тем, какая сторона "тяжелее". */
.upgrade-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  /* верхний отступ увеличен: указатель колеса торчит выше самого круга
     (отрицательный margin-top у .upgrade-wheel-pointer), и при маленьком
     отступе он наезжал на заголовок "Апгрейд" */
  margin: 44px 0 28px;
}
.upgrade-col-title { font-size: 13px; color: var(--muted); margin-bottom: 8px; text-align: center; }
.upgrade-col-total {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-2);
  text-shadow: 0 0 10px rgba(255, 184, 0, .65);
  text-align: center;
  margin-top: 8px;
  min-height: 16px;
}
/* Слоты с выбранным оружием — вертикальные (уже, но выше, а не наоборот, как
   было раньше при 220×150): база "перевёрнута" (150 по ширине, 220 по высоте)
   плюс запрошенная прибавка (+1см ширина, +2см высота). При нескольких
   предметах (до 3 своих / до 2 желаемых) просто встают в ряд, а не сжимаются.
   Размер задаётся только здесь (а не в базовом .upgrade-slot), т.к. этот
   класс переиспользует и Crush для одиночного слота ставки, и Контракт для
   слота результата — у них должны остаться свои прежние пропорции. */
.upgrade-slots-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.upgrade-slots-row .upgrade-slot { width: calc(150px + 2cm); height: calc(220px + 1cm); flex: 0 0 auto; }
.upgrade-slot {
  position: relative;
  height: 150px;
  border: 2px dashed var(--glass-border);
  border-radius: 14px;
  background: var(--glass-panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  transition: border-color .2s ease;
}
.upgrade-slot[style*="--tile-color"] {
  border: 1px solid var(--border);
  border-bottom: 4px solid var(--tile-color, #444);
}
.upgrade-slot .ic { display: block; height: 64px; width: 100%; object-fit: contain; margin: 0 auto; }
/* Картинка оружия в заполненных ячейках слева/справа от колеса апгрейда —
   крупнее, под увеличенный размер самой ячейки (см. .upgrade-slots-row
   .upgrade-slot выше). Не трогаем базовый .upgrade-slot .ic — его использует
   и слот ставки в Crush, и результат в Контракте, у них свой размер ячейки. */
.upgrade-slots-row .upgrade-slot .ic { height: 140px; }
.upgrade-slot .nm { font-size: 13px; margin-top: 8px; }
.upgrade-slot .pr { font-size: 12px; color: var(--accent-2); margin-top: 4px; font-weight: 700; }
.upgrade-slot-placeholder { color: var(--muted); font-size: 12px; }

/* Заполненная ячейка кликабельна — убирает предмет из апгрейда */
.upgrade-slot-removable { cursor: pointer; }
.upgrade-slot-removable:hover { border-color: #eb4b4b; }
.upgrade-slot-removable:hover::after {
  content: "Убрать ×";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10px;
  font-weight: 800;
  color: #eb4b4b;
}

.upgrade-chance-wrap { flex-shrink: 0; }

.upgrade-wheel {
  position: relative;
  width: calc(220px + 0.75cm);
  height: calc(220px + 0.75cm);
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #14100a, #0a0806 72%);
  border: 1px solid var(--border);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .6), var(--neon-glow-soft);
}
/* --win-deg типизирован через @property как <angle> специально для того,
   чтобы браузер мог его плавно анимировать transition'ом (обычный `background`
   с conic-gradient() так не интерполируется — только скачком). */
@property --win-deg {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.upgrade-wheel-ring {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 83%, transparent 84%);
          mask: radial-gradient(circle, transparent 60%, #000 61%, #000 83%, transparent 84%);
  background: conic-gradient(from 0deg, var(--accent-2) 0deg var(--win-deg), rgba(255, 255, 255, .14) var(--win-deg) 360deg);
  transition: --win-deg 1s ease;
}
.upgrade-wheel-pointer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 60%;
  margin-left: -2px;
  margin-top: -60%;
  transform-origin: 50% 100%;
  transform: rotate(0deg);
  pointer-events: none;
}
.upgrade-wheel-pointer::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 13px solid var(--accent-2);
  filter: drop-shadow(0 0 6px var(--accent));
}
.upgrade-wheel-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.upgrade-wheel-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.upgrade-wheel-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  text-shadow: 0 0 16px rgba(255, 184, 0, .4);
}

.upgrade-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 40px; }
#upgradeBtn, #upgradeAuthBtn { padding: 12px 32px; font-size: 15px; }
#upgradeBtn:disabled { opacity: .45; cursor: not-allowed; }
.upgrade-fast-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  flex: 0 0 auto;
}
.upgrade-fast-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Молния — переключатель режима (не запускает апгрейд сама), подсветка
   сигнализирует, что "Апгрейднуть" сейчас сработает в быстром режиме. */
.upgrade-fast-btn.active {
  background: rgba(255, 184, 0, .18);
  border-color: var(--accent);
  color: var(--accent-2);
  box-shadow: var(--neon-glow);
}

.upgrade-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 0;
  align-items: start;
}
.upgrade-picker h2 { margin-bottom: 16px; }
.upgrade-source-controls { margin-bottom: 12px; }
@media (max-width: 720px) {
  .upgrade-picker { grid-template-columns: 1fr; }
}
.pick-item { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.pick-item:hover { transform: translateY(-2px); border-color: var(--accent); }
.pick-item.selected { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2), 0 0 16px rgba(255,184,0,.4); }

.upgrade-target-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
#targetMultPicker { flex: 1; }
.target-price-input {
  width: 90px;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
}
.target-price-input:hover { border-color: var(--accent); }
.target-price-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--neon-glow-soft); }
.target-price-input::placeholder { color: var(--muted); }
/* Убираем нативные стрелки number-инпута — выбиваются из дизайна сайта */
.target-price-input::-webkit-outer-spin-button,
.target-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.target-price-input[type="number"] { -moz-appearance: textfield; }
#targetSortBtn { white-space: nowrap; padding: 9px 12px; font-size: 13px; margin-left: auto; }
.target-name-input {
  /* Раньше поле росло (flex-grow:1) и отжимало кнопки "Желаемый икс" на вторую
     строку. Ширины должно хватать ровно на плейсхолдер "Поиск по названию..."
     без обрезки — компенсируем более узкими "Цена от" и кнопкой сортировки рядом. */
  flex: 0 1 175px;
  min-width: 150px;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 12px;
}
.target-name-input:hover { border-color: var(--accent); }
.target-name-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--neon-glow-soft); }
.target-name-input::placeholder { color: var(--muted); }

/* Контракт — 10 шестиугольных ячеек (#1-10) по кругу вокруг центральной
   карточки, без общей рамки/подложки — сам фон страницы (в т.ч. соты из
   bg.js) и есть фон этого блока. Каждая ячейка — SVG-полигон (даёт чёткую
   заливку+обводку самой формы) плюс обычный div поверх для картинки/номера.
   Раскладка по кругу — тот же приём, что и раньше у .contract-circle-item:
   поворот на угол, отступ по (уже повёрнутой) оси на радиус, поворот назад,
   чтобы сама карточка осталась "прямой". */
.contract-hex-layout {
  position: relative;
  width: 700px;
  height: 700px;
  margin: 0 auto 28px;
}
/* Размытие фона под шестиугольником — отдельным ::before, а не прямо на
   <svg>: у SVG есть свой filter: drop-shadow для подсветки редкости
   (.is-filled svg ниже), который должен выходить ЗА пределы фигуры (overflow:
   visible), а backdrop-filter, наоборот, надо жёстко обрезать ПО фигуре
   (clip-path), иначе размылся бы весь прямоугольный бокс ячейки, а не только
   шестиугольник. Два разных требования к границе — поэтому два слоя.
   Полигон clip-path повторяет CONTRACT_HEX_POLYGON из app.js (проценты — то
   же самое "50,2 96,27 96,88 50,113 4,88 4,27" в 100×115, переведённое в %). */
.contract-hex-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 1.74%, 96% 23.48%, 96% 76.52%, 50% 98.26%, 4% 76.52%, 4% 23.48%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  pointer-events: none;
}
.contract-hex-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(72px + 2cm);
  height: calc(82px + 2cm);
  transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(-260px) rotate(calc(-1 * var(--angle, 0deg)));
  transition: opacity .3s ease, filter .3s ease, transform .3s ease;
}
.contract-hex-slot.is-filled { cursor: pointer; }
.contract-hex-slot.is-filled:hover {
  transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(-260px) rotate(calc(-1 * var(--angle, 0deg))) scale(1.18);
  z-index: 3;
}
.contract-hex-slot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: filter .25s ease; }
.contract-hex-slot polygon {
  fill: var(--glass-panel-2);
  stroke: var(--glass-border);
  stroke-width: 1.2;
  transition: fill .25s ease, stroke .25s ease, opacity .25s ease;
}
/* Заливка и подсветка в цвет редкости — тот же приём, что у "Возможного
   дропа" кейса (.drop-item): полупрозрачный tile-color поверх фона плюс
   свечение вокруг самой формы (drop-shadow, а не box-shadow — он идёт по
   контуру фигуры, а не по прямоугольнику вокруг неё). */
.contract-hex-slot.is-filled polygon {
  fill: color-mix(in srgb, var(--tile-color, #444) 22%, var(--panel-2));
  stroke: color-mix(in srgb, var(--tile-color, #444) 60%, transparent);
}
.contract-hex-slot.is-filled svg {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tile-color, #444) 65%, transparent));
}
.contract-hex-slot-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  transition: opacity .25s ease, filter .25s ease;
}
.contract-hex-slot-num { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.contract-hex-slot-content img { width: 100%; height: 100%; object-fit: contain; }
.contract-hex-slot.is-spent polygon { fill: var(--glass-panel); stroke: var(--glass-border); opacity: .5; }
.contract-hex-slot.is-spent svg { filter: none; }
.contract-hex-slot.is-spent .contract-hex-slot-content { opacity: .3; filter: grayscale(1); }
.contract-hex-slot.is-spent {
  transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(-260px) rotate(calc(-1 * var(--angle, 0deg))) scale(.85);
}

.contract-hex-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 190px;
  min-height: 220px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 10px;
}
.contract-hex-center-icon { width: 38px; height: 38px; color: var(--accent); margin-bottom: 6px; }
.contract-hex-center-count { color: var(--text); font-size: 14px; }
.contract-hex-center-count b { color: var(--accent-2); }
.contract-hex-center-sum {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent-2);
  text-shadow: var(--neon-glow-soft);
  display: flex;
  align-items: center;
  gap: 4px;
}
.contract-hex-center-hint { color: var(--muted); font-size: 12px; margin: 2px 0 6px; }
@media (max-width: 640px) {
  .contract-hex-layout { width: 320px; height: 320px; }
  .contract-hex-slot {
    width: calc(48px + 1cm);
    height: calc(56px + 1cm);
    transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(-115px) rotate(calc(-1 * var(--angle, 0deg)));
  }
  .contract-hex-slot.is-spent {
    transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(-115px) rotate(calc(-1 * var(--angle, 0deg))) scale(.85);
  }
  .contract-hex-slot.is-filled:hover {
    transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(-115px) rotate(calc(-1 * var(--angle, 0deg))) scale(1.18);
  }
  .contract-hex-center { width: 150px; min-height: 180px; }
}
#contractBtn:disabled { opacity: .45; cursor: not-allowed; }

.contract-inv-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.contract-inv-grid { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1000px) {
  .contract-inv-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .contract-inv-grid { grid-template-columns: repeat(2, 1fr); }
}


/* Crush — та же чёрно-оранжевая неоновая тема, что и на остальном сайте */
#crushView {
  --crush-bg: #0a0603;
  --crush-panel: var(--glass-panel);
  --crush-panel-2: var(--glass-panel-2);
  --crush-border: var(--glass-border);
  --crush-accent: var(--accent);
  --crush-accent-2: var(--accent-2);
  --crush-muted: var(--muted);
  --crush-red: #ef5b5b;
  --crush-green: #4ecb8f;
}

.crush2-layout {
  display: grid;
  /* 1.7fr/1fr давало ~730/430px при max-width: 1180px. Окно краша шире,
     окно ставки уже — на 2см (~76px) в каждую сторону при этой ширине;
     ratio 2.27:1 вместо 1.7:1 даёт именно такой сдвиг. Нижняя граница
     ставки тоже сдвинута на 2см, иначе на промежуточных ширинах (900–1180px)
     панель просто продолжала бы упираться в старый минимум. */
  grid-template-columns: minmax(0, 2.27fr) minmax(calc(320px - 2cm), 1fr);
  gap: 20px;
  align-items: start;
  /* Раньше сетка растягивалась на всю ширину main (минус его обычные 76px)
     — на широком экране график получался огромным. Ограничиваем и центрируем,
     чтобы слева/справа появились большие поля, а сам экранчик с иксами сжался. */
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .crush2-layout { grid-template-columns: 1fr; }
}

.auto-cashout-row { margin-bottom: 14px; }

.crush-history {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
  margin-bottom: 16px;
  min-height: 30px;
  /* Одна строка — то, что не влезло, обрезается по ширине контейнера, а
     маска плавно гасит правый край в прозрачность вместо резкого среза. */
  mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
}
.crush-chip {
  flex: none;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  background: var(--crush-panel-2);
  border: 1px solid var(--crush-border);
}
.crush-chip.t1 { color: var(--crush-red); border-color: rgba(239, 91, 91, .4); }
.crush-chip.t2 { color: #ff8c3c; border-color: rgba(255, 140, 60, .45); }
.crush-chip.t3 { color: var(--accent); border-color: rgba(255, 184, 0, .5); }
.crush-chip.t4 { color: var(--accent-2); border-color: rgba(255, 210, 77, .55); }
.crush-chip.t5 {
  color: #ffe066;
  border-color: #ffe066;
  box-shadow: 0 0 10px rgba(255, 224, 102, .55);
}

.crush-board {
  position: relative;
  border: 1px solid var(--crush-border);
  border-radius: 16px;
  background: radial-gradient(900px 400px at 50% -20%, #241207, var(--crush-bg));
  overflow: hidden;
  margin-bottom: 18px;
  height: 340px;
}
.crush2-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  pointer-events: none;
}
#crushCanvas { position: relative; width: 100%; height: 100%; display: block; }

/* Бомба C4 вместо точки на конце кривой — следует за ней (левый/верхний отступ
   выставляются в JS в тех же координатах, что и последняя точка на canvas'е). */
.crush-bomb {
  --bomb-color: #ffcb47; /* перезаписывается из JS в тон текущего цвета кривой */
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 0 6px var(--bomb-color));
}
.crush-bomb.hidden { display: none; }
.crush-bomb svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
.crush-bomb-light { animation: crush-bomb-blink .7s ease-in-out infinite; }
@keyframes crush-bomb-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }

.crush-bomb-blast {
  position: absolute;
  inset: -42px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d6 0%, var(--crush-accent-2) 30%, var(--crush-red) 60%, transparent 72%);
  opacity: 0;
  transform: scale(.15);
  pointer-events: none;
}
.crush-bomb.crashed svg { animation: crush-bomb-shatter .5s ease-in forwards; }
.crush-bomb.crashed .crush-bomb-blast { animation: crush-blast .6s ease-out forwards; }

@keyframes crush-bomb-shatter {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  20% { transform: scale(1.2) rotate(-6deg); opacity: 1; }
  45% { transform: scale(.9) rotate(5deg); opacity: 1; }
  70% { transform: scale(1.05) rotate(-3deg); opacity: .8; }
  100% { transform: scale(.3) rotate(4deg); opacity: 0; }
}
@keyframes crush-blast {
  0% { opacity: 0; transform: scale(.15); }
  35% { opacity: 1; transform: scale(.8); }
  100% { opacity: 0; transform: scale(1.7); }
}

.crush2-countdown-block {
  position: absolute;
  top: 22px; left: 26px;
  pointer-events: none;
}
.crush-board:not(.waiting) .crush2-countdown-block { display: none; }
.crush2-countdown { font-size: 40px; font-weight: 800; color: var(--text); }
.crush2-countdown-label { font-size: 13px; color: var(--crush-muted); margin-top: 2px; }

/* Число раунда и сообщение о крахе — один блок вместо двух отдельно
   позиционированных элементов, оба центрированы одним translate. */
.crush-result {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.crush-board.waiting .crush-result { display: none; }
.crush-multiplier {
  font-size: 56px;
  font-weight: 800;
  color: var(--text);
  text-shadow: 0 0 20px rgba(0, 0, 0, .6);
  transition: color .2s ease;
}
.crush-multiplier.crashed { color: var(--crush-red); }
.crush-multiplier.cashed { color: var(--crush-green); }
.crush-status {
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--crush-red);
  background: rgba(11, 14, 19, .7);
  padding: 6px 16px;
  border-radius: 20px;
  white-space: nowrap;
}

.crush2-side-panel {
  position: absolute;
  top: 18px; right: 18px;
  bottom: 18px;
  width: 110px;
  background: rgba(10, 6, 3, .75);
  border: 1px solid var(--crush-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  backdrop-filter: blur(4px);
}
.crush2-side-stat { text-align: center; }
.crush2-side-value { font-size: 15px; font-weight: 800; color: var(--text); }
.crush2-side-value.accent { color: var(--crush-accent-2); }
.crush2-side-label { font-size: 11px; color: var(--crush-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }
.crush2-side-divider { width: 60%; height: 1px; background: var(--crush-border); }

.crush2-stats-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  background: var(--crush-panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--crush-border);
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--crush-muted);
}
.crush2-stat { display: flex; align-items: center; gap: 6px; }
.crush2-stat b { color: var(--text); }
.crush2-fair {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--crush-panel-2);
  border: 1px solid var(--crush-border);
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: "Consolas", monospace;
}
.crush2-fair-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--crush-green);
  box-shadow: 0 0 6px var(--crush-green);
}
.crush2-copy-btn {
  background: transparent;
  border: none;
  color: var(--crush-muted);
  padding: 2px;
  font-size: 13px;
}
.crush2-copy-btn:hover { color: var(--crush-accent-2); }

.crush2-players {
  background: var(--crush-panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--crush-border);
  border-radius: 12px;
  overflow: hidden;
}
.crush2-players-toggle {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.crush2-players-list { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.crush2-player-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center;
  gap: 10px;
  background: var(--crush-panel-2);
  border: 1px solid var(--crush-border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
}
.crush2-player-row.you { border-color: var(--crush-accent); }
.crush2-player-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--crush-bg);
  display: flex; align-items: center; justify-content: center;
  color: #f5ece0;
}
.crush2-player-name { font-weight: 700; color: var(--text); }
.crush2-player-amount { color: var(--crush-muted); white-space: nowrap; }
.crush2-player-status {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.crush2-player-status.live { color: var(--crush-accent-2); background: rgba(255, 210, 77, .12); }
.crush2-player-status.won { color: var(--crush-green); background: rgba(78, 203, 143, .12); }
.crush2-player-status.lost { color: var(--crush-red); background: rgba(239, 91, 91, .12); }

/* Панель ставки — один блок (тип ставки, сумма/скины, авто-вывод, кнопки). */
.crush2-panel-stack {
  position: sticky;
  top: 90px;
}
.crush2-box {
  background: linear-gradient(180deg, var(--crush-panel), var(--crush-panel-2));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--crush-border);
  border-radius: 16px;
  padding: 22px;
}
.crush2-panel-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--crush-muted);
  margin: 16px 0 8px;
}
.crush2-panel-label:first-child { margin-top: 0; }

/* Тумблер "Баланс/Скины" — одна дорожка с ползунком (.crush-bet-type-thumb),
   который переезжает под активную кнопку вместо двух отдельных кнопок со
   своей рамкой/фоном каждая. */
.crush-bet-type {
  position: relative;
  display: flex;
  gap: 0;
  margin-bottom: 0;
  background: var(--crush-panel-2);
  border: 1px solid var(--crush-border);
  border-radius: 12px;
  padding: 4px;
}
.crush-bet-type-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: rgba(255, 184, 0, .16);
  border: 1px solid var(--crush-accent);
  border-radius: 8px;
  transition: transform .25s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.crush-bet-type[data-mode="item"] .crush-bet-type-thumb { transform: translateX(100%); }
.crush-bet-type-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  color: var(--crush-muted);
  transition: color .2s ease;
}
.crush-bet-type-btn.active { color: var(--crush-accent-2); }

.crush2-stepper {
  display: flex;
  align-items: center;
  background: var(--crush-bg);
  border: 1px solid var(--crush-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
.crush2-stepper-btn {
  background: var(--crush-panel-2);
  color: var(--text);
  border: none;
  width: 40px;
  height: 44px;
  font-size: 18px;
  font-weight: 800;
}
.crush2-stepper-btn:hover { color: var(--crush-accent-2); }
.crush2-stepper-coin { width: 16px; height: 16px; flex-shrink: 0; margin-left: 10px; }
.crush2-stepper input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: center;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 4px;
}
.crush2-stepper input:focus { outline: none; }
.crush2-stepper input::-webkit-outer-spin-button,
.crush2-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.crush2-quick-row { display: flex; gap: 8px; margin-bottom: 4px; }
.crush2-quick-row button {
  flex: 1;
  padding: 9px;
  font-size: 12px;
  background: var(--crush-panel-2);
  border: 1px solid var(--crush-border);
  color: var(--crush-muted);
}
.crush2-quick-row button:hover { color: var(--crush-accent-2); border-color: var(--crush-accent); }

.crush-bet-item .upgrade-slot { height: 110px; margin-bottom: 12px; background: var(--crush-bg); border-color: var(--crush-border); }
.crush-bet-item .inv-grid {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 4px;
}

/* Окно авто-вывода — по референсу: тёмная рамка-окошко, значение сверху
   слева, снизу сплошная (без зазоров) полоса из 4 сегментов-пресетов, у
   активного — заливка на всю свою часть полосы. */
.crush2-auto-cashout-box {
  background: var(--crush-bg);
  border: 1px solid var(--crush-border);
  border-radius: 14px;
  padding: 14px;
}
.crush2-auto-cashout-display {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}
.crush2-x-label { color: var(--crush-muted); font-size: 15px; }
.crush2-auto-cashout-input {
  width: 70px;
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--crush-border);
  color: var(--crush-accent-2);
  text-align: left;
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  padding: 2px 0;
}
.crush2-auto-cashout-input:focus { outline: none; border-bottom-color: var(--crush-accent); }
.crush2-auto-cashout-presets {
  display: flex;
  border: 1px solid var(--crush-border);
  border-radius: 10px;
  overflow: hidden;
}
.crush2-auto-cashout-presets .qty-btn {
  flex: 1;
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--crush-muted);
  padding: 10px 0;
  font-size: 12px;
}
.crush2-auto-cashout-presets .qty-btn + .qty-btn { border-left: 1px solid var(--crush-border); }
.crush2-auto-cashout-presets .qty-btn:hover { box-shadow: none; }
.crush2-auto-cashout-presets .qty-btn.active {
  background: linear-gradient(180deg, var(--crush-accent-2), var(--crush-accent));
  color: #1a0e00;
  border-left-color: transparent;
}

.crush-actions { display: flex; gap: 12px; margin-top: 18px; }
.crush-actions button, .crush-actions #crushAuthBtn { flex: 1; justify-content: center; padding: 14px; font-size: 14px; }
#crushBetBtn {
  background: linear-gradient(180deg, var(--crush-accent-2), var(--crush-accent));
  color: #1a0e00;
  box-shadow: var(--neon-glow-soft);
}
#crushCashoutBtn {
  background: linear-gradient(180deg, #ffcb47, #f0a500);
  color: #1a1200;
}
#crushBetBtn:disabled, #crushCashoutBtn:disabled { opacity: .4; cursor: not-allowed; }

.crush-bet-status { margin-top: 14px; text-align: center; font-size: 13px; color: var(--crush-muted); min-height: 18px; }

/* Модалка админ-панели (использует общие .modal стили) */
.modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 50;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.active { display: flex; }
.modal {
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 26px;
  max-width: 560px;
  width: 100%;
  box-shadow: var(--neon-glow);
}
.modal h3 { margin-bottom: 14px; }
.admin-card { margin: 0 auto; }
.admin-password-gate { max-width: 380px; margin: 40px auto; text-align: left; }
.admin-password-error { color: var(--crush-red, #ef5b5b); font-size: 13px; margin: -6px 0 12px; }
.modal-wide { max-width: 900px; max-height: 88vh; overflow-y: auto; }
.modal-backdrop-top { z-index: 60; }

.admin-items-add-row { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-skin-picker-toolbar { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.admin-skin-picker-toolbar input#adminSkinPickerSearch { flex: 1; min-width: 160px; }
.admin-skin-picker-toolbar .admin-skin-picker-price-input { flex: 0 0 auto; width: 110px; }
.admin-skin-picker-toolbar select { flex: 0 0 auto; }
.admin-skin-picker-grid { max-height: 55vh; overflow-y: auto; padding-right: 4px; }
.drop-item.pickable { cursor: pointer; transition: transform .1s ease, border-color .1s ease, box-shadow .1s ease; }
.drop-item.pickable:hover { transform: scale(1.04); border-color: var(--tile-color, var(--accent)); }
.drop-item.pickable.selected { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2), 0 0 16px rgba(255,184,0,.4); }
.drop-item.pickable.library-only { position: relative; }
.drop-item.pickable.library-only::before {
  content: "Библиотека";
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #0b0e13;
  background: var(--accent-2);
  border-radius: 4px;
  padding: 2px 5px;
}
.modal-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.admin-modal-close-btn {
  width: 32px; height: 32px; padding: 0;
  font-size: 20px; line-height: 1;
  border-radius: 50%;
  flex: 0 0 auto;
}

.admin-cases-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.admin-cases-section-header-left { display: flex; align-items: center; gap: 16px; }
.admin-cases-section-header-left .admin-status-profile-bar { margin-bottom: 0; }
.admin-add-case-btn {
  width: 36px; height: 36px; padding: 0;
  font-size: 20px; line-height: 1;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* Палитра цветов кольца — цвета редкости CS2 кликабельными кружками */
.admin-color-palette { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.admin-color-swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .1s ease, border-color .1s ease;
}
.admin-color-swatch:hover { transform: scale(1.12); }
.admin-color-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

/* Группа/категория кейса — селект + кнопка добавления новой */
.admin-group-row { display: flex; gap: 8px; align-items: center; }
.admin-group-row select { flex: 1; }
.admin-group-add-btn {
  width: 34px; height: 34px; padding: 0;
  font-size: 16px; line-height: 1;
  border-radius: 8px;
  flex: 0 0 auto;
}
.admin-group-add-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.admin-group-add-row input { flex: 1; }

/* Окно управления категориями кейсов — список существующих (каждая со своим
   полем переименования) + форма добавления новой снизу (переиспользует
   .admin-group-add-row). */
.admin-groups-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; margin-bottom: 8px; }
.admin-groups-row { display: flex; gap: 8px; align-items: center; }
.admin-groups-row input { flex: 1; }
.admin-groups-move { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.admin-groups-move-btn {
  width: 26px;
  height: 18px;
  padding: 0;
  font-size: 9px;
  line-height: 1;
  border-radius: 5px;
}
.admin-groups-move-btn:disabled { opacity: .3; cursor: not-allowed; }
.admin-groups-delete-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: #ff6b6b;
  border-radius: 8px;
}
.admin-groups-delete-btn:hover:not(:disabled) { border-color: #ff6b6b; box-shadow: 0 0 8px rgba(255, 107, 107, .35); }
.admin-groups-delete-btn:disabled { opacity: .3; cursor: not-allowed; }

/* Разделы админ-панели */
/* Раньше здесь было локальное переопределение --panel/--panel-2/--border под
   стекло только внутри #adminPanelBody — теперь эти переменные стеклянные
   глобально (см. :root), так что админка получает тот же вид сама собой,
   отдельный блок не нужен. */

.admin-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-tab {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 9px 18px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 13px;
}
.admin-tab:hover { border-color: var(--accent); }
.admin-tab.active {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #1a0e00;
  border-color: var(--accent);
  box-shadow: var(--neon-glow-soft);
}

.admin-section { margin-top: 20px; }
.admin-section-title { font-size: 16px; margin: 26px 0 12px; }

#adminSectionCases .admin-card { max-width: 900px; margin: 0 0 16px; }

/* Кнопка "загрузить файл с компьютера" рядом с текстовым полем пути к картинке */
.img-upload-wrap { display: flex; align-items: stretch; gap: 6px; width: 100%; }
.img-upload-wrap input[type="text"] { flex: 1 1 auto; min-width: 0; }
.img-upload-btn {
  flex: 0 0 auto;
  width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.img-upload-btn:hover { border-color: var(--accent); color: var(--accent-2); }
.img-upload-btn:disabled { opacity: .5; cursor: default; }
.admin-item-row .img-upload-btn { width: 28px; border-radius: 6px; }

/* Кейсы в админке — сеткой по 6 в ряд (как на витрине), а не строчками.
   Название/иконка видны всегда, а цена/состав/кнопки — только при наведении,
   иначе на такой маленькой карточке всё не поместится. */
/* Карточка кейса в админке — та же карточка, что на витрине (.case-card,
   большая картинка + имя + цена, тот же glow при наведении), плюс поверх неё
   админские вещи: бейдж "Скрыт", кольцо для выбранного/раскрытого кейса и
   панель с "Редактировать/Скрыть/Удалить", которая проявляется по наведению
   вместо перехода на страницу кейса (как было бы на витрине). */
.admin-cases-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 22px; }
.admin-case-card.active {
  box-shadow: 0 0 0 2px var(--accent), var(--neon-glow);
  border-radius: 16px;
}
.admin-case-card.is-hidden { opacity: .5; }
.admin-case-card.is-hidden:hover { opacity: .85; }
.admin-case-card-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(239, 91, 91, .18);
  color: #ef5b5b;
  border: 1px solid rgba(239, 91, 91, .4);
}
/* Маржа прямо на карточке — видна сразу в сетке, без похода в рейтинг справа
   или открытия редактора. Противоположный угол от бейджа "Скрыт" (см. выше). */
.admin-case-margin-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 2px 7px;
  border-radius: 10px;
}
.admin-case-margin-badge.is-positive { background: rgba(62, 207, 106, .16); color: #3ecf6a; border: 1px solid rgba(62, 207, 106, .4); }
.admin-case-margin-badge.is-negative { background: rgba(255, 92, 92, .16); color: #ff5c5c; border: 1px solid rgba(255, 92, 92, .4); }
.admin-case-card-hover {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: rgba(13, 13, 15, .92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.admin-case-card:hover .admin-case-card-hover { opacity: 1; pointer-events: auto; }
.admin-case-card-meta { font-size: 12px; color: var(--muted); line-height: 1.5; text-align: center; }
.admin-case-card-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 160px; }
.admin-case-card-actions button { width: 100%; padding: 7px 10px; font-size: 12px; }

.admin-case-editor-card {
  max-width: 900px;
  margin: 0 0 24px;
  padding: 20px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--accent);
  border-radius: 16px;
  box-shadow: var(--neon-glow-soft);
}
.admin-case-editor-title { font-weight: 800; font-size: 16px; margin-bottom: 14px; }
.admin-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.admin-field-row .field { margin-bottom: 0; }
/* Резервируем высоту в две строки под лейбл — у поля "Иконка" подпись длиннее
   остальных и без этого переносится на вторую строку, из-за чего сам инпут
   в этой колонке съезжал ниже, чем у соседних полей в той же строке грида. */
.admin-field-row .field label { min-height: 2.6em; line-height: 1.3; }

/* Переключатель "Редакция шанса" / "Кейс и содержимое" внутри редактора
   кейса — тот же язык, что у .admin-tab, но компактнее (это подвкладки
   внутри уже открытого раздела, а не верхний уровень админки). */
.admin-case-editor-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-case-editor-tab {
  background: var(--panel-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-size: 12px;
}
.admin-case-editor-tab:hover { border-color: var(--accent); }
.admin-case-editor-tab.is-active {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #1a0e00;
  border-color: var(--accent);
  box-shadow: var(--neon-glow-soft);
}

/* Редактор шансов выпадения (вкладка "Шансы" в админке) */
.chances-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.chances-sum-badge {
  font-weight: 700;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.chances-sum-badge.is-ok { color: #3ecf6a; border-color: #3ecf6a; box-shadow: 0 0 12px -4px #3ecf6a; }
.chances-sum-badge.is-off { color: #ff5c5c; border-color: #ff5c5c; box-shadow: 0 0 12px -4px #ff5c5c; }

.chances-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.chances-stat {
  background: var(--panel-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chances-stat span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.chances-stat b { font-size: 20px; color: var(--text); }
.chances-margin { border-color: var(--accent); }
.chances-margin b { font-size: 30px; color: var(--accent-2); }
.chances-margin b.is-positive { color: #3ecf6a; }
.chances-margin b.is-negative { color: #ff5c5c; }

.chances-price-stat { border-color: var(--accent-2); }
.chances-price-input-wrap { display: flex; align-items: center; gap: 6px; }
.chances-price-input-wrap input {
  width: 100%;
  min-width: 0;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
}
.chances-price-input-wrap input:focus { outline: none; border-color: var(--accent-2); box-shadow: var(--neon-glow-soft); }
.chances-price-input-wrap span { font-size: 14px; color: var(--muted); }

/* Раздел "Шансы" — окно с ползунками по центру страницы (а не прижато влево) */
.chances-card { margin-left: auto; margin-right: auto; }

/* Список "Скины и их шанс выпадения" внутри панели "Шансы" — второй набор
   инпутов на те же item.chance, что и таблица "Предметы" на соседней вкладке
   (см. chancesListRefs в renderCaseChancesPanel). Прокручиваемый, чтобы
   кейсы на 200+ предметов не растягивали модалку до бесконечности. */
.chances-items-list-title { margin-top: 20px; margin-bottom: 0; }
.chances-items-sort { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; font-size: 12px; }
.chances-items-sort .btn-ghost { padding: 7px 12px; font-size: 12px; }
.chances-items-sort .btn-ghost.active { border-color: var(--accent); color: var(--accent-2); box-shadow: var(--neon-glow-soft); }
.chances-items-list {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 6px 12px;
}
.chances-items-list-group-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 10px 4px 6px;
  position: sticky;
  top: 0;
  background: var(--panel-2);
}
.chances-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 6px 10px;
  margin: 2px 0;
  border-radius: 6px;
  border-left: 3px solid var(--tile-color, var(--border));
  background: color-mix(in srgb, var(--tile-color, #444) 14%, transparent);
}
.chances-items-list-group-title + .chances-item-row { border-top: none; }
.chances-item-row.is-hidden-item .chances-item-row-name { color: var(--muted); font-style: italic; }
.chances-item-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.chances-item-row-price {
  flex: 0 0 auto;
  color: var(--accent-2);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.chances-item-row .admin-item-chance-wrap { flex: 0 0 auto; width: 140px; }

/* Единая карточка-дашборд над сеткой кейсов — три колонки одного визуального
   языка (общий фон/рамка, как у .admin-case-editor-card), а не три разрозненных
   блока вразнобой. Массовые действия · маржа+распределение · рейтинг. */
.cases-dashboard {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 22px 0;
  margin-bottom: 20px;
}
.cases-dashboard-row { display: flex; align-items: stretch; flex-wrap: wrap; }
.cases-dashboard-col { flex: 1 1 240px; min-width: 240px; padding: 0 24px; display: flex; flex-direction: column; gap: 12px; }
.cases-dashboard-heading { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cases-dashboard-divider { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }
.cases-dashboard-divider-h { width: auto; height: 1px; align-self: auto; margin: 20px 24px 0; }
.cases-dashboard-k-field { margin: 0; }
.cases-dashboard-k-field label { font-size: 11px; }

/* Массовые действия "Нормализовать/Сбросить во всех кейсах" — одного размера
   (растянуты на всю ширину колонки) и с эффектом матового стекла. */
.chances-bulk-actions { display: flex; flex-direction: column; gap: 10px; }
.btn-glass {
  width: 100%;
  justify-content: center;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--text);
  padding: 11px 18px;
  border-radius: 12px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-glass:hover { background: rgba(255, 255, 255, .12); border-color: var(--accent); box-shadow: var(--neon-glow-soft); }
.btn-glass-danger { color: #ff8a8a; }
.btn-glass-danger:hover { border-color: #ff5c5c; box-shadow: 0 0 10px rgba(255, 92, 92, .35); }

/* Сортировка сетки кейсов по маржинальности — сами карточки меняются местами
   (в отличие от рейтинга справа, который просто показывает топ-5 отдельным списком). */
.admin-cases-sort { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 24px 0; font-size: 12px; }
.admin-cases-sort .btn-ghost { padding: 7px 12px; font-size: 12px; }
.admin-cases-sort .btn-ghost.active { border-color: var(--accent); color: var(--accent-2); box-shadow: var(--neon-glow-soft); }

.cases-dashboard-margin-value { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cases-dashboard-margin-value span { font-size: 12px; color: var(--muted); }
.cases-dashboard-margin-value b { font-size: 28px; color: var(--accent-2); }
.cases-dashboard-margin-value b.is-positive { color: #3ecf6a; }
.cases-dashboard-margin-value b.is-negative { color: #ff5c5c; }

/* Мини-график распределения маржи — один столбик на кейс, отсортированы от
   самого убыточного до самого прибыльного, растут от нулевой линии вверх
   (в плюсе) или вниз (в минусе). Один "ряд" данных (не несколько серий),
   поэтому обычная легенда не нужна — вместо неё две подписи-точки ниже,
   поясняющие сам цвет (см. .cases-margin-histogram-legend). */
.cases-margin-histogram { position: relative; height: 64px; display: flex; align-items: stretch; gap: 1px; }
.cases-margin-histogram::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--border);
}
.cases-margin-bar { position: relative; flex: 1 1 auto; max-width: 6px; min-width: 2px; height: 100%; }
.cases-margin-bar-fill { position: absolute; left: 0; right: 0; }
.cases-margin-bar-fill.is-positive { bottom: 50%; background: #3ecf6a; border-radius: 1.5px 1.5px 0 0; }
.cases-margin-bar-fill.is-negative { top: 50%; background: #ff5c5c; border-radius: 0 0 1.5px 1.5px; }
.cases-margin-histogram-legend { display: flex; gap: 16px; font-size: 11px; color: var(--muted); }
.cases-margin-histogram-legend span { display: flex; align-items: center; gap: 6px; }
.cases-margin-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cases-margin-dot.is-positive { background: #3ecf6a; }
.cases-margin-dot.is-negative { background: #ff5c5c; }

.chances-margin-rank-toggle { display: flex; gap: 8px; margin-bottom: 10px; }
.chances-margin-rank-toggle .btn-ghost { flex: 1; padding: 7px 10px; font-size: 11px; text-align: center; justify-content: center; }
.chances-margin-rank-toggle .btn-ghost.active { border-color: var(--accent); color: var(--accent-2); box-shadow: var(--neon-glow-soft); }
.chances-rank-list { display: flex; flex-direction: column; gap: 6px; }
.chances-rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  transition: background-color .12s ease;
}
.chances-rank-row:hover { background: rgba(255, 255, 255, .06); }
.chances-rank-row.is-selected { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px var(--accent); }
.chances-rank-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chances-rank-value { flex-shrink: 0; font-weight: 700; }
.chances-rank-value.is-positive { color: #3ecf6a; }
.chances-rank-value.is-negative { color: #ff5c5c; }

/* Групповые ползунки "по редкости" — массово задают суммарный шанс сразу
   всем предметам одной редкости, стоят перед таблицей "Предметы" (сами
   проценты конкретных предметов показывает и редактирует она, см.
   .admin-item-chance-wrap ниже). */
.chances-groups { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.chances-group-row {
  display: grid;
  grid-template-columns: 2.8fr 1.6fr;
  gap: 12px;
  align-items: center;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
}
.chances-group-label { display: flex; align-items: baseline; gap: 8px; }
.chances-group-name { font-weight: 700; font-size: 13px; color: var(--accent-2); }
.chances-group-count { font-size: 11px; color: var(--muted); }

.chances-zero-btn {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #0b0e13;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.chances-zero-btn:hover { border-color: var(--accent); color: var(--text); }
.chances-zero-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #171009;
}
.chances-control { display: flex; align-items: center; gap: 10px; }
.chances-slider {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.chances-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-2);
  border: 2px solid #0b0e13;
  box-shadow: 0 0 6px var(--accent);
  cursor: pointer;
}
.chances-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-2);
  border: 2px solid #0b0e13;
  box-shadow: 0 0 6px var(--accent);
  cursor: pointer;
}
.chances-percent-wrap { display: flex; align-items: center; gap: 4px; width: 82px; flex-shrink: 0; }
.chances-percent-input {
  width: 100%;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
}
.chances-percent-wrap span { font-size: 12px; color: var(--muted); }

.chances-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.chances-sim-table { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.chances-sim-row {
  display: grid;
  grid-template-columns: 2fr 0.7fr 0.6fr;
  gap: 10px;
  font-size: 12px;
  padding: 6px 10px;
  background: var(--panel-2);
  border-radius: 8px;
}
.chances-sim-count, .chances-sim-pct { color: var(--muted); text-align: right; }

/* ── Админка: Платежи ────────────────────────────────────────────────────── */
.admin-payments-intro { margin-bottom: 16px; max-width: 640px; }
.admin-payments-list { display: flex; flex-direction: column; gap: 14px; }

.admin-payment-card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.admin-payment-card.expanded { border-color: var(--accent); }
.admin-payment-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
}
.admin-payment-card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-payment-card-name { font-weight: 700; font-size: 15px; }
.admin-payment-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.admin-payment-badge.is-on { color: #3ecf6a; border-color: #3ecf6a; }
.admin-payment-badge.is-off { color: var(--muted); }
.admin-payment-badge.is-stub { color: var(--accent-2); border-color: var(--accent); }
.admin-payment-card-summary { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.admin-payment-chevron { transition: transform .15s ease; color: var(--muted); }
.admin-payment-card.expanded .admin-payment-chevron { transform: rotate(180deg); }

.admin-payment-card-body { padding: 0 20px 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.admin-payment-stub-note { margin-bottom: 14px; }

.admin-payment-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 16px;
}

.admin-payment-field { display: flex; align-items: flex-end; gap: 10px; }
.admin-payment-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.admin-payment-field input { flex: 1; }
.admin-payment-field-save { flex-shrink: 0; padding: 9px 14px; font-size: 12px; }

.admin-payment-secret-field > div:not(.admin-payment-secret-edit) label { margin-bottom: 6px; }
.admin-payment-secret-display { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-payment-secret-masked { font-family: monospace; font-size: 13px; color: var(--text); }
.admin-payment-secret-edit { display: flex; gap: 8px; }
.admin-payment-secret-edit input { flex: 1; }

.admin-payment-methods-heading { margin: 18px 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.admin-payment-methods-list { display: flex; flex-direction: column; gap: 8px; }
.admin-payment-method-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 80px auto;
  align-items: center;
  gap: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}
.admin-payment-method-icon-name { display: flex; align-items: center; gap: 10px; }
.payment-method-icon { color: var(--accent-2); flex-shrink: 0; }
.payment-method-icon-img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; }
.admin-payment-method-identifier { font-size: 12px; }
/* Комиссия метода, % — узкий инпут с суффиксом "%" рядом, четвёртая колонка
   между идентификатором у провайдера и тумблером вкл/выкл. */
.admin-payment-method-fee-wrap { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.admin-payment-method-fee {
  width: 52px;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 5px 6px;
  font-size: 12px;
  font-family: inherit;
}
.admin-payment-method-fee:focus { outline: none; border-color: var(--accent); box-shadow: var(--neon-glow-soft); }

.admin-payments-log-title { margin-top: 28px; }
.admin-payments-log { overflow-x: auto; }
.admin-payments-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.admin-payments-log-table th, .admin-payments-log-table td {
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.admin-payments-log-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--panel-2);
}
.admin-payments-log-table tbody tr:last-child td { border-bottom: none; }
.admin-payments-log-table tbody tr:hover { background: var(--panel-2); }

/* ── Админка: Пополнения (дашборд выручки) ───────────────────────────────── */
.revenue-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 12px;
}
.revenue-stat-card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
}
.revenue-stat-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.revenue-stat-value { font-size: 26px; font-weight: 700; color: var(--accent-2); }

.revenue-chart-heading { margin: 24px 0 10px; }

/* Один столбик — один день, все растут от общей нулевой линии вверх (в
   отличие от гистограммы маржи выше, тут не бывает отрицательных значений,
   поэтому направление одно). Точная дата и сумма — во всплывающей подсказке
   (title) на каждом столбике, чтобы не подписывать все 30+ значений разом. */
.revenue-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 140px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.revenue-chart-empty { color: var(--muted); font-size: 13px; align-self: center; }
.revenue-chart-bar {
  flex: 1 1 auto;
  min-width: 3px;
  max-width: 22px;
  min-height: 2px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  transition: background-color .12s ease;
}
.revenue-chart-bar:hover { background: var(--accent-2); }
.revenue-chart-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 4px; }

.revenue-provider-list { display: flex; flex-direction: column; }
.revenue-provider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.revenue-provider-row:last-child { border-bottom: none; }
.revenue-provider-name { color: var(--text); }
.revenue-provider-count { color: var(--muted); font-size: 12px; margin-left: 6px; }
.revenue-provider-value { font-weight: 700; color: var(--accent-2); flex-shrink: 0; }

/* ── Админка: Рефералы ────────────────────────────────────────────────────── */
.admin-referral-global-field { max-width: 420px; margin-bottom: 28px; }
.admin-referral-global-row { display: flex; gap: 10px; }
.admin-referral-global-row input { flex: 1 1 auto; min-width: 0; }
.admin-referral-global-row .btn-primary { flex-shrink: 0; padding: 10px 18px; font-size: 13px; }

.admin-guaranteed-win-global { max-width: 640px; margin: 16px 0 20px; }
.admin-guaranteed-win-global-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-guaranteed-win-global-title { font-weight: 700; font-size: 14px; }
.admin-guaranteed-win-global-hint { margin: 4px 0 0; font-size: 12px; }
.admin-guaranteed-win-global-row .admin-access-btn { flex-shrink: 0; padding: 8px 16px; font-size: 12px; }
.admin-referrals-list-title { margin-bottom: 14px; }
.admin-referrals-list { display: flex; flex-direction: column; gap: 10px; }
.admin-referral-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.8fr 1.6fr auto;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
}
.admin-referral-row-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-referral-row-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-referral-avatar { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.admin-referral-code-input, .admin-referral-reward-input {
  width: 100%;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
.admin-referral-code-input:focus, .admin-referral-reward-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--neon-glow-soft); }
.admin-referral-row-stats { font-size: 12px; color: var(--muted); }
@media (max-width: 900px) {
  .admin-referral-row { grid-template-columns: 1fr 1fr; }
  .admin-referral-row-identity { grid-column: span 2; }
  .admin-referral-row-stats { grid-column: span 2; }
}

/* Раздел "Выводы" — заявки на вывод скина трейдом (см. POST /api/withdraw).
   Полоса слева в цвет редкости предмета — тот же приём, что у .inv-item и
   .chances-item-row. */
.admin-withdrawals-list { display: flex; flex-direction: column; gap: 10px; }
.admin-withdrawal-row {
  display: grid;
  grid-template-columns: 44px 1.3fr 1fr 1.8fr auto auto;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tile-color, var(--border));
  border-radius: 12px;
  padding: 12px 16px;
}
.admin-withdrawal-thumb { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.admin-withdrawal-item-info { min-width: 0; }
.admin-withdrawal-item-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-withdrawal-item-price { font-size: 12px; color: var(--accent-2); font-weight: 700; }
.admin-withdrawal-item-date { font-size: 11px; margin-top: 2px; }
.admin-withdrawal-trade-wrap { display: flex; gap: 6px; min-width: 0; }
.admin-withdrawal-trade-input {
  flex: 1 1 auto;
  min-width: 0;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  padding: 7px 9px;
  font-size: 12px;
  font-family: inherit;
}
.admin-withdrawal-trade-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--neon-glow-soft); }
.admin-withdrawal-status {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  text-align: center;
}
.admin-withdrawal-status.is-pending { background: rgba(255, 184, 77, .12); border: 1px solid rgba(255, 184, 77, .4); color: #ffb84d; }
.admin-withdrawal-status.is-done { background: rgba(78, 203, 143, .12); border: 1px solid rgba(78, 203, 143, .4); color: #4ecb8f; }
.admin-withdrawal-status.is-rejected { background: rgba(239, 91, 91, .12); border: 1px solid rgba(239, 91, 91, .4); color: #ef5b5b; }
.admin-withdrawal-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; min-width: 90px; }
@media (max-width: 1100px) {
  .admin-withdrawal-row { grid-template-columns: 44px 1fr 1fr; }
  .admin-withdrawal-trade-wrap, .admin-withdrawal-status, .admin-withdrawal-actions { grid-column: span 3; }
  .admin-withdrawal-actions { justify-content: flex-start; }
}

/* Раздел "Промокоды" (см. POST /api/admin/promo-codes) */
.admin-promo-create { max-width: 900px; }
.admin-promo-create .modal-actions,
.admin-promo-create > .btn-primary { margin-top: 16px; }
.admin-promo-list { display: flex; flex-direction: column; gap: 10px; }
.admin-promo-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr auto auto;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
}
.admin-promo-row.is-inactive { opacity: .55; }
.admin-promo-code { font-weight: 700; font-size: 14px; letter-spacing: .03em; }
.admin-promo-effect { font-size: 13px; color: var(--accent-2); font-weight: 700; }
.admin-promo-activations { font-size: 12px; color: var(--muted); }
.admin-promo-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) {
  .admin-promo-row { grid-template-columns: 1fr 1fr; }
  .admin-promo-code { grid-column: span 2; }
  .admin-promo-actions { grid-column: span 2; justify-content: flex-start; }
}

/* Переключатель вкл/выкл (провайдер, метод оплаты) — пилюля с ползунком,
   а не квадратный чекбокс (у него другой смысл — см. .field-checkbox ниже),
   нативный чекбокс под капотом ради доступности/семантики формы. */
.toggle-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #0b0e13;
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .15s ease, background-color .15s ease;
}
.toggle-switch:checked { background: rgba(255, 184, 0, .18); border-color: var(--accent); }
.toggle-switch:checked::after { transform: translateX(18px); background: var(--accent); }
.toggle-switch:disabled { opacity: .5; cursor: not-allowed; }

/* ── Пополнение баланса (/deposit) ───────────────────────────────────────── */
.deposit-layout { display: flex; justify-content: center; margin-top: 20px; }
.deposit-card {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, var(--glass-panel-2), var(--glass-panel));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 24px;
}
.deposit-amount-presets { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 16px; }
.deposit-amount-presets .btn-ghost { padding: 7px 14px; font-size: 12px; }
.deposit-promo-row { display: flex; gap: 8px; }
.deposit-promo-row input {
  flex: 1 1 auto;
  min-width: 0;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 10px;
  font-size: 13px;
  font-family: inherit;
}
.deposit-promo-row input:focus { outline: none; border-color: var(--accent); box-shadow: var(--neon-glow-soft); }
.deposit-promo-hint { font-size: 12px; color: var(--muted); margin-top: 8px; }
.deposit-promo-hint.is-error { color: #ff5c5c; }
.deposit-promo-hint.is-ok { color: #3ecf6a; }
.deposit-methods-list { display: flex; flex-direction: column; gap: 8px; }
.deposit-method-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--panel-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.deposit-method-btn:hover { border-color: var(--accent); }
.deposit-method-btn.selected { border-color: var(--accent); box-shadow: var(--neon-glow-soft); }
.deposit-method-btn .payment-method-icon { color: var(--accent-2); flex-shrink: 0; }
/* Комиссия метода — справа, серым, только цифры (см. formatFeePercent в
   app.js); margin-left:auto прижимает её к правому краю кнопки независимо
   от длины названия метода слева. */
.deposit-method-fee { margin-left: auto; color: var(--muted); font-size: 12px; flex-shrink: 0; }

/* CryptoBot — стеклянная кнопка в фирменном синем цвете логотипа (чуть темнее
   самого лого, чтобы не спорить с ним по яркости): полупрозрачная заливка +
   размытие фона, как у .btn-glass, только с синим оттенком вместо белого. */
.deposit-method-btn--cryptobot {
  background: linear-gradient(135deg, rgba(20, 110, 175, .32), rgba(8, 62, 112, .42));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(56, 172, 236, .35);
}
.deposit-method-btn--cryptobot:hover {
  border-color: rgba(56, 172, 236, .7);
  box-shadow: 0 0 16px rgba(41, 163, 233, .3);
}
.deposit-method-btn--cryptobot.selected {
  border-color: rgba(86, 190, 245, .9);
  box-shadow: 0 0 20px rgba(41, 163, 233, .45);
}
.deposit-error { color: #ff5c5c; font-size: 13px; margin: 10px 0; }
.deposit-pay-btn { width: 100%; margin-top: 16px; justify-content: center; }
.deposit-hint { margin-top: 12px; text-align: center; }

/* Чекбокс "Скрыт от пользователей" в форме кейса — обычный .field input
   растягивается на 100% ширины, для чекбокса это не нужно. */
.field-checkbox label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text); font-size: 13px; }
/* Кастомный чекбокс в стиле сайта — нативный чекбокс даже с accent-color
   рисует белый квадрат в невыбранном состоянии, что выбивается из тёмного
   дизайна панели. */
.field-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: #0b0e13;
  cursor: pointer;
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.field-checkbox input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.field-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #0b0e13;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.admin-item-row, .admin-item-row-header {
  display: grid;
  grid-template-columns: 1.7fr 1.3fr 0.8fr 0.45fr 0.8fr 0.9fr 1.6fr 0.55fr auto;
  gap: 8px;
  align-items: center;
}
.admin-item-price-manual-checkbox { justify-self: center; }
.admin-item-row-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 0 2px 4px;
}
.admin-items-table { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
/* Упрощённая строка таблицы предметов для режима "переопределение по статусу"
   (см. lockStructure в renderAdminItemsTable) — только название/цена/шанс,
   поэтому свой (более узкий) grid поверх общего .admin-item-row. */
.admin-item-row-locked { grid-template-columns: 2fr 1fr 1.4fr; }
.admin-item-locked-name { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-item-row input, .admin-item-row select {
  width: 100%;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 9px;
  font-family: inherit;
  font-size: 12px;
}
.admin-item-row select {
  padding-right: 24px;
  background-position: right 8px center;
  background-size: 9px 5px;
}
/* Шанс + кнопка "0" (обнуление, фиксирует 0% против нормализации/группового
   ползунка панели "Шансы" рядом) — делят одну ячейку грида строки. */
.admin-item-chance-wrap { display: flex; align-items: center; gap: 4px; }
.admin-item-chance-wrap .admin-item-chance-input { min-width: 0; }
.admin-item-row input:focus, .admin-item-row select:focus { outline: none; border-color: var(--accent); }
.admin-item-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #0b0e13;
  justify-self: center;
  cursor: pointer;
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.admin-item-row input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.admin-item-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #0b0e13;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.admin-item-remove-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 30px;
  height: 30px;
  font-size: 16px;
  border-radius: 8px;
}
.admin-item-remove-btn:hover { color: #ef5b5b; border-color: #ef5b5b; }

.admin-crash-status { display: flex; gap: 10px 24px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin-top: 16px; }
.admin-crash-status b { color: var(--accent-2); }

/* Живое окно раунда Crash в админке — та же кривая, что видит игрок (та же
   математика роста/масштаба, см. drawAdminCrashCurve в app.js), но без бомбы
   и параллакс-фона: админу нужна сама шкала, а не игровое оформление. */
.admin-crash-live-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.admin-crash-live-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.admin-crash-live-multiplier { font-size: 28px; font-weight: 700; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.admin-crash-live-multiplier.crashed { color: #ef5b5b; }
.admin-crash-live-canvas-wrap {
  position: relative;
  height: 220px;
  background: var(--panel-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
#adminCrashCanvas { width: 100%; height: 100%; display: block; }
.admin-crash-live-waiting {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
}
.admin-crash-live-waiting b { color: var(--accent-2); font-variant-numeric: tabular-nums; }

.skins-price-refresh-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 900px;
  margin-bottom: 18px;
}
.skins-price-refresh-bar p { margin: 8px 0 0; font-size: 12px; max-width: 460px; }
.skins-price-refresh-status { font-size: 12px; color: var(--muted); text-align: right; max-width: 320px; }
.skins-price-refresh-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.skins-rate-field { display: flex; align-items: center; gap: 8px; }
.skins-rate-field label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.skins-rate-field input {
  width: 80px;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
}
.skins-rate-field input:focus { outline: none; border-color: var(--accent-2); box-shadow: var(--neon-glow-soft); }

.skins-provider-priority { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.skins-provider-priority .muted { font-size: 12px; }
.skins-provider-priority .skins-rate-field input { width: 46px; text-align: center; }

.skins-price-preview-panel {
  max-width: 900px;
  margin: -6px 0 18px;
  padding: 14px 16px;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text);
}
.skins-price-preview-panel h4 { margin: 0 0 8px; font-size: 13px; color: var(--accent-2); }
.skins-price-preview-panel .preview-not-found {
  max-height: 160px;
  overflow-y: auto;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .03);
  border-radius: 8px;
  color: var(--muted);
  line-height: 1.6;
}

.admin-skins-filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; max-width: 900px; margin-bottom: 0; }
.admin-skins-filters .field { margin-bottom: 0; }
#adminSkinsCount { max-width: 900px; font-size: 12px; margin: 10px 0; }
.admin-skins-table { display: flex; flex-direction: column; gap: 6px; max-width: 900px; }
.admin-skin-row, .admin-skin-row-header {
  display: grid;
  grid-template-columns: 40px 1.4fr 0.9fr 1.1fr 0.6fr 0.5fr 0.8fr 0.8fr;
  gap: 10px;
  align-items: center;
}
.admin-skin-row-header {
  max-width: 900px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  /* лево 15px = 12px паддинга строки + 3px её левой цветной рамки,
     иначе заголовки съезжают относительно колонок строк ниже */
  padding: 0 12px 6px 15px;
}
.admin-skin-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tile-color, var(--border));
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
}
.admin-skin-row .skin-thumb { width: 32px; height: 32px; object-fit: contain; display: block; }
.admin-skin-row .skin-name { font-weight: 600; }
.admin-skin-row .skin-rarity { color: var(--tile-color, var(--muted)); }
.admin-skin-row .skin-price { color: var(--accent-2); font-weight: 700; }
.admin-skin-row .skin-case { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-skin-row.is-hidden { opacity: .55; }
.skin-visibility-btn {
  background: rgba(78, 203, 143, .12);
  border: 1px solid rgba(78, 203, 143, .4);
  color: var(--crush-green, #4ecb8f);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.skin-visibility-btn.is-hidden {
  background: rgba(239, 91, 91, .12);
  border-color: rgba(239, 91, 91, .4);
  color: #ef5b5b;
}
/* Строки из базы скинов (без кейса) — вместо переключателя видимости кнопка
   удаления из базы, сразу красная (действие необратимое). */
.skin-library-delete-btn {
  background: rgba(239, 91, 91, .12);
  border-color: rgba(239, 91, 91, .4);
  color: #ef5b5b;
}
.admin-skins-empty { color: var(--muted); font-size: 13px; padding: 16px 0; }

/* Вкладка "Пользователи" — та же сетка-таблица, что и у "Скины" (см. .admin-skin-row выше) */
.admin-users-filters { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; max-width: 640px; }
.admin-users-filters .field { margin-bottom: 0; }
.admin-users-table { display: flex; flex-direction: column; gap: 6px; }
.admin-user-row, .admin-user-row-header {
  display: grid;
  grid-template-columns: 40px 1.4fr 1fr 1fr 1fr 0.8fr 0.9fr 0.9fr 1fr;
  gap: 10px;
  align-items: center;
}
.admin-user-row-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 0 12px 6px 15px;
}
.admin-user-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
}
.admin-user-row .user-avatar { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; display: block; }
.admin-user-row .user-name { font-weight: 600; }
.admin-user-row .user-steamid { color: var(--muted); font-size: 10px; margin-top: 2px; }
.admin-user-row .user-balance { display: flex; align-items: center; gap: 6px; }
.admin-user-row .user-deposit { color: var(--muted); }
.admin-user-row .user-inventory { color: var(--muted); }
.admin-user-row .user-date { color: var(--muted); white-space: nowrap; }
.admin-user-row .user-admin-access { color: var(--muted); font-size: 11px; }
.admin-user-row .user-statuses { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-access-btn {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
}
.admin-access-btn:hover { border-color: var(--accent); color: var(--accent-2); }
.admin-access-btn.is-admin {
  background: rgba(78, 203, 143, .12);
  border-color: rgba(78, 203, 143, .4);
  color: var(--crush-green, #4ecb8f);
}
.admin-access-btn:disabled { opacity: .5; cursor: default; }

.user-balance-input {
  width: 68px;
  padding: 5px 7px;
  font-size: 12px;
  border-radius: 6px;
  color: var(--accent-2);
  font-weight: 700;
}
.user-balance-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.user-balance-save-btn:hover { color: var(--accent-2); border-color: var(--accent); box-shadow: var(--neon-glow-soft); }
.user-balance-save-btn:disabled { opacity: .5; cursor: default; }
/* Переключатель "Все игроки / <статус>" над формой настроек (Апгрейд,
   Контракт) — выбор статуса подменяет видимую карточку формы на её
   переопределение для этого статуса, см. switchAdminUpgradeProfile и
   аналоги. Тот же select переиспользуется в редакторе кейса (Кейсы).
   inline-flex + пилюля — маленький компактный чип, а не растянутая на всю
   ширину строка формы (раньше select был таким же крупным, как обычные поля). */
.admin-status-profile-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 5px 6px 5px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.admin-status-profile-bar label { font-size: 11px; color: var(--muted); white-space: nowrap; }
.admin-status-profile-bar select {
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  padding: 4px 24px 4px 10px;
  font-size: 12px;
  background-position: right 8px center;
  border-radius: 999px;
}

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input {
  width: 100%;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 10px;
  font-family: monospace;
  font-size: 12px;
}
.field textarea { width: 100%; resize: vertical; }

/* Все выпадающие списки (фильтры, редактор кейсов и т.д.) — в стиле сайта,
   а не браузерный дефолт: тёмный фон, наша рамка и своя стрелка вместо системной. */
select {
  width: 100%;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 32px 10px 12px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffd24d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
  transition: border-color .15s ease;
}
select:hover { border-color: var(--accent); }
select:focus { outline: none; border-color: var(--accent); box-shadow: var(--neon-glow-soft); }
select option { background: #0b0e13; color: var(--text); }
.code {
  word-break: break-all;
  font-family: monospace;
  font-size: 11px;
  background: #0b0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  color: var(--muted);
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--accent);
  padding: 12px 20px;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 100;
  box-shadow: var(--neon-glow);
}
.toast.show { opacity: 1; }

/* Юридические документы (соглашение, политики) — контент вставляется из
   БД как есть (см. renderLegalView в app.js), поэтому стилизуем по тегам,
   а не по классам: админ может вставить любую разметку из исходников. */
.legal-view-header {
  max-width: 820px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
}
#legalTitle { text-align: center; margin: 0; }
.legal-view-header #legalEditBtn { position: absolute; right: 0; }
@media (max-width: 640px) {
  .legal-view-header { flex-direction: column; gap: 8px; }
  .legal-view-header #legalEditBtn { position: static; }
}
.legal-content { max-width: 820px; margin: 0 auto; line-height: 1.6; }
.legal-edit-form { max-width: 820px; margin: 0 auto; }
.legal-content h2 { font-size: 18px; margin: 28px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.legal-content h3 { font-size: 15px; margin: 18px 0 4px; }
.legal-content p { margin: 10px 0; }
.legal-content ul, .legal-content ol { padding-left: 22px; margin: 6px 0; }
.legal-content li { margin: 6px 0; }
.legal-content .rev { color: var(--muted); font-size: 13px; margin-bottom: 20px; text-align: center; }
.legal-content table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 13px; }
.legal-content th, .legal-content td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal-content th { background: var(--panel-2); }
.legal-content .note {
  background: var(--panel-2);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  margin: 18px 0;
  font-size: 13px;
  border-radius: 4px;
}
.legal-content .checkbox { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin: 20px 0; font-size: 13px; }
.legal-content code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: .9em; color: var(--accent-2); }
.legal-content a { color: var(--accent-2); }
.legal-content dt { font-weight: 700; margin-top: 12px; }
.legal-content dd { margin: 2px 0 0 0; }
.legal-content footer { margin-top: 36px; border-top: 1px solid var(--border); padding-top: 14px; color: var(--muted); font-size: 12px; }

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding: 24px 76px 32px;
  text-align: center;
}
.site-footer-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; }
.site-footer-links a { color: var(--muted); font-size: 13px; text-decoration: none; }
.site-footer-links a:hover { color: var(--accent-2); }
.site-footer-copy { color: var(--muted); font-size: 12px; margin: 0; }
@media (max-width: 640px) {
  .site-footer { padding: 20px 20px 28px; }
}

/* ── Тестовые аккаунты ────────────────────────────────────────────────────────
   Вход по логину/паролю вместо Steam (аккаунты заводит админ во вкладке
   "Пользователи"). Всё оформление — теми же токенами, что и остальной сайт:
   стеклянные панели, янтарный акцент, тёмные инпуты. */

/* Кнопка в шапке рядом с "Авторизироваться" — намеренно тише основной
   (btn-ghost, а не btn-primary): это служебный вход, не главное действие. */
.test-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 10px 14px;
  font-size: 13px;
}
.test-login-btn .btn-icon { margin: 0; }
@media (max-width: 900px) {
  .test-login-btn span { display: none; }
}

/* Плашка "ТЕСТ" — в шапке и в карточке профиля стоит на месте аватара
   (у тестового аккаунта Steam-профиля, а значит и картинки, нет). */
.test-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--accent-2);
  color: #0b0e13;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  border-radius: 5px;
  padding: 4px 6px;
  line-height: 1;
}
.profile-test-badge { align-self: center; }

.test-login-modal { max-width: 380px; }

/* Карточка "Тестовые аккаунты" во вкладке "Пользователи" */
.admin-test-accounts-card { max-width: 640px; margin: 0 0 20px; }
.admin-test-accounts-head { margin-bottom: 14px; }
.admin-test-accounts-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}
.admin-test-accounts-form .field { margin: 0; }
.admin-test-accounts-form .btn-primary { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 640px) {
  .admin-test-accounts-form { grid-template-columns: 1fr; }
}

/* Строка тестового аккаунта в общей таблице игроков — янтарная левая грань,
   чтобы такие строки отличались от настоящих игроков без вчитывания. */
.admin-user-row.is-test { border-left-color: var(--accent); }
.admin-user-row .user-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-test-delete-btn:hover { border-color: #ff5c5c; color: #ff8a8a; }

/* ── Предмет на выводе ────────────────────────────────────────────────────────
   Плитка того же предмета, но заявка уже создана: сам предмет из инвентаря
   списан, кнопок "Продать"/"Вывести" нет. Картинка/название/цена приглушены,
   поверх — надпись "На выводе" со сроком. Цвет редкости (--tile-color) не
   гасим: нижняя грань остаётся яркой, чтобы плитка читалась как тот же
   предмет, а не как выключенный элемент. */
.inv-item-withdrawing {
  position: relative;
  /* Растягиваем до высоты соседних плиток с кнопками — иначе ряд из смеси
     обычных и выводимых предметов получался бы рваным по нижнему краю. */
  justify-content: center;
}
.inv-item-withdrawing .inv-item-withdrawing-content {
  opacity: .28;
  filter: grayscale(.5);
  pointer-events: none;
}
.inv-item-withdrawing-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  text-align: center;
  pointer-events: none;
}
.inv-item-withdrawing-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--accent-2);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .75);
}
.inv-item-withdrawing-note {
  font-size: 10px;
  line-height: 1.3;
  color: var(--text);
  opacity: .8;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .75);
}

/* Карточка рубильника "Вход через Steam" (вкладка "Пользователи") — та же
   раскладка, что у "Гарантированного выигрыша", просто отдельный блок. */
.admin-steam-login-card { max-width: 640px; margin: 0 0 20px; }

/* Полоса срока TLS-сертификата в шапке админки. Обычное состояние —
   приглушённое (это фон, а не задача); за 21 день до конца становится
   янтарной, за 7 — красной, чтобы попасться на глаза до, а не после. */
.admin-cert-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 16px;
}
.admin-cert-bar b { color: var(--text); font-weight: 700; }
.admin-cert-bar.is-warn { border-left-color: var(--accent); color: var(--accent-2); }
.admin-cert-bar.is-warn b { color: var(--accent-2); }
.admin-cert-bar.is-critical { border-left-color: #ff5c5c; color: #ff8a8a; }
.admin-cert-bar.is-critical b { color: #ff8a8a; }