/* ============================================
   ALBERTINE MUSIC - OPTIMIZED CSS
   ============================================ */

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #0a1628;
  
  color: #e5e7eb;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  overscroll-behavior-y: auto;
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #1a1a1f;
}

::-webkit-scrollbar-thumb {
  background: #f59e0b;
  border-radius: 10px;
}

/* Upload Progress Bar */
.upload-progress-container {
  margin-top: 15px;
  margin-bottom: 15px;
  display: none;
}

.upload-progress-bar-wrapper {
  background: #374151;
  border-radius: 10px;
  overflow: hidden;
  height: 8px;
}

.upload-progress-fill {
  background: linear-gradient(90deg, #f59e0b, #ea580c);
  width: 0%;
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 10px;
}

.upload-progress-text {
  margin-top: 8px;
  font-size: 12px;
  color: #f59e0b;
  text-align: center;
}

/* Statistics Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.stat-card {
  background: linear-gradient(135deg, #1a1a2e, #0f0f1a);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  border: 1px solid #374151;
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  border-color: #f59e0b;
}

.stat-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #f59e0b;
}

.stat-label {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 5px;
}

/* Toast Notification */
.toast-notification {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 8px 16px;
  border-radius: 40px;
  z-index: 1000;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  border-left: 3px solid #f59e0b;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Song List */
.artist-songs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.song-list-item {
  background: rgba(31, 41, 55, 0.6);
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 10px 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.song-list-item:active {
  background: rgba(245, 158, 11, 0.15);
  transform: scale(0.99);
}

.song-list-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.song-rank-number {
  min-width: 32px;
  text-align: center;
}

.rank-number {
  font-size: 12px;
  font-weight: bold;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.song-title-section {
  flex: 2;
  min-width: 0;
}

.song-title {
  font-size: 13px;
  font-weight: 600;
  color: white;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.song-title-main {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.song-artist-name {
  font-size: 10px;
  color: #9ca3af;
}

.song-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.song-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: #6b7280;
}

.song-stats span {
  display: flex;
  align-items: center;
  gap: 2px;
}

.song-play-btn-list {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 30px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
}

.song-download-btn-list {
  background: #374151;
  color: white;
  border: none;
  padding: 5px 8px;
  border-radius: 30px;
  font-size: 10px;
  cursor: pointer;
}

/* Pagination */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 30px;
  padding: 15px 0;
  border-top: 1px solid #374151;
  width: 100%;
}

.pagination-btn {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 40px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  color: #f59e0b;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.1);
  padding: 6px 14px;
  border-radius: 40px;
  font-size: 13px;
}

/* Artist Cards */
.featured-artist-card,
.category-artist-card,
.similar-artist-card {
  text-align: center;
  cursor: pointer;
  width: 100%;
  max-width: 100px;
  margin: 0 auto;
}

.featured-artist-card img,
.category-artist-card img,
.similar-artist-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid #f59e0b;
  transition: all 0.3s ease;
  display: block;
}

.featured-artist-card .artist-name span,
.category-artist-card .artist-name span,
.similar-artist-card .artist-name span {
  font-size: 11px;
  font-weight: 600;
  color: #e5e7eb;
  background: rgba(0, 0, 0, 0.6);
  padding: 3px 8px;
  border-radius: 20px;
  display: inline-block;
  margin-top: 6px;
}

#selectedArtistImage {
  width: 80px;
  height: 80px;
  border-radius: 50% !important;
  overflow: hidden;
  border: 2px solid #f59e0b;
}

@media (min-width: 640px) {
  #selectedArtistImage {
    width: 100px;
    height: 100px;
  }
}

#selectedArtistImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ============================================
   FIXED: FEATURED ARTISTS HORIZONTAL SCROLL
   ============================================ */

#artistsGrid {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 20px !important;
  padding: 10px 4px 20px 4px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: #f59e0b transparent !important;
}

#artistsGrid::-webkit-scrollbar {
  height: 6px !important;
}

#artistsGrid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
}

#artistsGrid::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #f59e0b, #ea580c) !important;
  border-radius: 10px !important;
}

/* Each artist card */
#artistsGrid .featured-artist-card {
  flex: 0 0 120px !important;
  min-width: 100px !important;
  max-width: 140px !important;
  text-align: center !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  scroll-snap-align: start !important;
}

/* Artist image circle */
#artistsGrid .featured-artist-card .artist-circle {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 3px solid #f59e0b !important;
  transition: all 0.3s ease !important;
  background: #1a1a2e !important;
}

#artistsGrid .featured-artist-card .artist-circle:hover {
  transform: scale(1.05) !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.3) !important;
}

#artistsGrid .featured-artist-card .artist-circle img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Artist name - FIXED */
#artistsGrid .featured-artist-card .artist-name {
  margin-top: 10px !important;
  width: 100% !important;
  text-align: center !important;
}

#artistsGrid .featured-artist-card .artist-name span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.8) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  display: inline-block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

/* Mobile sizes */
@media (max-width: 480px) {
  #artistsGrid .featured-artist-card {
    flex: 0 0 90px !important;
    min-width: 80px !important;
    max-width: 110px !important;
  }
  
  #artistsGrid .featured-artist-card .artist-name span {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
}

/* Scroll arrows for artists */
.artist-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.artist-scroll-btn:hover {
  background: rgba(245, 158, 11, 0.3);
  border-color: #f59e0b;
  transform: scale(1.1);
}

.artist-scroll-btn.left {
  left: -6px;
}

.artist-scroll-btn.right {
  right: -6px;
}

@media (min-width: 640px) {
  .artist-scroll-btn {
    display: flex;
  }
}

#artistsSection {
  position: relative;
  padding: 0 10px;
}

/* ============================================
   DJ MIXES HORIZONTAL SCROLL
   ============================================ */

#djMixesGrid {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 16px !important;
  padding: 8px 4px 16px 4px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: #a855f7 transparent !important;
}

#djMixesGrid::-webkit-scrollbar {
  height: 6px !important;
}

#djMixesGrid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
}

#djMixesGrid::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #a855f7, #7c3aed) !important;
  border-radius: 10px !important;
}

#djMixesGrid .track-card {
  flex: 0 0 180px !important;
  scroll-snap-align: start !important;
  min-width: 160px !important;
  max-width: 200px !important;
}

@media (max-width: 480px) {
  #djMixesGrid .track-card {
    flex: 0 0 140px !important;
    min-width: 130px !important;
    max-width: 160px !important;
  }
}

/* Grids */
#trendingGrid,
#newSongsGrid,
#mostPlayedGrid {
  display: grid;
  gap: 10px;
}

@media (max-width: 480px) {
  #trendingGrid,
  #newSongsGrid,
  #mostPlayedGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  #trendingGrid,
  #newSongsGrid,
  #mostPlayedGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

@media (min-width: 769px) {
  #trendingGrid,
  #newSongsGrid,
  #mostPlayedGrid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

.track-card {
  transition: transform 0.2s ease;
  background: rgba(31, 31, 40, 0.8);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #2a2a30;
}

.track-card:active {
  transform: scale(0.98);
}

.track-card .p-4 {
  padding: 8px !important;
}

.track-card h3 {
  font-size: 11px !important;
  margin-bottom: 2px;
}

.track-card p {
  font-size: 9px !important;
}

.track-card button {
  padding: 4px 8px !important;
  font-size: 9px !important;
}

.card-play-btn {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
}

.most-played-rank {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 9px;
  padding: 2px 5px;
  background: rgba(0, 0, 0, 0.7);
  color: #f59e0b;
  border-radius: 20px;
  z-index: 10;
}

.play-count {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 8px;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Artist Grids */
#artistsGrid,
#categoryArtistsGrid,
#similarArtistsGrid {
  display: grid;
  gap: 12px;
  justify-items: center;
}

@media (max-width: 480px) {
  #artistsGrid,
  #categoryArtistsGrid,
  #similarArtistsGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  #artistsGrid,
  #categoryArtistsGrid,
  #similarArtistsGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (min-width: 769px) {
  #artistsGrid {
    grid-template-columns: repeat(6, 1fr);
  }
  #categoryArtistsGrid {
    grid-template-columns: repeat(5, 1fr);
  }
  #similarArtistsGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Navbar */
nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 10, 15, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #1f1f25;
}

#homeBtn .w-8 {
  width: 32px;
  height: 32px;
}

#homeBtn span {
  font-size: 14px;
}

@media (max-width: 480px) {
  #homeBtn .w-8 {
    width: 28px;
    height: 28px;
  }
  #homeBtn span {
    font-size: 12px;
  }
}

/* Search */
#searchInput {
  background: #1a1a20;
  border: 1px solid #2a2a30;
  border-radius: 40px;
  padding: 8px 12px 8px 32px;
  font-size: 12px;
  color: white;
  width: 100%;
  height: 36px;
}

#searchInput:focus {
  outline: none;
  border-color: #f59e0b;
}

@media (max-width: 480px) {
  #searchInput {
    font-size: 11px;
    padding: 6px 10px 6px 28px;
    height: 32px;
  }
}

/* Audio Player */
#globalAudioPlayer {
  background: rgba(15, 15, 20, 0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid #2a2a30;
  padding: 8px 10px;
}

#progressBar {
  accent-color: #f59e0b;
  height: 3px;
}

#nowPlayingTitle,
#nowPlayingArtist {
  max-width: 80px;
  font-size: 10px;
}

#playPauseBtn {
  width: 28px;
  height: 28px;
}

#currentTime,
#duration {
  font-size: 9px;
}

@media (max-width: 480px) {
  #nowPlayingTitle,
  #nowPlayingArtist {
    max-width: 60px;
    font-size: 9px;
  }
  #playPauseBtn {
    width: 24px;
    height: 24px;
  }
}

/* Hero */
#heroSection h1 {
  font-size: 24px;
}

#heroSection p {
  font-size: 12px;
}

#heroSection a {
  padding: 8px 16px;
  font-size: 11px;
}

@media (min-width: 640px) {
  #heroSection h1 {
    font-size: 36px;
  }
}

/* Utilities */
.hidden {
  display: none;
}

#adminToggleBtn {
  display: none;
}

#adminToggleBtn.admin-visible {
  display: flex !important;
  position: fixed;
  top: 70px;
  right: 8px;
  padding: 5px 10px;
  font-size: 10px;
  z-index: 50;
}

button, 
.category-chip,
.featured-artist-card,
.song-list-item {
  touch-action: manipulation;
}

/* More Music */
#moreMusicYouMayLikeSection {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(245, 158, 11, 0.2);
}

#moreMusicGrid {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 10px;
  padding-bottom: 16px;
  padding-top: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#moreMusicGrid::-webkit-scrollbar {
  height: 4px;
}

#moreMusicGrid::-webkit-scrollbar-track {
  background: #1a1a1f;
  border-radius: 10px;
}

#moreMusicGrid::-webkit-scrollbar-thumb {
  background: #f59e0b;
  border-radius: 10px;
}

.more-music-card {
  flex: 0 0 110px;
  scroll-snap-align: start;
  background: rgba(31, 31, 40, 0.8);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #2a2a30;
  transition: all 0.2s ease;
}

.more-music-card img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.more-music-card .p-3 {
  padding: 8px 6px !important;
}

.more-music-card h3 {
  font-size: 10px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.more-music-card p {
  font-size: 9px;
  color: #fbbf24;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .more-music-card {
    flex: 0 0 130px;
  }
  .more-music-card img {
    height: 130px;
  }
  .more-music-card h3 {
    font-size: 11px;
  }
}

/* News */
#newsGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 16px !important;
  padding: 8px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.news-card {
  background: rgba(31, 31, 40, 0.8);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #2a2a30;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.news-card .image-wrapper {
  position: relative;
  overflow: hidden;
  height: 180px;
  flex-shrink: 0;
}

.news-card .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-card .category-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #7c3aed;
  color: white;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
}

.news-card .news-content {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-card .news-content h3 {
  font-size: 14px;
  font-weight: 600;
  color: white;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card .news-content p {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.news-card .news-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.news-card .news-footer .date {
  font-size: 10px;
  color: #6b7280;
}

.news-card .news-footer .read-more {
  font-size: 10px;
  color: #7c3aed;
  font-weight: 500;
}

/* ===== ADMIN MODAL ===== */
.admin-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(16px);
  z-index: 20000;
  display: none;
  overflow-y: auto;
  padding: 20px;
}

.admin-modal.active {
  display: block;
}

.admin-modal-content {
  max-width: 1200px;
  margin: 20px auto;
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border-radius: 24px;
  padding: 30px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
}

.small-modal .admin-modal-content {
  max-width: 800px;
}

.close-admin-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  padding: 8px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.admin-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 25px;
  padding-bottom: 0;
  flex-wrap: wrap;
  overflow-x: auto;
}

.admin-tab {
  padding: 10px 20px;
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.3s ease;
  border-radius: 10px 10px 0 0;
  white-space: nowrap;
}

.admin-tab.active {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.admin-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #f59e0b, #ea580c);
  border-radius: 2px;
}

.admin-panel {
  display: none;
  animation: fadeSlideIn 0.3s ease;
}

.admin-panel.active {
  display: block;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.admin-panel h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.admin-table {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th {
  padding: 12px 16px;
  text-align: left;
  background: rgba(0, 0, 0, 0.3);
  color: #f59e0b;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-table td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #d1d5db;
  vertical-align: middle;
}

.admin-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #f59e0b;
  border-radius: 4px;
}

.delete-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.select-all-btn {
  background: rgba(55, 65, 81, 0.6);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
  margin-right: 8px;
}

.bulk-delete-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  padding: 8px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.search-filter {
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.search-filter input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: white;
  font-size: 14px;
  transition: all 0.3s ease;
}

.search-filter input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.batch-upload-area {
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.file-input-group {
  margin-bottom: 20px;
  text-align: left;
}

.file-input-group label {
  display: block;
  margin-bottom: 8px;
  color: #f59e0b;
  font-weight: 600;
  font-size: 14px;
}

.file-input-group input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: white;
  font-size: 13px;
  transition: all 0.3s ease;
}

.upload-btn {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s ease;
  margin-top: 10px;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
}

.manage-song-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s ease;
  flex-wrap: wrap;
  gap: 10px;
}

.manage-song-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 150px;
}

.manage-song-cover {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.manage-song-details h4 {
  font-size: 14px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.manage-song-details p {
  font-size: 12px;
  color: #9ca3af;
  margin: 2px 0 0 0;
}

.toggle-trending-btn,
.toggle-featured-artist-btn,
.toggle-new-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.toggle-trending-btn.active,
.toggle-featured-artist-btn.active,
.toggle-new-btn.active {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.toggle-trending-btn.inactive,
.toggle-featured-artist-btn.inactive,
.toggle-new-btn.inactive {
  background: rgba(55, 65, 81, 0.6);
  color: #9ca3af;
}

.current-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 12px 6px 8px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: #d1d5db;
}

/* Responsive */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .stat-value {
    font-size: 24px;
  }
  .admin-table {
    font-size: 12px;
  }
  .admin-table th,
  .admin-table td {
    padding: 8px 10px;
  }
  .batch-upload-area {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .song-list-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .song-actions {
    width: 100%;
    justify-content: space-between;
    margin-top: 6px;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .stat-card {
    padding: 14px;
  }
  .stat-value {
    font-size: 20px;
  }
  .admin-modal-content {
    padding: 12px;
    margin: 8px;
  }
  .admin-tab {
    padding: 6px 10px;
    font-size: 10px;
  }
}

/* Color Utilities */
.text-amber-400 { color: #f59e0b; }
.text-red-400 { color: #f87171; }
.text-emerald-400 { color: #34d399; }
.text-purple-400 { color: #a78bfa; }
.text-blue-400 { color: #60a5fa; }
.text-green-400 { color: #34d399; }
.bg-amber-600 { background: #d97706; }
.bg-red-600 { background: #dc2626; }

/* Page Modal */
#pageModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 99999;
  display: none;
  padding: 10px;
  overflow-y: auto;
}

#pageModal.active {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#pageModal .admin-modal-content {
  width: 100%;
  max-width: 700px;
  max-height: 95vh;
  background: #14142a;
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 16px;
  padding: 20px 24px;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.9);
}

#pageModal .close-modal-btn {
  float: right;
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.2);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Footer */
.footer-links-container {
  padding: 16px 8px 8px 8px;
  text-align: center;
}

.footer-links-container .footer-links-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
}

.footer-links-container .footer-link-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 4px;
  color: #9ca3af;
}

.footer-links-container .footer-link-btn:hover {
  color: #f59e0b;
}

.footer-links-container .footer-copyright {
  font-size: 10px;
  color: rgba(255,255,255,0.2);
  margin-top: 8px;
  display: block;
}

/* ===== NEWS DETAIL MODAL - FULL SCREEN ===== */
#newsDetailModal .admin-modal-content {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 20px !important;
    border-radius: 0 !important;
    background: linear-gradient(145deg, #1a1a2e, #16213e) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

#newsDetailModal .admin-modal-content .close-modal-btn {
    display: none !important;
}

/* ===== SIMPLE FULL-SCREEN NEWS MODAL ===== */

/* Full screen overlay */
#newsDetailModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 999999;
    display: none;
    overflow-y: auto;
    padding: 20px;
}

/* When open */
#newsDetailModal.open {
    display: block;
}

/* Inner content */
#newsDetailModal .modal-inner {
    max-width: 700px;
    margin: 0 auto;
    background: #0a0a1a;
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Close button */
#newsDetailModal .modal-close {
    float: right;
    background: rgba(255,255,255,0.05);
    color: white;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 8px 18px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
}

#newsDetailModal .modal-close:hover {
    background: rgba(255,255,255,0.1);
}

/* Image */
#newsDetailModal .modal-img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 12px;
    margin: 10px 0 15px 0;
}

/* Title */
#newsDetailModal .modal-title {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin: 0 0 10px 0;
}

/* Description */
#newsDetailModal .modal-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #ccc;
    white-space: pre-wrap;
}

/* Date */
#newsDetailModal .modal-date {
    font-size: 12px;
    color: #666;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* Back button */
#newsDetailModal .modal-back {
    background: rgba(255,255,255,0.05);
    color: white;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 10px 24px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 15px;
    transition: 0.3s;
}

#newsDetailModal .modal-back:hover {
    background: rgba(255,255,255,0.1);
}

/* Mobile */
@media (max-width: 600px) {
    #newsDetailModal { padding: 10px; }
    #newsDetailModal .modal-inner { padding: 16px; }
    #newsDetailModal .modal-title { font-size: 20px; }
    #newsDetailModal .modal-desc { font-size: 14px; line-height: 1.6; }
    #newsDetailModal .modal-img { max-height: 200px; }
}

/* ============================================
   MORE MUSIC YOU MAY LIKE - HORIZONTAL SCROLL
   ============================================ */

#moreMusicYouMayLikeSection {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(245, 158, 11, 0.2);
  position: relative;
}

#moreMusicGrid {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 16px !important;
  padding: 8px 4px 16px 4px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: #f59e0b transparent !important;
}

#moreMusicGrid::-webkit-scrollbar {
  height: 6px !important;
}

#moreMusicGrid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
}

#moreMusicGrid::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #f59e0b, #ea580c) !important;
  border-radius: 10px !important;
}

/* Each music card - fixed width */
#moreMusicGrid .track-card {
  flex: 0 0 180px !important;
  scroll-snap-align: start !important;
  min-width: 160px !important;
  max-width: 200px !important;
  background: rgba(31, 31, 40, 0.8);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #2a2a30;
  transition: transform 0.2s ease;
}

#moreMusicGrid .track-card:hover {
  transform: translateY(-4px);
  border-color: #f59e0b;
}

#moreMusicGrid .track-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

#moreMusicGrid .track-card .p-3 {
  padding: 10px !important;
}

#moreMusicGrid .track-card h3 {
  font-size: 13px !important;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#moreMusicGrid .track-card p {
  font-size: 11px !important;
  color: #fbbf24;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile sizes */
@media (max-width: 480px) {
  #moreMusicGrid .track-card {
    flex: 0 0 140px !important;
    min-width: 130px !important;
    max-width: 160px !important;
  }
  
  #moreMusicGrid .track-card img {
    height: 140px !important;
  }
  
  #moreMusicGrid .track-card h3 {
    font-size: 11px !important;
  }
  
  #moreMusicGrid .track-card p {
    font-size: 10px !important;
  }
}

/* Scroll arrows for More Music */
.more-music-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.more-music-scroll-btn:hover {
  background: rgba(245, 158, 11, 0.3);
  border-color: #f59e0b;
  transform: scale(1.1);
}

.more-music-scroll-btn.left {
  left: -6px;
}

.more-music-scroll-btn.right {
  right: -6px;
}

@media (min-width: 640px) {
  .more-music-scroll-btn {
    display: flex;
  }
}

#moreMusicYouMayLikeSection {
  position: relative;
  padding: 0 10px;
}

/* Scroll indicator for More Music */
.more-music-scroll-indicator {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.8));
  padding: 20px 30px 20px 50px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.more-music-scroll-indicator.visible {
  opacity: 1;
}

.more-music-scroll-indicator i {
  color: #f59e0b;
  font-size: 24px;
  animation: pulse-scroll 1.5s ease-in-out infinite;
}

@keyframes pulse-scroll {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(8px); opacity: 1; }
}

/* ============================================
   TRENDING NOW - HORIZONTAL SCROLL
   ============================================ */

#trendingSection {
  position: relative;
  padding: 0 10px;
}

#trendingGrid {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 16px !important;
  padding: 8px 4px 16px 4px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: #f59e0b transparent !important;
}

#trendingGrid::-webkit-scrollbar {
  height: 6px !important;
}

#trendingGrid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
}

#trendingGrid::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #f59e0b, #ea580c) !important;
  border-radius: 10px !important;
}

/* Each trending card - fixed width */
#trendingGrid .track-card {
  flex: 0 0 200px !important;
  scroll-snap-align: start !important;
  min-width: 180px !important;
  max-width: 220px !important;
  background: rgba(31, 31, 40, 0.8);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #2a2a30;
  transition: transform 0.2s ease;
}

#trendingGrid .track-card:hover {
  transform: translateY(-4px);
  border-color: #f59e0b;
}

#trendingGrid .track-card .aspect-square {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

#trendingGrid .track-card .aspect-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#trendingGrid .track-card .p-4 {
  padding: 10px !important;
}

#trendingGrid .track-card h3 {
  font-size: 13px !important;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#trendingGrid .track-card p {
  font-size: 11px !important;
  color: #fbbf24;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile sizes */
@media (max-width: 480px) {
  #trendingGrid .track-card {
    flex: 0 0 150px !important;
    min-width: 140px !important;
    max-width: 170px !important;
  }
  
  #trendingGrid .track-card h3 {
    font-size: 11px !important;
  }
  
  #trendingGrid .track-card p {
    font-size: 10px !important;
  }
}

/* Scroll arrows for Trending */
.trending-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.trending-scroll-btn:hover {
  background: rgba(245, 158, 11, 0.3);
  border-color: #f59e0b;
  transform: scale(1.1);
}

.trending-scroll-btn.left {
  left: -6px;
}

.trending-scroll-btn.right {
  right: -6px;
}

@media (min-width: 640px) {
  .trending-scroll-btn {
    display: flex;
  }
}

/* Scroll indicator for Trending */
.trending-scroll-indicator {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.8));
  padding: 20px 30px 20px 50px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.trending-scroll-indicator.visible {
  opacity: 1;
}

.trending-scroll-indicator i {
  color: #f59e0b;
  font-size: 24px;
  animation: pulse-scroll 1.5s ease-in-out infinite;
}

@keyframes pulse-scroll {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(8px); opacity: 1; }
}

/* ============================================
   NEW RELEASES - HORIZONTAL SCROLL
   ============================================ */

#newSongsSection {
  position: relative;
  padding: 0 10px;
}

#newSongsGrid {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 16px !important;
  padding: 8px 4px 16px 4px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: #34d399 transparent !important;
}

#newSongsGrid::-webkit-scrollbar {
  height: 6px !important;
}

#newSongsGrid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
}

#newSongsGrid::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #34d399, #059669) !important;
  border-radius: 10px !important;
}

/* Each new release card - fixed width */
#newSongsGrid .track-card {
  flex: 0 0 200px !important;
  scroll-snap-align: start !important;
  min-width: 180px !important;
  max-width: 220px !important;
  background: rgba(31, 31, 40, 0.8);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #2a2a30;
  transition: transform 0.2s ease;
}

#newSongsGrid .track-card:hover {
  transform: translateY(-4px);
  border-color: #34d399;
}

#newSongsGrid .track-card .aspect-square {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

#newSongsGrid .track-card .aspect-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#newSongsGrid .track-card .p-4 {
  padding: 10px !important;
}

#newSongsGrid .track-card h3 {
  font-size: 13px !important;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#newSongsGrid .track-card p {
  font-size: 11px !important;
  color: #34d399;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* NEW badge on cards */
#newSongsGrid .track-card .new-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #34d399, #059669);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Mobile sizes */
@media (max-width: 480px) {
  #newSongsGrid .track-card {
    flex: 0 0 150px !important;
    min-width: 140px !important;
    max-width: 170px !important;
  }
  
  #newSongsGrid .track-card h3 {
    font-size: 11px !important;
  }
  
  #newSongsGrid .track-card p {
    font-size: 10px !important;
  }
}

/* Scroll arrows for New Releases */
.newreleases-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.newreleases-scroll-btn:hover {
  background: rgba(52, 211, 153, 0.3);
  border-color: #34d399;
  transform: scale(1.1);
}

.newreleases-scroll-btn.left {
  left: -6px;
}

.newreleases-scroll-btn.right {
  right: -6px;
}

@media (min-width: 640px) {
  .newreleases-scroll-btn {
    display: flex;
  }
}

/* ============================================
   MOST PLAYED - HORIZONTAL SCROLL
   ============================================ */

#mostPlayedSection {
  position: relative;
  padding: 0 10px;
}

#mostPlayedGrid {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 16px !important;
  padding: 8px 4px 16px 4px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: #60a5fa transparent !important;
}

#mostPlayedGrid::-webkit-scrollbar {
  height: 6px !important;
}

#mostPlayedGrid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
}

#mostPlayedGrid::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #60a5fa, #3b82f6) !important;
  border-radius: 10px !important;
}

/* Each most played card - fixed width */
#mostPlayedGrid .track-card {
  flex: 0 0 200px !important;
  scroll-snap-align: start !important;
  min-width: 180px !important;
  max-width: 220px !important;
  background: rgba(31, 31, 40, 0.8);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #2a2a30;
  transition: transform 0.2s ease;
}

#mostPlayedGrid .track-card:hover {
  transform: translateY(-4px);
  border-color: #60a5fa;
}

#mostPlayedGrid .track-card .aspect-square {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

#mostPlayedGrid .track-card .aspect-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#mostPlayedGrid .track-card .p-4 {
  padding: 10px !important;
}

#mostPlayedGrid .track-card h3 {
  font-size: 13px !important;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#mostPlayedGrid .track-card p {
  font-size: 11px !important;
  color: #60a5fa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rank badge on cards */
#mostPlayedGrid .track-card .rank-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Mobile sizes */
@media (max-width: 480px) {
  #mostPlayedGrid .track-card {
    flex: 0 0 150px !important;
    min-width: 140px !important;
    max-width: 170px !important;
  }
  
  #mostPlayedGrid .track-card h3 {
    font-size: 11px !important;
  }
  
  #mostPlayedGrid .track-card p {
    font-size: 10px !important;
  }
}

/* Scroll arrows for Most Played */
.mostplayed-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.mostplayed-scroll-btn:hover {
  background: rgba(96, 165, 250, 0.3);
  border-color: #60a5fa;
  transform: scale(1.1);
}

.mostplayed-scroll-btn.left {
  left: -6px;
}

.mostplayed-scroll-btn.right {
  right: -6px;
}

@media (min-width: 640px) {
  .mostplayed-scroll-btn {
    display: flex;
  }
}

/* ============================================
   HIDE SCROLLBARS ON HORIZONTAL SCROLL SECTIONS
   ============================================ */

/* Hide scrollbar for all horizontal scrolling sections */
#artistsGrid,
#djMixesGrid,
#trendingGrid,
#newSongsGrid,
#mostPlayedGrid,
#moreMusicGrid {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
}

/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
#artistsGrid::-webkit-scrollbar,
#djMixesGrid::-webkit-scrollbar,
#trendingGrid::-webkit-scrollbar,
#newSongsGrid::-webkit-scrollbar,
#mostPlayedGrid::-webkit-scrollbar,
#moreMusicGrid::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Hide scrollbar track and thumb */
#artistsGrid::-webkit-scrollbar-track,
#djMixesGrid::-webkit-scrollbar-track,
#trendingGrid::-webkit-scrollbar-track,
#newSongsGrid::-webkit-scrollbar-track,
#mostPlayedGrid::-webkit-scrollbar-track,
#moreMusicGrid::-webkit-scrollbar-track {
  display: none !important;
  background: transparent !important;
}

#artistsGrid::-webkit-scrollbar-thumb,
#djMixesGrid::-webkit-scrollbar-thumb,
#trendingGrid::-webkit-scrollbar-thumb,
#newSongsGrid::-webkit-scrollbar-thumb,
#mostPlayedGrid::-webkit-scrollbar-thumb,
#moreMusicGrid::-webkit-scrollbar-thumb {
  display: none !important;
  background: transparent !important;
}

/* ===== LIGHTWEIGHT LOADING SPINNER ===== */
.btn-loading { pointer-events: none !important; opacity: 0.8 !important; }
.btn-loading i { display: none !important; }
.btn-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-left: 4px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== CONCERT FLYER BANNER ===== */
#concertBannerSection {
    position: relative;
}

#concertBannerSection img {
    transition: transform 0.5s ease;
    width: 100%;
    height: auto;
}

#concertBannerSection .group:hover img {
    transform: scale(1.02);
}

#concertBannerSection .absolute {
    transition: all 0.3s ease;
}

/* Mobile responsive */
@media (max-width: 640px) {
    #concertBannerSection .absolute.top-4 {
        top: 8px;
        left: 8px;
        padding: 6px 10px;
    }
    
    #concertBannerSection .absolute.top-4 .text-xs {
        font-size: 9px;
    }
    
    #concertBannerSection .absolute.bottom-4 {
        bottom: 8px;
        right: 8px;
        padding: 6px 10px;
    }
    
    #concertBannerSection .absolute.bottom-4 .text-xs {
        font-size: 9px;
    }
}

/* ============================================
   VIEW ALL NEWS - SIMPLE FIX
   ============================================ */

/* Modal overlay */
#allNewsModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 20, 0.97);
    z-index: 999999;
    overflow-y: auto;
    padding: 15px;
    display: none;
}

#allNewsModal.active {
    display: block;
}

#allNewsModal .modal-container {
    max-width: 700px;
    margin: 0 auto;
}

#allNewsModal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 15px;
    position: sticky;
    top: 0;
    background: rgba(10, 10, 20, 0.95);
    z-index: 5;
}

#allNewsModal .modal-header h2 {
    font-size: 18px;
    color: white;
    margin: 0;
}

#allNewsModal .modal-close {
    background: rgba(255,255,255,0.1);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
}

/* News cards */
#allNewsModal .news-item {
    background: rgba(31,31,40,0.6);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

#allNewsModal .news-item:active {
    background: rgba(31,31,40,0.9);
}

#allNewsModal .news-img {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 10px;
    object-fit: cover;
    background: #1a1a2e;
}

#allNewsModal .news-img-placeholder {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 10px;
    background: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #4a4a6a;
}

#allNewsModal .news-content {
    flex: 1;
    min-width: 0;
}

#allNewsModal .news-category {
    font-size: 10px;
    color: #a78bfa;
    font-weight: 600;
    text-transform: uppercase;
    background: rgba(167,139,250,0.1);
    padding: 2px 10px;
    border-radius: 20px;
    display: inline-block;
}

#allNewsModal .news-title {
    font-size: 15px;
    font-weight: 600;
    color: white;
    margin: 4px 0 3px 0;
    line-height: 1.3;
}

#allNewsModal .news-desc {
    font-size: 13px;
    color: #9ca3af;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#allNewsModal .news-date {
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
}

/* Mobile */
@media (max-width: 480px) {
    #allNewsModal { padding: 10px; }
    #allNewsModal .modal-header h2 { font-size: 16px; }
    #allNewsModal .news-img { width: 65px; height: 65px; min-width: 65px; }
    #allNewsModal .news-img-placeholder { width: 65px; height: 65px; min-width: 65px; font-size: 24px; }
    #allNewsModal .news-title { font-size: 14px; }
    #allNewsModal .news-desc { font-size: 12px; }
}

/* ============================================
   SHARE BUTTON STYLES
   ============================================ */

.card-share-btn,
.song-share-btn,
.more-music-share-btn {
    transition: all 0.3s ease !important;
}

.card-share-btn:hover,
.song-share-btn:hover,
.more-music-share-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4) !important;
}

#shareModal {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

#shareModal button:hover {
    transform: scale(1.02);
}

#shareModal .grid button:active {
    transform: scale(0.95);
}

/* ============================================
   ARTIST PROFILE - FULL SIZE LOGO BACKGROUND
   ============================================ */

#artistHeader {
    position: relative;
    overflow: hidden;
    padding: 30px !important;
    border-radius: 20px !important;
    background: rgba(10, 10, 20, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    min-height: 250px !important;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.3) !important;
}

/* 🔥 FULL SIZE LOGO AS BACKGROUND */
#artistHeader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    background: url('/logo.png') no-repeat center center;
    background-size: cover !important;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
    animation: logoPulse 10s ease-in-out infinite;
}

/* Dark overlay for better text readability */
#artistHeader::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 10, 20, 0.7) 0%, rgba(10, 10, 20, 0.3) 50%, rgba(10, 10, 20, 0.7) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Content above everything */
#artistHeader .flex-1,
#selectedArtistImage,
#selectedArtistName,
#artistStats,
#artistSocialLinks,
#contactArtistBtn,
#artistWhatsApp,
#artistTwitter,
#artistYouTube,
#artistTikTok {
    position: relative;
    z-index: 1;
}

/* Artist image - Purple Border */
#selectedArtistImage {
    border: 3px solid rgba(168, 85, 247, 0.3) !important;
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.15) !important;
}

#selectedArtistImage:hover {
    border-color: rgba(168, 85, 247, 0.6) !important;
    box-shadow: 0 0 60px rgba(168, 85, 247, 0.3) !important;
}

/* Artist name glow */
#selectedArtistName {
    text-shadow: 0 0 30px rgba(0,0,0,0.8) !important;
}

@keyframes logoPulse {
    0%, 100% { opacity: 0.10; transform: scale(1); }
    50% { opacity: 0.18; transform: scale(1.02); }
}

/* Mobile */
@media (max-width: 640px) {
    #artistHeader {
        padding: 20px !important;
        min-height: 200px !important;
        border-radius: 16px !important;
    }
    
    #artistHeader::before {
        opacity: 0.08;
        background-size: cover !important;
    }
    
    #selectedArtistImage {
        width: 70px !important;
        height: 70px !important;
    }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
    #artistHeader::before {
        opacity: 0.10;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    #artistHeader {
        min-height: 300px !important;
        padding: 40px !important;
    }
    
    #artistHeader::before {
        opacity: 0.12;
    }
}

/* ============================================
   NEWS - HORIZONTAL SCROLL (6 ITEMS)
   ============================================ */

#newsGrid,
#newsGridBottom {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 16px !important;
    padding: 8px 4px 16px 4px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #a78bfa transparent !important;
}

#newsGrid::-webkit-scrollbar,
#newsGridBottom::-webkit-scrollbar {
    height: 6px !important;
}

#newsGrid::-webkit-scrollbar-track,
#newsGridBottom::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
}

#newsGrid::-webkit-scrollbar-thumb,
#newsGridBottom::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #a78bfa, #7c3aed) !important;
    border-radius: 10px !important;
}

/* Each news card - fixed width for horizontal scroll */
#newsGrid .news-card,
#newsGridBottom .news-card {
    flex: 0 0 280px !important;
    scroll-snap-align: start !important;
    min-width: 240px !important;
    max-width: 320px !important;
    background: rgba(31, 31, 40, 0.8);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #2a2a30;
    transition: transform 0.2s ease;
}

#newsGrid .news-card:hover,
#newsGridBottom .news-card:hover {
    transform: translateY(-4px);
    border-color: #a78bfa;
}

#newsGrid .news-card .image-wrapper,
#newsGridBottom .news-card .image-wrapper {
    height: 160px !important;
    flex-shrink: 0;
}

#newsGrid .news-card .image-wrapper img,
#newsGridBottom .news-card .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#newsGrid .news-card .news-content,
#newsGridBottom .news-card .news-content {
    padding: 12px !important;
}

#newsGrid .news-card .news-content h3,
#newsGridBottom .news-card .news-content h3 {
    font-size: 14px !important;
    -webkit-line-clamp: 2;
}

#newsGrid .news-card .news-content p,
#newsGridBottom .news-card .news-content p {
    font-size: 12px !important;
    -webkit-line-clamp: 2;
}

/* Mobile */
@media (max-width: 480px) {
    #newsGrid .news-card,
    #newsGridBottom .news-card {
        flex: 0 0 200px !important;
        min-width: 180px !important;
        max-width: 240px !important;
    }
    
    #newsGrid .news-card .image-wrapper,
    #newsGridBottom .news-card .image-wrapper {
        height: 120px !important;
    }
}

/* Hide scrollbar (optional - keeps it clean) */
#newsGrid,
#newsGridBottom {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#newsGrid::-webkit-scrollbar,
#newsGridBottom::-webkit-scrollbar {
    display: none !important;
}

/* ============================================
   CONCERT FLYER - OPTIMIZED
   ============================================ */

#flyerSlides {
    position: relative;
    min-height: 200px;
    overflow: hidden;
}

.flyer-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}

.flyer-slide.active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

.flyer-slide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* ============================================
   PLAYLIST - HORIZONTAL SCROLL
   ============================================ */

#playlistSection {
    position: relative;
    padding: 0 10px;
}

#playlistGrid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 16px !important;
    padding: 8px 4px 16px 4px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #ec4899 transparent !important;
}

#playlistGrid::-webkit-scrollbar {
    height: 6px !important;
}

#playlistGrid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
}

#playlistGrid::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #ec4899, #a855f7) !important;
    border-radius: 10px !important;
}

/* Hide scrollbar (optional - keeps it clean) */
#playlistGrid {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#playlistGrid::-webkit-scrollbar {
    display: none !important;
}

/* Each playlist card - fixed width */
#playlistGrid .playlist-card {
    flex: 0 0 200px !important;
    scroll-snap-align: start !important;
    min-width: 180px !important;
    max-width: 220px !important;
}

/* Mobile sizes */
@media (max-width: 480px) {
    #playlistGrid .playlist-card {
        flex: 0 0 150px !important;
        min-width: 140px !important;
        max-width: 170px !important;
    }
}

/* Scroll arrows for Playlists */
.playlist-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(236, 72, 153, 0.3);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.playlist-scroll-btn:hover {
    background: rgba(236, 72, 153, 0.3);
    border-color: #ec4899;
    transform: scale(1.1);
}

.playlist-scroll-btn.left {
    left: -6px;
}

.playlist-scroll-btn.right {
    right: -6px;
}

@media (min-width: 640px) {
    .playlist-scroll-btn {
        display: flex;
    }
}

/* Scroll indicator for Playlists */
.playlist-scroll-indicator {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.8));
    padding: 20px 30px 20px 50px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.playlist-scroll-indicator.visible {
    opacity: 1;
}

.playlist-scroll-indicator i {
    color: #ec4899;
    font-size: 24px;
    animation: pulse-scroll 1.5s ease-in-out infinite;
}

@keyframes pulse-scroll {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(8px); opacity: 1; }
}

/* ============================================
   DJ MIXES - HORIZONTAL SCROLL WITH ARROWS
   ============================================ */

#djMixesSection {
    position: relative;
    padding: 0 10px;
}

#djMixesGrid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 16px !important;
    padding: 8px 4px 16px 4px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #a855f7 transparent !important;
}

#djMixesGrid::-webkit-scrollbar {
    height: 6px !important;
}

#djMixesGrid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
}

#djMixesGrid::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #a855f7, #7c3aed) !important;
    border-radius: 10px !important;
}

/* Hide scrollbar (optional) */
#djMixesGrid {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#djMixesGrid::-webkit-scrollbar {
    display: none !important;
}

/* DJ Mixes cards - fixed width */
#djMixesGrid .track-card {
    flex: 0 0 200px !important;
    scroll-snap-align: start !important;
    min-width: 180px !important;
    max-width: 220px !important;
}

/* Mobile sizes */
@media (max-width: 480px) {
    #djMixesGrid .track-card {
        flex: 0 0 150px !important;
        min-width: 140px !important;
        max-width: 170px !important;
    }
}

/* DJ Mixes Scroll Arrows */
.dj-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.dj-scroll-btn:hover {
    background: rgba(168, 85, 247, 0.3);
    border-color: #a855f7;
    transform: scale(1.1);
}

.dj-scroll-btn.left {
    left: -6px;
}

.dj-scroll-btn.right {
    right: -6px;
}

@media (min-width: 640px) {
    .dj-scroll-btn {
        display: flex;
    }
}

/* Scroll indicator for DJ Mixes */
.dj-scroll-indicator {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.8));
    padding: 20px 30px 20px 50px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.dj-scroll-indicator.visible {
    opacity: 1;
}

.dj-scroll-indicator i {
    color: #a855f7;
    font-size: 24px;
    animation: pulse-scroll 1.5s ease-in-out infinite;
}

/* ============================================
   TRENDING NOW - HORIZONTAL SCROLL WITH ARROWS
   ============================================ */

#trendingSection {
    position: relative;
    padding: 0 10px;
}

#trendingGrid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 16px !important;
    padding: 8px 4px 16px 4px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #ef4444 transparent !important;
}

#trendingGrid::-webkit-scrollbar {
    height: 6px !important;
}

#trendingGrid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
}

#trendingGrid::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #ef4444, #dc2626) !important;
    border-radius: 10px !important;
}

/* Hide scrollbar (optional) */
#trendingGrid {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#trendingGrid::-webkit-scrollbar {
    display: none !important;
}

/* Trending cards - fixed width */
#trendingGrid .track-card {
    flex: 0 0 200px !important;
    scroll-snap-align: start !important;
    min-width: 180px !important;
    max-width: 220px !important;
}

/* Mobile sizes */
@media (max-width: 480px) {
    #trendingGrid .track-card {
        flex: 0 0 150px !important;
        min-width: 140px !important;
        max-width: 170px !important;
    }
}

/* Trending Scroll Arrows */
.trending-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.trending-scroll-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: #ef4444;
    transform: scale(1.1);
}

.trending-scroll-btn.left {
    left: -6px;
}

.trending-scroll-btn.right {
    right: -6px;
}

@media (min-width: 640px) {
    .trending-scroll-btn {
        display: flex;
    }
}

/* Scroll indicator for Trending */
.trending-scroll-indicator {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.8));
    padding: 20px 30px 20px 50px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.trending-scroll-indicator.visible {
    opacity: 1;
}

.trending-scroll-indicator i {
    color: #ef4444;
    font-size: 24px;
    animation: pulse-scroll 1.5s ease-in-out infinite;
}

/* ============================================
   MOST PLAYED - HORIZONTAL SCROLL WITH ARROWS
   ============================================ */

#mostPlayedSection {
    position: relative;
    padding: 0 10px;
}

#mostPlayedGrid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 16px !important;
    padding: 8px 4px 16px 4px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #60a5fa transparent !important;
}

#mostPlayedGrid::-webkit-scrollbar {
    height: 6px !important;
}

#mostPlayedGrid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
}

#mostPlayedGrid::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #60a5fa, #3b82f6) !important;
    border-radius: 10px !important;
}

/* Hide scrollbar */
#mostPlayedGrid {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#mostPlayedGrid::-webkit-scrollbar {
    display: none !important;
}

/* Most Played cards - fixed width */
#mostPlayedGrid .track-card {
    flex: 0 0 200px !important;
    scroll-snap-align: start !important;
    min-width: 180px !important;
    max-width: 220px !important;
}

@media (max-width: 480px) {
    #mostPlayedGrid .track-card {
        flex: 0 0 150px !important;
        min-width: 140px !important;
        max-width: 170px !important;
    }
}

/* Most Played Scroll Arrows */
.mostplayed-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.mostplayed-scroll-btn:hover {
    background: rgba(96, 165, 250, 0.3);
    border-color: #60a5fa;
    transform: scale(1.1);
}

.mostplayed-scroll-btn.left {
    left: -6px;
}

.mostplayed-scroll-btn.right {
    right: -6px;
}

@media (min-width: 640px) {
    .mostplayed-scroll-btn {
        display: flex;
    }
}

.mostplayed-scroll-indicator {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.8));
    padding: 20px 30px 20px 50px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.mostplayed-scroll-indicator.visible {
    opacity: 1;
}

.mostplayed-scroll-indicator i {
    color: #60a5fa;
    font-size: 24px;
    animation: pulse-scroll 1.5s ease-in-out infinite;
}

/* ============================================
   NEW RELEASES - HORIZONTAL SCROLL WITH ARROWS
   ============================================ */

#newSongsSection {
    position: relative;
    padding: 0 10px;
}

#newSongsGrid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 16px !important;
    padding: 8px 4px 16px 4px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #34d399 transparent !important;
}

#newSongsGrid::-webkit-scrollbar {
    height: 6px !important;
}

#newSongsGrid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
}

#newSongsGrid::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #34d399, #059669) !important;
    border-radius: 10px !important;
}

/* Hide scrollbar */
#newSongsGrid {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#newSongsGrid::-webkit-scrollbar {
    display: none !important;
}

/* New Releases cards - fixed width */
#newSongsGrid .track-card {
    flex: 0 0 200px !important;
    scroll-snap-align: start !important;
    min-width: 180px !important;
    max-width: 220px !important;
}

@media (max-width: 480px) {
    #newSongsGrid .track-card {
        flex: 0 0 150px !important;
        min-width: 140px !important;
        max-width: 170px !important;
    }
}

/* New Releases Scroll Arrows */
.newreleases-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(52, 211, 153, 0.3);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.newreleases-scroll-btn:hover {
    background: rgba(52, 211, 153, 0.3);
    border-color: #34d399;
    transform: scale(1.1);
}

.newreleases-scroll-btn.left {
    left: -6px;
}

.newreleases-scroll-btn.right {
    right: -6px;
}

@media (min-width: 640px) {
    .newreleases-scroll-btn {
        display: flex;
    }
}

.newreleases-scroll-indicator {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.8));
    padding: 20px 30px 20px 50px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.newreleases-scroll-indicator.visible {
    opacity: 1;
}

.newreleases-scroll-indicator i {
    color: #34d399;
    font-size: 24px;
    animation: pulse-scroll 1.5s ease-in-out infinite;
}

/* ============================================
   PLAYLIST SONGS - MODERN LAYOUT
   ============================================ */

/* Main container */
.playlist-song-item-modern {
    background: rgba(15, 15, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.playlist-song-item-modern:hover {
    background: rgba(20, 20, 45, 0.8);
    border-color: rgba(168, 85, 247, 0.25);
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(168, 85, 247, 0.08);
}

/* Glow effect on hover */
.playlist-song-item-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), rgba(236, 72, 153, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.playlist-song-item-modern:hover::before {
    opacity: 1;
}

/* Row layout */
.song-row {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

/* Left section: Rank + Cover */
.song-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Rank number - Circle style */
.song-left .rank-number {
    width: 32px;
    height: 32px;
    background: rgba(168, 85, 247, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #a78bfa;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.playlist-song-item-modern:hover .rank-number {
    background: rgba(168, 85, 247, 0.25);
    transform: scale(1.1);
}

/* Top 3 ranks - Special colors */
.song-left .rank-number.top1 {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: white;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.3);
}

.song-left .rank-number.top2 {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    color: white;
    box-shadow: 0 2px 12px rgba(148, 163, 184, 0.3);
}

.song-left .rank-number.top3 {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: white;
    box-shadow: 0 2px 12px rgba(217, 119, 6, 0.3);
}

/* Cover image - Modern */
.song-cover-modern {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
}

.playlist-song-item-modern:hover .song-cover-modern {
    border-color: rgba(168, 85, 247, 0.3);
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.15);
}

/* Middle: Song Info */
.song-info-modern {
    flex: 1;
    min-width: 0;
    padding: 0 4px;
}

.song-title-modern {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.song-artist-modern {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.song-artist-modern i {
    color: #a78bfa;
    font-size: 10px;
    margin-right: 4px;
}

/* Right section: Stats + Actions */
.song-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* Stats Row */
.song-stats-modern {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-badge-modern {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.stat-badge-modern i {
    font-size: 10px;
}

/* Play stat */
.stat-badge-modern.stat-plays {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.1);
}

.playlist-song-item-modern:hover .stat-plays {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.3);
}

/* Download stat */
.stat-badge-modern.stat-downloads {
    color: #34d399;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.playlist-song-item-modern:hover .stat-downloads {
    background: rgba(52, 211, 153, 0.2);
    border-color: rgba(52, 211, 153, 0.3);
}

/* Actions Row */
.song-actions-modern {
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-btn-modern {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #6b7280;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 13px;
}

.action-btn-modern:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.08);
}

.action-btn-modern.download-btn:hover {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
}

.action-btn-modern.share-btn:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.3);
    color: #a78bfa;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 600px) {
    .playlist-song-item-modern {
        padding: 10px 12px;
        border-radius: 12px;
    }
    
    .song-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .song-left {
        gap: 10px;
    }
    
    .song-left .rank-number {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
    
    .song-cover-modern {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }
    
    .song-info-modern {
        flex: 1 1 100%;
        padding: 4px 0 0 0;
        order: 3;
    }
    
    .song-title-modern {
        font-size: 13px;
    }
    
    .song-artist-modern {
        font-size: 11px;
    }
    
    .song-right {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 6px;
        order: 4;
        padding-top: 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.04);
    }
    
    .song-stats-modern {
        gap: 4px;
    }
    
    .stat-badge-modern {
        font-size: 10px;
        padding: 2px 8px;
    }
    
    .action-btn-modern {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1024px) {
    .song-right {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    
    .song-stats-modern {
        gap: 6px;
    }
}

/* ============================================
   PLAYLIST PLAY BUTTON - PLAYING/PAUSE STATES
   ============================================ */

.action-btn-modern.play-btn-action {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    transition: all 0.3s ease;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
}

.action-btn-modern.play-btn-action:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 25px rgba(245, 158, 11, 0.5);
}

/* 👇 PLAYING STATE - RED PAUSE */
.action-btn-modern.play-btn-action.playing {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    animation: pulse-play 1.5s ease-in-out infinite;
}

.action-btn-modern.play-btn-action.playing:hover {
    box-shadow: 0 4px 25px rgba(239, 68, 68, 0.6);
}

/* Pulse animation for playing state */
@keyframes pulse-play {
    0%, 100% { 
        box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    }
    50% { 
        box-shadow: 0 4px 30px rgba(239, 68, 68, 0.7);
    }
}

/* Active playing song highlight */
.playlist-song-item-modern.active-playing {
    border-color: rgba(245, 158, 11, 0.3) !important;
    background: rgba(245, 158, 11, 0.05) !important;
}

/* ============================================
   PLAY BUTTON - PLAYING/PAUSE STATES
   ============================================ */

/* ▶ DEFAULT STATE - ORANGE */
.action-btn-modern.play-btn-action {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    transition: all 0.3s ease;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
}

.action-btn-modern.play-btn-action:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 25px rgba(245, 158, 11, 0.5);
}

/* ⏸ PLAYING STATE - RED PAUSE WITH PULSE */
.action-btn-modern.play-btn-action.playing {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    animation: pulse-play 1.5s ease-in-out infinite;
}

.action-btn-modern.play-btn-action.playing:hover {
    box-shadow: 0 4px 25px rgba(239, 68, 68, 0.6);
}

/* Pulse animation for playing state */
@keyframes pulse-play {
    0%, 100% { 
        box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    }
    50% { 
        box-shadow: 0 4px 30px rgba(239, 68, 68, 0.7);
    }
}

/* Active playing song highlight */
.playlist-song-item-modern.active-playing {
    border-color: rgba(245, 158, 11, 0.3) !important;
    background: rgba(245, 158, 11, 0.05) !important;
}

/* Download button */
.action-btn-modern.download-btn:hover {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
}

/* Share button */
.action-btn-modern.share-btn:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.3);
    color: #a78bfa;
}

/* ============================================
   PLAYLIST SONG - FULL ROW CLICKABLE
   ============================================ */

.playlist-song-item-modern {
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.playlist-song-item-modern:hover {
    background: rgba(245, 158, 11, 0.05) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
    transform: translateX(4px) !important;
}

/* Buttons inside - don't trigger parent click */
.playlist-song-item-modern .action-btn-modern,
.playlist-song-item-modern button {
    position: relative;
    z-index: 10;
}

/* Song title - still clickable for play */
.playlist-song-item-modern .song-title-modern {
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.playlist-song-item-modern .song-title-modern:hover {
    color: #f59e0b !important;
}

/* Artist name */
.playlist-song-item-modern .song-artist-modern {
    color: #fbbf24 !important;
    transition: color 0.2s ease !important;
}

.playlist-song-item-modern:hover .song-artist-modern {
    color: #f59e0b !important;
    text-decoration: underline !important;
}

/* Stats and badges - don't trigger parent click */
.playlist-song-item-modern .song-stats-modern,
.playlist-song-item-modern .stat-badge-modern {
    pointer-events: none !important;
}

/* Artist tracks - force buttons to right on mobile */
.playlist-song-item-modern .song-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex-wrap: nowrap;
}

.playlist-song-item-modern .song-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.playlist-song-item-modern .song-info-modern {
    flex: 1;
    min-width: 0;
}

.playlist-song-item-modern .song-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.playlist-song-item-modern .song-actions-modern {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Mobile */
@media (max-width: 600px) {
    .playlist-song-item-modern .song-row {
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .playlist-song-item-modern .song-left {
        flex-shrink: 0;
    }
    
    .playlist-song-item-modern .song-info-modern {
        flex: 1;
        min-width: 80px;
    }
    
    .playlist-song-item-modern .song-right {
        margin-left: auto;
        flex-shrink: 0;
        margin-top: 0;
        border-top: none;
        padding-top: 0;
        width: auto;
        justify-content: flex-end;
    }
    
    .playlist-song-item-modern .song-actions-modern {
        display: flex;
        gap: 6px;
        align-items: center;
        justify-content: flex-end;
    }
}

/* Profile picture styling */
#selectedArtistImage {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(168, 85, 247, 0.4);
    margin: 0 auto 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
}

#selectedArtistImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

#selectedArtistName {
    font-size: 42px;
    font-weight: 800;
    color: white;
    text-align: center;
    margin-bottom: 8px;
}

#artistStats {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    color: #d1d5db;
    font-size: 14px;
}

#artistSocialLinks {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* ============================================
   HOMEPAGE BLACK BACKGROUND
   ============================================ */

/* Make main content background black */
#mainContent {
    background: #000000 !important;
}

/* Make hero section background black */
#heroSection {
    background: #000000 !important;
}

/* Make all sections on homepage black */
#trendingSection,
#newSongsSection,
#mostPlayedSection,
#djMixesSection,
#playlistSection,
#artistsSection,
#newsSection,
#artistBannerSection {
    background: #000000 !important;
}

/* Make the main container black */
.max-w-7xl {
    background: #000000 !important;
}

/* Make cards slightly lighter for contrast */
.track-card {
    background: rgba(20, 20, 30, 0.9) !important;
}

.playlist-card {
    background: rgba(20, 20, 30, 0.9) !important;
}

.news-card {
    background: rgba(20, 20, 30, 0.9) !important;
}

/* Keep footer transparent */
.footer-links-container {
    background: transparent !important;
}

/* ============================================
   ARTISTS YOU MAY LIKE - BLACK CIRCLE
   ============================================ */

/* Change the circle border to black */
.similar-artist-card img {
    border-color: #000000 !important;
    border: 3px solid #000000 !important;
}

/* Remove the golden/amber border */
.similar-artist-card {
    text-align: center;
    cursor: pointer;
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
}

.similar-artist-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50% !important;
    object-fit: cover;
    border: 3px solid #000000 !important; /* BLACK border */
    transition: all 0.3s ease;
    display: block;
}

/* Hover effect - subtle glow */
.similar-artist-card img:hover {
    transform: scale(1.05);
    border-color: #333333 !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

/* Artist name styling */
.similar-artist-card .artist-name span {
    font-size: 11px;
    font-weight: 600;
    color: #e5e7eb;
    background: rgba(0, 0, 0, 0.6);
    padding: 3px 8px;
    border-radius: 20px;
    display: inline-block;
    margin-top: 6px;
}

/* ============================================
   ARTIST PROFILE - BLACK CIRCLE
   ============================================ */

/* Change the profile picture circle border to black */
#selectedArtistImage {
    border: 4px solid #000000 !important;
    border-color: #000000 !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3) !important;
}

/* Hover effect - subtle dark glow */
#selectedArtistImage:hover {
    border-color: #333333 !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================
   ARTIST PROFILE - MEDIUM SIZE IMAGE
   ============================================ */

/* Increase profile picture size */
#selectedArtistImage {
    width: 180px !important;
    height: 180px !important;
    border: 4px solid #000000 !important;
    border-color: #000000 !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3) !important;
    margin: 0 auto 16px auto !important;
}

/* Hover effect */
#selectedArtistImage:hover {
    border-color: #333333 !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.5) !important;
}

/* Mobile - slightly smaller */
@media (max-width: 640px) {
    #selectedArtistImage {
        width: 130px !important;
        height: 130px !important;
    }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
    #selectedArtistImage {
        width: 160px !important;
        height: 160px !important;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    #selectedArtistImage {
        width: 200px !important;
        height: 200px !important;
    }
}

/* ============================================
   FEATURED ARTISTS - BLACK CIRCLE
   ============================================ */

/* Change the circle border to black */
#artistsGrid .featured-artist-card .artist-circle {
    border: 3px solid #000000 !important;
    border-color: #000000 !important;
}

/* Hover effect - subtle dark glow */
#artistsGrid .featured-artist-card .artist-circle:hover {
    border-color: #333333 !important;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.4) !important;
}

/* Also change the featured artist cards in other sections */
.featured-artist-card img {
    border: 3px solid #000000 !important;
    border-color: #000000 !important;
}

.featured-artist-card img:hover {
    border-color: #333333 !important;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.4) !important;
}

/* ============================================
   PAGINATION BUTTONS - BLACK
   ============================================ */

/* Change pagination buttons from orange to black */
.pagination-btn {
    background: #000000 !important;
    color: white !important;
    border: 1px solid #333333 !important;
}

.pagination-btn:hover {
    background: #1a1a1a !important;
    border-color: #555555 !important;
}

.pagination-btn:disabled {
    background: #2a2a2a !important;
    color: #666666 !important;
    border-color: #2a2a2a !important;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Page info text color */
.page-info {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

/* Remove the red fire icon from Trending Now title */
#trendingSection h2 i {
    display: none !important;
}

/* If you want to keep the text "Trending Now" but remove the icon */
#trendingSection .flex h2 .fa-fire {
    display: none !important;
}

/* Remove any red badges */
.trending-badge {
    display: none !important;
}

/* Most Played - Remove ALL badges */
#mostPlayedSection i.fa-chart-line {
    display: none !important;
}

#mostPlayedGrid .rank-badge,
#mostPlayedGrid .most-played-rank,
#mostPlayedGrid .play-count,
#mostPlayedGrid .absolute {
    display: none !important;
}

/* Featured Artists - Remove ALL badges */
#artistsSection i.fa-users {
    display: none !important;
}

#artistsGrid .featured-badge,
#artistsGrid .artist-badge,
#artistsGrid .absolute,
#artistsGrid .play-count {
    display: none !important;
}

/* New Releases - Remove ALL badges */
#newSongsSection i.fa-calendar-alt {
    display: none !important;
}

#newSongsGrid .new-badge,
#newSongsGrid .absolute,
#newSongsGrid .play-count,
#newSongsGrid .rank-badge {
    display: none !important;
}

/* Playlists - Remove ALL badges */
#playlistSection i.fa-list-ul {
    display: none !important;
}

#playlistGrid .playlist-badge,
#playlistGrid .badge,
#playlistGrid .absolute,
#playlistGrid .song-count-badge {
    display: none !important;
}

/* Entertainment News - Remove ALL badges */
#newsSection i.fa-newspaper {
    display: none !important;
}

#newsGrid .category-badge,
#newsGrid .absolute {
    display: none !important;
}

/* Artists You May Like - Remove ALL badges */
#similarArtistsSection i.fa-users {
    display: none !important;
}

#similarArtistsGrid .artist-badge,
#similarArtistsGrid .badge,
#similarArtistsGrid .absolute,
#similarArtistsGrid .play-count {
    display: none !important;
}

/* More Music You May Like - Remove ALL badges */
#moreMusicYouMayLikeSection i.fa-music {
    display: none !important;
}

#moreMusicGrid .music-badge,
#moreMusicGrid .badge,
#moreMusicGrid .absolute,
#moreMusicGrid .play-count,
#moreMusicGrid .rank-badge {
    display: none !important;
}

/* Artist Profile News - Remove ALL badges */
#newsSectionBottom i.fa-newspaper {
    display: none !important;
}

#newsGridBottom .category-badge,
#newsGridBottom .absolute {
    display: none !important;
}

/* Playlist song numbers - No colors */
.playlist-song-item-modern .rank-number,
.playlist-song-item-modern .rank-number.top1,
.playlist-song-item-modern .rank-number.top2,
.playlist-song-item-modern .rank-number.top3 {
    background: transparent !important;
    color: #9ca3af !important;
    box-shadow: none !important;
}

.playlist-song-item-modern:hover .rank-number {
    background: rgba(255, 255, 255, 0.05) !important;
    transform: none !important;
}

/* Remove microphone icon from playlist songs */
.playlist-song-item-modern .song-artist-modern i.fa-microphone-alt {
    display: none !important;
}

/* DJ Mixes - Remove ALL badges */
#djMixesSection i.fa-headphones {
    display: none !important;
}

#djMixesGrid .absolute,
#djMixesGrid .play-count,
#djMixesGrid .rank-badge,
#djMixesGrid .bg-purple-600 {
    display: none !important;
}

/* Loading Spinner - Show while data loads */
#loadingSpinner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    flex-direction: column;
    gap: 20px;
}

#loadingSpinner .spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #1a1a2e;
    border-top: 4px solid #f59e0b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#loadingSpinner p {
    color: #9ca3af;
    font-size: 14px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hide on mobile (below 768px) */
@media (max-width: 768px) {
    .dj-scroll-btn,
    .dj-scroll-indicator {
        display: none !important;
    }
}

/* Show on PC and tablets (above 768px) */
@media (min-width: 769px) {
    .dj-scroll-btn {
        display: flex !important;
    }
    .dj-scroll-indicator {
        display: block !important;
    }
}

/* ============================================
   NEWS SCROLL ARROWS - MOBILE HIDE, PC SHOW
   ============================================ */

/* Hide scroll arrows by default (mobile) */
.news-scroll-btn,
.news-scroll-indicator,
.news-bottom-scroll-btn,
.news-bottom-scroll-indicator {
    display: none !important;
}

/* Show on PC only (screens wider than 1024px) */
@media (min-width: 1025px) {
    .news-scroll-btn,
    .news-bottom-scroll-btn {
        display: flex !important;
    }
    .news-scroll-indicator,
    .news-bottom-scroll-indicator {
        display: block !important;
    }
}

/* Remove icons from bottom nav, show only text */
.fixed.bottom-0 .flex button i {
    display: none !important;
}

.fixed.bottom-0 .flex button span {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
}

.fixed.bottom-0 .flex button:hover span {
    color: #f59e0b !important;
}

.fixed.bottom-0 .flex button.active span {
    color: #f59e0b !important;
}

/* ============================================
   FOOTER BACKGROUND - BLACK
   ============================================ */

/* Change footer background to black */
.footer-links-container {
    background: #000000 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 0 !important;
    padding: 16px !important;
}

/* Change footer text to white */
.footer-links-container button,
.footer-links-container .text-gray-400,
.footer-links-container a {
    color: #ffffff !important;
}

.footer-links-container button:hover,
.footer-links-container a:hover {
    color: #f59e0b !important;
}

.footer-links-container .text-gray-700 {
    color: rgba(255, 255, 255, 0.2) !important;
}

.footer-links-container .text-gray-600,
.footer-links-container .text-center {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================
   MATCH DARK THEME - FOOTER & BOTTOM NAV
   ============================================ */

/* Footer - match the website dark theme */
.footer-links-container {
    background: #0a0a0a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 0 !important;
    padding: 16px !important;
}

/* Footer text - white */
.footer-links-container button,
.footer-links-container .text-gray-400,
.footer-links-container a {
    color: #e5e7eb !important;
}

.footer-links-container button:hover,
.footer-links-container a:hover {
    color: #f59e0b !important;
}

.footer-links-container .text-gray-700 {
    color: rgba(255, 255, 255, 0.15) !important;
}

.footer-links-container .text-gray-600,
.footer-links-container .text-center {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Bottom Navigation - match dark theme */
.fixed.bottom-0 {
    background: #0a0a0a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.fixed.bottom-0 .flex button span,
.fixed.bottom-0 .flex button i {
    color: #e5e7eb !important;
}

.fixed.bottom-0 .flex button:hover span,
.fixed.bottom-0 .flex button:hover i {
    color: #f59e0b !important;
}

.fixed.bottom-0 .flex button.active span,
.fixed.bottom-0 .flex button.active i {
    color: #f59e0b !important;
}

/* Navbar - match dark theme */
nav {
    background: rgba(10, 10, 10, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Audio Player - match dark theme */
#globalAudioPlayer {
    background: rgba(10, 10, 10, 0.95) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ============================================
   BOTTOM PLAYER - FULLY MOBILE RESPONSIVE
   ============================================ */

.bottom-player {
    position: fixed;
    bottom: 70px;
    left: 10px;
    right: 10px;
    background: rgba(15, 15, 30, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 12px 18px;
    z-index: 9999;
    display: none;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    max-width: 600px;
    margin: 0 auto;
    width: calc(100% - 20px);
    transition: all 0.3s ease;
}

.bottom-player.active {
    display: flex !important;
}

/* Track name - flexible */
.bottom-player .track-name {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 80px;
    max-width: 140px;
    flex-shrink: 1;
}

.bottom-player .track-name i {
    color: #f59e0b;
    margin-right: 6px;
}

/* Controls - flexible */
.bottom-player .controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.bottom-player .controls i {
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.bottom-player .controls i:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.bottom-player .controls i.fa-play {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 14px;
}

.bottom-player .controls i.fa-play:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
}

.bottom-player .controls i.fa-pause {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 14px;
    animation: pulse-play 1.5s ease-in-out infinite;
}

@keyframes pulse-play {
    0%, 100% { box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 4px 30px rgba(239, 68, 68, 0.7); }
}

/* Progress bar - flexible */
.bottom-player .progress {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    min-width: 40px;
}

.bottom-player .progress .fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #ea580c);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

/* Time and volume - flexible */
.bottom-player .time-display {
    font-size: 0.75rem;
    opacity: 0.7;
    color: #9ca3af;
    min-width: 35px;
    text-align: center;
    flex-shrink: 0;
}

.bottom-player .fa-volume-up {
    color: #9ca3af;
    font-size: 14px;
    flex-shrink: 0;
    cursor: pointer;
    padding: 4px;
}

/* ============================================
   MOBILE RESPONSIVE - ALL SCREEN SIZES
   ============================================ */

/* Small phones (iPhone SE, Galaxy S8, etc.) */
@media (max-width: 380px) {
    .bottom-player {
        bottom: 60px;
        left: 6px;
        right: 6px;
        padding: 8px 10px;
        gap: 6px;
        border-radius: 12px;
        width: calc(100% - 12px);
    }
    
    .bottom-player .track-name {
        font-size: 9px;
        min-width: 50px;
        max-width: 70px;
    }
    
    .bottom-player .track-name i {
        font-size: 10px;
        margin-right: 3px;
    }
    
    .bottom-player .controls {
        gap: 4px;
    }
    
    .bottom-player .controls i {
        font-size: 10px;
        width: 20px;
        height: 20px;
    }
    
    .bottom-player .controls i.fa-play,
    .bottom-player .controls i.fa-pause {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
    
    .bottom-player .progress {
        min-width: 30px;
        height: 3px;
    }
    
    .bottom-player .time-display {
        font-size: 9px;
        min-width: 28px;
    }
    
    .bottom-player .fa-volume-up {
        font-size: 10px;
        padding: 2px;
    }
}

/* Medium phones (iPhone 12/13/14, Pixel, Galaxy) */
@media (min-width: 381px) and (max-width: 480px) {
    .bottom-player {
        bottom: 62px;
        left: 8px;
        right: 8px;
        padding: 10px 12px;
        gap: 8px;
        border-radius: 14px;
        width: calc(100% - 16px);
    }
    
    .bottom-player .track-name {
        font-size: 10px;
        min-width: 60px;
        max-width: 85px;
    }
    
    .bottom-player .track-name i {
        font-size: 11px;
        margin-right: 4px;
    }
    
    .bottom-player .controls {
        gap: 6px;
    }
    
    .bottom-player .controls i {
        font-size: 11px;
        width: 22px;
        height: 22px;
    }
    
    .bottom-player .controls i.fa-play,
    .bottom-player .controls i.fa-pause {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
    
    .bottom-player .progress {
        min-width: 35px;
        height: 3px;
    }
    
    .bottom-player .time-display {
        font-size: 10px;
        min-width: 30px;
    }
    
    .bottom-player .fa-volume-up {
        font-size: 11px;
        padding: 3px;
    }
}

/* Large phones (iPhone Plus/Max, Galaxy Plus) */
@media (min-width: 481px) and (max-width: 640px) {
    .bottom-player {
        bottom: 65px;
        left: 10px;
        right: 10px;
        padding: 10px 14px;
        gap: 10px;
        border-radius: 14px;
        width: calc(100% - 20px);
    }
    
    .bottom-player .track-name {
        font-size: 11px;
        min-width: 70px;
        max-width: 100px;
    }
    
    .bottom-player .controls i {
        font-size: 12px;
        width: 24px;
        height: 24px;
    }
    
    .bottom-player .controls i.fa-play,
    .bottom-player .controls i.fa-pause {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    .bottom-player .progress {
        min-width: 40px;
    }
    
    .bottom-player .time-display {
        font-size: 10px;
        min-width: 32px;
    }
    
    .bottom-player .fa-volume-up {
        font-size: 12px;
    }
}

/* Tablets and small desktops */
@media (min-width: 641px) and (max-width: 1024px) {
    .bottom-player {
        bottom: 75px;
        left: 20px;
        right: 20px;
        padding: 14px 20px;
        gap: 14px;
        max-width: 700px;
    }
    
    .bottom-player .track-name {
        font-size: 14px;
        min-width: 120px;
        max-width: 200px;
    }
    
    .bottom-player .controls i {
        font-size: 16px;
        width: 32px;
        height: 32px;
    }
    
    .bottom-player .controls i.fa-play,
    .bottom-player .controls i.fa-pause {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

/* Landscape phones (rotated) */
@media (max-height: 500px) and (orientation: landscape) {
    .bottom-player {
        bottom: 50px;
        padding: 6px 12px;
        gap: 8px;
        border-radius: 10px;
    }
    
    .bottom-player .track-name {
        font-size: 10px;
        min-width: 60px;
        max-width: 100px;
    }
    
    .bottom-player .controls i {
        font-size: 11px;
        width: 22px;
        height: 22px;
    }
    
    .bottom-player .controls i.fa-play,
    .bottom-player .controls i.fa-pause {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
    
    .bottom-player .progress {
        min-width: 50px;
    }
    
    .bottom-player .time-display {
        font-size: 9px;
        min-width: 28px;
    }
}

/* Extra small devices (very small phones) */
@media (max-width: 320px) {
    .bottom-player {
        bottom: 55px;
        left: 4px;
        right: 4px;
        padding: 6px 8px;
        gap: 4px;
        border-radius: 10px;
        width: calc(100% - 8px);
    }
    
    .bottom-player .track-name {
        font-size: 8px;
        min-width: 40px;
        max-width: 55px;
    }
    
    .bottom-player .track-name i {
        font-size: 8px;
        margin-right: 2px;
    }
    
    .bottom-player .controls {
        gap: 3px;
    }
    
    .bottom-player .controls i {
        font-size: 9px;
        width: 18px;
        height: 18px;
    }
    
    .bottom-player .controls i.fa-play,
    .bottom-player .controls i.fa-pause {
        width: 22px;
        height: 22px;
        font-size: 9px;
    }
    
    .bottom-player .progress {
        min-width: 20px;
        height: 2px;
    }
    
    .bottom-player .time-display {
        font-size: 8px;
        min-width: 22px;
    }
    
    .bottom-player .fa-volume-up {
        font-size: 9px;
        padding: 2px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .bottom-player {
        background: rgba(10, 10, 20, 0.98);
        border-color: rgba(255, 255, 255, 0.05);
    }
}

/* Safe area for notched phones (iPhone X and newer) */
@supports (padding: max(0px)) {
    .bottom-player {
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* Singer Profile Styles */
#singerProfilePage .playlist-song-item-modern {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 10px 14px;
    transition: all 0.2s ease;
    cursor: pointer;
}
#singerProfilePage .playlist-song-item-modern:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(245, 158, 11, 0.2);
}
#singerProfilePage .playlist-song-item-modern.active-playing {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}
#singerProfilePage .song-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
#singerProfilePage .song-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
#singerProfilePage .rank-number-plain {
    width: 24px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}
#singerProfilePage .song-cover-modern {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}
#singerProfilePage .song-info-modern {
    flex: 1;
    min-width: 0;
}
#singerProfilePage .song-title-modern {
    font-size: 14px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#singerProfilePage .song-artist-modern {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}
#singerProfilePage .song-right {
    flex-shrink: 0;
}
#singerProfilePage .song-actions-modern {
    display: flex;
    gap: 6px;
}
#singerProfilePage .action-btn-modern {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    color: white;
}
#singerProfilePage .play-btn-action {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
}
#singerProfilePage .play-btn-action:hover {
    transform: scale(1.05);
}
#singerProfilePage .play-btn-action.playing {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}
#singerProfilePage .download-btn {
    background: rgba(55, 65, 81, 0.6);
}
#singerProfilePage .download-btn:hover {
    background: rgba(55, 65, 81, 0.9);
}
#singerProfilePage .share-btn {
    background: rgba(124, 58, 237, 0.6);
}
#singerProfilePage .share-btn:hover {
    background: rgba(124, 58, 237, 0.9);
}
#singerProfilePage .social-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    transition: transform 0.2s;
}
#singerProfilePage .social-icon-btn:hover {
    transform: translateY(-2px);
}

/* FORCE HIDE removed pages */
#artistsPage,
#musicPage,
#newsPage,
#categoryArtistsSection {
    display: none !important;
}

/* HIDE the nav links that lead to those pages */
nav button[onclick*="navigateTo('artists')"],
nav button[onclick*="navigateTo('music')"],
nav button[onclick*="navigateTo('news')"] {
    display: none !important;
}

/* HIDE mobile bottom nav completely */
.fixed.bottom-0.left-0.w-full.bg-gray-900\/95 {
    display: none !important;
}

/* Remove body padding for bottom nav since it's gone */
body {
    padding-bottom: 0 !important;
}
/* ============================================
   ARTIST BIOGRAPHY SECTION
   ============================================ */

#artistBioSection {
    background: #000000;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

#artistBioSection:hover {
    background: #000000;
}

#artistBioSection h3 {
    font-size: 14px;
    font-weight: 600;
    color: #d1d5db;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

#artistBioSection h3 i {
    color: #f59e0b;
    margin-right: 8px;
    font-size: 16px;
}

#artistBioText {
    font-size: 14px;
    line-height: 1.8;
    color: #9ca3af;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Mobile responsive */
@media (max-width: 640px) {
    #artistBioSection {
        padding: 14px;
        border-radius: 12px;
        margin-bottom: 18px;
    }

    #artistBioText {
        font-size: 13px;
        line-height: 1.7;
    }

    #artistBioSection h3 {
        font-size: 13px;
    }
}

/* Admin bio textarea styling */
#newArtistBio {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    resize: vertical;
    min-height: 80px;
}

#newArtistBio:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

#newArtistBio::placeholder {
    color: #6b7280;
}

/* ============================================
   SONG DETAIL PAGE
   ============================================ */

#songDetailPage {
    animation: fadeSlideIn 0.3s ease;
}

#songDetailPage .song-item-mini {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 8px 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
}

#songDetailPage .song-item-mini:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

#songDetailPage .song-item-mini .mini-cover {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

#songDetailPage .song-item-mini .mini-info {
    flex: 1;
    min-width: 0;
}

#songDetailPage .song-item-mini .mini-title {
    font-size: 13px;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#songDetailPage .song-item-mini .mini-title:hover {
    color: #f59e0b;
}

#songDetailPage .song-item-mini .mini-artist {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#songDetailPage .song-item-mini .mini-play-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 11px;
    flex-shrink: 0;
}

#songDetailPage .song-item-mini .mini-play-btn:hover {
    transform: scale(1.05);
}

#songDetailPage .song-item-mini .mini-play-btn.playing {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Song Detail Page entry animation */
#songDetailPage { animation: fadeSlideIn 0.3s ease; }

/* Song Detail Progress Bar */
#songDetailProgressWrap {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}
#songDetailProgressBar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #ea580c);
    border-radius: 10px;
    width: 0%;
    transition: width 0.1s linear;
}
#songDetailPlayBtn.playing i {
    content: none;
}
#songDetailPlayBtn.playing .fa-play:before {
    content: "\f04c"; /* FontAwesome pause icon */
}

#songDetailProgressBar {
    background: #ffffff;
}

/* Loading spinner inside button */
.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Hide buttons on multiple sections */
#djMixesGrid button,
#trendingGrid button,
#mostPlayedGrid button,
#newSongsGrid button {
    display: none !important;
}

/* ============================================
   HIDE PLAY & VIEW BUTTONS ON FEATURED ARTIST BANNER
   ============================================ */
#bannerPlayBtn,
#bannerViewBtn {
    display: none !important;
}

/* ============================================
   HIDE BUTTONS IN "MORE FROM ARTIST" - SONG DETAIL PAGE
   ============================================ */
#songDetailArtistSongs .song-actions-modern {
    display: none !important;
}

/* ============================================
   REMOVE BORDER & CHECKBOXES IN SONG DETAIL - MORE FROM ARTIST
   ============================================ */

/* Remove border from song items in "More from artist" section */
#songDetailArtistSongs .playlist-song-item-modern {
    border: none !important;
    background: transparent !important;
    padding: 6px 0 !important;
    margin-bottom: 4px !important;
}

/* Remove hover effects */
#songDetailArtistSongs .playlist-song-item-modern:hover {
    background: transparent !important;
    transform: none !important;
    border: none !important;
}

/* Hide all checkboxes everywhere */
input[type="checkbox"] {
    display: none !important;
}

/* Specifically hide admin checkboxes */
.admin-checkbox,
.song-checkbox,
.artist-checkbox,
#adminSelectAllSongs,
#adminSelectAllArtists,
#selectAllSongsBtn,
#selectAllArtistsBtn,
#selectAllNewsBtn {
    display: none !important;
}

/* Hide the Select All and Bulk Delete buttons in admin */
.select-all-btn,
.bulk-delete-btn {
    display: none !important;
}

/* Hide the checkbox column in admin tables */
.admin-table th:first-child,
.admin-table td:first-child {
    display: none !important;
}

/* ============================================
   HIDE PLAY & DOWNLOAD BUTTONS ON ARTIST PROFILE PAGE
   ============================================ */
#artistTracksGrid .song-actions-modern {
    display: none !important;
}

/* ============================================
   HIDE ARTIST SUB-NAMES IN ARTIST PROFILE PAGE
   ============================================ */
#artistTracksGrid .song-artist-modern {
    display: none !important;
}

/* ============================================
   HIDE ARTIST SUB-NAMES IN SONG DETAIL PAGE
   ============================================ */
#songDetailArtistSongs .song-artist-modern {
    display: none !important;
}
#songDetailArtist {
    display: none !important;
}