:root {
 
 
 --bg-1: #0b0f1a;
 
 
 --bg-2: #0f1630;
 
 
 --panel: rgba(10, 14, 34, 0.88);
 
 
 --panel-soft: rgba(255, 255, 255, 0.03);
 
 
 --border: rgba(138, 44, 255, 0.26);
 
 
 --border-strong: rgba(138, 44, 255, 0.45);
 
 
 --text: #f2f4ff;
 
 
 --muted: #cfd3ea;
 
 
 --pink: #ff2d8d;
 
 
 --purple: #8a2cff;
 
 
 --cyan: #00d4ff;
 
 
 --green: #00ffa3;
 
 
 --orange: #ff8a00;
 
 
 --yellow: #ffd34d;
 
 
 --shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
 
 
}
 
 
* { box-sizing: border-box; }
 
 
html { scroll-behavior: smooth; }
 
 
body {
 
 
 margin: 0;
 
 
 color: var(--text);
 
 
 font-family: Arial, Helvetica, sans-serif;
 
 
 background:
 
 
   radial-gradient(circle at top left, rgba(138,44,255,0.18), transparent 20%),
 
 
   radial-gradient(circle at top right, rgba(255,45,141,0.18), transparent 22%),
 
 
   radial-gradient(circle at bottom right, rgba(0,212,255,0.12), transparent 24%),
 
 
   linear-gradient(180deg, #070b15 0%, #081021 40%, #050814 100%);
 
 
 min-height: 100vh;
 
 
}
 
 
.container {
 
 
 width: min(1400px, calc(100% - 40px));
 
 
 margin: 0 auto;
 
 
 padding: 20px 0 60px;
 
 
}
 
 
.hidden { display: none !important; }
 
 
.hero {
 
 
 text-align: center;
 
 
 padding: 12px 0 16px;
 
 
 transition: transform .22s ease, opacity .22s ease, padding .22s ease;
 
 
}
 
 
.hero-logo {
 
 
 display: block;
 
 
 margin: 0 auto 8px;
 
 
 width: min(420px, 70vw);
 
 
 max-height: 240px;
 
 
 object-fit: contain;
 
 
}
 
 
.subtitle {
 
 
 margin: 0 0 12px;
 
 
 color: var(--muted);
 
 
 font-size: 1.2rem;
 
 
}
 
 
.header-small {
 
 
 transform: scale(.96);
 
 
 opacity: .92;
 
 
}
 
 
.session-bar {
 
 
 display: inline-block;
 
 
 margin-top: 8px;
 
 
 padding: 12px 20px;
 
 
 border-radius: 999px;
 
 
 color: white;
 
 
 font-weight: 800;
 
 
 background: linear-gradient(90deg, rgba(255,45,141,0.20), rgba(0,212,255,0.14));
 
 
 border: 1px solid rgba(138,44,255,0.30);
 
 
 box-shadow: 0 0 28px rgba(138,44,255,0.22);
 
 
}
 
 
.top-nav {
 
 
 display: flex;
 
 
 align-items: center;
 
 
 justify-content: space-between;
 
 
 gap: 16px;
 
 
 padding: 18px 20px;
 
 
 border-radius: 999px;
 
 
 border: 1px solid var(--border-strong);
 
 
 background: linear-gradient(180deg, rgba(11,15,26,0.90), rgba(11,15,26,0.76));
 
 
 box-shadow: 0 12px 34px rgba(0,0,0,0.32), 0 0 28px rgba(138,44,255,0.20);
 
 
 margin: 8px 0 18px;
 
 
}
 
 
.top-nav.glass-nav {
 
 
 position: sticky;
 
 
 top: 14px;
 
 
 z-index: 50;
 
 
 backdrop-filter: blur(18px);
 
 
 -webkit-backdrop-filter: blur(18px);
 
 
}
 
 
.nav-left { display: flex; align-items: center; gap: 12px; }
 
 
.nav-logo {
 
 
 width: 42px;
 
 
 height: 42px;
 
 
 border-radius: 10px;
 
 
 object-fit: cover;
 
 
 display: block;
 
 
}
 
 
.nav-title {
 
 
 font-size: 1.1rem;
 
 
 font-weight: 900;
 
 
 letter-spacing: .02em;
 
 
}
 
 
.nav-right {
 
 
 display: flex;
 
 
 gap: 12px;
 
 
 flex-wrap: wrap;
 
 
 justify-content: flex-end;
 
 
}
 
 
.top-nav-btn {
 
 
 border: 1px solid rgba(255,255,255,0.08);
 
 
 background: rgba(255,255,255,0.04);
 
 
 color: var(--text);
 
 
 border-radius: 999px;
 
 
 padding: 16px 22px;
 
 
 font-size: 1rem;
 
 
 font-weight: 800;
 
 
 cursor: pointer;
 
 
 transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
 
 
}
 
 
.top-nav-btn:hover { transform: translateY(-2px); }
 
 
.active-nav {
 
 
 background: linear-gradient(90deg, rgba(255,45,141,0.90), rgba(0,212,255,0.85));
 
 
 color: white;
 
 
 box-shadow: 0 0 24px rgba(138,44,255,0.28);
 
 
}
 
 
.card,
 
 
.detail-panel,
 
 
.poster-card,
 
 
.result-item {
 
 
 transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
 
 
}
 
 
.card {
 
 
 margin: 18px 0;
 
 
 padding: 28px 30px;
 
 
 border-radius: 28px;
 
 
 background: linear-gradient(180deg, rgba(10,14,34,0.92), rgba(10,14,34,0.76));
 
 
 border: 1px solid var(--border);
 
 
 box-shadow: var(--shadow), 0 0 36px rgba(138,44,255,0.10);
 
 
}
 
 
.card h2,
 
 
.card h3 {
 
 
 margin-top: 0;
 
 
 color: white;
 
 
 letter-spacing: .01em;
 
 
}
 
 
input, button { font: inherit; }
 
 
input {
 
 
 width: 100%;
 
 
 padding: 18px 20px;
 
 
 border-radius: 18px;
 
 
 border: 1px solid rgba(255,255,255,0.10);
 
 
 background: rgba(255,255,255,0.04);
 
 
 color: white;
 
 
 margin-bottom: 14px;
 
 
 outline: none;
 
 
}
 
 
input::placeholder { color: #aeb6db; }
 
 
button {
 
 
 border: none;
 
 
 border-radius: 18px;
 
 
 padding: 14px 18px;
 
 
 font-weight: 800;
 
 
 cursor: pointer;
 
 
 color: white;
 
 
 background: linear-gradient(90deg, rgba(255,45,141,0.92), rgba(0,212,255,0.84));
 
 
 box-shadow: 0 10px 26px rgba(138,44,255,0.24);
 
 
}
 
 
button:hover { transform: translateY(-1px); }
 
 
.secondary-btn,
 
 
.unfollow-btn,
 
 
.danger-btn {
 
 
 background: rgba(255,255,255,0.08);
 
 
 box-shadow: none;
 
 
 border: 1px solid rgba(255,255,255,0.12);
 
 
}
 
 
.unfollow-btn,
 
 
.danger-btn {
 
 
 background: linear-gradient(90deg, rgba(255,98,98,0.92), rgba(255,138,0,0.86));
 
 
}
 
 
.button-row,
 
 
.detail-actions,
 
 
.search-bar-row {
 
 
 display: flex;
 
 
 gap: 12px;
 
 
 align-items: center;
 
 
 flex-wrap: wrap;
 
 
}
 
 
.search-bar-row input {
 
 
 margin-bottom: 0;
 
 
 flex: 1;
 
 
}
 
 
#globalSearchMessage,
 
 
#authMessage,
 
 
#followArtistMessage {
 
 
 color: var(--muted);
 
 
}
 
 
.section-divider {
 
 
 margin: 26px 0 16px;
 
 
 color: var(--green);
 
 
 font-weight: 900;
 
 
 letter-spacing: .08em;
 
 
 text-transform: uppercase;
 
 
}
 
 
.result-item {
 
 
 border: 1px solid rgba(255,255,255,0.08);
 
 
 border-radius: 22px;
 
 
 background: rgba(255,255,255,0.02);
 
 
 overflow: hidden;
 
 
 margin-bottom: 14px;
 
 
}
 
 
.poster-card:hover,
 
 
.result-item:hover {
 
 
 transform: translateY(-4px);
 
 
 box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
 
 
 border-color: rgba(138, 44, 255, 0.45);
 
 
}
 
 
.media-row {
 
 
 display: grid;
 
 
 grid-template-columns: 96px 1fr;
 
 
 gap: 16px;
 
 
 padding: 14px;
 
 
 align-items: center;
 
 
}
 
 
.media-content { min-width: 0; }
 
 
.result-title,
 
 
.poster-title,
 
 
.media-title {
 
 
 font-size: 1.15rem;
 
 
 font-weight: 900;
 
 
 color: white;
 
 
}
 
 
.result-meta,
 
 
.poster-meta,
 
 
.poster-subtitle,
 
 
.media-subtitle,
 
 
.detail-meta-value {
 
 
 color: var(--muted);
 
 
}
 
 
.media-cover,
 
 
.media-cover-large,
 
 
.poster-image {
 
 
 object-fit: cover;
 
 
 width: 100%;
 
 
 display: block;
 
 
}
 
 
.media-cover {
 
 
 height: 96px;
 
 
 border-radius: 16px;
 
 
}
 
 
.media-cover-large {
 
 
 border-radius: 22px;
 
 
 box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
 
 
 min-height: 280px;
 
 
 max-height: 460px;
 
 
}
 
 
.media-cover-placeholder,
 
 
.media-cover-placeholder-large,
 
 
.poster-placeholder {
 
 
 border-radius: 16px;
 
 
 min-height: 96px;
 
 
}
 
 
.media-cover-placeholder-large {
 
 
 min-height: 280px;
 
 
 border-radius: 22px;
 
 
}
 
 
.artist-banner { box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38); }
 
 
.detail-panel {
 
 
 position: relative;
 
 
 overflow: hidden;
 
 
 padding: 22px;
 
 
 border-radius: 28px;
 
 
 background: linear-gradient(180deg, rgba(10,14,34,0.92), rgba(10,14,34,0.78));
 
 
 border: 1px solid var(--border);
 
 
 box-shadow: var(--shadow);
 
 
}
 
 
.detail-panel::before {
 
 
 content: "";
 
 
 position: absolute;
 
 
 inset: -20%;
 
 
 background:
 
 
   radial-gradient(circle at top left, rgba(138, 44, 255, 0.18), transparent 25%),
 
 
   radial-gradient(circle at top right, rgba(255, 45, 141, 0.14), transparent 22%),
 
 
   radial-gradient(circle at bottom right, rgba(0, 212, 255, 0.12), transparent 24%);
 
 
 pointer-events: none;
 
 
}
 
 
.detail-hero,
 
 
.track-table,
 
 
.artist-top-tracks,
 
 
.artist-albums-grid {
 
 
 position: relative;
 
 
 z-index: 1;
 
 
}
 
 
.detail-hero {
 
 
 display: grid;
 
 
 grid-template-columns: minmax(240px, 360px) 1fr;
 
 
 gap: 24px;
 
 
 align-items: start;
 
 
}
 
 
.detail-info-panel { padding: 12px 0; }
 
 
.detail-meta-grid {
 
 
 display: grid;
 
 
 grid-template-columns: 180px 1fr;
 
 
 gap: 10px 18px;
 
 
 margin: 18px 0;
 
 
}
 
 
.detail-meta-label {
 
 
 font-weight: 900;
 
 
 color: #e6dfff;
 
 
}
 
 
.following-row {
 
 
 display: flex;
 
 
 gap: 12px;
 
 
 align-items: center;
 
 
 flex-wrap: wrap;
 
 
 margin: 14px 0;
 
 
}
 
 
.following-badge {
 
 
 padding: 12px 16px;
 
 
 border-radius: 999px;
 
 
 background: linear-gradient(90deg, rgba(0,255,163,0.95), rgba(0,212,255,0.82));
 
 
 color: #07131a;
 
 
 font-weight: 900;
 
 
}
 
 
.artist-bio-box {
 
 
 line-height: 1.6;
 
 
 color: rgba(255,255,255,0.88);
 
 
 background: rgba(255,255,255,0.03);
 
 
 border: 1px solid rgba(255,255,255,0.08);
 
 
 padding: 16px 18px;
 
 
 border-radius: 18px;
 
 
 margin-top: 16px;
 
 
}
 
 
.artist-tags {
 
 
 display: flex;
 
 
 flex-wrap: wrap;
 
 
 gap: 10px;
 
 
 margin-top: 14px;
 
 
}
 
 
.artist-tag {
 
 
 padding: 8px 12px;
 
 
 border-radius: 999px;
 
 
 background: rgba(138, 44, 255, 0.18);
 
 
 border: 1px solid rgba(138, 44, 255, 0.3);
 
 
 color: #e9ddff;
 
 
 font-size: 0.9rem;
 
 
 font-weight: 700;
 
 
}
 
 
.poster-card {
 
 
 overflow: hidden;
 
 
 border-radius: 22px;
 
 
 border: 1px solid rgba(255,255,255,0.08);
 
 
 background: rgba(255,255,255,0.02);
 
 
}
 
 
.poster-image {
 
 
 aspect-ratio: 1 / 1;
 
 
}
 
 
.poster-body { padding: 16px 18px 18px; }
 
 
.poster-empty,
 
 
.small { color: var(--muted); }
 
 
.poster-your-rating {
 
 
 margin-top: 8px;
 
 
 color: #f8d65c;
 
 
 font-weight: 800;
 
 
}
 
 
.artist-albums-grid {
 
 
 display: grid;
 
 
 grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
 
 
 gap: 18px;
 
 
}
 
 
.artist-top-tracks {
 
 
 border-radius: 20px;
 
 
 overflow: hidden;
 
 
 border: 1px solid rgba(255,255,255,0.08);
 
 
 background: rgba(255,255,255,0.02);
 
 
}
 
 
.artist-track-row {
 
 
 display: grid;
 
 
 grid-template-columns: 60px 1.7fr 150px 120px 270px;
 
 
 gap: 14px;
 
 
 align-items: center;
 
 
 padding: 14px 16px;
 
 
 border-bottom: 1px solid rgba(255,255,255,0.07);
 
 
}
 
 
.artist-track-row:last-child { border-bottom: none; }
 
 
.artist-track-number,
 
 
.artist-track-title,
 
 
.track-col-title { font-weight: 900; color: white; }
 
 
.artist-track-meta,
 
 
.artist-track-stats { color: var(--muted); }
 
 
.artist-track-rate { display: flex; justify-content: flex-end; }
 
 
.track-table {
 
 
 border-radius: 20px;
 
 
 overflow: hidden;
 
 
 border: 1px solid rgba(255,255,255,0.08);
 
 
 background: rgba(255,255,255,0.02);
 
 
}
 
 
.track-header,
.track-row-table {

 display: grid;

 grid-template-columns:
    52px
    minmax(180px, 1.6fr)
    135px
    110px
    minmax(280px, 320px)
    118px;

 gap: 12px;

 align-items: center;

 padding: 14px 16px;

}
 
 
.track-header {
 
 
 font-weight: 900;
 
 
 background: rgba(255,255,255,0.04);
 
 
}
 
 
.track-row-table { border-top: 1px solid rgba(255,255,255,0.06); }
 
 
.track-col-your-rating.has-rating {
 
 
 color: #f8d65c;
 
 
 font-weight: 900;
 
 
}
 
 
/* Spotify-style rating box */

.star-rating-block {
  display: flex;
  align-items: center;
  gap: 8px;
}

.star-rating {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;

  padding: 10px 14px;

  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 16px;

  min-width: 220px;
  max-width: 220px;
}

.star-option {
  background: none;
  border: none;
  padding: 0;

  font-size: 1.2rem;
  line-height: 1;

  color: rgba(255,255,255,0.35);
}

.star-option.active-star {
  color: #ffd34d;
}

.star-score-text {
  display: none;
}

.star-option.active-star {
  color: #ffd34d;
  text-shadow: 0 0 8px rgba(255,211,77,0.35);
}
 
 
.star-option.active-star { color: #ffd34d; }

.album-rating-box {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 10px 14px;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(8px);
}
 

 
@media (max-width: 1100px) {
 
 
 .detail-hero { grid-template-columns: 1fr; }
 
 
 .track-header,
 
 
 .track-row-table { grid-template-columns: 46px 1fr; }
 
 
 .track-header > div:nth-child(n+3),
 
 
 .track-row-table > div:nth-child(n+3) { grid-column: 2; }
 
 
 .artist-track-row { grid-template-columns: 36px 1fr; }
 
 
 .artist-track-stats,
 
 
 .artist-track-rate { grid-column: 2; }
 
 
}
 
 
@media (max-width: 760px) {
 
 
 .container { width: min(100% - 20px, 1400px); }
 
 
 .top-nav {
 
 
   border-radius: 26px;
 
 
   flex-direction: column;
 
 
   align-items: stretch;
 
 
 }
 
 
 .nav-right { justify-content: stretch; }
 
 
 .top-nav-btn { flex: 1; }
 
 
 .card { padding: 22px 18px; }
 
 
 .detail-meta-grid { grid-template-columns: 1fr; }
 
 
 .button-row,
 
 
 .detail-actions,
 
 
 .search-bar-row {
 
 
   flex-direction: column;
 
 
   align-items: stretch;
 
 
 }
 
 
 .hero-logo { width: min(320px, 82vw); }
 
 
 .media-row { grid-template-columns: 1fr; }
 
 
 .artist-albums-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
 
 
}
 
 
.session-profile-btn:hover {
 
 
 filter: brightness(1.08) !important;
 
 
 transform: translateY(-1px) !important;
 
 
}
 
 
.profile-modal.hidden {
 
 
 display: none !important;
 
 
}
 
 
.profile-modal {
 
 
 position: fixed !important;
 
 
 inset: 0 !important;
 
 
 width: 100vw !important;
 
 
 height: 100vh !important;
 
 
 z-index: 999999 !important;
 
 
 display: flex !important;
 
 
 align-items: center !important;
 
 
 justify-content: center !important;
 
 
 padding: 20px !important;
 
 
 overflow: hidden !important;
 
 
}
 
 
.profile-modal-backdrop {
 
 
 position: absolute !important;
 
 
 inset: 0 !important;
 
 
 background: rgba(2, 6, 23, 0.74) !important;
 
 
 backdrop-filter: blur(16px) !important;
 
 
 -webkit-backdrop-filter: blur(16px) !important;
 
 
}
 
 
.profile-card-panel {
 
 
 position: relative !important;
 
 
 width: min(820px, 94vw) !important;
 
 
 max-height: 84vh !important;
 
 
 overflow: auto !important;
 
 
 border: 1px solid rgba(147, 51, 234, 0.58) !important;
 
 
 border-radius: 30px !important;
 
 
 background:
 
 
   radial-gradient(circle at top left, rgba(255, 45, 141, 0.32), transparent 28%),
 
 
   radial-gradient(circle at top right, rgba(0, 212, 255, 0.28), transparent 30%),
 
 
   linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(5, 8, 22, 0.98)) !important;
 
 
 color: #fff !important;
 
 
 box-shadow: 0 34px 120px rgba(0,0,0,0.70), 0 0 0 1px rgba(255,255,255,0.05) inset !important;
 
 
 padding: 28px !important;
 
 
 animation: profilePopIn 0.22s ease-out !important;
 
 
}
 
 
@keyframes profilePopIn {
 
 
 from { opacity: 0; transform: translateY(18px) scale(0.98); }
 
 
 to { opacity: 1; transform: translateY(0) scale(1); }
 
 
}
 
 
.profile-card-header {
 
 
 display: flex !important;
 
 
 justify-content: space-between !important;
 
 
 gap: 18px !important;
 
 
 align-items: flex-start !important;
 
 
 margin-bottom: 22px !important;
 
 
}
 
 
.profile-card-header h2 {
 
 
 margin: 4px 0 0 !important;
 
 
 font-size: clamp(2rem, 4vw, 3.2rem) !important;
 
 
 line-height: 1 !important;
 
 
 letter-spacing: -0.04em !important;
 
 
}
 
 
.profile-card-header p {
 
 
 margin: 8px 0 0 !important;
 
 
 color: #cbd5e1 !important;
 
 
 font-weight: 900 !important;
 
 
 font-size: 1.05rem !important;
 
 
}
 
 
.profile-kicker {
 
 
 color: #22f5a7 !important;
 
 
 text-transform: uppercase !important;
 
 
 letter-spacing: 0.14em !important;
 
 
 font-size: 0.78rem !important;
 
 
 font-weight: 950 !important;
 
 
}
 
 
.profile-close-btn {
 
 
 width: 46px !important;
 
 
 height: 46px !important;
 
 
 min-width: 46px !important;
 
 
 border-radius: 50% !important;
 
 
 border: 1px solid rgba(255,255,255,0.18) !important;
 
 
 background: linear-gradient(135deg, rgba(255,45,141,0.95), rgba(0,212,255,0.95)) !important;
 
 
 color: white !important;
 
 
 font-size: 1.6rem !important;
 
 
 line-height: 1 !important;
 
 
 cursor: pointer !important;
 
 
 display: grid !important;
 
 
 place-items: center !important;
 
 
 box-shadow: 0 12px 32px rgba(0, 212, 255, 0.22) !important;
 
 
}
 
 
.profile-stats-grid {
 
 
 display: grid !important;
 
 
 grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 
 
 gap: 14px !important;
 
 
 margin-bottom: 24px !important;
 
 
}
 
 
.profile-stat-card {
 
 
 border-radius: 20px !important;
 
 
 background: rgba(255,255,255,0.08) !important;
 
 
 border: 1px solid rgba(255,255,255,0.13) !important;
 
 
 padding: 18px !important;
 
 
 min-height: 105px !important;
 
 
}
 
 
.profile-stat-number {
 
 
 font-size: 2.2rem !important;
 
 
 font-weight: 950 !important;
 
 
 color: #facc15 !important;
 
 
 line-height: 1 !important;
 
 
}
 
 
.profile-stat-label {
 
 
 color: #cbd5e1 !important;
 
 
 font-weight: 850 !important;
 
 
 margin-top: 8px !important;
 
 
}
 
 
.profile-section-title {
 
 
 color: #22f5a7 !important;
 
 
 text-transform: uppercase !important;
 
 
 letter-spacing: 0.12em !important;
 
 
 font-size: 0.92rem !important;
 
 
 font-weight: 950 !important;
 
 
 margin: 16px 0 12px !important;
 
 
}
 
 
.profile-top-albums {
 
 
 display: grid !important;
 
 
 gap: 10px !important;
 
 
}
 
 
.profile-album-row {
 
 
 display: grid !important;
 
 
 grid-template-columns: 38px 64px 1fr auto !important;
 
 
 align-items: center !important;
 
 
 gap: 13px !important;
 
 
 border-radius: 18px !important;
 
 
 padding: 10px !important;
 
 
 background: rgba(255,255,255,0.065) !important;
 
 
 border: 1px solid rgba(255,255,255,0.11) !important;
 
 
 cursor: pointer !important;
 
 
 transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
 
 
}
 
 
.profile-album-row:hover {
 
 
 border-color: rgba(34, 245, 167, 0.58) !important;
 
 
 transform: translateY(-1px) !important;
 
 
 background: rgba(255,255,255,0.09) !important;
 
 
}
 
 
.profile-album-rank {
 
 
 font-weight: 950 !important;
 
 
 color: #93c5fd !important;
 
 
 text-align: center !important;
 
 
 font-size: 1.05rem !important;
 
 
}
 
 
.profile-album-row .media-cover,
 
 
.profile-album-row .media-cover-placeholder {
 
 
 width: 64px !important;
 
 
 height: 64px !important;
 
 
 border-radius: 13px !important;
 
 
 object-fit: cover !important;
 
 
 display: grid !important;
 
 
 place-items: center !important;
 
 
 font-size: 0.78rem !important;
 
 
 overflow: hidden !important;
 
 
}
 
 
.profile-album-title {
 
 
 font-weight: 950 !important;
 
 
 font-size: 1rem !important;
 
 
}
 
 
.profile-album-artist {
 
 
 color: #cbd5e1 !important;
 
 
 margin-top: 3px !important;
 
 
 font-size: 0.92rem !important;
 
 
}
 
 
.profile-album-rating {
 
 
 color: #facc15 !important;
 
 
 font-weight: 950 !important;
 
 
 white-space: nowrap !important;
 
 
 font-size: 1rem !important;
 
 
}
 
 
.profile-help-note {
 
 
 color: #94a3b8 !important;
 
 
 font-size: 0.9rem !important;
 
 
 margin-top: 18px !important;
 
 
}
 
 
body.profile-open {
 
 
 overflow: hidden !important;
 
 
}
 
 
@media (max-width: 720px) {
 
 
 .profile-card-panel {
 
 
   padding: 20px !important;
 
 
 }
 
 
 .profile-stats-grid {
 
 
   grid-template-columns: 1fr !important;
 
 
 }
 
 
 .profile-album-row {
 
 
   grid-template-columns: 30px 54px 1fr !important;
 
 
 }
 
 
 .profile-album-rating {
 
 
   grid-column: 3 !important;
 
 
 }
 
 
 .profile-album-row .media-cover,
 
 
 .profile-album-row .media-cover-placeholder {
 
 
   width: 54px !important;
 
 
   height: 54px !important;
 
 
 }
 
 
}
 
 
/* ============================================================
 
 
  PROFILE MODAL - v14
 
 
  Keeps the user profile as a centred overlay instead of inline
 
 
  ============================================================ */
 
 
.session-profile-btn {
 
 
 background: linear-gradient(135deg, rgba(255,45,141,0.92), rgba(0,212,255,0.92)) !important;
 
 
 border: 0 !important;
 
 
 border-radius: 18px !important;
 
 
 color: #fff !important;
 
 
 font: inherit !important;
 
 
 font-weight: 950 !important;
 
 
 cursor: pointer !important;
 
 
 padding: 10px 18px !important;
 
 
 box-shadow: 0 12px 34px rgba(0, 212, 255, 0.22), 0 12px 34px rgba(255, 45, 141, 0.18) !important;
 
 
}
 
 
.session-profile-btn:hover {
 
 
 filter: brightness(1.08) !important;
 
 
 transform: translateY(-1px) !important;
 
 
}
 
 
.profile-modal.hidden {
 
 
 display: none !important;
 
 
}
 
 
.profile-modal {
 
 
 position: fixed !important;
 
 
 inset: 0 !important;
 
 
 width: 100vw !important;
 
 
 height: 100vh !important;
 
 
 z-index: 999999 !important;
 
 
 display: flex !important;
 
 
 align-items: center !important;
 
 
 justify-content: center !important;
 
 
 padding: 20px !important;
 
 
 overflow: hidden !important;
 
 
}
 
 
.profile-modal-backdrop {
 
 
 position: absolute !important;
 
 
 inset: 0 !important;
 
 
 background: rgba(2, 6, 23, 0.74) !important;
 
 
 backdrop-filter: blur(16px) !important;
 
 
 -webkit-backdrop-filter: blur(16px) !important;
 
 
}
 
 
.profile-card-panel {
 
 
 position: relative !important;
 
 
 width: min(820px, 94vw) !important;
 
 
 max-height: 84vh !important;
 
 
 overflow: auto !important;
 
 
 border: 1px solid rgba(147, 51, 234, 0.58) !important;
 
 
 border-radius: 30px !important;
 
 
 background:
 
 
   radial-gradient(circle at top left, rgba(255, 45, 141, 0.32), transparent 28%),
 
 
   radial-gradient(circle at top right, rgba(0, 212, 255, 0.28), transparent 30%),
 
 
   linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(5, 8, 22, 0.98)) !important;
 
 
 color: #fff !important;
 
 
 box-shadow: 0 34px 120px rgba(0,0,0,0.70), 0 0 0 1px rgba(255,255,255,0.05) inset !important;
 
 
 padding: 28px !important;
 
 
 animation: profilePopIn 0.22s ease-out !important;
 
 
}
 
 
@keyframes profilePopIn {
 
 
 from { opacity: 0; transform: translateY(18px) scale(0.98); }
 
 
 to { opacity: 1; transform: translateY(0) scale(1); }
 
 
}
 
 
.profile-card-header {
 
 
 display: flex !important;
 
 
 justify-content: space-between !important;
 
 
 gap: 18px !important;
 
 
 align-items: flex-start !important;
 
 
 margin-bottom: 22px !important;
 
 
}
 
 
.profile-card-header h2 {
 
 
 margin: 4px 0 0 !important;
 
 
 font-size: clamp(2rem, 4vw, 3.2rem) !important;
 
 
 line-height: 1 !important;
 
 
 letter-spacing: -0.04em !important;
 
 
}
 
 
.profile-card-header p {
 
 
 margin: 8px 0 0 !important;
 
 
 color: #cbd5e1 !important;
 
 
 font-weight: 900 !important;
 
 
 font-size: 1.05rem !important;
 
 
}
 
 
.profile-kicker {
 
 
 color: #22f5a7 !important;
 
 
 text-transform: uppercase !important;
 
 
 letter-spacing: 0.14em !important;
 
 
 font-size: 0.78rem !important;
 
 
 font-weight: 950 !important;
 
 
}
 
 
.profile-close-btn {
 
 
 width: 46px !important;
 
 
 height: 46px !important;
 
 
 min-width: 46px !important;
 
 
 border-radius: 50% !important;
 
 
 border: 1px solid rgba(255,255,255,0.18) !important;
 
 
 background: linear-gradient(135deg, rgba(255,45,141,0.95), rgba(0,212,255,0.95)) !important;
 
 
 color: white !important;
 
 
 font-size: 1.6rem !important;
 
 
 line-height: 1 !important;
 
 
 cursor: pointer !important;
 
 
 display: grid !important;
 
 
 place-items: center !important;
 
 
 box-shadow: 0 12px 32px rgba(0, 212, 255, 0.22) !important;
 
 
}
 
 
.profile-stats-grid {
 
 
 display: grid !important;
 
 
 grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 
 
 gap: 14px !important;
 
 
 margin-bottom: 24px !important;
 
 
}
 
 
.profile-stat-card {
 
 
 border-radius: 20px !important;
 
 
 background: rgba(255,255,255,0.08) !important;
 
 
 border: 1px solid rgba(255,255,255,0.13) !important;
 
 
 padding: 18px !important;
 
 
 min-height: 105px !important;
 
 
}
 
 
.profile-stat-number {
 
 
 font-size: 2.2rem !important;
 
 
 font-weight: 950 !important;
 
 
 color: #facc15 !important;
 
 
 line-height: 1 !important;
 
 
}
 
 
.profile-stat-label {
 
 
 color: #cbd5e1 !important;
 
 
 font-weight: 850 !important;
 
 
 margin-top: 8px !important;
 
 
}
 
 
.profile-section-title {
 
 
 color: #22f5a7 !important;
 
 
 text-transform: uppercase !important;
 
 
 letter-spacing: 0.12em !important;
 
 
 font-size: 0.92rem !important;
 
 
 font-weight: 950 !important;
 
 
 margin: 16px 0 12px !important;
 
 
}
 
 
.profile-top-albums {
 
 
 display: grid !important;
 
 
 gap: 10px !important;
 
 
}
 
 
.profile-album-row {
 
 
 display: grid !important;
 
 
 grid-template-columns: 38px 64px 1fr auto !important;
 
 
 align-items: center !important;
 
 
 gap: 13px !important;
 
 
 border-radius: 18px !important;
 
 
 padding: 10px !important;
 
 
 background: rgba(255,255,255,0.065) !important;
 
 
 border: 1px solid rgba(255,255,255,0.11) !important;
 
 
 cursor: pointer !important;
 
 
 transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
 
 
}
 
 
.profile-album-row:hover {
 
 
 border-color: rgba(34, 245, 167, 0.58) !important;
 
 
 transform: translateY(-1px) !important;
 
 
 background: rgba(255,255,255,0.09) !important;
 
 
}
 
 
.profile-album-rank {
 
 
 font-weight: 950 !important;
 
 
 color: #93c5fd !important;
 
 
 text-align: center !important;
 
 
 font-size: 1.05rem !important;
 
 
}
 
 
.profile-album-row .media-cover,
 
 
.profile-album-row .media-cover-placeholder {
 
 
 width: 64px !important;
 
 
 height: 64px !important;
 
 
 border-radius: 13px !important;
 
 
 object-fit: cover !important;
 
 
 display: grid !important;
 
 
 place-items: center !important;
 
 
 font-size: 0.78rem !important;
 
 
 overflow: hidden !important;
 
 
}
 
 
.profile-album-title {
 
 
 font-weight: 950 !important;
 
 
 font-size: 1rem !important;
 
 
}
 
 
.profile-album-artist {
 
 
 color: #cbd5e1 !important;
 
 
 margin-top: 3px !important;
 
 
 font-size: 0.92rem !important;
 
 
}
 
 
.profile-album-rating {
 
 
 color: #facc15 !important;
 
 
 font-weight: 950 !important;
 
 
 white-space: nowrap !important;
 
 
 font-size: 1rem !important;
 
 
}
 
 
.profile-help-note {
 
 
 color: #94a3b8 !important;
 
 
 font-size: 0.9rem !important;
 
 
 margin-top: 18px !important;
 
 
}
 
 
body.profile-open {
 
 
 overflow: hidden !important;
 
 
}
 
 
@media (max-width: 720px) {
 
 
 .profile-card-panel {
 
 
   padding: 20px !important;
 
 
 }
 
 
 .profile-stats-grid {
 
 
   grid-template-columns: 1fr !important;
 
 
 }
 
 
 .profile-album-row {
 
 
   grid-template-columns: 30px 54px 1fr !important;
 
 
 }
 
 
 .profile-album-rating {
 
 
   grid-column: 3 !important;
 
 
 }
 
 
 .profile-album-row .media-cover,
 
 
 .profile-album-row .media-cover-placeholder {
 
 
   width: 54px !important;
 
 
   height: 54px !important;
 
 
 }
 
 
}
 
 
/* ============================================================
 
  ALBUM CARD GRID FIX - v15
 
  Fixes recommendations/albums stretching into huge full-width images.
 
  ============================================================ */
 
 
#recommendationsList,
 
#albumsList,
 
#songsList,
 
.artist-albums-grid {
 
 display: grid !important;
 
 grid-template-columns: repeat(auto-fill, minmax(220px, 280px)) !important;
 
 gap: 18px !important;
 
 align-items: start !important;
 
 justify-content: start !important;
 
}
 
 
#recommendationsList .poster-card,
 
#albumsList .poster-card,
 
#songsList .poster-card,
 
.artist-albums-grid .poster-card {
 
 width: 100% !important;
 
 max-width: 280px !important;
 
 min-width: 0 !important;
 
 height: auto !important;
 
 display: flex !important;
 
 flex-direction: column !important;
 
 overflow: hidden !important;
 
}
 
 
.poster-card {
 
 max-width: 280px !important;
 
}
 
 
.poster-image {
 
 width: 100% !important;
 
 height: auto !important;
 
 aspect-ratio: 1 / 1 !important;
 
 object-fit: cover !important;
 
 display: block !important;
 
 flex: 0 0 auto !important;
 
}
 
 
.poster-placeholder {
 
 width: 100% !important;
 
 aspect-ratio: 1 / 1 !important;
 
 min-height: 0 !important;
 
 height: auto !important;
 
 display: grid !important;
 
 place-items: center !important;
 
}
 
 
.poster-body {
 
 width: 100% !important;
 
 min-width: 0 !important;
 
}
 
 
.poster-title,
 
.poster-subtitle,
 
.poster-meta,
 
.poster-your-rating {
 
 overflow-wrap: anywhere !important;
 
}
 
 
/* Keep selected/detail album artwork large, but not the small album cards */
 
.detail-hero .media-cover-large {
 
 max-width: 360px !important;
 
}
 
 
/* Search result artwork should stay list-sized */
 
.result-item .media-cover,
 
.result-item .media-cover-placeholder {
 
 width: 96px !important;
 
 height: 96px !important;
 
 max-width: 96px !important;
 
 min-height: 96px !important;
 
}
 
 
/* On mobile, cards can be slightly larger but should still not stretch full-width awkwardly */
 
@media (max-width: 760px) {
 
 #recommendationsList,
 
 #albumsList,
 
 #songsList,
 
 .artist-albums-grid {
 
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
 
 }
 
 
 #recommendationsList .poster-card,
 
 #albumsList .poster-card,
 
 #songsList .poster-card,
 
 .artist-albums-grid .poster-card,
 
 .poster-card {
 
   max-width: none !important;
 
 }
 
}
 
/* ============================================================
  ALBUM ARTWORK POLISH - v16
  Prevents broken artwork from stretching or showing ugly alt text.
  ============================================================ */
 
.poster-card img.poster-image,
.result-item img.media-cover,
.profile-album-row img.media-cover {
 background: #0b1020 !important;
}
 
.poster-card .poster-placeholder,
.media-cover-placeholder,
.media-cover-placeholder-large {
 color: var(--muted) !important;
 font-size: 0.95rem !important;
 line-height: 1.25 !important;
 text-align: center !important;
 overflow: hidden !important;
}
 
.poster-card img[alt],
.media-cover[alt],
.media-cover-large[alt] {
 text-indent: -9999px;
}
 
/* ============================================================
  PROFILE TOP 10 LAYOUT FIX - v17
  Keeps profile rows neat, centred, and prevents broken image alt text.
  ============================================================ */
 
.profile-card-panel {
 width: min(760px, 94vw) !important;
 max-height: 82vh !important;
 padding: 26px !important;
}
 
.profile-top-albums {
 display: grid !important;
 grid-template-columns: 1fr !important;
 gap: 10px !important;
}
 
.profile-album-row {
 display: grid !important;
 grid-template-columns: 38px 66px minmax(0, 1fr) 86px !important;
 align-items: center !important;
 gap: 14px !important;
 min-height: 88px !important;
 padding: 11px 12px !important;
}
 
.profile-album-cover-wrap {
 width: 66px !important;
 height: 66px !important;
 overflow: hidden !important;
 border-radius: 14px !important;
 background: #0b1020 !important;
 display: block !important;
}
 
.profile-album-cover-wrap .media-cover,
.profile-album-cover-wrap .media-cover-placeholder {
 width: 66px !important;
 height: 66px !important;
 max-width: 66px !important;
 min-height: 66px !important;
 border-radius: 14px !important;
 object-fit: cover !important;
 display: grid !important;
 place-items: center !important;
 font-size: 0.76rem !important;
 line-height: 1.1 !important;
 text-align: center !important;
 overflow: hidden !important;
}
 
.profile-album-cover-wrap img {
 color: transparent !important;
 text-indent: -9999px !important;
}
 
.profile-album-main {
 min-width: 0 !important;
}
 
.profile-album-title,
.profile-album-artist {
 white-space: nowrap !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
}
 
.profile-album-rating {
 text-align: right !important;
 white-space: nowrap !important;
}
 
@media (max-width: 720px) {
 .profile-album-row {
   grid-template-columns: 30px 54px minmax(0, 1fr) !important;
   gap: 10px !important;
 }
 
 .profile-album-rating {
   grid-column: 3 !important;
   text-align: left !important;
 }
 
 .profile-album-cover-wrap,
 .profile-album-cover-wrap .media-cover,
 .profile-album-cover-wrap .media-cover-placeholder {
   width: 54px !important;
   height: 54px !important;
   max-width: 54px !important;
   min-height: 54px !important;
 }
}
 
/* ============================================================
  ADMIN DASHBOARD - v19
  ============================================================ */
 
.admin-toolbar {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 12px;
 align-items: center;
 margin: 18px 0 20px;
}
 
.admin-toolbar input {
 margin-bottom: 0;
}
 
.admin-summary-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
 gap: 14px;
 margin: 18px 0 24px;
}
 
.admin-stat-card {
 border-radius: 20px;
 padding: 18px;
 background: rgba(255,255,255,0.06);
 border: 1px solid rgba(255,255,255,0.11);
 color: var(--muted);
 font-weight: 800;
}
 
.admin-stat-number {
 color: var(--yellow);
 font-size: 2.1rem;
 font-weight: 950;
 line-height: 1;
 margin-bottom: 8px;
}
 
.admin-panel {
 border-radius: 24px;
 border: 1px solid rgba(138,44,255,0.26);
 background: rgba(255,255,255,0.025);
 padding: 18px;
 margin: 18px 0;
}
 
.admin-list {
 display: grid;
 gap: 10px;
}
 
.admin-row {
 display: grid;
 grid-template-columns: 74px minmax(0, 1fr) auto;
 gap: 14px;
 align-items: center;
 border-radius: 18px;
 padding: 12px;
 background: rgba(255,255,255,0.055);
 border: 1px solid rgba(255,255,255,0.09);
}
 
.admin-cover-wrap,
.admin-song-icon {
 width: 74px;
 height: 74px;
 border-radius: 14px;
 overflow: hidden;
 background: #0b1020;
 display: grid;
 place-items: center;
 color: var(--muted);
 font-weight: 900;
}
 
.admin-cover-wrap .media-cover,
.admin-cover-wrap .media-cover-placeholder {
 width: 74px !important;
 height: 74px !important;
 max-width: 74px !important;
 min-height: 74px !important;
 border-radius: 14px !important;
 object-fit: cover !important;
 display: grid !important;
 place-items: center !important;
 font-size: 0.78rem !important;
 line-height: 1.1 !important;
 text-align: center !important;
}
 
.admin-song-icon {
 font-size: 2rem;
 color: var(--cyan);
}
 
.admin-main {
 min-width: 0;
}
 
.admin-title {
 font-weight: 950;
 color: white;
 font-size: 1.02rem;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
 
.admin-meta {
 color: var(--muted);
 font-size: 0.92rem;
 margin-top: 3px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
 
.admin-actions {
 display: flex;
 gap: 8px;
 align-items: center;
 justify-content: flex-end;
 flex-wrap: wrap;
}
 
.admin-actions button {
 padding: 10px 12px !important;
 border-radius: 14px !important;
 font-size: 0.9rem !important;
}
 
@media (max-width: 850px) {
 .admin-toolbar {
   grid-template-columns: 1fr;
 }
 
 .admin-row {
   grid-template-columns: 58px minmax(0, 1fr);
 }
 
 .admin-cover-wrap,
 .admin-song-icon,
 .admin-cover-wrap .media-cover,
 .admin-cover-wrap .media-cover-placeholder {
   width: 58px !important;
   height: 58px !important;
   max-width: 58px !important;
   min-height: 58px !important;
 }
 
 .admin-actions {
   grid-column: 2;
   justify-content: flex-start;
 }
}
 
/* ============================================================
  ADMIN UI CONTROLS - v20
  Dashboard + selected item admin buttons
  ============================================================ */
 
.selected-admin-controls {
 margin-top: 18px !important;
 padding: 16px !important;
 border-radius: 18px !important;
 background: rgba(255,255,255,0.045) !important;
 border: 1px solid rgba(34, 245, 167, 0.25) !important;
}
 
.selected-admin-title {
 color: #22f5a7 !important;
 font-weight: 950 !important;
 text-transform: uppercase !important;
 letter-spacing: 0.11em !important;
 font-size: 0.82rem !important;
 margin-bottom: 10px !important;
}
 
.selected-admin-buttons {
 display: flex !important;
 flex-wrap: wrap !important;
 gap: 10px !important;
}
 
.admin-toolbar {
 display: grid !important;
 grid-template-columns: 1fr auto !important;
 gap: 12px !important;
 align-items: center !important;
}
 
.admin-summary-grid {
 display: grid !important;
 grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
 gap: 14px !important;
 margin: 18px 0 !important;
}
 
.admin-stat-card {
 padding: 18px !important;
 border-radius: 20px !important;
 background: rgba(255,255,255,0.06) !important;
 border: 1px solid rgba(255,255,255,0.10) !important;
}
 
.admin-stat-number {
 color: #facc15 !important;
 font-size: 2rem !important;
 font-weight: 950 !important;
}
 
.admin-panel {
 margin-top: 20px !important;
}
 
.admin-list {
 display: grid !important;
 gap: 12px !important;
}
 
.admin-row {
 display: grid !important;
 grid-template-columns: 72px minmax(0, 1fr) auto !important;
 gap: 14px !important;
 align-items: center !important;
 padding: 12px !important;
 border-radius: 18px !important;
 background: rgba(255,255,255,0.045) !important;
 border: 1px solid rgba(255,255,255,0.09) !important;
}
 
.admin-cover-wrap,
.admin-song-icon {
 width: 72px !important;
 height: 72px !important;
 border-radius: 14px !important;
 overflow: hidden !important;
 background: #0b1020 !important;
 display: grid !important;
 place-items: center !important;
}
 
.admin-cover-wrap .media-cover,
.admin-cover-wrap .media-cover-placeholder {
 width: 72px !important;
 height: 72px !important;
 max-width: 72px !important;
 min-height: 72px !important;
 border-radius: 14px !important;
}
 
.admin-title {
 font-weight: 950 !important;
 color: white !important;
}
 
.admin-meta {
 color: var(--muted) !important;
 font-size: 0.92rem !important;
 margin-top: 3px !important;
}
 
.admin-actions {
 display: flex !important;
 flex-wrap: wrap !important;
 justify-content: flex-end !important;
 gap: 8px !important;
}
 
@media (max-width: 780px) {
 .admin-toolbar {
   grid-template-columns: 1fr !important;
 }
 
 .admin-summary-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }
 
 .admin-row {
   grid-template-columns: 56px minmax(0, 1fr) !important;
 }
 
 .admin-actions {
   grid-column: 1 / -1 !important;
   justify-content: flex-start !important;
 }
 
 .admin-cover-wrap,
 .admin-song-icon,
 .admin-cover-wrap .media-cover,
 .admin-cover-wrap .media-cover-placeholder {
   width: 56px !important;
   height: 56px !important;
   max-width: 56px !important;
   min-height: 56px !important;
 }
}
 
/* v21 selected item admin controls safety/polish */
.selected-admin-controls { margin-top: 18px !important; padding: 16px !important; border-radius: 18px !important; background: rgba(255,255,255,0.045) !important; border: 1px solid rgba(34,245,167,0.26) !important; }
.selected-admin-title { color: #22f5a7 !important; font-weight: 950 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-size: 0.82rem !important; margin-bottom: 10px !important; }
.selected-admin-buttons { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
 
/* ============================================================
  SMART RECOMMENDATIONS + MORE FROM ARTIST - v23
  ============================================================ */
.related-music-panel { position: relative; z-index: 1; margin-top: 26px; padding-top: 8px; }
.artist-more-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 240px)) !important; gap: 16px !important; justify-content: start !important; align-items: start !important; margin: 12px 0 24px !important; }
.artist-more-grid .poster-card { max-width: 240px !important; width: 100% !important; }
.smart-recommendation-block { margin-bottom: 26px !important; padding: 18px !important; border-radius: 22px !important; border: 1px solid rgba(34, 245, 167, 0.22) !important; background: rgba(255,255,255,0.035) !important; }
.smart-recommendation-heading { color: #f2f4ff !important; font-weight: 850 !important; margin-bottom: 14px !important; }
.smart-recommendation-heading strong { color: #22f5a7 !important; }
.top-song-grid .poster-card { border-color: rgba(250, 204, 21, 0.20) !important; }
@media (max-width: 760px) { .artist-more-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; } .artist-more-grid .poster-card { max-width: none !important; } }
 
 
 
/* ============================================================
  v24: related music carousels + similar artists
  ============================================================ */
 
.related-music-panel {
 margin-top: 28px !important;
}
 
.artist-carousel {
 display: grid !important;
 grid-auto-flow: column !important;
 grid-auto-columns: minmax(180px, 220px) !important;
 gap: 18px !important;
 overflow-x: auto !important;
 overflow-y: hidden !important;
 padding: 8px 2px 18px !important;
 scroll-snap-type: x proximity !important;
 -webkit-overflow-scrolling: touch !important;
}
 
.artist-carousel::-webkit-scrollbar {
 height: 10px !important;
}
 
.artist-carousel::-webkit-scrollbar-track {
 background: rgba(255,255,255,0.04) !important;
 border-radius: 999px !important;
}
 
.artist-carousel::-webkit-scrollbar-thumb {
 background: linear-gradient(90deg, var(--pink), var(--cyan)) !important;
 border-radius: 999px !important;
}
 
.artist-carousel .poster-card {
 min-width: 180px !important;
 max-width: 220px !important;
 scroll-snap-align: start !important;
}
 
.artist-carousel .poster-image,
.artist-carousel .poster-placeholder {
 width: 100% !important;
 aspect-ratio: 1 / 1 !important;
 min-height: auto !important;
 object-fit: cover !important;
}
 
.similar-artists-carousel {
 grid-auto-columns: minmax(130px, 160px) !important;
}
 
.similar-artist-card {
 scroll-snap-align: start !important;
 border: 1px solid rgba(255,255,255,0.09) !important;
 background: rgba(255,255,255,0.035) !important;
 border-radius: 22px !important;
 padding: 16px !important;
 text-align: center !important;
 cursor: pointer !important;
 transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}
 
.similar-artist-card:hover {
 transform: translateY(-4px) !important;
 border-color: rgba(0,212,255,0.42) !important;
 box-shadow: 0 18px 44px rgba(0,0,0,0.35) !important;
}
 
.similar-artist-card img,
.similar-artist-avatar {
 width: 92px !important;
 height: 92px !important;
 border-radius: 50% !important;
 object-fit: cover !important;
 display: grid !important;
 place-items: center !important;
 margin: 0 auto 12px !important;
 background:
   radial-gradient(circle at top left, rgba(255,45,141,0.45), transparent 45%),
   radial-gradient(circle at bottom right, rgba(0,212,255,0.35), transparent 48%),
   #111827 !important;
 color: white !important;
 font-size: 2rem !important;
 font-weight: 950 !important;
}
 
.similar-artist-name {
 font-weight: 900 !important;
 color: white !important;
 line-height: 1.15 !important;
}
 
.smart-recommendation-block {
 margin-bottom: 24px !important;
}
 
.recommendation-carousel,
.studio-albums-carousel,
.top-songs-carousel {
 margin-bottom: 12px !important;
}
 
@media (max-width: 760px) {
 .artist-carousel {
   grid-auto-columns: minmax(155px, 170px) !important;
 }
 
 .similar-artists-carousel {
   grid-auto-columns: minmax(118px, 135px) !important;
 }
 
 .similar-artist-card img,
 .similar-artist-avatar {
   width: 74px !important;
   height: 74px !important;
 }
}
 
/* ============================================================
  v25 RECOMMENDATIONS FORMAT FIX
  Fixes v24 layout issue where the recommendations wrapper was still
  behaving like an album grid, causing smart recommendation blocks
  and carousel sections to sit side-by-side and overlap.
  ============================================================ */
 
#recommendationsList {
 display: block !important;
 grid-template-columns: none !important;
 gap: 0 !important;
 width: 100% !important;
}
 
#recommendationsList > .section-divider,
#recommendationsList > .smart-recommendation-block,
#recommendationsList > .artist-carousel {
 width: 100% !important;
 max-width: 100% !important;
 display: block !important;
}
 
#recommendationsList .section-divider {
 margin: 26px 0 14px !important;
 clear: both !important;
}
 
.smart-recommendation-block {
 width: 100% !important;
 max-width: 100% !important;
 overflow: hidden !important;
 box-sizing: border-box !important;
}
 
.smart-recommendation-heading {
 display: block !important;
 width: 100% !important;
 margin-bottom: 14px !important;
}
 
.artist-carousel,
.recommendation-carousel,
.studio-albums-carousel,
.top-songs-carousel {
 width: 100% !important;
 max-width: 100% !important;
 display: grid !important;
 grid-auto-flow: column !important;
 grid-auto-columns: 220px !important;
 gap: 18px !important;
 overflow-x: auto !important;
 overflow-y: hidden !important;
 padding: 8px 2px 20px !important;
 scroll-snap-type: x proximity !important;
 -webkit-overflow-scrolling: touch !important;
}
 
.artist-carousel .poster-card,
.recommendation-carousel .poster-card,
.studio-albums-carousel .poster-card,
.top-songs-carousel .poster-card {
 width: 220px !important;
 min-width: 220px !important;
 max-width: 220px !important;
 height: auto !important;
 min-height: 0 !important;
 scroll-snap-align: start !important;
 display: flex !important;
 flex-direction: column !important;
}
 
.artist-carousel .poster-image,
.recommendation-carousel .poster-image,
.studio-albums-carousel .poster-image,
.top-songs-carousel .poster-image,
.artist-carousel .poster-placeholder,
.recommendation-carousel .poster-placeholder,
.studio-albums-carousel .poster-placeholder,
.top-songs-carousel .poster-placeholder {
 width: 100% !important;
 height: 220px !important;
 min-height: 220px !important;
 max-height: 220px !important;
 aspect-ratio: 1 / 1 !important;
 object-fit: cover !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
}
 
.artist-carousel .poster-body,
.recommendation-carousel .poster-body,
.studio-albums-carousel .poster-body,
.top-songs-carousel .poster-body {
 min-height: 118px !important;
 padding: 16px 18px 18px !important;
}
 
.artist-carousel .poster-title,
.recommendation-carousel .poster-title,
.studio-albums-carousel .poster-title,
.top-songs-carousel .poster-title {
 line-height: 1.12 !important;
 display: -webkit-box !important;
 -webkit-line-clamp: 2 !important;
 -webkit-box-orient: vertical !important;
 overflow: hidden !important;
}
 
.artist-carousel .poster-subtitle,
.recommendation-carousel .poster-subtitle,
.studio-albums-carousel .poster-subtitle,
.top-songs-carousel .poster-subtitle,
.artist-carousel .poster-meta,
.recommendation-carousel .poster-meta,
.studio-albums-carousel .poster-meta,
.top-songs-carousel .poster-meta {
 line-height: 1.2 !important;
}
 
@media (max-width: 760px) {
 .artist-carousel,
 .recommendation-carousel,
 .studio-albums-carousel,
 .top-songs-carousel {
   grid-auto-columns: 165px !important;
   gap: 14px !important;
 }
 
 .artist-carousel .poster-card,
 .recommendation-carousel .poster-card,
 .studio-albums-carousel .poster-card,
 .top-songs-carousel .poster-card {
   width: 165px !important;
   min-width: 165px !important;
   max-width: 165px !important;
 }
 
 .artist-carousel .poster-image,
 .recommendation-carousel .poster-image,
 .studio-albums-carousel .poster-image,
 .top-songs-carousel .poster-image,
 .artist-carousel .poster-placeholder,
 .recommendation-carousel .poster-placeholder,
 .studio-albums-carousel .poster-placeholder,
 .top-songs-carousel .poster-placeholder {
   height: 165px !important;
   min-height: 165px !important;
   max-height: 165px !important;
 }
}
 
 
/* ============================================================
  v26 Spotify-level app polish: corrected horizontal carousels,
  sticky mini player, swipe feel, animations and share affordance.
  ============================================================ */
 
html { scroll-behavior: smooth; }
body { padding-bottom: 96px !important; }
.card { animation: bomFadeUp 0.28s ease both; }
@keyframes bomFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
 
#recommendationsList,
.related-music-panel {
 display: block !important;
 width: 100% !important;
 max-width: 100% !important;
 overflow: hidden !important;
}
 
.smart-recommendation-block {
 display: block !important;
 width: 100% !important;
 max-width: 100% !important;
 margin: 0 0 28px !important;
 padding: 20px !important;
 border-radius: 26px !important;
 border: 1px solid rgba(34, 245, 167, 0.24) !important;
 background:
   radial-gradient(circle at top left, rgba(34,245,167,0.12), transparent 30%),
   linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)) !important;
}
 
.smart-recommendation-heading {
 font-size: 1.05rem !important;
 line-height: 1.35 !important;
 margin: 0 0 16px !important;
}
 
.bom-carousel-shell {
 position: relative !important;
 width: 100% !important;
 max-width: 100% !important;
 overflow: hidden !important;
 margin: 8px 0 26px !important;
}
 
.bom-carousel {
 display: flex !important;
 flex-direction: row !important;
 align-items: stretch !important;
 gap: 18px !important;
 width: 100% !important;
 max-width: 100% !important;
 overflow-x: auto !important;
 overflow-y: hidden !important;
 padding: 8px 8px 22px !important;
 scroll-snap-type: x mandatory !important;
 scroll-padding: 8px !important;
 -webkit-overflow-scrolling: touch !important;
 scrollbar-width: thin !important;
 cursor: grab !important;
 touch-action: pan-x !important;
}
 
.bom-carousel.is-dragging { cursor: grabbing !important; scroll-snap-type: none !important; }
.bom-carousel::-webkit-scrollbar { height: 8px !important; }
.bom-carousel::-webkit-scrollbar-track { background: rgba(255,255,255,0.04) !important; border-radius: 999px !important; }
.bom-carousel::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--pink), var(--cyan)) !important; border-radius: 999px !important; }
 
.bom-carousel .poster-card {
 flex: 0 0 220px !important;
 width: 220px !important;
 min-width: 220px !important;
 max-width: 220px !important;
 min-height: 352px !important;
 height: auto !important;
 scroll-snap-align: start !important;
 display: flex !important;
 flex-direction: column !important;
 border-radius: 24px !important;
 overflow: hidden !important;
 background:
   linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)) !important;
 box-shadow: 0 14px 36px rgba(0,0,0,0.28) !important;
}
 
.bom-carousel .poster-card:hover {
 transform: translateY(-6px) scale(1.015) !important;
 box-shadow: 0 24px 58px rgba(0,0,0,0.42), 0 0 30px rgba(138,44,255,0.18) !important;
}
 
.bom-carousel .poster-image,
.bom-carousel .poster-placeholder {
 width: 220px !important;
 height: 220px !important;
 min-width: 220px !important;
 min-height: 220px !important;
 max-width: 220px !important;
 max-height: 220px !important;
 aspect-ratio: 1 / 1 !important;
 object-fit: cover !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 background:
   radial-gradient(circle at top left, rgba(255,45,141,0.18), transparent 35%),
   radial-gradient(circle at bottom right, rgba(0,212,255,0.16), transparent 38%),
   #0b1020 !important;
}
 
.bom-carousel .poster-body {
 flex: 1 !important;
 min-height: 132px !important;
 padding: 16px 18px 18px !important;
 display: flex !important;
 flex-direction: column !important;
 justify-content: flex-start !important;
}
 
.bom-carousel .poster-title {
 font-size: 1.08rem !important;
 line-height: 1.13 !important;
 margin-bottom: 6px !important;
 display: -webkit-box !important;
 -webkit-line-clamp: 2 !important;
 -webkit-box-orient: vertical !important;
 overflow: hidden !important;
}
 
.bom-carousel .poster-subtitle,
.bom-carousel .poster-meta { font-size: 0.95rem !important; line-height: 1.2 !important; }
 
.carousel-arrow {
 position: absolute !important;
 top: 42% !important;
 transform: translateY(-50%) !important;
 z-index: 8 !important;
 width: 44px !important;
 height: 44px !important;
 border-radius: 50% !important;
 border: 1px solid rgba(255,255,255,0.12) !important;
 background: rgba(7,11,21,0.74) !important;
 backdrop-filter: blur(14px) !important;
 -webkit-backdrop-filter: blur(14px) !important;
 color: white !important;
 font-size: 2rem !important;
 line-height: 1 !important;
 display: grid !important;
 place-items: center !important;
 box-shadow: 0 10px 28px rgba(0,0,0,0.34) !important;
}
.carousel-arrow-left { left: 6px !important; }
.carousel-arrow-right { right: 6px !important; }
.carousel-arrow:hover { transform: translateY(-50%) scale(1.08) !important; }
 
.similar-artists-carousel .similar-artist-card {
 flex: 0 0 150px !important;
 width: 150px !important;
 min-width: 150px !important;
 max-width: 150px !important;
 scroll-snap-align: start !important;
}
 
.sticky-player {
 position: fixed !important;
 left: 50% !important;
 bottom: 18px !important;
 transform: translateX(-50%) !important;
 z-index: 200 !important;
 width: min(760px, calc(100% - 28px)) !important;
 min-height: 68px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 gap: 12px !important;
 padding: 10px 12px !important;
 border-radius: 24px !important;
 border: 1px solid rgba(255,255,255,0.14) !important;
 background:
   radial-gradient(circle at top left, rgba(255,45,141,0.28), transparent 32%),
   radial-gradient(circle at bottom right, rgba(0,212,255,0.24), transparent 34%),
   rgba(8, 11, 24, 0.88) !important;
 backdrop-filter: blur(22px) !important;
 -webkit-backdrop-filter: blur(22px) !important;
 box-shadow: 0 22px 64px rgba(0,0,0,0.45), 0 0 40px rgba(138,44,255,0.18) !important;
 animation: playerSlideUp 0.28s ease both !important;
}
@keyframes playerSlideUp { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
.sticky-player-main { flex: 1 !important; min-width: 0 !important; display: flex !important; align-items: center !important; gap: 12px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important; }
.sticky-player-cover { width: 48px !important; height: 48px !important; border-radius: 14px !important; overflow: hidden !important; flex: 0 0 48px !important; display: grid !important; place-items: center !important; background: linear-gradient(135deg, rgba(255,45,141,0.36), rgba(0,212,255,0.26)) !important; color: white !important; font-weight: 900 !important; }
.sticky-player-cover img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.sticky-player-text { min-width: 0 !important; }
.sticky-player-title { font-weight: 950 !important; color: white !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.sticky-player-artist { color: var(--muted) !important; font-size: 0.9rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.sticky-player-action { flex: 0 0 auto !important; border-radius: 999px !important; padding: 12px 16px !important; }
#shareSelectedItemBtn { border-radius: 999px !important; }
 
@media (max-width: 760px) {
 body { padding-bottom: 112px !important; }
 .bom-carousel { gap: 14px !important; padding-bottom: 18px !important; }
 .bom-carousel .poster-card { flex-basis: 165px !important; width: 165px !important; min-width: 165px !important; max-width: 165px !important; min-height: 286px !important; }
 .bom-carousel .poster-image,
 .bom-carousel .poster-placeholder { width: 165px !important; height: 165px !important; min-width: 165px !important; min-height: 165px !important; max-width: 165px !important; max-height: 165px !important; }
 .carousel-arrow { display: none !important; }
 .sticky-player { bottom: 10px !important; border-radius: 20px !important; }
}
 
 
 
/* v27: Send to friend should only appear in selected album/song context */
.hidden {
 display: none !important;
}
 
.send-to-friend,
.send-to-friend-btn,
.share-selected-btn,
.share-friend-control {
 margin-top: 14px;
}
 
#selectedItemDetail .send-to-friend,
#selectedItemDetail .send-to-friend-btn,
#selectedItemDetail .share-selected-btn,
#selectedItemDetail .share-friend-control {
 display: inline-flex;
}
 
 
/* ============================================================
  v29 SOCIAL / SPOTIFY STYLE POLISH
  Public profiles, follower system, improved share card.
  ============================================================ */
 
.profile-actions-row,
.profile-edit-row {
 display: flex;
 gap: 12px;
 align-items: center;
 flex-wrap: wrap;
 margin: 14px 0;
}
 
.profile-edit-row input {
 flex: 1 1 220px;
 min-width: 0;
 margin-bottom: 0;
}
 
.profile-social-panel {
 margin-top: 22px;
 padding-top: 18px;
 border-top: 1px solid rgba(255,255,255,0.08);
}
 
.profile-social-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 gap: 12px;
 margin-bottom: 16px;
}
 
.selected-share-panel {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 width: 100%;
 margin-top: 18px;
 padding: 16px 18px;
 border-radius: 22px;
 border: 1px solid rgba(0,212,255,0.28);
 background:
   radial-gradient(circle at top left, rgba(255,45,141,0.18), transparent 32%),
   radial-gradient(circle at bottom right, rgba(0,212,255,0.20), transparent 34%),
   rgba(255,255,255,0.035);
 box-shadow: 0 16px 34px rgba(0,0,0,0.22);
}
 
.selected-share-title {
 font-weight: 900;
 color: #fff;
}
 
.selected-share-subtitle {
 color: var(--muted);
 margin-top: 4px;
 font-size: 0.95rem;
}
 
.send-to-friend-btn {
 white-space: nowrap;
}
 
.bom-carousel-shell {
 position: relative;
 width: 100%;
 max-width: 100%;
 overflow: hidden;
}
 
.bom-carousel {
 width: 100%;
 display: flex !important;
 flex-direction: row !important;
 gap: 18px;
 overflow-x: auto;
 overflow-y: hidden;
 padding: 8px 2px 22px;
 scroll-snap-type: x proximity;
 -webkit-overflow-scrolling: touch;
}
 
.bom-carousel .poster-card {
 flex: 0 0 220px !important;
 width: 220px !important;
 min-width: 220px !important;
 max-width: 220px !important;
 height: auto !important;
 min-height: 0 !important;
 scroll-snap-align: start;
}
 
.bom-carousel .poster-image,
.bom-carousel .poster-placeholder {
 height: 220px !important;
 min-height: 220px !important;
 max-height: 220px !important;
 aspect-ratio: 1 / 1;
 object-fit: cover;
}
 
.bom-carousel .poster-body {
 min-height: 112px;
}
 
.bom-carousel .poster-title {
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
 
.carousel-arrow {
 position: absolute;
 top: 42%;
 transform: translateY(-50%);
 z-index: 3;
 width: 42px;
 height: 42px;
 border-radius: 50% !important;
 display: grid;
 place-items: center;
 opacity: 0.94;
}
 
.carousel-arrow-left { left: 6px; }
.carousel-arrow-right { right: 6px; }
 
@media (max-width: 760px) {
 .selected-share-panel {
   flex-direction: column;
   align-items: stretch;
 }
 
 .bom-carousel .poster-card {
   flex-basis: 165px !important;
   width: 165px !important;
   min-width: 165px !important;
   max-width: 165px !important;
 }
 
 .bom-carousel .poster-image,
 .bom-carousel .poster-placeholder {
   height: 165px !important;
   min-height: 165px !important;
   max-height: 165px !important;
 }
}
 
 
/* v31: selected-view back button and polished related carousels */
.nav-left { cursor: pointer; user-select: none; }
.nav-left:hover .nav-logo { transform: scale(1.04); box-shadow: 0 0 24px rgba(0, 212, 255, 0.18); }
.selected-back-btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px 0; padding: 12px 16px !important; border-radius: 999px !important; background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: none !important; color: var(--text) !important; }
.selected-back-btn:hover { transform: translateX(-2px) !important; border-color: rgba(0,212,255,0.38) !important; }
.related-music-panel { position: relative; z-index: 2; margin-top: 28px; }
.related-music-panel .bom-carousel-shell { width: 100%; max-width: 100%; overflow: hidden; }
.related-music-panel .bom-carousel { display: grid !important; grid-auto-flow: column !important; grid-auto-columns: 210px !important; gap: 18px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 8px 2px 20px !important; scroll-snap-type: x proximity !important; -webkit-overflow-scrolling: touch !important; }
.related-music-panel .poster-card { width: 210px !important; min-width: 210px !important; max-width: 210px !important; min-height: 0 !important; height: auto !important; scroll-snap-align: start; }
.related-music-panel .poster-image, .related-music-panel .poster-placeholder { width: 100% !important; height: 210px !important; min-height: 210px !important; max-height: 210px !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; }
.related-music-panel .poster-body { min-height: 112px; }
@media (max-width: 760px) { .related-music-panel .bom-carousel { grid-auto-columns: 160px !important; } .related-music-panel .poster-card { width: 160px !important; min-width: 160px !important; max-width: 160px !important; } .related-music-panel .poster-image, .related-music-panel .poster-placeholder { height: 160px !important; min-height: 160px !important; max-height: 160px !important; } }
 
/* ============================================================
  v32 MODULAR PRODUCTION UI POLISH
  Additive only: keep the full existing stylesheet and append this.
  ============================================================ */
.bom-page { transform: translateY(0); opacity: 1; transition: opacity 240ms ease, transform 240ms ease, filter 240ms ease; }
.bom-is-transitioning .bom-page:not(.hidden) { animation: bomPageIn 260ms ease both; }
@keyframes bomPageIn { from { opacity: 0; transform: translateY(14px) scale(0.992); filter: blur(6px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
.detail-panel { animation: bomDetailRise 320ms cubic-bezier(.2,.75,.22,1) both; }
@keyframes bomDetailRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
#selectedItemDetail.swipe-next .detail-panel { animation: bomSwipeNext 260ms ease both; }
#selectedItemDetail.swipe-prev .detail-panel { animation: bomSwipePrev 260ms ease both; }
@keyframes bomSwipeNext { from { opacity: .5; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bomSwipePrev { from { opacity: .5; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
.sticky-player { backdrop-filter: blur(24px) saturate(1.25) !important; -webkit-backdrop-filter: blur(24px) saturate(1.25) !important; border: 1px solid rgba(0,212,255,0.28) !important; background: radial-gradient(circle at 8% 50%, rgba(255,45,141,0.30), transparent 30%), radial-gradient(circle at 92% 50%, rgba(0,212,255,0.28), transparent 34%), linear-gradient(90deg, rgba(8,12,28,0.94), rgba(8,14,34,0.90)) !important; box-shadow: 0 18px 48px rgba(0,0,0,0.42), 0 0 36px rgba(138,44,255,0.20) !important; animation: bomPlayerIn 280ms ease both; }
@keyframes bomPlayerIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.sticky-player-main:active, .sticky-player-action:active, .top-nav-btn:active, .poster-card:active { transform: scale(.985) !important; }
.bom-carousel { scroll-behavior: smooth !important; overscroll-behavior-x: contain !important; touch-action: pan-x !important; mask-image: linear-gradient(90deg, transparent 0, black 28px, black calc(100% - 28px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, black 28px, black calc(100% - 28px), transparent 100%); }
.bom-carousel .poster-card { scroll-snap-align: start !important; will-change: transform !important; }
.bom-carousel.is-dragging .poster-card { pointer-events: none !important; }
.selected-share-panel { width: 100% !important; max-width: 640px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 14px 16px !important; margin-top: 14px !important; border-radius: 22px !important; border: 1px solid rgba(0,212,255,0.22) !important; background: linear-gradient(90deg, rgba(255,45,141,0.12), rgba(0,212,255,0.12)) !important; }
.selected-share-title { font-weight: 900 !important; color: white !important; }
.selected-share-subtitle { color: var(--muted) !important; font-size: .92rem !important; margin-top: 2px !important; }
.selected-back-btn { transition: transform 180ms ease, background 180ms ease, border-color 180ms ease !important; }
.selected-back-btn:active { transform: translateX(-4px) scale(.98) !important; }
.nav-left { cursor: pointer !important; }
.nav-left:active { transform: scale(.985) !important; }
@media (max-width: 760px) { .selected-share-panel { align-items: stretch !important; flex-direction: column !important; } .selected-share-panel .send-to-friend-btn { width: 100% !important; justify-content: center !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
 
 
/* ============================================================
  v33 profile average rating + admin add album/tracks
  ============================================================ */
.profile-stats-grid-v33 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; }
.profile-stat-card-wide { background: linear-gradient(135deg, rgba(255,211,77,0.10), rgba(0,212,255,0.08)) !important; }
.admin-create-panel { border-color: rgba(0,255,163,0.24) !important; background: linear-gradient(180deg, rgba(0,255,163,0.05), rgba(10,14,34,0.76)) !important; }
.admin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: end; }
.admin-form-grid input, .admin-form-grid select { width: 100%; min-height: 48px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.045); color: var(--text); padding: 12px 14px; }
.admin-form-grid select option { background: #0b0f1a; color: white; }

.admin-track-listing-editor { scroll-margin-top: 24px; }
.admin-track-listing-header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.admin-track-listing-header h3 { margin: 0; }
.admin-track-listing-header p { margin: 6px 0 0; }
.admin-track-listing-labels,
.admin-track-listing-row { display: grid; grid-template-columns: 82px minmax(220px, 1.3fr) minmax(200px, 1fr) 110px; gap: 12px; align-items: center; }
.admin-track-listing-labels { padding: 18px 10px 8px; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.admin-track-listing-row { padding: 10px; border-top: 1px solid rgba(255,255,255,.09); }
.admin-track-listing-row input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; color: var(--text); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; }
.admin-track-listing-row button { min-height: 44px; padding: 9px 12px !important; }
.admin-track-listing-actions { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; }

@media (max-width: 780px) {
  .admin-track-listing-labels { display: none; }
  .admin-track-listing-row { grid-template-columns: 68px minmax(0, 1fr); }
  .admin-track-listing-row [data-admin-track-artist] { grid-column: 2; }
  .admin-track-listing-row button { grid-column: 2; justify-self: start; }
  .admin-track-listing-header,
  .admin-track-listing-actions { align-items: stretch; flex-direction: column; }
}
.admin-add-album-btn, .admin-add-track-btn { min-height: 48px; }
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 18px 0 32px;
}

.chart-card {
  width: 100%;
  min-height: 120px;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  color: white;
  text-align: left;
}

.chart-rank-badge {
  font-size: 1.4rem;
  font-weight: 900;
  color: #22f5a7;
}

.chart-title {
  font-size: 1.1rem;
  font-weight: 900;
}

.chart-artist,
.chart-count {
  color: #cbd5e1;
}

.chart-score {
  text-align: right;
  font-weight: 900;
}

.chart-stars {
  color: #facc15;
}

/* FINAL CHART CARD OVERRIDE */

.chart-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 18px !important;
  margin: 22px 0 36px !important;
}

.chart-card {
  all: unset;
  box-sizing: border-box !important;
  min-height: 120px !important;
  display: grid !important;
  grid-template-columns: 60px 1fr 90px !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at top left, rgba(255, 45, 141, 0.18), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: white !important;
  cursor: pointer !important;
}

.chart-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(34, 245, 167, 0.55) !important;
}

.chart-rank-badge {
  font-size: 1.5rem !important;
  font-weight: 950 !important;
  color: #22f5a7 !important;
}

.chart-main {
  min-width: 0 !important;
}

.chart-title {
  font-size: 1.15rem !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  color: white !important;
}

.chart-artist {
  margin-top: 5px !important;
  font-size: 0.95rem !important;
  color: #cbd5e1 !important;
}

.chart-score {
  text-align: right !important;
  font-weight: 900 !important;
}

.chart-stars {
  color: #facc15 !important;
  font-size: 1.05rem !important;
}

.chart-count {
  margin-top: 4px !important;
  font-size: 0.8rem !important;
  color: #cbd5e1 !important;
}

/* TWO COLUMN LAYOUT */
.charts-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* MOBILE */
@media (max-width: 768px) {
  .charts-two-col {
    grid-template-columns: 1fr;
  }
}

/* LIST STYLE */
.chart-list {
  margin-top: 16px;
}

.chart-row {
  display: grid;
  grid-template-columns: 60px 1fr 80px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
}

.chart-row:hover {
  background: rgba(255,255,255,0.05);
}

.chart-rank {
  font-weight: 900;
  color: #22f5a7;
  font-size: 1.2rem;
}

.chart-title {
  font-weight: 900;
  color: white;
}

.chart-artist {
  font-size: 0.9rem;
  color: #cbd5e1;
}

.chart-meta {
  text-align: right;
  font-weight: 900;
  color: #facc15;
}

.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 20px;
}

.charts-grid > div {
  background: rgba(255,255,255,0.03);
  padding: 16px;
  border-radius: 16px;
}

/* Mobile fallback */
@media (max-width: 800px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }
}

.chart-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chart-row {
  display: grid;
  grid-template-columns: 52px 58px 1fr 76px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
}

.chart-row:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(34,245,167,0.45);
  transform: translateY(-1px);
}

.chart-rank {
  font-weight: 950;
  color: #22f5a7;
  font-size: 1.05rem;
}

.chart-art img,
.chart-art-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.chart-title {
  font-weight: 950;
  color: white;
  line-height: 1.15;
}

.chart-artist {
  margin-top: 4px;
  color: #cbd5e1;
  font-size: 0.9rem;
}

.chart-meta {
  text-align: right;
  font-weight: 900;
  color: #facc15;
}

.chart-row {
  cursor: pointer;
  transition: all 0.15s ease;
}

.chart-row:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.03);
}

.chart-row:active {
  transform: scale(0.98);
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 28px;
  background: rgba(10, 12, 28, 0.92);
  border: 1px solid rgba(120, 80, 255, 0.45);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  backdrop-filter: blur(14px);
}

.sticky-player {
  bottom: 16px;
}

body {
  padding-bottom: 170px;
}

.nav-left {
  cursor: pointer;
}

.keep-listening-panel {
  margin-top: 28px;
}

.keep-listening-panel h3 {
  margin-bottom: 18px;
  font-size: 1.3rem;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

.album-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, border 0.2s ease;
}

.album-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,255,200,0.4);
}

.album-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.album-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.album-card-body strong {
  font-size: 0.95rem;
}

.album-card-body span {
  opacity: 0.7;
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  .container {
    padding: 12px;
  }

  .hero-logo {
    max-width: 180px;
  }

  .glass-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 10px;
  }

  .nav-left {
    display: none;
  }

  .nav-right {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .top-nav-btn {
    width: 100%;
    font-size: 14px;
    padding: 12px 10px;
  }

  .card {
    padding: 16px;
    border-radius: 22px;
  }

  .detail-hero {
    grid-template-columns: 1fr;
  }

  .detail-hero img,
  .large-cover,
  .poster-card img {
    width: 100%;
    max-width: 100%;
  }

  .charts-grid,
  .artist-albums-grid,
  .recommendation-grid {
    grid-template-columns: 1fr;
  }

  .sticky-player {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }

  body {
    padding-bottom: 110px;
  }
}

.mobile-more-nav {
  display: none;
}

@media (max-width: 600px) {
  .nav-right {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .nav-right .top-nav-btn {
    flex: 1;
    font-size: 13px;
    padding: 11px 8px;
  }

  .nav-right .top-nav-btn[data-target="librarySection"],
  .nav-right .top-nav-btn[data-target="detailSection"],
  .nav-right .top-nav-btn[data-target="adminSection"] {
    display: none;
  }

  .mobile-more-nav {
    display: block;
    flex: 1;
    padding: 11px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: white;
    border: 1px solid rgba(255,255,255,0.16);
    font-weight: 700;
  }
}

.artist-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: #67e8f9;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.artist-link-btn:hover {
  color: white;
}

@media (max-width: 768px) {

  .selected-item-meta {
    gap: 8px;
  }

  .selected-item-meta p,
  .selected-item-meta div {
    margin: 2px 0;
    line-height: 1.3;
    font-size: 14px;
  }

  .selected-item-meta strong {
    display: inline-block;
    min-width: 110px;
    opacity: 0.75;
    font-size: 13px;
  }

  .selected-item-meta .rating-stars {
    transform: scale(0.92);
    transform-origin: left center;
  }

  .selected-item-meta .album-rating-box {
    width: fit-content;
  }

}

.album-rating-box {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 10px 14px;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(8px);
}

.album-rating-box {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 8px 24px rgba(255,255,255,0.06);
}

@media (max-width: 768px) {
  .detail-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 14px 0;
  }

  .detail-meta-label,
  .detail-meta-value {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    padding: 8px 12px;
    backdrop-filter: blur(10px);
  }

  .detail-meta-label {
    font-size: 12px;
    opacity: 0.75;
    margin-bottom: -6px;
  }

  .detail-meta-value {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
  }

  .album-rating-box {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.28);
  }
}

.large-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 28px;
  display: block;
}

.large-cover-image {
  transition: opacity .25s ease;
  background: rgba(255,255,255,.04);
}

.artist-image-wrap {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
}

.artist-initial-large {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
  font-weight: 900;
  color: white;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.28), transparent 28%),
    linear-gradient(135deg, #d946ef, #22d3ee);
}

.artist-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 28px;
}

.artist-banner-fallback {
  width: 100%;
  min-height: 220px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 30%),
    linear-gradient(135deg, #d946ef, #22d3ee);
}

.artist-banner-initial {
  font-size: 96px;
  font-weight: 900;
  color: white;
}

.song-mini-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}

.song-mini-card {
  background: linear-gradient(135deg, #ff2d95, #22d3ee);
  border: none;
  border-radius: 18px;
  padding: 14px 16px;
  color: white;
  cursor: pointer;
  width: 240px;
  max-width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.song-mini-card strong {
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
}

.song-mini-card span {
  font-size: .82rem;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-artist-link {
  background: none;
  border: none;
  padding: 0;
  margin: 4px 0 20px;
  color: #7dd3fc;
  font-size: 1.35rem;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.song-mini-card {
  min-height: 92px;
  overflow: hidden;
}

.song-mini-card strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.song-mini-album {
  display: block;
  color: rgba(255,255,255,.9);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-artist-link,
.song-album-link {
  background: none;
  border: none;
  padding: 0;
  color: #7dd3fc;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.song-artist-link {
  font-size: 1.35rem;
  margin: 4px 0 20px;
}

.song-album-link {
  font-size: 1rem;
}

.detail-panel {
  position: relative;
}

.song-album-feature-card {
  position: absolute;
  top: 120px;
  right: 80px;
  width: 260px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: rgba(255,255,255,.08);
  color: white;
  padding: 14px;
  text-align: left;
  cursor: pointer;
}

.song-album-feature-card .media-cover {
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 12px;
}

.song-album-feature-card strong,
.song-album-feature-card span,
.song-album-feature-card small {
  display: block;
}

.song-album-feature-card small {
  color: #7dd3fc;
  margin-top: 6px;
  font-weight: 800;
}

@media (max-width: 800px) {
  .song-album-feature-card {
    position: static;
    width: 100%;
    margin-top: 20px;
  }
}

button.song-album-link {
  appearance: none;
  -webkit-appearance: none;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: #7dd3fc !important;
  font: inherit !important;
  font-weight: 900 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

.save-track-btn {
  min-width: 44px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
}

.track-col-stars {
    white-space: nowrap;
}

/* FINAL simple rating box override */

.track-col-stars {
  white-space: nowrap !important;
  overflow: visible !important;
}

.star-rating-block {
  display: inline-flex !important;
  align-items: center !important;
}

.star-rating {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;

  width: 245px !important;
  min-width: 245px !important;
  max-width: 245px !important;

  padding: 10px 14px !important;
  border-radius: 16px !important;

  background: rgba(255,255,255,0.42) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow: none !important;
}

.star-option {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;

  width: auto !important;
  min-width: 0 !important;
  height: auto !important;

  font-size: 1.25rem !important;
  line-height: 1 !important;
  color: rgba(25,25,25,0.95) !important;
}

.star-option.active-star {
  color: #ffd34d !important;
  text-shadow: none !important;
}

.star-score-text {
  display: none !important;
}

.search-tabs {
  display: flex;
  gap: 10px;
  margin: 18px 0 20px;
  flex-wrap: wrap;
}

.search-tab {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: white;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 900;
  cursor: pointer;
}

.search-tab.active-search-tab {
  background: linear-gradient(135deg, #ff2d8d, #00d4ff);
  border-color: rgba(255,255,255,0.35);
}

.artist-info-toggle {
  display: none;
}

@media (max-width: 700px) {

  .artist-info-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 12px 0 18px;
    padding: 12px 20px;

    border-radius: 999px;

    background: rgba(255,255,255,0.10);

    border: 1px solid rgba(255,255,255,0.20);

    color: white;

    font-weight: 800;
  }

  .artist-info-panel.collapsed {
    display: none;
  }

}

.album-reviews-section {
  margin-top: 32px;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.review-write-box {
  margin-top: 16px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.review-write-box label {
  display: block;
  margin-bottom: 10px;
  font-weight: 900;
  color: white;
}

.review-write-box textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.25);
  color: white;
  padding: 14px;
  font-size: 1rem;
}

.review-footer {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.review-footer button {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 900;
  color: white;
  background: linear-gradient(135deg, #ff2d8d, #00d4ff);
}

.community-reviews {
  margin-top: 24px;
}

.review-card {
  margin-top: 12px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.review-card p {
  margin: 0 0 10px;
  color: white;
}

.review-date {
  color: var(--muted);
  font-size: 0.9rem;
}

.review-actions {
  display: flex;
  align-items: center;
  margin-top: 12px;
}

.review-like-btn,
.review-like-count {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--muted);
  background: rgba(255,255,255,0.06);
  font-size: 0.9rem;
  font-weight: 850;
}

.review-like-btn { cursor: pointer; }
.review-like-btn:hover,
.review-like-btn.is-liked {
  color: white;
  border-color: rgba(0,212,255,0.38);
  background: rgba(0,212,255,0.12);
}

.review-comment-controls { margin-top: 8px; }

.review-comment-toggle,
.review-comment-actions button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 850;
  padding: 5px 0;
  cursor: pointer;
}

.review-comment-toggle:hover,
.review-comment-actions button:hover { color: white; }

.review-comments {
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.09);
}

.review-comment {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.review-comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: .82rem;
}

.review-comment p { margin: 5px 0 0; font-size: .94rem; }

.review-comment-actions { display: flex; gap: 12px; }
.review-comment-actions .danger-link { color: #ff7b9d; }

.review-comment-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.review-comment textarea,
.review-comment-form textarea {
  flex: 1;
  width: 100%;
  min-height: 42px;
  max-height: 110px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: white;
  padding: 10px 12px;
}

.review-comment-form button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  color: white;
  font-weight: 850;
  background: linear-gradient(135deg, #ff2d8d, #00d4ff);
}

.review-comment-message { margin: 6px 0 0; }

.review-rating {
  color: #ffd34d;
  font-weight: 950;
  margin-bottom: 8px;
}

.reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.review-count {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  font-weight: 900;
}

.posted-review-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(0, 214, 160, 0.10);
  border: 1px solid rgba(0, 214, 160, 0.35);
}

.posted-review-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.posted-review-top button {
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 900;
  color: white;
  background: linear-gradient(135deg, #ff2d8d, #00d4ff);
}

.hidden {
  display: none !important;
}

.album-activity-line {
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
}

/* Mobile fix for track rating rows */
@media (max-width: 600px) {
  .track-table,
  .track-table thead,
  .track-table tbody,
  .track-table tr,
  .track-table th,
  .track-table td {
    display: block;
    width: 100%;
  }

  .track-table thead {
    display: none;
  }

  .track-table tr {
    margin-bottom: 18px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
  }

  .track-table td {
    padding: 8px 0;
  }

  .track-table td:nth-child(1)::before {
    content: "Track ";
    font-weight: 700;
  }

  .track-table td:nth-child(3)::before {
    content: "Average: ";
    font-weight: 700;
  }

  .track-table td:nth-child(4)::before {
    content: "Your rating: ";
    font-weight: 700;
  }

  .track-table td:nth-child(5)::before {
    content: "Rate: ";
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .track-table .star-rating {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  .track-table .star-option {
    font-size: 1rem !important;
  }
}

.account-dropdown {
  position: absolute;
  z-index: 10000;
  width: min(310px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid rgba(170, 72, 255, 0.55);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(37, 17, 58, 0.98),
      rgba(5, 34, 49, 0.98)
    );
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(174, 50, 255, 0.18);
  backdrop-filter: blur(18px);
}

.account-dropdown-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.account-dropdown-header strong {
  color: #ffffff;
  font-size: 1.05rem;
}

.account-dropdown-header span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.account-dropdown button {
  width: 100%;
  margin: 4px 0;
  padding: 13px 14px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-align: left;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.account-dropdown button:hover,
.account-dropdown button:focus {
  background: rgba(255, 255, 255, 0.16);
}

.account-dropdown .account-logout-btn {
  color: #ffb8c8;
}

/* ============================================================
   v45 CLICKABLE REVIEW MEMBERS
   ============================================================ */

.review-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.review-member-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  font-size: 1.05rem;
  font-weight: 950;
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 45, 141, 0.95),
      transparent 58%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(0, 212, 255, 0.95),
      transparent 60%
    ),
    #111827;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.review-member-info {
  min-width: 0;
}

.review-member-handle {
  color: white;
  font-weight: 950;
}

.clickable-profile-handle {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #22f5a7;
  background: transparent;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
}

.clickable-profile-handle:hover {
  color: #00d4ff;
  text-decoration: underline;
  transform: none;
}

.review-member-number {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 750;
}

.review-author-line {
  margin-top: 5px;
}

.review-card > p {
  margin-top: 0;
  line-height: 1.55;
}

/* ============================================================
   v49 SETTINGS + SPOTIFY CONNECTION
   ============================================================ */

.settings-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.settings-kicker {
  margin-bottom: 7px;
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.settings-panel {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at top left,
      rgba(138, 44, 255, 0.12),
      transparent 34%
    ),
    rgba(255, 255, 255, 0.035);
}

.spotify-settings-panel {
  border-color: rgba(29, 185, 84, 0.34);
  background:
    radial-gradient(
      circle at top left,
      rgba(29, 185, 84, 0.14),
      transparent 35%
    ),
    rgba(255, 255, 255, 0.035);
}

.settings-service-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.settings-service-header h3 {
  margin: 0 0 5px;
}

.settings-service-header p {
  margin: 0;
}

.spotify-service-icon,
.apple-service-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  font-size: 1.8rem;
  font-weight: 950;
}

.spotify-service-icon {
  color: #07120b;
  background: #1db954;
  box-shadow: 0 10px 30px rgba(29, 185, 84, 0.25);
}

.apple-service-icon {
  background:
    linear-gradient(
      135deg,
      rgba(255, 45, 141, 0.95),
      rgba(138, 44, 255, 0.92)
    );
}

.spotify-status-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}

.spotify-status-dot {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 16px rgba(148, 163, 184, 0.35);
}

.spotify-status-card.spotify-connected {
  border-color: rgba(29, 185, 84, 0.42);
  background: rgba(29, 185, 84, 0.08);
}

.spotify-status-card.spotify-connected
.spotify-status-dot {
  background: #1ed760;
  box-shadow: 0 0 18px rgba(30, 215, 96, 0.65);
}

.spotify-account-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 15px;
  border: 1px solid rgba(29, 185, 84, 0.25);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}

.spotify-account-image,
.spotify-account-placeholder {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
}

.spotify-account-image {
  display: block;
  object-fit: cover;
}

.spotify-account-placeholder {
  display: grid;
  place-items: center;
  color: #07120b;
  background: #1db954;
  font-size: 1.5rem;
  font-weight: 950;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

#connectSpotifyBtn {
  color: #06140a;
  background: #1ed760;
  box-shadow: 0 12px 30px rgba(30, 215, 96, 0.24);
}

#spotifyMessage {
  min-height: 20px;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .settings-panel {
    padding: 18px;
  }

  .settings-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-actions button {
    width: 100%;
  }
}

/* ============================================================
   SPOTIFY PLAYLIST EXPORT
   ============================================================ */

.spotify-export-progress {
    margin-top: 18px;
}

.spotify-progress-track {
    width: 100%;
    height: 10px;
    background: #e6e6e6;
    border-radius: 999px;
    overflow: hidden;
}

.spotify-progress-fill {
    width: 0%;
    height: 100%;
    background: #1db954;
    transition: width 0.3s ease;
}

.spotify-progress-text {
    margin-top: 8px;
    font-size: 0.9rem;
    color: #666;
}

.spotify-export-success {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 20px;
    padding: 18px;
    border-radius: 12px;
    background: #f5fff8;
    border: 1px solid #b9e9c9;
}

.spotify-export-success-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #1db954;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: bold;
    flex-shrink: 0;
}

.spotify-export-success h3 {
    margin: 0 0 8px;
}

.spotify-export-success p {
    margin: 6px 0;
}

.spotify-open-playlist-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 18px;
    background: #1db954;
    color: white;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    transition: background 0.2s ease;
}

.spotify-open-playlist-btn:hover {
    background: #189b46;
}

.spotify-unmatched-details {
    margin-top: 18px;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
}

.spotify-unmatched-details summary {
    cursor: pointer;
    padding: 12px 16px;
    background: #fafafa;
    font-weight: 600;
    user-select: none;
}

.spotify-unmatched-list {
    max-height: 260px;
    overflow-y: auto;
    background: white;
}

.spotify-unmatched-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 12px 16px;
    border-top: 1px solid #eee;
}

.spotify-unmatched-row strong {
    display: block;
    color: #222;
}

.spotify-unmatched-row span {
    color: #666;
    text-align: right;
    font-size: 0.9rem;
}

.spotify-export-success .small {
    font-size: 0.9rem;
    color: #666;
}

@media (max-width: 700px) {

    .spotify-export-success {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .spotify-unmatched-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .spotify-unmatched-row span {
        text-align: left;
    }

    .spotify-open-playlist-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

/* ============================================================
   SPOTIFY PLAYLIST BUTTONS
   ============================================================ */

.spotify-playlist-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.spotify-sync-playlist-btn {
    display: flex;
    align-items: center;
    gap: 16px;

    width: 100%;
    min-height: 82px;

    padding: 18px;

    border: 1px solid rgba(29,185,84,.45);
    border-radius: 14px;

    background: rgba(29,185,84,.08);

    color: inherit;

    cursor: pointer;

    transition:
        background .2s,
        border-color .2s,
        transform .2s;

    text-align: left;
}

.spotify-sync-playlist-btn:hover {

    background: rgba(29,185,84,.18);

    border-color: #1DB954;

    transform: translateY(-2px);
}

.spotify-sync-playlist-btn:disabled {

    opacity: .55;

    cursor: wait;

    transform: none;
}

.spotify-sync-rating {

    width: 52px;
    height: 52px;

    border-radius: 50%;

    background: #1DB954;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    font-weight: 700;

    flex-shrink: 0;
}

.spotify-sync-button-text {

    display: flex;

    flex-direction: column;
}

.spotify-sync-button-text strong {

    font-size: 16px;

    margin-bottom: 4px;
}

.spotify-sync-button-text small {

    color: #999;

    font-size: 13px;
}

@media (max-width:700px) {

    .spotify-playlist-buttons {

        grid-template-columns: 1fr;
    }
}


.spotify-top-100-btn {
  grid-column: 1 / -1;
  border-color: rgba(255, 193, 7, 0.55);
  background: rgba(255, 193, 7, 0.1);
}

.spotify-top-100-btn:hover {
  border-color: #ffc107;
  background: rgba(255, 193, 7, 0.18);
}

.spotify-top-100-btn .spotify-sync-rating {
  background: #ffc107;
  color: #111;
}

/* ============================================================
   SPOTIFY SYNC RESULT CONTRAST FIX - v2.1
   ============================================================ */

.spotify-export-success {
  background:
    radial-gradient(circle at top left, rgba(29, 185, 84, 0.24), transparent 38%),
    linear-gradient(180deg, rgba(13, 48, 31, 0.98), rgba(8, 28, 22, 0.98)) !important;
  border: 1px solid rgba(29, 185, 84, 0.7) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34) !important;
}

.spotify-export-success h3,
.spotify-export-success p,
.spotify-export-success strong {
  color: #ffffff !important;
}

.spotify-export-success .small {
  color: rgba(255, 255, 255, 0.78) !important;
}

.spotify-unmatched-details {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.spotify-unmatched-details summary {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
}

.spotify-unmatched-list {
  background: rgba(7, 11, 21, 0.96) !important;
}

.spotify-unmatched-row {
  border-top-color: rgba(255, 255, 255, 0.09) !important;
}

.spotify-unmatched-row strong {
  color: #ffffff !important;
}

.spotify-unmatched-row span {
  color: rgba(255, 255, 255, 0.68) !important;
}

/* ============================================================
   PLAY WITH YOUR MUSIC PROVIDER
   ============================================================ */

.music-provider-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 20px 0;
  padding: 18px;
  border: 1px solid rgba(29, 185, 84, 0.48);
  border-radius: 20px;
  background:
    radial-gradient(
      circle at top left,
      rgba(29, 185, 84, 0.18),
      transparent 42%
    ),
    rgba(255, 255, 255, 0.035);
}

.music-provider-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.music-provider-kicker {
  color: #22f5a7;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.music-provider-copy strong {
  color: #ffffff;
  font-size: 1.04rem;
}

.music-provider-copy span {
  color: var(--muted);
  line-height: 1.35;
}

.music-provider-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 190px;
  border: 1px solid rgba(29, 185, 84, 0.74);
  border-radius: 999px;
  background: #1db954;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(29, 185, 84, 0.24);
}

.music-provider-play-btn:hover {
  background: #20c65a;
  transform: translateY(-2px);
}

.music-provider-play-btn:disabled {
  opacity: 0.68;
  cursor: wait;
  transform: none;
}

.music-provider-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  font-weight: 950;
}

@media (max-width: 700px) {
  .music-provider-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .music-provider-play-btn {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   EMBEDDED SPOTIFY PLAYER
   ============================================================ */

.music-provider-panel {
  display: block;
}

.music-provider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.music-provider-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.spotify-embed-container {
  width: 100%;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 16px;
}

.spotify-embed-frame {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 16px;
  background: #121212;
}

.spotify-embed-loading,
.spotify-embed-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 92px;
  padding: 18px;
  border: 1px solid rgba(29, 185, 84, 0.35);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.22);
  color: #ffffff;
}

.spotify-embed-error {
  border-color: rgba(255, 193, 7, 0.45);
}

.spotify-embed-error span {
  color: var(--muted);
}

.spotify-embed-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 4px 0;
}

.spotify-open-externally-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border: 1px solid rgba(29, 185, 84, 0.62);
  border-radius: 999px;
  background: rgba(29, 185, 84, 0.13);
  color: #ffffff;
  font-weight: 850;
  text-decoration: none;
}

.spotify-open-externally-btn:hover {
  background: rgba(29, 185, 84, 0.24);
}

@media (max-width: 700px) {
  .music-provider-header,
  .spotify-embed-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .music-provider-actions {
    width: 100%;
  }

  .spotify-open-externally-btn {
    width: 100%;
  }
}

/* ============================================================
   PROFESSIONAL TRACK PREVIEWS
   ============================================================ */

.track-col-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.track-preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 96px;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid rgba(34, 245, 167, 0.38);
  border-radius: 999px;
  background:
    linear-gradient(
      135deg,
      rgba(34, 245, 167, 0.13),
      rgba(62, 197, 255, 0.08)
    );
  color: #f7fbff;
  font-size: 0.86rem;
  font-weight: 850;
  box-shadow: none;
}

.track-preview-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(34, 245, 167, 0.72);
}

.track-preview-btn.is-active {
  border-color: rgba(34, 245, 167, 0.9);
  background:
    linear-gradient(
      135deg,
      rgba(34, 245, 167, 0.25),
      rgba(62, 197, 255, 0.14)
    );
  box-shadow:
    0 0 0 1px rgba(34, 245, 167, 0.10),
    0 8px 22px rgba(0, 0, 0, 0.18);
}

.track-preview-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(34, 245, 167, 0.15);
  color: #6fffc1;
  font-size: 0.72rem;
}

.album-track-preview-dock {
  margin: 0 0 18px;
}

.album-track-preview-card,
.album-track-preview-loading {
  border: 1px solid rgba(34, 245, 167, 0.26);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(34, 245, 167, 0.07),
      rgba(62, 197, 255, 0.04)
    ),
    rgba(6, 10, 28, 0.82);
  overflow: hidden;
}

.album-track-preview-loading {
  padding: 18px 20px;
}

.album-track-preview-loading > div,
.album-track-preview-heading > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.album-track-preview-kicker {
  color: #63f8b6;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.album-track-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px 12px;
}

.album-track-preview-heading strong {
  color: #ffffff;
  font-size: 1rem;
}

.album-track-preview-heading span {
  color: var(--muted);
  font-size: 0.9rem;
}

.album-track-preview-open {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 800;
}

.album-track-preview-frame {
  display: block;
  width: calc(100% - 24px);
  margin: 0 12px;
  border-radius: 12px;
}

.album-track-preview-note {
  padding: 10px 18px 14px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.album-track-preview-error {
  margin: 0;
}

@media (max-width: 1100px) {
  .track-header,
  .track-row-table {
    grid-template-columns: 42px 1fr;
    gap: 8px 12px;
  }

  .track-header > div:nth-child(n+3),
  .track-row-table > div:nth-child(n+3) {
    grid-column: 2;
  }

  .track-col-actions {
    justify-content: flex-start;
  }

  .track-preview-btn {
    min-width: 104px;
  }
}

@media (max-width: 700px) {
  .track-preview-label {
    display: inline;
  }

  .track-preview-btn {
    width: auto;
    min-width: 104px;
    min-height: 40px;
  }

  .album-track-preview-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .album-track-preview-open {
    width: 100%;
    text-align: center;
  }

  .album-track-preview-frame {
    width: calc(100% - 16px);
    margin: 0 8px;
  }
}

/* ============================================================
   CROSS-DEVICE RESPONSIVE POLISH — v75
   Phone, tablet and desktop use the same content with layouts
   that adapt instead of overflowing or becoming oversized.
   ============================================================ */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img,
iframe,
video {
  max-width: 100%;
}

.container {
  width: min(1400px, calc(100% - 32px)) !important;
}

.detail-panel,
.card,
.charts-grid > div {
  min-width: 0 !important;
}

.media-title,
.song-artist-link,
.chart-title,
.chart-artist,
.sticky-player-title,
.sticky-player-artist {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Large tablets / small laptops */
@media (max-width: 1100px) {
  .container {
    width: calc(100% - 24px) !important;
  }

  .top-nav {
    border-radius: 24px !important;
    padding: 12px 14px !important;
  }

  .top-nav-btn {
    padding: 12px 16px !important;
    font-size: 0.92rem !important;
  }

  .detail-hero {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  .charts-grid {
    gap: 16px !important;
  }
}

/* iPad portrait / phones */
@media (max-width: 820px) {
  .container {
    width: calc(100% - 16px) !important;
    padding-top: 8px !important;
    padding-bottom: 110px !important;
  }

  .hero {
    padding: 8px 0 10px !important;
  }

  .top-nav.glass-nav {
    top: 6px !important;
  }

  .top-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
    margin: 6px 0 12px !important;
    border-radius: 22px !important;
  }

  .nav-left {
    display: none !important;
  }

  .nav-right {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .nav-right .top-nav-btn:nth-child(n+4) {
    display: none !important;
  }

  .nav-right .top-nav-btn[data-target="searchSection"],
  .nav-right .top-nav-btn[data-target="chartsSection"],
  .nav-right .top-nav-btn[data-target="settingsSection"] {
    display: inline-flex !important;
    justify-content: center !important;
  }

  .mobile-more-nav {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 16px !important;
  }

  .card,
  .detail-panel {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .detail-hero {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .detail-hero > div:first-child {
    width: min(100%, 420px) !important;
    margin: 0 auto !important;
  }

  .detail-info-panel {
    min-width: 0 !important;
    padding: 4px 0 !important;
  }

  .media-title {
    font-size: clamp(1.45rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
  }

  .song-artist-link {
    display: block !important;
    max-width: 100% !important;
    font-size: clamp(1.15rem, 5vw, 1.5rem) !important;
    line-height: 1.28 !important;
    text-align: left !important;
  }

  .detail-meta-grid {
    grid-template-columns: minmax(105px, 0.42fr) minmax(0, 1fr) !important;
    gap: 8px 12px !important;
    margin: 14px 0 !important;
  }

  .detail-meta-label,
  .detail-meta-value {
    min-width: 0 !important;
    font-size: 0.95rem !important;
  }

  .star-rating-block,
  .album-rating-box,
  .star-rating {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .star-rating {
    padding: 10px 8px !important;
    gap: 1px !important;
  }

  .star-option {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    font-size: clamp(1.45rem, 6vw, 2rem) !important;
  }

  .charts-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .charts-grid > div {
    padding: 12px !important;
  }

  .chart-row {
    grid-template-columns: 34px 48px minmax(0, 1fr) 64px !important;
    gap: 10px !important;
    padding: 11px 10px !important;
    border-radius: 16px !important;
  }

  .chart-cover,
  .chart-cover img {
    width: 48px !important;
    height: 48px !important;
  }

  .chart-title {
    font-size: 1rem !important;
    line-height: 1.15 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .chart-artist {
    font-size: 0.86rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .chart-meta,
  .chart-score {
    font-size: 0.9rem !important;
  }

  .sticky-player {
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    padding: 9px 10px !important;
    border-radius: 18px !important;
    gap: 8px !important;
  }

  .sticky-player-cover {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
    border-radius: 11px !important;
  }

  .sticky-player-title {
    font-size: 0.92rem !important;
  }

  .sticky-player-artist {
    font-size: 0.8rem !important;
  }

  .sticky-player-action {
    padding: 10px 13px !important;
    font-size: 0.88rem !important;
  }
}

/* Narrow iPhones */
@media (max-width: 480px) {
  .container {
    width: calc(100% - 12px) !important;
  }

  .nav-right {
    gap: 6px !important;
  }

  .top-nav-btn {
    padding: 10px 7px !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }

  .card,
  .detail-panel {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .detail-meta-grid {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .detail-meta-label {
    margin-top: 8px !important;
    color: var(--muted) !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }

  .detail-meta-value {
    padding-bottom: 7px !important;
  }

  .chart-row {
    grid-template-columns: 30px 44px minmax(0, 1fr) 58px !important;
    gap: 8px !important;
  }

  .chart-cover,
  .chart-cover img {
    width: 44px !important;
    height: 44px !important;
  }

  .chart-title {
    font-size: 0.94rem !important;
  }

  .track-preview-label {
    display: none !important;
  }

  .track-preview-btn {
    min-width: 42px !important;
    width: 42px !important;
    padding: 0 !important;
  }
}

/* ============================================================
   PHONE TRACK CARDS + OBVIOUS PREVIEW BUTTON — v76
   ============================================================ */

.track-preview-btn {
  min-width: 122px !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(34, 245, 167, 0.72) !important;
  background:
    linear-gradient(
      135deg,
      rgba(34, 245, 167, 0.28),
      rgba(62, 197, 255, 0.18)
    ) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

.track-preview-icon {
  background: rgba(34, 245, 167, 0.22) !important;
  color: #ffffff !important;
}

.track-preview-label {
  display: inline !important;
}

@media (max-width: 820px) {
  .track-header {
    display: none !important;
  }

  .track-table {
    display: grid !important;
    gap: 12px !important;
  }

  .track-row-table {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 8px 12px !important;
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.035) !important;
  }

  .track-col-number {
    grid-column: 1 !important;
    grid-row: 1 / span 5 !important;
    align-self: start !important;
    padding-top: 2px !important;
    color: #65f4ba !important;
    font-weight: 900 !important;
  }

  .track-col-title,
  .track-col-average,
  .track-col-your-rating,
  .track-col-stars,
  .track-col-actions {
    grid-column: 2 !important;
    min-width: 0 !important;
  }

  .track-col-title {
    font-size: 1.08rem !important;
    font-weight: 900 !important;
    line-height: 1.22 !important;
  }

  .track-col-average {
    color: #e9edf7 !important;
    font-size: 0.92rem !important;
  }

  .track-col-your-rating {
    font-size: 0.92rem !important;
  }

  .track-col-stars .star-rating-block,
  .track-col-stars .album-rating-box,
  .track-col-stars .star-rating {
    width: 100% !important;
    max-width: 100% !important;
  }

  .track-col-actions {
    display: flex !important;
    justify-content: flex-start !important;
    padding-top: 4px !important;
  }

  .track-preview-btn {
    width: auto !important;
    min-width: 142px !important;
  }
}

@media (max-width: 480px) {
  .track-preview-label {
    display: inline !important;
  }

  .track-preview-btn {
    width: auto !important;
    min-width: 142px !important;
    padding: 10px 15px !important;
  }

  .track-row-table {
    padding: 14px 12px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
  }
}

/* ============================================================
   MOBILE TRACK LAYOUT FIX — v77
   Keeps every track as one complete card on phone/tablet.
   ============================================================ */

@media (max-width: 820px) {
  .track-table {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  .track-row-table {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-areas:
      "number title"
      "number average"
      "number yours"
      "number stars"
      "number actions" !important;
    column-gap: 12px !important;
    row-gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 16px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.035) !important;
    overflow: hidden !important;
  }

  .track-row-table + .track-row-table {
    border-top: 1px solid rgba(255,255,255,0.10) !important;
  }

  .track-col-number {
    grid-area: number !important;
    align-self: start !important;
    padding-top: 2px !important;
    color: #65f4ba !important;
    font-size: 0.95rem !important;
    font-weight: 950 !important;
  }

  .track-col-title {
    grid-area: title !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 1.08rem !important;
    font-weight: 900 !important;
    line-height: 1.22 !important;
    overflow-wrap: anywhere !important;
  }

  .track-col-average {
    grid-area: average !important;
    width: 100% !important;
    min-width: 0 !important;
    color: #eef2fb !important;
    font-size: 0.92rem !important;
  }

  .track-col-your-rating {
    grid-area: yours !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 0.92rem !important;
  }

  .track-col-stars {
    grid-area: stars !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .track-col-stars .star-rating-block,
  .track-col-stars .album-rating-box {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  .track-col-stars .star-rating {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 10px 8px !important;
  }

  .track-col-stars .star-option {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    font-size: clamp(1.35rem, 5.8vw, 1.85rem) !important;
    text-align: center !important;
  }

  .track-col-actions {
    grid-area: actions !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 2px 0 0 !important;
  }

  .track-preview-btn {
    display: inline-flex !important;
    width: auto !important;
    min-width: 150px !important;
    max-width: 220px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
  }
}

@media (max-width: 480px) {
  .track-row-table {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    padding: 14px 12px !important;
    column-gap: 10px !important;
  }

  .track-col-stars .star-option {
    font-size: clamp(1.2rem, 6vw, 1.65rem) !important;
  }

  .track-preview-btn {
    width: 100% !important;
    max-width: 190px !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}

/* ============================================================
   PHONE TRACK + SEND BAR FINAL POSITION FIX — v78
   ============================================================ */

@media (max-width: 820px) {
  /* One self-contained card per track */
  .track-row-table {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
    grid-template-areas:
      "number title"
      "number average"
      "number yours"
      "number stars"
      "number actions" !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    gap: 9px 12px !important;
    overflow: visible !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.035) !important;
  }

  .track-col-number {
    grid-area: number !important;
  }

  .track-col-title {
    grid-area: title !important;
  }

  .track-col-average {
    grid-area: average !important;
  }

  .track-col-your-rating {
    grid-area: yours !important;
  }

  .track-col-stars {
    grid-area: stars !important;
  }

  .track-col-actions {
    grid-area: actions !important;
    position: static !important;
    inset: auto !important;
    float: none !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
  }

  .track-preview-btn {
    position: static !important;
    float: none !important;
    transform: none !important;
    width: auto !important;
    min-width: 150px !important;
    max-width: 210px !important;
    margin: 0 !important;
    align-self: start !important;
  }

  /* The fixed Send bar must always fit inside the viewport. */
  .sticky-player {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 9999 !important;
  }

  .sticky-player-main {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .sticky-player-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .sticky-player-action {
    flex: 0 0 auto !important;
    min-width: 76px !important;
    margin-left: 6px !important;
  }

  body {
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 480px) {
  .track-row-table {
    grid-template-columns: 26px minmax(0, 1fr) !important;
    padding: 14px 12px !important;
    gap: 8px 9px !important;
  }

  .track-preview-btn {
    min-width: 146px !important;
    max-width: 190px !important;
  }

  .sticky-player {
    left: 8px !important;
    right: 8px !important;
    padding: 8px 9px !important;
  }

  .sticky-player-cover {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
  }

  .sticky-player-action {
    min-width: 70px !important;
    padding: 10px 12px !important;
  }
}

/* ============================================================
   REUSABLE SPOTIFY TRACK PLAYER — v80
   ============================================================ */

.album-track-preview-dock {
  width: 100%;
  margin: 0 0 16px;
}

.album-track-preview-card {
  overflow: hidden;
  border: 1px solid rgba(34, 245, 167, 0.30);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(34, 245, 167, 0.08),
      rgba(62, 197, 255, 0.04)
    ),
    rgba(7, 10, 26, 0.94);
}

.album-track-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px 10px;
}

.album-track-preview-heading > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.album-track-preview-title {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.album-track-preview-artist {
  color: var(--muted);
  font-size: 0.86rem;
}

.album-track-preview-frame {
  display: block;
  width: calc(100% - 20px) !important;
  margin: 0 10px;
  border: 0;
  border-radius: 12px;
}

.album-track-preview-note {
  padding: 9px 16px 13px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.spotify-local-preview-notice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 193, 7, 0.34);
  border-radius: 16px;
  background: rgba(255, 193, 7, 0.06);
}

.spotify-local-preview-notice strong {
  color: #ffffff;
}

.spotify-local-preview-notice span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.42;
}

.spotify-connect-from-player-btn {
  align-self: flex-start;
  min-width: 0;
  padding: 9px 13px;
  border-radius: 999px;
}

@media (max-width: 700px) {
  .album-track-preview-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .album-track-preview-open {
    width: 100%;
    text-align: center;
  }
}