@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

/* Bootstrap 5 Customization */
:root {
  /* Bootstrap color overrides */
  --bs-primary: #667eea;
  --bs-primary-rgb: 102, 126, 234;
  --bs-secondary: rgba(255, 255, 255, 0.1);
  --bs-secondary-rgb: 255, 255, 255;
  --bs-success: #1db954;
  --bs-success-rgb: 29, 185, 84;
  
  /* Bootstrap form overrides for dark theme */
  --bs-body-bg: transparent;
  --bs-body-color: #ffffff;
  --bs-border-color: rgba(255, 255, 255, 0.1);
  --bs-form-control-bg: rgba(255, 255, 255, 0.05);
  --bs-form-control-color: #ffffff;
  --bs-form-control-border-color: rgba(255, 255, 255, 0.1);
}

/* SERVER FILE UPDATE - Modified at 2025-08-27 03:40:00 */

/* Root defaults — JS (front.js) will override --dynamic-text and --overlay per post image */
:root{
  --bg:#000000;
  --muted:#bfd2ff;
  --dynamic-text:#ffffff;        /* updated at runtime for contrast */
  --overlay: rgba(0,0,0,0.34);   /* dark wash by default; JS may swap */
  --default-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

*{box-sizing:border-box}
html,body{
  height:100%; margin:0;
  background:var(--bg);
  color:var(--dynamic-text);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  overscroll-behavior:none;
}

/* Prevent black flash by ensuring body and html have proper background */
html, body { background: #000000 !important; transition: background 0.3s ease; }

/* Ensure stage has proper background */
#stage { background: #000000; }

/* Additional fallback to prevent any black flashing */
body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000000; z-index: -1; pointer-events: none; }

/* Viz element removed - using backgroundFallback instead */

/* Vinyl Record Animation - CONDITIONAL ONLY */
/* Only animate when searching or playing */
/* Logo animation removed */

/* Logo sizing constraints - WORKING VERSION */
.logo .cdsvg,
.search-header .cdsvg {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  overflow: hidden;
}

/* Target the SVG elements directly - as found working in dev tools */
.cdwrap.cdsvg svg {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
}



/* NO animated background in search mode */
button{font-family:inherit}
a{color:#cfe0ff}

/* Header / controls pick up current color */
header{
  position:fixed; inset-inline:0; top:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:16px 20px; font-size:14px; color:#ffffff;
  background:#000000; /* Solid black background */
  border-bottom:1px solid rgba(255,255,255,0.1);
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  /* Ensure header never gets blurred or blended */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.controls{ display:flex; align-items:center; gap:12px }

.logo{
  font-size:16px; font-weight:700; letter-spacing:-0.01em;
  text-shadow:0 1px 3px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Also prevent any header descendants from inheriting backdrop/filters */
header * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.back-arrow {
  background: none; /* No background */
  border: none;
  border-radius: 8px;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #ffffff; /* White text/icon on black header */
  padding: 8px;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  font-size: 14px; /* Match search page label size */
  font-weight: 400;
}

.back-arrow:hover {
  background:#f0f0f0; 
  color:#000000;
  border:1px solid rgba(0,0,0,0.2);
  border-radius:8px;
  transform: translateY(-1px);
  box-shadow:0 6px 20px rgba(0,0,0,0.1);
}

.controls a,.controls button{
  font-size:13px; font-weight:600;
  color:var(--dynamic-text);
  background:rgba(17,24,39,0.8); border:1px solid rgba(255,255,255,0.1);
  padding:8px 14px; border-radius:20px; cursor:pointer; text-decoration:none;
  transition:all 0.2s ease; backdrop-filter:blur(10px);
}

/* Save playlist button styling */
.save-playlist-btn {
  height: 36px !important;
  padding: 8px 12px !important;
  background: #262626 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  transition: background-color 0.15s ease !important;
}

.save-playlist-btn:hover {
  background: #333333 !important;
}

/* Autoplay button styling to match search page */
.autoplay-btn {
  height: 36px !important;
  padding: 8px 12px !important;
  background: #262626 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background-color 0.15s ease !important;
}

.autoplay-btn:hover {
  background: #333333 !important;
}

/* Disabled state for autoplay (when turned off) */
.autoplay-btn[aria-pressed="false"] {
  background: #e5e7eb !important; /* Light gray background */
  color: #6b7280 !important; /* Gray text */
  border-color: #d1d5db !important; /* Light gray border */
  cursor: pointer !important; /* Still clickable */
}

.autoplay-btn[aria-pressed="false"]:hover {
  background: #d1d5db !important; /* Slightly darker gray on hover */
}

/* Autoplay icon states */
.autoplay-icon {
  transition: all 0.2s ease;
}

.autoplay-btn[aria-pressed="true"] .autoplay-icon {
  fill: currentColor; /* Filled when active */
  stroke: none;
}

.autoplay-btn[aria-pressed="false"] .autoplay-icon {
  fill: none; /* Stroke when inactive */
  stroke: currentColor;
  stroke-width: 2;
}

.controls a:hover,.controls button:hover{
  background:rgba(17,24,39,0.95); border-color:rgba(255,255,255,0.2);
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

.controls .alt{background:rgba(17,24,39,0.8); color:var(--dynamic-text)}
.controls .alt + .alt{margin-left:12px}

/* Stage layers */
#stage{position:fixed; inset:0; overflow:hidden; display:block; transform:none !important}
#waveCanvas{position:fixed; inset:0; z-index:-1; pointer-events:none; display:block}
.bg{
  position:absolute; inset:0; z-index:0;
  background:center/cover no-repeat; /* Album art background - restored */
  opacity:0; transition:opacity .45s ease, transform .45s ease; transform:scale(1.02)
}
.bg.show{opacity:1; transform:scale(1.0)}


.overlay{
  position:absolute; inset:0; z-index:2;
  background:rgba(255,255,255,0.85); /* Default white overlay, will be overridden by ColorThief */
  mix-blend-mode:multiply; /* Better color blending */
  pointer-events:none; transition:background 0.8s ease
}

/* Consistent overlay styling for text readability */
.overlay {
  background: rgba(0, 0, 0, 0.38) !important;
  mix-blend-mode: normal !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.8s ease, backdrop-filter 0.3s ease;
}

/* Remove vignette: rely on uniform overlay only */
.overlay::after { content: none; }

/* Ensure overlay is always visible and consistent */
.overlay * {
  background: inherit !important;
}

/* Content block */
.center{
  position:absolute; left:50%; top:50%; z-index:5;
  transform:translate(-50%, -50%);
  display:flex !important; flex-direction:column; align-items:center; /* center container */
  color:#ffffff; max-width:90vw; width:100%;
  animation: playerSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

@keyframes playerSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Player content - no container, direct layout */
.player-content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding:0 16px;
  width: auto;
  max-width: none;
  margin: 0 auto;
}

.play-button-container {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 16px;
}

.play{
  display:inline-grid; place-items:center;
  width:72px; height:72px; border-radius:999px;
  border:none; background:#f0f0f0;
  color:#000000; cursor:pointer; transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
  outline:none; -webkit-tap-highlight-color:transparent;
  box-shadow:0 8px 24px rgba(0,0,0,0.1);
  animation: playButtonPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

.track-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

@keyframes playButtonPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  }
}

.play:hover{
  transform:scale(1.08); background:#e0e0e0; /* Darker gray on hover */
  box-shadow:0 12px 32px rgba(0,0,0,0.2);
}

/* Track Links */
.track-links {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  margin-top: 16px;
  flex-wrap: nowrap;
  align-items: center;
}

.social-link, .video-link {
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  background: none; /* No background */
  border: none;
  border-radius: 0;
  color: #ffffff; /* White text on dark overlay */
  text-decoration: none;
  font-size: 12.25px; /* Match search page label size */
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  white-space:nowrap;
}

.social-link:hover, .video-link:hover {
  background: #f0f0f0; /* Light gray on hover */
  border-color: rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* Artist social media links */
.artist-social-links {
  display:flex;
  gap:12px;
  margin-top:0;
  flex-wrap:nowrap;
  align-items:center;
}

.social-media-link {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; background:none; border:none; border-radius:0;
  color:#ffffff; text-decoration:none; font-size:12.25px; font-weight:500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  white-space:nowrap;
}

.social-media-link:hover {
  color: rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}

/* Progress Bar Enhancement */
.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: currentColor;
  border-radius: inherit;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.3;
  animation: progressGlow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
}

/* Progress bar pulse animation when playing */
.progress-fill.playing {
  animation: progressPulse 2s ease-in-out infinite;
}

@keyframes progressPulse {
  0%, 100% {
    opacity: 0.3;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1);
  }
  50% {
    opacity: 0.5;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
  }
}

@keyframes progressGlow {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 0.3;
    transform: scaleX(1);
  }
}

.play:focus{outline:none}
.play::-moz-focus-inner{border:0}
/* Removed conflicting play-icon positioning */

.play-icon svg{
  width: 100%; height: 100%;
  display: block;
}

.play-progress-ring {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.progress-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 3;
}

.progress-circle-fill {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.3s ease;
}

.track-info{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  text-align:left;
  width: 100%;
  animation: trackInfoFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}

/* Blurb under title */
#meta { margin-top: 2px; align-self:flex-start; width:100%; padding-left: 0; }
#meta, #meta * { text-align:left !important; }

/* Single-line combined links row */
.links-row { display:flex; gap:12px; align-items:center; flex-wrap:nowrap; }

.all-social-links {
  display: flex;
  gap: 16px;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  margin-top: 16px;
}

.all-social-links a { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
}

.all-social-links a span { 
  display: inline-block; 
}

.all-social-links a svg { 
  flex: 0 0 auto; 
}

.all-social-links svg { 
  display: inline-block; 
  vertical-align: middle; 
}

.all-social-links span { 
  display: inline-block; 
  vertical-align: middle; 
}

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

.artist-name{
  grid-column:2; grid-row:1;
  font-size:14px; font-weight:500; color:#ffffff; opacity:0.9; letter-spacing:0.02em; text-transform:uppercase;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
}

.title-holder{
  grid-column:2; grid-row:2;
  position:relative; min-height:4.5em; height:var(--titleH, 4.5em);
  overflow:hidden; margin:0 0 6px 0;
}

.title{
  font-size: clamp(20px, 5vw, 36px); font-weight:700; line-height:1.1; 
  margin:0; position:relative; color:#ffffff; /* White text on dark overlay */
  letter-spacing:-0.02em; text-shadow:none; /* Remove shadow for clean look */
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  text-align: left;
  max-width: 600px; /* Match blurb width */
}

.title > span{position:absolute; left:0; top:0; right:0; width:100%}

.meta{
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
  color:rgba(255,255,255,0.9); font-size:16px; opacity:0.95;
  font-weight:500; line-height:1.5;
  max-width: 600px;
  text-align: left;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
}

.meta .dot::before{content:"•"; margin:0 8px; opacity:0.6}

/* Meta information styling */
#metaBlurb {
  display: block;
  text-align: left;
  margin: 0;
  padding: 0;
  font-size: 14px; /* Slightly larger for readability */
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9); /* White text on dark overlay */
  max-width: 100%;
  word-wrap: break-word;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
}

/* Remove dot styling */
#metaBlurb::before {
  content: none;
}

/* Arrows */
.arrows{
  position:fixed !important; left:50% !important; bottom:32px !important;
  transform:translateX(-50%) !important; z-index:25 !important;
  display:flex; gap:20px; color:var(--dynamic-text)
}

.arrow{
  background:#ffffff; color:#000000; /* Solid white with black text */
  border:1px solid rgba(0,0,0,0.1); border-radius:8px; /* Rounded square like search page */
  padding:12px 20px; font-size:14px; font-weight:600; cursor:pointer;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width:80px; text-align:center;
  animation: arrowSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.7s both;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
}

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

.arrow:hover{
  background:#f0f0f0; border-color:rgba(0,0,0,0.2);
  transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.1);
}
.hint{
  position:fixed; bottom:22px; right:16px;
  background:#ffffff; padding:8px 12px; border-radius:50%; /* White circle */
  font-size:12px; color:#000000; z-index:15; /* Black icon */
  border:none;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  width: 40px; /* Match arrow button dimensions */
  height: 40px; /* Match arrow button dimensions */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.hint:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#counter{opacity:.85; color:#000000; /* Black text on white background */}

/* Hidden audio player */
.hidden{position:absolute; width:200px; height:150px; left:0; top:0; opacity:0.01; pointer-events:auto; border:0; z-index:-1}

/* Text transition */
.swap{position:relative; display:block}
.swap > span{position:relative; display:block; opacity:0; transition:opacity .28s ease}
.swap > span.show{opacity:1}

/* Responsive tweaks */
@media (max-width: 720px){
  .center{left:50%; top:50%; transform:translate(-50%, -50%)}
  .player-content{padding:32px 24px; gap:24px}
  .play{width:80px; height:80px}
  .play svg{width:28px; height:28px}
  .title-holder{height:var(--titleH, 3.8em); min-height:var(--titleH,3.8em)}
  .title{font-size: clamp(28px, 6vw, 48px)}
  .artist-name{font-size:16px}
  .meta{font-size:14px; gap:8px}
}

@media (max-width: 480px){
  .player-content{padding:24px 20px; gap:20px}
  .play{width:72px; height:72px}
  .play svg{width:24px; height:24px}
  .title{font-size: clamp(24px, 5vw, 36px)}
  .artist-name{font-size:14px}
  .meta{font-size:13px}
}

/* Header styling */
.logo{display:inline-flex; align-items:center; gap:8px; color:#ffffff; /* White text on black header */}

/* Modals */
.modal-overlay{
  position:fixed; inset:0; z-index:60;
  background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center;
}

/* New Playlist Confirmation Modal */
#newPlaylistModal { z-index: 2000 !important; }
#newPlaylistModal .modal-content {
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

#newPlaylistModal .modal-header h3 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif);
}

#newPlaylistModal .modal-body {
  margin-bottom: 24px;
}

#newPlaylistModal .modal-body p {
  color: #cccccc;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 12px 0;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif);
}

#newPlaylistModal .modal-body p:last-child {
  margin-bottom: 0;
}

#newPlaylistModal .modal-body strong {
  color: #ff8800;
  font-weight: 600;
}

#newPlaylistModal .modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

#newPlaylistModal .modal-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif);
  border: none;
}

#newPlaylistModal .modal-btn-cancel {
  background: #333333;
  color: #cccccc;
}

#newPlaylistModal .modal-btn-cancel:hover {
  background: #404040;
  color: #ffffff;
}

#newPlaylistModal .modal-btn-confirm {
  background: #ff8800;
  color: #000000;
  font-weight: 600;
}

#newPlaylistModal .modal-btn-confirm:hover {
  background: #ff9900;
}
.modal{
  background:#0f1115; color:var(--dynamic-text);
  width:min(92vw,520px); border-radius:16px;
  padding:22px 22px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
  position:relative;
}
.modal h2{margin:0 0 10px; font-weight:800; letter-spacing:-0.01em}
.modal p{margin:0 0 10px; color:#c7d2fe}
.close-btn{
  position:absolute; top:10px; right:12px;
  background:#111827; color:var(--dynamic-text);
  border:0; border-radius:10px; padding:4px 8px; cursor:pointer;
}
.meta a.contrib{color:var(--dynamic-text); text-decoration:underline}

/* =========================================
   Skipped Tracks — add-ons (append-only)
   ========================================= */

html.st-modal-open, html.st-modal-open body { overflow: hidden; }

/* Info FAB (bottom-right) */
#st-info-fab.st-fab, #stAboutFab.st-fab, .st-fab {
  position: fixed; right: 16px; bottom: 18px; z-index: 60;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.1);
  background: #ffffff;
  color: #000000;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.st-fab:hover { transform: translateY(-1px); background: #f0f0f0; border-color: rgba(0,0,0,.2); }
.st-fab svg { display:block }

/* Modal shell */
.st-modal { position: fixed; inset: 0; z-index: 70; display: none; }
.st-modal.show { display: block; }
.st-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.st-sheet {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 900px); max-height: 86vh;
  background: #0f1115; color: var(--dynamic-text);
  border: 1px solid #1f2937; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  overflow: hidden; display: grid; grid-template-rows: auto 1fr;
}
.st-x {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(17,24,39,.85); color: var(--dynamic-text); cursor: pointer;
}
.st-body { padding: 18px 18px 14px 18px; overflow: auto; }
.st-body .st-frame { display: block; width: 100%; height: 70vh; border: none; background: #0b0f19; }

/* About content defaults (optional) */
.st-body .st-about h2 { margin: 0 0 8px; font-weight: 800; letter-spacing: -0.01em; }
.st-body .st-about p { margin: 8px 0; color: #cbd5e1; }

#st-modal ~ * { pointer-events: auto; }

/* --- Skipped Tracks: scoped About/Admin UI --- */
/* Remove legacy dark FAB style to prevent conflicts */

.st-modal{ position:fixed; inset:0; z-index:70; display:none }
.st-modal.show{ display:block }
.st-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px) }
.st-sheet{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw, 720px); max-height:86vh; overflow:hidden;
  background:#0f1115; color:var(--dynamic-text);
  border:1px solid #1f2937; border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.5); display:grid; grid-template-rows:auto 1fr;
}
.st-lg{ width:min(96vw,960px) }
.st-x{ position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:8px;
  border:1px solid rgba(255,255,255,.14); background:rgba(17,24,39,.85); color:var(--dynamic-text); cursor:pointer }
.st-body{ padding:18px; overflow:auto }
.st-frame{ display:block; width:100%; height:70vh; border:0; background:#0b0f19 }

/* --- Admin Modal Styling (unchanged semantics, colors follow dynamic text) --- */
/* (Keeping your admin styles — trimmed for brevity; they inherit var(--dynamic-text) now) */

/* UI above everything */
header, .arrows, #progressWrap{ position:relative; z-index:5; }
/* Keep center absolutely positioned for proper centering */
.center { position: absolute; z-index: 5; }

#bgA, #bgB {
  filter: none; /* remove monochrome/brightness filters */
  transition: filter 0.3s ease;
}

/* --- Modals must sit above the stage & ignore mix-blend effects --- */
#stage { z-index: 0; }                 /* (already fixed) */
.overlay { z-index: 0; }               /* tone stays under everything */

/* Create a new stacking context for the modal so it won't be blended */
.st-modal{
  z-index: 1000 !important;            /* above any stage/content */
  isolation: isolate;                  /* isolate from underlying blends */
}

.st-modal .st-panel{
  position: relative;
  z-index: 2;                          /* above its own backdrop */
  mix-blend-mode: normal !important;   /* do not multiply with overlay */
  background: #0f1115;                 /* solid panel */
  filter: none !important;             /* prevent inherited filters */
}

.st-modal .st-backdrop{
  z-index: 1;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);          /* keep your soft blur */
}

/* Optional hard guard: nothing inside the modal should blend */
.st-modal *{ mix-blend-mode: normal !important; }

/* =========================================
   AI Search Interface Styles
   ========================================= */

/* Search Interface Styles */
.search-interface {
  position: fixed;
  inset: 0;
  /* DARK GRADIENT - NOT PURPLE! Server update 03:40 */
  background: linear-gradient(135deg, #0b0f19 0%, #1a1f2e 50%, #0b0f19 100%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  top: 0;
  left: 0;
}

/* No animated background in search interface */

/* Background animations removed */

/* REMOVED: Conflicting container and header styles */

/* REMOVED: Conflicting old styles */

/* REMOVED: More conflicting old styles */

/* REMOVED: More conflicting styles */

.soundcloud-login-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.soundcloud-login-info p {
  color: #bfd2ff;
  font-size: 0.9rem;
  line-height: 1.4;
}

.soundcloud-login-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: #1DB954;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.soundcloud-login-btn:hover {
  background: #ff9900;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 136, 0, 0.3);
}

.soundcloud-user-info {
  margin-top: 16px;
  padding: 16px;
  background: rgba(29, 185, 84, 0.1);
  border: 1px solid rgba(29, 185, 84, 0.3);
  border-radius: 8px;
  color: #1ed760;
}

/* Back to search button - REMOVED DUPLICATE STYLES */

/* Responsive design */
@media (max-width: 768px) {
  .search-container {
    padding: 32px 24px;
    margin: 20px;
  }
  
  .search-header h1 {
    font-size: 2rem;
  }
  
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-form input {
    min-width: auto;
  }
  
  .search-examples {
    gap: 8px;
  }
  
  .example-tag {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
}

@media (max-width: 480px) {
  .search-container {
    padding: 24px 20px;
    margin: 16px;
  }
  
  .search-header h1 {
    font-size: 1.8rem;
  }
  
  .search-header p {
    font-size: 1rem;
  }
  
  .search-form input,
  .search-form button {
    padding: 14px 18px;
    font-size: 0.9rem;
  }
}

/* Loading states - simplified */
.search-form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(191, 210, 255, 0.3);
}

/* Loading spinner removed - logo animation handles loading state */

/* Smooth transitions for interface switching */
#searchInterface,
#stage {
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

#searchInterface.hiding {
  opacity: 0;
  transform: translateY(-20px);
}

#stage.showing {
  opacity: 1;
  transform: translateY(0);
}

/* Enhanced example tag animations */
.example-tag {
  position: relative;
  overflow: hidden;
}

.example-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.example-tag:hover::before {
  left: 100%;
}

/* Focus states for accessibility */
.search-form input:focus-visible,
.search-form button:focus-visible,
.example-tag:focus-visible {
  outline: 2px solid #bfd2ff;
  outline-offset: 2px;
}

/* Dark mode optimizations */
@media (prefers-color-scheme: dark) {
  .search-container {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.05);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .search-container {
    border-width: 2px;
    border-color: #ffffff;
  }
  
  .search-form input {
    border-width: 2px;
  }
  
  .example-tag {
    border-width: 2px;
  }
}

.search-header .cdwrap {
  margin-bottom: 16px;
  /* No animation - keep it clean and static */
}

.search-header .cdsvg {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Background Video System Styles - Simplified and Fixed */
#backgroundVideo {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

#backgroundFallback {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Remove any conflicting background styles */
#stage {
  background: transparent !important;
}

body {
  background: transparent !important;
}

/* Interface Switching - Clean and targeted */
#searchInterface {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#searchInterface.hidden {
  display: none !important;
}

#stage {
  display: none;
}

#stage.visible {
  display: block !important;
}

/* Hide ALL player elements when in search mode - WORKING VERSION */
.search-interface ~ header,
.search-interface ~ .arrows,
.search-interface ~ #progressWrap,
#searchInterface:not(.hidden) ~ * header,
#searchInterface:not(.hidden) ~ * .arrows,
#searchInterface:not(.hidden) ~ * .controls,
#searchInterface:not(.hidden) ~ * #backToSearch,
#searchInterface:not(.hidden) ~ * .player-content,
#searchInterface:not(.hidden) ~ * .track-info,
#searchInterface:not(.hidden) ~ * .play {
  display: none !important;
}

/* Override any conflicting CSS for development mode */
body.dev-mode #stage {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.dev-mode .player-layout {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1001 !important;
}

body.dev-mode #searchInterface {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* When search interface is visible, hide player UI completely */
#searchInterface:not(.hidden) {
  z-index: 1000;
}

/* Don't hide ALL elements after search interface - let progress overlay be visible */
/* #searchInterface:not(.hidden) + * {
  display: none !important;
} */

/* Hide background elements when in search mode */
body.search-mode #backgroundVideo,
body.search-mode #backgroundFallback {
  display: none !important;
}
body.search-mode #waveCanvas{ display:none !important }

/* Disable animations in search mode */
body.search-mode * {
  animation: none !important;
}

/* Ensure no animated backgrounds can appear */
body.search-mode {
  background: linear-gradient(135deg, #0b0f19 0%, #1a1f2e 50%, #0b0f19 100%) !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  animation: none !important;
}

/* Ensure search interface has proper background coverage */
body.search-mode #searchInterface {
  min-height: 100vh !important;
  background: linear-gradient(135deg, #0b0f19 0%, #1a1f2e 50%, #0b0f19 100%) !important;
}

/* Ensure search container is always centered */
.search-container {
  margin: 0 auto !important;
  text-align: center !important;
  max-width: 600px !important;
  width: 100% !important;
}

/* Force center alignment on search elements */
.search-form {
  justify-content: center !important;
  align-items: center !important;
}

.search-examples {
  justify-content: center !important;
  text-align: center !important;
}

/* Bootstrap Component Overrides - REMOVED - not needed for this project */

.form-control {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--dynamic-text) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: 'Inter', sans-serif !important;
  backdrop-filter: blur(10px) !important;
}

.form-control:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25) !important;
  color: var(--dynamic-text) !important;
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Ensure proper cleanup of backgrounds */
#backgroundVideo,
#backgroundFallback {
  transition: opacity 0.8s ease-in-out;
}

/* Show background elements when playing (not in search mode) */
body:not(.search-mode) #backgroundVideo,
body:not(.search-mode) #backgroundFallback {
  display: block !important;
}

/* Reset any conflicting transforms */
#backgroundFallback.reset {
  transform: none !important;
  background-image: none !important;
}

/* =========================================
   TAILWIND UI STYLES - EXACTLY MATCHING FIGMA GUIDE
   ========================================= */

/* Search Interface Styles - EXACTLY MATCHING FIGMA REFERENCE */
.tailwind-ui .search-interface {
  position: fixed !important;
  inset: 0 !important;
  background: #0a0a0a !important; /* Exact page background from specs */
  display: flex !important;
  flex-direction: column !important; /* Stack header above card vertically */
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important;
  padding: 20px !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
}

.tailwind-ui .search-container {
  max-width: 42rem !important; /* max-w-2xl = 672px */
  width: 100% !important;
  text-align: center !important;
  background: #0a0a0a !important; /* Exact card background from specs */
  border-radius: 8px !important;
  padding: 32px !important; /* p-8 = 32px */
  border: 1px solid #262626 !important; /* Exact border color from specs */
}

/* Header section - logo and title side by side, positioned above the card */
.tailwind-ui .search-header {
  text-align: center !important;
  margin-bottom: 32px !important; /* Reduced margin since it's now above the card */
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important; /* Full width */
  max-width: 42rem !important; /* Match card width */
}

.tailwind-ui .search-header .logo-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 32px !important; /* mb-8 = 32px */
}

.tailwind-ui .search-header .main-logo {
  width: 55px !important; /* Resized to 55px as requested */
  height: 55px !important;
  max-width: 55px !important;
  max-height: 55px !important;
}

.tailwind-ui .search-header p {
  font-size: 15.75px !important; /* Exact subheading size from specs */
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  color: #a7a7a7 !important; /* Exact muted color from Figma */
  margin: 0 !important;
  max-width: 42rem !important; /* max-w-2xl = 672px */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Main content with consistent spacing - LEFT ALIGNED */
.tailwind-ui .search-content {
  text-align: left !important;
}

.tailwind-ui .search-section {
  margin-bottom: 24px !important; /* space-y-6 = 24px */
}

.tailwind-ui .search-section:last-child {
  margin-bottom: 0 !important;
}

/* Search input section */
.tailwind-ui .search-input-section {
  margin-bottom: 24px !important; /* space-y-6 = 24px */
}

.tailwind-ui .search-input-section .label {
  display: block !important;
  font-size: 14px !important; /* Exact label size from specs */
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  color: #a7a7a7 !important; /* Exact muted color from Figma */
  margin-bottom: 12px !important; /* space-y-3 = 12px */
}

.tailwind-ui .search-form {
  display: flex !important;
  gap: 12px !important; /* gap-3 = 12px */
  align-items: center !important;
}

.tailwind-ui .search-form input {
  flex: 1 !important;
  height: 42px !important; /* Updated height as requested */
  padding: 0 12px !important;
  border: 1px solid #262626 !important; /* Exact border color from specs */
  border-radius: 6px !important;
  background: #0a0a0a !important; /* Match card background */
  color: #ffffff !important; /* Pure white text */
  font-size: 12.25px !important; /* Exact search field size from specs */
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
}

.tailwind-ui .search-form input::placeholder {
  color: #a7a7a7 !important; /* Exact placeholder color from Figma */
}

.tailwind-ui .search-form button {
  height: 42px !important; /* Match input height */
  padding: 0 24px !important; /* px-6 = 24px */
  background: #fafafa !important; /* Exact button background from specs */
  color: #171717 !important; /* Exact button text color from specs */
  border: 1px solid #262626 !important; /* Exact border color from specs */
  border-radius: 6px !important;
  font-size: 12.25px !important; /* Match search field size */
  font-weight: 700 !important; /* font-bold as requested */
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.tailwind-ui .search-form button:hover {
  background: #404040 !important; /* Hover state */
}

.tailwind-ui .search-form button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Examples section */
.tailwind-ui .search-examples {
  margin-bottom: 24px !important; /* space-y-6 = 24px */
}

.tailwind-ui .search-examples p {
  color: #a7a7a7 !important; /* Exact muted color from Figma */
  font-size: 14px !important; /* Match the label size */
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  margin-bottom: 12px !important; /* space-y-3 = 12px */
  text-align: left !important;
}

.tailwind-ui .search-examples .tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important; /* gap-2 = 8px */
}

.tailwind-ui .example-tag {
  padding: 6px 12px !important; /* px-3 py-1.5 = 12px 6px */
  background: #262626 !important; /* Match border color for consistency */
  border: none !important;
  border-radius: 6px !important;
  color: #ffffff !important; /* Pure white text */
  font-size: 10.5px !important; /* Exact tag size from specs */
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background-color 0.15s ease !important;
}

.tailwind-ui .example-tag:hover {
  background: #333333 !important; /* Hover state */
}

/* SoundCloud section */
.tailwind-ui .soundcloud-account-section {
  padding-top: 16px !important; /* pt-4 = 16px */
  border-top: 1px solid #262626 !important; /* Exact border color from specs */
  margin-top: 24px !important; /* space-y-6 = 24px */
}

.tailwind-ui .soundcloud-login-section .content {
  margin-bottom: 16px !important; /* space-y-4 = 16px */
}

.tailwind-ui .soundcloud-account-section p {
  color: #a7a7a7 !important; /* Exact muted color from Figma */
  font-size: 14px !important; /* Match the label size */
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  margin: 0 !important;
  text-align: center !important; /* Center to match the button above */
}

.tailwind-ui .soundcloud-login-btn {
  width: 100% !important;
  height: 48px !important; /* h-12 = 48px */
  background: #ff8800 !important; /* SoundCloud orange */
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 14px !important; /* Match other labels */
  font-weight: 400 !important; /* font-normal */
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important; /* gap-3 = 12px */
  margin-bottom: 16px !important; /* space-y-4 = 16px */
}

.tailwind-ui .soundcloud-login-btn:hover {
  background: #ff9900 !important; /* SoundCloud orange hover */
}

/* Account state styles */
.tailwind-ui .soundcloud-account-state {
  display: none; /* Hidden by default */
  background: #262626 !important; /* Match tag background */
  border: none !important; /* Match tag border style */
  border-radius: 6px !important; /* Match tag border radius */
  padding: 16px !important;
  margin-top: 16px !important;
}

.tailwind-ui .soundcloud-account-state.show {
  display: block !important;
}

/* Hidden state for login */
.tailwind-ui .soundcloud-login-state.hidden {
  display: none !important;
}

.tailwind-ui .account-info {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.tailwind-ui .user-profile {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.tailwind-ui .profile-pic {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.tailwind-ui .user-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.tailwind-ui .user-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
}

.tailwind-ui .user-email {
  font-size: 12px !important;
  color: #a7a7a7 !important;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
}

.tailwind-ui .account-description {
  margin: 0 !important;
  text-align: center !important;
  color: #a7a7a7 !important;
  font-size: 12px !important;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
}

.tailwind-ui .soundcloud-logout-btn {
  padding: 6px 12px !important; /* Match tag padding */
  background: rgba(255, 136, 0, 0.15) !important; /* Subtle orange background */
  color: #ff8800 !important; /* Orange text */
  border: 1px solid rgba(255, 136, 0, 0.2) !important; /* Subtle orange border */
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.tailwind-ui .soundcloud-logout-btn:hover {
  background: rgba(255, 136, 0, 0.25) !important;
  border-color: rgba(255, 136, 0, 0.4) !important;
  color: #ff9900 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tailwind-ui .search-container {
    padding: 24px 20px !important;
  }

  .tailwind-ui .search-header h1 {
    font-size: 2rem !important;
  }

  .tailwind-ui .search-header p {
    font-size: 1rem !important;
  }

  .tailwind-ui .search-form {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .tailwind-ui .search-form input,
  .tailwind-ui .search-form button {
    width: 100% !important;
  }
}

/* =========================================
   SEARCH PROGRESS OVERLAY STYLES
   ========================================= */

/* Search Progress Overlay - White screen with black text */
.search-progress-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000000 !important; /* Black background to match app */
  z-index: 9999 !important; /* Much higher z-index to ensure visibility */
  display: none; /* Hidden by default - NO !important so JavaScript can override */
  align-items: center !important; justify-content: center !important;
  flex-direction: column !important;
  gap: 32px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(100%);
  transition: transform 520ms cubic-bezier(.2,.8,.2,1), opacity 320ms ease;
}

.search-progress-content {
  text-align: center !important;
  max-width: 720px !important;
  padding: 0 24px !important;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 380ms ease, transform 380ms cubic-bezier(.2,.8,.2,1);
}

/* When overlay is shown, reveal content container */
.search-progress-overlay.show .search-progress-content {
  opacity: 1;
  transform: translateY(0);
}

/* Stepper */
.search-progress-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px auto;
  max-width: 720px;
}
.search-progress-steps .step {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  align-items: center;
  color: #475569; /* slate-600 */
  font-weight: 600;
  font-size: 12px;
}
.search-progress-steps .step .icon { width: 16px; text-align: center; font-weight: 800; line-height: 1; }
.search-progress-steps .step .icon::before { content: ''; }
.search-progress-steps .step.done .icon { color: #10b981; }
.search-progress-steps .step.done .icon::before { content: '✓'; }
.search-progress-steps .step.err  .icon { color: #ef4444; }
.search-progress-steps .step.err  .icon::before { content: '✕'; }
.search-progress-steps .step .label { white-space: nowrap; text-align: left; }
.search-progress-steps .step.current .label { color: #0ea5e9; }
.search-progress-steps .step.pending .label { color: #94a3b8; }

/* Progress text with ellipsis animation */
.search-progress-text { display: none !important; color: #ffffff !important; }

/* Ellipsis animation for initial AI steps */
.search-progress-text.ai-initializing {
  animation: ellipsisLoop 2s infinite !important;
}

/* Ellipsis animation for AI processing text */
.search-progress-text.ai-processing {
  animation: ellipsisLoop 1.5s infinite !important;
}

/* Ellipsis animation for playlist preparation text */
.search-progress-text.playlist-preparing {
  animation: ellipsisLoop 1.8s infinite !important;
}

/* Cycling ellipsis animation */
.search-progress-text.ellipsis-animated::after {
  content: "";
  animation: ellipsisCycle 2s steps(1) infinite !important;
  margin-left: 2px !important;
}

@keyframes ellipsisCycle {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
  100% { content: ""; }
}

.search-progress-text {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #000000 !important; /* Pure black text */
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Live log under the progress headline */
.search-progress-log {
  width: 100%;
  max-height: none; /* no scrollbar */
  overflow: visible; /* no scrollbar */
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 auto;
  text-align: left;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: 14px;
  color: #ffffff; /* white text */
  word-break: break-word; overflow-wrap: anywhere; white-space: normal;
}
.search-progress-card .search-progress-log { color: #ffffff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.search-progress-card .search-progress-log .msg { color: #ffffff; }

.search-progress-log .log-line {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  margin: 6px 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
.search-progress-log .log-line .time {
  display: inline-block;
  min-width: 48px; text-align: center;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
}
.search-progress-log .log-line .icon {
  width: 16px;
  text-align: center;
  font-weight: 700;
  line-height: 1;
  color: #94a3b8; /* slate-400 for info */
  flex: 0 0 16px;
}
.search-progress-log .log-line .icon svg { width: 14px; height: 14px; display: block; margin-top: 2px; }
.search-progress-log .log-line .icon.empty { width: 0; flex-basis: 0; margin: 0; }
.search-progress-log .log-line.done .icon { color: #10b981; }
.search-progress-log .log-line.warn .icon { color: #f59e0b; }
.search-progress-log .log-line.err  .icon { color: #ef4444; }
.search-progress-log .msg { color: #ffffff; }

.search-progress-log .msg code {
  background: #111827;
  color: #f9fafb;
  padding: 1px 4px;
  border-radius: 4px;
}

/* Card */
.search-progress-card.dark {
  background: #0a0a0a; /* match search card */
  color: #ffffff;
  border-radius: 8px; /* match search card */
  width: min(42rem, 94vw); /* match search card max width */
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  padding: 32px; /* match search card */
  transform: translateY(12px) scale(.98);
  opacity: 0;
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
  border: 1px solid #262626; /* match search card */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  margin: 0 auto; /* center */
}
.search-progress-overlay.show .search-progress-card { opacity: 1; transform: translateY(0) scale(1); }
.sp-title { display: none; }

/* Horizontal numbered stepper */
.sp-steps-top { position: relative; height: 48px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.sp-steps-top .sp-rail { position: absolute; left: 24px; right: 24px; top: 24px; height: 2px; background: rgba(255,255,255,0.18); border-radius: 2px; z-index: 0; }
.sp-steps-top .sp-rail-active { position: absolute; left: 24px; top: 24px; height: 2px; background: #ffffff; width: 0; border-radius: 2px; transition: width 420ms cubic-bezier(.2,.8,.2,1); z-index: 0; }
.sp-steps-top .sp-node { position: relative; width: 32px; height: 32px; border-radius: 999px; background: #0a0a0a; border: 2px solid rgba(255,255,255,0.28); display: grid; place-items: center; color: #ffffff; font-weight: 800; font-size: 14px; z-index: 1; }
.sp-steps-top .sp-node .num { position: relative; z-index: 2; color: inherit; }
.sp-steps-top .sp-node::after { content:''; position:absolute; inset:6px; border-radius:999px; background:#0a0a0a; z-index:0; }
.sp-steps-top .sp-node.current { border-color: #ffffff; background: #0a0a0a; color: #ffffff !important; }
.sp-steps-top .sp-node.done { border-color: #ffffff; background: #ffffff; color: #0a0a0a !important; }
.sp-steps-top .sp-node.done::after { background:#ffffff; }

.sp-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.sp-label { text-align: left; }
.sp-label .sup { display: none; }
.sp-label .hdr { display: block; font-weight: 700; font-size: 14px; color: rgba(255,255,255,0.92); letter-spacing: .005em; line-height: 1.25; margin-top: 2px; }
.sp-label .badge { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.sp-label.pending .badge { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.86); border: 1px solid rgba(255,255,255,0.18); }
.sp-label.current .badge { background: rgba(255,255,255,0.06); color: #ffffff; border: 1px solid rgba(255,255,255,0.38); }
.sp-label.done .badge { background: rgba(255,255,255,0.12); color: #ffffff; border: 1px solid rgba(255,255,255,0.28); }
.sp-label.err .badge { background: rgba(255,255,255,0.06); color: #ffffff; border: 1px solid rgba(255,255,255,0.18); }

/* Force visibility override for progress overlay */
.search-progress-overlay.force-visible {
  display: flex; /* NO !important so JavaScript can override */
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 9999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000000 !important;
  pointer-events: auto !important;
}

/* Slide states */
.search-progress-overlay.show { transform: translateY(0); }
.search-progress-overlay.exit-up { transform: translateY(-100%); }

/* Subtle page motion to feel like panels slide */
body.progress-mode #searchInterface {
  transform: translateY(8vh);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
}

/* Player reveal is a fade-through + small lift */
body:not(.player-mode) #stage .player-layout {
  transform: translateY(24px);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
body.player-mode #stage .player-layout {
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .search-progress-overlay,
  body.progress-mode #searchInterface,
  #stage { transition: none !important; }
}

/* Responsive adjustments for progress overlay */
@media (max-width: 768px) {
  .search-progress-content {
    padding: 0 24px !important;
  }
  
  .search-progress-text {
    font-size: 20px !important; /* Bumped up from 16px */
  }
}

@media (max-width: 480px) {
  .search-progress-content {
    padding: 0 20px !important;
  }
  
  .search-progress-text {
    font-size: 18px !important; /* Bumped up from 14px */
  }
}

/* ==========================================================
   TWO-COLUMN PLAYER LAYOUT
   ========================================================== */

/* Player Layout Container */
.player-layout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  display: flex;
  flex-direction: column;
  z-index: 1000;
}

/* Navigation Bar */
.player-nav {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Center Logo */
.nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-logo-img {
  width: 32px;
  height: 32px;
  opacity: 0.9;
}

/* Playlist Controls */
.playlist-controls {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Force all playlist buttons to have same height - ULTRA SPECIFIC */
.player-nav .playlist-controls .playlist-btn,
.player-nav .playlist-controls .new-playlist-btn,
.player-nav .playlist-controls .save-playlist-btn,
.player-nav .playlist-controls .repost-btn,
.playlist-controls .playlist-btn,
.playlist-controls .new-playlist-btn,
.playlist-controls .save-playlist-btn,
.playlist-controls .repost-btn {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  line-height: 36px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

/* Autoplay button in player controls - should look like other control buttons */
.player-controls .autoplay-btn {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: background-color 0.2s ease !important;
}

.player-controls .autoplay-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* New Playlist Button - White background, most prominent */
.player-nav .new-playlist-btn,
.new-playlist-btn {
  height: 36px !important; /* Match other buttons */
  padding: 8px 12px !important; /* Match other buttons */
  background: #ffffff !important; /* White background */
  border: none !important; /* No border */
  color: #000000 !important; /* Black text on white */
  font-weight: 600 !important; /* Bolder text */
  margin: 0 !important; /* No margins */
}

.new-playlist-btn:hover {
  background: #f0f0f0 !important;
  color: #000000 !important;
}

/* Save Playlist Button - Secondary action, normal styling */
.save-playlist-btn {
  height: 36px !important; /* Match other buttons */
  padding: 8px 12px !important; /* Match other buttons */
  background: #262626 !important; /* Dark gray like other secondary buttons */
  border: none !important; /* No border */
  color: #ffffff !important; /* White text */
  font-weight: 500 !important; /* Normal weight */
  margin: 0 !important; /* No margins */
}

/* Repost Button - Match save playlist button exactly */
.repost-btn {
  height: 36px !important;
  padding: 8px 12px !important;
  background: #262626 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  transition: background-color 0.15s ease !important;
}

.repost-btn:hover {
  background: #333333 !important;
}

.save-playlist-btn:hover {
  background: #333333 !important;
  border-color: #333333 !important;
  color: #ffffff !important;
}

.back-to-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 8px 14px;
  background: #262626;
  border: none;
  border-radius: 6px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.back-to-search:hover {
  background: #333333;
}

/* Main Player Content */
.player-main {
  position: relative;
  flex: 1;
  height: calc(100vh - 80px);
}

/* Left Column - Main Player (75%) */
.player-left {
  position: absolute;
  left: 0;
  top: 0;
  right: 25%; /* Start with 25% for sidebar */
  bottom: 0;
  padding: 40px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* ensure visualizer stays clipped */
}

/* Subtle visualizer sits behind player content */
.subtle-viz-shell {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.subtle-viz-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
}

/* Album Art Container */
.album-art-container {
  position: relative;
  z-index: 1;
  margin-bottom: 40px;
}

.album-art {
  width: 300px;
  height: 300px;
  border-radius: 12px;
  background: #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.album-art-placeholder {
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: center;
}

.album-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Track Info */
.track-info {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 40px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.track-title {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 6px 0;
  line-height: 1.2;
}

.track-artist {
  font-size: 16px;
  color: #a7a7a7;
  margin: 0;
  font-weight: 400;
}

/* Progress Container */
.progress-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  margin-bottom: 40px;
}

.progress-bar {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 12px;
}

.progress-fill {
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s ease;
}

.progress-knob {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.progress-bar:hover .progress-knob {
  opacity: 1;
}

.time-display {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #a7a7a7;
  font-weight: 500;
}

/* Player Controls */
.player-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 40px;
}

.control-btn {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

.control-btn.active {
  color: #ff8800;
}

.play-btn {
  width: 64px;
  height: 64px;
  background: #ffffff;
  color: #000000;
  font-size: 24px;
}

/* Force play button icons to be black */
#playBtn svg {
  fill: #000000 !important;
  color: #000000 !important;
}

.play-btn svg {
  fill: #000000 !important;
  color: #000000 !important;
}

.play-btn:hover {
  background: #f0f0f0;
  transform: scale(1.05);
}

.play-btn.playing .play-icon {
  display: none;
}

.play-btn.playing .pause-icon {
  display: block;
}

/* Bottom Controls */
.bottom-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 400px;
}

.like-btn {
  background: none;
  border: none;
  color: #a7a7a7;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.like-btn:hover {
  color: #ff6b6b;
  transform: scale(1.1);
}

.like-btn.liked {
  color: #ff6b6b;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  margin-left: 20px;
}

.volume-icon {
  color: #a7a7a7;
  flex-shrink: 0;
}

.volume-slider {
  flex: 1;
  height: 4px;
  position: relative;
}

.volume-track {
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}

.volume-fill {
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
  width: 70%;
  transition: width 0.1s ease;
}

.volume-knob {
  position: absolute;
  top: 50%;
  left: 70%;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.volume-track:hover .volume-knob {
  opacity: 1;
}

/* Right Column - Playlist (25%) */
.player-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  min-width: 200px;
  max-width: 50%;
  background: rgba(0, 0, 0, 0.3);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 25%; /* Default width, will be overridden by JavaScript */
}

/* Removed playlist header - buttons now in navigation */

/* Playlist Buttons */
.playlist-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px !important; /* Fixed height for all buttons */
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #a7a7a7;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.playlist-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.playlist-btn:active {
  transform: translateY(1px);
  background: rgba(255, 255, 255, 0.08);
}

.playlist-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}


/* Resize Handle - Removed, using interact.js instead */

/* Playlist Tracks */
.playlist-tracks {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.track-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-left: 3px solid transparent;
  margin: 4px 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  flex-shrink: 1;
}

.track-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.track-item.active {
  background: rgba(255, 255, 255, 0.12);
  border-left-color: #ff8800;
}

.track-artwork {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  min-width: 40px;
}

.track-artwork-placeholder {
  color: #666666;
}

.track-artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.track-details {
  flex: 1;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  width: 0;
}

.track-name {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-artist {
  font-size: 12px;
  color: #a7a7a7;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-duration {
  font-size: 12px;
  color: #a7a7a7;
  margin-left: 12px;
  flex-shrink: 0;
  min-width: 35px;
  text-align: right;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .player-main {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .player-left {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    flex: 0 0 60%;
    padding: 20px;
  }

  .player-right {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    flex: 0 0 40%;
    width: 100% !important; /* Override JavaScript width on mobile */
    min-width: 100%;
    max-width: 100%;
  }

  .album-art {
    width: 200px;
    height: 200px;
  }

  .track-title {
    font-size: 24px;
  }

  .track-artist {
    font-size: 14px;
  }

  .player-controls {
    gap: 16px;
  }

  .play-btn {
    width: 56px;
    height: 56px;
  }
}