/* ===== KUMAM MUSIC — GLOBAL STYLES ===== */

/* ── LIGHT MODE (default) ───────────────────────────────────── */
:root {
  --bg-primary:    #f5f3ee;
  --bg-secondary:  #ffffff;
  --bg-card:       #faf8f4;
  --bg-hover:      #ede9e0;
  --accent:        #e8820c;
  --accent-dark:   #c06a08;
  --accent-light:  #f5a23d;
  --accent-glow:   rgba(232,130,12,0.15);
  --purple:        #7c3aed;
  --green:         #059669;
  --red:           #dc2626;
  --text-primary:  #1a1208;
  --text-secondary:#5c4a2a;
  --text-muted:    #9c8866;
  --border:        rgba(0,0,0,0.10);
  --player-h:      90px;
  --sidebar-w:     240px;
  --radius:        12px;
  --radius-sm:     8px;
  --shadow:        0 4px 24px rgba(0,0,0,0.10);
  --transition:    0.2s ease;
}

/* ── DARK MODE (opt-in via body.dark-mode) ──────────────────── */
body.dark-mode {
  --bg-primary:    #0d0d14;
  --bg-secondary:  #13131f;
  --bg-card:       #1a1a2e;
  --bg-hover:      #22223a;
  --accent:        #e8820c;
  --accent-dark:   #c06a08;
  --accent-light:  #f5a23d;
  --accent-glow:   rgba(232,130,12,0.2);
  --purple:        #7c3aed;
  --green:         #10b981;
  --red:           #ef4444;
  --text-primary:  #f0f0f8;
  --text-secondary:#9999bb;
  --text-muted:    #55556a;
  --border:        rgba(255,255,255,0.08);
  --shadow:        0 8px 32px rgba(0,0,0,0.4);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Poppins',sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  display:flex;
  font-size:14px;
}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:4px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit;border:none;background:none}
input,select,textarea{font-family:inherit}

/* ===== SIDEBAR ===== */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);height:100vh;
  background:var(--bg-secondary);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow-y:auto;z-index:100;
  position:relative;
}
.sidebar-logo{
  display:flex;align-items:center;gap:12px;
  padding:24px 20px;border-bottom:1px solid var(--border);
}
.logo-icon{
  width:48px;height:48px;background:transparent;
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#fff;flex-shrink:0;
  overflow:hidden;
}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-main{font-size:18px;font-weight:800;letter-spacing:2px;color:var(--text-primary)}
.logo-sub{font-size:10px;letter-spacing:4px;color:var(--accent);font-weight:600}
.sidebar-nav{padding:12px 0;flex:1}
.nav-link{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;color:var(--text-secondary);
  transition:all var(--transition);font-weight:500;
  border-left:3px solid transparent;font-size:14px;
}
.nav-link i{width:18px;text-align:center;font-size:16px}
.nav-link:hover{background:var(--bg-hover);color:var(--text-primary)}
.nav-link.active{background:var(--accent-glow);color:var(--accent);border-left-color:var(--accent)}
.nav-divider{height:1px;background:var(--border);margin:8px 16px}
.nav-link.hidden{display:none}

/* ===== MAIN CONTAINER ===== */
.main-container{
  flex:1;display:flex;flex-direction:column;
  height:100vh;overflow:hidden;
}

/* ===== TOPBAR ===== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
  gap:16px;z-index:50;flex-shrink:0;
}
.topbar-left{display:flex;align-items:center;gap:16px;flex:1}
.hamburger{
  display:none;color:var(--text-secondary);font-size:20px;
  padding:6px;background:none;border:none;
}
.search-bar{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:24px;padding:10px 18px;flex:1;max-width:480px;
  position:relative;transition:border-color var(--transition);
}
.search-bar:focus-within{border-color:var(--accent)}
.search-bar i{color:var(--text-muted);font-size:14px}
.search-bar input{background:none;border:none;outline:none;color:var(--text-primary);flex:1;font-size:14px}
.search-bar input::placeholder{color:var(--text-muted)}
.search-dropdown{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);max-height:400px;overflow-y:auto;
  box-shadow:var(--shadow);z-index:200;
}
.search-section-title{
  font-size:11px;font-weight:700;letter-spacing:1px;
  color:var(--text-muted);padding:12px 16px 6px;text-transform:uppercase;
}
.search-item{
  display:flex;align-items:center;gap:12px;padding:10px 16px;
  cursor:pointer;transition:background var(--transition);
}
.search-item:hover{background:var(--bg-hover)}
.search-item-img{
  width:40px;height:40px;border-radius:6px;object-fit:cover;
  background:var(--bg-hover);flex-shrink:0;
}
.search-item-img.round{border-radius:50%}
.search-item-info .title{font-weight:500;font-size:14px}
.search-item-info .sub{font-size:12px;color:var(--text-secondary)}

/* AUTH BUTTONS */
.auth-buttons{display:flex;gap:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 20px;border-radius:24px;font-size:14px;font-weight:600;
  transition:all var(--transition);cursor:pointer;border:none;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 4px 16px var(--accent-glow)}
.btn-outline{background:transparent;color:var(--text-primary);border:1.5px solid var(--border)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-full{width:100%}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{filter:brightness(1.1);box-shadow:0 4px 14px rgba(220,38,38,0.35)}
.btn-sm{padding:6px 14px;font-size:12px}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{filter:brightness(1.1);box-shadow:0 4px 14px rgba(16,150,100,0.35)}

/* USER MENU */
.user-menu{position:relative}
.user-avatar-wrap{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:6px 12px;border-radius:24px;transition:background var(--transition);
}
.user-avatar-wrap:hover{background:var(--bg-hover)}
.user-avatar-wrap img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--accent)}
.user-avatar-wrap span{font-weight:600;font-size:14px}
.user-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);min-width:200px;
  box-shadow:var(--shadow);z-index:300;overflow:hidden;
}
.user-dropdown a{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;color:var(--text-secondary);font-size:14px;
  transition:all var(--transition);
}
.user-dropdown a i{width:16px;text-align:center}
.user-dropdown a:hover{background:var(--bg-hover);color:var(--text-primary)}
.dropdown-divider{height:1px;background:var(--border);margin:4px 0}

/* ===== PAGE CONTENT ===== */
.content{
  flex:1;overflow-y:auto;
  padding-bottom:calc(var(--player-h) + 20px);
}
.page{display:none}
.page.active{display:block}

/* ===== HERO ===== */
.hero{
  background:#100c1a;
  padding:60px 32px 40px;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-content{position:relative;z-index:1;max-width:720px}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-glow);border:1px solid var(--accent);
  color:var(--accent);padding:6px 14px;border-radius:24px;
  font-size:12px;font-weight:600;letter-spacing:1px;margin-bottom:20px;
}
.hero h1{font-size:42px;font-weight:800;line-height:1.15;margin-bottom:16px}
.hero h1 .highlight{color:var(--accent)}
.hero p{color:var(--text-secondary);font-size:16px;margin-bottom:28px;line-height:1.6}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{
  display:flex;gap:32px;margin-top:40px;
  position:relative;z-index:1;
}
.hero-stat{text-align:center}
.hero-stat .num{font-size:24px;font-weight:800;color:var(--accent)}
.hero-stat .label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}

/* ===== HERO CAROUSEL ===== */
.hero-carousel-wrap{
  position:relative;width:100%;margin-bottom:8px;
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,0.35);
  touch-action:pan-y;
}
.hero-carousel-track{
  display:flex;width:100%;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.hero-carousel-track.no-transition{transition:none}
.hero-slide{
  flex:0 0 100%;min-width:0;display:block;line-height:0;
  -webkit-user-drag:none;
}
.hero-slide img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.hero-carousel-dots{
  position:absolute;bottom:14px;left:0;right:0;
  display:flex;justify-content:center;gap:7px;z-index:2;
}
.hero-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,0.4);cursor:pointer;
  transition:all .25s ease;border:none;padding:0;
}
.hero-dot:hover{background:rgba(255,255,255,0.7)}
.hero-dot.active{background:var(--accent);width:22px;border-radius:5px}
.hero-carousel-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;
  background:rgba(13,13,20,0.45);border:1px solid rgba(255,255,255,0.2);
  color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;font-size:13px;opacity:0;
  transition:opacity .2s ease,background .2s ease;
}
.hero-carousel-wrap:hover .hero-carousel-nav{opacity:1}
.hero-carousel-nav:hover{background:rgba(232,130,12,0.75)}
.hero-carousel-nav.prev{left:12px}
.hero-carousel-nav.next{right:12px}
@media (max-width:640px){
  .hero-carousel-wrap{max-width:100%}
  .hero-carousel-nav{display:none}
  .hero-dot{width:6px;height:6px}
  .hero-dot.active{width:18px}
}
/* Keep the carousel growing with the available space on wider desktops
   instead of stopping dead at 720px and leaving empty space to the right. */
@media (min-width:1029px){ .hero-content{max-width:860px} }
@media (min-width:1280px){ .hero-content{max-width:960px} }
@media (min-width:1600px){ .hero-content{max-width:1100px} }

/* ===== SECTIONS ===== */
.section{padding:32px;border-bottom:1px solid var(--border)}
.section:last-child{border-bottom:none}
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;
}
.section-title{font-size:20px;font-weight:700;display:flex;align-items:center;gap:10px}
.section-title i{color:var(--accent)}
.see-all{color:var(--accent);font-size:13px;font-weight:600}
.see-all:hover{text-decoration:underline}

/* GENRE PILLS */
/* ===== FILTER PILLS (Discover "Filter by Genre") ===============
   Rectangular (not full-pill), a 4-colour rotation (cycles every 4
   items via nth-child so it stays readable in light AND dark mode —
   the old per-item admin colour + outline design used to wash out in
   light mode), horizontally scrollable with a soft edge fade, and a
   one-time staggered pop-in so the row doesn't feel static. ============ */
.genre-pills{
  display:flex;gap:10px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  padding:2px 2px 8px;margin-bottom:20px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 26px),transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 26px),transparent 100%);
}
.genre-pills::-webkit-scrollbar{display:none}
.genre-pill:nth-child(4n+1){--tag-c:var(--accent)}
.genre-pill:nth-child(4n+2){--tag-c:var(--purple)}
.genre-pill:nth-child(4n+3){--tag-c:var(--green)}
.genre-pill:nth-child(4n)  {--tag-c:var(--red)}
.genre-pill{
  padding:9px 18px;border-radius:10px;font-size:13px;font-weight:700;
  cursor:pointer;border:none;color:#fff;background:var(--tag-c,var(--accent));
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.18);
  white-space:nowrap;flex-shrink:0;scroll-snap-align:start;
  animation:tagPopIn .4s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:min(calc(var(--i,0) * 0.035s), .4s);
}
.genre-pill:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 6px 16px rgba(0,0,0,0.24)}
.genre-pill:active{transform:translateY(0) scale(.96)}
.genre-pill.active{
  box-shadow:0 0 0 3px var(--bg-primary),0 0 0 5px var(--tag-c,var(--accent)),0 8px 18px rgba(0,0,0,0.22);
  transform:scale(1.05);
}
@keyframes tagPopIn{
  from{opacity:0;transform:translateY(10px) scale(.9)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .genre-pill,.genre-tag{animation:none}
}

/* ===== SONG CARDS (GRID) ===== */
.songs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:16px;
}
.song-card{
  background:var(--bg-card);border-radius:var(--radius);
  padding:16px;cursor:pointer;transition:all var(--transition);
  position:relative;overflow:hidden;
}
.song-card:hover{background:var(--bg-hover);transform:translateY(-3px);box-shadow:var(--shadow)}
.song-card-artwork{
  width:100%;aspect-ratio:1;border-radius:var(--radius-sm);
  object-fit:cover;background:var(--bg-hover);margin-bottom:12px;
  position:relative;
}
.song-card-artwork img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-sm)}
.play-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,0.5);
  border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--transition);
}
.song-card:hover .play-overlay{opacity:1}
.play-overlay i{font-size:32px;color:#fff}
.song-card-title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-card-artist{font-size:12px;color:var(--text-secondary);margin-top:2px}
.song-card-meta{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:8px;
}
.song-card-streams{font-size:11px;color:var(--text-muted)}
.song-card-actions{display:flex;gap:8px}
.song-card-actions button{
  color:var(--text-muted);font-size:14px;transition:color var(--transition);
  padding:4px;background:none;border:none;cursor:pointer;
}
.song-card-actions button:hover{color:var(--accent)}
.song-card-actions .liked{color:var(--accent) !important}

/* ===== SONG LIST (TABLE) ===== */
.songs-list{display:flex;flex-direction:column;gap:4px}
.song-row{
  display:grid;grid-template-columns:40px 1fr auto auto auto;
  align-items:center;gap:16px;
  padding:10px 16px;border-radius:var(--radius-sm);
  cursor:pointer;transition:background var(--transition);
}
.song-row:hover{background:var(--bg-hover)}
.song-row.playing{background:var(--accent-glow)}
.song-num{color:var(--text-muted);text-align:center;font-size:13px}
.song-row-info{display:flex;align-items:center;gap:12px;min-width:0}
.song-row-text{min-width:0;flex:1 1 auto;overflow:hidden}
.song-row-img{
  width:42px;height:42px;border-radius:6px;
  object-fit:cover;background:var(--bg-hover);flex-shrink:0;
}
.song-row-img img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.song-row-title{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-row-artist{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-row-duration{color:var(--text-secondary);font-size:13px;white-space:nowrap}
.song-row-streams{color:var(--text-muted);font-size:12px;white-space:nowrap}
.song-row-actions{display:flex;gap:8px}
.song-row-actions button{
  color:var(--text-muted);font-size:14px;transition:color var(--transition);
  padding:6px;background:none;border:none;cursor:pointer;opacity:0;
}
.song-row:hover .song-row-actions button{opacity:1}
.song-row-actions button:hover{color:var(--accent)}
.song-row-actions .liked{color:var(--accent) !important;opacity:1 !important}

/* ===== ARTIST CARDS ===== */
.artists-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:16px;
}
.artist-card{
  background:var(--bg-card);border-radius:var(--radius);
  padding:24px 16px;text-align:center;cursor:pointer;
  transition:all var(--transition);
}
.artist-card:hover{background:var(--bg-hover);transform:translateY(-3px);box-shadow:var(--shadow)}
.artist-card-avatar{
  width:90px;height:90px;border-radius:50%;margin:0 auto 14px;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;color:#fff;overflow:hidden;border:3px solid var(--accent-glow);
  position:relative;
}
.featured-badge{
  position:absolute;top:6px;left:6px;background:var(--accent);color:#fff;
  font-size:9px;font-weight:800;padding:3px 7px;border-radius:20px;
  display:flex;align-items:center;gap:3px;text-transform:uppercase;letter-spacing:0.3px;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);z-index:2;
}
.artist-card-avatar .featured-badge{top:auto;bottom:-4px;left:50%;transform:translateX(-50%);}
.artist-card-avatar img{width:100%;height:100%;object-fit:cover}
.artist-card-name{font-weight:700;font-size:15px;margin-bottom:4px}
.artist-card-stage{font-size:12px;color:var(--accent)}
.artist-card-followers{font-size:12px;color:var(--text-muted);margin-top:4px}
.follow-btn{
  margin-top:12px;padding:7px 20px;border-radius:24px;font-size:12px;
  font-weight:600;border:1.5px solid var(--accent);color:var(--accent);
  background:transparent;transition:all var(--transition);cursor:pointer;
}
.follow-btn.following{background:var(--accent);color:#fff}
.follow-btn:hover{background:var(--accent);color:#fff}

/* ===== ALBUM CARDS ===== */
.albums-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;
}
.album-card{
  background:var(--bg-card);border-radius:var(--radius);overflow:hidden;
  cursor:pointer;transition:all var(--transition);
}
.album-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.album-card-img{
  width:100%;aspect-ratio:1;object-fit:cover;
  background:var(--bg-hover);display:flex;align-items:center;justify-content:center;
  font-size:48px;color:var(--text-muted);
}
.album-card-img img{width:100%;height:100%;object-fit:cover}
.album-card-info{padding:14px}
.album-card-title{font-weight:700;font-size:14px;margin-bottom:4px}
.album-card-artist{font-size:12px;color:var(--accent)}
.album-card-meta{font-size:11px;color:var(--text-muted);margin-top:6px}

/* ===== PLAYLIST CARDS ===== */
.playlists-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;
}
.playlist-card{
  background:var(--bg-card);border-radius:var(--radius);
  padding:20px;cursor:pointer;transition:all var(--transition);
  display:flex;align-items:center;gap:14px;
}
.playlist-card:hover{background:var(--bg-hover);transform:translateX(4px)}
.playlist-icon{
  width:54px;height:54px;border-radius:var(--radius-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.playlist-card-info .title{font-weight:700;font-size:15px}
.playlist-card-info .meta{font-size:12px;color:var(--text-muted);margin-top:4px}

/* ===== MUSIC PLAYER ===== */
.player{
  position:fixed;bottom:0;left:0;right:0;height:var(--player-h);
  background:var(--bg-secondary);border-top:1px solid var(--border);
  display:flex;align-items:center;gap:20px;padding:0 24px;
  z-index:1000;backdrop-filter:blur(20px);
}
/* On desktop the sidebar is a permanent column, not an overlay — the player
   bar must stop at its right edge instead of covering its bottom nav links. */
@media (min-width: 901px){
  .player{ left: var(--sidebar-w); }
}
.player-left{display:flex;align-items:center;gap:14px;width:280px;min-width:0}
.player-install-btn{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  background:var(--accent);color:#fff;border:none;border-radius:20px;
  padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer;
  white-space:nowrap;transition:filter .15s ease,box-shadow .15s ease;
  box-shadow:0 2px 8px rgba(232,130,12,0.35);
}
.player-install-btn:hover{filter:brightness(1.08)}
.player-install-btn i{font-size:12px}
.player-artwork{
  width:58px;height:58px;border-radius:10px;flex-shrink:0;
  overflow:hidden;background:var(--bg-card);
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.player-artwork img{width:100%;height:100%;object-fit:cover}
.player-info{min-width:0;flex:1}
.player-title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-artist{font-size:12px;color:var(--text-secondary);margin-top:2px}
.player-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:600px}
.player-controls{display:flex;align-items:center;gap:16px}
.player-btn{
  color:var(--text-secondary);font-size:16px;
  transition:all var(--transition);padding:6px;
  background:none;border:none;cursor:pointer;
}
.player-btn:hover{color:var(--text-primary)}
.player-btn.active{color:var(--accent)}
.player-btn{position:relative}
.repeat-badge{
  display:none;position:absolute;top:2px;right:2px;background:var(--accent);color:#fff;
  font-size:8px;font-weight:800;line-height:1;border-radius:50%;width:13px;height:13px;
  align-items:center;justify-content:center;
}
.player-btn.repeat-one .repeat-badge,.fs-btn.repeat-one .repeat-badge{display:flex}
.player-btn.repeat-one,.fs-btn.repeat-one{color:var(--green)}
.play-pause{
  width:44px;height:44px;border-radius:50%;
  background:var(--accent) !important;color:#fff !important;
  display:flex;align-items:center;justify-content:center;
  font-size:18px !important;box-shadow:0 4px 16px var(--accent-glow);
}
.play-pause:hover{background:var(--accent-dark) !important;transform:scale(1.05)}
.player-progress{
  display:flex;align-items:center;gap:12px;width:100%;
  font-size:12px;color:var(--text-muted);
}
.progress-bar{
  flex:1;height:4px;background:var(--bg-hover);
  border-radius:4px;cursor:pointer;position:relative;
}
.progress-bar:hover{height:6px}
.progress-fill{height:100%;background:var(--accent);border-radius:4px;transition:width 0.1s linear}
.progress-thumb{
  position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%;background:#fff;
  display:none;
}
.progress-bar:hover .progress-thumb{display:block}
.player-right{display:flex;align-items:center;gap:12px;width:200px;justify-content:flex-end}
.volume-control{display:flex;align-items:center;gap:8px}
.volume-bar{
  width:80px;height:4px;background:var(--bg-hover);
  border-radius:4px;cursor:pointer;position:relative;
}
.volume-fill{height:100%;background:var(--text-secondary);border-radius:4px}

/* ===== QUEUE PANEL ===== */
.queue-panel{
  position:fixed;bottom:var(--player-h);right:0;
  width:300px;background:var(--bg-secondary);
  border-top:1px solid var(--border);border-left:1px solid var(--border);
  max-height:400px;z-index:999;display:flex;flex-direction:column;
}
.queue-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
  font-weight:700;font-size:16px;
}
.queue-header button{color:var(--text-muted);font-size:18px;transition:color var(--transition)}
.queue-header button:hover{color:var(--text-primary)}
.queue-list{overflow-y:auto;flex:1;padding:8px}
.queue-item{
  display:flex;align-items:center;gap:10px;
  padding:8px;border-radius:var(--radius-sm);cursor:pointer;
  transition:background var(--transition);
}
.queue-item:hover{background:var(--bg-hover)}
.queue-item.active{background:var(--accent-glow);color:var(--accent)}
.queue-item img{width:36px;height:36px;border-radius:4px;object-fit:cover;background:var(--bg-hover)}
.queue-item-info{flex:1;min-width:0}
.queue-item-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-item-artist{font-size:11px;color:var(--text-muted)}

/* ===== MODALS ===== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);
  z-index:2000;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);padding:20px;
}
.modal{
  background:var(--bg-secondary);border-radius:20px;
  padding:36px;width:100%;max-width:440px;
  border:1px solid var(--border);position:relative;
  box-shadow:var(--shadow);max-height:90vh;overflow-y:auto;
}
.modal-close{
  position:absolute;top:16px;right:16px;
  color:var(--text-muted);font-size:18px;
  transition:color var(--transition);
}
.modal-close:hover{color:var(--text-primary)}
.modal-logo{
  text-align:center;font-size:22px;font-weight:800;
  color:var(--accent);letter-spacing:2px;margin-bottom:12px;
}
.modal h2{font-size:24px;font-weight:700;margin-bottom:24px;text-align:center}
.small-modal{max-width:360px}

/* ===== FORMS ===== */
.form-group{margin-bottom:18px}
.form-group label{
  display:block;font-size:13px;font-weight:600;
  color:var(--text-secondary);margin-bottom:8px;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;padding:12px 16px;background:var(--bg-primary);
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text-primary);font-size:14px;outline:none;
  transition:border-color var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{border-color:var(--accent)}
.form-group input::placeholder{color:var(--text-muted)}
.password-wrap{position:relative}
.password-wrap input{padding-right:48px}
.toggle-pwd{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);cursor:pointer;font-size:14px;
}
.form-group small{display:block;font-size:11px;color:var(--text-muted);margin-top:6px}

/* ACCOUNT TYPE TABS */
.account-type-tabs{display:flex;gap:8px;margin-bottom:24px}
.tab-btn{
  flex:1;padding:10px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;border:1.5px solid var(--border);
  color:var(--text-secondary);transition:all var(--transition);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.tab-btn.active,.tab-btn:hover{
  border-color:var(--accent);background:var(--accent-glow);color:var(--accent);
}

/* PAYMENT */
.plan-cards{display:flex;flex-direction:column;gap:10px}
.plan-card{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border);cursor:pointer;
  transition:all var(--transition);
}
.plan-card:hover,.plan-card.selected{border-color:var(--accent);background:var(--accent-glow)}
.plan-card-icon{font-size:22px}
.plan-card-info{flex:1}
.plan-card-name{font-weight:600;font-size:14px}
.plan-card-desc{font-size:12px;color:var(--text-muted)}
.plan-card-price{font-weight:700;color:var(--accent);font-size:15px}

.payment-methods{display:flex;gap:10px;margin-top:8px}
.payment-option{flex:1;cursor:pointer}
.payment-option input{display:none}
.payment-card{
  padding:14px;border-radius:var(--radius-sm);border:1.5px solid var(--border);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:all var(--transition);text-align:center;font-size:12px;font-weight:600;
}
.payment-option input:checked + .payment-card,
.payment-card:hover{border-color:var(--accent);background:var(--accent-glow)}
.payment-card img{height:28px;object-fit:contain;filter:brightness(2)}
.payment-card.mtn{border-color:#ffcc00 !important}
.payment-card.mtn:hover,.payment-option input:checked + .payment-card.mtn{background:rgba(255,204,0,0.15) !important}
.payment-card.airtel{border-color:#ef4444 !important}
.payment-card.airtel:hover,.payment-option input:checked + .payment-card.airtel{background:rgba(239,68,68,0.15) !important}
.mtn-hint{display:block;margin-top:6px;font-size:11px;color:var(--text-muted)}
.subscription-info{
  display:flex;gap:10px;padding:14px;
  background:var(--accent-glow);border:1px solid var(--accent);
  border-radius:var(--radius-sm);font-size:13px;
}
.subscription-info i{color:var(--accent);margin-top:2px}
.subscription-info p{margin-top:4px;color:var(--text-muted)}
.payment-pending{text-align:center;padding:20px 0}
.pending-icon{font-size:48px;color:var(--accent);margin-bottom:16px;animation:pulse 1.5s infinite}
.pending-timer{
  font-size:13px;color:var(--text-muted);margin:12px 0 16px;
  padding:10px;background:var(--bg-primary);border-radius:var(--radius-sm);
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}

/* ALERTS */
.alert{
  padding:12px 16px;border-radius:var(--radius-sm);
  font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:8px;
}
.alert-error{background:rgba(239,68,68,0.15);color:#fca5a5;border:1px solid rgba(239,68,68,0.3)}
.alert-success{background:rgba(16,185,129,0.15);color:#6ee7b7;border:1px solid rgba(16,185,129,0.3)}
.auth-switch{text-align:center;margin-top:20px;font-size:14px;color:var(--text-muted)}
.auth-switch a{color:var(--accent);font-weight:600}

/* ===== URGENT VERIFY-EMAIL MENU ITEM ===== */
.verify-urgent{
  background:rgba(239,68,68,0.12) !important;
  color:#fca5a5 !important;
  font-weight:700 !important;
  position:relative;
}
.verify-urgent i{color:#f87171}
.verify-urgent-dot{
  width:7px;height:7px;border-radius:50%;background:#ef4444;
  display:inline-block;margin-left:auto;
  animation:verifyPulse 1.6s ease-in-out infinite;
}
@keyframes verifyPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,0.55); }
  50%{ box-shadow:0 0 0 5px rgba(239,68,68,0); }
}

/* ===== 6-DIGIT CODE INPUT ===== */
.otp-single-input{
  font-size:26px;letter-spacing:14px;text-align:center;font-weight:800;
  padding:12px 10px 12px 22px;
}

/* ===== NOTIFICATION ===== */
.notification{
  position:fixed;bottom:calc(var(--player-h) + 20px);left:50%;
  transform:translateX(-50%);
  background:var(--bg-card);border:1px solid var(--accent);
  color:var(--text-primary);padding:12px 24px;border-radius:24px;
  display:flex;align-items:center;gap:10px;z-index:3000;
  box-shadow:var(--shadow);font-size:14px;font-weight:500;
  animation:slideUp 0.3s ease;
}
.notification i{color:var(--accent)}
.notification-retry-btn{
  background:var(--accent);color:#fff;border:none;border-radius:16px;
  padding:5px 14px;font-size:12px;font-weight:700;cursor:pointer;
  flex-shrink:0;transition:filter .15s ease;
}
.notification-retry-btn:hover{filter:brightness(1.1)}
@keyframes slideUp{from{transform:translateX(-50%) translateY(20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}

/* ===== OFFLINE BANNER ===== */
.offline-banner{
  position:fixed;top:0;left:0;right:0;z-index:4000;
  background:#1a1208;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:10px 16px;font-size:13px;font-weight:600;
  box-shadow:0 2px 12px rgba(0,0,0,0.3);
  animation:slideDown .3s ease;
}
.offline-banner.offline{background:#7a2b1f}
.offline-banner.online{background:#0e9f6e}
.offline-banner i{font-size:14px}
.offline-retry-btn{
  background:rgba(255,255,255,0.18);color:#fff;border:1px solid rgba(255,255,255,0.4);
  border-radius:16px;padding:5px 14px;font-size:12px;font-weight:700;cursor:pointer;
  transition:background .15s ease;
}
.offline-retry-btn:hover{background:rgba(255,255,255,0.3)}
.offline-retry-btn:disabled{opacity:.6;cursor:default}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* ===== DASHBOARD ===== */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;
  margin-bottom:32px;
}
.stat-card{
  background:var(--bg-card);border-radius:var(--radius);padding:24px;
  border:1px solid var(--border);
}
.stat-card-icon{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  margin-bottom:16px;
}
.stat-card-value{font-size:28px;font-weight:800;margin-bottom:4px}
.stat-card-label{font-size:13px;color:var(--text-muted)}
.stat-card-change{font-size:12px;color:var(--green);margin-top:8px}

/* ===== PROFILE PAGE ===== */
.profile-header{
  background:#100c1a;
  padding:40px 32px;display:flex;align-items:flex-end;gap:28px;
  border-bottom:1px solid var(--border);
}
.profile-avatar{
  width:120px;height:120px;border-radius:50%;
  border:4px solid var(--accent);overflow:hidden;
  background:var(--bg-card);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:40px;
}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-info .name{font-size:28px;font-weight:800;margin-bottom:4px}
.profile-info .role-badge{
  display:inline-block;padding:4px 12px;border-radius:12px;
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  background:var(--accent-glow);color:var(--accent);border:1px solid var(--accent);
}
.profile-info .meta{color:var(--text-muted);font-size:14px;margin-top:8px}
.profile-tabs{
  display:flex;gap:0;border-bottom:1px solid var(--border);
  padding:0 32px;
}
.profile-tab{
  padding:16px 24px;font-weight:600;font-size:14px;
  color:var(--text-muted);border-bottom:3px solid transparent;
  cursor:pointer;transition:all var(--transition);
}
.profile-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.profile-tab-content{padding:32px;display:none}
.profile-tab-content.active{display:block}

/* ===== UPLOAD FORM ===== */
.upload-form{max-width:600px;margin:0 auto;padding:32px}
.upload-area{
  border:2px dashed var(--border);border-radius:var(--radius);
  padding:40px;text-align:center;cursor:pointer;
  transition:all var(--transition);margin-bottom:20px;
}
.upload-area:hover,.upload-area.dragover{border-color:var(--accent);background:var(--accent-glow)}
.upload-area i{font-size:40px;color:var(--text-muted);margin-bottom:12px}
.upload-area .upload-text{font-size:16px;font-weight:600}
.upload-area .upload-hint{font-size:13px;color:var(--text-muted);margin-top:6px}

/* ===== ADMIN ===== */
.admin-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 32px}
.admin-tab{
  padding:16px 20px;font-weight:600;font-size:14px;color:var(--text-muted);
  border-bottom:3px solid transparent;cursor:pointer;transition:all var(--transition);
}
.admin-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.admin-content{padding:32px;display:none}
.admin-content.active{display:block}
.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{
  padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:13px;
}
.data-table th{color:var(--text-muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:1px}
.data-table tr:hover td{background:var(--bg-hover)}
.badge{
  display:inline-block;padding:3px 10px;border-radius:12px;
  font-size:11px;font-weight:700;text-transform:uppercase;
  box-shadow:0 1px 4px rgba(0,0,0,0.18);
}
/* Solid, opaque backgrounds with white text — readable in both
   light and dark mode. The old translucent (rgba .2) + pastel-text
   combo washed out on light backgrounds; solid fills fix that. */
.badge-active{background:#0e9f6e;color:#fff}
.badge-pending{background:#c88a04;color:#fff}
.badge-expired{background:#dc2626;color:#fff}
.badge-artist{background:#7c3aed;color:#fff}
.badge-admin{background:#c06a08;color:#fff}

.genre-combo { position: relative; }
.genre-combo-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 600;
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); max-height: 220px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.genre-combo-item {
  padding: 10px 14px; font-size: 13px; cursor: pointer;
  border-bottom: 1px solid var(--border); transition: background 0.12s ease;
}
.genre-combo-item:last-child { border-bottom: none; }
.genre-combo-item:hover { background: var(--bg-hover); color: var(--accent); }

/* ===== PLAYLIST MODAL LIST ===== */
.playlist-modal-list{max-height:240px;overflow-y:auto;margin-bottom:12px}
.playlist-modal-item{
  display:flex;align-items:center;gap:12px;padding:10px 8px;
  border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition);
}
.playlist-modal-item:hover{background:var(--bg-hover)}
.playlist-modal-item i{color:var(--accent);font-size:18px}
.playlist-modal-item span{font-size:14px;font-weight:500}

/* ===== EMPTY STATES ===== */
.empty-state{
  text-align:center;padding:60px 20px;color:var(--text-muted);
}
.empty-state i{font-size:56px;margin-bottom:20px;display:block;opacity:0.3}
.empty-state h3{font-size:20px;color:var(--text-secondary);margin-bottom:8px}
.empty-state p{font-size:14px}

/* ===== DOWNLOAD BUTTON — clear label ===== */
.download-btn-labeled {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.download-btn-labeled:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16,185,129,0.4);
}
.download-btn-labeled i { font-size: 11px; }
.loading-spinner{
  display:flex;align-items:center;justify-content:center;
  padding:60px;
}
.spinner{
  width:40px;height:40px;border:3px solid var(--bg-hover);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin 0.7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* KUMAM PATTERNS — TRIBAL DECORATIVE */
.tribal-border{
  height:2px;
  background:var(--accent);
}

/* ===== UTILS ===== */
.hidden{display:none !important}
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.gap-2{gap:8px}
.gap-3{gap:12px}
.mt-4{margin-top:16px}
.mt-2{margin-top:8px}
.text-accent{color:var(--accent)}
.text-muted{color:var(--text-muted)}
.text-sm{font-size:12px}
.fw-bold{font-weight:700}
.w-full{width:100%}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  :root{ --player-h: 64px; } /* compact mini player through the whole mobile/tablet range */
  .sidebar{position:fixed;left:-260px;top:0;bottom:var(--player-h);height:auto;transition:left 0.3s ease;z-index:940}
  .sidebar.open{left:0}
  .hamburger{display:flex}
  .player-left{width:auto;flex:1}
  /* player-right hidden on mobile EXCEPT when the Get App button is showing */
  .player-right{display:none}
  .player-right:has(#playerInstallBtn:not(.hidden)){display:flex;align-items:center}
  /* On mobile the Get App button shows as compact icon-only */
  .player-install-btn span{display:none}
  .player-install-btn{padding:8px 10px;border-radius:50%}
  /* Hide the other player-right controls when Get App is visible on mobile */
  .player-right:has(#playerInstallBtn:not(.hidden)) > :not(#playerInstallBtn){display:none}
  .songs-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}

  /* Dim backdrop so tapping outside the drawer closes it — this was
     previously only styled under max-width:768px, leaving 769–900px
     with an inert, invisible, non-clickable overlay div and no way to
     dismiss the sidebar except an exact re-tap of the hamburger. */
  .sidebar-overlay{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,0.5);z-index:899;
  }
  .sidebar.open ~ .sidebar-overlay,
  .sidebar-overlay.active{ display:block; }
}
@media(max-width:600px){
  .hero h1{font-size:28px}
  .section{padding:20px}
  .player{padding:0 12px;gap:12px}
  .player-center{max-width:none}
}

/* ============================================================
   MOBILE-FIRST RESPONSIVE OVERHAUL
   Target: smartphones 320px–480px, tablets 481px–768px
   ============================================================ */

/* ── Shared touch improvements ─────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --player-h: 64px;   /* compact player bar on mobile */
    --sidebar-w: 280px;
  }

  body { font-size: 13px; }

  /* Sidebar overlay */
  .sidebar {
    position: fixed;
    left: -290px;
    top: 0; bottom: var(--player-h);
    z-index: 900;
    transition: left 0.28s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  .sidebar.open { left: 0; }

  /* Dim overlay when sidebar open */
  .sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 899;
  }
  .sidebar.open ~ .sidebar-overlay,
  .sidebar-overlay.active { display: block; }

  .hamburger { display: flex; font-size: 22px; }

  /* Topbar */
  .topbar { padding: 10px 10px; gap: 8px; }
  .topbar-left { flex: 1; min-width: 0; }
  .topbar-right { flex-shrink: 0; }
  .search-bar { max-width: none; padding: 8px 12px; }
  .search-bar input { font-size: 13px; }

  /* Auth buttons — always visible, compact on mobile */
  .auth-buttons {
    display: flex !important;
    gap: 6px;
    flex-shrink: 0;
  }
  .auth-buttons #signInBtn {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    white-space: nowrap;
  }
  .auth-buttons #signUpBtn {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    white-space: nowrap;
  }

  #userNameDisplay { display: none; }
  .user-avatar-wrap { padding: 4px 8px; gap: 6px; }
  .user-avatar-wrap img { width: 30px; height: 30px; }
  .user-avatar-wrap .fa-chevron-down { display: none; }

  /* Page content */
  .content { padding-bottom: calc(var(--player-h) + 72px); }

  /* Sections */
  .section { padding: 18px 14px; }
  .section-title { font-size: 17px; }

  /* Hero */
  .hero { padding: 20px 14px 20px; }
  .hero h1 { font-size: 26px; line-height: 1.2; }
  .hero p { font-size: 14px; margin-bottom: 20px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { padding: 10px 18px; font-size: 13px; }
  .hero-stats { gap: 20px; margin-top: 20px; }
  .hero-stat .num { font-size: 20px; }
  .hero-carousel-dots { bottom: 8px; }

  /* Grids */
  .songs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .artists-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .albums-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .playlists-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Song rows */
  .song-row {
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    padding: 10px 10px;
  }
  .song-row-streams,
  .song-row-duration { display: none; }
  .song-row-actions { opacity: 1; }
  .song-row-actions button { opacity: 1; }

  /* Artist card */
  .artist-card { padding: 16px 10px; }
  .artist-card-avatar { width: 70px; height: 70px; font-size: 24px; }
  .artist-card-name { font-size: 13px; }

  /* Album card */
  .album-card-info { padding: 10px; }
  .album-card-title { font-size: 13px; }

  /* Profile header */
  .profile-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 16px;
    gap: 16px;
  }
  .profile-avatar { width: 90px; height: 90px; }
  .profile-info .name { font-size: 22px; }
  .profile-tabs { padding: 0 14px; overflow-x: auto; white-space: nowrap; gap: 0; }
  .profile-tab { padding: 14px 16px; font-size: 13px; }
  .profile-tab-content { padding: 20px 14px; }

  /* Upload form */
  .upload-form { padding: 16px 14px; max-width: 100%; }

  /* Admin */
  .admin-tabs { padding: 0 14px; overflow-x: auto; }
  .admin-content { padding: 14px; }
  .data-table th, .data-table td { padding: 8px 10px; font-size: 11px; }

  /* Modals */
  .modal { padding: 24px 18px; border-radius: 16px 16px 0 0; margin: 0; max-height: 92vh; }
  .modal-overlay { align-items: flex-end; padding: 0; }

  /* Queue panel */
  .queue-panel {
    width: 100%;
    left: 0;
    right: 0;
    bottom: var(--player-h);
    max-height: 55vh;
    border-left: none;
    border-radius: 16px 16px 0 0;
  }

  /* Search dropdown */
  .search-dropdown {
    position: fixed;
    top: 60px;
    left: 8px;
    right: 8px;
    max-height: 70vh;
  }
}

/* ── FULL-SCREEN PLAYER on mobile/tablet ───────────────────── */
/* Mini bar stays at bottom; tap artwork to expand full-screen.
   Matches the sidebar's own 900/901 breakpoint (see the
   "@media(max-width:900px)" sidebar rule and the "@media(min-width:901px)"
   desktop-player-restore rule below) so there's no dead zone between
   769px and 900px where the fullscreen player has no positioning rules
   and the mini bar falls back to the cramped desktop layout. */
@media (max-width: 900px) {
  /* Mini player bar */
  .player {
    padding: 0 12px;
    gap: 10px;
    height: var(--player-h);
  }

  /* Hide center controls in mini bar */
  .player-center { display: none; }
  .player-right  { display: none; }
  .player-left   { width: 100%; justify-content: space-between; }
  .player-info   { flex: 1; min-width: 0; }

  /* Mini play/pause visible in left area */
  .player-left .play-pause {
    width: 38px; height: 38px;
    font-size: 15px !important;
    flex-shrink: 0;
  }

  /* Mini progress strip at very top of player */
  .player::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--bg-hover);
  }
  .player::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 2px;
    background: var(--accent);
    width: var(--mini-progress, 0%);
    transition: width 0.3s linear;
  }

  /* Tap zone to open full-screen player */
  .player-artwork { cursor: pointer; }

  /* FULL-SCREEN PLAYER */
  .player-fullscreen {
    position: fixed;
    inset: 0;
    background: #0d0d14;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: env(safe-area-inset-top, 20px) 24px 40px;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  }
  .player-fullscreen.open { transform: translateY(0); }

  .fs-drag-handle {
    width: 40px; height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin: 8px auto 20px;
  }

  .fs-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }
  .fs-header-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .fs-close-btn {
    color: var(--text-muted);
    font-size: 22px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
  }

  .fs-artwork {
    width: min(72vw, 300px);
    height: min(72vw, 300px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    margin-bottom: 32px;
    flex-shrink: 0;
  }
  .fs-artwork img {
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .fs-artwork.playing { animation: pulse-artwork 3s ease-in-out infinite; }
  @keyframes pulse-artwork {
    0%,100% { box-shadow: 0 24px 60px rgba(0,0,0,0.6); transform: scale(1); }
    50% { box-shadow: 0 28px 80px rgba(232,130,12,0.3); transform: scale(1.02); }
  }

  .fs-info {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }
  .fs-title-block { flex: 1; min-width: 0; }
  .fs-title {
    font-size: 22px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fs-artist {
    font-size: 15px;
    color: var(--text-secondary);
    margin-top: 4px;
  }
  .fs-like-btn {
    font-size: 24px;
    color: var(--text-muted);
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
  }
  .fs-like-btn.liked { color: var(--accent); }

  .fs-progress {
    width: 100%;
    margin-bottom: 8px;
  }
  .fs-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    margin-bottom: 8px;
  }
  .fs-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
  }
  .fs-progress-thumb {
    position: absolute;
    right: -7px; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }
  .fs-times {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
  }

  .fs-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 20px 0 16px;
  }
  .fs-btn {
    position: relative;
    color: var(--text-secondary);
    font-size: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s;
  }
  .fs-btn:active { transform: scale(0.9); }
  .fs-btn.active { color: var(--accent); }
  .fs-play-btn {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff !important;
    font-size: 28px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px var(--accent-glow);
    transition: transform 0.15s;
  }
  .fs-play-btn:active { transform: scale(0.94); }

  .fs-extras {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .fs-volume {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
  }
  .fs-volume-bar {
    flex: 1; height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    cursor: pointer;
  }
  .fs-volume-fill {
    height: 100%;
    background: var(--text-secondary);
    border-radius: 4px;
  }
  .fs-extra-btn {
    color: var(--text-muted);
    font-size: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
  }
}

/* ── Tablet adjustments ─────────────────────────────────────── */
@media (min-width: 481px) and (max-width: 768px) {
  .songs-grid { grid-template-columns: repeat(3, 1fr); }
  .artists-grid { grid-template-columns: repeat(3, 1fr); }
  .albums-grid { grid-template-columns: repeat(3, 1fr); }
  .hero h1 { font-size: 32px; }
}

/* ── Very small phones ──────────────────────────────────────── */
@media (max-width: 360px) {
  .songs-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .artists-grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 22px; }
  .section { padding: 14px 12px; }

  /* Shrink search bar to give more room to buttons */
  .search-bar { padding: 7px 10px; }
  .search-bar i { display: none; }
  .auth-buttons #signInBtn,
  .auth-buttons #signUpBtn { padding: 7px 10px; font-size: 11px; }
}

/* ── Desktop: keep original layout ─────────────────────────── */
@media (min-width: 901px) {
  .player-fullscreen { display: none !important; }
  .fs-drag-handle, .fs-header, .fs-artwork,
  .fs-info, .fs-progress, .fs-controls,
  .fs-extras { display: none; }

  /* Restore full desktop player */
  .player-center { display: flex; }
  .player-right  { display: flex; }
  .player-left   { width: 280px; }
}

/* ── Medium desktop (sidebar + player-left + player-right at full
   width don't leave enough room for player-center's controls — this
   was causing the transport buttons/progress bar to overlap or get
   squeezed between ~901px and ~1220px) ─────────────────────────── */
@media (min-width: 901px) and (max-width: 1220px) {
  .player { padding: 0 14px; gap: 10px; }
  .player-left { width: 190px; gap: 10px; }
  .player-artwork { width: 44px; height: 44px; }
  .player-right { width: auto; gap: 8px; }
  .volume-bar { display: none; }
  .player-center { max-width: 360px; }
  .player-controls { gap: 10px; }
}

/* ============================================================
   NOTIFICATIONS BANNER
   ============================================================ */
.notifications-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.notif-bar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 20px;
  font-size: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
.notif-bar.green  { background: rgba(16,185,129,0.18); border-left: 4px solid #10b981; }
.notif-bar.yellow { background: rgba(234,179,8,0.18);  border-left: 4px solid #eab308; }
.notif-bar.red    { background: rgba(239,68,68,0.18);  border-left: 4px solid #ef4444; }
.notif-bar-icon { font-size: 18px; flex-shrink:0; margin-top:1px; }
.notif-bar.green  .notif-bar-icon { color: #10b981; }
.notif-bar.yellow .notif-bar-icon { color: #eab308; }
.notif-bar.red    .notif-bar-icon { color: #ef4444; }
.notif-bar-body { flex:1; min-width:0; }
.notif-bar-title { font-weight:700; margin-bottom:2px; }
.notif-bar-msg   { color: var(--text-secondary); font-size:13px; line-height:1.5; }
.notif-bar-close {
  background:none; border:none; cursor:pointer;
  color: var(--text-muted); font-size:18px; padding:2px 4px;
  flex-shrink:0; transition: color var(--transition);
}
.notif-bar-close:hover { color: var(--text-primary); }

/* ============================================================
   HELP FAB + MODAL
   ============================================================ */
.help-fab {
  position: fixed;
  bottom: calc(var(--player-h) + 20px);
  right: 20px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  border: none; cursor: pointer;
  box-shadow: 0 4px 20px var(--accent-glow);
  z-index: 990;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.help-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px var(--accent-glow);
}
.help-options { display: flex; flex-direction: column; gap: 8px; }
.help-option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition);
}
.help-option:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
  transform: translateX(4px);
}
.help-option-icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.help-option-info { flex:1; min-width:0; }
.help-option-label { font-size:13px; color: var(--text-muted); }
.help-option-value { font-size:14px; font-weight:600; }
.help-option-arrow { color: var(--text-muted); font-size: 12px; }

/* ============================================================
   ARTIST BIOGRAPHY SECTION
   ============================================================ */
.artist-bio-section {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 24px;
  margin: 0 32px 24px;
  border: 1px solid var(--border);
  line-height: 1.8;
  color: var(--text-secondary);
  font-size: 14px;
  white-space: pre-line;
}
.artist-bio-section h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.artist-bio-section h4 i { color: var(--accent); }
.bio-stats-row {
  display: flex; gap: 24px; flex-wrap: wrap;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--border);
}
.bio-stat { text-align: center; }
.bio-stat .val { font-size: 22px; font-weight: 800; color: var(--accent); }
.bio-stat .lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

.artist-stats-row {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 18px 24px; margin: 0 0 20px;
  background: var(--bg-card); border-radius: var(--radius);
  border: 1px solid var(--border);
}
.artist-stat { text-align: center; flex: 1; min-width: 80px; }
.artist-stat .val { font-size: 22px; font-weight: 800; color: var(--accent); }
.artist-stat .lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
@media (max-width: 600px) {
  .artist-stats-row { gap: 10px; padding: 14px 16px; }
  .artist-stat .val { font-size: 17px; }
  .artist-stat .lbl { font-size: 9px; }
}

/* Biography edit textarea */
.bio-edit-wrap { position: relative; }
.bio-char-count {
  position: absolute; bottom: 10px; right: 12px;
  font-size: 11px; color: var(--text-muted);
}

/* ============================================================
   ADMIN NOTIFICATION MANAGER
   ============================================================ */
.notif-admin-card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 16px;
  border: 1px solid var(--border);
  margin-bottom: 10px;
  display: flex; align-items: flex-start; gap: 12px;
}
.notif-admin-card .color-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink:0; margin-top:4px;
}
.notif-admin-card .color-dot.green  { background: #10b981; }
.notif-admin-card .color-dot.yellow { background: #eab308; }
.notif-admin-card .color-dot.red    { background: #ef4444; }
.notif-admin-card-body { flex:1; min-width:0; }
.notif-admin-card-title { font-weight:700; font-size:14px; }
.notif-admin-card-meta  { font-size:12px; color:var(--text-muted); margin-top:4px; }
.notif-admin-card-msg   { font-size:13px; color:var(--text-secondary); margin-top:6px; }
.color-selector { display:flex; gap:10px; margin-top:8px; }
.color-opt {
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  border:3px solid transparent; transition:all var(--transition);
}
.color-opt:hover, .color-opt.selected { border-color:#fff; transform:scale(1.15); }
.color-opt.green  { background:#10b981; }
.color-opt.yellow { background:#eab308; }
.color-opt.red    { background:#ef4444; }

@media (max-width: 768px) {
  .help-fab { bottom: calc(var(--player-h) + 14px); right: 14px; }
  .artist-bio-section { margin: 0 14px 16px; padding: 18px 14px; }
  .bio-stats-row { gap: 16px; }
}

/* ============================================================
   NOTIFICATION BADGE on sidebar
   ============================================================ */
.notif-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  animation: badge-pop 0.3s ease;
}
@keyframes badge-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
#navNotifLink.has-notifs { color: var(--accent) !important; }
#navNotifLink.has-notifs i { color: var(--accent); }

/* ============================================================
   NOTIFICATIONS PAGE
   ============================================================ */
.notif-page-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 10px;
  transition: all var(--transition);
}
.notif-page-item.unread { border-left: 4px solid var(--accent); }
.notif-page-item.green  { border-left-color: #10b981; }
.notif-page-item.yellow { border-left-color: #eab308; }
.notif-page-item.red    { border-left-color: #ef4444; }
.notif-page-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.notif-page-item.green  .notif-page-icon { color: #10b981; }
.notif-page-item.yellow .notif-page-icon { color: #eab308; }
.notif-page-item.red    .notif-page-icon { color: #ef4444; }
.notif-page-body { flex: 1; min-width: 0; }
.notif-page-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.notif-page-msg   { color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.notif-page-meta  { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.notif-dismiss-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 16px; padding: 4px;
  flex-shrink: 0; transition: color var(--transition);
}
.notif-dismiss-btn:hover { color: var(--red); }

/* ============================================================
   SHARE MODAL
   ============================================================ */
.share-link-box {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.share-link-box input { flex: 1; }
.share-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  border: none;
}
.share-btn.whatsapp  { background: #25D36620; color: #25D366; border: 1px solid #25D36640; }
.share-btn.facebook  { background: #1877F220; color: #1877F2; border: 1px solid #1877F240; }
.share-btn.twitter   { background: #1DA1F220; color: #1DA1F2; border: 1px solid #1DA1F240; }
.share-btn.native    { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border); }
.share-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* ============================================================
   DONATION MODAL
   ============================================================ */
.donation-preset.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ============================================================
   TERMS MODAL
   ============================================================ */
.terms-body {
  max-height: 320px;
  overflow-y: auto;
  padding: 16px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.terms-body p { margin-bottom: 12px; }
.terms-body strong { color: var(--text-primary); }
#termsCheckbox:checked + span { color: var(--accent); }

/* ============================================================
   SUBSCRIPTION PLANS (updated)
   ============================================================ */
.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.plan-tile {
  padding: 18px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.plan-tile:hover, .plan-tile.selected {
  border-color: var(--accent);
  background: var(--accent-glow);
}
.plan-tile-icon { font-size: 28px; margin-bottom: 8px; }
.plan-tile-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.plan-tile-price { font-size: 20px; font-weight: 800; color: var(--accent); }
.plan-tile-period { font-size: 11px; color: var(--text-muted); }
.plan-tile-features {
  list-style: none;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 10px;
  text-align: left;
}
.plan-tile-features li::before { content: '✓ '; color: var(--green); }
.plan-tile-features li { margin-bottom: 3px; }

/* ===== POINTS REWARD CATALOG (Wallet & Rewards page) ===== */
.reward-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:8px;
}
.reward-card{
  background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:18px;text-align:center;transition:border-color var(--transition);
}
.reward-card:not(.reward-card-disabled):hover{border-color:var(--accent)}
.reward-card-disabled{opacity:0.55}
.reward-card-points{font-size:22px;font-weight:800;color:#EC4899;margin-bottom:4px}
.reward-card-label{font-size:13px;color:var(--text-secondary);min-height:34px}

@media (max-width: 600px){
  .reward-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .reward-card{padding:14px}
  #withdrawForm{grid-template-columns:1fr !important}
}

/* ===== FAQ ACCORDION ===== */
.faq-item{
  background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius);
  margin-bottom:10px;overflow:hidden;
}
.faq-question{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:transparent;border:none;color:var(--text-primary);font-size:14px;font-weight:600;
  text-align:left;padding:16px 18px;cursor:pointer;
}
.faq-question:hover{color:var(--accent)}
.faq-chevron{transition:transform var(--transition);color:var(--text-muted);flex-shrink:0}
.faq-question-open .faq-chevron{transform:rotate(180deg)}
.faq-answer{padding:0 18px 16px;color:var(--text-secondary);font-size:13px;line-height:1.7}
@media (max-width: 600px){
  .faq-question{padding:14px;font-size:13px}
}

@media (max-width: 400px) {
  .plan-grid { grid-template-columns: 1fr; }
  .share-options { grid-template-columns: 1fr; }
}

/* ============================================================
   TOPBAR v2 — Two-row layout (works on all screen sizes)
   ============================================================ */

/* Override the old single-row topbar completely */
.topbar {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  background: var(--bg-secondary);
  position: relative;
  z-index: 950; /* above the sidebar (940) and its dim backdrop (899) so the
                   hamburger button is never visually/functionally covered
                   while the drawer is open, at any screen width */
  flex-shrink: 0;
}

/* Row 1: hamburger + brand + auth — hamburger/logo/title always left,
   account/auth always right, flexible middle in between at any width. */
.topbar-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  min-height: 52px;
  width: 100%;
}

/* Left cluster: hamburger + logo/title always stay together */
.topbar-left-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
}

/* Small brand text (visible on mobile, hidden on desktop where sidebar has logo) */
.topbar-brand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-brand span { color: var(--accent); }

/* Auth buttons — always on row 1, always the right-side cluster */
.topbar-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.auth-buttons {
  display: flex !important;
  gap: 8px;
  flex-shrink: 0;
}
.auth-buttons #signInBtn,
.auth-buttons #signUpBtn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 22px;
  white-space: nowrap;
}

/* Row 2: search bar — always full width */
.topbar-row2 {
  padding: 0 16px 10px;
}
.topbar-row2 .search-bar {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 10px 16px;
  border-radius: 24px;
}

/* Hide old topbar-left / topbar-right layout helpers */
.topbar-left, .topbar-right { display: none !important; }

/* User avatar — compact, no name text on mobile */
.user-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 22px;
  cursor: pointer;
  transition: background var(--transition);
}
.user-avatar-wrap:hover { background: var(--bg-hover); }
.user-avatar-wrap img {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
  flex-shrink: 0;
}

/* On desktop: show brand only in sidebar, hide it in topbar row1.
   NOTE: this must match the sidebar's own breakpoint (900px, see the
   "@media(max-width:900px)" rule above that pins the sidebar off-canvas) —
   otherwise there's a dead zone where the sidebar is hidden AND the
   hamburger that opens it is also hidden, with no way to access it. */
@media (min-width: 901px) {
  .topbar-brand { display: none; }
  .hamburger    { display: none; }
  .topbar-row1  { padding: 12px 24px; }
  .topbar-row2  { padding: 0 24px 12px; }
  .topbar-row2 .search-bar { max-width: 520px; }
  #userNameDisplay { display: inline; }
}

/* ============================================================
   SONG ACTIONS — 3-dot context menu (replaces scattered icons)
   ============================================================ */
.song-actions-menu {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.song-actions-trigger {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all var(--transition);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.song-actions-trigger:hover { color: var(--text-primary); background: var(--bg-hover); }

.song-actions-dropdown {
  position: fixed;   /* fixed so it's never clipped by overflow:hidden parents */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 5000;
  overflow: hidden;
}
.song-action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.song-action-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.song-action-item i { width: 18px; text-align: center; }
.song-action-item.download { color: var(--green); }
.song-action-item.download:hover { background: rgba(16,185,129,0.1); }
.song-action-item.share-btn-item { color: var(--accent); }
.song-action-item.share-btn-item:hover { background: var(--accent-glow); }

/* Song row — leave room for the 3-dot menu without cramping title */
.song-row {
  grid-template-columns: 28px 1fr auto;
}
.song-row-info { min-width: 0; }

/* Ensure .hidden always wins regardless of other display rules */
.hidden { display: none !important; }

/* Song row grid — 3 columns: number | info | actions */
.song-row {
  grid-template-columns: 28px 1fr auto !important;
}
/* Hide duration/streams columns (they were in the old 5-col grid) */
.song-row-duration,
.song-row-streams { display: none !important; }

/* Song row actions always visible (not opacity:0 anymore) */
.song-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.song-row-actions button,
.song-row-actions .song-actions-menu {
  opacity: 1 !important;
}
.song-row-actions .like-btn-song {
  color: var(--text-muted);
  font-size: 16px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition);
}
.song-row-actions .like-btn-song:hover,
.song-row-actions .like-btn-song.liked { color: var(--accent); }
.song-row-actions .song-remove-btn {
  color: var(--text-muted); font-size: 15px; padding: 6px;
  background: none; border: none; cursor: pointer; transition: color var(--transition);
}
.song-row-actions .song-remove-btn:hover { color: var(--red); }

/* Song card actions */
.song-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.song-card-actions .like-btn-song {
  color: var(--text-muted);
  font-size: 15px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  transition: color var(--transition);
}
.song-card-actions .like-btn-song:hover,
.song-card-actions .like-btn-song.liked { color: var(--accent); }

/* ============================================================
   LIGHT MODE SPECIFIC OVERRIDES
   ============================================================ */

/* Hero section */
body:not(.dark-mode) .hero {
  background: #fdf3e3;
}
body:not(.dark-mode) .hero::before {
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23e8820c' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Sidebar */
body:not(.dark-mode) .sidebar {
  background: #ffffff;
  border-right: 1px solid rgba(0,0,0,0.08);
  box-shadow: 2px 0 12px rgba(0,0,0,0.06);
}
body:not(.dark-mode) .logo-icon {
  box-shadow: 0 4px 16px rgba(232,130,12,0.3);
}
body:not(.dark-mode) .nav-link { color: #5c4a2a; }
body:not(.dark-mode) .nav-link:hover { background: #fdf3e3; color: #1a1208; }
body:not(.dark-mode) .nav-link.active { background: rgba(232,130,12,0.1); color: var(--accent); }

/* Topbar */
body:not(.dark-mode) .topbar { box-shadow: 0 1px 8px rgba(0,0,0,0.07); }

/* Search bar */
body:not(.dark-mode) .search-bar {
  background: #f5f3ee;
  border-color: rgba(0,0,0,0.12);
}
body:not(.dark-mode) .search-bar:focus-within { border-color: var(--accent); }

/* Cards */
body:not(.dark-mode) .song-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
body:not(.dark-mode) .artist-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
body:not(.dark-mode) .album-card:hover  { box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
body:not(.dark-mode) .stat-card { border-color: rgba(0,0,0,0.08); }

/* Player */
body:not(.dark-mode) .player {
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
}
body:not(.dark-mode) .player-title  { color: #1a1208; }
body:not(.dark-mode) .player-artist { color: #5c4a2a; }
body:not(.dark-mode) .progress-bar  { background: #e8e0d4; }
body:not(.dark-mode) .volume-bar    { background: #e8e0d4; }

/* Fullscreen player */
body:not(.dark-mode) .player-fullscreen {
  background: #f5f3ee;
}
body:not(.dark-mode) .fs-title  { color: #1a1208; }
body:not(.dark-mode) .fs-artist { color: #5c4a2a; }
body:not(.dark-mode) .fs-progress-bar,
body:not(.dark-mode) .fs-volume-bar { background: rgba(0,0,0,0.12); }

/* Modals */
body:not(.dark-mode) .modal {
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
body:not(.dark-mode) .modal-overlay { background: rgba(0,0,0,0.5); }
body:not(.dark-mode) .user-dropdown { background: #ffffff; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
body:not(.dark-mode) .search-dropdown { background: #ffffff; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }

/* Inputs */
body:not(.dark-mode) .form-group input,
body:not(.dark-mode) .form-group select,
body:not(.dark-mode) .form-group textarea {
  background: #f5f3ee;
  border-color: rgba(0,0,0,0.15);
  color: #1a1208;
}
body:not(.dark-mode) .form-group input::placeholder { color: #9c8866; }

/* Profile header */
body:not(.dark-mode) .profile-header {
  background: #fdf0e0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Queue panel */
body:not(.dark-mode) .queue-panel {
  background: #ffffff;
  border-color: rgba(0,0,0,0.10);
}

/* Context menu */
body:not(.dark-mode) .song-actions-dropdown {
  background: #ffffff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
body:not(.dark-mode) .song-action-item:hover { background: #f5f3ee; }

/* Notification bars */
body:not(.dark-mode) .notif-bar.green  { background: rgba(5,150,105,0.08); }
body:not(.dark-mode) .notif-bar.yellow { background: rgba(217,119,6,0.08); }
body:not(.dark-mode) .notif-bar.red    { background: rgba(220,38,38,0.08); }

/* Scrollbar */
body:not(.dark-mode) ::-webkit-scrollbar-thumb { background: #c8bfaf; }

/* Data table */
body:not(.dark-mode) .data-table th { color: #5c4a2a; }
body:not(.dark-mode) .data-table tr:hover td { background: #fdf3e3; }

/* Tribal border, warmer in light mode */
body:not(.dark-mode) .tribal-border {
  background: #c06a08;
}

/* ── Dark mode toggle button in settings ─────────────────────── */
.theme-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.theme-toggle-info { flex: 1; }
.theme-toggle-info .label { font-weight: 600; font-size: 15px; }
.theme-toggle-info .desc  { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.theme-toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}
.theme-toggle-switch input { opacity: 0; width: 0; height: 0; }
.theme-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-hover);
  border-radius: 28px;
  cursor: pointer;
  transition: background 0.3s;
  border: 1px solid var(--border);
}
.theme-toggle-slider::after {
  content: '☀️';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 2px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: transform 0.3s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.theme-toggle-switch input:checked + .theme-toggle-slider { background: #1a1a2e; }
.theme-toggle-switch input:checked + .theme-toggle-slider::after {
  transform: translateX(24px);
  content: '🌙';
}


/* ============================================================
   GENRE GROUPS — Regional/Style Browse Page
   ============================================================ */
.genre-group-block {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.genre-group-block:last-child { border-bottom: none; }

.genre-group-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.genre-group-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.genre-group-name {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}
.genre-group-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Genre/region/tribe tag chips — same rectangular, 4-colour-cycle
   family as .genre-pill above, but for pure navigation links (no
   "active" selection state). Default layout is a horizontally
   scrollable row with a soft edge fade; add .genre-tags-grid on the
   wrapper (used for the full Genres list) to switch to a wrapping,
   stretch-to-fill grid instead. */
.genre-tags-wrap {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 8px;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
}
.genre-tags-wrap::-webkit-scrollbar { display: none; }
.genre-tag:nth-child(4n+1) { --tag-c: var(--accent); }
.genre-tag:nth-child(4n+2) { --tag-c: var(--purple); }
.genre-tag:nth-child(4n+3) { --tag-c: var(--green); }
.genre-tag:nth-child(4n)   { --tag-c: var(--red); }
.genre-tag {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  color: #fff;
  background: var(--tag-c, var(--accent));
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  scroll-snap-align: start;
  animation: tagPopIn .4s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: min(calc(var(--i,0) * 0.035s), .4s);
}
.genre-tag:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.24);
}
.genre-tag:active { transform: translateY(0) scale(.96); }

/* Discover page — group label between pills */
.discover-pills {
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding-bottom: 8px;
}
.genre-group-pill-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 6px 0;
  width: 100%;
  margin-top: 8px;
  opacity: 0.8;
}
.genre-group-pill-label:first-child { margin-top: 0; }

/* ============================================================
   BROWSE TABS (Region/Tribe vs Genre)
   ============================================================ */
.browse-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.browse-tab {
  padding: 12px 20px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.browse-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.browse-tab:hover:not(.active) { color: var(--text-primary); }

.browse-panel { display: none; }
.browse-panel.active { display: block; }

/* Full Genres list (browse-genre panel) — wraps and STRETCHES to fill
   the row instead of scrolling, so longer names like "Dancehall / Reggae"
   or "Electronic / EDM" get the room they need on narrow screens rather
   than being cramped into a fixed-width pill. */
.genre-tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
  scroll-snap-type: none;
  padding: 2px 2px 8px;
}
.genre-tag-lg {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 20px;
  font-size: 14px;
  white-space: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}