/* === 🧱 NDHQ DESIGN SYSTEM (Global) === */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4i1UA.ttf) format('truetype');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-NYi1UA.ttf) format('truetype');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-2Y-1UA.ttf) format('truetype');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-4I-1UA.ttf) format('truetype');
}
:root {
  /* 🎨 Core palette */
  --nd-bg: #0f111a;
  /* app background */
  --nd-surface: #171d25;
  /* surfaces / panels */
  --nd-card: #141b23;
  /* cards */
  --nd-card-2: #1b202b;
  /* alt card for depth */
  --nd-border: #2a2e3b;
  /* borders / separators */
  --nd-text: #d7e3f4;
  /* primary text */
  --nd-text-muted: #8ea2b6;
  /* secondary text */
  --nd-accent: #00c8ff;
  /* primary accent (blue-cyan) */
  --nd-accent-dim: #0092cc;
  /* darker accent */
  /* Reserved (not used now, for future themes) */
  --nd-success: #17a51c;
  --nd-warning: #ffb703;
  --nd-error: #ff5c5c;
  /* Elevation & FX */
  --nd-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
  --nd-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --nd-shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.5);
  --nd-blur-bg: blur(8px);
  /* Radii / Spacing */
  --nd-radius-sm: 6px;
  --nd-radius-md: 10px;
  --nd-radius-lg: 14px;
  --nd-gap: 12px;
  --nd-padding: 20px;
  /* Typography */
  --nd-font: 'Rubik', 'Segoe UI', sans-serif;
  --nd-font-size: 16px;
}
* {
  box-sizing: border-box;
}
body {
  background-color: var(--nd-bg);
  font-family: var(--nd-font);
  color: #ffffff;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* === Base reset alignment === */
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  background: var(--nd-bg);
  color: var(--nd-text);
  font-family: var(--nd-font);
  font-size: var(--nd-font-size);
  margin: 0;
}
/* Scrollbars (WebKit) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--nd-accent-dim), var(--nd-accent));
  border-radius: 6px;
}
/* Utility */
.text-muted {
  color: var(--nd-text-muted) !important;
}
.card {
  background: var(--nd-card);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius-lg);
  box-shadow: var(--nd-shadow-sm);
}
.btn {
  background: var(--nd-card-2);
  color: var(--nd-text);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius-md);
  padding: 10px 14px;
  font-weight: 600;
  transition: 0.2s ease;
}
.btn:hover {
  border-color: var(--nd-accent);
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.25);
}
.input,
.form-input,
select {
  background: var(--nd-surface);
  color: var(--nd-text);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius-md);
}
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px;
  width: 100%;
  min-height: 100vh;
  position: relative;
}
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  opacity: 0;
  padding: 0 20px;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.screen.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  z-index: 5;
}
.screen.hidden {
  display: none;
}
/* === 🧩 NDHQ — Единый стиль кнопок и отступов === */
/* Сетка */
.button-grid {
  display: grid;
  gap: 14px;
  /* универсальный промежуток между кнопками */
  margin: 0;
}
.button-grid.two-column {
  grid-template-columns: repeat(2, 1fr);
}
.button-grid.three-column {
  grid-template-columns: repeat(3, 1fr);
}
/* Универсальная кнопка */
.status-btn,
.modules-type-btn,
.filter-btn .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  background: var(--nd-card-2);
  color: var(--nd-text);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius-lg);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  min-height: 50px;
  padding: 0 14px;
  box-shadow: var(--nd-shadow-sm);
  transition: all 0.25s ease;
  cursor: pointer;
}
.btn {
  margin: 10px 0;
}
/* Иконки и текст в кнопках */
.card-btn i {
  font-size: 22px;
  color: var(--nd-accent);
  margin-bottom: 6px;
  transition: 0.25s;
}
.btn span,
.card-btn span {
  font-size: 0.95rem;
  color: var(--nd-text);
}
/* Ховер — один стиль */
.btn:hover,
.card-btn:hover,
.status-btn:hover,
.modules-type-btn:hover,
.filter-btn:hover,
.global-home-button .btn:hover {
  border-color: var(--nd-accent);
  background: rgba(0, 200, 255, 0.08);
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.25);
  transform: translateY(-2px);
}
/* Активное нажатие */
.btn:active,
.card-btn:active,
.status-btn:active,
.modules-type-btn:active,
.filter-btn:active,
.global-home-button .btn:active {
  transform: scale(0.96);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}
/* Полноширинные кнопки (главное меню, добавить и т.п.) */
.btn.full-width,
.card-btn.full-width,
.global-home-button .btn {
  grid-column: 1 / -1;
  width: 100%;
}
/* Унификация отступов между рядами */
#screen-home .button-grid,
#screen-warzone-main .button-grid,
#screen-battlefield-main .button-grid {
  margin-top: 12px;
}
#screen-home .button-grid:last-child,
#screen-warzone-main .button-grid:last-child,
#screen-battlefield-main .button-grid:last-child {
  margin-top: 12px;
}
/* === Карточки === */
.card-btn {
  align-items: center;
  justify-content: center;
  background: var(--nd-card);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius-lg, 14px);
  color: var(--nd-text);
  min-height: 110px;
  min-width: 110px;
  text-align: center;
  font-size: 14px;
  gap: 10px;
  box-shadow: var(--nd-shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.4));
  transition: all var(--nd-trans-fast, 0.2s ease);
  cursor: pointer;
  flex-direction: column;
}
.card-btn.is-visible {
  display: flex !important;
}
.card-btn.full-width {
  grid-column: 1 / -1;
}
/* === Иконки и текст === */
.card-btn i {
  font-size: 26px;
  color: var(--nd-accent);
  transition: color 0.2s ease, transform 0.2s ease;
}
.card-btn span {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--nd-text);
}
/* === Ховеры и клики === */
.card-btn:hover {
  border-color: var(--nd-accent);
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.25);
  transform: translateY(-3px);
}
.card-btn:hover i {
  color: var(--nd-accent-dim);
  transform: scale(1.1);
}
.card-btn:active {
  transform: scale(0.95);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}
/* === Изображения игр === */
.game-thumb {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--nd-radius-md, 10px);
  transition: transform 0.2s ease;
}
.card-btn:hover .game-thumb {
  transform: scale(1.05);
}
/* === 🎮 Игровые карточки NDHQ (в стиле общих кнопок) === */
#screen-home .button-grid.three-column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nd-gap, 16px);
  margin-bottom: var(--nd-gap, 16px);
}
/* Карточка игры */
#screen-home .button-grid.three-column .card-btn {
  aspect-ratio: 1 / 1;
  /* квадрат */
  min-height: auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  background: var(--nd-card);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius-lg, 14px);
  box-shadow: var(--nd-shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.4));
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Изображение внутри карточки */
#screen-home .button-grid.three-column .card-btn .game-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--nd-radius-lg, 14px);
  transition: transform 0.3s ease, filter 0.3s ease;
}
/* Подложка (лёгкое затемнение для глубины) */
#screen-home .button-grid.three-column .card-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--nd-radius-lg, 14px);
  background: rgba(0, 0, 0, 0.15);
  opacity: 0.8;
  transition: opacity 0.3s ease, background 0.3s ease;
}
/* Ховер — стиль как у обычных кнопок */
#screen-home .button-grid.three-column .card-btn:hover {
  border-color: var(--nd-accent);
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.25);
  transform: translateY(-3px);
}
/* При наведении — лёгкое увеличение картинки */
#screen-home .button-grid.three-column .card-btn:hover .game-thumb {
  transform: scale(1.05);
  filter: brightness(1.08);
}
/* При ховере убираем тёмную подложку */
#screen-home .button-grid.three-column .card-btn:hover::after {
  background: rgba(0, 0, 0, 0.05);
  opacity: 0.6;
}
/* Эффект нажатия */
#screen-home .button-grid.three-column .card-btn:active {
  transform: scale(0.96);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}
/* Адаптив: 2 в ряд (планшет) */
@media (max-width: 600px) {
  #screen-home .button-grid.three-column {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Адаптив: 1 в ряд (мобильные телефоны) */
@media (max-width: 350px) {
  #screen-home .button-grid.three-column {
    grid-template-columns: 1fr;
  }
}
/* ГЛАВНОЕ МЕНЮ */
.global-home-button {
  margin-top: 20px;
  width: 100%;
  box-sizing: border-box;
  display: none;
  text-align: center;
}
/* По умолчанию скрыта */
.global-home-button {
  display: none;
}
/* анимация перехода */
.card-btn {
  display: none;
}
.card-btn.is-visible {
  display: flex !important;
}
.card-btn.full-width {
  grid-column: 1 / -1;
  width: 100%;
}
/* =======================================================
   NDHQ BATTLEFIELD THEME — тёмная зелёная палитра с градиентами
   ======================================================= */
#screen-warzone-main,
#screen-builds,
#screen-form,
#screen-modules-types,
#screen-modules-list,
#screen-edit-builds,
#screen-assign-admin {
  /* 🎨 Локальные переменные в стиле примера */
  --wz-bg: #0a0f0a;
  /* глубокий тёмно-зелёный фон */
  --wz-surface: #101617;
  /* тёмная поверхность */
  --wz-card: #1b2324;
  /* карточки как в примере */
  --wz-card-2: #1e2728;
  /* вторичные карточки */
  --wz-border: #2a3a3a;
  /* границы */
  --wz-text: #ffffff;
  /* белый текст */
  --wz-text-muted: #a8b8b8;
  /* приглушённый серо-зелёный */
  --wz-accent: #2d9c44;
  /* основной акцент - зелёный */
  --wz-accent-dark: #1e6b32;
  /* тёмный зелёный */
  --wz-accent-light: #3cb054;
  /* светлый зелёный */
  --wz-accent-glow: rgba(45, 156, 68, 0.25);
  /* мягкое свечение */
  color: var(--wz-text);
  /* === Общие стили === */
  /* === Кнопки и карточки === */
  /* === Фильтры === */
  /* 🔄 СЕТКА КАТЕГОРИЙ - 2 В СТРОКУ */
  /* 🔄 СЕТКА ТОП МОДУЛЕЙ - 2 В СТРОКУ */
  /* 🔄 УЛУЧШЕННЫЙ СТИЛЬ ВКЛАДОК */
  /* 🔄 УЛУЧШЕННЫЙ СТИЛЬ ДЛЯ КНОПОК ВКЛАДОК */
  /* === Формы === */
  /* === Табуляторы и вкладки === */
  /* === Справочник модулей === */
  /* === СБОРКИ === */
  /* === ТОПЫ === */
  /* === 🏆 TOP RANKS (#1 / #2 / #3 / #4+) === */
  /* ======================================================
   💥 ЭФФЕКТЫ / ХОВЕР / АКТИВНОЕ СОСТОЯНИЕ
   ====================================================== */
  /* === АДАПТИВ ДЛЯ МОБИЛЬНЫХ === */
  /* === СПИСКИ И ТАБЛИЦЫ === */
  /* === АДМИН-СПИСОК | ЭКРАН: Назначить администратора === */
  /* Заголовок */
  /* Поле ввода */
  /* Кнопка "Назначить" */
  /* Статус */
  /* Разделитель */
  /* Заголовки блоков */
  /* Список админов */
  /* Элемент списка */
  /* Кнопка "Удалить" */
  /* Анимация появления */
  /* === ГЛАВНАЯ КНОПКА === */
  /* === АДАПТИВ === */
  /* === ЕДИНЫЙ СТИЛЬ ДЛЯ ВСЕХ SELECT === */
  /* ✳️ Стрелка (кастомная) */
  /* Фокус */
  /* Заблокированные */
  /* === Стили для опций === */
  /* === Адаптив под мобилки === */
  /* === КОМПАКТНЫЙ СТИЛЬ ДЛЯ БАЗЫ СБОРОК === */
  /* Адаптив для мобильных */
}
#screen-warzone-main *,
#screen-builds *,
#screen-form *,
#screen-modules-types *,
#screen-modules-list *,
#screen-edit-builds *,
#screen-assign-admin * {
  box-sizing: border-box;
}
#screen-warzone-main h1,
#screen-builds h1,
#screen-form h1,
#screen-modules-types h1,
#screen-modules-list h1,
#screen-edit-builds h1,
#screen-assign-admin h1,
#screen-warzone-main h2,
#screen-builds h2,
#screen-form h2,
#screen-modules-types h2,
#screen-modules-list h2,
#screen-edit-builds h2,
#screen-assign-admin h2,
#screen-warzone-main h3,
#screen-builds h3,
#screen-form h3,
#screen-modules-types h3,
#screen-modules-list h3,
#screen-edit-builds h3,
#screen-assign-admin h3,
#screen-warzone-main label,
#screen-builds label,
#screen-form label,
#screen-modules-types label,
#screen-modules-list label,
#screen-edit-builds label,
#screen-assign-admin label,
#screen-warzone-main .form-input,
#screen-builds .form-input,
#screen-form .form-input,
#screen-modules-types .form-input,
#screen-modules-list .form-input,
#screen-edit-builds .form-input,
#screen-assign-admin .form-input,
#screen-warzone-main .loadout__title,
#screen-builds .loadout__title,
#screen-form .loadout__title,
#screen-modules-types .loadout__title,
#screen-modules-list .loadout__title,
#screen-edit-builds .loadout__title,
#screen-assign-admin .loadout__title {
  color: #ffffff;
  text-shadow: none;
}
#screen-warzone-main .subtext,
#screen-builds .subtext,
#screen-form .subtext,
#screen-modules-types .subtext,
#screen-modules-list .subtext,
#screen-edit-builds .subtext,
#screen-assign-admin .subtext {
  font-size: 1rem;
  color: var(--wz-text-muted);
  margin-bottom: 16px;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
}
#screen-warzone-main .status-btn,
#screen-builds .status-btn,
#screen-form .status-btn,
#screen-modules-types .status-btn,
#screen-modules-list .status-btn,
#screen-edit-builds .status-btn,
#screen-assign-admin .status-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  text-align: center;
  gap: 10px;
  background: linear-gradient(145deg, #1b2324, #101617);
  color: var(--wz-text);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 -1px 4px rgba(255, 255, 255, 0.05);
  transition: all 0.25s ease;
  cursor: pointer;
}
#screen-warzone-main .btn:hover,
#screen-builds .btn:hover,
#screen-form .btn:hover,
#screen-modules-types .btn:hover,
#screen-modules-list .btn:hover,
#screen-edit-builds .btn:hover,
#screen-assign-admin .btn:hover,
#screen-warzone-main .filter-btn:hover,
#screen-builds .filter-btn:hover,
#screen-form .filter-btn:hover,
#screen-modules-types .filter-btn:hover,
#screen-modules-list .filter-btn:hover,
#screen-edit-builds .filter-btn:hover,
#screen-assign-admin .filter-btn:hover {
  background: linear-gradient(145deg, #2d9c44, #1e6b32);
  color: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 -1px 4px rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}
#screen-warzone-main .card-btn:hover,
#screen-builds .card-btn:hover,
#screen-form .card-btn:hover,
#screen-modules-types .card-btn:hover,
#screen-modules-list .card-btn:hover,
#screen-edit-builds .card-btn:hover,
#screen-assign-admin .card-btn:hover {
  border-color: var(--wz-accent);
  box-shadow: 0 0 10px var(--wz-accent-glow);
  background: linear-gradient(145deg, #1b2324, #101617);
}
#screen-warzone-main .btn:active,
#screen-builds .btn:active,
#screen-form .btn:active,
#screen-modules-types .btn:active,
#screen-modules-list .btn:active,
#screen-edit-builds .btn:active,
#screen-assign-admin .btn:active,
#screen-warzone-main .card-btn:active,
#screen-builds .card-btn:active,
#screen-form .card-btn:active,
#screen-modules-types .card-btn:active,
#screen-modules-list .card-btn:active,
#screen-edit-builds .card-btn:active,
#screen-assign-admin .card-btn:active {
  transform: scale(0.96);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}
#screen-warzone-main .btn i,
#screen-builds .btn i,
#screen-form .btn i,
#screen-modules-types .btn i,
#screen-modules-list .btn i,
#screen-edit-builds .btn i,
#screen-assign-admin .btn i,
#screen-warzone-main .card-btn i,
#screen-builds .card-btn i,
#screen-form .card-btn i,
#screen-modules-types .card-btn i,
#screen-modules-list .card-btn i,
#screen-edit-builds .card-btn i,
#screen-assign-admin .card-btn i {
  font-size: 22px;
  color: var(--wz-accent-light);
  transition: 0.25s;
}
#screen-warzone-main .btn:hover i,
#screen-builds .btn:hover i,
#screen-form .btn:hover i,
#screen-modules-types .btn:hover i,
#screen-modules-list .btn:hover i,
#screen-edit-builds .btn:hover i,
#screen-assign-admin .btn:hover i,
#screen-warzone-main .card-btn:hover i,
#screen-builds .card-btn:hover i,
#screen-form .card-btn:hover i,
#screen-modules-types .card-btn:hover i,
#screen-modules-list .card-btn:hover i,
#screen-edit-builds .card-btn:hover i,
#screen-assign-admin .card-btn:hover i {
  color: #fff;
}
#screen-warzone-main .btn span,
#screen-builds .btn span,
#screen-form .btn span,
#screen-modules-types .btn span,
#screen-modules-list .btn span,
#screen-edit-builds .btn span,
#screen-assign-admin .btn span,
#screen-warzone-main .card-btn span,
#screen-builds .card-btn span,
#screen-form .card-btn span,
#screen-modules-types .card-btn span,
#screen-modules-list .card-btn span,
#screen-edit-builds .card-btn span,
#screen-assign-admin .card-btn span {
  font-size: 0.95rem;
  color: var(--wz-text);
}
#screen-warzone-main .card-btn,
#screen-builds .card-btn,
#screen-form .card-btn,
#screen-modules-types .card-btn,
#screen-modules-list .card-btn,
#screen-edit-builds .card-btn,
#screen-assign-admin .card-btn {
  gap: 8px;
  background: linear-gradient(145deg, #1b2324, #101617);
}
#screen-warzone-main .card-btn:hover i,
#screen-builds .card-btn:hover i,
#screen-form .card-btn:hover i,
#screen-modules-types .card-btn:hover i,
#screen-modules-list .card-btn:hover i,
#screen-edit-builds .card-btn:hover i,
#screen-assign-admin .card-btn:hover i {
  transform: scale(1.15);
}
#screen-warzone-main .filter-buttons,
#screen-builds .filter-buttons,
#screen-form .filter-buttons,
#screen-modules-types .filter-buttons,
#screen-modules-list .filter-buttons,
#screen-edit-builds .filter-buttons,
#screen-assign-admin .filter-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 20px;
}
#screen-warzone-main .filter-btn,
#screen-builds .filter-btn,
#screen-form .filter-btn,
#screen-modules-types .filter-btn,
#screen-modules-list .filter-btn,
#screen-edit-builds .filter-btn,
#screen-assign-admin .filter-btn {
  padding: 8px 12px;
  background: linear-gradient(145deg, #1b2324, #101617);
  color: var(--wz-text-muted);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 1px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 -1px 4px rgba(255, 255, 255, 0.05);
}
#screen-warzone-main .filter-btn.active,
#screen-builds .filter-btn.active,
#screen-form .filter-btn.active,
#screen-modules-types .filter-btn.active,
#screen-modules-list .filter-btn.active,
#screen-edit-builds .filter-btn.active,
#screen-assign-admin .filter-btn.active {
  background: linear-gradient(145deg, #2d9c44, #1e6b32);
  color: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 -1px 4px rgba(255, 255, 255, 0.1);
}
#screen-warzone-main .filter-btn:hover:not(.active),
#screen-builds .filter-btn:hover:not(.active),
#screen-form .filter-btn:hover:not(.active),
#screen-modules-types .filter-btn:hover:not(.active),
#screen-modules-list .filter-btn:hover:not(.active),
#screen-edit-builds .filter-btn:hover:not(.active),
#screen-assign-admin .filter-btn:hover:not(.active) {
  background: linear-gradient(145deg, #223234, #141c1d);
  color: var(--wz-accent-light);
}
#screen-warzone-main .categories-grid,
#screen-builds .categories-grid,
#screen-form .categories-grid,
#screen-modules-types .categories-grid,
#screen-modules-list .categories-grid,
#screen-edit-builds .categories-grid,
#screen-assign-admin .categories-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
#screen-warzone-main .category-checkbox,
#screen-builds .category-checkbox,
#screen-form .category-checkbox,
#screen-modules-types .category-checkbox,
#screen-modules-list .category-checkbox,
#screen-edit-builds .category-checkbox,
#screen-assign-admin .category-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(145deg, #1b2324, #101617);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #2a3a3a;
  font-size: 0.9rem;
  color: var(--wz-text);
}
#screen-warzone-main .category-checkbox:hover,
#screen-builds .category-checkbox:hover,
#screen-form .category-checkbox:hover,
#screen-modules-types .category-checkbox:hover,
#screen-modules-list .category-checkbox:hover,
#screen-edit-builds .category-checkbox:hover,
#screen-assign-admin .category-checkbox:hover {
  background: linear-gradient(145deg, #223234, #141c1d);
  border-color: var(--wz-accent);
}
#screen-warzone-main .category-checkbox input[type="checkbox"],
#screen-builds .category-checkbox input[type="checkbox"],
#screen-form .category-checkbox input[type="checkbox"],
#screen-modules-types .category-checkbox input[type="checkbox"],
#screen-modules-list .category-checkbox input[type="checkbox"],
#screen-edit-builds .category-checkbox input[type="checkbox"],
#screen-assign-admin .category-checkbox input[type="checkbox"] {
  display: none;
}
#screen-warzone-main .checkmark,
#screen-builds .checkmark,
#screen-form .checkmark,
#screen-modules-types .checkmark,
#screen-modules-list .checkmark,
#screen-edit-builds .checkmark,
#screen-assign-admin .checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid var(--wz-text-muted);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
#screen-warzone-main .category-checkbox input[type="checkbox"]:checked + .checkmark,
#screen-builds .category-checkbox input[type="checkbox"]:checked + .checkmark,
#screen-form .category-checkbox input[type="checkbox"]:checked + .checkmark,
#screen-modules-types .category-checkbox input[type="checkbox"]:checked + .checkmark,
#screen-modules-list .category-checkbox input[type="checkbox"]:checked + .checkmark,
#screen-edit-builds .category-checkbox input[type="checkbox"]:checked + .checkmark,
#screen-assign-admin .category-checkbox input[type="checkbox"]:checked + .checkmark {
  background: var(--wz-accent);
  border-color: var(--wz-accent);
}
#screen-warzone-main .category-checkbox input[type="checkbox"]:checked + .checkmark::after,
#screen-builds .category-checkbox input[type="checkbox"]:checked + .checkmark::after,
#screen-form .category-checkbox input[type="checkbox"]:checked + .checkmark::after,
#screen-modules-types .category-checkbox input[type="checkbox"]:checked + .checkmark::after,
#screen-modules-list .category-checkbox input[type="checkbox"]:checked + .checkmark::after,
#screen-edit-builds .category-checkbox input[type="checkbox"]:checked + .checkmark::after,
#screen-assign-admin .category-checkbox input[type="checkbox"]:checked + .checkmark::after {
  content: "✓";
  color: white;
  font-size: 12px;
  font-weight: bold;
}
#screen-warzone-main .top-modules-grid,
#screen-builds .top-modules-grid,
#screen-form .top-modules-grid,
#screen-modules-types .top-modules-grid,
#screen-modules-list .top-modules-grid,
#screen-edit-builds .top-modules-grid,
#screen-assign-admin .top-modules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#screen-warzone-main .top-module-input,
#screen-builds .top-module-input,
#screen-form .top-module-input,
#screen-modules-types .top-module-input,
#screen-modules-list .top-module-input,
#screen-edit-builds .top-module-input,
#screen-assign-admin .top-module-input {
  margin-bottom: 0 !important;
}
#screen-warzone-main .tab-block,
#screen-builds .tab-block,
#screen-form .tab-block,
#screen-modules-types .tab-block,
#screen-modules-list .tab-block,
#screen-edit-builds .tab-block,
#screen-assign-admin .tab-block {
  background: linear-gradient(145deg, #1b2324, #101617);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #2a3a3a;
}
#screen-warzone-main .tab-label,
#screen-builds .tab-label,
#screen-form .tab-label,
#screen-modules-types .tab-label,
#screen-modules-list .tab-label,
#screen-edit-builds .tab-label,
#screen-assign-admin .tab-label {
  padding: 11px 14px;
  background: linear-gradient(145deg, #1b2324, #101617);
  border: none;
  color: #fff;
  border-radius: 8px;
  height: 44px;
  transition: 0.2s;
  width: 100%;
  font-size: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 -1px 4px rgba(255, 255, 255, 0.05);
}
#screen-warzone-main .tab-label:focus,
#screen-builds .tab-label:focus,
#screen-form .tab-label:focus,
#screen-modules-types .tab-label:focus,
#screen-modules-list .tab-label:focus,
#screen-edit-builds .tab-label:focus,
#screen-assign-admin .tab-label:focus {
  border-color: var(--wz-accent) !important;
  box-shadow: 0 0 0 2px var(--wz-accent-glow) !important;
}
#screen-warzone-main .mod-selects,
#screen-builds .mod-selects,
#screen-form .mod-selects,
#screen-modules-types .mod-selects,
#screen-modules-list .mod-selects,
#screen-edit-builds .mod-selects,
#screen-assign-admin .mod-selects {
  margin-bottom: 12px;
}
#screen-warzone-main .mod-row,
#screen-builds .mod-row,
#screen-form .mod-row,
#screen-modules-types .mod-row,
#screen-modules-list .mod-row,
#screen-edit-builds .mod-row,
#screen-assign-admin .mod-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}
#screen-warzone-main .mod-row select,
#screen-builds .mod-row select,
#screen-form .mod-row select,
#screen-modules-types .mod-row select,
#screen-modules-list .mod-row select,
#screen-edit-builds .mod-row select,
#screen-assign-admin .mod-row select {
  flex: 1;
  min-width: 0;
}
#screen-warzone-main .tab-actions,
#screen-builds .tab-actions,
#screen-form .tab-actions,
#screen-modules-types .tab-actions,
#screen-modules-list .tab-actions,
#screen-edit-builds .tab-actions,
#screen-assign-admin .tab-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
#screen-warzone-main .add-tab-btn,
#screen-builds .add-tab-btn,
#screen-form .add-tab-btn,
#screen-modules-types .add-tab-btn,
#screen-modules-list .add-tab-btn,
#screen-edit-builds .add-tab-btn,
#screen-assign-admin .add-tab-btn {
  width: 100%;
  margin-top: 8px;
  background: linear-gradient(145deg, #2d9c44, #1e6b32);
}
#screen-warzone-main .add-tab-btn:hover,
#screen-builds .add-tab-btn:hover,
#screen-form .add-tab-btn:hover,
#screen-modules-types .add-tab-btn:hover,
#screen-modules-list .add-tab-btn:hover,
#screen-edit-builds .add-tab-btn:hover,
#screen-assign-admin .add-tab-btn:hover {
  background: linear-gradient(145deg, #3cb054, #2d9c44);
}
#screen-warzone-main .tab-actions .btn,
#screen-builds .tab-actions .btn,
#screen-form .tab-actions .btn,
#screen-modules-types .tab-actions .btn,
#screen-modules-list .tab-actions .btn,
#screen-edit-builds .tab-actions .btn,
#screen-assign-admin .tab-actions .btn {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-size: 0.9rem;
}
#screen-warzone-main .tab-actions .delete-tab,
#screen-builds .tab-actions .delete-tab,
#screen-form .tab-actions .delete-tab,
#screen-modules-types .tab-actions .delete-tab,
#screen-modules-list .tab-actions .delete-tab,
#screen-edit-builds .tab-actions .delete-tab,
#screen-assign-admin .tab-actions .delete-tab {
  background: linear-gradient(145deg, #5d2a2a, #3a1a1a);
  color: #ff8a8a;
}
#screen-warzone-main .tab-actions .delete-tab:hover,
#screen-builds .tab-actions .delete-tab:hover,
#screen-form .tab-actions .delete-tab:hover,
#screen-modules-types .tab-actions .delete-tab:hover,
#screen-modules-list .tab-actions .delete-tab:hover,
#screen-edit-builds .tab-actions .delete-tab:hover,
#screen-assign-admin .tab-actions .delete-tab:hover {
  background: linear-gradient(145deg, #7a3737, #4a2222);
  color: #fff;
}
#screen-warzone-main .tab-actions .add-mod,
#screen-builds .tab-actions .add-mod,
#screen-form .tab-actions .add-mod,
#screen-modules-types .tab-actions .add-mod,
#screen-modules-list .tab-actions .add-mod,
#screen-edit-builds .tab-actions .add-mod,
#screen-assign-admin .tab-actions .add-mod {
  background: linear-gradient(145deg, #1b2324, #101617);
  border: 1px solid #2a3a3a;
}
#screen-warzone-main .tab-actions .add-mod:hover,
#screen-builds .tab-actions .add-mod:hover,
#screen-form .tab-actions .add-mod:hover,
#screen-modules-types .tab-actions .add-mod:hover,
#screen-modules-list .tab-actions .add-mod:hover,
#screen-edit-builds .tab-actions .add-mod:hover,
#screen-assign-admin .tab-actions .add-mod:hover {
  background: linear-gradient(145deg, #223234, #141c1d);
  border-color: var(--wz-accent);
}
#screen-warzone-main .form-section,
#screen-builds .form-section,
#screen-form .form-section,
#screen-modules-types .form-section,
#screen-modules-list .form-section,
#screen-edit-builds .form-section,
#screen-assign-admin .form-section {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
  gap: 0;
}
#screen-warzone-main .form-input,
#screen-builds .form-input,
#screen-form .form-input,
#screen-modules-types .form-input,
#screen-modules-list .form-input,
#screen-edit-builds .form-input,
#screen-assign-admin .form-input,
#screen-warzone-main select,
#screen-builds select,
#screen-form select,
#screen-modules-types select,
#screen-modules-list select,
#screen-edit-builds select,
#screen-assign-admin select {
  width: 100%;
  padding: 11px 14px;
  background: linear-gradient(145deg, #1b2324, #101617);
  border: none;
  color: #fff;
  border-radius: 8px;
  font-size: 0.95rem;
  height: 44px;
  transition: 0.2s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 -1px 4px rgba(255, 255, 255, 0.05);
}
#screen-warzone-main .form-input:focus,
#screen-builds .form-input:focus,
#screen-form .form-input:focus,
#screen-modules-types .form-input:focus,
#screen-modules-list .form-input:focus,
#screen-edit-builds .form-input:focus,
#screen-assign-admin .form-input:focus,
#screen-warzone-main select:focus,
#screen-builds select:focus,
#screen-form select:focus,
#screen-modules-types select:focus,
#screen-modules-list select:focus,
#screen-edit-builds select:focus,
#screen-assign-admin select:focus {
  background: linear-gradient(145deg, #223234, #141c1d);
  box-shadow: 0 0 0 2px var(--wz-accent-glow), inset 0 -1px 4px rgba(255, 255, 255, 0.1);
  outline: none;
}
#screen-warzone-main select:disabled,
#screen-builds select:disabled,
#screen-form select:disabled,
#screen-modules-types select:disabled,
#screen-modules-list select:disabled,
#screen-edit-builds select:disabled,
#screen-assign-admin select:disabled {
  color: #888;
}
#screen-warzone-main .btn.delete-tab,
#screen-builds .btn.delete-tab,
#screen-form .btn.delete-tab,
#screen-modules-types .btn.delete-tab,
#screen-modules-list .btn.delete-tab,
#screen-edit-builds .btn.delete-tab,
#screen-assign-admin .btn.delete-tab {
  background: linear-gradient(145deg, #5d2a2a, #3a1a1a);
}
#screen-warzone-main .btn.delete-tab:hover,
#screen-builds .btn.delete-tab:hover,
#screen-form .btn.delete-tab:hover,
#screen-modules-types .btn.delete-tab:hover,
#screen-modules-list .btn.delete-tab:hover,
#screen-edit-builds .btn.delete-tab:hover,
#screen-assign-admin .btn.delete-tab:hover {
  background: linear-gradient(145deg, #7a3737, #4a2222);
}
#screen-warzone-main .tab-buttons,
#screen-builds .tab-buttons,
#screen-form .tab-buttons,
#screen-modules-types .tab-buttons,
#screen-modules-list .tab-buttons,
#screen-edit-builds .tab-buttons,
#screen-assign-admin .tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
#screen-warzone-main .tab-btn,
#screen-builds .tab-btn,
#screen-form .tab-btn,
#screen-modules-types .tab-btn,
#screen-modules-list .tab-btn,
#screen-edit-builds .tab-btn,
#screen-assign-admin .tab-btn {
  background: linear-gradient(145deg, #1b2324, #101617);
  color: var(--wz-text-muted);
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
#screen-warzone-main .tab-btn:hover,
#screen-builds .tab-btn:hover,
#screen-form .tab-btn:hover,
#screen-modules-types .tab-btn:hover,
#screen-modules-list .tab-btn:hover,
#screen-edit-builds .tab-btn:hover,
#screen-assign-admin .tab-btn:hover {
  background: linear-gradient(145deg, #223234, #141c1d);
  color: var(--wz-accent-light);
}
#screen-warzone-main .tab-block,
#screen-builds .tab-block,
#screen-form .tab-block,
#screen-modules-types .tab-block,
#screen-modules-list .tab-block,
#screen-edit-builds .tab-block,
#screen-assign-admin .tab-block {
  background: linear-gradient(145deg, #1b2324, #101617);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 -1px 4px rgba(255, 255, 255, 0.05);
}
#screen-warzone-main .tab-panel,
#screen-builds .tab-panel,
#screen-form .tab-panel,
#screen-modules-types .tab-panel,
#screen-modules-list .tab-panel,
#screen-edit-builds .tab-panel,
#screen-assign-admin .tab-panel {
  padding: 16px;
  background: linear-gradient(145deg, #1e2728, #131b1c);
  border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
#screen-warzone-main .tab-actions,
#screen-builds .tab-actions,
#screen-form .tab-actions,
#screen-modules-types .tab-actions,
#screen-modules-list .tab-actions,
#screen-edit-builds .tab-actions,
#screen-assign-admin .tab-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
#screen-warzone-main .tab-actions .delete-tab,
#screen-builds .tab-actions .delete-tab,
#screen-form .tab-actions .delete-tab,
#screen-modules-types .tab-actions .delete-tab,
#screen-modules-list .tab-actions .delete-tab,
#screen-edit-builds .tab-actions .delete-tab,
#screen-assign-admin .tab-actions .delete-tab {
  background: linear-gradient(145deg, #5d2a2a, #3a1a1a);
}
#screen-warzone-main .tab-actions .delete-tab:hover,
#screen-builds .tab-actions .delete-tab:hover,
#screen-form .tab-actions .delete-tab:hover,
#screen-modules-types .tab-actions .delete-tab:hover,
#screen-modules-list .tab-actions .delete-tab:hover,
#screen-edit-builds .tab-actions .delete-tab:hover,
#screen-assign-admin .tab-actions .delete-tab:hover {
  background: linear-gradient(145deg, #7a3737, #4a2222);
}
#screen-warzone-main .mod-row,
#screen-builds .mod-row,
#screen-form .mod-row,
#screen-modules-types .mod-row,
#screen-modules-list .mod-row,
#screen-edit-builds .mod-row,
#screen-assign-admin .mod-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}
#screen-warzone-main .mod-row select,
#screen-builds .mod-row select,
#screen-form .mod-row select,
#screen-modules-types .mod-row select,
#screen-modules-list .mod-row select,
#screen-edit-builds .mod-row select,
#screen-assign-admin .mod-row select {
  width: 50%;
  flex: 0 0 50%;
  min-width: 0;
}
#screen-warzone-main #modules-types-grid,
#screen-builds #modules-types-grid,
#screen-form #modules-types-grid,
#screen-modules-types #modules-types-grid,
#screen-modules-list #modules-types-grid,
#screen-edit-builds #modules-types-grid,
#screen-assign-admin #modules-types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 24px 0;
}
#screen-warzone-main .modules-type-btn,
#screen-builds .modules-type-btn,
#screen-form .modules-type-btn,
#screen-modules-types .modules-type-btn,
#screen-modules-list .modules-type-btn,
#screen-edit-builds .modules-type-btn,
#screen-assign-admin .modules-type-btn {
  background: linear-gradient(145deg, #1b2324, #101617);
  color: var(--wz-text);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 16px;
  height: 50px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 -1px 4px rgba(255, 255, 255, 0.05);
}
#screen-warzone-main .modules-type-btn:hover,
#screen-builds .modules-type-btn:hover,
#screen-form .modules-type-btn:hover,
#screen-modules-types .modules-type-btn:hover,
#screen-modules-list .modules-type-btn:hover,
#screen-edit-builds .modules-type-btn:hover,
#screen-assign-admin .modules-type-btn:hover {
  background: linear-gradient(145deg, #2d9c44, #1e6b32);
}
#screen-warzone-main #modules-toolbar,
#screen-builds #modules-toolbar,
#screen-form #modules-toolbar,
#screen-modules-types #modules-toolbar,
#screen-modules-list #modules-toolbar,
#screen-edit-builds #modules-toolbar,
#screen-assign-admin #modules-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0 18px;
}
#screen-warzone-main #modules-toolbar .form-input,
#screen-builds #modules-toolbar .form-input,
#screen-form #modules-toolbar .form-input,
#screen-modules-types #modules-toolbar .form-input,
#screen-modules-list #modules-toolbar .form-input,
#screen-edit-builds #modules-toolbar .form-input,
#screen-assign-admin #modules-toolbar .form-input {
  height: 42px;
  border-radius: 8px;
  padding: 8px 12px;
}
#screen-warzone-main #modules-toolbar .btn,
#screen-builds #modules-toolbar .btn,
#screen-form #modules-toolbar .btn,
#screen-modules-types #modules-toolbar .btn,
#screen-modules-list #modules-toolbar .btn,
#screen-edit-builds #modules-toolbar .btn,
#screen-assign-admin #modules-toolbar .btn {
  align-self: flex-start;
  height: 42px;
  padding: 0 18px;
  background: linear-gradient(145deg, #2d9c44, #1e6b32);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
#screen-warzone-main #modules-toolbar .btn:hover,
#screen-builds #modules-toolbar .btn:hover,
#screen-form #modules-toolbar .btn:hover,
#screen-modules-types #modules-toolbar .btn:hover,
#screen-modules-list #modules-toolbar .btn:hover,
#screen-edit-builds #modules-toolbar .btn:hover,
#screen-assign-admin #modules-toolbar .btn:hover {
  background: linear-gradient(145deg, #3cb054, #2d9c44);
}
#screen-warzone-main .module-row,
#screen-builds .module-row,
#screen-form .module-row,
#screen-modules-types .module-row,
#screen-modules-list .module-row,
#screen-edit-builds .module-row,
#screen-assign-admin .module-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(145deg, #1b2324, #101617);
  border-radius: 8px;
  margin: 8px 0;
  transition: all 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 -1px 4px rgba(255, 255, 255, 0.05);
}
#screen-warzone-main .module-row:hover,
#screen-builds .module-row:hover,
#screen-form .module-row:hover,
#screen-modules-types .module-row:hover,
#screen-modules-list .module-row:hover,
#screen-edit-builds .module-row:hover,
#screen-assign-admin .module-row:hover {
  background: linear-gradient(145deg, #223234, #141c1d);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
#screen-warzone-main .module-row .mod-title,
#screen-builds .module-row .mod-title,
#screen-form .module-row .mod-title,
#screen-modules-types .module-row .mod-title,
#screen-modules-list .module-row .mod-title,
#screen-edit-builds .module-row .mod-title,
#screen-assign-admin .module-row .mod-title {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--wz-text);
}
#screen-warzone-main .module-row .mod-title .en,
#screen-builds .module-row .mod-title .en,
#screen-form .module-row .mod-title .en,
#screen-modules-types .module-row .mod-title .en,
#screen-modules-list .module-row .mod-title .en,
#screen-edit-builds .module-row .mod-title .en,
#screen-assign-admin .module-row .mod-title .en {
  text-transform: capitalize;
  color: var(--wz-text-muted);
}
#screen-warzone-main .module-row .btn.btn-sm,
#screen-builds .module-row .btn.btn-sm,
#screen-form .module-row .btn.btn-sm,
#screen-modules-types .module-row .btn.btn-sm,
#screen-modules-list .module-row .btn.btn-sm,
#screen-edit-builds .module-row .btn.btn-sm,
#screen-assign-admin .module-row .btn.btn-sm {
  width: 40px;
  height: 40px;
  background: linear-gradient(145deg, #5d2a2a, #3a1a1a);
  color: #ff8a8a;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.15s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
#screen-warzone-main .module-row .btn.btn-sm:hover,
#screen-builds .module-row .btn.btn-sm:hover,
#screen-form .module-row .btn.btn-sm:hover,
#screen-modules-types .module-row .btn.btn-sm:hover,
#screen-modules-list .module-row .btn.btn-sm:hover,
#screen-edit-builds .module-row .btn.btn-sm:hover,
#screen-assign-admin .module-row .btn.btn-sm:hover {
  background: linear-gradient(145deg, #7a3737, #4a2222);
}
#screen-warzone-main .module-row .btn.btn-sm:active,
#screen-builds .module-row .btn.btn-sm:active,
#screen-form .module-row .btn.btn-sm:active,
#screen-modules-types .module-row .btn.btn-sm:active,
#screen-modules-list .module-row .btn.btn-sm:active,
#screen-edit-builds .module-row .btn.btn-sm:active,
#screen-assign-admin .module-row .btn.btn-sm:active {
  transform: translateY(1px);
}
#screen-warzone-main .module-group,
#screen-builds .module-group,
#screen-form .module-group,
#screen-modules-types .module-group,
#screen-modules-list .module-group,
#screen-edit-builds .module-group,
#screen-assign-admin .module-group {
  background: var(--wz-card);
}
#screen-warzone-main .module-group h4,
#screen-builds .module-group h4,
#screen-form .module-group h4,
#screen-modules-types .module-group h4,
#screen-modules-list .module-group h4,
#screen-edit-builds .module-group h4,
#screen-assign-admin .module-group h4 {
  color: #ffffff;
}
#screen-warzone-main .filters-row,
#screen-builds .filters-row,
#screen-form .filters-row,
#screen-modules-types .filters-row,
#screen-modules-list .filters-row,
#screen-edit-builds .filters-row,
#screen-assign-admin .filters-row {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}
#screen-warzone-main .filters-row .form-section,
#screen-builds .filters-row .form-section,
#screen-form .filters-row .form-section,
#screen-modules-types .filters-row .form-section,
#screen-modules-list .filters-row .form-section,
#screen-edit-builds .filters-row .form-section,
#screen-assign-admin .filters-row .form-section {
  margin-bottom: 0;
}
#screen-warzone-main .loadout,
#screen-builds .loadout,
#screen-form .loadout,
#screen-modules-types .loadout,
#screen-modules-list .loadout,
#screen-edit-builds .loadout,
#screen-assign-admin .loadout {
  transition: all 0.3s ease;
  background: linear-gradient(145deg, #1b2324, #101617);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 -1px 4px rgba(255, 255, 255, 0.05);
  margin-bottom: 16px;
  overflow: hidden;
}
#screen-warzone-main .loadout:hover,
#screen-builds .loadout:hover,
#screen-form .loadout:hover,
#screen-modules-types .loadout:hover,
#screen-modules-list .loadout:hover,
#screen-edit-builds .loadout:hover,
#screen-assign-admin .loadout:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 -1px 4px rgba(255, 255, 255, 0.1);
}
#screen-warzone-main .loadout__header,
#screen-builds .loadout__header,
#screen-form .loadout__header,
#screen-modules-types .loadout__header,
#screen-modules-list .loadout__header,
#screen-edit-builds .loadout__header,
#screen-assign-admin .loadout__header {
  display: flex;
  padding: 16px;
  border-radius: 8px;
  flex-direction: column;
  background: transparent;
  color: var(--wz-text-muted);
}
#screen-warzone-main .loadout__header--top,
#screen-builds .loadout__header--top,
#screen-form .loadout__header--top,
#screen-modules-types .loadout__header--top,
#screen-modules-list .loadout__header--top,
#screen-edit-builds .loadout__header--top,
#screen-assign-admin .loadout__header--top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  flex-wrap: wrap;
}
#screen-warzone-main .loadout__toggle-icon,
#screen-builds .loadout__toggle-icon,
#screen-form .loadout__toggle-icon,
#screen-modules-types .loadout__toggle-icon,
#screen-modules-list .loadout__toggle-icon,
#screen-edit-builds .loadout__toggle-icon,
#screen-assign-admin .loadout__toggle-icon {
  background: transparent;
  border: none;
  color: var(--wz-text);
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.2s ease;
  flex-shrink: 0;
  padding: 4px;
}
#screen-warzone-main .loadout__toggle-icon:hover,
#screen-builds .loadout__toggle-icon:hover,
#screen-form .loadout__toggle-icon:hover,
#screen-modules-types .loadout__toggle-icon:hover,
#screen-modules-list .loadout__toggle-icon:hover,
#screen-edit-builds .loadout__toggle-icon:hover,
#screen-assign-admin .loadout__toggle-icon:hover {
  color: var(--wz-accent);
}
#screen-warzone-main .loadout__toggle-icon i,
#screen-builds .loadout__toggle-icon i,
#screen-form .loadout__toggle-icon i,
#screen-modules-types .loadout__toggle-icon i,
#screen-modules-list .loadout__toggle-icon i,
#screen-edit-builds .loadout__toggle-icon i,
#screen-assign-admin .loadout__toggle-icon i {
  transition: transform 0.3s ease;
}
#screen-warzone-main .loadout.is-open .loadout__toggle-icon i,
#screen-builds .loadout.is-open .loadout__toggle-icon i,
#screen-form .loadout.is-open .loadout__toggle-icon i,
#screen-modules-types .loadout.is-open .loadout__toggle-icon i,
#screen-modules-list .loadout.is-open .loadout__toggle-icon i,
#screen-edit-builds .loadout.is-open .loadout__toggle-icon i,
#screen-assign-admin .loadout.is-open .loadout__toggle-icon i {
  transform: rotate(180deg);
}
#screen-warzone-main .loadout__title,
#screen-builds .loadout__title,
#screen-form .loadout__title,
#screen-modules-types .loadout__title,
#screen-modules-list .loadout__title,
#screen-edit-builds .loadout__title,
#screen-assign-admin .loadout__title {
  flex: 1;
  font-size: 1.3rem;
  color: var(--wz-text);
  margin: 0;
  text-transform: capitalize;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#screen-warzone-main .loadout__meta,
#screen-builds .loadout__meta,
#screen-form .loadout__meta,
#screen-modules-types .loadout__meta,
#screen-modules-list .loadout__meta,
#screen-edit-builds .loadout__meta,
#screen-assign-admin .loadout__meta {
  display: flex;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
#screen-warzone-main .loadout__content,
#screen-builds .loadout__content,
#screen-form .loadout__content,
#screen-modules-types .loadout__content,
#screen-modules-list .loadout__content,
#screen-edit-builds .loadout__content,
#screen-assign-admin .loadout__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
#screen-warzone-main .loadout.is-open .loadout__content,
#screen-builds .loadout.is-open .loadout__content,
#screen-form .loadout.is-open .loadout__content,
#screen-modules-types .loadout.is-open .loadout__content,
#screen-modules-list .loadout.is-open .loadout__content,
#screen-edit-builds .loadout.is-open .loadout__content,
#screen-assign-admin .loadout.is-open .loadout__content {
  max-height: 5000px;
}
#screen-warzone-main .loadout__inner,
#screen-builds .loadout__inner,
#screen-form .loadout__inner,
#screen-modules-types .loadout__inner,
#screen-modules-list .loadout__inner,
#screen-edit-builds .loadout__inner,
#screen-assign-admin .loadout__inner {
  padding: 16px;
  background: linear-gradient(145deg, #1e2728, #131b1c);
}
#screen-warzone-main .loadout__thumb,
#screen-builds .loadout__thumb,
#screen-form .loadout__thumb,
#screen-modules-types .loadout__thumb,
#screen-modules-list .loadout__thumb,
#screen-edit-builds .loadout__thumb,
#screen-assign-admin .loadout__thumb {
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  margin: 0 auto 16px;
  display: block;
}
#screen-warzone-main .loadout__tab-buttons,
#screen-builds .loadout__tab-buttons,
#screen-form .loadout__tab-buttons,
#screen-modules-types .loadout__tab-buttons,
#screen-modules-list .loadout__tab-buttons,
#screen-edit-builds .loadout__tab-buttons,
#screen-assign-admin .loadout__tab-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}
#screen-warzone-main .loadout__tab,
#screen-builds .loadout__tab,
#screen-form .loadout__tab,
#screen-modules-types .loadout__tab,
#screen-modules-list .loadout__tab,
#screen-edit-builds .loadout__tab,
#screen-assign-admin .loadout__tab {
  flex: 1 1 calc(50% - 4px);
  min-width: 140px;
  color: var(--wz-text);
  padding: 12px 18px;
  border-radius: 6px;
  font-size: 13px;
  display: inline-block;
  background: linear-gradient(145deg, #1b2324, #101617);
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#screen-warzone-main .loadout__tab:hover,
#screen-builds .loadout__tab:hover,
#screen-form .loadout__tab:hover,
#screen-modules-types .loadout__tab:hover,
#screen-modules-list .loadout__tab:hover,
#screen-edit-builds .loadout__tab:hover,
#screen-assign-admin .loadout__tab:hover {
  background: linear-gradient(145deg, #2d9c44, #1e6b32);
  color: #fff;
}
#screen-warzone-main .loadout__tab:active,
#screen-builds .loadout__tab:active,
#screen-form .loadout__tab:active,
#screen-modules-types .loadout__tab:active,
#screen-modules-list .loadout__tab:active,
#screen-edit-builds .loadout__tab:active,
#screen-assign-admin .loadout__tab:active {
  transform: scale(0.95);
}
#screen-warzone-main .loadout__tab-content,
#screen-builds .loadout__tab-content,
#screen-form .loadout__tab-content,
#screen-modules-types .loadout__tab-content,
#screen-modules-list .loadout__tab-content,
#screen-edit-builds .loadout__tab-content,
#screen-assign-admin .loadout__tab-content {
  display: none;
}
#screen-warzone-main .loadout__tab-content.is-active,
#screen-builds .loadout__tab-content.is-active,
#screen-form .loadout__tab-content.is-active,
#screen-modules-types .loadout__tab-content.is-active,
#screen-modules-list .loadout__tab-content.is-active,
#screen-edit-builds .loadout__tab-content.is-active,
#screen-assign-admin .loadout__tab-content.is-active {
  display: block;
}
#screen-warzone-main .loadout__modules,
#screen-builds .loadout__modules,
#screen-form .loadout__modules,
#screen-modules-types .loadout__modules,
#screen-modules-list .loadout__modules,
#screen-edit-builds .loadout__modules,
#screen-assign-admin .loadout__modules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
#screen-warzone-main .loadout__module,
#screen-builds .loadout__module,
#screen-form .loadout__module,
#screen-modules-types .loadout__module,
#screen-modules-list .loadout__module,
#screen-edit-builds .loadout__module,
#screen-assign-admin .loadout__module {
  width: 100%;
  background: linear-gradient(145deg, #1b2324, #101617);
  padding: 12px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--wz-text);
  box-sizing: border-box;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 -1px 4px rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--wz-accent);
  gap: 8px;
  flex-direction: column;
}
#screen-warzone-main .loadout__module:hover,
#screen-builds .loadout__module:hover,
#screen-form .loadout__module:hover,
#screen-modules-types .loadout__module:hover,
#screen-modules-list .loadout__module:hover,
#screen-edit-builds .loadout__module:hover,
#screen-assign-admin .loadout__module:hover {
  background: linear-gradient(145deg, #223234, #141c1d);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
#screen-warzone-main .loadout__module-slot,
#screen-builds .loadout__module-slot,
#screen-form .loadout__module-slot,
#screen-modules-types .loadout__module-slot,
#screen-modules-list .loadout__module-slot,
#screen-edit-builds .loadout__module-slot,
#screen-assign-admin .loadout__module-slot {
  font-size: 0.85rem;
  color: var(--wz-text-muted);
  white-space: nowrap;
  font-weight: 500;
  flex-shrink: 0;
}
#screen-warzone-main .loadout__module-name,
#screen-builds .loadout__module-name,
#screen-form .loadout__module-name,
#screen-modules-types .loadout__module-name,
#screen-modules-list .loadout__module-name,
#screen-edit-builds .loadout__module-name,
#screen-assign-admin .loadout__module-name {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
#screen-warzone-main .loadout__tops,
#screen-builds .loadout__tops,
#screen-form .loadout__tops,
#screen-modules-types .loadout__tops,
#screen-modules-list .loadout__tops,
#screen-edit-builds .loadout__tops,
#screen-assign-admin .loadout__tops {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
#screen-warzone-main .badge-category,
#screen-builds .badge-category,
#screen-form .badge-category,
#screen-modules-types .badge-category,
#screen-modules-list .badge-category,
#screen-edit-builds .badge-category,
#screen-assign-admin .badge-category {
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 8px;
  margin-right: 4px;
  font-size: 0.7rem;
  letter-spacing: 0.3px;
  display: inline-block;
  white-space: nowrap;
}
#screen-warzone-main .loadout__top,
#screen-builds .loadout__top,
#screen-form .loadout__top,
#screen-modules-types .loadout__top,
#screen-modules-list .loadout__top,
#screen-edit-builds .loadout__top,
#screen-assign-admin .loadout__top {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-right: 4px;
  white-space: nowrap;
}
#screen-warzone-main .loadout__type,
#screen-builds .loadout__type,
#screen-form .loadout__type,
#screen-modules-types .loadout__type,
#screen-modules-list .loadout__type,
#screen-edit-builds .loadout__type,
#screen-assign-admin .loadout__type {
  background: rgba(58, 123, 73, 0.15);
  border: 1px solid rgba(58, 123, 73, 0.4);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  display: inline-block;
  white-space: nowrap;
  color: #7bff9a;
}
#screen-warzone-main .loadout:hover,
#screen-builds .loadout:hover,
#screen-form .loadout:hover,
#screen-modules-types .loadout:hover,
#screen-modules-list .loadout:hover,
#screen-edit-builds .loadout:hover,
#screen-assign-admin .loadout:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(0, 255, 130, 0.1);
  border-color: rgba(0, 255, 130, 0.3);
}
#screen-warzone-main .loadout.is-open,
#screen-builds .loadout.is-open,
#screen-form .loadout.is-open,
#screen-modules-types .loadout.is-open,
#screen-modules-list .loadout.is-open,
#screen-edit-builds .loadout.is-open,
#screen-assign-admin .loadout.is-open {
  box-shadow: 0 0 20px rgba(0, 255, 150, 0.2);
  border-color: rgba(0, 255, 150, 0.5);
}
#screen-warzone-main .loadout__date,
#screen-builds .loadout__date,
#screen-form .loadout__date,
#screen-modules-types .loadout__date,
#screen-modules-list .loadout__date,
#screen-edit-builds .loadout__date,
#screen-assign-admin .loadout__date {
  font-size: 0.8rem;
  color: var(--wz-text-muted);
  white-space: nowrap;
}
#screen-warzone-main .loadout__module-count,
#screen-builds .loadout__module-count,
#screen-form .loadout__module-count,
#screen-modules-types .loadout__module-count,
#screen-modules-list .loadout__module-count,
#screen-edit-builds .loadout__module-count,
#screen-assign-admin .loadout__module-count {
  font-size: 0.8rem;
  color: var(--wz-text-muted);
  white-space: nowrap;
}
@media (max-width: 768px) {
  #screen-warzone-main .loadout__header,
  #screen-builds .loadout__header,
  #screen-form .loadout__header,
  #screen-modules-types .loadout__header,
  #screen-modules-list .loadout__header,
  #screen-edit-builds .loadout__header,
  #screen-assign-admin .loadout__header {
    padding: 12px;
  }
  #screen-warzone-main .loadout__header--top,
  #screen-builds .loadout__header--top,
  #screen-form .loadout__header--top,
  #screen-modules-types .loadout__header--top,
  #screen-modules-list .loadout__header--top,
  #screen-edit-builds .loadout__header--top,
  #screen-assign-admin .loadout__header--top {
    gap: 8px;
    align-items: center;
  }
  #screen-warzone-main .loadout__title,
  #screen-builds .loadout__title,
  #screen-form .loadout__title,
  #screen-modules-types .loadout__title,
  #screen-modules-list .loadout__title,
  #screen-edit-builds .loadout__title,
  #screen-assign-admin .loadout__title {
    font-size: 1.1rem;
    line-height: 1.2;
  }
  #screen-warzone-main .loadout__meta,
  #screen-builds .loadout__meta,
  #screen-form .loadout__meta,
  #screen-modules-types .loadout__meta,
  #screen-modules-list .loadout__meta,
  #screen-edit-builds .loadout__meta,
  #screen-assign-admin .loadout__meta {
    margin-top: 8px;
    gap: 6px;
  }
  #screen-warzone-main .loadout__inner,
  #screen-builds .loadout__inner,
  #screen-form .loadout__inner,
  #screen-modules-types .loadout__inner,
  #screen-modules-list .loadout__inner,
  #screen-edit-builds .loadout__inner,
  #screen-assign-admin .loadout__inner {
    padding: 12px;
  }
  #screen-warzone-main .loadout__tab,
  #screen-builds .loadout__tab,
  #screen-form .loadout__tab,
  #screen-modules-types .loadout__tab,
  #screen-modules-list .loadout__tab,
  #screen-edit-builds .loadout__tab,
  #screen-assign-admin .loadout__tab {
    flex: 1 1 100%;
    min-width: auto;
    padding: 8px 10px;
    font-size: 12px;
  }
  #screen-warzone-main .loadout__tops,
  #screen-builds .loadout__tops,
  #screen-form .loadout__tops,
  #screen-modules-types .loadout__tops,
  #screen-modules-list .loadout__tops,
  #screen-edit-builds .loadout__tops,
  #screen-assign-admin .loadout__tops {
    gap: 4px;
  }
  #screen-warzone-main .loadout__date,
  #screen-builds .loadout__date,
  #screen-form .loadout__date,
  #screen-modules-types .loadout__date,
  #screen-modules-list .loadout__date,
  #screen-edit-builds .loadout__date,
  #screen-assign-admin .loadout__date,
  #screen-warzone-main .loadout__module-count,
  #screen-builds .loadout__module-count,
  #screen-form .loadout__module-count,
  #screen-modules-types .loadout__module-count,
  #screen-modules-list .loadout__module-count,
  #screen-edit-builds .loadout__module-count,
  #screen-assign-admin .loadout__module-count {
    font-size: 0.75rem;
  }
}
#screen-warzone-main .loadout__categories,
#screen-builds .loadout__categories,
#screen-form .loadout__categories,
#screen-modules-types .loadout__categories,
#screen-modules-list .loadout__categories,
#screen-edit-builds .loadout__categories,
#screen-assign-admin .loadout__categories {
  display: flex;
  gap: 6px;
}
#screen-warzone-main .category-divider,
#screen-builds .category-divider,
#screen-form .category-divider,
#screen-modules-types .category-divider,
#screen-modules-list .category-divider,
#screen-edit-builds .category-divider,
#screen-assign-admin .category-divider {
  width: 100%;
  height: 2px;
  margin: 9px 0 25px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.8), rgba(0, 255, 136, 0.15));
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
  opacity: 0.9;
  animation: dividerPulse 3s ease-in-out infinite;
}
@keyframes dividerPulse {
  0%,
  100% {
    opacity: 0.8;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.7);
  }
}
#screen-warzone-main #builds-list,
#screen-builds #builds-list,
#screen-form #builds-list,
#screen-modules-types #builds-list,
#screen-modules-list #builds-list,
#screen-edit-builds #builds-list,
#screen-assign-admin #builds-list {
  display: flex;
  flex-direction: column;
}
#screen-warzone-main .build-card,
#screen-builds .build-card,
#screen-form .build-card,
#screen-modules-types .build-card,
#screen-modules-list .build-card,
#screen-edit-builds .build-card,
#screen-assign-admin .build-card {
  background: linear-gradient(145deg, #1b2324, #101617);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 8px;
  color: var(--wz-text);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 -1px 4px rgba(255, 255, 255, 0.05);
}
#screen-warzone-main .build-card:hover,
#screen-builds .build-card:hover,
#screen-form .build-card:hover,
#screen-modules-types .build-card:hover,
#screen-modules-list .build-card:hover,
#screen-edit-builds .build-card:hover,
#screen-assign-admin .build-card:hover {
  background: linear-gradient(145deg, #223234, #141c1d);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
#screen-warzone-main .build-actions,
#screen-builds .build-actions,
#screen-form .build-actions,
#screen-modules-types .build-actions,
#screen-modules-list .build-actions,
#screen-edit-builds .build-actions,
#screen-assign-admin .build-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
#screen-warzone-main .btn.btn-sm,
#screen-builds .btn.btn-sm,
#screen-form .btn.btn-sm,
#screen-modules-types .btn.btn-sm,
#screen-modules-list .btn.btn-sm,
#screen-edit-builds .btn.btn-sm,
#screen-assign-admin .btn.btn-sm {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 6px;
  min-height: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
#screen-warzone-main #screen-assign-admin,
#screen-builds #screen-assign-admin,
#screen-form #screen-assign-admin,
#screen-modules-types #screen-assign-admin,
#screen-modules-list #screen-assign-admin,
#screen-edit-builds #screen-assign-admin,
#screen-assign-admin #screen-assign-admin {
  background: linear-gradient(145deg, #181d24, #111519);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  color: #fff;
  animation: fadeIn 0.3s ease;
  padding: 24px 24px 32px;
  max-width: 520px;
  margin: 0 auto;
}
#screen-warzone-main #screen-assign-admin h3,
#screen-builds #screen-assign-admin h3,
#screen-form #screen-assign-admin h3,
#screen-modules-types #screen-assign-admin h3,
#screen-modules-list #screen-assign-admin h3,
#screen-edit-builds #screen-assign-admin h3,
#screen-assign-admin #screen-assign-admin h3 {
  font-size: 1.4rem;
  margin-bottom: 20px;
  color: #fff;
  text-align: center;
}
#screen-warzone-main #new-admin-id,
#screen-builds #new-admin-id,
#screen-form #new-admin-id,
#screen-modules-types #new-admin-id,
#screen-modules-list #new-admin-id,
#screen-edit-builds #new-admin-id,
#screen-assign-admin #new-admin-id {
  width: 100%;
  background: #0d1116;
  border: 1px solid #232a32;
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: border 0.2s ease, background 0.2s ease;
}
#screen-warzone-main #new-admin-id:focus,
#screen-builds #new-admin-id:focus,
#screen-form #new-admin-id:focus,
#screen-modules-types #new-admin-id:focus,
#screen-modules-list #new-admin-id:focus,
#screen-edit-builds #new-admin-id:focus,
#screen-assign-admin #new-admin-id:focus {
  border-color: #3fb950;
  background: #12171d;
}
#screen-warzone-main #submit-admin-id,
#screen-builds #submit-admin-id,
#screen-form #submit-admin-id,
#screen-modules-types #submit-admin-id,
#screen-modules-list #submit-admin-id,
#screen-edit-builds #submit-admin-id,
#screen-assign-admin #submit-admin-id {
  margin-top: 16px;
}
#screen-warzone-main #assign-admin-status,
#screen-builds #assign-admin-status,
#screen-form #assign-admin-status,
#screen-modules-types #assign-admin-status,
#screen-modules-list #assign-admin-status,
#screen-edit-builds #assign-admin-status,
#screen-assign-admin #assign-admin-status {
  margin-top: 10px;
  font-size: 14px;
  color: #8b949e;
  text-align: center;
}
#screen-warzone-main #screen-assign-admin hr,
#screen-builds #screen-assign-admin hr,
#screen-form #screen-assign-admin hr,
#screen-modules-types #screen-assign-admin hr,
#screen-modules-list #screen-assign-admin hr,
#screen-edit-builds #screen-assign-admin hr,
#screen-assign-admin #screen-assign-admin hr {
  border: none;
  height: 1px;
  background: #232a32;
  margin: 28px 0 20px;
}
#screen-warzone-main #admin-list strong,
#screen-builds #admin-list strong,
#screen-form #admin-list strong,
#screen-modules-types #admin-list strong,
#screen-modules-list #admin-list strong,
#screen-edit-builds #admin-list strong,
#screen-assign-admin #admin-list strong {
  display: block;
  margin: 14px 0 8px;
  color: #9cc9ff;
  font-size: 15px;
}
#screen-warzone-main #admin-list,
#screen-builds #admin-list,
#screen-form #admin-list,
#screen-modules-types #admin-list,
#screen-modules-list #admin-list,
#screen-edit-builds #admin-list,
#screen-assign-admin #admin-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
#screen-warzone-main #admin-list li,
#screen-builds #admin-list li,
#screen-form #admin-list li,
#screen-modules-types #admin-list li,
#screen-modules-list #admin-list li,
#screen-edit-builds #admin-list li,
#screen-assign-admin #admin-list li {
  list-style: none;
  background: #0d1116;
  border: 1px solid #1e242b;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
#screen-warzone-main #admin-list li:hover,
#screen-builds #admin-list li:hover,
#screen-form #admin-list li:hover,
#screen-modules-types #admin-list li:hover,
#screen-modules-list #admin-list li:hover,
#screen-edit-builds #admin-list li:hover,
#screen-assign-admin #admin-list li:hover {
  background: #12171d;
  border-color: #2a323b;
}
#screen-warzone-main #admin-list li span,
#screen-builds #admin-list li span,
#screen-form #admin-list li span,
#screen-modules-types #admin-list li span,
#screen-modules-list #admin-list li span,
#screen-edit-builds #admin-list li span,
#screen-assign-admin #admin-list li span {
  flex: 1;
  font-size: 14px;
  word-break: break-word;
}
#screen-warzone-main #admin-list li button,
#screen-builds #admin-list li button,
#screen-form #admin-list li button,
#screen-modules-types #admin-list li button,
#screen-modules-list #admin-list li button,
#screen-edit-builds #admin-list li button,
#screen-assign-admin #admin-list li button {
  background: #2f1a1a;
  border: 1px solid #803333;
  color: #ff6b6b;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#screen-warzone-main #admin-list li button:hover,
#screen-builds #admin-list li button:hover,
#screen-form #admin-list li button:hover,
#screen-modules-types #admin-list li button:hover,
#screen-modules-list #admin-list li button:hover,
#screen-edit-builds #admin-list li button:hover,
#screen-assign-admin #admin-list li button:hover {
  background: #a33636;
  color: #fff;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#screen-warzone-main #screen-warzone-main.active .global-home-button,
#screen-builds #screen-warzone-main.active .global-home-button,
#screen-form #screen-warzone-main.active .global-home-button,
#screen-modules-types #screen-warzone-main.active .global-home-button,
#screen-modules-list #screen-warzone-main.active .global-home-button,
#screen-edit-builds #screen-warzone-main.active .global-home-button,
#screen-assign-admin #screen-warzone-main.active .global-home-button {
  display: block;
}
#screen-warzone-main .global-home-button .btn,
#screen-builds .global-home-button .btn,
#screen-form .global-home-button .btn,
#screen-modules-types .global-home-button .btn,
#screen-modules-list .global-home-button .btn,
#screen-edit-builds .global-home-button .btn,
#screen-assign-admin .global-home-button .btn {
  background: linear-gradient(145deg, #1b2324, #101617);
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
#screen-warzone-main .global-home-button .btn:hover,
#screen-builds .global-home-button .btn:hover,
#screen-form .global-home-button .btn:hover,
#screen-modules-types .global-home-button .btn:hover,
#screen-modules-list .global-home-button .btn:hover,
#screen-edit-builds .global-home-button .btn:hover,
#screen-assign-admin .global-home-button .btn:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
@media (max-width: 480px) {
  #screen-warzone-main .loadout__module,
  #screen-builds .loadout__module,
  #screen-form .loadout__module,
  #screen-modules-types .loadout__module,
  #screen-modules-list .loadout__module,
  #screen-edit-builds .loadout__module,
  #screen-assign-admin .loadout__module {
    width: 100%;
  }
  #screen-warzone-main .loadout__tab,
  #screen-builds .loadout__tab,
  #screen-form .loadout__tab,
  #screen-modules-types .loadout__tab,
  #screen-modules-list .loadout__tab,
  #screen-edit-builds .loadout__tab,
  #screen-assign-admin .loadout__tab {
    flex: 1 1 100%;
  }
}
#screen-warzone-main select,
#screen-builds select,
#screen-form select,
#screen-modules-types select,
#screen-modules-list select,
#screen-edit-builds select,
#screen-assign-admin select {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(145deg, #1b2324, #101617);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 -1px 4px rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
  appearance: none;
  /* убираем стандартную стрелку */
  position: relative;
  cursor: pointer;
}
#screen-warzone-main select::-ms-expand,
#screen-builds select::-ms-expand,
#screen-form select::-ms-expand,
#screen-modules-types select::-ms-expand,
#screen-modules-list select::-ms-expand,
#screen-edit-builds select::-ms-expand,
#screen-assign-admin select::-ms-expand {
  display: none;
}
#screen-warzone-main select::after,
#screen-builds select::after,
#screen-form select::after,
#screen-modules-types select::after,
#screen-modules-list select::after,
#screen-edit-builds select::after,
#screen-assign-admin select::after {
  content: "▼";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--wz-accent-light);
  pointer-events: none;
}
#screen-warzone-main select:focus,
#screen-builds select:focus,
#screen-form select:focus,
#screen-modules-types select:focus,
#screen-modules-list select:focus,
#screen-edit-builds select:focus,
#screen-assign-admin select:focus {
  background: linear-gradient(145deg, #223234, #141c1d);
  box-shadow: 0 0 0 2px var(--wz-accent-glow), inset 0 -1px 4px rgba(255, 255, 255, 0.1);
  outline: none;
}
#screen-warzone-main select:disabled,
#screen-builds select:disabled,
#screen-form select:disabled,
#screen-modules-types select:disabled,
#screen-modules-list select:disabled,
#screen-edit-builds select:disabled,
#screen-assign-admin select:disabled {
  background: #181d1d;
  color: #777;
  cursor: not-allowed;
}
#screen-warzone-main select option,
#screen-builds select option,
#screen-form select option,
#screen-modules-types select option,
#screen-modules-list select option,
#screen-edit-builds select option,
#screen-assign-admin select option {
  background: #101617;
  color: #fff;
  padding: 10px;
  border: none;
}
#screen-warzone-main select option:hover,
#screen-builds select option:hover,
#screen-form select option:hover,
#screen-modules-types select option:hover,
#screen-modules-list select option:hover,
#screen-edit-builds select option:hover,
#screen-assign-admin select option:hover,
#screen-warzone-main select option:checked,
#screen-builds select option:checked,
#screen-form select option:checked,
#screen-modules-types select option:checked,
#screen-modules-list select option:checked,
#screen-edit-builds select option:checked,
#screen-assign-admin select option:checked,
#screen-warzone-main select option:focus,
#screen-builds select option:focus,
#screen-form select option:focus,
#screen-modules-types select option:focus,
#screen-modules-list select option:focus,
#screen-edit-builds select option:focus,
#screen-assign-admin select option:focus {
  background: #1e6b32;
  color: #fff;
}
@media (max-width: 480px) {
  #screen-warzone-main select,
  #screen-builds select,
  #screen-form select,
  #screen-modules-types select,
  #screen-modules-list select,
  #screen-edit-builds select,
  #screen-assign-admin select {
    height: 40px;
    font-size: 0.9rem;
  }
}
#screen-warzone-main .compact-build-card,
#screen-builds .compact-build-card,
#screen-form .compact-build-card,
#screen-modules-types .compact-build-card,
#screen-modules-list .compact-build-card,
#screen-edit-builds .compact-build-card,
#screen-assign-admin .compact-build-card {
  background: linear-gradient(145deg, #1b2324, #101617);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
  border: 1px solid #2a3a3a;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
#screen-warzone-main .compact-build-card:hover,
#screen-builds .compact-build-card:hover,
#screen-form .compact-build-card:hover,
#screen-modules-types .compact-build-card:hover,
#screen-modules-list .compact-build-card:hover,
#screen-edit-builds .compact-build-card:hover,
#screen-assign-admin .compact-build-card:hover {
  background: linear-gradient(145deg, #223234, #141c1d);
  border-color: var(--wz-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
#screen-warzone-main .compact-card-header,
#screen-builds .compact-card-header,
#screen-form .compact-card-header,
#screen-modules-types .compact-card-header,
#screen-modules-list .compact-card-header,
#screen-edit-builds .compact-card-header,
#screen-assign-admin .compact-card-header {
  flex: 1;
  min-width: 0;
}
#screen-warzone-main .compact-card-main,
#screen-builds .compact-card-main,
#screen-form .compact-card-main,
#screen-modules-types .compact-card-main,
#screen-modules-list .compact-card-main,
#screen-edit-builds .compact-card-main,
#screen-assign-admin .compact-card-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
#screen-warzone-main .compact-index,
#screen-builds .compact-index,
#screen-form .compact-index,
#screen-modules-types .compact-index,
#screen-modules-list .compact-index,
#screen-edit-builds .compact-index,
#screen-assign-admin .compact-index {
  background: var(--wz-accent);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  min-width: 24px;
  text-align: center;
}
#screen-warzone-main .compact-title,
#screen-builds .compact-title,
#screen-form .compact-title,
#screen-modules-types .compact-title,
#screen-modules-list .compact-title,
#screen-edit-builds .compact-title,
#screen-assign-admin .compact-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wz-text);
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#screen-warzone-main .compact-badge,
#screen-builds .compact-badge,
#screen-form .compact-badge,
#screen-modules-types .compact-badge,
#screen-modules-list .compact-badge,
#screen-edit-builds .compact-badge,
#screen-assign-admin .compact-badge {
  font-size: 0.8rem;
  padding: 2px 4px;
}
#screen-warzone-main .compact-card-meta,
#screen-builds .compact-card-meta,
#screen-form .compact-card-meta,
#screen-modules-types .compact-card-meta,
#screen-modules-list .compact-card-meta,
#screen-edit-builds .compact-card-meta,
#screen-assign-admin .compact-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--wz-text-muted);
  flex-direction: column;
}
#screen-warzone-main .compact-type,
#screen-builds .compact-type,
#screen-form .compact-type,
#screen-modules-types .compact-type,
#screen-modules-list .compact-type,
#screen-edit-builds .compact-type,
#screen-assign-admin .compact-type {
  background: rgba(45, 156, 68, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(45, 156, 68, 0.3);
}
#screen-warzone-main .compact-tabs,
#screen-builds .compact-tabs,
#screen-form .compact-tabs,
#screen-modules-types .compact-tabs,
#screen-modules-list .compact-tabs,
#screen-edit-builds .compact-tabs,
#screen-assign-admin .compact-tabs {
  background: rgba(128, 128, 128, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(128, 128, 128, 0.3);
}
#screen-warzone-main .compact-card-actions,
#screen-builds .compact-card-actions,
#screen-form .compact-card-actions,
#screen-modules-types .compact-card-actions,
#screen-modules-list .compact-card-actions,
#screen-edit-builds .compact-card-actions,
#screen-assign-admin .compact-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
#screen-warzone-main .compact-card-actions .btn,
#screen-builds .compact-card-actions .btn,
#screen-form .compact-card-actions .btn,
#screen-modules-types .compact-card-actions .btn,
#screen-modules-list .compact-card-actions .btn,
#screen-edit-builds .compact-card-actions .btn,
#screen-assign-admin .compact-card-actions .btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  border-radius: 6px;
}
#screen-warzone-main .btn-edit,
#screen-builds .btn-edit,
#screen-form .btn-edit,
#screen-modules-types .btn-edit,
#screen-modules-list .btn-edit,
#screen-edit-builds .btn-edit,
#screen-assign-admin .btn-edit {
  background: linear-gradient(145deg, #2d5c9c, #1e3b6b);
  border: 1px solid rgba(45, 92, 156, 0.3);
}
#screen-warzone-main .btn-edit:hover,
#screen-builds .btn-edit:hover,
#screen-form .btn-edit:hover,
#screen-modules-types .btn-edit:hover,
#screen-modules-list .btn-edit:hover,
#screen-edit-builds .btn-edit:hover,
#screen-assign-admin .btn-edit:hover {
  background: linear-gradient(145deg, #3c6cb0, #2d5c9c);
}
#screen-warzone-main .btn-delete,
#screen-builds .btn-delete,
#screen-form .btn-delete,
#screen-modules-types .btn-delete,
#screen-modules-list .btn-delete,
#screen-edit-builds .btn-delete,
#screen-assign-admin .btn-delete {
  background: linear-gradient(145deg, #9c2d2d, #6b1e1e);
  border: 1px solid rgba(156, 45, 45, 0.3);
}
#screen-warzone-main .btn-delete:hover,
#screen-builds .btn-delete:hover,
#screen-form .btn-delete:hover,
#screen-modules-types .btn-delete:hover,
#screen-modules-list .btn-delete:hover,
#screen-edit-builds .btn-delete:hover,
#screen-assign-admin .btn-delete:hover {
  background: linear-gradient(145deg, #b03c3c, #9c2d2d);
}
@media (max-width: 768px) {
  #screen-warzone-main .compact-build-card,
  #screen-builds .compact-build-card,
  #screen-form .compact-build-card,
  #screen-modules-types .compact-build-card,
  #screen-modules-list .compact-build-card,
  #screen-edit-builds .compact-build-card,
  #screen-assign-admin .compact-build-card {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #screen-warzone-main .compact-card-main,
  #screen-builds .compact-card-main,
  #screen-form .compact-card-main,
  #screen-modules-types .compact-card-main,
  #screen-modules-list .compact-card-main,
  #screen-edit-builds .compact-card-main,
  #screen-assign-admin .compact-card-main {
    gap: 8px;
  }
  #screen-warzone-main .compact-title,
  #screen-builds .compact-title,
  #screen-form .compact-title,
  #screen-modules-types .compact-title,
  #screen-modules-list .compact-title,
  #screen-edit-builds .compact-title,
  #screen-assign-admin .compact-title {
    font-size: 0.95rem;
  }
  #screen-warzone-main .compact-card-meta,
  #screen-builds .compact-card-meta,
  #screen-form .compact-card-meta,
  #screen-modules-types .compact-card-meta,
  #screen-modules-list .compact-card-meta,
  #screen-edit-builds .compact-card-meta,
  #screen-assign-admin .compact-card-meta {
    justify-content: space-between;
  }
  #screen-warzone-main .compact-card-actions,
  #screen-builds .compact-card-actions,
  #screen-form .compact-card-actions,
  #screen-modules-types .compact-card-actions,
  #screen-modules-list .compact-card-actions,
  #screen-edit-builds .compact-card-actions,
  #screen-assign-admin .compact-card-actions {
    align-self: flex-end;
  }
}
@media (max-width: 480px) {
  #screen-warzone-main .compact-build-card,
  #screen-builds .compact-build-card,
  #screen-form .compact-build-card,
  #screen-modules-types .compact-build-card,
  #screen-modules-list .compact-build-card,
  #screen-edit-builds .compact-build-card,
  #screen-assign-admin .compact-build-card {
    padding: 12px;
  }
  #screen-warzone-main .compact-card-main,
  #screen-builds .compact-card-main,
  #screen-form .compact-card-main,
  #screen-modules-types .compact-card-main,
  #screen-modules-list .compact-card-main,
  #screen-edit-builds .compact-card-main,
  #screen-assign-admin .compact-card-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  #screen-warzone-main .compact-index,
  #screen-builds .compact-index,
  #screen-form .compact-index,
  #screen-modules-types .compact-index,
  #screen-modules-list .compact-index,
  #screen-edit-builds .compact-index,
  #screen-assign-admin .compact-index {
    align-self: flex-start;
  }
}
#screen-warzone-main .btn,
#screen-builds .btn,
#screen-form .btn,
#screen-modules-types .btn,
#screen-modules-list .btn,
#screen-edit-builds .btn,
#screen-assign-admin .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  background: var(--wz-card);
  color: var(--wz-text);
  border: 1px solid var(--wz-border);
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  min-height: 50px;
  padding: 0 14px;
  transition: all 0.25s ease;
  cursor: pointer;
}
/* BATTLEFIELD */
/* === Battlefield Tabs === */
/* === Battlefield Tabs Scrollbar === */
#bf-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 10px 0;
  /* ✅ добавил отступы сверху/снизу */
  scrollbar-width: thin;
  scroll-behavior: smooth;
  margin-bottom: 14px;
}
/* Firefox scrollbar */
#bf-tabs {
  scrollbar-color: rgba(0, 180, 255, 0.5) transparent;
}
/* Chrome / Edge / Safari */
#bf-tabs::-webkit-scrollbar {
  height: 6px;
  margin-top: 4px;
}
#bf-tabs::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}
#bf-tabs::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(0, 180, 255, 0.5), rgba(0, 220, 255, 0.7));
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 180, 255, 0.4);
  transition: background 0.3s ease;
}
#bf-tabs::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, rgba(0, 220, 255, 0.8), rgba(0, 255, 255, 0.9));
}
#screen-battlefield-main .form-section {
  gap: 0;
}
/* Элементы вкладок */
.tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* === Battlefield Tabs — чуть крупнее и с мягкими краями === */
#bf-tabs .tab-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--bf-text);
  border: 1px solid var(--bf-border);
  border-radius: 10px;
  padding: 12px 20px;
  /* было 10px 16px — увеличено */
  font-size: 14px;
  letter-spacing: 0.4px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
#bf-tabs .tab-btn:hover {
  border-color: var(--bf-accent);
  color: var(--bf-accent);
}
#bf-tabs .tab-btn.active {
  background: linear-gradient(90deg, var(--bf-accent), var(--bf-accent-dim));
  color: #fff;
  border: none;
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.3);
}
/* === Исправление черных углов и размытия завершенных карточек === */
.challenge-card-user.completed {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  /* ✅ убирает черные углы */
  filter: none;
  /* ✅ убираем глобальное размытие */
}
/* Надпись "ЗАВЕРШЕНО!" */
.challenge-card-user.completed .completed-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 14px;
  /* ✅ совпадает с карточкой */
  font-size: 22px;
  font-weight: 800;
  color: #00ffc3;
  text-shadow: 0 0 10px #00ffe1, 0 0 20px rgba(0, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.45);
  /* ✅ затемнение только фона */
  backdrop-filter: blur(1px);
  /* ✅ мягкий фон */
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9);
  animation: fadeInCompleted 0.35s ease forwards;
  z-index: 3;
}
@keyframes fadeInCompleted {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* ===============================
   🎨 Панель фильтров и поиска BF
   =============================== */
.filters-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.filters-row .form-section {
  margin: 0;
}
.search-section {
  margin-bottom: 12px;
}
#bf-weapon-filter,
#bf-category-filter {
  width: 100%;
  height: 42px;
  background: #121820;
  border: 1px solid #1f2b38;
  color: #e0e6ee;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  outline: none;
  appearance: none;
  cursor: pointer;
}
#bf-weapon-filter:hover,
#bf-category-filter:hover {
  border-color: #3a7bd5;
}
#bf-weapon-filter:focus,
#bf-category-filter:focus {
  border-color: #3a7bd5;
  box-shadow: 0 0 0 3px rgba(58, 123, 213, 0.25);
}
/* Иконка поиска внутри */
#bf-builds-search {
  width: 100%;
  height: 42px;
  border-radius: 8px;
  background: #121820;
  border: 1px solid #1f2b38;
  color: #e0e6ee;
  padding: 0 38px 0 38px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='%239cc9ff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.471 6.471 0 001.48-5.34C15.2 5.01 12.42 2 8.9 2 5.38 2 2.6 5.01 2.6 8.39c0 3.38 2.78 6.39 6.3 6.39 1.61 0 3.09-.59 4.23-1.56l.27.28v.79l4.99 5L20.5 19l-5-5zm-6.6 0C6.01 14 3.6 11.59 3.6 8.39S6.01 2.78 8.9 2.78s5.3 2.41 5.3 5.61S11.79 14 8.9 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 18px;
}
#bf-builds-search::placeholder {
  color: #7a8a9d;
}
#bf-builds-search:hover {
  border-color: #3a7bd5;
}
#bf-builds-search:focus {
  border-color: #3a7bd5;
  box-shadow: 0 0 0 3px rgba(58, 123, 213, 0.25);
}
/* Общий контейнер фильтров */
#screen-bf-builds {
  background: #0f141a;
  color: #e0e6ee;
  padding: 20px;
  border-radius: 12px;
}
/* Кол-во испытаний в кнопках */
.status-btn .count {
  font-weight: 500;
  color: #a7c8ff;
  margin-left: 6px;
}
/* === Кнопки статусов === */
.status-tabs {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.status-btn {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 10px;
  background: #1c2433;
  color: #a0b3c8;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.status-btn.active {
  background: var(--nd-accent);
  color: #fff;
}
.status-btn:not(.active) {
  background: #1a1f25;
  color: var(--nd-text-muted);
}
/* --- Завершённые испытания --- */
.challenge-card-user.completed {
  position: relative;
  opacity: 1;
  filter: none;
}
/* Чистая надпись поверх карточки */
.completed-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  /* затемнение фона под текстом */
  font-size: 22px;
  font-weight: 800;
  color: #00ffc3;
  text-shadow: 0 0 10px #00ffe1, 0 0 20px rgba(0, 255, 255, 0.5);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: scale(0.9);
  animation: fadeInCompleted 0.35s ease forwards;
}
/* Плавное появление текста */
@keyframes fadeInCompleted {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* Мобильная адаптация */
@media (max-width: 600px) {
  .completed-overlay {
    font-size: 18px;
    background: rgba(0, 0, 0, 0.65);
    text-shadow: 0 0 8px #00ffe1;
  }
}
/* Прогресс и кнопки */
.progress-controls {
  display: flex;
  justify-content: right;
  gap: 10px;
  margin-top: 12px;
}
.btn-mini {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, background 0.2s ease;
}
.btn-mini i {
  pointer-events: none;
}
.btn-mini:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.08);
}
.bf-tip-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 157, 255, 0.25);
  border: 1px solid #00aaff;
  color: #fff;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 20px rgba(0, 157, 255, 0.4);
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
}
.bf-tip-popup.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}
.category-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.category-actions .btn-mini {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.category-actions .btn-mini:hover {
  background: rgba(0, 157, 255, 0.2);
  border-color: var(--nd-accent);
}
.no-active-message {
  text-align: center;
  color: #9fb6cc;
  font-size: 15px;
  line-height: 1.5;
  padding: 30px 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Сетка карточек */
#bf-challenges-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
/* Карточка испытания — общий стиль с базой, но без кнопок */
.challenge-card-user {
  background: var(--bf-card);
  border: 1px solid var(--bf-border);
  border-radius: 12px;
  padding: 18px;
  color: var(--bf-text);
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.challenge-card-user:hover {
  transform: translateY(-3px);
  border-color: var(--bf-accent-dim);
  box-shadow: 0 4px 14px rgba(0, 200, 255, 0.15);
}
/* Верх карточки */
.challenge-card-user .challenge-category {
  background: rgba(0, 200, 255, 0.1);
  color: var(--bf-accent);
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 12px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px;
}
/* Названия */
.challenge-card-user .challenge-title-en {
  font-weight: 600;
  font-size: 16px;
  color: var(--bf-accent);
  margin-bottom: 4px;
}
.challenge-card-user .challenge-title-ru {
  font-size: 14px;
  color: var(--bf-subtext);
  margin-bottom: 12px;
}
/* Прогресс */
.challenge-card-user .progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--bf-subtext);
  margin-bottom: 5px;
}
.challenge-card-user .progress-bar {
  height: 7px;
  background: #1c2532;
  border-radius: 4px;
  overflow: hidden;
}
.challenge-card-user .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bf-accent), var(--bf-accent-dim));
  border-radius: 4px;
  transition: width 0.3s ease;
}
/* === Поиск === */
#screen-bf-challenges .search-box {
  display: flex;
  margin-bottom: 16px;
}
#screen-bf-challenges .search-input {
  background: var(--bf-card);
  border: 1px solid var(--bf-border);
  color: var(--bf-text);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  flex: 1;
}
#screen-bf-challenges .search-input:focus {
  border-color: var(--bf-accent);
  outline: none;
}
/* Мобильная адаптация */
@media (max-width: 480px) {
  #bf-challenges-list {
    grid-template-columns: 1fr;
  }
}
/* === Общие цвета Battlefield UI === */
:root {
  --bf-bg: var(--nd-bg);
  --bf-card: var(--nd-card);
  --bf-border: var(--nd-border);
  --bf-accent: var(--nd-accent);
  --bf-accent-dim: var(--nd-accent-dim);
  --bf-text: var(--nd-text);
  --bf-subtext: var(--nd-text-muted);
}
/* === 🎯 WARZONE (зелёная тема) === */
:root.warzone-theme {
  --nd-accent: #17a51c;
  /* ярко-зелёный основной */
  --nd-accent-dim: #0e7413;
  /* тёмно-зелёный */
  --nd-accent-glow: rgba(23, 165, 28, 0.3);
}
body.warzone-theme .btn:hover,
body.warzone-theme .card-btn:hover {
  border-color: var(--nd-accent);
  box-shadow: 0 0 10px var(--nd-accent-glow);
  background: rgba(23, 165, 28, 0.1);
}
/* === Заголовок экрана === */
.screen-header {
  text-align: center;
  margin-bottom: 20px;
}
.screen-header h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--bf-accent);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.screen-subtitle {
  color: var(--bf-subtext);
  font-size: 14px;
  margin-top: -5px;
}
/* === Статистика === */
.stats-bar {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 15px;
  background: linear-gradient(135deg, #12202f, #0d141d);
  border: 1px solid var(--bf-border);
  border-radius: 10px;
  color: var(--bf-text);
}
.stat-item {
  text-align: center;
  flex: 1;
}
.stat-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--bf-accent);
  margin-bottom: 5px;
}
.stat-label {
  font-size: 12px;
  color: var(--bf-subtext);
}
/* === Поиск и фильтр === */
.search-box {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.search-input,
.filter-select {
  background: var(--bf-card);
  border: 1px solid var(--bf-border);
  color: var(--bf-text);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.search-input:focus,
.filter-select:focus {
  border-color: var(--bf-accent);
  outline: none;
}
/* === Сетка карточек испытаний === */
.challenges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.challenge-card-admin {
  background: var(--bf-card);
  border: 1px solid var(--bf-border);
  border-radius: 12px;
  padding: 18px;
  color: var(--bf-text);
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.challenge-card-admin:hover {
  transform: translateY(-3px);
  border-color: var(--bf-accent-dim);
  box-shadow: 0 4px 14px rgba(0, 200, 255, 0.15);
}
/* === Верх карточки === */
.challenge-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.challenge-id {
  background: rgba(255, 255, 255, 0.05);
  color: var(--bf-subtext);
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}
.challenge-category {
  background: rgba(0, 200, 255, 0.1);
  color: var(--bf-accent);
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 12px;
  text-transform: uppercase;
}
/* === Названия === */
.challenge-titles {
  margin-bottom: 14px;
}
.challenge-title-en {
  font-weight: 600;
  font-size: 16px;
  color: var(--bf-accent);
  margin-bottom: 4px;
}
.challenge-title-ru {
  font-size: 14px;
  color: var(--bf-subtext);
}
/* === Прогресс === */
.challenge-progress-admin {
  margin-bottom: 14px;
}
.progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--bf-subtext);
  margin-bottom: 5px;
}
.progress-bar {
  height: 7px;
  background: #1c2532;
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bf-accent), var(--bf-accent-dim));
  border-radius: 4px;
  transition: width 0.3s ease;
}
/* === Кнопки действий === */
.challenge-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.btn-small {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s ease;
}
.btn-edit {
  background: rgba(0, 200, 255, 0.2);
}
.btn-edit:hover {
  background: rgba(0, 200, 255, 0.4);
}
.btn-delete {
  background: rgba(255, 60, 80, 0.2);
}
.btn-delete:hover {
  background: rgba(255, 60, 80, 0.4);
}
/* === Пустое состояние === */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--bf-subtext);
}
.empty-state .icon {
  font-size: 48px;
  margin-bottom: 15px;
  color: var(--bf-accent);
  opacity: 0.7;
}
/* === Общий фон страницы === */
#screen-bf-challenges-db {
  background: var(--bf-bg);
  min-height: 100vh;
  color: var(--bf-text);
}
/* === Мобильная адаптация === */
@media (max-width: 480px) {
  .challenges-grid {
    grid-template-columns: 1fr;
  }
}
/* === Экран добавления испытания === */
.add-category-inline {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.add-category-inline input {
  flex: 1;
}
#bf-category-select {
  width: 100%;
  background: var(--bf-card);
  border: 1px solid var(--bf-border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--bf-text);
  font-size: 14px;
}
#screen-bf-add-challenge {
  background: var(--bf-bg);
  color: var(--bf-text);
  min-height: 100vh;
  padding-bottom: 80px;
}
#screen-bf-add-challenge .form-section {
  margin-bottom: 18px;
}
#screen-bf-add-challenge label {
  display: block;
  font-size: 13px;
  color: var(--bf-subtext);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-col {
  flex: 1;
}
.filters-row {
  display: flex;
  margin: 10px 0;
  gap: 10px;
}
.search-section {
  margin: 20px 0;
}
.bf-tab {
  background: #151b24;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.bf-tab-header {
  width: 100%;
  text-align: left;
  background: #1c2530;
  color: #fff;
  border: none;
  outline: none;
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.bf-tab-header:hover {
  background: #22303f;
}
.bf-tab-body {
  display: none;
  padding: 10px 16px;
  background: #111820;
}
.bf-mod-card {
  background: linear-gradient(145deg, #171e26, #0e141b);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  color: #e2e8f0;
}
.bf-mod-category {
  font-size: 0.8rem;
  color: #9fa8b2;
}
.bf-mod-name {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
}
/* Battlefield аккордеон в стиле Warzone */
.bf-loadout {
  background: var(--bf-card);
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid #2a3a4a;
  overflow: hidden;
  transition: all 0.3s ease;
}
.bf-loadout__header {
  padding: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.bf-loadout__header:hover {
  background: rgba(58, 123, 213, 0.1);
}
.bf-loadout__header-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.bf-toggle-icon {
  background: none;
  border: none;
  color: #e0e6ee;
  transition: transform 0.3s ease;
  cursor: pointer;
}
.bf-loadout.is-open .bf-toggle-icon {
  transform: rotate(180deg);
}
.bf-loadout__title {
  font-size: 18px;
  font-weight: 600;
  color: #e0e6ee;
  margin: 0;
  flex: 1;
}
.bf-loadout__date {
  color: #8fa3b7;
  font-size: 14px;
}
.bf-loadout__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bf-tops {
  display: flex;
  gap: 8px;
}
.bf-categories {
  display: flex;
  gap: 6px;
}
.bf-loadout__content {
  transition: max-height 0.3s ease;
  background: #1a2838;
}
.bf-loadout__inner {
  padding: 16px;
}
/* Заголовки вкладок */
.bf-tab-buttons {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid #2a3a4a;
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.bf-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  color: #8fa3b7;
  cursor: pointer;
  border-radius: 6px;
  font-size: 12px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.bf-tab-btn.is-active {
  background: #3a7bd5;
  border-color: #3a7bd5;
  color: white;
}
.bf-tab-content {
  display: none;
}
.bf-tab-content.is-active {
  display: block;
}
/* Модули */
.bf-modules {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bf-module {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #253447;
  border-radius: 8px;
  border-left: 4px solid #3a7bd5;
  flex-direction: column;
}
.bf-module-slot {
  color: #8fa3b7;
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
}
.bf-module-name {
  color: #e0e6ee;
  font-weight: 500;
  flex: 1;
}
/* Разделители категорий */
.bf-category-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #3a7bd5, transparent);
  margin: 20px 0;
  opacity: 0.5;
}
/* Сообщение "нет результатов" */
.bf-no-results {
  text-align: center;
  color: #8fa3b7;
  padding: 40px 20px;
  font-size: 16px;
}
/* Battlefield форма добавления сборки */
#screen-bf-form {
  max-width: 100%;
  padding: 20px;
}
#screen-bf-form .form-section {
  margin-bottom: 25px;
  padding: 15px;
  background: var(--bf-card);
  border-radius: 12px;
  border: 1px solid #2a3a4a;
}
#screen-bf-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #e0e6ee;
  font-size: 14px;
}
#screen-bf-form .form-input,
.tab-block input {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  background: #1a2838;
  color: #e0e6ee;
  font-size: 14px;
  border: 0;
  transition: all 0.2s ease;
}
#screen-bf-form .form-input:focus,
.tab-block input:focus {
  outline: none;
  border-color: #5b86e5;
  box-shadow: 0 0 0 2px rgba(58, 123, 213, 0.2);
}
/* Категории в сетку */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.category-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #1a2838;
  border-radius: 8px;
  border: 1px solid #2a3a4a;
  cursor: pointer;
  transition: all 0.2s ease;
}
.category-checkbox:hover {
  background: #253447;
  border-color: #3a7bd5;
}
.category-checkbox input[type="checkbox"] {
  margin: 0;
}
/* Улучшенные стили для формы Battlefield */
.tab-actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.tab-actions .btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(58, 123, 213, 0.15);
  border: 1px solid rgba(58, 123, 213, 0.3);
  color: #9cc9ff;
  transition: all 0.2s ease;
}
.tab-actions .btn:hover {
  background: rgba(58, 123, 213, 0.25);
  border-color: rgba(58, 123, 213, 0.5);
  color: #e0e6ee;
}
.add-mod {
  background: rgba(40, 167, 69, 0.15) !important;
  border-color: rgba(40, 167, 69, 0.3) !important;
  color: #75b798 !important;
}
.add-mod:hover {
  background: rgba(40, 167, 69, 0.25) !important;
  border-color: rgba(40, 167, 69, 0.5) !important;
  color: #a3d9b1 !important;
}
.delete-tab {
  background: rgba(220, 53, 69, 0.15) !important;
  border-color: rgba(220, 53, 69, 0.3) !important;
  color: #e58c94 !important;
}
.delete-tab:hover {
  background: rgba(220, 53, 69, 0.25) !important;
  border-color: rgba(220, 53, 69, 0.5) !important;
  color: #f1aeb5 !important;
}
/* Кнопка добавления вкладки - меньше и темнее */
.add-tab-btn {
  width: 100%;
  background: rgba(58, 123, 213, 0.15);
  color: #9cc9ff;
  padding: 10px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}
.add-tab-btn:hover {
  background: rgba(58, 123, 213, 0.25);
  border-color: rgba(58, 123, 213, 0.5);
  color: #e0e6ee;
}
/* Основные кнопки формы тоже делаем меньше */
.btn-group .btn {
  flex: 1;
  padding: 12px;
  font-weight: 600;
  font-size: 14px;
}
/* Уменьшаем отступы в форме */
#screen-bf-form .form-section {
  margin-bottom: 20px;
  padding: 12px;
}
/* === Battlefield форма - исправления === */
/* Категории в 2 колонки */
.categories-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px;
  margin-top: 10px;
}
.category-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #1a2838;
  border-radius: 8px;
  border: 1px solid #2a3a4a;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0 !important;
}
/* Топ модули в строку */
.top-modules-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 8px;
  margin-top: 10px;
}
.top-module-input {
  text-align: center;
  font-weight: 600;
  width: 100% !important;
}
/* Селекты модулей в ряд */
.mod-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}
.bf-modes {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.bf-mode-card {
  flex: 1;
  height: 90px;
  background: #1a2533;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #2a3a4d;
  transition: 0.3s;
}
.bf-mode-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bf-mode-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}
/* Мета-информация сборки */
.bf-loadout__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.bf-tops {
  display: flex;
  gap: 6px;
}
.bf-top {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  /* по умолчанию */
  display: inline-block;
  margin-right: 6px;
  text-transform: uppercase;
}
/* 🥇 Золото */
.bf-top-1 {
  background: linear-gradient(135deg, #d4af37, #f6e27a);
  color: #000;
  font-weight: 700;
}
/* 🥈 Серебро */
.bf-top-2 {
  background: linear-gradient(135deg, #9ea7b8, #d3d8e8);
  color: #000;
  font-weight: 700;
}
/* 🥉 Бронза */
.bf-top-3 {
  background: linear-gradient(135deg, #b87333, #e0a96d);
  color: #000;
  font-weight: 700;
}
/* ⚙️ Остальные */
.bf-top-default {
  background: linear-gradient(135deg, #1e2835, #2a3546);
  color: #fff;
  font-weight: 600;
}
.bf-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
}
.bf-type {
  background: rgba(58, 123, 213, 0.15);
  border: 1px solid rgba(58, 123, 213, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  color: #9cc9ff;
  margin-left: auto;
}
/* Убираем лишние отступы */
#screen-bf-form .form-section {
  margin-bottom: 16px;
  padding: 12px;
}
#screen-bf-form label {
  margin-bottom: 6px;
  font-size: 13px;
}
/* Кнопка добавления вкладки */
.add-tab-btn {
  width: 100%;
  background: rgba(58, 123, 213, 0.15);
  color: #9cc9ff;
  padding: 10px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
  margin-top: 8px;
}
.add-tab-btn:hover {
  background: rgba(58, 123, 213, 0.25);
  border-color: rgba(58, 123, 213, 0.5);
  color: #e0e6ee;
}
/* Основные кнопки формы */
.btn-group {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.btn-group .btn {
  flex: 1;
  padding: 12px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
}
/* ===========================
   🎯 BATTLEFIELD BUILDS STYLES (Admin)
   =========================== */
/* ====== GRID ====== */
.bf-builds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 10px 0;
  max-width: 1200px;
  margin: 0 auto;
}
/* ====== CARD ====== */
.bf-build-card {
  border: 1px solid #2a3a5a;
  border-radius: 10px;
  padding: 14px;
  color: #e0e6ee;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  /* ✅ фиксированная высота */
  background: rgba(18, 27, 38, 0.85);
  /* ✅ чуть темнее и ровнее */
  transition: all 0.25s ease;
}
.bf-build-card:hover {
  border-color: #3a7bd5;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}
.bf-build-card::before {
  content: '';
  position: absolute;
  inset: 0;
  height: 3px;
  background: linear-gradient(90deg, #3a7bd5, #00d2ff);
}
/* ===== HEADER ===== */
.bf-card-header {
  margin-bottom: 10px;
}
.bf-card-header h3 {
  margin: 0 0 6px 0;
  font-size: 1.1rem;
  /* ✅ компактнее */
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
/* ===== META ===== */
.bf-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
/* ===== CATEGORY BADGES ===== */
.bf-cat {
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-block;
}
/* ===== WEAPON TYPE ===== */
.bf-weapon-type {
  display: inline-block;
  background: rgba(58, 123, 213, 0.15);
  color: #9cc9ff;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  border: 1px solid rgba(58, 123, 213, 0.2);
  margin-top: 6px;
  margin-bottom: auto;
  /* ✅ толкаем вниз кнопки */
  font-weight: 600;
  text-transform: capitalize;
}
/* ===== FOOTER ===== */
.bf-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  border-top: 1px solid #2a3a5a;
  padding-top: 10px;
  margin-top: 12px;
}
.bf-card-footer .btn {
  padding: 6px 10px;
  font-size: 0.85rem;
  border-radius: 6px;
  font-weight: 600;
  min-width: 36px;
}
/* ===== FILTERS ===== */
.bf-filter-select {
  background: rgba(42, 58, 90, 0.6);
  border: 1px solid #3a4a6a;
  border-radius: 8px;
  padding: 8px 12px;
  color: #e0e6ee;
  font-size: 14px;
  min-width: 120px;
}
/* ===== ANIMATION ===== */
@keyframes bfCardAppear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.bf-build-card {
  animation: bfCardAppear 0.3s ease-out;
}
/* === Справочник модулей - выбор типа === */
#screen-bf-modules-types {
  padding: 20px;
  max-width: 100%;
}
#screen-bf-modules-types h2 {
  color: #3a7bd5;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}
#bf-modules-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.modules-type-btn {
  background: linear-gradient(145deg, #15202c, #1a2838);
  border: 1px solid #2a3a4a;
  border-radius: 10px;
  padding: 16px 12px;
  color: #e0e6ee;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}
.modules-type-btn:hover {
  transform: translateY(-2px);
  border-color: #3a7bd5;
  box-shadow: 0 4px 15px rgba(58, 123, 213, 0.2);
  color: #9cc9ff;
}
#screen-bf-modules-types .btn {
  width: 100%;
  background: rgba(58, 123, 213, 0.15);
  border: 1px solid rgba(58, 123, 213, 0.3);
  color: #9cc9ff;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
}
#screen-bf-modules-types .btn:hover {
  background: rgba(58, 123, 213, 0.25);
  border-color: rgba(58, 123, 213, 0.5);
  color: #e0e6ee;
}
/* === Список модулей выбранного типа === */
#screen-bf-modules-list {
  padding: 20px;
  max-width: 100%;
}
#bf-modules-title {
  color: #3a7bd5;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}
/* Панель инструментов */
#bf-modules-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-direction: column;
}
#bf-modules-toolbar .form-input {
  padding: 10px 12px;
  border-radius: 6px;
  background: #15202c;
  color: #e0e6ee;
  font-size: 13px;
  transition: all 0.2s ease;
}
#bf-modules-toolbar .form-input:focus {
  outline: none;
  border-color: #5b86e5;
  box-shadow: 0 0 0 2px rgba(58, 123, 213, 0.2);
}
.module-group {
  background: var(--bf-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 18px;
}
.module-group h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #6cb2ff;
  letter-spacing: 0.5px;
}
.module-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  margin-bottom: 6px;
  transition: all 0.2s ease;
}
.module-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.module-row:last-child {
  margin-bottom: 0;
}
.module-row span {
  color: #e0e6ee;
  font-size: 14px;
  font-weight: 500;
}
.module-row .btn-sm {
  background: rgba(220, 53, 69, 0.15);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #e58c94;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  transition: all 0.2s ease;
}
.module-row .btn-sm:hover {
  background: rgba(220, 53, 69, 0.25);
  border-color: rgba(220, 53, 69, 0.5);
  color: #f1aeb5;
}
.modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.module-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 8px;
  transition: 0.2s ease;
  text-align: center;
}
.module-card:hover {
  background: rgba(255, 255, 255, 0.07);
}
.module-card .mod-name {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 8px;
}
.delete-mod {
  background: rgba(255, 80, 80, 0.1);
  border: 1px solid rgba(255, 80, 80, 0.3);
  color: #ff7070;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: 0.2s ease;
}
.delete-mod:hover {
  background: rgba(255, 80, 80, 0.2);
  color: #fff;
}
.module-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 8px 12px;
  border-radius: 10px;
}
/* ===============================
   🎨 СТИЛИ БАЗЫ СБОРОК BATTLEFIELD
   =============================== */
#screen-bf-edit-builds {
  background: #0f141a;
  min-height: 100vh;
  color: #e0e6ee;
  padding: 20px;
}
#screen-bf-edit-builds h2 {
  color: #9cc9ff;
  text-align: center;
  margin-bottom: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.builds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 👈 теперь всегда 2 карточки в ряд */
  gap: 16px;
}
.bf-build-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.bf-build-actions .btn {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  transition: background 0.2s ease;
}
/* =============================
   🎛 BF SETTINGS VISUAL STYLE
   ============================= */
.setting-row,
.settings-category-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 6px;
  transition: background 0.2s ease;
}
.setting-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.setting-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.setting-control {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 120px;
  justify-content: flex-end;
}
.setting-control input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #008cff;
  cursor: pointer;
}
.setting-control input[type="range"] {
  width: 120px;
  accent-color: #008cff;
  cursor: pointer;
}
.setting-control input[type="number"] {
  width: 60px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  text-align: center;
  border-radius: 3px;
}
.setting-control select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 3px;
  padding: 2px 6px;
}
#bf-settings-drawer {
  position: fixed;
  left: -320px;
  top: 0px;
  height: 100%;
  width: 300px;
  max-width: 100%;
  background: #0f111a;
  box-shadow: rgba(0, 0, 0, 0.4) 2px 0px 16px;
  transition: left 0.25s;
  z-index: 20;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
}
#bf-settings-drawer h3 {
  font-size: 15px;
  font-weight: 700;
  color: #9ab;
  text-transform: uppercase;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
}
#bf-settings-categories button {
  background: #171821;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  padding: 15px 10px;
  border-radius: 2px;
  margin-bottom: 6px;
  margin: 2.5px 0;
  transition: all 0.2s ease;
}
/* ===========================
   🎨 Battlefield Settings Header
   =========================== */
.settings-top {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}
.settings-title {
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 600;
  color: #9ebad1;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.settings-subtitle {
  font-size: 14px;
  color: #a3afbf;
}
/* — Панель категории */
.settings-category-bar.clean {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  background: #171821;
}
.btn-burger {
  padding: 15px;
}
.btn-burger:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 170, 255, 0.4);
}
.settings-category-title {
  font-size: 14px;
  display: flex;
  font-weight: 500;
  color: #e3edf7;
  letter-spacing: 0.5px;
  flex-direction: column;
  align-items: center;
}
.settings-category-title .cat-en {
  color: #00aaff;
}
.settings-category-title .cat-ru {
  opacity: 0.6;
  margin-left: 4px;
  font-weight: 400;
}
/* 🎖️ Battlefield Settings Sections */
.bf-section-title {
  margin-top: 28px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.15);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  color: #d0d4da;
  letter-spacing: 0.7px;
}
.setting-info {
  flex: 1;
}
.setting-info .title-en {
  font-weight: 600;
  font-size: 13px;
  color: #fff;
}
.setting-info .title-ru {
  font-size: 11px;
  color: #8d9aa5;
  margin-top: 2px;
}
/* Кнопка EDIT — как в оригинале */
.setting-control button,
.setting-control .edit-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 2px 12px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}
.setting-control button:hover {
  border-color: #4aa3ff;
  background: rgba(74, 163, 255, 0.15);
}
.color-preview {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}
.color-preview:hover {
  transform: scale(1.1);
}
.edit-btn {
  position: relative;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: 6px;
  background: linear-gradient(145deg, #1a2328, #111a1f);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e0e6ee;
  transition: all 0.2s ease;
}
.edit-btn:hover:not(:disabled) {
  background: linear-gradient(145deg, #263238, #1a2328);
  transform: scale(1.03);
}
.edit-btn:disabled {
  background: rgba(255, 255, 255, 0.05);
  color: #999;
}
.edit-btn .btn-ru {
  display: block;
  font-size: 8px;
  color: #7a8b9a;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 1px;
}
.bf-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  opacity: 0.9;
}
.bf-toggle-track {
  width: 44px;
  height: 20px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  position: relative;
  flex-shrink: 0;
}
.bf-toggle-knob {
  width: 16px;
  height: 16px;
  background: #aaa;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 3px;
  transition: all 0.25s ease;
}
.bf-toggle.on .bf-toggle-track {
  background: linear-gradient(145deg, #35c759, #248f3d);
}
.bf-toggle.on .bf-toggle-knob {
  left: 24px;
  background: #fff;
}
/* Подписи ON/OFF */
.bf-toggle-labels {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.bf-toggle-labels span {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #808b96;
}
.bf-toggle.on .on-label {
  color: #4df36b;
}
.bf-toggle:not(.on) .off-label {
  color: #f36b6b;
}
/* === Battlefield Select === */
/* Выпадающий список */
.bf-select option {
  background: #0f111a;
  color: #e8eaf0;
  font-size: 13px;
  padding: 5px 8px;
}
/* Подпись под селектом */
.bf-select-ru {
  font-size: 12px;
  color: #7fa1b8;
  opacity: 0.8;
}
/* === Battlefield Subsettings — бургер-оверлей слева === */
#bf-subsettings-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: flex-start;
  background: rgba(10, 12, 18, 0.9);
  backdrop-filter: blur(10px);
  overflow: hidden;
  /* 🔹 фиксируем весь фон */
  z-index: 100;
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.25s;
}
#bf-subsettings-overlay.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
/* контентная панель */
.subsettings-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* 🔹 панель растягивается */
  width: 100%;
  max-width: 720px;
  background: #0f1117;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.5);
}
/* фиксируем шапку */
#bf-subsettings-overlay .subsettings-header {
  position: sticky;
  top: 0;
  z-index: 2;
  /* Увеличил z-index чтобы был выше контента */
  background: #0e1118;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
  /* Запрещаем сжатие */
}
/* именно тут теперь скроллим */
#bf-subsettings-list {
  flex: 1;
  overflow-y: auto;
  /* 🔹 прокрутка ТОЛЬКО в контенте */
  padding: 24px;
  min-height: 0;
  scroll-behavior: smooth;
}
#bf-subsettings-title-en {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
#bf-subsettings-title-ru {
  font-size: 13px;
  color: #a8b5c2;
  opacity: 0.85;
  margin-top: 4px;
}
/* Кнопка закрытия */
#bf-close-subsettings {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
#bf-close-subsettings:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ff6b6b;
}
/* Карточки параметров */
#bf-subsettings-overlay .setting-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: background 0.25s ease;
}
#bf-subsettings-overlay .setting-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
/* Информация */
#bf-subsettings-overlay .setting-info {
  overflow: hidden;
  word-wrap: break-word;
  min-width: 0;
}
/* Контролы */
#bf-subsettings-overlay .setting-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 180px;
}
/* Цветовые превью */
#bf-subsettings-overlay .color-preview {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Селекты */
#bf-subsettings-overlay .bf-select-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
#bf-subsettings-overlay .bf-select {
  min-width: 180px;
  background: linear-gradient(180deg, #161a24, #10141b);
  border-radius: 6px;
  color: #e8eaf0;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
#bf-subsettings-overlay .bf-select-ru {
  font-size: 11px;
  color: #7fa1b8;
  opacity: 0.8;
  text-align: right;
}
/* Мобильная адаптация */
@media (max-width: 700px) {
  #bf-subsettings-overlay .subsettings-container {
    max-width: 100%;
    border-right: none;
  }
}
/* === Battlefield Main Settings Rows (общий экран) === */
.setting-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* инфо и контрол по половине */
  gap: 16px;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  transition: background 0.25s ease;
}
.setting-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.setting-control {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}
.bf-select-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.setting-row[data-setting-type="bind"] .setting-control span {
  display: inline-block;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #fff;
}
/* =========================
   📦 VERSION HISTORY SCREEN
   ========================= */
#screen-version-history {
  padding: 15px;
  background: #0c1118;
  color: #fff;
}
/* --- Header --- */
#screen-version-history .screen-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #00aaff;
}
/* --- Admin Panel --- */
#version-admin-panel {
  margin-bottom: 18px;
}
#version-admin-toggle {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: #141b23;
  font-size: 22px;
  font-weight: 700;
  color: #00aaff;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.25s;
}
.ql-toolbar.ql-snow {
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  padding: 10px;
  margin: 5px 0;
  border-radius: 10px;
  background: #fff;
  border: none;
}
/* --- Tabs --- */
.version-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.version-tab {
  flex: 1;
  padding: 10px;
  background: #131b29;
  border: 1px solid rgba(0, 153, 255, 0.2);
  border-radius: 8px;
  color: #9bb6d1;
  cursor: pointer;
  text-align: center;
  transition: 0.25s;
}
.version-tab.active {
  background: #0077ff;
  border-color: #009dff;
  color: #fff;
}
/* --- Version Editor --- */
.version-editor {
  background: #131b29;
  border: 1px solid rgba(0, 153, 255, 0.25);
  border-radius: 10px;
  padding: 14px;
  display: none;
  margin: 10px 0;
}
.version-editor input {
  width: 100%;
  background: #0f1824;
  border: 1px solid rgba(0, 153, 255, 0.25);
  color: #fff;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}
#version-quill {
  min-height: 160px;
  max-height: 600px;
  resize: vertical;
  background: #fff;
  color: #000;
  border-radius: 6px;
  margin-bottom: 10px;
}
.version-buttons {
  display: flex;
  gap: 10px;
}
.version-buttons .btn {
  flex: 1;
}
#version-update-btn {
  width: 100%;
  margin-top: 8px;
}
/* --- Buttons --- */
.btn-success {
  background: #00c853;
  color: #fff;
}
.btn-secondary {
  background: #2b394f;
  color: #fff;
}
.btn-warning {
  background: #ffc400;
  color: #000;
}
/* --- Version Cards --- */
.version-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.version-card {
  background: #131b29;
  border: 1px solid rgba(0, 153, 255, 0.2);
  border-radius: 10px;
  padding: 14px;
  transition: 0.25s;
}
.version-card:hover {
  background: #182236;
}
.version-title {
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
.version-date {
  font-size: 13px;
  color: #8fa2c1;
  margin: 8px 0;
}
.version-content-preview {
  line-height: 1.3;
  max-height: 4em;
  overflow: hidden;
  font-size: 14px;
  margin: 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: revert-layer;
  opacity: 0.9;
}
.version-toggle {
  background: none;
  border: none;
  color: #00b7ff;
  padding: 0;
  cursor: pointer;
}
/* --- Full text --- */
.version-content-full {
  max-height: none;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.6s ease, height 0.6s ease;
}
.version-content-full.open {
  height: auto;
  opacity: 1;
}
/* --- Admin Actions --- */
.version-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.version-actions button {
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.version-actions .edit {
  background: linear-gradient(135deg, #ffc400, #ffaa00);
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.version-actions .delete {
  background: linear-gradient(135deg, #d62828, #c1121f);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.version-actions .publish {
  background: #00c853;
  color: #fff;
}
.version-actions .draft {
  background: #2b394f;
  color: #fff;
}
.version-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  background: rgba(30, 40, 50, 0.6);
  /* тёмный фон */
  color: #9ecbff;
  border: 1px solid rgba(80, 130, 180, 0.35);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.version-toggle:hover {
  background: rgba(50, 80, 110, 0.7);
  border-color: rgba(120, 180, 240, 0.7);
  color: #fff;
}
.version-toggle:active {
  transform: scale(0.97);
}
.version-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}
.version-toggle.open svg {
  transform: rotate(180deg);
}
/* Контейнер тостов — снизу по центру, стек сверху */
#toast-container {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  /* новые сверху */
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
  /* клики проходят сквозь, кроме самих тостов */
}
/* База */
.toast {
  pointer-events: auto;
  min-width: min(92vw, 540px);
  max-width: min(92vw, 540px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(28, 32, 36, 0.92);
  color: #e9edf1;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left-width: 4px;
  font-size: 14px;
  line-height: 1.35;
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transform: translateY(30px);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast .toast-icon {
  font-size: 16px;
  flex: 0 0 auto;
}
.toast .toast-message {
  flex: 1 1 auto;
  word-break: break-word;
}
/* Типы — BF soft cyber glow */
.toast-success {
  background: linear-gradient(135deg, #0f231b 0%, #143629 100%);
  border-color: #2ecc71;
  box-shadow: 0 10px 28px rgba(46, 204, 113, 0.22), 0 2px 10px rgba(46, 204, 113, 0.18);
}
.toast-success .toast-icon::before {
  content: "✅";
}
.toast-info {
  background: linear-gradient(135deg, #0e1e2c 0%, #14324a 100%);
  border-color: #2ea6ff;
  box-shadow: 0 10px 28px rgba(46, 166, 255, 0.22), 0 2px 10px rgba(46, 166, 255, 0.18);
}
.toast-info .toast-icon::before {
  content: "ℹ️";
}
.toast-warning {
  background: linear-gradient(135deg, #2f2311 0%, #4a3515 100%);
  border-color: #f1c40f;
  box-shadow: 0 10px 28px rgba(241, 196, 15, 0.22), 0 2px 10px rgba(241, 196, 15, 0.18);
}
.toast-warning .toast-icon::before {
  content: "✏";
}
.toast-error {
  background: linear-gradient(135deg, #2b1517 0%, #472025 100%);
  border-color: #ff4c4c;
  box-shadow: 0 10px 28px rgba(255, 76, 76, 0.22), 0 2px 10px rgba(255, 76, 76, 0.18);
}
.toast-error .toast-icon::before {
  content: "❌";
}