/* ============================================
   丽江音悦台 - 深色模式 + 播放列表面板
   ============================================ */

/* ===== 深色模式变量 ===== */
body.dark-mode {
  --dk-bg: #1a1a2e;
  --dk-surface: #16213e;
  --dk-surface2: #0f3460;
  --dk-text: #e0e0e0;
  --dk-muted: #a0a0b0;
  --dk-border: rgba(255,255,255,0.08);
  --dk-card: rgba(22,33,62,0.95);
}

body.dark-mode { background-color: var(--dk-bg) !important; color: var(--dk-text); }
body.dark-mode::before { opacity: 0.05 !important; }

/* 导航栏 */
body.dark-mode .navbar {
  background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

/* 内容区 */
body.dark-mode .content-section { background: var(--dk-card) !important; box-shadow: 0 5px 20px rgba(0,0,0,0.3); }
body.dark-mode .tab-content,
body.dark-mode .about-section { background: rgba(22,33,62,0.7) !important; }

/* 卡片 */
body.dark-mode .music-card,
body.dark-mode .video-card {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
body.dark-mode .music-card:hover,
body.dark-mode .video-card:hover {
  box-shadow: 0 8px 25px rgba(102,126,234,0.2);
  border-color: rgba(102,126,234,0.3);
}
body.dark-mode .music-card.active {
  background: linear-gradient(135deg, rgba(102,126,234,0.15), var(--dk-card)) !important;
  border-left-color: #667eea;
}

/* 文字 */
body.dark-mode .card-title { color: var(--dk-text) !important; }
body.dark-mode .card-text,
body.dark-mode .text-muted,
body.dark-mode small.text-muted { color: var(--dk-muted) !important; }
body.dark-mode .music-card .text-muted { color: var(--dk-muted); }

/* Tab */
body.dark-mode .nav-tabs { border-bottom-color: var(--dk-border); }
body.dark-mode .nav-tabs .nav-link { color: var(--dk-muted) !important; }
body.dark-mode .nav-tabs .nav-link:hover { color: #667eea !important; }
body.dark-mode .nav-tabs .nav-link.active { color: #667eea !important; border-bottom-color: #667eea !important; }

/* 关于 / 联系 */
body.dark-mode .about-section h3,
body.dark-mode .about-section p { color: var(--dk-text); }
body.dark-mode .about-section p.text-muted { color: var(--dk-muted) !important; }
body.dark-mode .contact-card-minimal { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; }
body.dark-mode .contact-card-minimal h3,
body.dark-mode .contact-card-minimal h4,
body.dark-mode .contact-card-minimal p { color: var(--dk-text); }
body.dark-mode .contact-card-minimal .text-muted { color: var(--dk-muted) !important; }
body.dark-mode .minimal-input { background: transparent !important; border-bottom-color: var(--dk-border) !important; color: var(--dk-text) !important; }
body.dark-mode .minimal-input:focus { border-bottom-color: #d35400 !important; }
body.dark-mode .form-label { color: var(--dk-muted) !important; }
body.dark-mode .btn-minimal { background: var(--dk-surface2) !important; }
body.dark-mode .btn-minimal:hover { background: #d35400 !important; }

/* 标语 */
body.dark-mode .slogan-text { background: linear-gradient(135deg,#f39c12,#e67e22) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; }
body.dark-mode .slogan-line { background: linear-gradient(90deg,transparent,rgba(211,84,0,0.4),transparent) !important; }

/* 页脚 */
body.dark-mode footer { background: #0d1117 !important; }

/* 分页 */
body.dark-mode .page-btn { border-color: var(--dk-border) !important; color: var(--dk-text) !important; background: var(--dk-surface); }
body.dark-mode .page-btn:hover:not(:disabled) { background: #667eea !important; color: white !important; border-color: #667eea !important; }
body.dark-mode .page-btn.btn-primary { background: #667eea !important; border-color: #667eea !important; }

/* 底部播放器 */
body.dark-mode .bottom-player {
  background: linear-gradient(180deg, rgba(26,26,46,0.98), rgba(22,33,62,0.98)) !important;
  border-top: 1px solid var(--dk-border);
}

/* 表单 */
body.dark-mode .form-control { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; }
body.dark-mode .form-control:focus { background: var(--dk-surface) !important; border-color: rgba(102,126,234,0.5) !important; box-shadow: 0 0 0 3px rgba(102,126,234,0.15) !important; color: var(--dk-text) !important; }
body.dark-mode .form-control::placeholder { color: var(--dk-muted) !important; }
body.dark-mode .alert-info { background: rgba(102,126,234,0.15) !important; color: var(--dk-text) !important; border-color: rgba(102,126,234,0.3) !important; }

/* 滚动条 */
body.dark-mode::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
body.dark-mode::-webkit-scrollbar-thumb { background: linear-gradient(180deg,rgba(102,126,234,0.4),rgba(118,75,162,0.4)); }

/* 火箭按钮 */
body.dark-mode .scroll-to-top { background: linear-gradient(135deg,#667eea,#764ba2) !important; }


/* ============================================
   播放列表面板 (右下角弹出)
   ============================================ */
.playlist-panel {
  position: fixed;
  right: 0;
  bottom: 80px;
  width: 340px;
  max-height: 60vh;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  border-radius: 12px 0 0 12px;
  box-shadow: -4px 0 30px rgba(0,0,0,0.15);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}

.playlist-panel.show {
  transform: translateX(0);
}

.playlist-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 0 12px;
  flex-shrink: 0;
}

.playlist-panel-tabs {
  display: flex;
  gap: 2px;
}

.pltab {
  padding: 6px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.pltab:hover { background: rgba(0,0,0,0.05); color: #333; }
.pltab.active { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }

.playlist-panel-close {
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(0,0,0,0.06);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  color: #666;
  transition: all 0.2s;
  flex-shrink: 0;
}
.playlist-panel-close:hover { background: rgba(0,0,0,0.12); color: #333; }

.playlist-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.panel-empty {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}
.panel-empty i { font-size: 2rem; display: block; margin-bottom: 10px; opacity: 0.4; }

.panel-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  gap: 10px;
}
.panel-item:hover { background: rgba(102,126,234,0.08); }
.panel-item.active { background: rgba(102,126,234,0.12); }

.panel-item-cover {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.panel-item-info { flex: 1; min-width: 0; }
.panel-item-title { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
.panel-item-artist { font-size: 0.75rem; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.panel-item-playing {
  color: #667eea;
  font-size: 0.8rem;
  animation: pulse-icon 1.5s ease infinite;
  flex-shrink: 0;
}

@keyframes pulse-icon {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* 深色模式下的面板 */
body.dark-mode .playlist-panel {
  background: rgba(22,33,62,0.97);
  box-shadow: -4px 0 30px rgba(0,0,0,0.4);
}
body.dark-mode .pltab { color: var(--dk-muted); }
body.dark-mode .pltab:hover { background: rgba(255,255,255,0.05); color: var(--dk-text); }
body.dark-mode .pltab.active { background: linear-gradient(135deg,#667eea,#764ba2); color: white; }
body.dark-mode .playlist-panel-close { background: rgba(255,255,255,0.06); color: var(--dk-muted); }
body.dark-mode .playlist-panel-close:hover { background: rgba(255,255,255,0.1); color: var(--dk-text); }
body.dark-mode .panel-item:hover { background: rgba(102,126,234,0.1); }
body.dark-mode .panel-item.active { background: rgba(102,126,234,0.15); }
body.dark-mode .panel-item-title { color: var(--dk-text); }
body.dark-mode .panel-item-artist { color: var(--dk-muted); }
body.dark-mode .panel-empty { color: var(--dk-muted); }

/* 移动端适配 */
@media (max-width: 576px) {
  .playlist-panel {
    width: 100%;
    max-height: 50vh;
    border-radius: 12px 12px 0 0;
    bottom: 110px;
    transform: translateY(100%);
    right: 0;
  }
  .playlist-panel.show { transform: translateY(0); }
  .pltab { font-size: 0.72rem; padding: 5px 8px; }
  .panel-item-cover { width: 36px; height: 36px; }
}

/* 底部播放器按钮 */
.player-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
#btn-fav, #btn-share, #btn-list, #btn-mode {
  transition: all 0.2s ease;
  flex-shrink: 0;
}
#btn-fav:hover, #btn-share:hover, #btn-list:hover, #btn-mode:hover {
  transform: scale(1.1);
}
#btn-fav .fas, #btn-share .fas, #btn-list .fas, #btn-mode .fas {
  font-size: 0.75rem;
}

/* 搜索页面深色模式 */
body.dark-mode .search-hero {
  background: linear-gradient(135deg, #1a1a2e, #0f3460) !important;
}
body.dark-mode .search-results-box {
  background: rgba(22, 33, 62, 0.8) !important;
}
body.dark-mode .filter-tab {
  background: rgba(255,255,255,0.06) !important;
  color: var(--dk-muted) !important;
}
body.dark-mode .filter-tab:hover {
  background: rgba(255,255,255,0.1) !important;
  color: var(--dk-text) !important;
}
body.dark-mode .filter-tab.active {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  color: white !important;
}
body.dark-mode .no-results-box {
  background: rgba(255,255,255,0.05) !important;
}
body.dark-mode .no-results-box h5 { color: var(--dk-text); }

/* 视频播放页深色模式 */
body.dark-mode .video-player-container {
  background: var(--dk-surface) !important;
}
body.dark-mode .related-video-card {
  background: var(--dk-surface) !important;
  border-color: var(--dk-border) !important;
}

/* 深色模式切换按钮 */
#btn-dark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all 0.3s;
  flex-shrink: 0;
}
#btn-dark:hover { transform: scale(1.1); }

/* 排序按钮 */
.sort-btn {
  padding: 4px 12px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #666;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.sort-btn:hover { background: rgba(102,126,234,0.08); color: #333; }
.sort-btn.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-color: transparent;
}
body.dark-mode .sort-btn { border-color: var(--dk-border); color: var(--dk-muted); }
body.dark-mode .sort-btn:hover { background: rgba(102,126,234,0.15); color: var(--dk-text); }
body.dark-mode .sort-btn.active { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }

/* 歌手名可点击提示 */
.bottom-player #current-artist {
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1px dashed transparent;
}
.bottom-player #current-artist:hover {
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,0.5);
}