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

:root {
  --bg: #050505;
  --panel: #101010;
  --panel-soft: #151515;
  --line: #242424;
  --text: #f7f7f8;
  --muted: #9b9ba7;
  --accent: #f2f2f2;
  --accent-soft: rgba(255, 255, 255, 0.07);
  --sidebar-width: 260px;
  --ad-width: 260px;
  --player-height: 92px;
}

body {
  min-width: 1200px;
  min-height: 100vh;
  padding-bottom: var(--player-height);
  font-family: "Vazirmatn", sans-serif;
  background: var(--bg);
  color: var(--text);
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--ad-width);
  gap: 36px;
  width: 100%;
  max-width: 1680px;
  min-height: calc(100vh - var(--player-height));
  margin: 0 auto;
  padding: 28px 34px 56px;
}

.sidebar,
.ad-column {
  position: sticky;
  top: 28px;
  align-self: start;
  height: calc(100vh - var(--player-height) - 56px);
}

.sidebar {
  display: flex;
  flex-direction: column;
  padding: 28px 20px;
  background: #121212;
  border: 1px solid var(--line);
  border-radius: 24px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  padding: 13px 16px;
  border-radius: 13px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  transition: 0.2s ease;
}

.nav-item:hover,
.nav-item.active {
  color: var(--text);
  background: var(--accent-soft);
}

.main-content {
  min-width: 0;
  padding: 18px 0 40px;
}

.page-header {
  margin-bottom: 52px;
}

.eyebrow,
.section-label {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 400;
}

.page-header h1 {
  max-width: 700px;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.18;
  letter-spacing: -1.8px;
}

.subtitle {
  margin-top: 14px;
  color: var(--muted);
  font-size: 17px;
}

.albums-section,
.tracks-section {
  margin-bottom: 52px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 22px;
}

.section-heading h2 {
  font-size: 27px;
}

.show-all {
  color: var(--muted);
  font-size: 14px;
  transition: 0.2s ease;
}

.show-all:hover {
  color: var(--text);
}

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

.album-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid #3a3a3a;
  border-radius: 14px;
  background: #171717;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.album-cover {
  aspect-ratio: 1;
  margin-bottom: 13px;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
  transition: none;
}

.album-card:hover {
  border-color: #555;
  background: #1b1b1b;
}

.album-card:hover .album-cover {
  transform: none;
}

.cover-one {
  background: #5a4778;
}

.cover-two {
  background: #4f3e6d;
}

.cover-three {
  background: #5f4c7f;
}

.cover-four {
  background: #49395f;
}

.album-card h3 {
  margin-bottom: 4px;
  font-size: 16px;
}

.album-card p {
  color: var(--muted);
  font-size: 13px;
}

.track-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.track-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 30px auto 0;
  direction: ltr;
}

.track-pagination[hidden] {
  display: none !important;
}

.track-pagination button,
.track-pagination .page-dots {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(18,18,18,.86);
  color: #d8d8d8;
  font: inherit;
  font-size: 14px;
}

.track-pagination button {
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}

.track-pagination button:hover:not(:disabled),
.track-pagination .page-number.is-active {
  border-color: rgba(164,22,26,.72);
  background: linear-gradient(145deg, rgba(164,22,26,.86), rgba(42,14,16,.94));
  color: #fff;
  box-shadow: 0 12px 28px rgba(164,22,26,.22);
}

.track-pagination button:hover:not(:disabled) {
  transform: translateY(-2px);
}

.track-pagination button:disabled {
  cursor: default;
  opacity: .38;
}

.track-pagination .page-dots {
  min-width: 24px;
  border: 0;
  background: transparent;
  color: #777;
}

.track-card {
  position: relative;
  min-width: 0;
  padding: 12px;
  border: 1px solid #3a3a3a;
  border-radius: 14px;
  background: #171717;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.track-card:hover,
.track-card.active-track {
  border-color: #555;
  background: #1b1b1b;
  transform: none;
}

.track-card-link {
  display: block;
}

.track-cover {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  margin-bottom: 13px;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
}

.track-cover::after {
  content: none;
}

.track-cover-one { background: #5a4778; }
.track-cover-two { background: #4f3e6d; }
.track-cover-three { background: #5f4c7f; }
.track-cover-four { background: #49395f; }
.track-cover-five { background: #584574; }
.track-cover-six { background: #463758; }
.track-cover-seven { background: #624f80; }
.track-cover-eight { background: #51406b; }
.track-cover-nine { background: #5c4978; }
.track-cover-ten { background: #48385d; }
.track-cover-eleven { background: #56436f; }
.track-cover-twelve { background: #4a3a61; }

.track-duration-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 4px 7px;
  border-radius: 999px;
  background: #1f1b27;
  color: #f4f4f4;
  direction: ltr;
  font-size: 11px;
}

.track-card-info {
  padding-left: 52px;
}

.track-card-info h3 {
  overflow: hidden;
  margin-bottom: 4px;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.track-card-info p {
  color: var(--muted);
  font-size: 13px;
}

.track-play-button {
  position: absolute;
  left: 13px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #e6e6e6;
  color: #171717;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.16s ease, background 0.16s ease;
}

.track-play-button:hover {
  transform: scale(1.06);
  background: #ffffff;
}

.track-card.active-track .track-play-button {
  background: #e6e6e6;
  color: #171717;
  border: 0;
}

.ad-column {
  position: sticky;
  top: 28px;
  align-self: start;
  height: calc(100vh - var(--player-height) - 56px);
}

.sidebar {
  display: flex;
  flex-direction: column;
  padding: 28px 20px;
  background: #121212;
  border: 1px solid var(--line);
  border-radius: 24px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  padding: 13px 16px;
  border-radius: 13px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  transition: 0.2s ease;
}

.nav-item:hover,
.nav-item.active {
  color: var(--text);
  background: var(--accent-soft);
}

.main-content {
  min-width: 0;
  padding: 18px 0 40px;
}

.page-header {
  margin-bottom: 52px;
}

.eyebrow,
.section-label {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 400;
}

.page-header h1 {
  max-width: 700px;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.18;
  letter-spacing: -1.8px;
}

.subtitle {
  margin-top: 14px;
  color: var(--muted);
  font-size: 17px;
}

.albums-section,
.tracks-section {
  margin-bottom: 52px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 22px;
}

.section-heading h2 {
  font-size: 27px;
}

.show-all {
  color: var(--muted);
  font-size: 14px;
  transition: 0.2s ease;
}

.show-all:hover {
  color: var(--text);
}

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

.album-card {
  min-width: 0;
  cursor: pointer;
}

.album-cover {
  aspect-ratio: 1;
  margin-bottom: 13px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  transition: transform 0.2s ease;
}

.album-card:hover .album-cover {
  transform: translateY(-5px);
}

.cover-one {
  background: #5a4778;
}

.cover-two {
  background: #4f3e6d;
}

.cover-three {
  background: #5f4c7f;
}

.cover-four {
  background: #49395f;
}

.album-card h3 {
  margin-bottom: 4px;
  font-size: 16px;
}

.album-card p {
  color: var(--muted);
  font-size: 13px;
}

.ad-column {
  display: flex;
  justify-content: center;
}

.ad-stack {
  display: grid;
  width: 100%;
  gap: 16px;
}

.ad-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  min-height: 180px;
  border: 1px dashed #2d2d2d;
  border-radius: 24px;
  color: #747480;
  background: #0b0b0b;
}

.ad-square {
  aspect-ratio: 1;
  min-height: 0;
  overflow: hidden;
}

.ad-box span {
  font-size: 16px;
  font-weight: 400;
}

.ad-box small {
  margin-top: 8px;
}

.audio-player {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(420px, 1.5fr);
  align-items: center;
  height: var(--player-height);
  padding: 12px 28px;
  border-top: 1px solid var(--line);
  background: #090909;
}

.player-cover {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 12px;
  background: linear-gradient(145deg, #2b2b2b, #080808);
}

.player-center {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.play-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50% !important;
  background: var(--text) !important;
  color: #111 !important;
  font-size: 14px !important;
}

.progress-wrap {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
  direction: ltr;
}

.progress-wrap span {
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

input[type="range"] {
  width: 100%;
  height: 4px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Reference-style albums archive */
.albums-list-page {
  padding-top: 18px;
}

.reference-albums-list {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.reference-album {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 0;
  border: 0;
  background: transparent;
}

.reference-album-cover {
  display: block;
  aspect-ratio: 1;
  border-radius: 5px;
}

.reference-album-content {
  min-width: 0;
}

.reference-album-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  margin-bottom: 22px;
}

.reference-main-play {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #f4f4f4;
  color: #111;
  cursor: pointer;
  font-size: 15px;
}

.reference-artist {
  display: inline-block;
  margin-bottom: 2px;
  color: #d0d0d0;
  font-size: 13px;
  font-weight: 400;
}

.reference-album-text h2 {
  font-size: 16px;
  line-height: 1.5;
}

.reference-album-meta {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 8px;
  color: #888;
  font-size: 11px;
}

.reference-tag {
  padding: 4px 9px;
  border-radius: 999px;
  background: #1d1d1d;
  color: #ddd;
}

.reference-track-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reference-track {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 60px;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
}

.reference-track-cover {
  width: 34px;
  height: 34px;
  border-radius: 2px;
}

.reference-track-title {
  overflow: hidden;
  color: #f2f2f2;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.reference-track-title b {
  color: #8f8f8f;
  font-weight: 400;
}

.reference-track-plays {
  color: #8b8b8b;
  direction: ltr;
  text-align: left;
  font-size: 11px;
}

.reference-track:hover .reference-track-title {
  color: #e6e6e6;
}


/* Album detail page — open layout */
.album-detail-page {
  padding-top: 26px;
}

.album-detail-hero {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 42px;
  align-items: end;
  margin-bottom: 64px;
  padding: 0;
  border: 0;
  background: transparent;
}

.album-detail-cover {
  display: block;
  aspect-ratio: 1;
  border-radius: 8px;
}

.album-detail-info h1 {
  margin-bottom: 6px;
  font-size: 58px;
  line-height: 1.15;
}

.album-detail-artist {
  display: inline-block;
  margin-bottom: 18px;
  color: #e6e6e6;
  font-size: 18px;
  font-weight: 400;
}

.album-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 18px;
  color: #8d8d8d;
  font-size: 13px;
}

.album-detail-description {
  max-width: 650px;
  color: #9d9d9d;
  font-size: 14px;
  line-height: 1.95;
}

.album-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.album-secondary-action {
  padding: 11px 16px;
  border: 1px solid #303030;
  border-radius: 999px;
  background: transparent;
  color: #d9d9d9;
  cursor: pointer;
}

.album-detail-tracks {
  margin-bottom: 46px;
}

.album-detail-track-list {
  display: flex;
  flex-direction: column;
  border: 0;
  background: transparent;
}

.album-detail-track {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 64px 38px;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 10px 0;
  border-bottom: 1px solid #1d1d1d;
  background: transparent;
}

.album-detail-track:last-child {
  border-bottom: 0;
}

.album-detail-track:hover,
.album-detail-track.active {
  background: transparent;
}

/* Dedicated track player */
.dedicated-player-page {
  padding-top: 28px;
}

.dedicated-player {
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto 72px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

.dedicated-player-cover {
  display: block;
  width: min(430px, 70%);
  aspect-ratio: 1;
  margin-bottom: 28px;
  border-radius: 10px;
}

.dedicated-player-info {
  margin-bottom: 30px;
}

.dedicated-player-info h1 {
  margin: 2px 0 7px;
  font-size: 52px;
  line-height: 1.15;
}

.dedicated-player-artist {
  display: block;
  margin-bottom: 5px;
  color: #e6e6e6;
  font-size: 18px;
  font-weight: 400;
}

.dedicated-player-album {
  color: #858585;
  font-size: 13px;
}

.dedicated-audio-player {
  width: 100%;
}

.dedicated-player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-bottom: 22px;
}

.dedicated-main-play {
  border: 0;
  background: transparent;
  color: #e8e8e8;
  cursor: pointer;
}

.dedicated-main-play {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #e6e6e6;
  color: #111;
  font-size: 19px;
}

.dedicated-progress-wrap {
  width: 100%;
}

.dedicated-progress-wrap input {
  width: 100%;
}

.dedicated-time-row {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: #747474;
  direction: ltr;
  font-size: 11px;
}

.dedicated-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 30px;
}

.download-action,
.share-action {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid #2e2e2e;
  border-radius: 13px;
  background: transparent;
  color: #f0f0f0;
  text-align: right;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease, opacity .25s ease;
}

.download-action:hover,
.share-action:hover {
  border-color: #4a4a4a;
  background: #111;
}

.download-action:disabled {
  cursor: wait;
}

.download-action.is-downloading {
  border-color: rgba(255,255,255,.28);
  background: linear-gradient(110deg, #101010 0%, #181818 34%, #242424 50%, #181818 66%, #101010 100%);
  background-size: 240% 100%;
  animation: downloadSurface 1.35s ease-in-out infinite;
}

.download-action.is-downloading::after {
  content: "";
  position: absolute;
  inset-inline-start: 14px;
  bottom: 9px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #f2f2f2;
  box-shadow: 0 0 18px rgba(255,255,255,.55);
  animation: downloadDot 1.1s ease-in-out infinite;
}

.download-action.is-downloading .action-icon {
  animation: downloadIconFloat 1s ease-in-out infinite;
}

.download-action.is-downloading .action-icon-image {
  animation: downloadIconDrop .9s cubic-bezier(.4,0,.2,1) infinite;
}

.action-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 10px;
  background: #1c1c1c;
  color: #e6e6e6;
  font-size: 20px;
}

.action-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.action-text strong {
  font-size: 14px;
}

.action-text small {
  color: #747474;
  font-size: 11px;
}

@keyframes downloadSurface {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@keyframes downloadIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

@keyframes downloadIconDrop {
  0% { transform: translateY(-3px); opacity: .72; }
  55% { transform: translateY(3px); opacity: 1; }
  100% { transform: translateY(3px); opacity: 0; }
}

@keyframes downloadDot {
  0%, 100% { transform: scale(.7); opacity: .35; }
  50% { transform: scale(1); opacity: 1; }
}

/* ---------- Icon motion language ---------- */

.sidebar .nav-item,
.play-button,
.dedicated-main-play,
.track-play-button,
.album-track-play,
.reference-main-play,
.download-action,
.share-action {
  will-change: transform;
}

.sidebar .nav-icon,
.action-icon,
.play-button .button-icon-image,
.dedicated-main-play .button-icon-image,
.track-play-button .button-icon-image,
.album-track-play .button-icon-image,
.reference-main-play .button-icon-image {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease, filter .28s ease;
}

.sidebar .nav-item:hover .nav-icon {
  animation: iconSoftLift .7s ease both;
}

.sidebar .nav-item.is-active .nav-icon {
  animation: iconActiveBreath 2.2s ease-in-out infinite;
}

.is-pressing {
  animation: iconPressShell .48s cubic-bezier(.2,.8,.2,1);
}

.is-pressing .nav-icon,
.is-pressing .action-icon,
.is-pressing .button-icon-image {
  animation: iconPressGlyph .48s cubic-bezier(.2,.8,.2,1);
}

.share-action.is-shared {
  border-color: rgba(255,255,255,.32);
  background: radial-gradient(circle at 18% 50%, rgba(255,255,255,.16), transparent 34%), #111;
}

.share-action.is-shared .action-icon {
  animation: sharePop .72s cubic-bezier(.2,.8,.2,1);
}

.share-action.is-shared .action-icon-image {
  animation: shareSend .72s cubic-bezier(.2,.8,.2,1);
}

.play-button.is-playing,
.dedicated-main-play.is-playing {
  animation: playButtonBreath 1.9s ease-in-out infinite;
}

.play-button.is-playing .button-icon-image,
.dedicated-main-play.is-playing .button-icon-image,
.track-card.active-track .track-play-button .button-icon-image,
.album-detail-track.active-track .album-track-play .button-icon-image {
  animation: playGlyphPulse 1.25s ease-in-out infinite;
}

@keyframes iconSoftLift {
  0% { transform: translateY(0) scale(1); }
  46% { transform: translateY(-3px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes iconActiveBreath {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50% { transform: translateY(-1px); filter: drop-shadow(0 0 10px rgba(255,255,255,.24)); }
}

@keyframes iconPressShell {
  0% { transform: scale(1); }
  42% { transform: scale(.94); }
  100% { transform: scale(1); }
}

@keyframes iconPressGlyph {
  0% { transform: scale(1) rotate(0); }
  45% { transform: scale(.82) rotate(-5deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes sharePop {
  0% { transform: scale(1); }
  42% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

@keyframes shareSend {
  0% { transform: translate(0,0) rotate(0); opacity: 1; }
  45% { transform: translate(-4px,-4px) rotate(-8deg); opacity: .72; }
  100% { transform: translate(0,0) rotate(0); opacity: 1; }
}

@keyframes playButtonBreath {
  0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 24px rgba(255,255,255,.14); }
}

@keyframes playGlyphPulse {
  0%, 100% { transform: scale(1); opacity: .88; }
  50% { transform: scale(1.08); opacity: 1; }
}


/* ---------- Polished interactions ---------- */

html {
  scroll-behavior: smooth;
}

body {
  opacity: 0;
  animation: pageFadeIn 420ms ease forwards;
}

body.page-leaving {
  animation: pageFadeOut 220ms ease forwards;
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pageFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
  to { opacity: 0; }
}

/* Custom scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a #0a0a0a;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #0a0a0a;
}

*::-webkit-scrollbar-thumb {
  background: #303030;
  border: 2px solid #0a0a0a;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #454545;
}

/* Cards */
.album-card,
.track-card {
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.album-card:hover,
.track-card:hover {
  transform: translateY(-6px);
  border-color: #525252;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);
}

.album-cover,
.track-cover {
  transition: transform 260ms ease, filter 260ms ease;
}

.album-card:hover .album-cover,
.track-card:hover .track-cover {
  transform: scale(1.025);
  filter: brightness(1.08);
}

/* Buttons */
button,
.show-all,
.nav-item,
.album-detail-track,
.reference-track {
  transition:
    transform 180ms ease,
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    opacity 180ms ease;
}

button:active {
  transform: scale(0.94);
}

.play-button,
.dedicated-main-play,
.track-play-button,
.reference-main-play {
  position: relative;
  overflow: hidden;
}

.play-button::after,
.dedicated-main-play::after,
.track-play-button::after,
.reference-main-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.16);
  opacity: 0;
  transform: scale(0.4);
}

.play-button:active::after,
.dedicated-main-play:active::after,
.track-play-button:active::after,
.reference-main-play:active::after {
  animation: buttonRipple 420ms ease;
}

@keyframes buttonRipple {
  0% { opacity: 0.8; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Play/Pause icon motion */
.is-playing {
  animation: playPulse 1.8s ease-in-out infinite;
}

@keyframes playPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); }
  50% { box-shadow: 0 0 0 10px rgba(255,255,255,0.08); }
}

/* Toast */
.site-toast {
  position: fixed;
  right: 50%;
  bottom: 116px;
  z-index: 999;
  min-width: 220px;
  padding: 12px 16px;
  border: 1px solid #343434;
  border-radius: 12px;
  background: #151515;
  color: #f2f2f2;
  text-align: center;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 16px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.site-toast.show {
  opacity: 1;
  transform: translate(50%, 0);
}

/* Skeleton loading */
.skeleton-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #070707;
  transition: opacity 280ms ease, visibility 280ms ease;
}

.skeleton-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

.skeleton-shell {
  width: min(760px, 70vw);
}

.skeleton-cover,
.skeleton-line {
  background:
    linear-gradient(
      90deg,
      #171717 0%,
      #242424 45%,
      #171717 100%
    );
  background-size: 200% 100%;
  animation: skeletonMove 1.15s linear infinite;
}

.skeleton-cover {
  width: 240px;
  aspect-ratio: 1;
  margin: 0 auto 26px;
  border-radius: 12px;
}

.skeleton-line {
  height: 14px;
  margin: 10px auto;
  border-radius: 999px;
}

.skeleton-line.wide { width: 54%; }
.skeleton-line.mid { width: 38%; }
.skeleton-line.short { width: 24%; }

@keyframes skeletonMove {
  to { background-position: -200% 0; }
}


/* ---------- v12 fixes ---------- */

.dedicated-player-cover,
.player-cover {
  animation: none !important;
}

/* Keep the bottom player attached to the desktop viewport */
.audio-player {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  margin: 0 !important;
}

body {
  padding-bottom: var(--player-height) !important;
}

/* Play button belongs on the lower-left side of each card */
.track-card {
  position: relative;
}

.track-card-info {
  padding-right: 0 !important;
  padding-left: 52px !important;
}

.track-play-button {
  position: absolute !important;
  right: auto !important;
  left: 13px !important;
  top: auto !important;
  bottom: 12px !important;
  z-index: 5 !important;
  margin: 0 !important;
  transform: none;
}

.track-play-button:hover {
  transform: scale(1.06);
}

/* Prevent generic button animation rules from shifting card play buttons */
.track-play-button:active {
  transform: scale(0.94) !important;
}


/* ---------- definitive fixed player fix ---------- */
html,
body {
  transform: none !important;
  perspective: none !important;
  filter: none !important;
}

.audio-player {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  width: 100vw !important;
  height: var(--player-height) !important;
  z-index: 99999 !important;
  margin: 0 !important;
  transform: none !important;
}

.site-shell {
  padding-bottom: calc(var(--player-height) + 34px) !important;
}

body {
  padding-bottom: var(--player-height) !important;
}


/* ---------- Minimal centered sidebar ---------- */
.sidebar {
  display: flex !important;
  align-items: center !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 30px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar-artist {
  margin-bottom: 54px;
  color: #f4f4f4;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.4px;
  transition: transform 180ms ease, color 180ms ease;
}

.sidebar-artist:hover {
  color: #e6e6e6;
  transform: translateY(-2px);
}

.sidebar-nav {
  display: flex !important;
  align-items: center !important;
  width: 100%;
  flex-direction: column !important;
  gap: 20px !important;
}

.nav-item {
  position: relative;
  display: grid !important;
  place-items: center !important;
  width: 130px;
  min-height: 34px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #a7a7ad !important;
  overflow: visible;
  font-size: 15px;
  font-weight: 400;
  text-align: center;
}

.nav-text,
.nav-icon {
  grid-area: 1 / 1;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    letter-spacing 220ms ease;
}

.nav-text {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.nav-icon {
  opacity: 0;
  transform: translateY(7px) scale(0.72) rotate(-8deg);
  color: #e6e6e6;
  font-size: 25px;
  line-height: 1;
}

.nav-item::after {
  content: "";
  position: absolute;
  bottom: -8px;
  width: 0;
  height: 1px;
  background: #e6e6e6;
  transition: width 220ms ease;
}

.nav-item:hover {
  color: #f4f4f4 !important;
  transform: translateY(-2px);
}

.nav-item:hover::after {
  width: 28px;
}

.nav-item:hover .nav-text {
  letter-spacing: 0.6px;
}

/* Active page stays as icon */
.nav-item.is-active .nav-text,
.nav-item.is-collapsing .nav-text {
  opacity: 0;
  transform: translateY(-6px) scale(0.72);
}

.nav-item.is-active .nav-icon,
.nav-item.is-collapsing .nav-icon {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}

.nav-item.is-active::after {
  width: 20px;
}

.nav-item.is-active:hover .nav-icon {
  transform: translateY(-2px) scale(1.12) rotate(4deg);
}

/* ---------- v15 sidebar shell + global search ---------- */

.sidebar {
  display: flex !important;
  align-items: center !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 30px 18px !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 24px !important;
  background: #111 !important;
  box-shadow: none !important;
}

.sidebar-artist {
  margin-bottom: 58px;
  text-align: center;
}

.sidebar-nav {
  gap: 24px !important;
}

.sidebar .nav-item {
  width: 160px;
  min-height: 38px;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
}

.sidebar-search-button {
  font-family: inherit;
}

.site-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: min(720px, 100%);
  margin: 0 0 34px auto;
}

.site-search-input {
  width: 100%;
  height: 48px;
  padding: 0 46px 0 42px;
  border: 1px solid #2d2d2d;
  border-radius: 14px;
  outline: none;
  background: #111;
  color: #f4f4f4;
  font-family: inherit;
  font-size: 14px;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.site-search-input::placeholder {
  color: #707070;
}

.site-search-input:focus {
  border-color: #555;
  background: #151515;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.035);
  transform: translateY(-1px);
}

.site-search-wrap.is-focused .site-search-icon {
  color: #e6e6e6;
  transform: scale(1.12);
}

.site-search-icon {
  position: absolute;
  right: 16px;
  z-index: 2;
  color: #777;
  font-size: 20px;
  pointer-events: none;
  transition: color 180ms ease, transform 180ms ease;
}

.clear-search {
  position: absolute;
  left: 12px;
  display: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #222;
  color: #aaa;
  cursor: pointer;
}

.site-search-wrap.has-value .clear-search {
  display: grid;
}

.search-hidden {
  display: none !important;
}


/* ---------- v16 colorful demo covers ---------- */
.cover-one,
.track-cover-one {
  background:
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.18), transparent 22%),
    linear-gradient(145deg, #6f4ca4, #2a183f 72%) !important;
}

.cover-two,
.track-cover-two {
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.15), transparent 24%),
    linear-gradient(145deg, #8f8f8f, #202020 72%) !important;
}

.cover-three,
.track-cover-three {
  background:
    radial-gradient(circle at 68% 70%, rgba(255,255,255,.16), transparent 22%),
    linear-gradient(145deg, #2f9ca8, #12373c 72%) !important;
}

.cover-four,
.track-cover-four {
  background:
    radial-gradient(circle at 30% 72%, rgba(255,255,255,.16), transparent 22%),
    linear-gradient(145deg, #b94b5f, #421923 72%) !important;
}

.track-cover-five {
  background: linear-gradient(145deg, #4778b8, #172b49 72%) !important;
}

.track-cover-six {
  background: linear-gradient(145deg, #7f8c43, #2a3214 72%) !important;
}

.track-cover-seven {
  background: linear-gradient(145deg, #a35c8f, #3b1c34 72%) !important;
}

.track-cover-eight {
  background: linear-gradient(145deg, #3e9d71, #153925 72%) !important;
}

.track-cover-nine {
  background: linear-gradient(145deg, #7d7d7d, #1d1d1d 72%) !important;
}

.track-cover-ten {
  background: linear-gradient(145deg, #8554b7, #2f1c46 72%) !important;
}

.track-cover-eleven {
  background: linear-gradient(145deg, #b34b46, #421713 72%) !important;
}

.track-cover-twelve {
  background: linear-gradient(145deg, #3f7fa6, #142f43 72%) !important;
}


/* ---------- v17 matte covers + sidebar refinements ---------- */

/* Matte demo cover palette */
.cover-one,
.track-cover-one {
  background: #5d4b72 !important;
}

.cover-two,
.track-cover-two {
  background: #666666 !important;
}

.cover-three,
.track-cover-three {
  background: #426b70 !important;
}

.cover-four,
.track-cover-four {
  background: #754752 !important;
}

.track-cover-five {
  background: #48617d !important;
}

.track-cover-six {
  background: #626a43 !important;
}

.track-cover-seven {
  background: #76536d !important;
}

.track-cover-eight {
  background: #426b58 !important;
}

.track-cover-nine {
  background: #606060 !important;
}

.track-cover-ten {
  background: #604d78 !important;
}

.track-cover-eleven {
  background: #744944 !important;
}

.track-cover-twelve {
  background: #466277 !important;
}

/* Slightly larger sidebar navigation */
.sidebar-nav {
  gap: 28px !important;
}

.sidebar .nav-item {
  width: 178px !important;
  min-height: 44px !important;
  font-size: 17px !important;
  font-weight: 400 !important;
}

.sidebar .nav-icon {
  font-size: 29px !important;
}

/* Active item is icon only — no underline */
.sidebar .nav-item.is-active::after,
.sidebar .nav-item.is-collapsing::after {
  width: 0 !important;
  opacity: 0 !important;
}

.sidebar .nav-item.is-active:hover::after {
  width: 0 !important;
}

/* Hover remains text-based, but cleaner */
.sidebar .nav-item:not(.is-active):hover::after {
  width: 30px;
}

.sidebar .nav-item.is-active {
  color: #e6e6e6 !important;
}


/* ---------- v18 simplified fixed player ---------- */
.audio-player {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 99999 !important;
  display: grid !important;
  grid-template-columns: 320px minmax(420px, 1fr) !important;
  align-items: center !important;
  gap: 28px !important;
  width: 100vw !important;
  height: 92px !important;
  padding: 12px 28px !important;
  border-top: 1px solid #232323 !important;
  background: #090909 !important;
}

.player-ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  border: 1px dashed #2d2d2d;
  border-radius: 10px;
  color: #626262;
  font-size: 12px;
}

.player-center {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0;
}

.progress-wrap {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 46px !important;
  align-items: center !important;
  gap: 12px !important;
  direction: ltr !important;
  width: 100% !important;
}

.progress-wrap input[type="range"] {
  width: 100% !important;
  height: 7px !important;
  accent-color: #e6e6e6 !important;
}

.progress-wrap span {
  color: #777 !important;
  font-size: 11px !important;
  text-align: center !important;
}

.player-track-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #8f8f8f;
  font-size: 12px;
  white-space: nowrap;
}

.player-track-meta strong {
  color: #f2f2f2;
  font-size: 13px;
}


.player-cover {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  border-radius: 8px !important;
}

.play-button {
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f2f2f2 !important;
  color: #111 !important;
  cursor: pointer !important;
  font-size: 15px !important;
}



/* ---------- v19 compact player layout ---------- */
.audio-player {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 99999 !important;
  display: grid !important;
  grid-template-columns: 90px minmax(420px, 760px) 300px !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100vw !important;
  height: 86px !important;
  padding: 10px 28px !important;
  border-top: 1px solid #232323 !important;
  background: #090909 !important;
}

.player-left-cover {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.player-cover {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  border-radius: 8px !important;
}

.player-center {
  display: flex !important;
  min-width: 0;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
}

.player-track-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  color: #8f8f8f;
  font-size: 12px;
  white-space: nowrap;
}

.player-track-meta strong {
  color: #f2f2f2;
  font-size: 13px;
}

.player-progress-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
}

.play-button {
  grid-column: 1;
  transform: translateY(-10px) !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f2f2f2 !important;
  color: #111 !important;
  cursor: pointer !important;
  font-size: 14px !important;
}

.progress-wrap {
  grid-column: 2;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  direction: ltr !important;
}

.progress-wrap input[type="range"] {
  width: 100% !important;
  height: 5px !important;
  accent-color: #e6e6e6 !important;
}

.progress-wrap span {
  color: #777 !important;
  font-size: 11px !important;
  text-align: center !important;
}

.player-ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border: 1px dashed #2d2d2d;
  border-radius: 10px;
  color: #626262;
  font-size: 12px;
}


/* ---------- v20 track routing and control cleanup ---------- */
.dedicated-player-controls {
  justify-content: center !important;
}


.album-play-action {
  color: #e8e8e8 !important;
  background: transparent !important;
}

.album-play-action:hover {
  border-color: #555 !important;
  background: #151515 !important;
}


/* ---------- v22 dynamic albums + bottom track ad ---------- */
.track-bottom-ad {
  display: grid;
  gap: 14px;
  margin: 52px 0 26px;
}

.track-banner-ad {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 88px;
  border: 1px dashed #2d2d2d;
  border-radius: 14px;
  background: #0d0d0d;
  color: #666;
}

.track-square-ad-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.track-bottom-ad span,
.track-banner-ad span {
  font-size: 14px;
  font-weight: 400;
}

.track-bottom-ad small,
.track-banner-ad small {
  margin-top: 6px;
  color: #4f4f4f;
  font-size: 11px;
}


/* SVG icon pack */
.nav-icon-image,.search-icon-image,.close-icon-image,.button-icon-image,.action-icon-image{display:block;width:1em;height:1em;object-fit:contain;pointer-events:none;flex:0 0 auto}
.nav-icon-image{width:24px;height:24px}
.search-icon-image{width:21px;height:21px}
.close-icon-image{width:18px;height:18px}
.button-icon-image{width:22px;height:22px}
.play-button .button-icon-image,.dedicated-main-play .button-icon-image{width:27px;height:27px}
.action-icon-image{width:23px;height:23px}
.album-play-action{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.track-play-button,.reference-main-play,.play-button,.dedicated-main-play,.clear-search{display:inline-flex;align-items:center;justify-content:center}


/* Context-specific monochrome SVG sizing */
.reference-main-play .button-icon-image {
  width: 28px;
  height: 28px;
}

.track-play-button .button-icon-image {
  width: 22px;
  height: 22px;
}

.dedicated-main-play .button-icon-image {
  width: 42px;
  height: 42px;
}

.play-button .button-icon-image {
  width: 28px;
  height: 28px;
}

.album-play-action .button-icon-image {
  width: 24px;
  height: 24px;
}


/* Final icon cleanup: icon only, no yellow/white button backgrounds */
.track-play-button,
.reference-main-play,
.dedicated-main-play,
.play-button,
.album-play-action,
.clear-search,
.action-icon {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.track-play-button:hover,
.reference-main-play:hover,
.reference-main-play:focus,
.dedicated-main-play:hover,
.play-button:hover,
.album-play-action:hover,
.clear-search:hover {
  background: transparent !important;
  box-shadow: none !important;
}

.track-play-button::after,
.reference-main-play::after,
.dedicated-main-play::after,
.play-button::after {
  display: none !important;
}

.nav-icon-image { width: 25px !important; height: 25px !important; }
.search-icon-image { width: 23px !important; height: 23px !important; }
.close-icon-image { width: 20px !important; height: 20px !important; }
.track-play-button .button-icon-image { width: 28px !important; height: 28px !important; }
.reference-main-play .button-icon-image { width: 36px !important; height: 36px !important; }
.dedicated-main-play .button-icon-image { width: 54px !important; height: 54px !important; }
.play-button .button-icon-image { width: 34px !important; height: 34px !important; }
.album-play-action .button-icon-image { width: 29px !important; height: 29px !important; }
.action-icon-image { width: 27px !important; height: 27px !important; }

.track-play-button,
.reference-main-play,
.dedicated-main-play,
.play-button {
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}


/* Apple/Poweramp style progress */
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  background:#3a3a3a;
  border-radius:999px;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:0;
  height:0;
  margin-top:-6px;
  background:#f5f5f5;
  border-radius:50%;
  transition:.2s;
}
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:active::-webkit-slider-thumb{
  width:14px;
  height:14px;
}
input[type="range"]::-moz-range-track{
  height:4px;
  background:#3a3a3a;
  border-radius:999px;
}
input[type="range"]::-moz-range-progress{
  background:#f5f5f5;
  height:4px;
  border-radius:999px;
}
input[type="range"]::-moz-range-thumb{
  width:0;
  height:0;
  border:none;
  background:#f5f5f5;
}


/* Filled progress color fix for Chromium, Firefox and Edge */
input[type="range"] {
  --range-progress: 0%;
  direction: ltr;
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(
      to right,
      #f5f5f5 0%,
      #f5f5f5 var(--range-progress),
      #3a3a3a var(--range-progress),
      #3a3a3a 100%
    ) !important;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: transparent !important;
}

input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: transparent !important;
}

input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: #f5f5f5;
}


b,
strong {
  font-weight: 400;
}

/* Foreground-only wine theme: backgrounds intentionally unchanged */
:root {
  --text: #f5f5f5;
  --muted: #a1a1aa;
  --accent: #a4161a;
  --line: #36363b;
}

/* Main and secondary text */
body,
.page-header h1,
.section-heading h2,
.album-card h3,
.track-card h3,
.reference-track-title {
  color: #f5f5f5;
}

.subtitle,
.album-card p,
.track-card p,
.album-meta,
.album-detail-meta,
.ad-box,
.time,
.duration {
  color: #a1a1aa;
}

/* Accent text and active navigation */
.eyebrow,
.section-label,
.nav-item.active,
.show-all:hover,
.track-card.active-track h3 {
  color: #a4161a !important;
}

/* Icons: default, muted and active states */
button svg,
a svg,
.icon,
.nav-icon {
  color: #e8e8ea;
  stroke: currentColor;
  fill: currentColor;
}

button:hover svg,
a:hover svg,
.track-play-button:hover,
.reference-main-play:hover {
  color: #c1121f !important;
}

.active svg,
.is-active svg,
[aria-pressed="true"] svg,
.playing svg,
.active-track svg {
  color: #a4161a !important;
}

/* Borders around icon controls — no background changes */
.track-play-button,
.reference-main-play,
button[aria-label] {
  border-color: #414147 !important;
}

.track-play-button:hover,
.reference-main-play:hover,
button[aria-label]:hover {
  border-color: #a4161a !important;
}

/* Structural lines and card outlines */
.sidebar,
.ad-column,
.album-card,
.track-card,
.album-detail,
.album-detail-track,
.ad-box,
.audio-player {
  border-color: #303035;
}

.album-card:hover,
.track-card:hover,
.track-card.active-track,
.album-detail-track:hover {
  border-color: #5f2023;
}

/* Player progress and native range accent */
input[type="range"] {
  accent-color: #a4161a;
}

/* Keep button surfaces untouched; only recolor their content */
.play-button,
.reference-main-play {
  color: #ffffff;
}

/* Uploaded covers should fill their frame without sliding out of the box. */
.album-cover,
.track-cover,
.reference-album-cover,
.reference-track-cover,
.album-detail-cover,
.album-track-cover,
.dedicated-player-cover,
.player-cover {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* ---------- Empty bottom player state ---------- */
.audio-player:not(.has-track) .player-cover {
  opacity: 0 !important;
  background-image: none !important;
}

.audio-player:not(.has-track) .player-separator,
.audio-player:not(.has-track) #playerArtist {
  display: none !important;
}

.audio-player:not(.has-track) #playerTitle::before {
  content: "ترکی انتخاب نشده";
  color: #6f6f6f;
  font-weight: 500;
}

.audio-player {
  direction: ltr !important;
  grid-template-columns: minmax(220px, 300px) minmax(500px, 860px) minmax(220px, 300px) !important;
  grid-template-rows: 1fr !important;
  gap: 24px !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.player-left-cover {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  justify-content: flex-end !important;
  z-index: 2 !important;
}

.player-center {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: start !important;
  width: calc(100% - 74px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  direction: ltr !important;
}

.player-track-meta {
  direction: rtl !important;
}

.player-progress-row {
  direction: ltr !important;
  gap: 0 !important;
}

.progress-wrap {
  margin-left: 12px !important;
}

.player-ad-slot-right {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

/* Album page track rows generated by album.js */
.album-detail-track {
  direction: rtl !important;
  display: grid !important;
  grid-template-columns: 34px 52px minmax(0, 1fr) 70px 42px !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 72px !important;
  padding: 10px 0 !important;
  text-align: right !important;
}

.album-track-number {
  grid-column: 1 !important;
  color: #d8d8d8 !important;
  font-size: 14px !important;
  text-align: center !important;
}

.album-track-cover {
  grid-column: 2 !important;
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 6px !important;
  background-color: #202020 !important;
}

.album-track-main {
  grid-column: 3 !important;
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  color: #f5f5f5 !important;
  text-align: right !important;
}

.album-track-main strong,
.album-track-main small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.album-track-main strong {
  font-size: 15px !important;
  font-weight: 600 !important;
}

.album-track-main small {
  color: #bdbdbd !important;
  font-size: 12px !important;
}

.album-track-duration {
  grid-column: 4 !important;
  color: #d8d8d8 !important;
  direction: ltr !important;
  text-align: center !important;
  font-size: 13px !important;
}

.album-track-play {
  grid-column: 5 !important;
  justify-self: center !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Data loading state: hide static demo content until Supabase data is ready. */
body:not(.data-ready) .album-grid,
body:not(.data-ready) .track-grid,
body:not(.data-ready) .track-pagination,
body:not(.data-ready) .reference-albums-list,
body:not(.data-ready) .album-detail-hero,
body:not(.data-ready) .album-detail-tracks,
body:not(.data-ready) .dedicated-player,
body:not(.data-ready) .related-tracks,
body:not(.data-ready) .track-bottom-ad {
  visibility: hidden !important;
}

body:not(.data-ready) .main-content {
  position: relative;
  min-height: 520px;
}

body:not(.data-ready) .main-content::after {
  content: "در حال بارگذاری...";
  position: absolute;
  inset: 96px 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border: 1px solid #242424;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  background-size: 220% 100%;
  color: #bdbdbd;
  font-size: 15px;
  animation: loadingSweep 1.4s ease-in-out infinite;
}

@keyframes loadingSweep {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* ---------- Main content reveal after data loading ---------- */
body:not(.data-ready) .main-content > * {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(18px) !important;
  pointer-events: none !important;
}

body.data-ready .main-content > * {
  animation: pageReadyRise .58s cubic-bezier(.2,.8,.2,1) both;
}

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

/* ---------- Responsive mobile app layout ---------- */
.track-ad-card {
  position: relative;
  overflow: hidden;
  display: none;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 1px dashed rgba(164,22,26,.55);
  border-radius: 14px;
  background:
    radial-gradient(circle at 72% 20%, rgba(164,22,26,.26), transparent 34%),
    linear-gradient(145deg, #151515, #0b0b0b);
  color: #f4f4f4;
  text-align: center;
}

.track-ad-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(110deg, transparent 36%, rgba(255,255,255,.12) 48%, transparent 60%);
  transform: translateX(55%) rotate(8deg);
  animation: adCardSweep 3.8s ease-in-out infinite;
}

.track-ad-card span,
.track-ad-card small {
  position: relative;
  z-index: 1;
}

.track-ad-card span {
  font-size: 15px;
  font-weight: 700;
}

.track-ad-card small {
  margin-top: 8px;
  color: #999;
  font-size: 12px;
}

@keyframes adCardSweep {
  0%, 40% { transform: translateX(75%) rotate(8deg); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: translateX(-75%) rotate(8deg); opacity: 0; }
}

@media (max-width: 1180px) {
  :root {
    --player-height: 82px;
  }

  body {
    min-width: 0;
    padding-bottom: calc(var(--player-height) + env(safe-area-inset-bottom));
    overflow-x: hidden;
    background:
      radial-gradient(circle at 50% -8%, rgba(164,22,26,.22), transparent 30%),
      radial-gradient(circle at 12% 24%, rgba(255,255,255,.06), transparent 28%),
      linear-gradient(180deg, #090909 0%, #050505 58%, #020202 100%);
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 78%);
  }

  .site-shell {
    display: flex;
    max-width: 100%;
    min-height: calc(100vh - var(--player-height));
    flex-direction: column;
    gap: 22px;
    padding: 14px 14px 34px;
  }

  .sidebar {
    position: sticky !important;
    top: 10px !important;
    z-index: 9000;
    width: 100%;
    height: auto !important;
    min-height: 0;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px !important;
    border-radius: 18px;
    border-color: rgba(255,255,255,.1) !important;
    background:
      linear-gradient(135deg, rgba(28,28,30,.84), rgba(9,9,10,.78)) !important;
    backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: 0 18px 55px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  }

  .sidebar-artist {
    flex: 0 1 auto;
    margin: 0 6px 0 12px !important;
    white-space: nowrap;
    color: #fff !important;
    font-size: 15px !important;
    text-shadow: 0 0 22px rgba(255,255,255,.18);
  }

  .sidebar-nav {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0 !important;
    flex-direction: row !important;
    justify-content: flex-end;
    gap: 6px !important;
  }

  .sidebar .nav-item {
    width: auto !important;
    min-width: 46px;
    max-width: none !important;
    min-height: 44px;
    flex: 0 0 auto;
    justify-content: center !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s ease, border-color .22s ease !important;
  }

  .sidebar .nav-item.is-active {
    background: linear-gradient(145deg, rgba(164,22,26,.82), rgba(255,255,255,.11)) !important;
    border-color: rgba(255,255,255,.18) !important;
    box-shadow: 0 10px 28px rgba(164,22,26,.22), inset 0 1px 0 rgba(255,255,255,.22);
  }

  .sidebar .nav-item:active {
    transform: scale(.94);
  }

  .sidebar .nav-text {
    display: none !important;
  }

  .sidebar .nav-icon {
    margin: 0 !important;
    opacity: 1 !important;
    color: #f1f1f3 !important;
    transform: translateY(0) scale(1) rotate(0) !important;
  }

  .sidebar .nav-icon-image {
    filter: invert(1) brightness(1.08) !important;
    opacity: .78;
  }

  .sidebar .nav-item.is-active .nav-icon-image,
  .sidebar .nav-item:hover .nav-icon-image {
    opacity: 1;
    filter: invert(1) brightness(1.35) drop-shadow(0 0 10px rgba(255,255,255,.18)) !important;
  }

  .ad-column,
  .player-ad-slot {
    display: none !important;
  }

  .track-ad-card {
    display: flex;
  }

  .main-content,
  .album-detail-page,
  .albums-list-page,
  .dedicated-player-page {
    width: 100%;
    padding: 4px 0 28px !important;
  }

  .site-search-wrap {
    position: relative;
    top: auto;
    display: none;
    margin: 2px 0 26px;
    width: 100%;
    border-radius: 18px;
    background: rgba(15,15,16,.78);
    box-shadow: 0 18px 40px rgba(0,0,0,.24);
  }

  body.mobile-search-open .site-search-wrap,
  .site-search-wrap.has-value,
  .site-search-wrap.is-focused {
    display: flex;
    animation: mobileSearchDrop .28s cubic-bezier(.2,.8,.2,1) both;
  }

  .page-header {
    margin-bottom: 34px;
    padding: 8px 2px 2px;
  }

  .page-header h1 {
    max-width: 100%;
    font-size: clamp(28px, 7vw, 42px);
    letter-spacing: 0;
    text-wrap: balance;
    text-shadow: 0 18px 52px rgba(164,22,26,.24);
  }

  .subtitle {
    max-width: 56ch;
    font-size: 15px;
    line-height: 1.9;
  }

  .album-grid,
  .track-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .track-pagination {
    gap: 6px;
    margin-top: 24px;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
  }

  .track-pagination button,
  .track-pagination .page-dots {
    min-width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 13px;
  }

  .album-card,
  .track-card {
    position: relative;
    overflow: hidden;
    padding: 10px !important;
    border-radius: 16px !important;
    border-color: rgba(255,255,255,.08) !important;
    background:
      linear-gradient(160deg, rgba(31,31,33,.9), rgba(12,12,13,.96)) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
    animation: mobileCardRise .52s cubic-bezier(.2,.8,.2,1) both;
  }

  .album-card::before,
  .track-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(130deg, rgba(255,255,255,.1), transparent 34%);
    opacity: .45;
  }

  .album-card:active,
  .track-card:active {
    transform: scale(.975);
  }

  .album-cover,
  .track-cover {
    border-radius: 13px !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.28) !important;
  }

  .track-card:nth-child(2n),
  .album-card:nth-child(2n) {
    animation-delay: .06s;
  }

  .track-card-info h3,
  .album-card h3 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px !important;
  }

  .track-card-info p,
  .album-card p {
    font-size: 12px !important;
  }

  .track-play-button {
    width: 42px !important;
    height: 42px !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.2) !important;
  }

  .audio-player {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 12px !important;
    height: var(--player-height) !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
    background:
      linear-gradient(180deg, rgba(20,20,21,.95), rgba(5,5,6,.96)) !important;
    backdrop-filter: blur(22px) saturate(1.35);
    box-shadow: 0 -18px 55px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08);
  }

  .player-left-cover {
    grid-column: 1 !important;
    justify-self: center !important;
  }

  .player-center {
    grid-column: 2 !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

  .player-cover {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
  }

  .player-track-meta {
    justify-content: flex-start !important;
    overflow: hidden;
  }

  .player-track-meta strong,
  .player-track-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .player-progress-row {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .play-button {
    width: 38px !important;
    height: 38px !important;
    transform: none !important;
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(255,255,255,.08) !important;
  }

  .progress-wrap {
    grid-template-columns: 0 minmax(0, 1fr) 0 !important;
    gap: 0 !important;
    margin-left: 8px !important;
  }

  .progress-wrap span {
    display: none !important;
  }

  .reference-album {
    grid-template-columns: 94px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 0 0 22px !important;
  }

  .reference-album-cover {
    width: 94px !important;
    height: 94px !important;
  }

  .reference-album-head {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .reference-album-meta {
    grid-column: 1 / -1;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .reference-track-list {
    margin-top: 12px;
  }

  .album-detail-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    text-align: center;
  }

  .album-detail-info {
    width: 100% !important;
    max-width: 100% !important;
  }

  .album-detail-cover {
    width: min(78vw, 360px) !important;
    height: auto !important;
    aspect-ratio: 1;
  }

  .album-detail-meta {
    justify-content: center;
  }

  .album-detail-actions {
    justify-content: center !important;
    width: 100%;
  }

  .album-play-action {
    max-width: 100%;
    justify-content: center !important;
    white-space: nowrap;
  }

  .album-detail-description {
    margin-inline: auto;
  }

  .album-detail-track {
    grid-template-columns: 28px 48px minmax(0, 1fr) 40px !important;
    gap: 10px !important;
  }

  .album-track-duration {
    display: none !important;
  }

  .album-track-play {
    grid-column: 4 !important;
  }

  .dedicated-player {
    max-width: 100%;
    margin-bottom: 42px !important;
    padding-top: 8px;
  }

  .dedicated-player-cover {
    width: min(78vw, 330px) !important;
    margin-bottom: 24px !important;
    border-radius: 22px !important;
    box-shadow: none !important;
  }

  .dedicated-audio-player {
    width: min(100%, 320px) !important;
    margin-inline: auto;
    padding: 16px 18px 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }

  .dedicated-progress-wrap {
    width: 100% !important;
  }

  .dedicated-player-info h1 {
    font-size: clamp(34px, 10vw, 52px) !important;
    letter-spacing: 0;
    text-shadow: 0 16px 46px rgba(0,0,0,.34);
  }
}

@media (max-width: 560px) {
  .site-shell {
    padding-inline: 10px;
  }

  .sidebar {
    align-items: center;
    flex-direction: row !important;
    gap: 6px;
    padding: 8px !important;
  }

  .sidebar-artist {
    max-width: 92px;
    overflow: hidden;
    align-self: center;
    margin: 0 4px 0 6px !important;
    text-overflow: ellipsis;
  }

  .sidebar-nav {
    width: auto !important;
    justify-content: space-between;
  }

  .sidebar .nav-item {
    flex: 1 1 0 !important;
    min-width: 42px;
    min-height: 42px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .album-grid,
  .track-grid {
    gap: 10px !important;
  }

  .track-ad-card {
    padding: 14px;
    border-radius: 16px;
  }

  .reference-album {
    grid-template-columns: 1fr !important;
  }

  .reference-album-cover {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1.8;
  }

  .dedicated-actions {
    grid-template-columns: 1fr !important;
  }

  .audio-player {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  .player-cover {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }
}

@keyframes mobileCardRise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mobileSearchDrop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Mobile cleanup: text nav + bare play icons ---------- */
@media (max-width: 1180px) {
  .sidebar {
    background: rgba(12,12,12,.88) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.3) !important;
  }

  .sidebar-nav {
    justify-content: space-between !important;
  }

  .sidebar .nav-item {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #8e8e96 !important;
  }

  .sidebar .nav-item.is-active,
  .sidebar .nav-item.is-collapsing {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f5f5f7 !important;
  }

  .sidebar .nav-icon {
    display: none !important;
  }

  .sidebar .nav-text {
    display: inline !important;
    grid-area: auto !important;
    opacity: 1 !important;
    transform: none !important;
    color: currentColor !important;
    font-size: 13px;
    white-space: nowrap;
  }

  .track-play-button,
  .album-track-play,
  .album-detail-track-play,
  .reference-main-play,
  .play-button,
  .dedicated-main-play,
  .album-play-action {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .track-play-button .button-icon-image,
  .album-track-play .button-icon-image,
  .album-detail-track-play .button-icon-image,
  .reference-main-play .button-icon-image,
  .play-button .button-icon-image,
  .dedicated-main-play .button-icon-image,
  .album-play-action .button-icon-image {
    filter: invert(1) brightness(1.08) !important;
  }
}

@media (max-width: 560px) {
  .sidebar-artist {
    display: none !important;
  }

  .sidebar-nav {
    flex: 1 1 100% !important;
    width: 100% !important;
    gap: 2px !important;
  }

  .sidebar .nav-item {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 8px 5px !important;
  }

  .sidebar .nav-text {
    font-size: 12px;
  }
}

/* ---------- Mobile player rebuild + icon color fix ---------- */
@media (max-width: 1180px) {
  .nav-icon-image,
  .search-icon-image,
  .close-icon-image,
  .button-icon-image,
  .action-icon-image {
    filter: none !important;
    opacity: 1 !important;
  }

  .audio-player {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    height: 74px !important;
    grid-template-columns: 48px minmax(0, 1fr) 40px !important;
    grid-template-areas: "cover meta play" "cover bar play" !important;
    gap: 4px 10px !important;
    align-items: center !important;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom)) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 22px !important;
    background: rgba(10,10,11,.94) !important;
    backdrop-filter: blur(22px) saturate(1.2) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08) !important;
    overflow: hidden !important;
  }

  .player-left-cover {
    grid-area: cover !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: center !important;
  }

  .player-cover {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 14px !important;
  }

  .player-center {
    display: contents !important;
  }

  .player-track-meta {
    grid-area: meta !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    direction: rtl !important;
    white-space: nowrap !important;
  }

  .player-track-meta strong,
  .player-track-meta span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .player-progress-row {
    display: contents !important;
  }

  .play-button {
    grid-area: play !important;
    width: 38px !important;
    height: 38px !important;
    justify-self: center !important;
    align-self: center !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .play-button .button-icon-image {
    width: 34px !important;
    height: 34px !important;
    filter: none !important;
  }

  .progress-wrap {
    grid-area: bar !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    direction: ltr !important;
  }

  .progress-wrap input[type="range"] {
    width: 100% !important;
    height: 4px !important;
  }

  .progress-wrap span {
    display: none !important;
  }

  .dedicated-audio-player {
    width: min(100%, 340px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .dedicated-player-controls {
    margin-bottom: 14px !important;
  }

  .dedicated-main-play {
    width: 70px !important;
    height: 70px !important;
    margin-inline: auto !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 16px 38px rgba(0,0,0,.28) !important;
  }

  .dedicated-main-play .button-icon-image {
    width: 56px !important;
    height: 56px !important;
    filter: none !important;
  }

  .dedicated-progress-wrap {
    width: min(100%, 300px) !important;
    margin-inline: auto !important;
    padding: 0 !important;
  }

  .dedicated-progress-wrap input[type="range"] {
    height: 4px !important;
  }
}

@media (max-width: 560px) {
  .audio-player {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    grid-template-columns: 44px minmax(0, 1fr) 38px !important;
    min-width: 0 !important;
  }

  .player-cover {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
}

/* ---------- Mobile final: white play icons + tighter mini player ---------- */
@media (max-width: 1180px) {
  .track-play-button,
  .album-track-play,
  .album-detail-track-play,
  .reference-main-play,
  .play-button,
  .dedicated-main-play {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }

  .track-play-button .button-icon-image,
  .album-track-play .button-icon-image,
  .album-detail-track-play .button-icon-image,
  .reference-main-play .button-icon-image,
  .play-button .button-icon-image,
  .dedicated-main-play .button-icon-image {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
  }

  .audio-player {
    height: 68px !important;
    grid-template-columns: 42px minmax(0, 1fr) 34px !important;
    grid-template-areas: "cover meta play" "cover bar play" !important;
    gap: 3px 8px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  .player-cover {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 12px !important;
  }

  .player-track-meta {
    max-width: 100% !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .player-track-meta strong {
    font-size: 12px !important;
  }

  .play-button {
    width: 34px !important;
    height: 34px !important;
  }

  .play-button .button-icon-image {
    width: 30px !important;
    height: 30px !important;
  }

  .progress-wrap {
    width: min(100%, 145px) !important;
    justify-self: start !important;
  }

  .progress-wrap input[type="range"] {
    width: 100% !important;
    height: 3px !important;
  }
}

@media (max-width: 560px) {
  .audio-player {
    grid-template-columns: 40px minmax(0, 1fr) 32px !important;
  }

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

  .progress-wrap {
    width: min(100%, 128px) !important;
  }
}

/* ---------- Mobile mini player final layout rebuild ---------- */
@media (max-width: 1180px) {
  .audio-player {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    height: 68px !important;
    grid-template-columns: 42px minmax(0, 1fr) 36px !important;
    grid-template-rows: 26px 12px !important;
    grid-template-areas:
      "cover info play"
      "cover progress play" !important;
    column-gap: 9px !important;
    row-gap: 1px !important;
    align-items: center !important;
    padding: 8px 10px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .player-left-cover {
    grid-area: cover !important;
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: center !important;
    justify-self: start !important;
    display: flex !important;
  }

  .player-cover {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 12px !important;
  }

  .player-center,
  .player-progress-row {
    display: contents !important;
  }

  .player-track-meta {
    grid-area: info !important;
    justify-self: start !important;
    align-self: end !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: min(100%, 210px) !important;
    min-width: 0 !important;
    direction: ltr !important;
    gap: 5px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-align: left !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  .player-track-meta strong,
  .player-track-meta span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .player-track-meta strong {
    max-width: 132px !important;
    font-size: 12px !important;
  }

  .player-track-meta #playerArtist {
    max-width: 68px !important;
  }

  .play-button {
    grid-area: play !important;
    width: 34px !important;
    height: 34px !important;
    align-self: center !important;
    justify-self: end !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .play-button .button-icon-image {
    width: 31px !important;
    height: 31px !important;
    filter: brightness(0) invert(1) !important;
  }

  .progress-wrap {
    grid-area: progress !important;
    justify-self: start !important;
    align-self: start !important;
    display: block !important;
    width: 64px !important;
    max-width: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    direction: ltr !important;
  }

  .progress-wrap input[type="range"] {
    display: block !important;
    width: 64px !important;
    height: 3px !important;
    margin: 0 !important;
  }

  .progress-wrap span {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .player-track-meta {
    max-width: 190px !important;
  }

  .player-track-meta strong {
    max-width: 116px !important;
  }

  .player-track-meta #playerArtist {
    max-width: 58px !important;
  }
}

/* ---------- Mobile mini player spacing/touch refinement ---------- */
@media (max-width: 1180px) {
  .audio-player {
    height: 72px !important;
    grid-template-rows: 24px 18px !important;
    row-gap: 5px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  .player-track-meta {
    align-self: center !important;
  }

  .progress-wrap {
    width: 108px !important;
    max-width: 108px !important;
    align-self: center !important;
    padding-top: 2px !important;
  }

  .progress-wrap input[type="range"] {
    width: 108px !important;
    height: 18px !important;
  }

  .progress-wrap input[type="range"]::-webkit-slider-runnable-track {
    height: 4px !important;
    border-radius: 999px !important;
  }

  .progress-wrap input[type="range"]::-webkit-slider-thumb {
    width: 14px !important;
    height: 14px !important;
    margin-top: -5px !important;
  }
}

@media (max-width: 420px) {
  .progress-wrap,
  .progress-wrap input[type="range"] {
    width: 96px !important;
    max-width: 96px !important;
  }
}

/* ---------- Mobile mini player: keep height, widen progress only ---------- */
@media (max-width: 1180px) {
  .audio-player {
    height: 68px !important;
    grid-template-rows: 24px 14px !important;
    row-gap: 3px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .progress-wrap {
    width: 118px !important;
    max-width: 118px !important;
    padding-top: 0 !important;
  }

  .progress-wrap input[type="range"] {
    width: 118px !important;
    height: 16px !important;
  }
}

@media (max-width: 420px) {
  .progress-wrap,
  .progress-wrap input[type="range"] {
    width: 106px !important;
    max-width: 106px !important;
  }
}

/* ---------- Mobile mini player: thinner visual bar, wider touch range ---------- */
@media (max-width: 1180px) {
  .audio-player {
    height: 62px !important;
    grid-template-rows: 22px 12px !important;
    row-gap: 2px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  .player-cover {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  .player-track-meta {
    align-self: end !important;
  }

  .progress-wrap {
    width: 170px !important;
    max-width: 170px !important;
    align-self: start !important;
    padding-top: 0 !important;
  }

  .progress-wrap input[type="range"] {
    width: 170px !important;
    height: 18px !important;
    background:
      linear-gradient(
        90deg,
        #f5f5f5 0%,
        #f5f5f5 var(--range-progress),
        #3a3a3a var(--range-progress),
        #3a3a3a 100%
      ) center / 100% 3px no-repeat !important;
    border-radius: 999px !important;
  }

  .progress-wrap input[type="range"]::-webkit-slider-runnable-track {
    height: 3px !important;
    background: transparent !important;
    border-radius: 999px !important;
  }

  .progress-wrap input[type="range"]::-webkit-slider-thumb {
    width: 12px !important;
    height: 12px !important;
    margin-top: -4.5px !important;
    background: #f5f5f5 !important;
    border-radius: 50% !important;
  }

  .progress-wrap input[type="range"]::-moz-range-track,
  .progress-wrap input[type="range"]::-moz-range-progress {
    height: 3px !important;
    border-radius: 999px !important;
  }

  .progress-wrap input[type="range"]::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    background: #f5f5f5 !important;
    border: 0 !important;
  }
}

@media (max-width: 420px) {
  .progress-wrap,
  .progress-wrap input[type="range"] {
    width: 150px !important;
    max-width: 150px !important;
  }
}

/* ---------- Mobile mini player cover vertical alignment ---------- */
@media (max-width: 1180px) {
  .player-left-cover {
    transform: translateY(2px) !important;
  }
}

/* ---------- Mobile album play icon color fix ---------- */
@media (max-width: 1180px) {
  .album-play-action,
  .album-secondary-action.album-play-action {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }

  .album-play-action .button-icon-image,
  .album-secondary-action.album-play-action .button-icon-image {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
  }
}

/* ---------- Mobile mini player time labels ---------- */
@media (max-width: 1180px) {
  .audio-player {
    grid-template-rows: 22px 16px !important;
  }

  .progress-wrap {
    display: grid !important;
    grid-template-columns: 34px 170px 34px !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    max-width: none !important;
  }

  .progress-wrap span {
    display: block !important;
    color: #8d8d95 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .progress-wrap input[type="range"] {
    width: 170px !important;
  }
}

@media (max-width: 420px) {
  .progress-wrap {
    grid-template-columns: 30px 140px 30px !important;
    gap: 4px !important;
  }

  .progress-wrap input[type="range"] {
    width: 140px !important;
  }

  .progress-wrap span {
    font-size: 8.5px !important;
  }
}

/* ---------- Mobile neutral background + no symbolic ad placeholders ---------- */
@media (max-width: 1180px) {
  body {
    background:
      radial-gradient(circle at 12% 24%, rgba(255,255,255,.045), transparent 28%),
      linear-gradient(180deg, #090909 0%, #050505 58%, #020202 100%) !important;
  }

  .page-header h1 {
    text-shadow: 0 18px 52px rgba(0,0,0,.28) !important;
  }

  .sidebar .nav-item.is-active {
    background: transparent !important;
    box-shadow: none !important;
  }

  .track-ad-card:empty {
    display: none !important;
  }
}

/* ---------- Ad placeholders hidden until real IDs/html are set ---------- */
[hidden],
.ad-box[hidden],
.player-ad-slot[hidden],
.track-banner-ad[hidden] {
  display: none !important;
}

.player-ad-slot-left {
  display: none !important;
}

.track-square-ad-grid {
  grid-template-columns: repeat(2, minmax(0, 160px)) !important;
  justify-content: center !important;
  gap: 12px !important;
}

.track-square-ad-grid .ad-square {
  width: 160px !important;
  max-width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 1 !important;
}

@media (max-width: 560px) {
  .track-square-ad-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .track-square-ad-grid .ad-square {
    width: 100% !important;
  }
}

/* ---------- Home hero refresh ---------- */
body[data-page="home"] .home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 210px;
  align-items: center;
  gap: 22px;
  min-height: 275px;
  margin: 0 0 42px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .12), transparent 24%),
    radial-gradient(circle at 86% 78%, rgba(255, 255, 255, .07), transparent 30%),
    linear-gradient(135deg, rgba(28, 28, 31, .92), rgba(6, 6, 7, .96) 64%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

body[data-page="home"] .home-hero::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 26%, transparent 74%, rgba(255, 255, 255, .04)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 58px);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  opacity: .56;
}

body[data-page="home"] .home-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

body[data-page="home"] .home-hero .page-header {
  margin: 0;
  padding: 0;
}

body[data-page="home"] .home-hero .eyebrow,
body[data-page="home"] .home-hero .subtitle {
  color: rgba(255, 255, 255, .62);
}

body[data-page="home"] .home-hero .eyebrow {
  margin-bottom: 10px;
}

body[data-page="home"] .home-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 5.2vw, 68px);
  line-height: .92;
  letter-spacing: 0;
  text-shadow: 0 18px 50px rgba(0, 0, 0, .36);
}

body[data-page="home"] .home-hero .subtitle {
  margin-top: 14px;
  font-size: 16px;
}

body[data-page="home"] .home-hero .site-search-wrap {
  width: min(660px, 100%);
  margin: 0;
  border-color: rgba(255, 255, 255, .16);
  border-radius: 20px;
  background: rgba(255, 255, 255, .075);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 16px 44px rgba(0, 0, 0, .26);
  backdrop-filter: blur(16px);
}

body[data-page="home"] .home-hero-art {
  position: relative;
  z-index: 1;
  min-height: 210px;
}

body[data-page="home"] .hero-disc {
  position: absolute;
  display: block;
  width: 112px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 24px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .35), transparent 12%),
    linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .035) 58%),
    linear-gradient(135deg, #202125, #070708);
  box-shadow:
    0 26px 48px rgba(0, 0, 0, .46),
    inset 0 1px 0 rgba(255, 255, 255, .15);
}

body[data-page="home"] .hero-disc::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background:
    radial-gradient(circle, rgba(255, 255, 255, .82) 0 5px, transparent 6px),
    repeating-radial-gradient(circle, rgba(255, 255, 255, .16) 0 1px, transparent 1px 11px);
  opacity: .72;
}

body[data-page="home"] .hero-disc-one {
  left: 16px;
  top: 14px;
  transform: rotate(-10deg);
}

body[data-page="home"] .hero-disc-two {
  left: 74px;
  top: 78px;
  width: 130px;
  transform: rotate(8deg);
}

body[data-page="home"] .hero-disc-three {
  left: 4px;
  bottom: 8px;
  width: 112px;
  opacity: .72;
  transform: rotate(16deg);
}

@media (hover: hover) {
  body[data-page="home"] .home-hero:hover .hero-disc-one {
    transform: translateY(-6px) rotate(-12deg);
  }

  body[data-page="home"] .home-hero:hover .hero-disc-two {
    transform: translateY(5px) rotate(10deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  body[data-page="home"] .hero-disc {
    transition: transform .45s ease, opacity .45s ease;
  }
}

@media (max-width: 1180px) {
  body[data-page="home"] .home-hero {
    display: block;
    min-height: 0;
    margin: 6px 0 28px;
    padding: 22px 18px;
    border-radius: 24px;
  }

  body[data-page="home"] .home-hero-art {
    display: none;
  }

  body[data-page="home"] .home-hero h1 {
    font-size: 42px;
  }

  body[data-page="home"] .home-hero .subtitle {
    font-size: 14px;
  }

  body[data-page="home"] .home-hero .site-search-wrap {
    display: none;
    margin-top: 18px;
    width: 100%;
  }

  body.mobile-search-open[data-page="home"] .home-hero .site-search-wrap,
  body[data-page="home"] .home-hero .site-search-wrap.has-value,
  body[data-page="home"] .home-hero .site-search-wrap.is-focused {
    display: flex !important;
  }
}

@media (max-width: 560px) {
  body[data-page="home"] .home-hero {
    padding: 18px 15px;
  }

  body[data-page="home"] .home-hero h1 {
    font-size: 36px;
  }
}

/* ---------- Home hero final polish ---------- */
body[data-page="home"] .home-hero-copy {
  z-index: 2 !important;
}

body[data-page="home"] .home-hero-art {
  opacity: .82 !important;
}

body[data-page="home"] .hero-disc-three {
  width: 96px !important;
}

@media (max-width: 1480px) and (min-width: 1181px) {
  body[data-page="home"] .home-hero {
    grid-template-columns: minmax(280px, 1fr) 190px !important;
    gap: 18px !important;
  }

  body[data-page="home"] .home-hero h1 {
    font-size: clamp(40px, 4.7vw, 62px) !important;
  }

  body[data-page="home"] .hero-disc-one {
    left: 8px !important;
  }

  body[data-page="home"] .hero-disc-two {
    left: 58px !important;
    width: 118px !important;
  }
}

/* ---------- Brand title font ---------- */
@font-face {
  font-family: "Bebas Neue Local";
  src: url("assets/fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body[data-page="home"] .home-hero h1 {
  font-family: "Bebas Neue Local", "Arial Narrow", Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
}

/* ---------- Sidebar centered navigation ---------- */
.sidebar-artist {
  display: none !important;
}

.sidebar {
  justify-content: center !important;
}

.sidebar-nav {
  width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 1180px) {
  .sidebar {
    justify-content: center !important;
  }

  .sidebar-nav {
    flex: 0 1 auto !important;
    justify-content: center !important;
  }
}