/* ═══════════════════════════════════════════════════════════
   КРАСИВОЕ МЕНЮ САЙТА (header-beauty)
   Не трогает HTML. Только стили поверх main.css/neon.css.
   ═══════════════════════════════════════════════════════════ */

/* ── Контейнер шапки ── */
header.site-header,
header.site-header.site-header {
  background: rgba(10, 12, 18, 0.72) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.32) !important;
}

/* ── Внутренний ряд ── */
header .header-inner {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px 22px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* ── Логотип ── */
header .header-inner .logo,
header .header-inner .logo:visited {
  font-weight: 900 !important;
  font-size: 20px !important;
  letter-spacing: .6px !important;
  background: linear-gradient(135deg, #a78bfa 0%, #ec4899 55%, #6366f1 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-decoration: none !important;
  padding: 2px 10px 2px 0 !important;
  margin-right: 10px !important;
  transition: filter .2s ease !important;
}
header .header-inner .logo:hover {
  filter: drop-shadow(0 0 14px rgba(168, 85, 247, .6)) !important;
}

/* ── Пункты меню ── */
header .header-inner > a.nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #cfd6e3 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease !important;
  white-space: nowrap !important;
}
header .header-inner > a.nav-link:hover {
  background: rgba(124, 92, 255, 0.16) !important;
  color: #ffffff !important;
  border-color: rgba(124, 92, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* ── Активный пункт ── */
header .header-inner > a.nav-link.nav-active {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.32) 0%, rgba(168, 85, 247, 0.32) 100%) !important;
  color: #ffffff !important;
  border-color: rgba(124, 92, 255, 0.55) !important;
  box-shadow: 0 0 14px rgba(124, 92, 255, 0.28), inset 0 0 10px rgba(124, 92, 255, 0.10) !important;
  font-weight: 700 !important;
}

/* ── «Выйти» — красный акцент ── */
header .header-inner > a.nav-link[href="/logout"] {
  color: #fca5a5 !important;
}
header .header-inner > a.nav-link[href="/logout"]:hover {
  background: rgba(239, 68, 68, 0.16) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #fecaca !important;
}

/* ── Бейдж подписки ── */
header .header-inner .badge {
  padding: 5px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.22), rgba(249, 115, 22, 0.22)) !important;
  color: #fde68a !important;
  border: 1px solid rgba(234, 179, 8, 0.45) !important;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.18) !important;
}

/* ── Ссылка профиля — pill ── */
header .header-inner > a.nav-link[href="/profile"] {
  padding: 7px 14px !important;
  background: rgba(99, 102, 241, 0.14) !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  color: #e0e7ff !important;
}
header .header-inner > a.nav-link[href="/profile"]:hover {
  background: rgba(99, 102, 241, 0.26) !important;
  border-color: rgba(99, 102, 241, 0.6) !important;
  transform: translateY(-1px) !important;
}

/* ── Мобильная адаптация ── */
@media (max-width: 760px) {
  header .header-inner {
    padding: 10px 14px !important;
    gap: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  header .header-inner::-webkit-scrollbar { display: none !important; }
  header .header-inner .logo { font-size: 17px !important; }
  header .header-inner > a.nav-link {
    padding: 7px 11px !important;
    font-size: 12.5px !important;
  }
  header .header-inner > a.nav-link[href="/profile"] { padding: 6px 10px !important; }
}