/* Основные стили шапки */
.header {
  background-color: rgba(10, 10, 10, 0.85); /* Полупрозрачный темный фон */
  padding: 10px 0; /* Вертикальные отступы */
  position: sticky; /* Фиксированная позиция */
  top: 0; /* Прилипание к верху */
  z-index: 100; /* Поверх других элементов */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Тонкая граница */
  backdrop-filter: blur(10px); /* Размытие фона */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Нежная тень */
}

/* Контейнер внутри шапки */
.header .container {
  display: flex;
  justify-content: space-between; /* Распределение пространства */
  align-items: center; /* Выравнивание по центру */
  max-width: 1000px; /* Максимальная ширина */
  margin: 0 auto; /* Центрирование */
  padding: 0 20px; /* Боковые отступы */
}

/* Стили логотипа */
.logo {
  font-size: 18px; /* Размер текста */
  font-weight: 700; /* Жирное начертание */
  background: var(--gradient); /* Градиентный фон */
  -webkit-background-clip: text; /* Обрезка фона по тексту */
  background-clip: text; /* Обрезка фона по тексту */
  color: transparent; /* Прозрачный текст */
  text-decoration: none; /* Убираем подчеркивание */
}

/* Основная навигация */
.nav {
  display: flex;
  gap: 24px; /* Расстояние между элементами (1.5rem → 24px) */
  align-items: center;
}

/* Ссылки в навигации */
.nav-link {
  color: var(--text-muted); /* Цвет текста */
  text-decoration: none; /* Убираем подчеркивание */
  font-weight: 500; /* Полужирное начертание */
  display: flex;
  align-items: center;
  gap: 8px; /* Расстояние между иконкой и текстом (0.5rem → 8px) */
  transition: var(--transition); /* Плавные переходы */
  font-size: 14px; /* Размер текста */
  padding: 8px 0; /* Отступы для лучшего клика */
}

/* Состояния ссылок */
.nav-link:hover,
.nav-link.active {
  color: var(--text); /* Цвет при наведении/активности */
}

/* Кнопка входа через Twitch */
.twitch-login-btn {
  background-color: #9146ff; /* Фиолетовый фон */
  color: white; /* Белый текст */
  border: none; /* Убираем границу */
  padding: 8px 16px; /* Внутренние отступы */
  border-radius: 4px; /* Скругление углов */
  font-weight: 600; /* Жирное начертание */
  cursor: pointer; /* Курсор-указатель */
  display: flex;
  align-items: center;
  gap: 8px; /* Расстояние между иконкой и текстом */
  transition: var(--transition); /* Плавные переходы */
  font-size: 14px; /* Размер текста */
}

/* Состояние кнопки при наведении */
.twitch-login-btn:hover {
  background-color: #7c3ad9; /* Темно-фиолетовый */
  transform: translateY(-2px); /* Сдвиг вверх */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень при наведении */
}

/* Меню пользователя */
.user-menu {
  display: flex;
  align-items: center;
  gap: 15px; /* Расстояние между элементами */
}

/* Кнопка выхода */
.logout-btn {
  background: none; /* Прозрачный фон */
  border: none; /* Убираем границу */
  color: inherit; /* Наследуем цвет текста */
  cursor: pointer; /* Курсор-указатель */
  display: flex;
  align-items: center;
  gap: 5px; /* Расстояние между иконкой и текстом */
  padding: 0; /* Убираем отступы */
  font: inherit; /* Наследуем шрифт */
  transition: var(--transition); /* Плавные переходы */
}

/* Состояние кнопки выхода при наведении */
.logout-btn:hover {
  color: #ff4d4d; /* Красный цвет */
  transform: translateY(-1px); /* Легкий сдвиг */
}

/* Защита от переноса текста */
.twitch-login-btn,
.user-menu {
  white-space: nowrap; /* Запрет переноса текста */
}

/* Иконки в навигации */
.nav-link i,
.twitch-login-btn i,
.logout-btn i {
  font-size: 14px; /* Размер иконок */
  transition: var(--transition); /* Плавные переходы */
}