/* ═══════════════════════════════════════════════════════════════
   Jizzax CyberTest — админка, слой компонентов
   Стиль и UX перенесены из CyberAdvice (Monoline UI).

   Этот файл НЕ придумывает свой дизайн, а СВЯЗЫВАЕТ:
     1) АЛИАС  — старые имена токенов (--blue, --navy, --radius …) ведут
        на токены кита (--ui-*). Нужен для того, чтобы разметка, которую
        ещё не переписали, не выглядела сломанной.
     2) МОСТ   — имена классов сохранены (к ним привязан admin.js
        и все .ejs), а внешний вид переписан по системе.

   Правила:
     * имя класса не меняем — на него завязан JS;
     * захардкоженного цвета нет, только var(--ui-*);
     * тень — только у плавающего слоя (модалка, меню, тост);
     * цвет несёт сигнал (ошибка/успех/срочность), а не украшает.

   Порядок подключения обязателен: kit.tokens.css ПЕРЕД этим файлом.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ═══ 1. СОКРАЩЕНИЕ ═════════════════════════════════════════════
   Здесь был мост из 29 алиасов (--blue, --navy, --red, --radius …),
   чтобы ещё не переписанная разметка не выглядела сломанной. Все 11
   страниц переведены, мост больше ничего не держит и удалён: пока
   --blue и --navy оставались объявленными, они приглашали вернуть
   бренд-цвета обратно в монохромную систему.

   Уцелел один --tr: он не алиас цвета, а сокращение для длинной пары
   «длительность + кривая», которая иначе повторялась бы 37 раз. */
:root {
  --tr: var(--ui-dur) var(--ui-ease);
}

/* ═══ 2. ОСНОВА ═════════════════════════════════════════════════ */
body {
  font-family: var(--ui-font);
  font-size: var(--ui-fs-sm);
  font-weight: 400;
  line-height: 1.5;
  background: var(--ui-bg);
  color: var(--ui-text-1);
}

/* Появление страницы — только прозрачность, без сдвига */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* Иконка. Размер задаётся здесь, цвет наследуется от родителя. */
.ic {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
  vertical-align: -.125em;
}
.ic-14 { width: 14px; height: 14px; }
.ic-16 { width: 16px; height: 16px; }
.ic-18 { width: 18px; height: 18px; }
.ic-24 { width: 24px; height: 24px; }

/* ═══ 3. ОБОЛОЧКА ═══════════════════════════════════════════════
   Панель держится на position:fixed, а не во flex-потоке. Так сворачивание
   не требует менять разметку каждой страницы: ширина панели и отступ
   контента читают одну и ту же переменную. */
.main {
  margin-left: var(--sb-width);
  min-height: 100vh;
  transition: margin-left var(--ui-dur) var(--ui-ease);
}
html.sb-collapsed .main { margin-left: var(--sb-collapsed); }

/* Заголовок страницы. Границы снизу нет — в системе разделяет отступ,
   а не линия (лишняя линия дробит страницу на полосы). */
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-sp-16);
  padding: var(--ui-sp-24) var(--ui-sp-24) 0;
  background: transparent;
}
.topbar-left { display: flex; align-items: center; gap: var(--ui-sp-12); min-width: 0; }
.topbar h1 {
  font-size: var(--ui-fs-lg);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ui-text-1);
}
.topbar-sub { margin-top: 2px; font-size: var(--ui-fs-xs); color: var(--ui-text-3); }
.topbar-actions { display: flex; align-items: center; gap: var(--ui-sp-8); flex-shrink: 0; }

.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r);
  background: var(--ui-surface-2);
  color: var(--ui-text-2);
  transition: background var(--tr), color var(--tr);
}
.hamburger:hover { background: var(--ui-surface-3); color: var(--ui-text-1); }

.page-body {
  padding: var(--ui-sp-16) var(--ui-sp-24) var(--ui-sp-24);
  animation: pageIn var(--ui-dur) var(--ui-ease) both;
}

/* Подпись-раздел внутри страницы */
.section-div {
  margin: var(--ui-sp-8) 0 var(--ui-sp-12);
  font-size: var(--ui-fs-2xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-text-3);
}

/* ═══ 4. БОКОВАЯ ПАНЕЛЬ ═════════════════════════════════════════
   Следует теме. Синего активного фона нет: активный пункт — фон
   surface-2 и полоска 2px слева цветом текста. */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  width: var(--sb-width);
  height: 100vh;
  background: var(--ui-bg);
  border-right: 1px solid var(--ui-border);
  transition: width var(--ui-dur) var(--ui-ease), transform var(--ui-dur) var(--ui-ease);
}
html.sb-collapsed .sidebar { width: var(--sb-collapsed); }

/* ── логотип ── */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--ui-sp-12);
  flex-shrink: 0;
  height: var(--topbar-h);
  padding: 0 var(--ui-sp-16);
  overflow: hidden;
  border-bottom: 1px solid var(--ui-border);
  cursor: pointer;
  transition: background var(--tr);
}
.sidebar-brand:hover { background: var(--ui-surface-2); }
.sb-icon {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 32px; height: 32px;
  color: var(--ui-text-1);
}
.sb-icon svg { width: 28px; height: 28px; }
.sb-text { overflow: hidden; white-space: nowrap; }
.sb-text h2 {
  font-size: var(--ui-fs-lg);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ui-text-1);
  line-height: 1.2;
}
.sb-text span { display: none; }
html.sb-collapsed .sidebar-brand { justify-content: center; padding: 0; gap: 0; }
html.sb-collapsed .sb-text { display: none; }

/* ── поиск ── */
.sb-search { position: relative; flex-shrink: 0; padding: var(--ui-sp-12) var(--ui-sp-12) var(--ui-sp-4); }
.sb-search-ico {
  position: absolute;
  left: var(--ui-sp-24);
  /* Якорь от верха, а не 50% контейнера: у .sb-search разные отступы
     сверху и снизу, поэтому центр контейнера ≠ центру поля. Раньше это
     компенсировалось подобранным на глаз translateY(-30%). */
  top: calc(var(--ui-sp-12) + 16px);
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--ui-text-3);
  pointer-events: none;
}
.sb-search input {
  width: 100%;
  height: 32px;
  padding: 0 var(--ui-sp-8) 0 var(--ui-sp-32);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r);
  background: var(--ui-surface-2);
  color: var(--ui-text-1);
  font-family: var(--ui-font);
  font-size: var(--ui-fs-sm);
  outline: none;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.sb-search input::placeholder { color: var(--ui-text-3); }
.sb-search input:focus { border-color: var(--ui-text-1); box-shadow: 0 0 0 3px var(--ui-ring); }
html.sb-collapsed .sb-search { display: none; }

/* ── навигация ── */
.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--ui-sp-8) 0; }
.sidebar-nav::-webkit-scrollbar { width: 0; }
.nav-section { display: contents; }
.nav-label {
  padding: var(--ui-sp-12) var(--ui-sp-16) var(--ui-sp-4);
  font-size: var(--ui-fs-2xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-text-3);
  white-space: nowrap;
  overflow: hidden;
}
html.sb-collapsed .nav-label { display: none; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ui-sp-12);
  width: calc(100% - var(--ui-sp-16));
  margin: 2px var(--ui-sp-8);
  padding: var(--ui-sp-8) var(--ui-sp-12);
  border: none;
  border-radius: var(--ui-r);
  background: transparent;
  color: var(--ui-text-2);
  font-family: var(--ui-font);
  font-size: var(--ui-fs-sm);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--tr), color var(--tr);
}
.nav-item:hover { background: var(--ui-surface-2); color: var(--ui-text-1); }
.nav-item.active { background: var(--ui-surface-2); color: var(--ui-text-1); font-weight: 600; }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 2px;
  background: var(--ui-text-1);
}
.nav-icon-svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  fill: currentColor;
  opacity: .75;
  transition: opacity var(--tr);
}
.nav-item:hover .nav-icon-svg,
.nav-item.active .nav-icon-svg { opacity: 1; }
.nav-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
html.sb-collapsed .nav-text { display: none; }
html.sb-collapsed .nav-item { justify-content: center; padding: var(--ui-sp-8) 0; gap: 0; }

/* ── кнопка сворачивания ── */
.collapse-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--ui-sp-4) var(--ui-sp-12);
  padding: var(--ui-sp-4);
  border: none;
  border-radius: var(--ui-r);
  background: var(--ui-surface-2);
  color: var(--ui-text-2);
  transition: background var(--tr), color var(--tr);
}
.collapse-trigger:hover { background: var(--ui-surface-3); color: var(--ui-text-1); }
.collapse-trigger svg { width: 16px; height: 16px; fill: currentColor; }
html.sb-collapsed .collapse-trigger .ic-chevron-l { display: none; }
.collapse-trigger .ic-chevron-r { display: none; }
html.sb-collapsed .collapse-trigger .ic-chevron-r { display: block; }

/* ── подвал панели ── */
.sidebar-footer { display: flex; flex-direction: column; gap: var(--ui-sp-8); flex-shrink: 0; padding: var(--ui-sp-8); }
.sb-footer-row {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--ui-sp-8);
  width: 100%;
}
.sb-user-btn {
  display: flex;
  align-items: center;
  gap: var(--ui-sp-8);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--ui-sp-4) var(--ui-sp-8);
  border: none;
  border-radius: var(--ui-r);
  background: transparent;
  color: var(--ui-text-1);
  text-align: left;
  transition: background var(--tr);
}
.sb-user-btn:hover { background: var(--ui-surface-2); }
.sb-avatar {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: var(--ui-r-full);
  background: var(--ui-surface-3);
  color: var(--ui-text-2);
}
.sb-avatar svg { width: 16px; height: 16px; fill: currentColor; }
.sb-user-name {
  font-size: var(--ui-fs-sm);
  font-weight: 500;
  color: var(--ui-text-1);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html.sb-collapsed .sb-user-name { display: none; }
html.sb-collapsed .sb-footer-row { justify-content: center; }
html.sb-collapsed .sb-footer-actions { display: none; }
html.sb-collapsed .sb-user-btn { flex: 0 0 auto; justify-content: center; padding: var(--ui-sp-4); }

.sb-footer-actions { display: flex; align-items: center; gap: var(--ui-sp-8); }
.sb-circle-btn {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 32px; height: 32px;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-full);
  background: var(--ui-surface-2);
  color: var(--ui-text-2);
  transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.sb-circle-btn:hover { background: var(--ui-surface-3); border-color: var(--ui-border-2); color: var(--ui-text-1); }
.sb-circle-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ── меню под аватаром ── */
.sb-menu-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 700;
  min-width: 200px;
  margin-bottom: var(--ui-sp-8);
  padding: var(--ui-sp-4);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-pop);
}
.sb-menu-item {
  display: flex;
  align-items: center;
  gap: var(--ui-sp-8);
  width: 100%;
  padding: var(--ui-sp-8) var(--ui-sp-12);
  border: none;
  border-radius: var(--ui-r);
  background: transparent;
  color: var(--ui-text-2);
  font-size: var(--ui-fs-sm);
  font-weight: 500;
  text-align: left;
  transition: background var(--tr), color var(--tr);
}
.sb-menu-item:hover { background: var(--ui-surface-2); color: var(--ui-text-1); }
.sb-menu-item svg { width: 16px; height: 16px; fill: currentColor; opacity: .75; }
.sb-menu-item--danger { color: var(--ui-st-critical); }
.sb-menu-item--danger:hover { background: var(--ui-st-critical-bg); color: var(--ui-st-critical); }
.sb-menu-sep { height: 1px; margin: var(--ui-sp-4) 0; background: var(--ui-border); }

.sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 599; background: var(--ui-overlay); }
.sidebar-overlay.visible { display: block; }

/* ═══ 5. KPI / СТАТИСТИКА ═══════════════════════════════════════
   Единый блок с внутренними границами, а не набор отдельных карточек
   с тенями: так строка читается как одна таблица показателей. */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin-bottom: var(--ui-sp-24);
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  background: var(--ui-surface);
}
.stat-card {
  padding: var(--ui-sp-16);
  border-right: 1px solid var(--ui-border);
  background: transparent;
  transition: background var(--tr);
}
.stat-card:last-child { border-right: none; }
.stat-card:hover { background: var(--ui-surface-2); }
.stat-label {
  display: flex;
  align-items: center;
  gap: var(--ui-sp-4);
  margin-bottom: var(--ui-sp-4);
  font-size: var(--ui-fs-2xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-label svg { width: 14px; height: 14px; fill: currentColor; }
.stat-value {
  font-size: var(--ui-fs-xl);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ui-text-1);
  font-variant-numeric: tabular-nums;
}
.stat-sub { margin-top: var(--ui-sp-4); font-size: var(--ui-fs-xs); color: var(--ui-text-3); }
/* Цветовые модификаторы старой вёрстки гасятся: в системе цвет — сигнал,
   а не способ отличить одну карточку от другой. Красным остаётся
   только то, что действительно требует внимания. */
.stat-card.green .stat-value,
.stat-card.yellow .stat-value,
.stat-card.purple .stat-value,
.stat-card.teal .stat-value { color: var(--ui-text-1); }
.stat-card.red .stat-value { color: var(--ui-st-critical); }

/* ═══ 6. КАРТОЧКА ═══════════════════════════════════════════════ */
.card {
  padding: var(--ui-sp-16);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  background: var(--ui-surface);
}
.card-title {
  display: flex;
  align-items: center;
  gap: var(--ui-sp-8);
  margin-bottom: var(--ui-sp-16);
  font-size: var(--ui-fs-md);
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ui-text-1);
}
.card-title svg { width: 16px; height: 16px; fill: currentColor; opacity: .75; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-sp-16); margin-bottom: var(--ui-sp-16); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ui-sp-16); margin-bottom: var(--ui-sp-16); }
.grid-full { margin-bottom: var(--ui-sp-16); }

/* ═══ 7. ТАБЛИЦА ════════════════════════════════════════════════ */
.table-card {
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  background: var(--ui-surface);
}
.table-card table,
table { width: 100%; border-collapse: collapse; font-size: var(--ui-fs-sm); }
.table-card thead th,
th {
  padding: var(--ui-sp-8) var(--ui-sp-16);
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface-2);
  color: var(--ui-text-2);
  font-size: var(--ui-fs-2xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.table-card tbody td,
td {
  padding: var(--ui-sp-12) var(--ui-sp-16);
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-text-1);
  vertical-align: middle;
}
.table-card tbody tr:last-child td,
tr:last-child td { border-bottom: none; }
.table-card tbody tr:hover td { background: var(--ui-surface-2); }
td .ui-muted, .td-meta { color: var(--ui-text-3); font-size: var(--ui-fs-xs); }

.text-truncate { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty-state {
  padding: var(--ui-sp-48) var(--ui-sp-24);
  color: var(--ui-text-3);
  font-size: var(--ui-fs-sm);
  text-align: center;
}
.empty-state svg { width: 24px; height: 24px; margin: 0 auto var(--ui-sp-8); fill: currentColor; opacity: .5; }

/* ═══ 8. BADGE ══════════════════════════════════════════════════
   Уровень теста — это категория, а не срочность, поэтому все уровни
   нейтральные. Цветом отмечено только то, что несёт сигнал:
   сертификат получен / не получен. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-sp-4);
  padding: 2px var(--ui-sp-8);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r);
  background: var(--ui-surface-2);
  color: var(--ui-text-2);
  font-size: var(--ui-fs-2xs);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-basic,
.badge-intermediate,
.badge-advanced,
.badge-professional { background: var(--ui-surface-2); color: var(--ui-text-2); }

.cat-badge {
  display: inline-block;
  padding: 2px var(--ui-sp-8);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r);
  background: var(--ui-surface-2);
  color: var(--ui-text-2);
  font-size: var(--ui-fs-2xs);
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.correct-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r);
  background: var(--ui-surface-2);
  color: var(--ui-text-1);
  font-size: var(--ui-fs-xs);
  font-weight: 600;
}

.cert-yes { display: inline-flex; align-items: center; gap: var(--ui-sp-4); color: var(--ui-st-ok); font-weight: 500; }
.cert-no  { display: inline-flex; align-items: center; gap: var(--ui-sp-4); color: var(--ui-text-3); }
.cert-yes svg, .cert-no svg { width: 14px; height: 14px; fill: currentColor; }

/* ═══ 9. КНОПКИ ═════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-sp-8);
  height: 32px;
  padding: 0 var(--ui-sp-12);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r);
  background: var(--ui-surface);
  color: var(--ui-text-1);
  font-family: var(--ui-font);
  font-size: var(--ui-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--tr), border-color var(--tr), color var(--tr), opacity var(--tr);
}
.btn:hover { background: var(--ui-surface-2); border-color: var(--ui-border-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; fill: currentColor; }

/* Основное действие: инверсия, а не бренд-цвет */
.btn-primary { background: var(--ui-text-1); border-color: var(--ui-text-1); color: var(--ui-bg); }
.btn-primary:hover { background: var(--ui-text-2); border-color: var(--ui-text-2); }
.btn-primary:disabled:hover { background: var(--ui-text-1); }

.btn-green { background: var(--ui-text-1); border-color: var(--ui-text-1); color: var(--ui-bg); }
.btn-green:hover { background: var(--ui-text-2); border-color: var(--ui-text-2); }

.btn-secondary { background: var(--ui-surface-2); color: var(--ui-text-2); }
.btn-secondary:hover { background: var(--ui-surface-3); color: var(--ui-text-1); }

/* Удаление — единственная кнопка со статусным цветом */
.btn-danger {
  height: 28px;
  padding: 0 var(--ui-sp-8);
  border-color: transparent;
  background: transparent;
  color: var(--ui-st-critical);
  font-size: var(--ui-fs-xs);
}
.btn-danger:hover { background: var(--ui-st-critical-bg); border-color: transparent; }

.btn-sm { height: 28px; padding: 0 var(--ui-sp-8); font-size: var(--ui-fs-xs); }
.btn-icon { width: 32px; padding: 0; }
/* Основное действие во всю ширину формы: та же геометрия, что у .btn-login */
.btn-block { width: 100%; height: 36px; }
.btn-row { display: flex; gap: var(--ui-sp-8); margin-top: var(--ui-sp-24); }

/* ═══ 10. ФОРМЫ ═════════════════════════════════════════════════ */
.form-card {
  max-width: 720px;
  padding: var(--ui-sp-24);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  background: var(--ui-surface);
}
.form-group { margin-bottom: var(--ui-sp-16); }
.form-group label {
  display: block;
  margin-bottom: var(--ui-sp-4);
  font-size: var(--ui-fs-2xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-text-2);
}
.form-control,
.form-input {
  width: 100%;
  height: 32px;
  padding: 0 var(--ui-sp-12);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r);
  background: var(--ui-surface-2);
  color: var(--ui-text-1);
  font-family: var(--ui-font);
  font-size: var(--ui-fs-sm);
  outline: none;
  transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
}
.form-control::placeholder,
.form-input::placeholder { color: var(--ui-text-3); }
.form-control:focus,
.form-input:focus {
  border-color: var(--ui-text-1);
  background: var(--ui-surface);
  box-shadow: 0 0 0 3px var(--ui-ring);
}
textarea.form-control { height: auto; min-height: 88px; padding: var(--ui-sp-8) var(--ui-sp-12); resize: vertical; line-height: 1.5; }
select.form-control { cursor: pointer; }

.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-sp-12); }
.option-item { display: flex; align-items: center; gap: var(--ui-sp-8); }
.option-item .letter {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r);
  background: var(--ui-surface-2);
  color: var(--ui-text-2);
  font-size: var(--ui-fs-xs);
  font-weight: 600;
}
.radio-group { display: flex; gap: var(--ui-sp-16); flex-wrap: wrap; }
.radio-item {
  display: flex;
  align-items: center;
  gap: var(--ui-sp-8);
  cursor: pointer;
  font-size: var(--ui-fs-sm);
  font-weight: 500;
  color: var(--ui-text-2);
}
.radio-item input[type="radio"] { width: 16px; height: 16px; accent-color: var(--ui-text-1); }

.filters { display: flex; gap: var(--ui-sp-8); align-items: center; flex-wrap: wrap; }
.filter-select {
  height: 32px;
  padding: 0 var(--ui-sp-12);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r);
  background: var(--ui-surface-2);
  color: var(--ui-text-2);
  font-family: var(--ui-font);
  font-size: var(--ui-fs-sm);
  cursor: pointer;
  outline: none;
  transition: border-color var(--tr), color var(--tr);
}
.filter-select:focus { border-color: var(--ui-text-1); color: var(--ui-text-1); }

.error-box {
  display: none;
  margin-bottom: var(--ui-sp-12);
  padding: var(--ui-sp-8) var(--ui-sp-12);
  border: 1px solid var(--ui-st-critical);
  border-radius: var(--ui-r);
  background: var(--ui-st-critical-bg);
  color: var(--ui-st-critical);
  font-size: var(--ui-fs-xs);
  font-weight: 500;
}
.error-box.visible { display: block; }

/* ═══ 11. ПАГИНАЦИЯ ═════════════════════════════════════════════ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ui-sp-8) var(--ui-sp-16);
  border-top: 1px solid var(--ui-border);
}
.pag-info { font-size: var(--ui-fs-xs); color: var(--ui-text-3); }
.pag-btns { display: flex; gap: var(--ui-sp-4); }
.pag-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 var(--ui-sp-8);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r);
  background: var(--ui-surface);
  color: var(--ui-text-2);
  font-family: var(--ui-font);
  font-size: var(--ui-fs-xs);
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.pag-btn:hover { background: var(--ui-surface-2); color: var(--ui-text-1); }
.pag-btn.active { background: var(--ui-text-1); border-color: var(--ui-text-1); color: var(--ui-bg); }

/* ═══ 12. МОДАЛКА ═══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ui-sp-16);
  background: var(--ui-overlay);
}
.modal-box {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--ui-sp-16);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-modal);
}
.modal-lg { max-width: 640px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-sp-12);
  margin-bottom: var(--ui-sp-16);
  padding-bottom: var(--ui-sp-12);
  border-bottom: 1px solid var(--ui-border);
}
.modal-header h3 { font-size: var(--ui-fs-md); font-weight: 600; color: var(--ui-text-1); }
.modal-close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: none;
  border-radius: var(--ui-r);
  background: transparent;
  color: var(--ui-text-2);
  transition: background var(--tr), color var(--tr);
}
.modal-close:hover { background: var(--ui-surface-2); color: var(--ui-text-1); }
.modal-close svg { width: 16px; height: 16px; fill: currentColor; }

/* ═══ 13. ЗАГРУЗКА ФАЙЛА ════════════════════════════════════════ */
.file-drop-zone {
  padding: var(--ui-sp-24);
  border: 1px dashed var(--ui-border-2);
  border-radius: var(--ui-r-lg);
  background: var(--ui-surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--tr), background var(--tr);
}
/* Наведение и перетаскивание выглядят одинаково — это одно и то же
   состояние «зона готова принять файл». Правило общее, потому что иначе
   каждая страница с загрузкой заводит свою копию (так и было). */
.file-drop-zone:hover,
.file-drop-zone.drag { border-color: var(--ui-text-1); background: var(--ui-surface-3); }
.file-drop-icon { margin-bottom: var(--ui-sp-8); color: var(--ui-text-3); }
.file-drop-icon svg { width: 24px; height: 24px; margin: 0 auto; fill: currentColor; }
.file-drop-title { margin-bottom: var(--ui-sp-4); font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-text-1); }
.file-drop-text { font-size: var(--ui-fs-xs); color: var(--ui-text-3); }
/* Настоящий input прячется здесь, а не инлайном на каждой странице:
   клик по зоне всё равно пробрасывается на него из JS. */
.file-drop-zone input[type="file"] { display: none; }

/* ═══ 14. ВИДЕО ═════════════════════════════════════════════════ */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--ui-sp-16); }
.video-card {
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  background: var(--ui-surface);
  transition: border-color var(--tr);
}
.video-card:hover { border-color: var(--ui-border-2); }
.video-inactive { opacity: .55; }
.video-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--ui-surface-3); cursor: pointer; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-overlay);
  color: var(--ui-text-1);
  opacity: 0;
  transition: opacity var(--tr);
}
.play-overlay svg { width: 32px; height: 32px; fill: currentColor; }
.video-thumb:hover .play-overlay { opacity: 1; }
.video-info { padding: var(--ui-sp-12); }
.video-title {
  margin-bottom: var(--ui-sp-4);
  font-size: var(--ui-fs-md);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ui-text-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.video-meta { display: flex; align-items: center; gap: var(--ui-sp-8); margin-bottom: var(--ui-sp-4); flex-wrap: wrap; }
.video-desc {
  margin-bottom: var(--ui-sp-8);
  font-size: var(--ui-fs-xs);
  line-height: 1.5;
  color: var(--ui-text-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.video-actions { display: flex; gap: var(--ui-sp-8); margin-top: var(--ui-sp-8); }

/* ═══ 15. ОБЪЯВЛЕНИЯ ════════════════════════════════════════════
   Тип объявления — это его характер, а не срочность. Цветную заливку
   получает только `urgent`; остальные различаются подписью и иконкой. */
.ann-list { display: flex; flex-direction: column; gap: var(--ui-sp-8); }
.ann-row { display: flex; gap: var(--ui-sp-12); align-items: flex-start; }
.ann-row-actions { display: flex; flex-direction: column; gap: var(--ui-sp-8); flex-shrink: 0; }
.ann-card {
  display: flex;
  gap: var(--ui-sp-12);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--ui-sp-12) var(--ui-sp-16);
  border: 1px solid var(--ui-border);
  border-left: 2px solid var(--ui-border-2);
  border-radius: var(--ui-r-lg);
  background: var(--ui-surface);
}
.ann-card.info,
.ann-card.warning,
.ann-card.success { background: var(--ui-surface); border-left-color: var(--ui-border-2); }
.ann-card.urgent { background: var(--ui-st-critical-bg); border-left-color: var(--ui-st-critical); }
.ann-type-icon { flex-shrink: 0; margin-top: 2px; color: var(--ui-text-3); }
.ann-type-icon svg { width: 18px; height: 18px; fill: currentColor; }
.ann-card.urgent .ann-type-icon { color: var(--ui-st-critical); }
.ann-title { margin-bottom: var(--ui-sp-4); font-size: var(--ui-fs-md); font-weight: 600; color: var(--ui-text-1); }
.ann-content { font-size: var(--ui-fs-sm); line-height: 1.6; color: var(--ui-text-2); white-space: pre-wrap; }
.ann-meta { display: flex; gap: var(--ui-sp-8); align-items: center; margin-top: var(--ui-sp-8); flex-wrap: wrap; }
.ann-preview { margin: var(--ui-sp-16) 0; padding: var(--ui-sp-12); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); background: var(--ui-surface-2); }
.ann-preview-label {
  margin-bottom: var(--ui-sp-8);
  font-size: var(--ui-fs-2xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-text-3);
}

/* ═══ 16. ВХОД ══════════════════════════════════════════════════
   Раньше здесь был тёмно-синий градиент на пол-экрана. В монохромной
   системе он бы жил отдельной жизнью от остальной админки, поэтому
   заменён на ту же поверхность, что и везде: карточка по центру. */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--ui-sp-24);
  background: var(--ui-bg);
}
.login-card {
  width: 100%;
  max-width: 360px;
  padding: var(--ui-sp-32);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  background: var(--ui-surface);
  animation: pageIn var(--ui-dur) var(--ui-ease) both;
}
.login-brand { display: flex; align-items: center; gap: var(--ui-sp-12); margin-bottom: var(--ui-sp-24); }
.login-brand .sb-icon svg { width: 32px; height: 32px; }
.login-brand h1 { font-size: var(--ui-fs-lg); font-weight: 600; letter-spacing: -.02em; color: var(--ui-text-1); }
.login-brand .brand-sub { font-size: var(--ui-fs-xs); color: var(--ui-text-3); }
.login-sub { margin-bottom: var(--ui-sp-24); font-size: var(--ui-fs-xs); color: var(--ui-text-3); }
.btn-login {
  width: 100%;
  height: 36px;
  margin-top: var(--ui-sp-8);
  border: 1px solid var(--ui-text-1);
  border-radius: var(--ui-r);
  background: var(--ui-text-1);
  color: var(--ui-bg);
  font-family: var(--ui-font);
  font-size: var(--ui-fs-sm);
  font-weight: 600;
  transition: background var(--tr), opacity var(--tr);
}
.btn-login:hover { background: var(--ui-text-2); border-color: var(--ui-text-2); }
.btn-login:disabled { opacity: .5; cursor: not-allowed; }
.login-footer { margin-top: var(--ui-sp-24); font-size: var(--ui-fs-2xs); color: var(--ui-text-3); text-align: center; }

/* ═══ 17. ПРОЧЕЕ ════════════════════════════════════════════════ */
.spinner-sm {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--ui-border-2);
  border-top-color: var(--ui-text-1);
  border-radius: var(--ui-r-full);
  animation: spin .6s linear infinite;
}
/* Тот же спиннер крупнее — для ожидания во всю карточку, а не внутри кнопки */
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.btn-primary .spinner-sm, .btn-login .spinner-sm { border-color: var(--ui-ring); border-top-color: var(--ui-bg); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Полоса-индикатор (доля, прогресс) */
.sbar-wrap { flex: 1; height: 6px; margin: 0 var(--ui-sp-8); border-radius: var(--ui-r-full); background: var(--ui-surface-3); overflow: hidden; }
.sbar { height: 6px; border-radius: var(--ui-r-full); background: var(--ui-text-1); }

.top-row { display: flex; align-items: center; justify-content: space-between; padding: var(--ui-sp-8) 0; border-bottom: 1px solid var(--ui-border); }
.top-row:last-child { border-bottom: none; }
.rank {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r);
  background: var(--ui-surface-2);
  color: var(--ui-text-2);
  font-size: var(--ui-fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rank.gold, .rank.silver, .rank.bronze { background: var(--ui-surface-3); color: var(--ui-text-1); }

.pass-big { font-size: var(--ui-fs-xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ui-text-1); font-variant-numeric: tabular-nums; }

/* ═══ 18. АДАПТИВ ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  html.sb-collapsed .main { margin-left: 0; }
  .hamburger { display: flex; }
  .options-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .page-body { padding: var(--ui-sp-12) var(--ui-sp-16) var(--ui-sp-24); }
  .topbar { padding: var(--ui-sp-16) var(--ui-sp-16) 0; }
  .video-grid { grid-template-columns: 1fr; }
  .ann-row { flex-direction: column; }
  .ann-row-actions { flex-direction: row; width: 100%; }
}
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr; }
  .stat-card { border-right: none; border-bottom: 1px solid var(--ui-border); }
  .stat-card:last-child { border-bottom: none; }
}

/* Jadval qatoridagi bir nechta amal tugmasi — bir qatorda, siqilmasdan */
.row-actions { display: flex; gap: var(--ui-sp-8); flex-wrap: nowrap; }
.row-actions .btn { white-space: nowrap; }