.main-nav {
  @apply fixed top-0 left-0 right-0 bg-black text-white z-50 shadow;
}
.nav-container {
  @apply max-w-7xl mx-auto flex items-center justify-between h-16 px-4;
}
.logo {
  @apply h-6 sm:h-8 object-contain;
}

.nav-primary .nav-item {
  @apply flex items-center gap-2 text-white hover:text-music-primary transition px-2 py-1;
}
.nav-item.active {
  @apply font-bold text-music-primary border-b-2 border-music-primary;
}

.nav-search-btn {
  @apply p-2 rounded hover:bg-gray-800;
}
.search-dropdown {
  @apply hidden absolute right-0 mt-2 bg-white shadow-lg rounded z-50;
}
.search-input {
  @apply px-3 py-1 border border-gray-300 rounded-l focus:ring-2 focus:ring-music-primary;
}

.user-avatar {
  @apply w-8 h-8 rounded-full border border-gray-500 object-cover;
}

.user-dropdown-menu {
  @apply absolute right-0 mt-2 bg-white text-black shadow-lg rounded w-48 hidden group-hover:block z-50;
}
.dropdown-item {
  @apply block px-4 py-2 hover:bg-gray-100 text-sm flex items-center;
}

.auth-btn {
  @apply px-3 py-1 bg-white text-black rounded hover:bg-gray-200 text-sm;
}
.auth-btn.highlight {
  @apply bg-music-primary text-black hover:bg-green-500;
}

.mobile-menu-toggle {
  @apply p-2 hover:bg-gray-800 rounded;
}