/* ============================================================
   ELEZA — Themes System
   themes: default | liquid-glass | spotify-clone
   ============================================================ */

/* ─── Global Animations (all themes) ──────────────────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px var(--eleza-glow, rgba(255,255,255,0.15)); }
  50%       { box-shadow: 0 0 22px var(--eleza-glow, rgba(255,255,255,0.35)); }
}
@keyframes spinRecord {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes progressGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes spotifyPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}
@keyframes navSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes glassShimmer {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}
@keyframes bgFloat {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ─── View / page entrance animations ─────────────────────── */

#content-area > * {
  animation: fadeInUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#content-area .song-item {
  animation: fadeInUp 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* stagger song rows */
#content-area .song-item:nth-child(1)  { animation-delay: 0.03s; }
#content-area .song-item:nth-child(2)  { animation-delay: 0.06s; }
#content-area .song-item:nth-child(3)  { animation-delay: 0.09s; }
#content-area .song-item:nth-child(4)  { animation-delay: 0.12s; }
#content-area .song-item:nth-child(5)  { animation-delay: 0.15s; }
#content-area .song-item:nth-child(6)  { animation-delay: 0.18s; }
#content-area .song-item:nth-child(7)  { animation-delay: 0.21s; }
#content-area .song-item:nth-child(8)  { animation-delay: 0.24s; }
#content-area .song-item:nth-child(9)  { animation-delay: 0.27s; }
#content-area .song-item:nth-child(10) { animation-delay: 0.30s; }

/* cards / grid items */
.grid-view-item, .album-card, .artist-card, .genre-card {
  animation: scaleIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* sidebar nav links */
.sidebar .nav-link {
  animation: navSlideIn 0.25s ease both;
  transition: background-color 0.2s ease, color 0.2s ease,
              border-left-color 0.2s ease, transform 0.15s ease;
}
.sidebar .nav-link:hover { transform: translateX(4px); }

/* player bar entrance */
.player-bar {
  animation: slideInLeft 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: all 0.3s ease;
}

/* modals */
.modal.show .modal-dialog {
  animation: scaleIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* page header */
.page-header {
  animation: fadeIn 0.3s ease both;
}

/* album art hover spin hint */
.player-bar .album-art-thumb:hover,
#player-album-art:hover {
  animation: spinRecord 8s linear infinite;
  border-radius: 50% !important;
  cursor: pointer;
}

/* progress bar fill animation on load */
#progress-bar-fill, #seek-bar-fill, .progress-fill {
  transition: width 0.2s linear;
}

/* button interactions */
.btn, button {
  transition: transform 0.12s ease, opacity 0.12s ease, background-color 0.2s ease;
}
.btn:active, button:active { transform: scale(0.94); }

/* ─── Skeleton shimmer (loading state) ────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #1e1e1e 25%, #2a2a2a 50%, #1e1e1e 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  THEME 1 — DEFAULT                                      ║
   ╚══════════════════════════════════════════════════════════╝ */

html[data-theme="default"],
body[data-theme="default"] {
  --ytm-bg:            #030303;
  --ytm-surface:       #121212;
  --ytm-surface-2:     #282828;
  --ytm-primary-text:  #ffffff;
  --ytm-secondary-text:#aaaaaa;
  --ytm-accent:        #ff0000;
  --eleza-glow:        rgba(255, 0, 0, 0.3);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  THEME 2 — LIQUID GLASS                                 ║
   ╚══════════════════════════════════════════════════════════╝ */

/*
  Technical reference: AndroidLiquidGlass (kyant0/backdrop)
  The Android shader uses:
    - AGSL SDF rounded-rect refraction shader (RoundedRectRefractionShaderString)
    - circleMap() for non-linear edge falloff
    - gradSdRoundedRect() for normal vector → pixel displacement
    - refractionHeight: edge depth where bending occurs (12–24dp on buttons)
    - refractionAmount: max pixel displacement (24–48dp)
    - vibrancy() + colorControls(saturation:1.5) + blur(8–16dp)
    - Directional highlight at 45° via dot(grad, normal) → pow(|d|, falloff)
    - Inner shadow: radius 4–24dp, offset downward, black 15% alpha
    - Surface overlay: Color.Black.copy(alpha:0.05–0.1)
    - SimpMusic: samples 5×5 thumbnail every 1s for luminance adaptation

  CSS translation strategy:
    - backdrop-filter: blur + saturate simulates vibrancy+blur
    - SVG feDisplacementMap filter on ::before simulates the SDF lens refraction
    - Directional highlight via linear-gradient at 45° with hard-stop falloff
    - Inner shadow via inset box-shadow (downward, black 15%)
    - Outer drop-shadow for the outer Shadow()
    - Background overlay black 0.05–0.1 alpha
    - border: 1px rgba(255,255,255,0.18) for the rim highlight
    - Capsule/rounded-rect shape via border-radius
*/

/* ── SVG filter definition for lens refraction ─────────────────
   Injected into DOM by theme-page.js when liquid-glass is active.
   This mirrors the RoundedRectRefractionShaderString displacement.
   We approximate it with feDisplacementMap + feTurbulence for the
   lens distortion effect at element edges.
   ─────────────────────────────────────────────────────────────── */

/* Hidden SVG carrying the filter — displayed:none so it takes no space */
#eleza-lg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── CSS Variables ─────────────────────────────────────────────── */
html[data-theme="liquid-glass"],
body[data-theme="liquid-glass"] {
  /* Color tokens */
  --ytm-bg:            #0c0c18;
  --ytm-surface:       rgba(255,255,255,0.06);
  --ytm-surface-2:     rgba(255,255,255,0.10);
  --ytm-primary-text:  #ffffff;
  --ytm-secondary-text:rgba(255,255,255,0.55);
  --ytm-accent:        #a78bfa;
  --eleza-glow:        rgba(167,139,250,0.4);

  /* Glass tokens — derived from Shaders.kt defaults */
  --lg-blur:           16px;      /* vibrancy blur: 8–16dp in SimpMusic */
  --lg-saturation:     160%;      /* colorControls saturation:1.5 */
  --lg-brightness:     1.08;      /* colorControls brightness:0.1 */
  --lg-bg:             rgba(0,0,0,0.08);  /* surface overlay black 0.08 */
  --lg-border:         rgba(255,255,255,0.20);
  --lg-border-bright:  rgba(255,255,255,0.42); /* top-left highlight rim */
  --lg-highlight-stop: rgba(255,255,255,0.28); /* directional highlight */
  --lg-inner-shadow:   rgba(0,0,0,0.18);  /* InnerShadow default color */
  --lg-outer-shadow:   rgba(0,0,0,0.40);  /* Shadow default */
  --lg-refraction-tint:rgba(255,255,255,0.04); /* refracted area tint */
}

/* ── Body: deep dark gradient, slow float animation ─────────────
   Mirrors the dark wallpaper used in the catalog demos           */
body[data-theme="liquid-glass"] {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(88,60,180,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 90%, rgba(30,80,160,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #0c0c18 0%, #060610 100%) !important;
  background-size: 400% 400% !important;
  animation: bgFloat 20s ease-in-out infinite !important;
}

/* ── The Glass Mixin — applied to all glass surfaces ───────────
   Mirrors drawBackdrop() call in components:
     effects { vibrancy(); blur(8–16dp); lens(24dp, 24dp) }
     highlight { Highlight.Default at 45°, falloff:1 }
     innerShadow { radius:24dp, offset:downward, black 15% }
     shadow { radius:8dp, black 40% }
     surface { drawRect(Color.Black.copy(0.05–0.1)) }
   ─────────────────────────────────────────────────────────────── */

/* Core glass surface */
body[data-theme="liquid-glass"] .sidebar,
body[data-theme="liquid-glass"] .player-bar,
body[data-theme="liquid-glass"] .modal-content,
body[data-theme="liquid-glass"] .dropdown-menu,
body[data-theme="liquid-glass"] .offcanvas,
body[data-theme="liquid-glass"] .context-menu {
  position: relative !important;
  background: var(--lg-bg) !important;
  backdrop-filter:
    blur(var(--lg-blur))
    saturate(var(--lg-saturation))
    brightness(var(--lg-brightness)) !important;
  -webkit-backdrop-filter:
    blur(var(--lg-blur))
    saturate(var(--lg-saturation))
    brightness(var(--lg-brightness)) !important;

  /* Rim: 1px border, brighter on top-left (directional highlight at 45°)
     Mirrors HighlightStyle.Default with angle:45, falloff:1            */
  border: 1px solid var(--lg-border) !important;

  /* Outer drop shadow + inner shadow (InnerShadow.Default)
     Inner: radius≈24dp translated to ~6px inset, downward offset, black 18%
     Outer: Shadow(radius:8dp) → ~8px spread, black 40%               */
  box-shadow:
    0 2px 32px var(--lg-outer-shadow),
    0 1px 0 var(--lg-border-bright) inset,
    0 -1px 0 rgba(0,0,0,0.15) inset,
    -1px 0 0 rgba(255,255,255,0.06) inset,
    1px 0 0 rgba(0,0,0,0.08) inset,
    0 6px 24px rgba(0,0,0,0.20) inset !important;

  overflow: hidden !important;
}

/* ── Directional highlight layer — mimics DefaultHighlightShader ─
   angle:45°, falloff:1 → linear gradient from top-left to bottom-right
   intensity = pow(|dot(grad, normal)|, falloff) ≈ linear gradient   */
body[data-theme="liquid-glass"] .sidebar::after,
body[data-theme="liquid-glass"] .player-bar::after,
body[data-theme="liquid-glass"] .modal-content::after,
body[data-theme="liquid-glass"] .dropdown-menu::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.06) 30%,
    transparent 60%,
    rgba(0,0,0,0.06) 100%
  );
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* ── Lens refraction edge illusion ─────────────────────────────
   The AGSL shader displaces pixels at element edges using circleMap()
   — pixels near the rim are pushed outward by up to refractionAmount.
   In CSS we approximate this with a pseudo-element that has:
   - a slight border-radius padding
   - a radial gradient that is brighter/more transparent at the rim
   This creates the "thick glass edge" bending-light look.           */
body[data-theme="liquid-glass"] .sidebar::before,
body[data-theme="liquid-glass"] .player-bar::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at 30% 20%,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.03) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  animation: lgLensShift 8s ease-in-out infinite alternate;
}

@keyframes lgLensShift {
  0%   { opacity: 0.7; transform: scale(1.005); }
  100% { opacity: 1;   transform: scale(1); }
}

/* ── Cards, buttons and interactive pill elements ───────────────
   From LiquidButton: height:48dp, Capsule shape,
     vibrancy + blur(2dp) + lens(12dp, 24dp)
   We use a lighter blur for smaller elements (matches 2dp → ~2px)  */
body[data-theme="liquid-glass"] .player-btn.play-btn,
body[data-theme="liquid-glass"] .btn-primary,
body[data-theme="liquid-glass"] .btn-danger {
  position: relative !important;
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(8px) saturate(140%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%) brightness(1.1) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 500px !important;
  color: #ffffff !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 4px 12px rgba(0,0,0,0.30),
    0 2px 4px rgba(0,0,0,0.15) inset !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
  overflow: hidden !important;
}
body[data-theme="liquid-glass"] .player-btn.play-btn:hover,
body[data-theme="liquid-glass"] .btn-primary:hover,
body[data-theme="liquid-glass"] .btn-danger:hover {
  transform: scale(1.06) !important;
  background: rgba(255,255,255,0.16) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 8px 20px rgba(0,0,0,0.40),
    0 2px 4px rgba(0,0,0,0.15) inset !important;
}
body[data-theme="liquid-glass"] .player-btn.play-btn:active,
body[data-theme="liquid-glass"] .btn-primary:active {
  transform: scale(0.96) !important;
}
/* Accent glow on play button */
body[data-theme="liquid-glass"] .player-btn.play-btn {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 4px 16px rgba(167,139,250,0.35),
    0 2px 4px rgba(0,0,0,0.15) inset !important;
}

/* ── Song items — glass pill on hover ───────────────────────────
   Capsule shape, vibrancy+blur(2dp)+lens(12dp,24dp) on interaction */
body[data-theme="liquid-glass"] .song-item {
  border-radius: 8px !important;
  transition: background 0.15s ease, backdrop-filter 0.15s ease !important;
}
body[data-theme="liquid-glass"] .song-item:hover {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(8px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(130%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 2px 8px rgba(0,0,0,0.20) !important;
}

/* ── Nav links ──────────────────────────────────────────────────
   Active state = glass capsule pill like LiquidBottomTabs tab    */
body[data-theme="liquid-glass"] .sidebar .nav-link {
  border-radius: 10px !important;
  transition: background 0.15s ease, backdrop-filter 0.15s ease, transform 0.12s ease !important;
}
body[data-theme="liquid-glass"] .sidebar .nav-link:hover {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  transform: translateX(3px) !important;
}
body[data-theme="liquid-glass"] .sidebar .nav-link.active {
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  border-left: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 2px 8px rgba(0,0,0,0.15),
    inset 0 0 0 1px rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}
body[data-theme="liquid-glass"] .sidebar .nav-link.active .bi {
  color: var(--ytm-accent) !important;
}

/* ── Cards ──────────────────────────────────────────────────────*/
body[data-theme="liquid-glass"] .card {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 4px 16px rgba(0,0,0,0.25) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
body[data-theme="liquid-glass"] .card:hover {
  background: rgba(255,255,255,0.10) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 12px 32px rgba(0,0,0,0.40) !important;
}

/* ── View details header ────────────────────────────────────────*/
body[data-theme="liquid-glass"] .view-details-header {
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.30) !important;
}

/* ── Progress bars ──────────────────────────────────────────────
   Matches SimpMusic's luminance-adaptive progress styling        */
body[data-theme="liquid-glass"] .progress-bar-bg {
  background: rgba(255,255,255,0.15) !important;
  border-radius: 2px !important;
}
body[data-theme="liquid-glass"] .progress-bar-fg {
  background: linear-gradient(
    90deg,
    rgba(167,139,250,0.8) 0%,
    rgba(196,181,253,1.0) 100%
  ) !important;
  box-shadow: 0 0 8px rgba(167,139,250,0.50) !important;
  border-radius: 2px !important;
}
body[data-theme="liquid-glass"] .progress-bar-container:hover .progress-bar-fg {
  background: linear-gradient(
    90deg,
    rgba(167,139,250,1.0) 0%,
    rgba(255,255,255,1.0) 100%
  ) !important;
  box-shadow: 0 0 12px rgba(167,139,250,0.70) !important;
}

/* ── Volume slider ──────────────────────────────────────────────*/
body[data-theme="liquid-glass"] input[type=range] {
  accent-color: rgba(167,139,250,0.8) !important;
}

/* ── Modals ─────────────────────────────────────────────────────*/
body[data-theme="liquid-glass"] .modal-content {
  border-radius: 20px !important;
}
body[data-theme="liquid-glass"] .modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* ── Context menu ───────────────────────────────────────────────
   optionsMenu equivalent: glass pill, rounded              */
body[data-theme="liquid-glass"] .context-menu,
body[data-theme="liquid-glass"] .dropdown-menu {
  border-radius: 14px !important;
}
body[data-theme="liquid-glass"] .context-menu li:hover,
body[data-theme="liquid-glass"] .dropdown-item:hover {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(4px) !important;
}

/* ── Inputs ─────────────────────────────────────────────────────*/
body[data-theme="liquid-glass"] .form-control,
body[data-theme="liquid-glass"] input[type="text"],
body[data-theme="liquid-glass"] input[type="email"],
body[data-theme="liquid-glass"] input[type="password"] {
  background: rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 10px !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset !important;
}
body[data-theme="liquid-glass"] .form-control:focus,
body[data-theme="liquid-glass"] input:focus {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(167,139,250,0.6) !important;
  box-shadow:
    0 0 0 3px rgba(167,139,250,0.20),
    0 1px 0 rgba(255,255,255,0.15) inset !important;
}

/* ── Search bar ─────────────────────────────────────────────────*/
body[data-theme="liquid-glass"] .search-bar .form-control {
  border-radius: 500px !important;
}

/* ── Scrollbar ──────────────────────────────────────────────────*/
body[data-theme="liquid-glass"] ::-webkit-scrollbar { width: 6px; }
body[data-theme="liquid-glass"] ::-webkit-scrollbar-track { background: transparent; }
body[data-theme="liquid-glass"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.20);
  border-radius: 3px;
}
body[data-theme="liquid-glass"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.35);
}

/* ── Accent text ────────────────────────────────────────────────*/
body[data-theme="liquid-glass"] .song-item.now-playing .song-title,
body[data-theme="liquid-glass"] .song-item.now-playing .playing-icon,
body[data-theme="liquid-glass"] .nav-link.active .bi {
  color: var(--ytm-accent) !important;
}

/* ── Playing icon / equalizer bars ─────────────────────────────*/
body[data-theme="liquid-glass"] .now-playing-bars span {
  background: var(--ytm-accent) !important;
  box-shadow: 0 0 6px rgba(167,139,250,0.6) !important;
}

/* ── Loader ─────────────────────────────────────────────────────*/
body[data-theme="liquid-glass"] .loader,
body[data-theme="liquid-glass"] #infinite-scroll-loader {
  color: rgba(255,255,255,0.5) !important;
}

/* ── Profile picture ────────────────────────────────────────────*/
body[data-theme="liquid-glass"] .profile-picture {
  border: 2px solid rgba(255,255,255,0.20) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.30) !important;
}

/* ── Page header ────────────────────────────────────────────────
   Frosted top bar — backdrop blur like a sticky glass sheet      */
body[data-theme="liquid-glass"] .page-header {
  background: rgba(12,12,24,0.40) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}


/* ================================================================
   THEME 3 — SPOTIFY CLONE  (Reference-accurate full UI reskin)
   Sources: spotify-clone-master (PHP), spotify-clone (React/dist),
            spotify-clone-main (Vite/Tailwind), Spotify_Clone (React)
   ================================================================ */

/* ── CSS Variables ─────────────────────────────────────────────── */
html[data-theme="spotify"],
body[data-theme="spotify"] {
  --ytm-bg:             #121212;
  --ytm-surface:        #181818;
  --ytm-surface-2:      #282828;
  --ytm-primary-text:   #ffffff;
  --ytm-secondary-text: #a7a7a7;
  --ytm-accent:         #1DB954;

  /* Spotify-specific tokens (from reference CSS) */
  --sp-black:           #000000;
  --sp-bg:              #121212;
  --sp-surface:         #181818;     /* gridViewItem, nowPlayingBar bg */
  --sp-surface-2:       #282828;     /* tracklistRow:hover, optionsMenu */
  --sp-surface-3:       #333333;     /* deepest hover */
  --sp-surface-4:       #404040;     /* progressBarBG */
  --sp-border:          rgba(255,255,255,0.08);
  --sp-text:            #ffffff;
  --sp-subtext:         #a0a0a0;     /* exact color from reference style.css */
  --sp-green:           #1DB954;
  --sp-green-hover:     #1ed760;
  --sp-green-legacy:    #2ebd59;     /* from clone5 .button.green */
  --sp-nav-width:       220px;       /* exact from clone5 #navBarContainer */
  --sp-bar-height:      90px;        /* exact from clone5 #nowPlayingBar */
}

/* ── Base ─────────────────────────────────────────────────────── */
body[data-theme="spotify"] {
  background-color: var(--sp-bg) !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  /* ^ exact font-family from clone5 style.css */
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
}

/* ================================================================
   SIDEBAR  — mirrors clone5 #navBarContainer exactly
   width:220px, background:#000, height:100vh, position:fixed
   ================================================================ */

body[data-theme="spotify"] .sidebar {
  width: var(--sp-nav-width) !important;
  min-width: var(--sp-nav-width) !important;
  background-color: var(--sp-black) !important;
  border-right: none !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  z-index: 100 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Sidebar offcanvas body = navBar padding:25px */
body[data-theme="spotify"] .sidebar .offcanvas-body {
  padding: 25px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  height: 100% !important;
}

/* Logo area — clone5 uses an img, we keep text but style it */
body[data-theme="spotify"] .sidebar .logo {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  padding: 0 !important;
  margin-bottom: 15px !important;
  color: var(--sp-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
/* Spotify green dot icon before logo */
body[data-theme="spotify"] .sidebar .logo::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath fill='%231DB954' d='M248 8C111.1 8 8 111.1 8 248s103.1 240 240 240 240-103.1 240-240S384.9 8 248 8zm100.7 338.5c-3.7 6.1-11.6 8-17.7 4.3-48.5-29.6-109.5-36.3-181.4-19.9-6.9 1.6-13.8-2.7-15.4-9.6-1.6-6.9 2.7-13.8 9.6-15.4 78.7-18 146.1-10.2 200.5 23 6.1 3.7 8 11.6 4.4 17.6zm26.9-59.8c-4.7 7.6-14.6 10-22.2 5.4-55.5-34.1-140.1-44-205.6-24.1-8.5 2.6-17.5-2.2-20.1-10.7-2.6-8.5 2.2-17.5 10.7-20.1 75-22.8 168.2-11.8 231.7 27.5 7.6 4.7 10 14.6 5.5 22zm2.3-62.3c-66.5-39.5-176.4-43.1-239.9-23.8-10.2 3.1-20.9-2.7-24-12.8-3.1-10.2 2.7-20.9 12.8-24 73-22.2 194.4-17.9 271.1 27.6 9.2 5.4 12.2 17.2 6.7 26.4-5.4 9.1-17.2 12.2-26.7 6.6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}
body[data-theme="spotify"] .sidebar .logo span {
  color: var(--sp-green) !important;
}

/* Nav groups — clone5 has .navBar .group with border-top */
body[data-theme="spotify"] .sidebar hr.text-secondary {
  border-color: rgba(160,160,160,0.3) !important;
  margin: 0 0 10px 0 !important;
  opacity: 1 !important;
}

/* Nav links — clone5: .navItemLink color:#a0a0a0, font-weight:700, font-size:16px */
body[data-theme="spotify"] .sidebar .nav-link {
  color: var(--sp-subtext) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.8px !important;
  padding: 10px 0 !important;
  gap: 0 !important;
  border-left: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
}
body[data-theme="spotify"] .sidebar .nav-link .bi {
  display: none !important; /* hide bootstrap icons; Spotify uses plain text nav */
}
body[data-theme="spotify"] .sidebar .nav-link:hover {
  color: var(--sp-text) !important;
  background: transparent !important;
  transform: none !important;
}
body[data-theme="spotify"] .sidebar .nav-link.active {
  color: var(--sp-text) !important;
  background: transparent !important;
  border-left: none !important;
}
/* Underline active link like Spotify */
body[data-theme="spotify"] .sidebar .nav-link.active span {
  text-decoration: none !important;
  border-bottom: 1px solid var(--sp-text) !important;
  padding-bottom: 1px !important;
}

/* Bottom utility section — smaller, subdued */
body[data-theme="spotify"] .sidebar .mt-auto {
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(160,160,160,0.3) !important;
}
body[data-theme="spotify"] .sidebar .mt-auto .nav-link {
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  padding: 6px 0 !important;
}

/* ================================================================
   MAIN CONTENT AREA  — mirrors #mainViewContainer: margin-left:220px
   ================================================================ */

body[data-theme="spotify"] .app-container {
  background: var(--sp-bg) !important;
}
body[data-theme="spotify"] .main-content {
  margin-left: var(--sp-nav-width) !important;
  background: var(--sp-bg) !important;
  /* Gradient fade from green at top like Spotify home */
  background-image: linear-gradient(
    180deg,
    rgba(30, 75, 45, 0.85) 0px,
    rgba(18, 18, 18, 0) 340px
  ) !important;
  background-color: var(--sp-bg) !important;
}

/* ── Sticky top bar — transparent over gradient ──────────────── */
body[data-theme="spotify"] .page-header {
  background: transparent !important;
  padding: 16px 20px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 64px !important;
}
body[data-theme="spotify"] .page-header::before {
  /* Back / Forward nav buttons — exact Spotify style */
  content: '\276E   \276F';
  font-size: 11px;
  font-weight: 900;
  color: var(--sp-text);
  background: rgba(0,0,0,0.6);
  border-radius: 50px;
  padding: 7px 16px;
  letter-spacing: 6px;
  flex-shrink: 0;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}
body[data-theme="spotify"] .content-title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--sp-text) !important;
}

/* Content inner padding like clone5 #mainContent */
body[data-theme="spotify"] .content-area-wrapper {
  padding: 0 20px 20px !important;
}

/* ================================================================
   SONG LIST  — mirrors clone5 .tracklistRow / tracklist exactly
   height:40px, padding:15px 10px, hover:#282828
   ================================================================ */

/* Song list header — like Spotify: #, Title, Album, Duration */
body[data-theme="spotify"] .song-list-header {
  padding: 4px 10px 4px 10px !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  margin: 0 0 8px 0 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--sp-subtext) !important;
  /* Keep grid alignment matching rows below */
  grid-template-columns: 40px minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) 80px 40px !important;
}

/* Song rows — clone5 .tracklistRow: height:40px, padding:15px 10px */
body[data-theme="spotify"] .song-item {
  padding: 15px 10px !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 44px !important;
  transition: background-color 0.1s !important;
  transform: none !important;
  grid-template-columns: 40px minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) 80px 40px !important;
}
body[data-theme="spotify"] .song-item:hover {
  background-color: var(--sp-surface-2) !important; /* exact: #282828 */
  transform: none !important;
}
/* Active / now-playing: green title */
body[data-theme="spotify"] .song-item.now-playing .song-title,
body[data-theme="spotify"] .song-item.now-playing .playing-icon {
  color: var(--sp-green) !important;
}
body[data-theme="spotify"] .song-item.now-playing {
  background-color: transparent !important;
}

/* Thumbnail — small, square-ish like clone5 .albumArtwork */
body[data-theme="spotify"] .song-item .song-thumb {
  border-radius: 2px !important;
  width: 40px !important;
  height: 40px !important;
}

/* Track name — clone5 .trackName: color:#fff, margin-bottom:7px */
body[data-theme="spotify"] .song-item .song-title {
  color: var(--sp-text) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
}

/* Artist, album — clone5 span: color:#939393 */
body[data-theme="spotify"] .song-item .song-artist,
body[data-theme="spotify"] .song-item .song-album {
  color: #939393 !important;  /* exact clone5 color */
  font-weight: 200 !important;
  font-size: 13px !important;
}

/* Duration — clone5 .trackDuration right-align */
body[data-theme="spotify"] .song-item .song-duration {
  color: var(--sp-subtext) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-align: right !important;
}

/* Play icon inside thumbnail on hover — clone5: .trackCount img visibility:hidden → :hover visible */
body[data-theme="spotify"] .song-item .song-indicator-wrapper {
  position: relative !important;
}
body[data-theme="spotify"] .song-item .song-thumb {
  transition: opacity 0.1s !important;
}
body[data-theme="spotify"] .song-item:hover .song-thumb {
  opacity: 0.5 !important;
}
body[data-theme="spotify"] .song-item:hover .playing-icon {
  display: block !important;
  position: absolute !important;
  color: var(--sp-text) !important;
  font-size: 1rem !important;
  cursor: pointer !important;
}

/* More (options) button — clone5: .trackOptions img visibility:hidden → :hover visible */
body[data-theme="spotify"] .song-item .more-btn {
  opacity: 0 !important;
  color: var(--sp-subtext) !important;
  transition: opacity 0.1s !important;
}
body[data-theme="spotify"] .song-item:hover .more-btn {
  opacity: 1 !important;
}

/* ================================================================
   GRID CARDS  — mirrors clone5 .gridViewItem exactly
   display:inline-block, margin-right:20px, max-width:200px
   ================================================================ */

body[data-theme="spotify"] .card,
body[data-theme="spotify"] .card.playlist-card {
  background-color: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 0 !important;
  transition: none !important;
  cursor: pointer !important;
}

/* Card image — clone5 .gridViewItem img: width:100% */
body[data-theme="spotify"] .card-img-top,
body[data-theme="spotify"] .card img {
  width: 100% !important;
  border-radius: 3px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
  margin-bottom: 0 !important;
}

/* Card info — clone5 .gridViewInfo: font-weight:300, text-align:center, padding:5px 0 */
body[data-theme="spotify"] .card .card-body {
  padding: 5px 0 !important;
}
body[data-theme="spotify"] .card .card-title {
  font-weight: 300 !important;
  font-size: 13px !important;
  color: var(--sp-text) !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  letter-spacing: 0.5px !important;
}
body[data-theme="spotify"] .card .card-text {
  color: var(--sp-subtext) !important;
  font-size: 12px !important;
  text-align: center !important;
  margin: 0 !important;
}
body[data-theme="spotify"] .card:hover .card-img-top,
body[data-theme="spotify"] .card:hover img {
  opacity: 0.85 !important;
}

/* Bootstrap col grid containing cards */
body[data-theme="spotify"] .row.row-cols-2,
body[data-theme="spotify"] .row.row-cols-md-4,
body[data-theme="spotify"] .row.row-cols-lg-5 {
  gap: 0 !important;
}

/* ================================================================
   VIEW DETAILS HEADER  — mirrors clone5 .entityInfo
   padding:40px 0 10px, leftSection max-width:250px, rightSection 70%
   ================================================================ */

body[data-theme="spotify"] .view-details-header {
  padding: 40px 0 10px 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  gap: 0 !important;
  display: inline-block !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}
body[data-theme="spotify"] .view-details-header img {
  width: 30% !important;
  max-width: 250px !important;
  float: left !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5) !important;
  aspect-ratio: 1 !important;
  object-fit: cover !important;
}
body[data-theme="spotify"] .view-details-header-info {
  float: left !important;
  width: 70% !important;
  padding: 5px 10px 5px 40px !important;
  box-sizing: border-box !important;
}
body[data-theme="spotify"] .view-details-header-info .type {
  color: var(--sp-subtext) !important;
  font-weight: 200 !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 4px !important;
}
body[data-theme="spotify"] .view-details-header-info .name {
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  margin: 0 0 8px 0 !important;
}
body[data-theme="spotify"] .view-details-header-info .stats {
  color: #939393 !important;
  font-weight: 200 !important;
  font-size: 13px !important;
}
/* Clear float after header */
body[data-theme="spotify"] .view-details-header::after {
  content: '';
  display: table;
  clear: both;
}

/* ================================================================
   NOW-PLAYING BAR  — mirrors clone5 #nowPlayingBar exactly
   background:#282828, height:90px, padding:16px, flexbox 3-col
   ================================================================ */

body[data-theme="spotify"] .player-bar {
  background-color: var(--sp-surface-2) !important;   /* exact: #282828 */
  border-top: none !important;
  height: var(--sp-bar-height) !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

/* Left section: album art + track info */
body[data-theme="spotify"] .player-bar .track-info {
  gap: 15px !important;
  min-width: 180px !important;
}
body[data-theme="spotify"] .player-bar .track-info-art {
  width: 57px !important;   /* exact clone5 .albumArtwork max-width:57px */
  height: 57px !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  background-size: cover !important;
  /* No spin in Spotify */
  animation: none !important;
}
body[data-theme="spotify"].song-playing .player-bar .track-info-art {
  border-radius: 0 !important;
  animation: none !important;
}
/* Track name — clone5 .trackName: color via span */
body[data-theme="spotify"] .player-bar .track-info-text .title {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--sp-text) !important;
  letter-spacing: 0.5px !important;
}
body[data-theme="spotify"] .player-bar .track-info-text .artist {
  font-size: 12px !important;
  color: var(--sp-subtext) !important;
  font-weight: 400 !important;
}

/* Center: controls + progress bar */
body[data-theme="spotify"] .player-bar .player-controls {
  max-width: 700px !important;
  width: 40% !important;
}

/* Player buttons — clone5 .controlButton: background:transparent, border:none */
body[data-theme="spotify"] .player-btn {
  background-color: transparent !important;
  border: none !important;
  color: var(--sp-subtext) !important;
  padding: 0 !important;
  transition: color 0.1s !important;
}
body[data-theme="spotify"] .player-btn:hover {
  color: var(--sp-text) !important;
}
body[data-theme="spotify"] .player-btn.active {
  color: var(--sp-green) !important;
}

/* Play button — clone5 .controlButton.play img: 32x32 */
body[data-theme="spotify"] .player-btn.play-btn {
  background-color: var(--sp-text) !important; /* white circle */
  color: var(--sp-black) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.1s, background-color 0.1s !important;
}
body[data-theme="spotify"] .player-btn.play-btn:hover {
  transform: scale(1.06) !important;
  background-color: #f0f0f0 !important;
}
body[data-theme="spotify"] .player-btn.play-btn .bi {
  font-size: 1rem !important;
  color: var(--sp-black) !important;
}

/* Progress bar — clone5 .progressBarBG: #404040, .progress: #a0a0a0 */
body[data-theme="spotify"] .progress-bar-bg {
  background-color: var(--sp-surface-4) !important;  /* #404040 */
  height: 4px !important;
  border-radius: 2px !important;
}
body[data-theme="spotify"] .progress-bar-fg {
  background-color: var(--sp-subtext) !important;     /* #a0a0a0 */
  height: 4px !important;
  border-radius: 2px !important;
  transition: background-color 0.1s !important;
}
/* On hover turns green — Spotify behaviour */
body[data-theme="spotify"] .progress-bar-container:hover .progress-bar-fg {
  background-color: var(--sp-green) !important;
}
body[data-theme="spotify"] .progress-bar-container:hover .progress-bar-fg::after {
  background-color: var(--sp-text) !important;
  width: 12px !important;
  height: 12px !important;
}
/* Time labels — clone5 .progressTime: color:#a0a0a0, font-size:12px */
body[data-theme="spotify"] .playback-bar .time {
  color: var(--sp-subtext) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
  min-width: 40px !important;
}

/* Volume bar right — clone5 .volumeBar: width:180px, position:absolute, right:0 */
body[data-theme="spotify"] .volume-control {
  width: 180px !important;
}
body[data-theme="spotify"] .volume-slider-container input[type=range] {
  accent-color: var(--sp-green) !important;
}

/* ================================================================
   SEARCH  — mirrors clone5 .searchContainer: bg:#242424, padding:20 28
   ================================================================ */

body[data-theme="spotify"] .search-bar .form-control {
  background-color: #242424 !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--sp-text) !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
}
body[data-theme="spotify"] .search-bar .form-control:focus {
  background-color: #2e2e2e !important;
  box-shadow: none !important;
  outline: none !important;
}
body[data-theme="spotify"] .search-bar .btn {
  background-color: #242424 !important;
  border: none !important;
  color: var(--sp-subtext) !important;
}
body[data-theme="spotify"] .search-bar .btn:hover {
  color: var(--sp-text) !important;
}

/* ================================================================
   CONTEXT MENU / OPTIONS MENU  — clone5 .optionsMenu exactly
   bg:#282828, width:200px, border-radius:3px
   ================================================================ */

body[data-theme="spotify"] .context-menu,
body[data-theme="spotify"] .dropdown-menu {
  background-color: var(--sp-surface-2) !important; /* #282828 */
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 3px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
  padding: 4px 0 !important;
  min-width: 200px !important;
}
/* clone5 .optionsMenu .item: padding:12px 20px, color:rgba(147,147,147,.8), height:40px */
body[data-theme="spotify"] .context-menu li,
body[data-theme="spotify"] .dropdown-item {
  padding: 12px 20px !important;
  color: rgba(147,147,147,0.8) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  background-color: var(--sp-surface-2) !important;
  letter-spacing: 0.5px !important;
}
body[data-theme="spotify"] .context-menu li:hover,
body[data-theme="spotify"] .dropdown-item:hover {
  background-color: var(--sp-surface-3) !important;
  color: var(--sp-text) !important;
}

/* ================================================================
   MODALS
   ================================================================ */

body[data-theme="spotify"] .modal-content {
  background-color: var(--sp-surface-2) !important;
  border-radius: 4px !important;
  border: none !important;
}
body[data-theme="spotify"] .modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 16px 20px !important;
}
body[data-theme="spotify"] .modal-title {
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}
body[data-theme="spotify"] .modal-body {
  padding: 20px !important;
}

/* ================================================================
   BUTTONS  — clone5 .button: border:2px solid #fff, border-radius:200px
              .button.green: background:#2ebd59
   ================================================================ */

body[data-theme="spotify"] .btn-danger,
body[data-theme="spotify"] .btn-primary {
  background-color: var(--sp-green-legacy) !important;  /* #2ebd59 */
  border-color: var(--sp-green-legacy) !important;
  color: var(--sp-text) !important;
  border-radius: 200px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  padding: 15px !important;
  min-width: 130px !important;
}
body[data-theme="spotify"] .btn-danger:hover,
body[data-theme="spotify"] .btn-primary:hover {
  background-color: var(--sp-green-hover) !important;
  border-color: var(--sp-green-hover) !important;
  transform: scale(1.02) !important;
}
body[data-theme="spotify"] .btn-outline-danger,
body[data-theme="spotify"] .btn-outline-secondary,
body[data-theme="spotify"] .btn-outline-light {
  color: var(--sp-text) !important;
  border: 2px solid var(--sp-text) !important;
  border-radius: 200px !important;
  background: transparent !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  padding: 10px 20px !important;
}
body[data-theme="spotify"] .btn-outline-danger:hover,
body[data-theme="spotify"] .btn-outline-secondary:hover,
body[data-theme="spotify"] .btn-outline-light:hover {
  background: transparent !important;
  border-color: var(--sp-text) !important;
  transform: scale(1.02) !important;
}
body[data-theme="spotify"] .btn:focus,
body[data-theme="spotify"] button:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* ================================================================
   INPUTS / FORMS  — clone5 .userDetails input: bg:#1f1f1f, height:50px
   ================================================================ */

body[data-theme="spotify"] .form-control,
body[data-theme="spotify"] input[type="text"],
body[data-theme="spotify"] input[type="email"],
body[data-theme="spotify"] input[type="password"] {
  background-color: #1f1f1f !important;
  border: none !important;
  color: var(--sp-text) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  padding: 0 20px !important;
  height: 50px !important;
  border-radius: 0 !important;
}
body[data-theme="spotify"] .form-control:focus,
body[data-theme="spotify"] input:focus {
  background-color: #2a2a2a !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}
body[data-theme="spotify"] .form-select {
  background-color: #1f1f1f !important;
  border: none !important;
  color: var(--sp-text) !important;
  border-radius: 0 !important;
}

/* ================================================================
   SCROLLBAR  — thin, dark, exactly like Spotify
   ================================================================ */

body[data-theme="spotify"] ::-webkit-scrollbar { width: 8px; height: 8px; }
body[data-theme="spotify"] ::-webkit-scrollbar-track { background: transparent; }
body[data-theme="spotify"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 4px;
}
body[data-theme="spotify"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.5);
}

/* ================================================================
   MISC
   ================================================================ */

/* Page heading — clone5 .pageHeadingBig: padding:20px, text-align:center */
body[data-theme="spotify"] .content-title {
  text-align: left !important;
  padding: 0 !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

/* Section headings inside content (h2 equivalents) */
body[data-theme="spotify"] .content-area-wrapper h2,
body[data-theme="spotify"] .content-area-wrapper .section-heading {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  margin: 24px 0 12px !important;
}

/* Border bottom separators — clone5 .borderBottom */
body[data-theme="spotify"] .border-bottom-sp {
  border-bottom: 1px solid #939393 !important;
  margin-bottom: 20px !important;
}

/* Content subtitle */
body[data-theme="spotify"] .content-subtitle {
  color: var(--sp-subtext) !important;
  font-size: 12px !important;
  font-weight: 200 !important;
}

/* Offcanvas mobile sidebar */
body[data-theme="spotify"] .offcanvas {
  background-color: var(--sp-black) !important;
}

/* Mobile header */
body[data-theme="spotify"] .mobile-header {
  background-color: var(--sp-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Profile picture */
body[data-theme="spotify"] .profile-picture {
  border-radius: 50% !important;
}

/* Now playing equalizer bars — green */
body[data-theme="spotify"] .now-playing-bars span,
body[data-theme="spotify"] .playing-icon {
  color: var(--sp-green) !important;
}

/* Add to playlist modal item */
body[data-theme="spotify"] .add-to-playlist-item:hover {
  background-color: var(--sp-surface-3) !important;
}

/* Loader text */
body[data-theme="spotify"] .loader,
body[data-theme="spotify"] #infinite-scroll-loader {
  color: var(--sp-subtext) !important;
  font-size: 12px !important;
  text-align: center !important;
  padding: 16px !important;
}

/* Sort select */
body[data-theme="spotify"] #sort-select {
  background-color: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--sp-text) !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
}

/* Disable all hover transforms for Spotify theme (Spotify is flat) */
body[data-theme="spotify"] .song-item:hover,
body[data-theme="spotify"] .nav-link:hover,
body[data-theme="spotify"] .card:hover {
  transform: none !important;
}

/* Remove card green play button overlay (Spotify uses separate play button) */
body[data-theme="spotify"] .card::after {
  display: none !important;
}

/* ================================================================
   LAYOUT FIXES — sidebar is position:fixed so main-content and
   player-bar need explicit left offsets (mirrors clone5 exactly:
   #mainViewContainer { margin-left:220px } )
   ================================================================ */

/* Desktop: push content right by nav width */
@media (min-width: 768px) {
  body[data-theme="spotify"] .main-content {
    margin-left: var(--sp-nav-width) !important;
    width: calc(100% - var(--sp-nav-width)) !important;
  }
  /* Player bar also needs to start after sidebar */
  body[data-theme="spotify"] .player-bar {
    left: var(--sp-nav-width) !important;
    width: calc(100% - var(--sp-nav-width)) !important;
  }
}

/* Mobile: sidebar goes offcanvas, main-content full width */
@media (max-width: 767px) {
  body[data-theme="spotify"] .sidebar {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body[data-theme="spotify"] .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
  body[data-theme="spotify"] .player-bar {
    left: 0 !important;
    width: 100% !important;
  }
}