/* ========== ВЕРХНЯЯ ПАНЕЛЬ ========== */

/* Обычный поток внутри #topZone (см. style.css) — первый в колонке [topBar, topPanel,
   chatInput], высота собственная (40px), #room ниже забирает весь остаток экрана. */
#topBar {
  display: flex;
  flex-shrink: 0;
  height: 40px;
  gap: 8px;
  align-items: center;
  padding: 0 12px;
  background: #1f1b2e;
  box-sizing: border-box;
}

.topbar-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-right: 4px;
}

/* На узких экранах 5 кнопок (профиль/комнаты/рефералы/faq/+админка персоналу) уже не
   помещаются в 40px-полосу по ширине (проверено на 375px — не хватает почти 180px).
   Не прячем ни одну кнопку — делаем полосу горизонтально прокручиваемой, каждая
   кнопка не сжимается (иначе текст переносится/обрезается некрасиво). */
@media (max-width: 768px) {
  #topBar {
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
  }
  #topBar::-webkit-scrollbar {
    display: none; /* Chrome/Safari/мобильные webview */
  }
  #topBar > * {
    flex-shrink: 0;
  }
  /* .topbar-right-group само не сжимается (правило выше — оно тоже прямой ребёнок
     #topBar), но это ЕЩЁ и свой вложенный flex-ряд — без этого его кнопки внутри
     сжимались бы по умолчанию (flex-shrink:1), теряя ту же защиту, что раньше у них
     была, пока они были прямыми детьми #topBar (см. комментарий к правилу выше). */
  .topbar-right-group > * {
    flex-shrink: 0;
  }
}

/* На тач-устройствах (см. MOBILE_MENU_MQ в js/layout.js) полоса сокращается всего до
   4 элементов (лого/☰/💬/язык, помещаются без скролла) — horizontal-scroll выше тут
   не просто лишний, а вредный: overflow-x:auto по спецификации CSS вынуждает и
   overflow-y стать auto, обрезая выпадающий список языка (position:absolute, торчит
   ниже 40px полосы). Правило должно идти ПОСЛЕ overflow-x:auto выше — тот же #topBar,
   при равной специфичности побеждает более позднее в файле. */
@media (max-width: 768px) and (pointer: coarse) {
  #topBar {
    overflow: visible;
  }
}

/* Внутри узкой 40px-полосы кнопке профиля нужны свои, более компактные размеры —
   общее правило #profileBtn (см. style.css) рассчитано на нижнюю панель ввода. */
#topBar #profileBtn {
  padding: 8px 14px;
  min-width: auto;
  font-size: 13px;
}

/* Кнопка "Комнаты" — та же компактная высота, что у остальных кнопок полосы;
   собственный стиль #roomBrowserBtn (см. style.css) рассчитан на чат-панель. */
#topBar #roomBrowserBtn,
#topBar #referralsBtn,
#topBar #achievementsBtn,
#topBar #leaderboardBtn,
#topBar #battlePassBtn,
#topBar #minigamesBtn,
#topBar #faqBtn,
#topBar #rulesBtn,
#topBar #supportBtn,
#topBar #logoutBtn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}

/* Колокольчик уведомлений + переключатель звука — просто иконки, без фона/рамки/
   подписи (в отличие от остальных кнопок полосы), на тёмном фоне #topBar (#1f1b2e). */
.icon-btn {
  background: transparent;
  border: none;
  padding: 4px 6px;
  font-size: 18px;
  line-height: 1;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: background 0.15s;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Переключатель языка в игровом топбаре — выпадающий список вместо кнопки на
   каждый язык (см. renderLangSwitcherDropdown в js/i18n.js) — базовая .lang-switcher
   (белая плашка с тенью, см. style.css) была рассчитана на ряд кнопок и на тёмном
   фоне топбара с одиноким <select> внутри смотрелась бы лишней рамкой в рамке. */
.lang-switcher-game {
  background: none;
  padding: 0;
  box-shadow: none;
}

.lang-switcher-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

.lang-switcher-select:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.lang-switcher-caret {
  font-size: 9px;
  opacity: 0.8;
}

/* Свой список (не браузерный <select>) — см. renderLangSwitcherDropdown в js/i18n.js:
   нативный select центрирует раскрывающийся список на выбранной опции и может
   открыться вверх, этот список всегда раскрывается строго вниз от кнопки. */
.lang-switcher-list {
  display: none;
  position: absolute;
  top: 100%;
  /* Переключатель языка всегда у ПРАВОГО края экрана (экран входа и топбар игры) — список
     шире самой кнопки (особенно при коротком названии текущего языка, вроде "Eesti"),
     поэтому выравниваем его по правому краю кнопки, а не по левому, иначе он уходил за экран. */
  right: 0;
  margin-top: 4px;
  min-width: 100%;
  list-style: none;
  padding: 4px;
  border-radius: 6px;
  background: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 100;
}

.lang-switcher-select.open .lang-switcher-list {
  display: block;
}

.lang-switcher-option {
  padding: 6px 10px;
  border-radius: 4px;
  color: #222;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.lang-switcher-option:hover {
  background: #f0f0f7;
}

.lang-switcher-option.active {
  background: #667eea;
  color: white;
}

/* Враппер вместо margin-left:auto на нескольких кнопках по отдельности (см. index.html) —
   прижимает ВСЮ группу (админка при наличии + колокольчик + звук + выход) единым
   блоком к правому краю, независимо от того, видна ли внутри #adminPanelBtn. */
.topbar-right-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Видна только персоналу (см. myIsStaff в js/socket.js) — по умолчанию скрыта. */
#adminPanelBtn {
  display: none;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s;
}

#adminPanelBtn:hover {
  transform: scale(1.05);
}

/* ========== ОКНО АДМИН-ПАНЕЛИ ========== */

#adminOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

#adminWindow {
  background: white;
  width: 90%;
  max-width: 800px;
  height: 80vh;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.admin-header {
  background: linear-gradient(135deg, #2c3e50 0%, #1f1b2e 100%);
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-header h2 {
  margin: 0;
  font-size: 24px;
}

/* Ряд вкладок не переносился (flex, nowrap по умолчанию) — при достаточном
   количестве вкладок (сейчас 9, каждая новая функция админки добавляет ещё
   одну) ряд становится шире окна панели. Первая попытка чинить это была через
   overflow-x:auto (горизонтальный скролл) — оказалось хуже: скроллбар спрятан
   (см. историю), лишние вкладки просто НЕ БЫЛИ ВИДНЫ, пока их случайно не
   находили Shift+колесом — то есть тот же самый баг, просто на один шаг менее
   явный. flex-wrap надёжнее: все вкладки видны всегда, без скрытых жестов. */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 20px 0;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.admin-tab-btn {
  padding: 8px 16px;
  border: none;
  background: none;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: #666;
}

.admin-tab-btn:hover {
  color: #333;
}

.admin-tab-btn.active {
  border-bottom-color: #667eea;
  color: #333;
  font-weight: 600;
}

/* Вкладки языков внутри формы редактирования FAQ — 8 языков не влезают в одну
   строку на узких экранах, поэтому переносятся, в отличие от основных вкладок
   админки (.admin-tabs), где вложенный контейнер живёт внутри блока с паддингом,
   а не на всю ширину панели. */
.admin-faq-lang-tabs {
  flex-wrap: wrap;
  padding: 0 0 10px;
  margin-bottom: 12px;
}

#adminContent {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.admin-loading,
.admin-error,
.admin-empty {
  text-align: center;
  color: #888;
  padding: 30px;
}

.admin-error {
  color: #e74c3c;
}

.admin-backup-status {
  margin-left: 12px;
  font-size: 14px;
  color: #888;
}

.admin-backup-status a {
  color: inherit;
  text-decoration: underline;
}

.admin-backup-ok {
  color: #27ae60;
}

.admin-backup-fail {
  color: #e74c3c;
}

/* ========== СПИСОК ПОЛЬЗОВАТЕЛЕЙ ========== */

.admin-search {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 14px;
  box-sizing: border-box;
}

.admin-users-table {
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
}

.admin-users-row {
  display: grid;
  grid-template-columns: 2fr 0.6fr 1fr 1fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
}

.admin-users-row:last-child {
  border-bottom: none;
}

.admin-users-head {
  background: #f7f8fc;
  font-weight: 600;
  font-size: 12px;
  color: #666;
}

/* Отдельный вариант строки для списка жалоб — переиспользует .admin-users-table
   (рамка/скругление) и .admin-users-head (шапка) как декоративные обёртки, но со
   СВОИМ количеством/шириной колонок (репортер/цель/причина/статус/дата вместо
   имя/пол/монеты/статус/кнопка у пользователей). */
.admin-reports-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr 0.8fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
}

.admin-reports-row:last-child {
  border-bottom: none;
}

/* Строка списка FAQ — вопрос + порядок сортировки + кнопка открыть, тот же
   декоративный .admin-users-table/.admin-users-head, что и у остальных списков. */
.admin-faq-row {
  display: grid;
  grid-template-columns: 2.5fr 0.6fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
}

/* Строка списка обращений в поддержку — тема/игрок/статус/кому назначено/дата,
   тот же декоративный .admin-users-table/.admin-users-head, что и остальные списки. */
.admin-tickets-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.8fr 1fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
}

/* Общий список донатов всех игроков (в отличие от .admin-item-row у истории
   одного игрока в карточке пользователя) — тот же декоративный
   .admin-users-table/.admin-users-head, что и остальные списки выше. */
.admin-donations-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
}

.admin-tickets-row:last-child {
  border-bottom: none;
}

/* Строка сводки по онлайну персонала — логин/сегодня/неделя/месяц/всего. */
.admin-staff-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
}

.admin-staff-row:last-child {
  border-bottom: none;
}

.admin-staff-user-row {
  cursor: pointer;
  transition: background 0.15s;
}

.admin-staff-user-row:hover {
  background: #f7f8fc;
}

.admin-staff-day-row {
  cursor: pointer;
  transition: background 0.15s;
}

.admin-staff-day-row:hover {
  background: #f7f8fc;
}

.admin-staff-hourly-hint {
  margin: 6px 0 12px;
  font-size: 12px;
  color: #888;
}

.admin-staff-hourly-utc-note {
  margin: 0 0 10px;
  font-size: 12px;
  color: #888;
}

.admin-staff-hourly-summary {
  display: flex;
  gap: 18px;
  margin: 0 0 14px;
  font-size: 13px;
}

.admin-staff-legend {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-staff-legend::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.admin-staff-legend-active::before {
  background: #4caf50;
}

.admin-staff-legend-afk::before {
  background: #bbb;
}

/* 24 столбца-часа — на узком экране не сжимаем (иначе нечитаемо), просто
   прокручиваем контейнер по горизонтали, как и остальные широкие таблицы
   в этой панели (см. .admin-users-row в мобильной секции ниже). */
.admin-staff-hourly-chart {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  overflow-x: auto;
  padding-bottom: 6px;
}

.admin-staff-hour-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 24px;
}

.admin-staff-hour-bar {
  position: relative;
  width: 100%;
  height: 140px;
  background: #f0f0f5;
  border-radius: 3px;
  overflow: hidden;
}

.admin-staff-hour-active,
.admin-staff-hour-afk {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.admin-staff-hour-active {
  background: #4caf50;
}

.admin-staff-hour-afk {
  background: #bbb;
}

.admin-staff-hour-label {
  font-size: 10px;
  color: #888;
}

/* Переключатель "Онлайн" / "Журнал" внутри вкладки "Персонал" — тот же
   визуальный язык, что .admin-tab-btn, но компактнее и не привязан к
   #adminTabs (это подвкладка, а не основная вкладка панели). */
.admin-subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.admin-subtab-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: #f0f1f7;
  font-size: 13px;
  cursor: pointer;
  color: #666;
}

.admin-subtab-btn:hover {
  color: #333;
}

.admin-subtab-btn.active {
  background: #667eea;
  color: #fff;
  font-weight: 600;
}

/* Поля поиска над журналом действий — по нику сотрудника/по нику игрока. */
.admin-log-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

/* Строка журнала действий — время/сотрудник/игрок/что сделал. */
.admin-log-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.8fr;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
}

.admin-log-row:last-child {
  border-bottom: none;
}

/* Один пункт лога ошибок сервера — время + сырой стектрейс. Не таблица с
   колонками (как .admin-log-row) — сообщение произвольной длины, колонки тут
   только мешали бы. */
.admin-server-error-row {
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
}

.admin-server-error-row:last-child {
  border-bottom: none;
}

.admin-server-error-time {
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

.admin-server-error-message {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #c0392b;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
  background: #fdf3f2;
  border-radius: 6px;
  padding: 8px 10px;
}

/* Живая нагрузка сервера — плитки над списком ошибок (см. renderAdminServerHealth
   в admin.js), обновляются раз в 5с, пока открыта вкладка "Ошибки". */
.admin-health-grid {
  margin-bottom: 16px;
}

.admin-health-note {
  margin: 0 0 8px;
  font-size: 12px;
  color: #888;
}

.admin-health-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.admin-health-tile {
  border-radius: 8px;
  padding: 10px 12px;
  background: #f7f8fc;
  border: 1px solid #eee;
}

.admin-health-tile-label {
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
}

.admin-health-tile-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* Не строгие алерты — просто "начинает напрягаться" (warn) vs "уже нехорошо"
   (bad), см. adminHealthLevel в admin.js. */
.admin-health-warn {
  background: #fff8e1;
  border-color: #ffe082;
}

.admin-health-warn .admin-health-tile-value {
  color: #b8860b;
}

.admin-health-bad {
  background: #fdf3f2;
  border-color: #f0c4c4;
}

.admin-health-bad .admin-health-tile-value {
  color: #c0392b;
}

/* Чекбоксы прав в карточке пользователя — по одному на ключ (см. PERMISSION_KEYS
   в server.js / ADMIN_PERMISSION_KEYS в admin.js). */
.admin-permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.admin-permission-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

/* Тред переписки в детальной карточке обращения — тот же принцип чат-пузырей,
   что и в приватном чате (js/chat.js), но проще: только "свой/чужой" через
   sender_role, без аватарок и реакций. */
.admin-ticket-thread {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px;
  background: #fafafa;
  border-radius: 8px;
}

.admin-ticket-message {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 10px;
  background: white;
  border: 1px solid #eee;
}

.admin-ticket-message-staff {
  align-self: flex-end;
  background: #eef0fa;
  border-color: #dde1f5;
}

.admin-ticket-message-meta {
  font-size: 11px;
  color: #888;
  margin-bottom: 3px;
}

.admin-ticket-message-body {
  font-size: 13px;
  color: #333;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-faq-row:last-child {
  border-bottom: none;
}

.admin-user-row {
  cursor: pointer;
  transition: background 0.15s;
}

.admin-user-row:hover {
  background: #f5f6ff;
}

.admin-user-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.admin-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
}

.admin-online-dot.online {
  background: #2ecc71;
}

.admin-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  background: #667eea;
  color: white;
  font-size: 10px;
  font-weight: 600;
}

.admin-badge-moderator {
  background: #2c9e6f;
}

.admin-timer-info {
  font-size: 12px;
  color: #666;
  margin: 8px 0 4px;
}

.admin-status-ok {
  color: #2ecc71;
  font-weight: 600;
}

.admin-status-banned {
  color: #e74c3c;
  font-weight: 600;
}

.admin-open-btn {
  padding: 5px 10px;
  background: #667eea;
  color: white;
}

/* ========== СПИСОК ТОВАРОВ МАГАЗИНА ========== */

.admin-shop-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.admin-shop-filter-select {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 13px;
  background: white;
}

.admin-shop-row {
  grid-template-columns: 50px 1.6fr 1fr 0.8fr 0.8fr 0.9fr 1fr;
}

.admin-shop-item-hidden {
  opacity: 0.55;
}

.admin-item-thumb {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
  background: #f7f8fc;
}

.admin-item-thumb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 20px;
  border-radius: 4px;
  background: #f7f8fc;
}

/* ========== ДЕТАЛЬНАЯ КАРТОЧКА ИГРОКА ========== */

.admin-back-btn {
  background: none;
  border: none;
  color: #667eea;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 14px;
  padding: 0;
}

.admin-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.admin-detail-header h3 {
  margin: 0;
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.admin-detail-block {
  background: #f7f8fc;
  border-radius: 10px;
  padding: 14px;
}

.admin-detail-block-wide {
  grid-column: 1 / -1;
}

.admin-detail-block-danger {
  background: #fdeeee;
  border: 1px solid #f0c4c4;
}

.admin-feature-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.admin-detail-block h4 {
  margin: 0 0 10px;
  font-size: 14px;
}

.admin-detail-block p {
  margin: 4px 0;
  font-size: 13px;
  color: #444;
}

.admin-color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #ccc;
}

.admin-coins-form {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-number-input,
.admin-text-input {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 13px;
}

.admin-number-input {
  width: 80px;
}

.admin-text-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.admin-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Раньше в этом файле не было НИ ОДНОГО @media-правила вообще — жёсткие grid-колонки
   (.admin-users-row: 5 колонок, .admin-shop-row: 6, .admin-reports-row: 5,
   .admin-detail-grid: 2) на узком экране просто наезжали/обрезались друг на друга.
   Стек в один столбец — не изящно, зато гарантированно без переполнения; админка
   с телефона используется редко, но раз мы прямо сейчас добавляем сюда ещё и вкладку
   "Жалобы" — есть смысл сразу подстраховаться. */
@media (max-width: 768px) {
  .admin-users-row,
  .admin-shop-row,
  .admin-reports-row,
  .admin-faq-row,
  .admin-tickets-row,
  .admin-staff-row,
  .admin-log-row,
  .admin-donations-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .admin-users-head {
    display: none; /* заголовки колонок бессмысленны при однoколоночном стеке — этот
                       же класс висит и на шапке таблицы магазина (admin.js:633), так
                       что отдельное правило под .admin-shop-row не нужно */
  }

  .admin-detail-grid {
    grid-template-columns: 1fr;
  }
}

.admin-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
}

/* Аукционы в админке: таблица лотов и строка "длительность" в форме товара */
.admin-auction-row {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 1.2fr 1.4fr 0.8fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
}

.admin-duration-row { display: flex; gap: 8px; align-items: center; }
.admin-duration-row input { flex: 0 0 110px; width: 110px; }
.admin-duration-row select { flex: 1; }

/* Battle Pass в админке: таблица наград по уровням (две колонки — обычный и VIP-трек) */
.admin-bp-table { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; max-height: 50vh; overflow-y: auto; }
.admin-bp-row { display: grid; grid-template-columns: 36px 1fr 1fr; gap: 8px; align-items: center; }
.admin-bp-head { font-weight: 700; font-size: 12px; color: #666; position: sticky; top: 0; background: #fff; padding: 4px 0; }
.admin-bp-cell { display: flex; flex-direction: column; gap: 3px; }
.admin-bp-cell .admin-text-input { width: 100%; box-sizing: border-box; padding: 4px 6px; font-size: 12px; }

/* Десктоп: кнопки полосы никогда не переносят текст на вторую строку (эмодзи над подписью) —
   вместо этого при нехватке места уменьшаются отступы/шрифт/промежутки. Раньше кнопки просто
   сжимались (flex-shrink:1) и ломались на две строки, как только их становилось много.
   Ступени подобраны по факту: у персонала (12 кнопок + админка) полоса занимает ~1160px при
   обычных отступах, ~1040px в самой компактной ступени. */
@media (min-width: 769px) {
  #topBar > button,
  #topBar .topbar-right-group > button {
    white-space: nowrap;
    flex-shrink: 0;
  }
}
@media (min-width: 1251px) and (max-width: 1500px) {
  #topBar { gap: 5px; }
  #topBar .topbar-right-group { gap: 5px; }
  #topBar #profileBtn,
  #topBar #roomBrowserBtn,
  #topBar #referralsBtn,
  #topBar #achievementsBtn,
  #topBar #leaderboardBtn,
  #topBar #battlePassBtn,
  #topBar #minigamesBtn,
  #topBar #faqBtn,
  #topBar #rulesBtn,
  #topBar #supportBtn,
  #topBar #adminPanelBtn,
  #topBar #logoutBtn {
    padding: 8px 9px;
    font-size: 12px;
  }
}
@media (min-width: 769px) and (max-width: 1250px) {
  #topBar { gap: 2px; padding: 0 6px; }
  #topBar .topbar-right-group { gap: 2px; }
  #topBar #profileBtn,
  #topBar #roomBrowserBtn,
  #topBar #referralsBtn,
  #topBar #achievementsBtn,
  #topBar #leaderboardBtn,
  #topBar #battlePassBtn,
  #topBar #minigamesBtn,
  #topBar #faqBtn,
  #topBar #rulesBtn,
  #topBar #supportBtn,
  #topBar #adminPanelBtn,
  #topBar #logoutBtn {
    padding: 8px 4px;
    font-size: 11px;
  }
  #topBar .topbar-logo { display: none; }
}