/* ===== SnowMusic 主样式 ===== */

* { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #a78bfa55; border-radius: 4px; }

/* Dark / Light transitions */
body, .theme-transition { transition: background-color 0.35s ease, color 0.35s ease; }

/* Glassmorphism */
.glass-dark { background: rgba(26,24,37,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.glass-light { background: rgba(255,255,255,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* Neon glow */
.glow-purple { box-shadow: 0 0 24px #a78bfa44, 0 2px 8px #7c3aed22; }
.glow-purple-lg { box-shadow: 0 0 40px #a78bfa66, 0 4px 20px #7c3aed44; }

/* Card hover lift */
.card-hover { transition: transform 0.22s ease, box-shadow 0.22s ease; }
.card-hover:hover { transform: translateY(-4px); }

/* Active nav indicator */
.nav-active-dark { background: linear-gradient(135deg,#a78bfa22,#7c3aed22); border-right: 3px solid #a78bfa; color: #a78bfa; }
.nav-active-light { background: linear-gradient(135deg,#ede9fe,#ddd6fe); border-right: 3px solid #7c3aed; color: #7c3aed; }

/* Progress bar */
.progress-track { background: #2a2640; border-radius: 999px; height: 4px; cursor: pointer; }
.progress-fill { background: linear-gradient(90deg,#a78bfa,#818cf8); height: 100%; border-radius: 999px; transition: width 0.1s linear; }
.progress-track-light { background: #e2e1f0; }

/* Waveform animation */
@keyframes wave1 { 0%,100%{height:8px} 50%{height:22px} }
@keyframes wave2 { 0%,100%{height:14px} 50%{height:6px} }
@keyframes wave3 { 0%,100%{height:18px} 50%{height:10px} }
@keyframes wave4 { 0%,100%{height:10px} 50%{height:24px} }
.wave-bar:nth-child(1){animation:wave1 0.9s ease-in-out infinite;}
.wave-bar:nth-child(2){animation:wave2 0.75s ease-in-out infinite;}
.wave-bar:nth-child(3){animation:wave3 1.1s ease-in-out infinite;}
.wave-bar:nth-child(4){animation:wave4 0.85s ease-in-out infinite;}
.wave-bar.paused { animation-play-state: paused !important; }

/* Cover icon animation */
@keyframes coverSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.cover-vinyl { transition: opacity 0.3s ease; }
.vinyl-outer { background: radial-gradient(circle, #222 0%, #0a0a0a 28%, #333 29%, #0a0a0a 30%, #0a0a0a 48%, #333 49%, #0a0a0a 50%, #0a0a0a 68%, #333 69%, #0a0a0a 70%, #0a0a0a 100%); }
.vinyl-groove { background: radial-gradient(circle, transparent 42%, #444 43%, transparent 44%, transparent 62%, #444 63%, transparent 64%); }
.vinyl-groove2 { background: radial-gradient(circle, transparent 38%, #444 39%, transparent 40%, transparent 58%, #444 59%, transparent 60%); }
.vinyl-label { background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 0 6px #a78bfa66; }
.cover-wrapper.playing .cover-vinyl { animation: coverSpin 12s linear infinite; opacity: 0; }
.cover-wrapper.playing.paused .cover-vinyl { animation-play-state: paused; }
.cover-wrapper #player-cover { transition: opacity 0.3s ease; }
.cover-wrapper.playing #player-cover { opacity: 1; }
.cover-indicator { background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.cover-wrapper.playing:hover .cover-indicator { opacity: 1; }
.cover-indicator .indicator-dot { transition: transform 0.2s ease, opacity 0.2s ease; }
.cover-indicator.folded .indicator-dot:nth-child(1) { transform: translateY(3px); }
.cover-indicator.folded .indicator-dot:nth-child(3) { transform: translateY(-3px); }

/* Genre badge */
.genre-chip { transition: all 0.18s ease; cursor: pointer; }
.genre-chip:hover { transform: scale(1.06); }

/* Gradient heading */
.gradient-text { background: linear-gradient(135deg,#a78bfa,#818cf8,#38bdf8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Volume slider */
input[type=range] { -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track { background:linear-gradient(90deg,#a78bfa var(--val,60%),#2a2640 var(--val,60%)); border-radius:999px; height:4px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#a78bfa; margin-top:-5px; box-shadow:0 0 6px #a78bfa88; }
.light-mode input[type=range]::-webkit-slider-runnable-track { background:linear-gradient(90deg,#7c3aed var(--val,60%),#e2e1f0 var(--val,60%)); }

/* Toggle switch */
.toggle { position:relative; display:inline-block; width:44px; height:24px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:#2a2640; border-radius:24px; transition:0.3s; }
.toggle-slider:before { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:0.3s; }
.toggle input:checked + .toggle-slider { background:#a78bfa; }
.toggle input:checked + .toggle-slider:before { transform:translateX(20px); }
.light-mode .toggle-slider { background:#d1cfe8; }

/* Settings input */
.settings-input { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.settings-input:focus { outline:none; border-color:#a78bfa; box-shadow:0 0 0 3px #a78bfa33; }

/* Page fade */
.page-section { animation: fadeIn 0.28s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* Rank badge */
.rank-1 { background:linear-gradient(135deg,#ffd700,#f59e0b); }
.rank-2 { background:linear-gradient(135deg,#e2e8f0,#94a3b8); }
.rank-3 { background:linear-gradient(135deg,#fed7aa,#f97316); }

/* Tooltip (向上) */
.tooltip { position:relative; }
.tooltip:hover .tooltip-text { opacity:1; transform:translateX(-50%) translateY(-4px); }
.tooltip-text { opacity:0; transition:all 0.2s; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(0); white-space:nowrap; padding:4px 10px; border-radius:6px; font-size:11px; pointer-events:none; }

/* Tooltip (向下) */
.tooltip-bottom { position:relative; }
.tooltip-bottom:hover .tooltip-text-bottom { opacity:1; transform:translateX(-50%) translateY(4px); }
.tooltip-text-bottom { opacity:0; transition:all 0.2s; position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(0); white-space:nowrap; padding:4px 10px; border-radius:6px; font-size:11px; pointer-events:none; }

/* ===== 歌词面板 ===== */
#lyrics-container {
  position: absolute;
  top: 73px;
  left: 0;
  right: 0;
  bottom: 73px;
  z-index: 35;
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}
#lyrics-container.expanded {
  opacity: 1;
  pointer-events: auto;
}
#content-scroll.lyrics-open {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}
.lyrics-scroll-area {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lyrics-scroll-area::-webkit-scrollbar {
  display: none;
}

.lyric-line {
  font-size: 16px;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  color: #64748b;
  text-align: center;
  padding: 8px 24px;
  cursor: default;
  line-height: 1.8;
  transform-origin: center center;
  opacity: 0.5;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lyric-line.active {
  color: #a78bfa;
  font-size: 26px;
  font-weight: 600;
  opacity: 1;
  max-width: 1200px;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}
.lyric-line:first-child {
  margin-top: 0;
}
.lyric-line:last-child {
  margin-bottom: 0;
}
.lyric-translation {
  font-size: 12px;
  color: #475569;
  text-align: center;
  padding: 0 24px 8px;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0.4;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lyric-translation.active {
  color: #a78bfa;
  font-size: 15px;
  opacity: 0.7;
  max-width: 1200px;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}
.lyric-empty {
  text-align: center;
  color: #64748b;
  font-size: 14px;
  padding: 20px 0;
}

/* Queue panel */
#queue-panel {
  scrollbar-width: none;
  -ms-overflow-style: none;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
#queue-panel::-webkit-scrollbar {
  display: none;
}
#queue-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#queue-list::-webkit-scrollbar {
  display: none;
}
#queue-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.queue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.queue-item:hover {
  background: rgba(167, 139, 250, 0.08);
}
.queue-item.playing {
  background: rgba(167, 139, 250, 0.12);
}
.queue-item.playing .queue-title {
  color: #a78bfa;
}
.queue-title {
  font-size: 13px;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.queue-artist {
  font-size: 11px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-index {
  font-size: 11px;
  color: #475569;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.queue-delete {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #475569;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  font-size: 13px;
}
.queue-item:hover .queue-delete {
  opacity: 1;
}
.queue-delete:hover {
  color: #ef4444;
}

/* Light mode - deep color text, light backgrounds & animations */
.light-mode { color: #1e1b2e; }
.light-mode .gradient-text { background: linear-gradient(135deg,#7c3aed,#6366f1,#2563eb); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.light-mode .text-white,
.light-mode .text-slate-200 { color: #1e1b2e !important; }
.light-mode .text-slate-300 { color: #373050 !important; }
.light-mode .text-slate-400 { color: #4a4568 !important; }
.light-mode .text-slate-500 { color: #5c5678 !important; }
.light-mode .text-slate-600 { color: #6b6580 !important; }
.light-mode .lyric-line { color: #4a4568; }
.light-mode .lyric-line.active { color: #1e1b2e; }
.light-mode #lyrics-container { background: rgba(255,255,255,0.95); }
.light-mode .vinyl-label { background: linear-gradient(135deg, #7c3aed, #6366f1); box-shadow: 0 0 4px #7c3aed44; }
.light-mode .wave-bar { background: #7c3aed; }
.light-mode .glow-purple,
.light-mode .glow-purple-lg { box-shadow: 0 0 24px #7c3aed33, 0 2px 8px #7c3aed22; }
.light-mode .glass-light { background: rgba(255,255,255,0.92); }
.light-mode .tooltip-text-bottom,
.light-mode .tooltip-text { background: #fff; color: #1e1b2e; border-color: #ddd6fe; }

/* Light mode - component backgrounds */
.light-mode .bg-\[\#1a1825\],
.light-mode [style*="background:#1a1825"],
.light-mode [style*="background: #1a1825"] { background: #fff !important; }
.light-mode .bg-\[\#0f0e17\] { background: #f0eeff !important; }
.light-mode .border-\[\#2a2640\] { border-color: #ddd6fe !important; }
.light-mode .hover\:bg-\[\#1a1825\]:hover { background: #f5f3ff !important; }
.light-mode .hover\:bg-\[\#2a264033\]:hover { background: #ede9fe55 !important; }
.light-mode .hover\:bg-\[\#2a2640\]:hover { background: #ede9fe !important; }

/* Light mode - specific component overrides */
.light-mode .rank-card { background: #fff !important; border-color: #ddd6fe !important; }
.light-mode .rank-card .hover\:bg-\[\#2a264033\]:hover { background: #f5f3ff !important; }
.light-mode .source-card { background: #fff !important; border-color: #ddd6fe !important; }
.light-mode #recent-dropdown { background: #fff !important; border-color: #ddd6fe !important; }
.light-mode #recent-dropdown .hover\:bg-\[\#2a2640\]:hover { background: #f5f3ff !important; }
.light-mode .nav-item { color: #5c5678; }
.light-mode .nav-item:hover { color: #1e1b2e; }
.light-mode .genre-nav { color: #5c5678; }
.light-mode .genre-nav:hover { color: #1e1b2e; }
.light-mode .recent-track { color: #1e1b2e; }
.light-mode .search-result { background: #fff !important; border-color: #ddd6fe !important; }