/* Сброс: убирает браузерные margin/padding, включает border-box для всех элементов */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Дизайн-токены: цвета фона, текста, акцентов и радиус.
   Используются на обеих страницах через var(--имя). */
:root {
  --bg:           #0d1117;
  --card:         #161b22;
  --card-hover:   #1c2128;
  --border:       #30363d;
  --border-light: #21262d;
  --text:         #c9d1d9;
  --muted:        #8b949e;
  --green:        #3fb950;
  --green-dim:    rgba(63,185,80,.12);
  --red:          #f85149;
  --red-dim:      rgba(248,81,73,.12);
  --blue:         #58a6ff;
  --blue-dim:     rgba(88,166,255,.12);
  --yellow:       #e3b341;
  --yellow-dim:   rgba(227,179,65,.12);
  --purple:       #a371f7;
  --purple-dim:   rgba(163,113,247,.12);
  --radius:       10px;
}

/* Базовые стили страницы: тёмный фон, шрифт системный */
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  min-height: 100vh;
  padding: 0 0 40px;
}

/* Центрирующая обёртка контента с ограничением ширины */
.page { max-width: 960px; margin: 0 auto; padding: 20px 16px; }

/* Навигационная шапка: логотип + ссылки Панель / Тесты */
.nav {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 20px;
  height: 46px;
}
.nav-brand {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-right: 12px;
  letter-spacing: -.2px;
}
/* Ссылки навигации: подсвечиваются при наведении и помечаются .active на текущей странице */
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-link:hover  { background: var(--border-light); color: var(--text); }
.nav-link.active { background: var(--border-light); color: var(--text); font-weight: 500; }
.nav-user { margin-left: auto; font-size: 12px; color: var(--muted); padding: 0 8px; }
.nav-logout { margin-left: 0; color: var(--muted); }
.nav-logout:hover { color: var(--red); background: var(--red-dim); }

/* Toast-уведомления: стек снизу справа, появляются и исчезают с анимацией.
   Управляются функцией showToast() в каждом JS-файле. */
#toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  background: #2d2d2d; color: var(--text); border: 1px solid var(--border);
  border-left: 3px solid var(--yellow); padding: 12px 16px; border-radius: var(--radius);
  font-size: 13px; max-width: 320px; opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s; pointer-events: auto;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.hide { opacity: 0; transform: translateY(8px); }

/* Анимации: пульсация — для индикаторов активного состояния (running);
   spin — для спиннера загрузки */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.85); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Блокирующий оверлей «Прогон отменяется»: перекрывает всю страницу,
   пока сервер не подтвердит завершение отмены (finished / test-run-finished).
   Показывается/скрывается функцией updateStopOverlay() в index.js и tests.js. */
.stop-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(13, 17, 23, .72);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.stop-overlay.hidden { display: none; }
.stop-overlay-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}
.stop-overlay-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--yellow);
  animation: spin .8s linear infinite;
  /* Отдельный слой композитора: вращение не подвисает, пока главный поток
     занят обработкой SSE-событий и лога отменяемого прогона */
  will-change: transform;
}
.stop-overlay-text { font-size: 15px; font-weight: 500; color: var(--text); }
.stop-overlay-hint { font-size: 12px; color: var(--muted); }