/* ── fonts + vars live in themium.css ── */

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;overflow:hidden;}

/* ═══════════════════════════════════════
   APP GRID — DESKTOP
═══════════════════════════════════════ */
.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-rows:1fr var(--player-h);
  grid-template-areas:"sidebar main" "player player";
  height:100vh;
  overflow:hidden;
  transition:grid-template-rows .3s ease;
}
.app:has(.player-bar.hidden){
  grid-template-rows:1fr 0px;
}
.app.no-player{
  grid-template-rows:1fr 0px;
}

/* ═══════════════════════════════════════
   PLAYER BAR
═══════════════════════════════════════ */
.player-bar{
  grid-area:player;
  background:var(--surface);
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:260px 1fr 260px;
  align-items:center;
  padding:0 20px;
  gap:10px;
  height:var(--player-h);
  overflow:hidden;
  opacity:1;
  transition:opacity .25s ease;
}
.player-bar.hidden{
  opacity:0;
  pointer-events:none;
  border-top-color:transparent;
}

/* ═══════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════ */
.sidebar{grid-area:sidebar;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
.sidebar-logo-row{padding:18px 16px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
.sidebar-logo{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:3px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;flex:1;}
.sidebar-section-label{padding:12px 16px 6px;font-size:10px;font-weight:600;letter-spacing:2px;color:var(--muted);text-transform:uppercase;font-family:'Space Mono',monospace;display:flex;align-items:center;justify-content:space-between;}
.sidebar-section-label button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;transition:color .2s;}
.sidebar-section-label button:hover{color:var(--text);}
.sidebar-nav{display:flex;flex-direction:column;gap:2px;padding:8px 8px 0;}
.nav-btn{background:none;border:none;color:var(--muted);font-family:'Space Mono',monospace;font-size:12px;padding:8px 10px;border-radius:6px;cursor:pointer;text-align:left;display:flex;align-items:center;gap:8px;transition:all .2s;width:100%;}
.nav-btn:hover{background:var(--surface2);color:var(--text);}
.nav-btn.active{background:var(--surface3);color:var(--accent2);}
.sidebar-list{flex:1;overflow-y:auto;padding:4px 8px 8px;}
.sidebar-list::-webkit-scrollbar{width:3px;}
.sidebar-list::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:2px;}
.saved-item{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:7px;cursor:pointer;transition:background .15s;}
.saved-item:hover{background:var(--surface2);}
.saved-item.active{background:var(--surface3);}
.saved-item-art{width:38px;height:38px;border-radius:5px;object-fit:cover;background:var(--surface3);flex-shrink:0;}
.saved-item-art.playlist-icon{display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--accent2);}
.saved-item-info{min-width:0;}
.saved-item-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.saved-item-sub{font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Space Mono',monospace;}

/* ═══════════════════════════════════════
   TOPBAR
═══════════════════════════════════════ */
.topbar{display:flex;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.topbar-back,.topbar-fwd{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.topbar-back:hover,.topbar-fwd:hover{background:var(--surface2);color:var(--text);}
.search-wrap{flex:1;display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:6px 14px;max-width:400px;}
.search-wrap input{background:transparent;border:none;outline:none;color:var(--text);font-size:13px;font-family:'Space Mono',monospace;width:100%;}
.search-wrap input::placeholder{color:var(--muted);}
.search-wrap i{color:var(--muted);font-size:12px;}
.topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto;}
.pfp-btn{width:34px;height:34px;border-radius:50%;background:var(--surface3);border:2px solid var(--border);cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;transition:all .2s;flex-shrink:0;}
.pfp-btn:hover{border-color:var(--accent2);}
.pfp-btn img{width:100%;height:100%;object-fit:cover;}
.topbar-btn{background:none;border:1px solid var(--border);color:var(--muted);font-family:'Space Mono',monospace;font-size:11px;padding:5px 12px;border-radius:20px;cursor:pointer;transition:all .2s;}
.topbar-btn:hover{background:var(--surface2);color:var(--text);}
.topbar-btn.primary{background:var(--text);color:var(--bg);border-color:var(--text);}
.topbar-btn.primary:hover{background:#ddd;}

/* ═══════════════════════════════════════
   MAIN + VIEWS
═══════════════════════════════════════ */
.main{
  grid-area:main;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
}
.view{flex:1;overflow-y:auto;display:none;min-height:0;}
.view.active{display:flex;flex-direction:column;}
.view::-webkit-scrollbar{width:4px;}
.view::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:2px;}

/* ═══════════════════════════════════════
   PODIUM
═══════════════════════════════════════ */
.podium-section{padding:20px 24px 10px;background:linear-gradient(180deg,rgba(255,215,0,.06) 0%,transparent 100%);border-bottom:1px solid var(--border);margin-bottom:6px;}
.podium-title{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:3px;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.podium-title i{font-size:16px;}
.podium-row{display:flex;gap:12px;align-items:flex-end;}
.podium-card{flex:1;border-radius:10px;padding:14px 12px;position:relative;text-align:center;transition:transform .2s;}
.podium-card:hover{transform:translateY(-3px);}
.podium-card.gold{background:linear-gradient(135deg,rgba(255,215,0,.15),rgba(255,215,0,.05));border:1px solid rgba(255,215,0,.3);}
.podium-card.silver{background:linear-gradient(135deg,rgba(192,192,192,.12),rgba(192,192,192,.04));border:1px solid rgba(192,192,192,.2);}
.podium-card.bronze{background:linear-gradient(135deg,rgba(205,127,50,.12),rgba(205,127,50,.04));border:1px solid rgba(205,127,50,.2);}
.podium-medal{font-size:22px;margin-bottom:6px;display:block;}
.podium-rank{font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:2px;color:var(--muted);margin-bottom:4px;}
.podium-track{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.podium-artist{font-size:10px;color:var(--muted);font-family:'Space Mono',monospace;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.podium-score{font-family:'Bebas Neue',sans-serif;font-size:20px;margin-top:6px;}
.podium-card.gold .podium-score{color:var(--gold);}
.podium-card.silver .podium-score{color:var(--silver);}
.podium-card.bronze .podium-score{color:var(--bronze);}
.podium-loading{color:var(--muted);font-family:'Space Mono',monospace;font-size:11px;padding:20px;text-align:center;}
.podium-cover-wrapper{width:80px;height:80px;margin:0 auto 10px;border-radius:8px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.4);}
.podium-cover{width:100%;height:100%;object-fit:cover;display:block;}
.podium-card.gold .podium-cover-wrapper{transform:scale(1.1);box-shadow:0 0 25px rgba(255,215,0,0.4);}

/* ═══════════════════════════════════════
   DISCOVERY HERO
═══════════════════════════════════════ */
.discovery-hero{padding:20px 24px 10px;background:linear-gradient(180deg,rgba(255,0,0,.08) 0%,transparent 100%);}
.discovery-hero h1{font-family:'Bebas Neue',sans-serif;font-size:38px;letter-spacing:3px;line-height:1;}
.discovery-hero p{color:var(--muted);font-size:13px;margin-top:6px;font-family:'Space Mono',monospace;}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2px;padding:16px 24px 10px;display:flex;align-items:center;justify-content:space-between;}
.section-title-left{display:flex;align-items:center;gap:8px;}
.see-all-btn{font-family:'Space Mono',monospace;font-size:11px;color:var(--accent2);background:none;border:1px solid rgba(0,229,255,.3);padding:4px 12px;border-radius:14px;cursor:pointer;transition:all .2s;flex-shrink:0;}
.see-all-btn:hover{background:rgba(0,229,255,.1);}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;padding:0 24px 20px;}
.album-card{background:transparent;border-radius:10px;padding:0 0 8px 0;cursor:pointer;transition:opacity .2s;position:relative;}
.album-card:hover{opacity:.78;}
.album-card:hover .album-card-art{transform:scale(1.03);}
.album-card-art{width:100%;aspect-ratio:1;border-radius:8px;object-fit:cover;background:var(--surface3);display:block;margin-bottom:8px;transition:transform .2s;}
.album-card-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.album-card-sub{font-size:11px;color:var(--muted);margin-top:3px;font-family:'Space Mono',monospace;}

/* ═══════════════════════════════════════
   TOP 100
═══════════════════════════════════════ */
.top100-section{padding:0 24px 20px;}
.top100-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.top100-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.top100-card-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 8px;border-bottom:1px solid var(--border);}
.top100-card-title{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:2px;display:flex;align-items:center;gap:6px;}
.top100-card-title i{font-size:13px;}
.top100-list{padding:6px 0;}
.top100-row{display:flex;align-items:center;gap:10px;padding:7px 14px;transition:background .15s;cursor:pointer;}
.top100-row:hover{background:var(--surface2);}
.top100-num{font-family:'Bebas Neue',sans-serif;font-size:16px;color:var(--muted);width:20px;text-align:center;flex-shrink:0;}
.top100-num.top1{color:var(--gold);}
.top100-num.top2{color:var(--silver);}
.top100-num.top3{color:var(--bronze);}
.top100-art{width:34px;height:34px;border-radius:4px;object-fit:cover;background:var(--surface3);flex-shrink:0;}
.top100-info{flex:1;min-width:0;}
.top100-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.top100-sub{font-size:10px;color:var(--muted);font-family:'Space Mono',monospace;margin-top:1px;}
.top100-val{font-family:'Space Mono',monospace;font-size:10px;color:var(--accent2);flex-shrink:0;}

/* ═══════════════════════════════════════
   FULL STATS OVERLAY
═══════════════════════════════════════ */
.fullstats-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1000;display:none;flex-direction:column;backdrop-filter:blur(6px);}
.fullstats-overlay.open{display:flex;}
.fullstats-inner{max-width:900px;width:100%;margin:0 auto;height:100%;display:flex;flex-direction:column;padding:20px;}
.fullstats-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-shrink:0;}
.fullstats-title{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:3px;}
.fullstats-close{background:none;border:1px solid var(--border);color:var(--muted);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.fullstats-close:hover{color:var(--text);border-color:var(--text);}
.fullstats-tabs{display:flex;gap:4px;margin-bottom:14px;flex-shrink:0;flex-wrap:wrap;}
.fstab{background:none;border:1px solid var(--border);color:var(--muted);font-family:'Space Mono',monospace;font-size:11px;padding:6px 14px;border-radius:20px;cursor:pointer;transition:all .2s;}
.fstab.active{background:var(--accent2);color:var(--bg);border-color:var(--accent2);}
.fullstats-body{flex:1;overflow-y:auto;padding-right:4px;}
.fullstats-body::-webkit-scrollbar{width:3px;}
.fullstats-body::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:2px;}
.fs-podium{margin-bottom:20px;}
.fs-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(255,255,255,.04);}
.fs-row:hover{background:var(--surface2);}
.fs-rank{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--muted);width:30px;text-align:center;flex-shrink:0;}
.fs-rank.r1{color:var(--gold);}
.fs-rank.r2{color:var(--silver);}
.fs-rank.r3{color:var(--bronze);}
.fs-art{width:44px;height:44px;border-radius:6px;object-fit:cover;background:var(--surface3);}
.fs-info{flex:1;min-width:0;}
.fs-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fs-sub{font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;margin-top:2px;}
.fs-val{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--accent2);}
.fs-loading{text-align:center;padding:40px;color:var(--muted);font-family:'Space Mono',monospace;font-size:12px;}
.fs-empty{text-align:center;padding:40px;color:var(--muted);font-family:'Space Mono',monospace;font-size:12px;}

/* ═══════════════════════════════════════
   ALBUM HERO
═══════════════════════════════════════ */
.album-hero{display:flex;align-items:flex-end;gap:20px;padding:28px 24px 20px;background:linear-gradient(180deg,rgba(255,0,0,.1) 0%,transparent 100%);}
.album-hero-art{width:180px;height:180px;border-radius:10px;object-fit:cover;background:var(--surface3);flex-shrink:0;box-shadow:0 8px 32px rgba(0,0,0,.5);}
.album-hero-art.hidden{display:none;}
.album-hero-label{font-size:10px;font-family:'Space Mono',monospace;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;}
.album-hero-title{font-family:'Bebas Neue',sans-serif;font-size:40px;letter-spacing:2px;line-height:1.1;}
.album-hero-artist{font-size:13px;color:var(--muted);margin-top:6px;font-family:'Space Mono',monospace;cursor:pointer;transition:color .2s;}
.album-hero-artist:hover{color:var(--accent2);}
.album-hero-meta{font-size:11px;color:var(--muted);margin-top:4px;}
.album-actions{display:flex;gap:10px;margin-top:14px;align-items:center;flex-wrap:wrap;}
.btn-play-all{background:var(--accent2);color:var(--bg);border:none;border-radius:50%;width:48px;height:48px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
.btn-play-all:hover{transform:scale(1.08);background:#1af0ff;}
.btn-save{background:none;border:1px solid var(--border);color:var(--muted);padding:8px 16px;border-radius:20px;font-family:'Space Mono',monospace;font-size:11px;cursor:pointer;transition:all .2s;}
.btn-save:hover,.btn-save.saved{color:var(--accent2);border-color:var(--accent2);}
.btn-download{background:none;border:1px solid var(--border);color:var(--muted);padding:8px 16px;border-radius:20px;font-family:'Space Mono',monospace;font-size:11px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px;}
.btn-download:hover{color:#51cf66;border-color:#51cf66;}
.btn-download.downloaded{color:#51cf66;border-color:#51cf66;}

/* ═══════════════════════════════════════
   TRACKLIST
═══════════════════════════════════════ */
.tracklist-wrap{padding:0 16px 20px;}
.tracklist-header{display:grid;grid-template-columns:36px 1fr 80px 40px;padding:6px 12px;border-bottom:1px solid var(--border);margin-bottom:4px;}
.tracklist-header span{font-size:10px;color:var(--muted);font-family:'Space Mono',monospace;letter-spacing:1px;}
.tracklist-header span:nth-child(3){text-align:right;}
.track-row{display:grid;grid-template-columns:36px 1fr 80px 40px;align-items:center;padding:8px 12px;border-radius:6px;cursor:pointer;transition:background .15s;gap:4px;}
.track-row:hover{background:var(--surface2);}
.track-row.playing .track-num-text{display:none;}
.track-row.playing .track-num-icon{display:block!important;color:var(--accent2);animation:pulse 1.2s infinite;}
.track-row.playing .track-name-cell{color:var(--accent2);}
.track-row.unavailable{opacity:.3;cursor:default;}
.track-row.unavailable:hover{background:transparent;}
.track-num{font-size:12px;color:var(--muted);font-family:'Space Mono',monospace;text-align:center;}
.track-num-icon{display:none;font-size:11px;}
.track-name-cell{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.track-dur{font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;text-align:right;}
.track-menu-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;width:28px;height:28px;border-radius:50%;display:none;align-items:center;justify-content:center;transition:all .2s;}
.track-row:hover .track-menu-btn{display:flex;}
.track-menu-btn:hover{background:var(--surface3);color:var(--text);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ═══════════════════════════════════════
   ARTIST
═══════════════════════════════════════ */
.artist-pfp{width:140px;height:140px;border-radius:50%;object-fit:cover;background:var(--surface3);flex-shrink:0;box-shadow:0 8px 32px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;font-size:56px;overflow:hidden;}
.artist-pfp img{width:100%;height:100%;object-fit:cover;}
.btn-follow{background:none;border:2px solid var(--text);color:var(--text);padding:8px 24px;border-radius:20px;font-family:'Space Mono',monospace;font-size:12px;cursor:pointer;transition:all .2s;}
.btn-follow:hover,.btn-follow.following{background:var(--text);color:var(--bg);}

/* ═══════════════════════════════════════
   SEARCH
═══════════════════════════════════════ */
.search-results{padding:16px 24px;}
.results-section{margin-bottom:24px;}
.results-section h3{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;margin-bottom:10px;}
.user-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .15s;max-width:340px;}
.user-card:hover{background:var(--surface2);}
.user-card-pfp{width:46px;height:46px;border-radius:50%;background:var(--surface3);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.user-card-pfp img{width:100%;height:100%;object-fit:cover;}
.user-card-name{font-size:14px;font-weight:500;}
.user-card-sub{font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;margin-top:2px;}
.result-track-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:6px;cursor:pointer;transition:background .15s;}
.result-track-row:hover{background:var(--surface2);}
.result-track-art{width:40px;height:40px;border-radius:5px;object-fit:cover;background:var(--surface3);}
.result-track-name{font-size:13px;font-weight:500;}
.result-track-album{font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;}

/* ═══════════════════════════════════════
   PROFILE
═══════════════════════════════════════ */
.profile-hero{padding:32px 24px 20px;display:flex;align-items:flex-end;gap:20px;}
.profile-avatar{width:120px;height:120px;border-radius:50%;background:var(--surface3);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:48px;flex-shrink:0;cursor:pointer;position:relative;border:3px solid var(--border);transition:border-color .2s;}
.profile-avatar:hover{border-color:var(--accent2);}
.profile-avatar img{width:100%;height:100%;object-fit:cover;}
.profile-avatar-edit{position:absolute;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;font-size:20px;color:#fff;border-radius:50%;}
.profile-avatar:hover .profile-avatar-edit{display:flex;}
.profile-displayname{font-family:'Bebas Neue',sans-serif;font-size:40px;letter-spacing:2px;}
.profile-username{font-size:12px;color:var(--muted);font-family:'Space Mono',monospace;margin-top:2px;}
.profile-id{font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;}
.profile-stats{display:flex;gap:20px;margin-top:10px;}
.profile-stat{text-align:center;}
.profile-stat-num{font-family:'Bebas Neue',sans-serif;font-size:22px;}
.profile-stat-label{font-size:10px;color:var(--muted);font-family:'Space Mono',monospace;letter-spacing:1px;}
.profile-actions{display:flex;gap:8px;margin-top:14px;}
.profile-section{padding:0 24px 20px;}
.profile-section h3{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;margin-bottom:10px;}
.playlist-card{display:inline-flex;flex-direction:column;width:150px;background:var(--surface2);border-radius:10px;padding:12px;cursor:pointer;transition:all .2s;margin-right:12px;margin-bottom:12px;vertical-align:top;}
.playlist-card:hover{background:var(--surface3);}
.playlist-card-icon{width:100%;aspect-ratio:1;background:linear-gradient(135deg,var(--surface3),var(--surface));border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--accent2);margin-bottom:8px;}
.playlist-card-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.playlist-card-count{font-size:10px;color:var(--muted);font-family:'Space Mono',monospace;margin-top:2px;}

/* ═══════════════════════════════════════
   PLAYLIST
═══════════════════════════════════════ */
.playlist-hero{display:flex;align-items:flex-end;gap:20px;padding:28px 24px 20px;background:linear-gradient(180deg,rgba(0,229,255,.08) 0%,transparent 100%);}
.playlist-hero-icon{width:160px;height:160px;border-radius:10px;background:linear-gradient(135deg,var(--surface2),var(--surface3));display:flex;align-items:center;justify-content:center;font-size:60px;color:var(--accent2);flex-shrink:0;box-shadow:0 8px 32px rgba(0,0,0,.5);}
.playlist-hero-name{font-family:'Bebas Neue',sans-serif;font-size:40px;letter-spacing:2px;line-height:1.1;}
.playlist-hero-owner{font-size:12px;color:var(--muted);font-family:'Space Mono',monospace;margin-top:6px;}
.playlist-hero-count{font-size:11px;color:var(--muted);margin-top:3px;}
.playlist-track-row{display:grid;grid-template-columns:36px 42px 1fr 100px 40px;align-items:center;padding:8px 12px;border-radius:6px;cursor:pointer;transition:background .15s;gap:8px;}
.playlist-track-row:hover{background:var(--surface2);}
.playlist-track-art{width:36px;height:36px;border-radius:4px;object-fit:cover;background:var(--surface3);}
.playlist-track-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.playlist-track-album{font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;}

/* ═══════════════════════════════════════
   MODALS
═══════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:999;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px;width:100%;max-width:420px;max-height:85vh;overflow-y:auto;position:relative;}
.modal-title{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:2px;margin-bottom:6px;}
.modal-sub{font-size:12px;color:var(--muted);font-family:'Space Mono',monospace;margin-bottom:20px;}
.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;transition:color .2s;}
.modal-close:hover{color:var(--text);}
.form-group{margin-bottom:14px;}
.form-label{font-size:11px;font-family:'Space Mono',monospace;color:var(--muted);letter-spacing:1px;text-transform:uppercase;display:block;margin-bottom:6px;}
.form-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text);font-size:13px;font-family:'Space Mono',monospace;outline:none;transition:border-color .2s;}
.form-input:focus{border-color:var(--accent2);}
.form-error{font-size:11px;color:var(--accent);font-family:'Space Mono',monospace;margin-top:4px;display:none;}
.form-hint{font-size:10px;color:var(--muted);font-family:'Space Mono',monospace;margin-top:4px;}
.modal-actions{display:flex;gap:8px;margin-top:20px;justify-content:flex-end;}
.btn{padding:9px 18px;border-radius:8px;font-family:'Space Mono',monospace;font-size:12px;cursor:pointer;border:none;transition:all .2s;}
.btn-primary{background:var(--accent2);color:var(--bg);}
.btn-primary:hover{background:#1af0ff;}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border);}
.btn-secondary:hover{background:var(--surface3);}
.btn-danger{background:var(--accent);color:#fff;}
.btn-danger:hover{background:#cc0000;}
.modal-divider{height:1px;background:var(--border);margin:16px 0;}
.id-badge{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:4px;color:var(--accent2);text-align:center;padding:16px;background:var(--surface2);border-radius:8px;margin:12px 0;}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:20px;}
.tab{background:none;border:none;color:var(--muted);font-family:'Space Mono',monospace;font-size:12px;padding:10px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;}
.tab.active{color:var(--text);border-bottom-color:var(--accent2);}

/* ═══════════════════════════════════════
   CONTEXT MENU
═══════════════════════════════════════ */
.ctx-menu{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:6px 0;z-index:9999;min-width:180px;box-shadow:0 8px 24px rgba(0,0,0,.6);display:none;}
.ctx-menu.open{display:block;}
.ctx-item{padding:9px 14px;font-size:12px;font-family:'Space Mono',monospace;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--muted);transition:all .15s;}
.ctx-item:hover{background:var(--surface2);color:var(--text);}
.ctx-item.danger{color:var(--accent);}
.ctx-item i{width:14px;text-align:center;}
.ctx-divider{height:1px;background:var(--border);margin:4px 0;}
.editor-track{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;border-bottom:1px solid var(--border);transition:background .15s;}
.editor-track:hover{background:var(--surface2);}
.editor-track-art{width:34px;height:34px;border-radius:4px;object-fit:cover;background:var(--surface3);}
.editor-track-info{flex:1;min-width:0;}
.editor-track-name{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.editor-track-album{font-size:10px;color:var(--muted);font-family:'Space Mono',monospace;}
.editor-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
.editor-remove:hover{background:rgba(255,0,0,.15);color:var(--accent);}

/* ═══════════════════════════════════════
   PLAYER BAR INTERNALS
═══════════════════════════════════════ */
.now-info{display:flex;align-items:center;gap:10px;min-width:0;}
.now-art{width:52px;height:52px;border-radius:6px;object-fit:cover;background:var(--surface2);flex-shrink:0;transition:opacity .3s;}
.now-art.hidden{display:none;}
.now-text{min-width:0;}
.now-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.now-title a{color:inherit;text-decoration:none;}
.now-title a:hover{text-decoration:underline;color:var(--accent2);}
.now-artist{font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;margin-top:2px;}
.controls{display:flex;flex-direction:column;align-items:center;gap:6px;}
.ctrl-btns{display:flex;align-items:center;gap:18px;}
.ctrl-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;transition:all .2s;display:flex;align-items:center;justify-content:center;}
.ctrl-btn:hover{color:var(--text);transform:scale(1.1);}
.ctrl-btn.active{color:var(--accent2);}
.ctrl-play{width:36px;height:36px;border-radius:50%;background:var(--text);color:var(--bg)!important;font-size:16px;}
.ctrl-play:hover{transform:scale(1.06)!important;background:#eee;}
.progress-row{display:flex;align-items:center;gap:8px;width:100%;}
.time-label{font-size:10px;color:var(--muted);font-family:'Space Mono',monospace;flex-shrink:0;min-width:30px;}
.seek-wrap{flex:1;position:relative;height:4px;background:var(--surface3);border-radius:2px;cursor:pointer;}
.seek-fill{position:absolute;left:0;top:0;bottom:0;background:var(--muted);border-radius:2px;width:0%;pointer-events:none;}
.seek-wrap:hover .seek-fill{background:var(--accent2);}
.seek-input{position:absolute;inset:-8px 0;width:100%;opacity:0;cursor:pointer;margin:0;}
.right-ctrl{display:flex;align-items:center;gap:10px;justify-content:flex-end;}

/* ═══════════════════════════════════════
   VISUALIZER
═══════════════════════════════════════ */
.wave-viz{display:flex;align-items:center;gap:2px;height:18px;opacity:0;transition:opacity .3s;}
.wave-viz.visible{opacity:1;}
.wave-viz .stroke{display:block;width:3px;background:linear-gradient(to top,var(--accent),var(--accent2));border-radius:2px;transform-origin:center;transition:height 0.05s ease;}
.vol-wrap{display:flex;align-items:center;gap:6px;}
.vol-wrap i{color:var(--muted);font-size:12px;}
.vol-slider{position:relative;width:80px;height:4px;background:var(--surface3);border-radius:2px;}
.vol-fill{position:absolute;left:0;top:0;bottom:0;background:var(--muted);border-radius:2px;width:99%;pointer-events:none;}
.vol-input{position:absolute;inset:-8px 0;width:100%;opacity:0;cursor:pointer;}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text);cursor:pointer;}

/* ═══════════════════════════════════════
   MISC / UTILITY
═══════════════════════════════════════ */
.empty-state{padding:40px 24px;color:var(--muted);font-family:'Space Mono',monospace;font-size:12px;text-align:center;}
.empty-state i{font-size:36px;display:block;margin-bottom:12px;opacity:.3;}
*{scrollbar-width:thin;scrollbar-color:var(--surface3) transparent;}
body::before{content:'';position:fixed;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.02) 2px,rgba(0,0,0,.02) 4px);pointer-events:none;z-index:9999;}
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--surface);border:1px solid var(--border);color:var(--text);padding:10px 20px;border-radius:8px;font-family:'Space Mono',monospace;font-size:12px;z-index:99999;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.create-playlist-btn{width:100%;background:none;border:1px dashed var(--border);color:var(--muted);font-family:'Space Mono',monospace;font-size:11px;padding:8px;border-radius:7px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;}
.create-playlist-btn:hover{border-color:var(--accent2);color:var(--accent2);}
.stats-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent2);margin-right:5px;animation:blink 2s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
.full-list-hero{padding:24px 24px 16px;background:linear-gradient(180deg,rgba(0,229,255,.07) 0%,transparent 100%);border-bottom:1px solid var(--border);}
.full-list-hero h1{font-family:'Bebas Neue',sans-serif;font-size:36px;letter-spacing:3px;}
.full-list-hero p{color:var(--muted);font-size:12px;font-family:'Space Mono',monospace;margin-top:4px;}

/* ═══════════════════════════════════════
   SETTINGS LAYOUT
   (theme-picker / toggle / select classes
    live in themium.css)
═══════════════════════════════════════ */
.settings-view{padding:24px;}
.settings-section{margin-bottom:28px;}
.settings-section h2{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2px;margin-bottom:14px;color:var(--accent2);}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);}
.settings-label{font-family:'Space Mono',monospace;font-size:12px;color:var(--text);}
.settings-sub{font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);margin-top:3px;}
.settings-control{display:flex;align-items:center;gap:8px;}
.settings-slider-wrap{display:flex;align-items:center;gap:10px;}
.settings-slider{-webkit-appearance:none;appearance:none;width:140px;height:4px;border-radius:2px;background:var(--surface3);outline:none;cursor:pointer;}
.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent2);cursor:pointer;}
.settings-val{font-family:'Bebas Neue',sans-serif;font-size:18px;color:var(--accent2);min-width:40px;text-align:right;}

/* ═══════════════════════════════════════
   MOBILE BOTTOM NAV
═══════════════════════════════════════ */
.mobile-nav{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  height:var(--mobile-nav-h);
  background:var(--surface);
  border-top:1px solid var(--border);
  z-index:500;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  padding:0 4px;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.mobile-nav-btn{
  background:none;border:none;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;cursor:pointer;padding:6px 0;transition:color .2s;width:100%;
}
.mobile-nav-btn i{font-size:18px;}
.mobile-nav-btn span{font-size:9px;font-family:'Space Mono',monospace;letter-spacing:.5px;}
.mobile-nav-btn.active{color:var(--accent2);}
.mobile-nav-btn:active{transform:scale(0.92);}

/* ═══════════════════════════════════════
   MOBILE MINI PLAYER
═══════════════════════════════════════ */
.mobile-mini-player{
  display:none;
  position:fixed;
  bottom:var(--mobile-nav-h);
  left:8px;right:8px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 14px;
  z-index:490;
  align-items:center;
  gap:10px;
  box-shadow:0 -4px 24px rgba(0,0,0,.4);
  transition:transform .35s cubic-bezier(0.4,0,0.2,1), opacity .3s;
}
.mobile-mini-player.hidden{
  transform:translateY(calc(100% + 20px));
  opacity:0;
  pointer-events:none;
}
.mini-art{width:40px;height:40px;border-radius:6px;object-fit:cover;background:var(--surface3);flex-shrink:0;}
.mini-info{flex:1;min-width:0;}
.mini-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-artist{font-size:10px;color:var(--muted);font-family:'Space Mono',monospace;margin-top:1px;}
.mini-play{background:none;border:none;color:var(--text);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;transition:transform .15s;}
.mini-play:active{transform:scale(0.88);}
.mini-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--surface3);border-radius:0 0 12px 12px;overflow:hidden;}
.mini-progress-fill{height:100%;background:var(--accent2);width:0%;transition:width .5s linear;}

/* ═══════════════════════════════════════
   MOBILE OVERRIDES  (is-mobile on <html>)
═══════════════════════════════════════ */
.is-mobile .app{
  grid-template-columns:1fr;
  grid-template-rows:1fr 0px;
  grid-template-areas:"main" "player";
}
.is-mobile .sidebar{ display:none; }
.is-mobile .player-bar{ display:none !important; }
.is-mobile .mobile-nav{ display:grid; }
.is-mobile .mobile-mini-player{ display:flex; }
.is-mobile .main{ padding-bottom:calc(var(--mobile-nav-h) + 70px); }
.is-mobile .topbar{ padding:10px 14px; }
.is-mobile .topbar-back,
.is-mobile .topbar-fwd{ display:none; }
.is-mobile .search-wrap{ max-width:100%; }
.is-mobile .album-grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;padding:0 14px 16px; }
.is-mobile .album-hero,
.is-mobile .playlist-hero{ flex-direction:column;align-items:flex-start;padding:20px 16px 14px; }
.is-mobile .album-hero-art{ width:130px;height:130px; }
.is-mobile .album-hero-title,
.is-mobile .playlist-hero-name{ font-size:30px; }
.is-mobile .top100-grid{ grid-template-columns:1fr; }
.is-mobile .profile-hero{ flex-direction:column;align-items:flex-start;padding:20px 16px 14px;gap:14px; }
.is-mobile .profile-avatar{ width:90px;height:90px;font-size:36px; }
.is-mobile .profile-displayname{ font-size:30px; }
.is-mobile .section-title{ padding:14px 16px 8px; }
.is-mobile .top100-section{ padding:0 14px 16px; }
.is-mobile .profile-section{ padding:0 16px 16px; }
.is-mobile .tracklist-wrap{ padding:0 8px 80px; }
.is-mobile .search-results{ padding:12px 14px; }
.is-mobile .podium-section{ padding:14px 14px 10px; }
.is-mobile .podium-cover-wrapper{ width:58px;height:58px; }
.is-mobile .podium-score{ font-size:16px; }
.is-mobile .fullstats-inner{ padding:14px 12px; }
.is-mobile .toast{ bottom:calc(var(--mobile-nav-h) + 80px); }