/**
 * Sonarr - SPA Music App
 * Basic stylesheet
 */

/* Base Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --black: #000000;
    --light-black: #1b1c28;
    --yellow: #ffd32a;
    --white: #ffffff;
    --light-gray: #b3b3b3;
    --inter: "Inter", sans-serif;
}

/* Playlist page: render the meta block as a normal flow element under the cover */
.playlist-detail-header .artist-hero-meta {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  z-index: auto;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

body {
  font-family: var(--inter);
  background-color: var(--black);
  color: var(--white);
  line-height: 1.6;
}

a, button {
  color: var(--white);
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Layout */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 1.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  width: 100%;
}


.trending-section{
  margin: 1rem 2rem 0 0;
}


/* Playlists page - blocks and tracks */
.playlists-page {
  padding: 1rem 0 2rem;
}

/* See All Artists page */
.see-all-artists-page {
  margin: 2rem 0;
}

.artists-select-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 100%;
}

.artist-select-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  /* width for 3 per row accounting for two gaps of 2rem each */
  flex: 0 0 calc((100% - (2 * 1.5rem)) / 3 - 2px);
  max-width: calc((100% - (2 * 1.5rem)) / 3 - 2px);
}

.artist-select-avatar {
  position: relative;
  width: 100%;
  padding-top: 100%; /* square */
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
}

.artist-select-avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.artist-select-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 6px;
}

.artist-select-meta {
  font-size: 0.8rem;
  color: var(--light-gray);
  margin-top: 2px;
}

.artist-select-check {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--yellow);
  color: #000;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
}

.artist-select-card.is-following .artist-select-check { display: flex; }

.artists-select-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

.playlists-blocks {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.playlist-block {
  background: rgba(27, 28, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 0.75rem;
}

/* New card layout for playlists overview */
.playlist-card {
  background: transparent;
  border: none;
  padding: 0; /* keep slight padding around image */
}

.playlist-card-image {
  width: 100%;
  aspect-ratio: 1 / 1; /* big square image */
  border-radius: 16px;
  overflow: hidden;
  position: relative; /* anchor overlay button */
}

.playlist-card-image img.playlist-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

.playlist-card-body {
  padding: 0.75rem 0.25rem 0 0.25rem;
}

.playlist-card-body .playlist-title {
  font-size: 1.05rem;
  font-weight: 700;
}

.playlist-card-body .playlist-meta {
  margin-top: 4px;
  color: var(--light-gray);
}

.playlist-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0.5rem 0.25rem 0 0.25rem;
}

/* Play button overlay on image */
.playlist-card-play-button {
  position: absolute;
  left: 0;
  bottom: 0;
  background: transparent;
  background-color: transparent;
  border: none;
  border-radius: 999px;
  padding: 15px; /* ~90% bigger from 16px */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none;
}

.playlist-card-play-button .playlist-play-icon {
  width: 65px; /* 40px * 1.9 */
  height: 65px;
}

/* Menu/settings button overlay (top-right) */
.playlist-card-menu-button {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  background-color: transparent;
  border: none;
  border-radius: 12px;
  padding: 16px; /* 100% bigger from 8px */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none;
}

.playlist-card-menu-button .playlist-menu-icon {
  width: 40px; /* 100% bigger from 20px */
  height: 40px;
}

.playlist-header-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.playlist-header-row .playlist-image {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
}

.playlist-header-row .playlist-title {
  font-size: 1.05rem;
  font-weight: 700;
}

.playlist-header-row .playlist-track-count,
.playlist-header-row .playlist-followers-count {
  font-size: 0.8rem;
  color: var(--light-gray);
}

.playlist-header-actions {
  margin-left: auto;
}

.playlist-menu-button {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}

.playlist-menu-icon {
  width: 28px; /* enlarged */
  height: 28px;
}

.playlist-tracks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  margin-left: 18px; /* further reduced indent */
}

/* Expandable playlist list behavior: slide down (only for overview cards) */
.playlist-block .playlist-tracks-list {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 300ms ease, opacity 220ms ease;
  will-change: max-height, opacity;
}

.playlist-block[aria-expanded="true"] .playlist-tracks-list {
  max-height: 1200px; /* large enough for typical lists */
  opacity: 1;
}

.playlist-header-toggle {
  cursor: pointer;
}

.playlist-header-toggle:focus {
  outline: 2px solid rgba(255, 211, 42, 0.6);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Playlist card body layout: title/meta left, follow button right */
.playlist-card-body {
  padding-top: 10px;
}

.playlist-card-row {
  display: flex;
  align-items: center; /* vertically center the follow button relative to left block */
  justify-content: space-between;
  gap: 8px;
}

.playlist-card-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.playlist-card-left .playlist-title {
  margin: 0;
}

.playlist-card-left .playlist-meta {
  margin: 0;
}

.playlist-track-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
}

.playlist-track-row .track-cover-col {
  flex: 0 0 auto;
}

.playlist-track-row .track-cover {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
}

.playlist-track-row .track-info-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.playlist-track-row .track-title {
  font-size: 0.98rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-track-row .track-subline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
}

.playlist-track-row .playlist-dot {
  width: 4px;
  height: 4px;
  opacity: 0.7;
}

.playlist-track-row .track-actions-col {
  flex: 0 0 auto;
}

.playlist-track-row .track-delete {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}

.playlist-track-row .delete-icon {
  width: 15px; /* smaller */
  height: 15px;
  opacity: 0.9;
}

/* Playlist header play button */
.playlist-play-button {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}

.playlist-play-icon {
  width: 22px;
  height: 22px;
}

/* Landing page styles (public) */

body.page-landing {
  /* Background applied directly to body (page-specific class) */
  background-color: var(--black);
  background-image: url('../img/main-landing-background.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.landing-container {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 2rem; /* consistent with app-container spacing */
  overflow: hidden; /* match SPA preference */
  justify-content: space-between; /* keep header top and main bottom */
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.3rem 2rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
}

.btn-primary {
  color: #111;
  background: var(--yellow);
  border: 1px solid var(--yellow);
}

.landing-hero { text-align: center; padding-top: 4dvh; padding-bottom: 4dvh; max-width: 720px; }
.headline { font-size: 2.2rem; line-height: 1.2; margin: 0 0 1.5rem 0; font-weight: 700; }
.subhead { color: var(--light-gray); margin: 0 0 4rem 0; font-size: 1.4rem; font-weight: 300; line-height: 28px;}
.cta { margin-bottom: 2rem; }

/* Full-width CTA button on landing only */
.landing-hero .btn {
  width: 100%;
  display: flex;            /* override inline-flex from .btn */
  justify-content: center;  /* center the label */
}



/* Playlist options dropdown */
.dropdown-menu {
  position: absolute;
  z-index: 1002;
  background-color: var(--light-black);
  border-radius: 14px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.05);
  width: max-content; /* expand to fit content */
  max-width: calc(100vw - 16px); /* keep within viewport */
}

.dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.5rem;
  background: transparent;
  border: none;
  color: var(--light-gray);
  cursor: pointer;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 300;
  white-space: nowrap; /* avoid wrapping so menu grows */
}

.dropdown-item img {
  width: 20px;
  height: 20px;
  margin-right: 15px;
  object-fit: contain;
}

.dropdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1001;
}


/* Top Bar styles moved to top-bar.css */

.main-content {
  flex: 1;
  min-height: 0; /* allow scrolling inside flex child */
  overflow-x: hidden;
  overflow-y: auto;
}

/* Navigation */
.nav-container {
  padding: 15px;
}

.nav-list {
  display: flex;
  justify-content: space-around;
  list-style: none;
}

.nav-item {
  text-align: center;
}

.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

.nav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}

.nav-link.active {
  color: var(--primary-color);
}

/* Loading state */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  color: var(--text-secondary);
}

/* Error state */

/* Play Button */
.play-button {
  background-color: var(--yellow);
  color: var(--black);
  border: none;
  border-radius: 25px;
  padding: 10px 20px;
  font-family: var(--inter);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 10px;
  transition: background-color 0.2s ease;
}

.play-button:hover {
  background-color: #e6bd25;
}

.play-button:active {
  transform: scale(0.98);
}

/* Styling for the playlist rows */
/* Horizontal scrolling container for playlists */
.playlists-container {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
  padding: 0.5rem 0;
  margin: 0 -2rem;
  padding: 0 2rem;
  scrollbar-width: none; /* Firefox */
}

.playlists-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.playlist-row {
  display: flex;
  overflow: hidden;
  height: 60px;
  cursor: pointer;
  flex-shrink: 0;
  align-items: center;
}

.playlist-image-column {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
}

.playlist-image-column img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.playlist-info-column {
  padding: 0.5rem 0 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.playlist-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--white);
}

.playlist-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.playlist-creator {
  font-size: 0.8rem;
  color: var(--light-gray);
  margin: 0;
}

.playlist-track-count {
  font-size: 0.8rem;
  margin: 0;
}

/* Ensure followers count matches track count size/color across contexts */
.playlist-followers-count {
  font-size: 0.8rem;
  color: var(--light-gray);
  margin: 0;
}

.playlist-dot {
  width: 4px;
  height: 4px;
  display: inline-block;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  margin: 0 2px; /* even tighter spacing */
}

.empty-playlists-message {
  text-align: center;
  padding: 2rem;
  color: var(--light-gray);
}


/**
 * Sonarr - SPA Music App
 * Album view page (single album detail)
 */

 .albumview-detail-container {
  padding: 2rem 0;
}

/* Album page background with blur and bottom fade */
.albumview-bg {
  position: fixed; /* stay put while scrolling content */
  inset: 0;
  background-repeat: no-repeat;
  background-position: top center; /* pin background to top */
  background-size: cover;
  filter: blur(8px);
  transform: scale(1.05); /* compensate blur crop */
  z-index: 0; /* base layer */
}

.albumview-overlay {
  position: fixed; /* fixed so it doesn't scroll */
  inset: 0;
  pointer-events: none; /* allow interactions */
  z-index: 1; /* above bg, below content */
  background: linear-gradient(180deg,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.45) 20%,
    rgba(0,0,0,0.7) 35%,
    rgba(0,0,0,0.85) 50%,
    rgba(0,0,0,0.95) 100%
  );
}

.albumview-content {
  position: relative;
  z-index: 2; /* above overlay */
}

.playlist-detail-header {
  text-align: center;
  margin-bottom: 2rem;
}

/* Center the follow button between the title and the small meta text */
.playlist-detail-header .playlist-header-actions {
  align-self: center;          /* center within the row's cross axis */
  display: flex;
  align-items: center;         /* vertical center for the button itself */
  margin-top: 0;               /* remove negative offset to center properly */
}

/* Tight spacing under the cover image */
.playlist-detail-header .playlist-detail-cover {
  margin-bottom: 6px;
}

.playlist-detail-header .artist-hero-title {
  margin: 0;                  /* remove default h3 margins */
  padding: 0;
}

.playlist-detail-header .artist-hero-sub-row {
  margin-top: 4px !important; /* ensure only a small gap under title */
}

.playlist-detail-header .artist-hero-meta {
  margin-top: 6px !important; /* small spacing from cover to title/meta */
}

.playlist-detail-cover {
  width: 350px;
  height: 350px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  position: relative; /* allow overlay buttons on top of cover */
}

.playlist-detail-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Album view: match markup in pages/albums.php */
.albumview-header {
  text-align: center;
  margin-bottom: 2rem;
}

.albumview-cover-large {
  width: 350px;
  height: 350px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  position: relative;
}

.albumview-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ensure meta block is laid out normally inside album header */
.albumview-header .artist-hero-meta {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  z-index: auto;
  margin-top: 6px !important;
}

/* Track list play button (remove default white background) */
.albumview-play-button {
  background: transparent !important;
  background-color: transparent !important;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.albumview-tracks-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.albumview-track-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0;
}

.albumview-track-col {
  display: flex;
  align-items: center;
}

.albumview-track-number {
  width: 40px;
  font-weight: 200;
  color: var(--light-gray);
  font-size: 1rem;
}

.albumview-track-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
}

.albumview-track-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.albumview-track-meta {
  font-size: 0.9rem;
  color: var(--light-gray);
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.albumview-track-actions {
  display: flex;
}

/* Play button overlay on playlist detail cover */
.playlist-detail-play-button {
  position: absolute;
  bottom: 10px;
  left: 10px;
  border: none;
  background: transparent !important;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.playlist-detail-play-icon {
  width: 48px;  /* bigger play button */
  height: 48px;
  display: block;
}

.albumview-add-button,
.playlist-detail-play-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
}

.albumview-add-icon,
.albumview-play-icon {
  width: 20px;
  height: 20px;
}

/* Hide page title immediately when data-hide-title is true */
.top-bar[data-hide-title="true"] .page-title,
.top-bar[data-hide-title="true"] #page-title {
  display: none !important;
}


/* Favorites page styling */
.fav_tracks_container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0;
}

.fav_track_row {
    display: flex;
    align-items: center;
    padding: 0.3rem;
}

.fav_track_cover {
    width: 70px;
    height: 70px;
    margin-right: 1rem;
    overflow: hidden;
    border-radius: 10px;
}

.fav_track_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fav_track_info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0; /* Allows text truncation to work */
}

.fav_track_title {
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
}

.fav_track_artist {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

.fav_track_plays {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.fav_track_actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-left: 1rem;
}

.fav_track_remove,
.fav_track_play,
.fav_artist_unfollow {
    background: none;
    border: none;
    padding: 0.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent !important;
    box-shadow: none;
}

.fav_action_icon,
.fav_play_icon {
    width: 18px;
    height: 18px;
}

.fav_no_tracks_message {
    text-align: center;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.7);
}

.fav_no_tracks_message p {
    margin: 0.5rem 0;
}

/* users recent plays */
.user-recents-scroll-container {
    overflow-x: auto;
    margin: 0 -2rem;
    padding: 0 2rem;
    scrollbar-width: none; /* Firefox */
}

.user-recents-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.user-recents-row {
    display: flex;
    gap: 1rem;
    padding-bottom: 0;
}

.user-recent-track-card {
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
}

/* Favorites card styling */
.favorites-card {
    position: relative;
}

.favorites-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.favorites-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
}

.favorites-icon {
    width: 50px;
    height: 50px;
    border-bottom-left-radius: 15px;
    
}

.user-recent-track-image-container {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
}

/* Playlist collage (2x2) for curated playlists */
.playlist-collage-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* keep square */
    overflow: hidden;
}

.playlist-collage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.playlist-collage-cell {
    background-size: cover;
    background-position: center;
}

/* Single image mode inside playlist collage */
.playlist-collage-image-container img.track-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Make only playlist cards bigger, not all recent cards */
.user-recent-track-card.playlist-card {
    min-width: 150px;
    max-width: 150px;
}

/* Round only the bottom corners of the bottom cells */
.playlist-collage-grid .playlist-collage-cell:nth-child(1) {
  border-top-left-radius: 15px;
}
.playlist-collage-grid .playlist-collage-cell:nth-child(2) {
  border-top-right-radius: 15px;
}
.playlist-collage-grid .playlist-collage-cell:nth-child(3) {
    border-bottom-left-radius: 15px;
}
.playlist-collage-grid .playlist-collage-cell:nth-child(4) {
    border-bottom-right-radius: 15px;
}

.user-recent-track-image-container img.track-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-recent-play-button {
    position: absolute;
    bottom: 10px;
    left: 10px;
    border: none;
    background: transparent !important;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.user-recent-play-icon {
    width: 28px;
    height: 28px;
    display: block;
}

.user-recent-track-info {
    padding: 0.8rem 0;
    display: flex;
    justify-content: space-between;
}

.user-recent-track-text {
    flex: 1;
    overflow: hidden;
}

.user-recent-track-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-recent-track-artist {
    font-size: 0.7rem;
    font-weight: 300;
    color: var(--light-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;  
    margin: 0;          /* vertical center alignment */
}

.user-recent-track-time {
    font-size: 0.7rem;
    color: #b3b3b3;
    display: flex;
    align-items: center;
    margin-left: 0.5rem;
}

/* Ensure the small dot icon aligns nicely within meta line */
.user-recent-track-artist .playlist-dot {
    width: 4px;
    height: 4px;
    display: inline-block;
    object-fit: contain;
}


/* Favorites artists styling */
.favorite-artists-section {
  margin-bottom: 2rem;
}

.favorite-artists-scroll-container {
  overflow-x: auto;
  margin: 0 -2rem;
  padding: 0 2rem;
  scrollbar-width: none; /* Firefox */
}

.favorite-artists-scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.favorite-artists-row {
  display: flex;
  gap: 1rem;
  padding-bottom: 1rem;
}

.favorite-artist-card {
  min-width: 100px;
  max-width: 100px;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
}

.favorite-artist-image-container {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
  border-radius: 15px;
}

.favorite-artist-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Add-more card: same size as artist cards, centered plus */
.favorite-artist-card.add-more-card .favorite-artist-image-container {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.favorite-artist-plus {
  color: #fff;
  font-size: 36px;
  line-height: 1;
  display: block;
}

.favorite-artist-info {
  padding: 0.5rem 0;
}

.favorite-artist-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.favorite-artist-meta {
  font-size: 0.7rem;
  color: #b3b3b3;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}





/* search page styling */
.search-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 1rem;
  margin-bottom: 1rem;
}

.search-container {
  margin: 2rem 0 1rem 0;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  background-color: var(--white);
  border: none;
  border-radius: 4px;
  padding: 1.2rem 1rem;
  padding-right: 2.5rem;
  color: var(--black);
  font-size: 1.2rem;
  font-weight: 700;
}

.search-input::placeholder {
  color: var(--light-black);
  opacity: 0.7;
}

.search-input:focus {
  outline: none;
}

.search-input-icon {
  position: absolute;
  right: 1rem;
  width: 40px;
  height: 40px;
  pointer-events: none;
}

/* Search tags section */
.search-section-title {
  font-size: 1.3rem;
  font-weight: 400;
  margin: 2rem 0 0.5rem 0;
}

/* Subtitles inside grouped search sections */
.search-subtitle {
  font-size: 1.3rem;
  font-weight: 400;
  margin: 0.25rem 0 0.5rem 0;
}

/* Group container for secondary rows on results (albums, popular tracks, etc.) */
.search-group-secound {
  margin: 1.5rem 0;
}

/* Ensure inner rows/lists have a bit of spacing from the subtitle */
.search-group-secound .search-cards-container,
.search-group-secound .search-list {
  margin-top: 0.5rem;
}

/* Vertical lists used in search results (artists/tracks) */
.search-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Standardized vertical row style for search items (artists, albums, tracks) */
.search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
}

.search-item:focus {
  outline: 2px solid rgba(255, 211, 42, 0.6);
  outline-offset: 2px;
}

/* Thumbnail at the left of a row */
.search-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
  display: block;
}

/* Text block: title + meta stacked, truncating */
.search-item-text {
  flex: 1 1 auto;
  min-width: 0; /* allow ellipsis */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-item .title {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--white);
}

.search-item .meta {
  font-size: 0.85rem;
  color: var(--light-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Optional right-side inline action (e.g., play) */
.track-inline-play {
  margin-left: auto;
  flex: 0 0 auto;
  background: transparent !important;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
}

.search-tags-container {
  display: flex;
  flex-wrap: nowrap; /* single row */
  gap: 0.5rem;
  margin-top: 0.25rem;
  overflow-x: auto; /* swipe horizontally */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  padding-bottom: 0.25rem; /* space for hidden scrollbar */
  scroll-snap-type: x proximity;
  scrollbar-width: none; /* Firefox hide */
}

.search-tags-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge hide */
}

.search-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.5rem;
  border-radius: 999px; /* pill */
  background: var(--light-black);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--light-gray);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto; /* prevent shrinking, stay in a row */
  scroll-snap-align: start;
}

/* Search cards (recent searches) */
.search-cards-container {
  display: flex;
  flex-wrap: nowrap; /* single row */
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-bottom: 0.25rem; /* space for hidden scrollbar */
  overflow-x: auto; /* swipe horizontally */
  -webkit-overflow-scrolling: touch; /* smooth momentum on iOS */
  scroll-snap-type: x proximity;
  /* Hide scrollbars cross-browser and improve gesture */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
  touch-action: pan-x pan-y; /* allow vertical scroll while enabling horizontal swipe */
  overscroll-behavior-x: contain; /* avoid bouncing parent */
}

.search-cards-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}

.search-card {
  flex: 0 0 auto; /* keep in one row */
  width: 120px; /* match image width for clean alignment */
  scroll-snap-align: start;
  cursor: pointer;
  user-select: none;
  color: var(--light-gray);
  text-decoration: none;
}

.search-card-image {
  width: 120px;
  height: 120px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative; /* allow absolute-positioned play button */
}
/* Ensure images inside search cards fill their container without distortion */
.search-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px; /* match container rounding */
}

.search-card-album {
  flex: 0 0 auto; /* keep in one row */
  width: 190px; /* match image width for clean alignment */
  scroll-snap-align: start;
  cursor: pointer;
  user-select: none;
  color: var(--light-gray);
  text-decoration: none;
}

/* Compact variant to match 120px cards used in other rows */
.search-card-album.compact {
  width: 120px;
}

.search-card-album.compact .search-card-album-image {
  width: 120px;
  height: 120px;
}

.search-card-album-image {
  width: 190px;
  height: 190px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative; /* allow absolute-positioned play button */
  margin-right: 1rem; /* add horizontal gap specifically to album images */
}

/* Placeholder initial if no image is available */
.search-card-initial {
  font-size: 56px;
  font-weight: 800;
  color: rgba(255,255,255,0.5);
}

.search-card-text {
  margin-top: 0.5rem;
}

.search-card-title {
  margin-top: 0.35rem;
  font-size: 0.92rem;
  line-height: 1.2;
  max-width: 120px;
  display: block;
  width: 100%;
  overflow: hidden; /* clip long titles inside card */
  white-space: nowrap; /* single line for marquee */
  position: relative; /* anchor ::before/::after fades */
}

.search-card-desc {
  font-size: 0.7rem;
  font-weight: 300;
  color: var(--light-gray);
  opacity: 0.8;
  margin-top: 0.15rem;
}

/* Artist hero card on search results */
.artist-hero-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  position: relative; /* for overlay and text positioning */
  border-radius: 20px; /* match image rounding for clip */
  overflow: hidden; /* clip overlay and text within radius */
  /* Fixed hero height for consistent crop */
  height: var(--artist-hero-height, 500px);
}
.artist-hero-image {
  width: 100%;
  height: 100%; /* fill hero card height */
  object-fit: cover; /* crop to fill */
  object-position: top center; /* anchor top so bottom gets cropped */
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  display: block;
  margin: 0 auto;
}
.artist-hero-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%;
  /* solid black at bottom, fading upward */
  background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.0) 85%);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  pointer-events: none;
  z-index: 1;
}
.artist-hero-meta {
  /* place text over image in the overlay area */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  margin: 0;
  text-align: left;
  z-index: 2;
  display: flex;                 /* lay out left text and right button */
  align-items: center;           /* vertically center button with text block */
  justify-content: space-between;/* push button to the far right */
  padding: 0 1rem;               /* slight side padding to breathe */
}
.artist-hero-left {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
}
.artist-hero-title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: var(--white);
}
.artist-hero-sub {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--light-gray);
}

/* Playlist/album detail header tweaks: keep meta line compact */
.albumview-header .artist-hero-sub {
  font-size: 0.75rem;            /* slightly smaller under title */
  white-space: nowrap;            /* prevent wrap */
  overflow: hidden;               /* allow truncation */
  text-overflow: ellipsis;        /* show ellipsis if needed */
}

.albumview-header .playlist-header-actions .follow-button {
  padding: 0.35rem 0.75rem;       /* tighter pill */
  font-size: 0.85rem;             /* slightly smaller */
}

/* Album page: render the meta block as a normal flow element under the cover */
.albumview-header .artist-hero-meta {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  padding: 0;
  margin-top: 3rem; /* increased spacing under album image */
}

/* Hide search input when showing results */
.has-search-results .search-container {
  display: none !important;
}

/* Marquee support */
.search-card-title-text {
  display: inline-block;
  will-change: transform;
  min-width: max-content; /* allow text to be wider than container */
  padding-right: 24px; /* gap at end so it doesn't cut immediately */
  color: var(--white);
}

/* Optional edge fade when animating */
.search-card-title.is-overflowing::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.9) 100%);
}

.search-card-title.is-overflowing::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0) 100%);
}

.search-card-title.is-overflowing .search-card-title-text {
  animation-name: search-card-marquee;
  animation-duration: var(--marquee-duration, 6s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Play button styling inside search cards */
.search-card-image .play-button {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: transparent !important;
  color: inherit;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.search-card-image .play-button:hover,
.search-card-image .play-button:active {
  background: transparent !important;
  transform: none;
}

.search-card-image .play-button img {
  display: block;
  width: 28px;
  height: 28px;
}

@keyframes search-card-marquee {
  0% { transform: translateX(0); }
  10% { transform: translateX(0); } /* small pause before moving */
  90% { transform: translateX(calc(-1 * var(--scroll-distance, 0px))); }
  100% { transform: translateX(calc(-1 * var(--scroll-distance, 0px))); }
}


/* styles for the users gallery page */
.user-activity-page {
  padding: 1rem 0;
}

.user-activity-header {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 2rem 0;
  color: var(--white);
}

.user-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.user-activity-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
}

.user-activity-cover {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
}

.user-activity-title {
  color: var(--white);
  font-size: 0.95rem;
  line-height: 1.2;
}

.user-activity-subtitle {
  color: var(--light-gray);
  font-size: 0.75rem;
  margin-top: 2px;
}

.user-activity-time {
  color: var(--light-gray);
  font-size: 0.7rem;
  margin-right: 0.25rem;
}

/* Favorites summary card on user activity page */
.favorites-summary {
  cursor: pointer;
}

.favorites-summary-icon {
  width: 90px;
  height: 90px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* ensure rounded corners clip the image */
}

.favorites-summary-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the square nicely */
  border-radius: inherit; /* keep corners rounded */
}

.favorites-summary-text {
  color: var(--white);
}

/* Extra space between image and text in favorites row */
.user-activity-row.favorites-summary {
  gap: 3rem;
}

.favorites-summary-title {
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}

.favorites-summary-subtitle {
  color: var(--light-gray);
  font-size: 0.8rem;
  font-weight: 300;
  margin-top: 2px;
}

/* Ensure last item in horizontal scroll is fully visible */
.user-recents-row > .user-recent-track-card:last-child {
  margin-right: 2rem; /* match scroll container side padding */
}

.user-recents{
  margin: 2rem 2rem 0 0;
}
.section-title{
  margin: 1.5rem 0 0.5rem 0;
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 500;
}

/* Tracks list (user library) */
.tracks-list {
  margin: 2rem 0;
}
.track-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.track-row {
  display: flex;
  align-items: center;
}
.track-cover img {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}
.track-meta {
  margin-left: 0.75rem;
  flex: 1;
  min-width: 0;
}
.track-title {
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-sub {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--light-gray);
  font-size: 0.75rem;
}

/* Random suggestion card */
.random-card {
  background: var(--light-black);
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  margin: 1.5rem 0 2rem 0;
}
.random-card-image {
  width: 38px;
  height: 38px;
  display: block;
}
.random-card-text {
  color: var(--white);
  font-size: 1rem;
  line-height: 1.4rem;
  font-weight: 200;
}

/* Random page styles */





/* user settings page styles */
.user-settings-page {
  padding: 1rem 0;
}

/* Settings sections */
.user-settings-page .setting-section {
  margin: 1rem 0;
}

.user-settings-page .section-header {
  margin-bottom: 2rem;
}

.user-settings-page .section-title {
  margin: 1.5rem 0 0 0;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--white);
}

.user-settings-page .section-description {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 200;
  color: var(--light-gray);
}

/* Profile image area */
.user-settings-page .profile-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem 0;
}

.user-settings-page .profile-image-large {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  cursor: pointer;
}

/* Ensure top-bar avatar crops from top center as well */
.top-bar .profile-image {
  object-fit: cover;
  object-position: top center;
}

.user-settings-page .profile-image-large:active {
  transform: scale(0.98);
}

.user-settings-page .upload-status {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
}

/* VIP upgrade CTA card */
.vip-cta-card {
  background: transparent;
  margin: 1.5rem 0 2rem 0;
}
.vip-cta-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.vip-cta-image {
  width: 80px;
  height: auto;
  border-radius: 20px;
  display: block;
}
.vip-cta-text {
  display: flex;
  flex-direction: column;
}
.vip-cta-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--white);
}
.vip-cta-desc {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 200;
  color: var(--light-gray);
}
.vip-cta-actions {
  display: flex;
  justify-content: flex-start; /* left aligned button */
}
.vip-cta-button {
  padding: 0.3rem 0.5rem; /* slightly smaller than hero buttons */
  font-size: 0.9rem;
  border-radius: 5px;
  font-weight: 500;
}

/* Artist hero title row with follow button */
.artist-hero-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.follow-button {
  color: var(--light-gray);
  border: var(--light-gray) 1px solid;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  background: transparent;
}

.follow-button.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

.follow-button.is-following {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--light-gray);
}

/* Artist bio styling */
.artist-bio-text {
  color: var(--light-gray);
  font-weight: 300;
  font-size: 1rem;
  text-align: left;
  line-height: 1.6;
  white-space: pre-wrap; /* preserve newlines from nl2br */
}

.artist-bio-toggle {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
  cursor: inherit; /* appear as plain text */
}

/* ==============================
  * Playlists page (plx- prefixed)
  * Compatibility styles mirroring non-prefixed selectors
  * ============================== */
 /* Page container */
 .plx-playlists-page {
   padding: 1rem 0 2rem;
 }
 
 /* Blocks wrapper and block card */
 .plx-playlists-blocks {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
 }
 .plx-playlist-block {
   background: rgba(27, 28, 40, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 16px;
   padding: 0.75rem;
 }
 
 /* Playlist overview card */
 .plx-playlist-card {
   background: transparent;
   border: none;
   padding: 0.75rem;
 }
 .plx-playlist-card-image {
   width: 100%;
   aspect-ratio: 1 / 1;
   border-radius: 16px;
   position: relative;
 }
 .plx-playlist-card-image img.plx-playlist-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 16px;
 }
 .plx-playlist-card-body {
   padding: 0.75rem 0.25rem 0 0.25rem;
 }
 .plx-playlist-card-body .plx-playlist-title {
   font-size: 1.05rem;
   font-weight: 700;
 }
 .plx-playlist-card-body .plx-playlist-meta {
   margin-top: 4px;
   color: var(--light-gray);
 }
 .plx-playlist-card-actions {
   display: flex;
   gap: 8px;
   align-items: center;
 }
 
 /* Overlay play/menu buttons */
 .plx-playlist-card-play-button {
   position: absolute;
   left: 20px;
   bottom: 20px;
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
   box-shadow: none;
 }
 .plx-playlist-card-play-button .plx-playlist-play-icon {
   width: 65px;
   height: 65px;
 }
 .plx-playlist-card-menu-button {
   position: absolute;
   top: 6px;
   right: 6px;
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
   box-shadow: none;
 }
 .plx-playlist-card-menu-button .plx-playlist-menu-icon {
   width: 40px;
   height: 40px;
 }
 
 /* Header row (inside expanded block) */
 .plx-playlist-header-row {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   padding-bottom: 0.5rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 .plx-playlist-header-row .plx-playlist-image {
   width: 60px;
   height: 60px;
   border-radius: 12px;
   object-fit: cover;
 }
 .plx-playlist-header-row .plx-playlist-title {
   font-size: 1.05rem;
   font-weight: 700;
 }
 .plx-playlist-header-row .plx-playlist-track-count,
 .plx-playlist-header-row .plx-playlist-followers-count {
   font-size: 0.8rem;
   color: var(--light-gray);
 }
 .plx-playlist-header-actions { margin-left: auto; }
 .plx-playlist-menu-button { background: none; border: none; padding: 6px; cursor: pointer; }
 .plx-playlist-menu-icon { width: 28px; height: 28px; }
 
 /* Expandable tracks list inside a block */
 .plx-playlist-tracks-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
   overflow: hidden;
   max-height: 0;
   opacity: 0;
   transition: max-height 0.3s ease, opacity 0.3s ease;
   will-change: max-height, opacity;
 }
 .plx-playlist-block[aria-expanded="true"] .plx-playlist-tracks-list {
   max-height: 1200px;
   opacity: 1;
 }
 .plx-playlist-header-toggle { cursor: pointer; }
 .plx-playlist-header-toggle:focus {
   outline: 2px solid rgba(255, 211, 42, 0.6);
   outline-offset: 2px;
   border-radius: 12px;
 }
 
 /* Playlist card body row */
 .plx-playlist-card-body { padding: 1rem 0; }
 .plx-playlist-card-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
 }
 .plx-playlist-card-left {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 .plx-playlist-card-left .plx-playlist-title { margin: 0; }
 .plx-playlist-card-left .plx-playlist-meta { margin: 0; }
 
 /* Track row inside list */
 .plx-playlist-track-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 6px 0;
 }
 .plx-playlist-track-row .plx-track-cover-col { flex: 0 0 auto; }
 .plx-playlist-track-row .plx-track-cover {
   width: 50px;
   height: 50px;
   border-radius: 10px;
   object-fit: cover;
 }
 .plx-playlist-track-row .plx-track-info-col {
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
 }
 .plx-playlist-track-row .plx-track-title {
   font-size: 0.98rem;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .plx-playlist-track-row .plx-track-subline {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 0.8rem;
   color: rgba(255,255,255,0.75);
 }
 .plx-playlist-track-row .plx-playlist-dot {
   width: 4px;
   height: 4px;
   opacity: 0.7;
 }
 .plx-playlist-track-row .plx-track-actions-col { flex: 0 0 auto; }
 .plx-playlist-track-row .plx-track-delete { background: none; border: none; padding: 6px; cursor: pointer; }
 .plx-playlist-track-row .plx-delete-icon { width: 15px; height: 15px; opacity: 0.9; }
 
 /* Header play button */
 .plx-playlist-play-button { background: none; border: none; padding: 6px; cursor: pointer; }
 .plx-playlist-play-icon { width: 22px; height: 22px; }
 
 /* Horizontal playlists scroller and rows */
 .plx-playlists-container {
   display: flex;
   overflow-x: auto;
   gap: 1rem;
   padding-bottom: 0.25rem;
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
 .plx-playlists-container::-webkit-scrollbar { display: none; }
 .plx-playlist-row {
   display: flex;
   overflow: hidden;
   height: 60px;
   gap: 0.75rem;
   align-items: center;
 }
 .plx-playlist-image-column {
   width: 60px;
   height: 60px;
   flex-shrink: 0;
   border-radius: 16px;
   overflow: hidden;
 }
 .plx-playlist-image-column img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 16px;
 }
 .plx-playlist-info-column {
   padding: 0.5rem 0 0.5rem 0.5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: left;
 }
 .plx-playlist-title { font-size: 1rem; font-weight: 600; margin: 0; color: var(--white); }
 .plx-playlist-meta { display: flex; align-items: center; gap: 0.5rem; }
 .plx-playlist-creator { font-size: 0.8rem; color: var(--light-gray); margin: 0; }
 .plx-playlist-track-count { font-size: 0.8rem; margin: 0; }
 .plx-playlist-followers-count { font-size: 0.8rem; color: var(--light-gray); margin: 0; }
 .plx-playlist-dot { width: 4px; height: 4px; display: inline-block; background-color: var(--light-gray); border-radius: 50%; opacity: 0.6; margin: 0 2px; }
 .plx-empty-playlists-message { text-align: center; padding: 2rem; color: var(--light-gray); }
 
 /* Detail header (single playlist view) */
 .plx-playlist-detail-header { text-align: center; margin-bottom: 2rem; }
 .plx-playlist-detail-header .plx-playlist-header-actions { display: inline-block; margin: 0.5rem 0; }
 
 /* Follow button (prefixed variant for playlists context) */
 .plx-follow-button {
   color: var(--light-gray);
   border: var(--light-gray) 1px solid;
   border-radius: 999px;
   padding: 0.5rem 1rem;
   font-weight: 700;
   font-size: 0.9rem;
   cursor: pointer;
   background: transparent;
 }
 .plx-follow-button.plx-is-loading { opacity: 0.5; pointer-events: none; }
 .plx-follow-button.plx-is-following { background: transparent; color: var(--white); border: 1px solid var(--light-gray); }
 
 /* Detail cover sizing and play overlay (prefixed) */
 .plx-playlist-detail-cover {
   width: 350px;
   height: 350px;
   margin: 0 auto;
   border-radius: 20px;
   position: relative;
   overflow: hidden;
 }
 .plx-playlist-detail-cover-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   border-radius: 20px;
 }
 .plx-playlist-detail-play-button {
   position: absolute;
   bottom: 10px;
   left: 10px;
   background: none;
   border: none;
   cursor: pointer;
 }
 .plx-playlist-detail-play-icon {
   width: 48px;
   height: 48px;
   display: block;
 }
 
 /* Collage grid used in overview and detail */
 .plx-playlist-collage-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 2px;
   width: 100%;
   height: 100%;
   border-radius: 16px;
   overflow: hidden;
 }
 .plx-playlist-collage-cell {
   background-size: cover;
   background-position: center;
 }
 
 /* Artist-hero style tweaks within playlist detail header (prefixed) */
 .plx-playlist-detail-header .plx-artist-hero-meta {
   position: static;
   left: auto;
   right: auto;
   margin-top: 6px !important;
 }
 .plx-playlist-detail-header .plx-artist-hero-title {
   margin: 0;
   padding: 0;
 }
 .plx-playlist-detail-header .plx-artist-hero-sub-row {
   margin-top: 4px !important;
 }
 
 
 
 
 .search-thumb .search-thumb-collage {
   width: 120px !important;
   height: 120px !important;
   border-radius: 10px !important;
   object-fit: cover !important;
 }

/* Global full-screen loader (custom animated logo) */
#app-loader {
  position: fixed;
  inset: 0;
  /* Yellow base with repeating background piece */
  background-image: url('../img/loading/bg-piece.png');
  background-repeat: repeat;
  background-size: 180px auto;
  background-position: 0 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* above top bar, popups, player */
  opacity: 0;
  transition: opacity 100ms ease;
}
#app-loader.visible { display: flex; opacity: 1; }

#app-loader .loader-content { text-align: center; }

/* Rotating logo (full rotation) */
#app-loader .loader-logo {
  perspective: 800px; /* harmless for rotateZ, keeps option for 3D tweaks */
}

#app-loader .loader-logo img {
  width: 160px;
  height: 160px;
  display: block;
  transform-origin: 50% 50%;
  backface-visibility: visible;
  animation: loader-rotate-full-y 2.2s linear infinite;
}

@keyframes loader-rotate-full-y {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}