/* 暗黑模式样式 */
html.dark {
    background-color: #121212;
    color: #e1e1e1;
}

html.dark body {
    background-color: #121212;
}

html.dark .settings-page {
    background-color: #121212;
}

html.dark .setting-section h3 {
    color: #e1e1e1;
}

html.dark .setting-item {
    border-bottom-color: #333;
    color: #e1e1e1;
}

html.dark .setting-control {
    background-color: #2a2a2a;
    color: #e1e1e1;
}

html.dark .modal-content {
    background-color: #1d1d1d;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

html.dark .modal-content h3 {
    color: #e1e1e1;
}

html.dark .modal-content li {
    background-color: #2a2a2a;
    color: #e1e1e1;
}

html.dark .modal-content li:hover {
    background-color: #363636;
}

html.dark .modal-content button {
    background-color: #2a2a2a;
    color: #e1e1e1;
}

html.dark .modal-content button:hover {
    background-color: #363636;
}

/* 播放器控件 */
html.dark .player-container {
    background-color: rgba(24, 24, 24) !important;
    border-top: 1px solid #333 !important;
}

html.dark .player-container .control-button {
    color: #e1e1e1 !important;
}

html.dark .player-container .control-button:hover {
    color: var(--primary-color) !important;
}

html.dark .player-container .song-info {
    color: #e1e1e1 !important;
}

html.dark .player-container .song-title {
    color: #e1e1e1 !important;
}

html.dark .player-container .song-artist {
    color: #999 !important;
}

html.dark .player-container .progress-bar {
    background-color: #4a4a4a !important;
}

html.dark .player-container .progress-bar .loaded {
    background-color: #666 !important;
}

/* 卡片和列表项 */
html.dark .playlist-item,
html.dark .song-item {
    background-color: #1d1d1d;
    border-color: #333;
}

/* 输入框 */
html.dark input {
    color: #e1e1e1;
    border-color: #333;
    background: black;
}

/* 滚动条 */
html.dark ::-webkit-scrollbar-track {
    background-color: #2a2a2a;
}

html.dark ::-webkit-scrollbar-thumb {
    background-color: #4a4a4a;
}

/* 头部导航 */
html.dark header {
    background-color: rgba(24, 24, 24) !important;
    border-bottom: 1px solid #333;
}

html.dark header .logo {
    color: #e1e1e1;
}

html.dark header .nav-item {
    color: #e1e1e1;
}

html.dark header .nav-item:hover,
html.dark header .nav-item.active {
    color: var(--primary-color);
}

html.dark header .window-controls {
    color: #e1e1e1;
}

html.dark header .window-controls span:hover {
    background-color: #363636;
}

html.dark header .search-box {
    background-color: #2a2a2a;
    border-color: #333;
}

html.dark header .search-box input {
    color: #e1e1e1;
}

html.dark header button {
    background-color: transparent !important;
    border: none !important;
    color: #999 !important;
}

html.dark header .nav-arrow:disabled i {
    color: #353535 !important;
}

html.dark header .search-box input::placeholder {
    color: #999;
}

html.dark header .user-avatar {
    border-color: #333;
}

/* 按钮 */
html.dark button {
    background-color: #2a2a2a !important;
    color: #e1e1e1 !important;
    border: 1px solid #373434 !important;
}

html.dark button:hover {
    background-color: #363636 !important;
}

/* 链接 */
html.dark a {
    color: #e1e1e1;
}

/* 主内容区 */
html.dark main {
    background-color: #121212;
}

/* 音乐卡片 */
html.dark .music-card {
    background-color: #1d1d1d;
    border-color: #333;
    border-radius: 5px;
}

html.dark .music-card .title {
    color: #e1e1e1;
}

html.dark .music-card .artist {
    color: #999;
}

html.dark .music-card:hover {
    background-color: #2a2a2a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

html.dark .music-card .play-count {
    color: #999;
}

html.dark .music-card .description {
    color: #999;
}

/* PlaylistDetail 页面样式 */
html.dark .playlist-detail {
    background-color: #121212;
    color: #e1e1e1;
}

html.dark .playlist-detail-page {
    color: #999;
}


html.dark .playlist-info .description {
    color: #999;
}

html.dark .track-list .li {
    border-bottom: none;
}

html.dark .track-list .li:hover {
    background-color: #2a2a2a;
}


html.dark .playlist-info .meta {
    color: #999;
}


html.dark .playlist-actions button {
    background-color: #2a2a2a;
    color: #e1e1e1;
    border: 1px solid #373434;
}

html.dark .playlist-actions button:hover {
    background-color: #363636;
}

html.dark .song-list {
    background-color: #121212;
}

html.dark .song-list-header {
    background-color: #1d1d1d;
    color: #999;
    border-bottom: 1px solid #333;
}

html.dark .song-item:hover {
    background-color: #2a2a2a;
}

html.dark .song-item .song-name {
    color: #e1e1e1;
}

html.dark .song-item .album-name {
    color: #999;
}

html.dark .song-item .song-album {
    color: #999;
}

html.dark .song-item .song-duration {
    color: #999;
}

html.dark .song-item .song-actions {
    color: #999;
}

html.dark .song-item .song-actions button {
    color: #e1e1e1;
}

html.dark .song-item .song-actions button:hover {
    color: var(--primary-color);
    background-color: #363636;
} 

html.dark .sq-icon {
    color: #2f74a5;
}
html.dark .vip-icon {
    color: #b86222;
}

html.dark .context-menu, html.dark .context-menu ul {
    background-color: #1d1d1d;
    border:none;
    border-radius: 5px;
    color: #999;
}
html.dark .context-menu li:hover {
    background-color: #2a2a2a !important;
}

html.dark .controls .control-btn,
html.dark .player-controls .control-btn,
html.dark .extra-controls .extra-btn {
    background-color: transparent !important;
    color: #999 !important;
    border: none!important;
}

html.dark .search-bar input, html.dark .search-input {
    background-color: #2a2a2a !important;
    color: #e1e1e1 !important;
    border: 1px solid #373434 !important;
}

html.dark .profile-menu {
    background-color: #333333;
    border:none;
    border-radius: 5px;
}
html.dark .profile-menu li a{
    color: #bcbcbc;
}
html.dark .profile-menu li a:hover {
    background-color: #484848 !important;
}
html.dark .queue-popup{
    background-color: #1d1d1d;
    color: #e1e1e1;
}
html.dark .queue-popup h3{
    color: #e1e1e1;
}
html.dark .queue-popup li {
    border: none;
}
html.dark .queue-popup .queue-play-btn {
    background-color: transparent !important;
    border: none !important;
}

html.dark .el-card{
    background-color: #1d1d1d;
    border: none;
}

html.dark .el-card .el-input__wrapper{
    background-color: #2a2a2a;
    color: #e1e1e1;
    box-shadow: none;
}
html.dark .el-card .el-segmented{
    background-color: #363636;
}
html.dark .el-card .el-button {
    border: none;
}
html.dark .modal-content{
    color: #e1e1e1;
}
html.dark .search-results{
    background-color: #121212;
    color: #e1e1e1;
}
html.dark .search-results li{
    border: none;
}
html.dark .search-results li:hover{
    background-color: #2a2a2a;
}

html.dark .skeleton-grid .skeleton-card {
    background-color: #1d1d1d;
}
html.dark .skeleton-grid .skeleton-title, html.dark .skeleton-grid .skeleton-text, html.dark .skeleton-grid .skeleton-image {
    background-color: #2a2a2a;
}

html.dark .skeleton-loader .skeleton-item {
    background-color: #1d1d1d;
}
html.dark .skeleton-loader .skeleton-cover, html.dark .skeleton-loader .skeleton-line {
    background-color: #2a2a2a;
}


html.dark .radio-card .play-button {
    background: #1d1d1d;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
    color: #e1e1e1;
}

html.dark .radio-card .decorative-box {
    background: linear-gradient(45deg, #2a2a2a, #363636);
    box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.8), 5px 5px 10px rgba(255, 255, 255, 0.1), inset 2px 2px 5px rgba(0, 0, 0, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.05);
}

html.dark .radio-card .radio-content .radio-title, html.dark .ranking-title, html.dark .ranking-description, html.dark .radio-subtitle {
    color: #e1e1e1;
}

html.dark .radio-disc {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(255, 255, 255, 0.8);
    border: 8px solid #121314;
    padding: 2px;
}

html.dark .ranking-container .rank-selector {
    background: #2a2a2a;
}
html.dark .ranking-container .rank-chip {
    background: #2a2a2a;
    border:1px solid #333;
}
html.dark .ranking-container .rank-chip:hover {
    background: #363636;
}

html.dark .ranking-container .ranking-item {
    background: #2a2a2a!important;
}

html.dark .ranking-container .song-list {
    scrollbar-color: #2a2a2a #1d1d1d;
    background:linear-gradient(to right, rgba(100, 61, 73, 0.133), transparent)!important;
    scrollbar-width: thin;
}

html.dark .ranking-container .song-list .song-item {
    margin-bottom: 2px;
}

html.dark .queue-play-btn{
    border: none !important;
    background-color: rgba(0, 0, 0, 0.0)  !important;
}

html.dark .playlist-select-list li{
    background-color: inherit;
}