/* 默认主题（浅色） */
:root {
    --TZT-MAIN: #12121;
    --TZT-HIHG: 120%;
    --TZT-HIHGWIDE: 1%;
    --TZT-RADIUS: 6px;
    
    /* 浅色主题默认颜色 */
    --TZT-BG-0: #ffffff;
    --TZT-BG-1: #f7f7f7;
    --TZT-BG-2: #ffffff;
    --TZT-BG-3: #f7f7f7;
    --TZT-BG-4: #4c4c4c;
    --TZT-BG-5: #ffffff;
    --TZT-FG: #333333;
    --TZT-FG-0: rgba(51, 51, 51, 0.9);
    --TZT-FG-1: rgba(51, 51, 51, 0.7);
    --TZT-FG-2: rgba(51, 51, 51, 0.5);
    --TZT-FG-3: rgba(51, 51, 51, 0.3);
    --TZT-FG-4: rgba(51, 51, 51, 0.15);
    
    /* 添加按钮和标签颜色 */
    --TZT-BTN-BG: #4c4c4c;
    --TZT-BTN-COLOR: #ffffff;
    --TZT-TAG-BG: #f0f0f0;
    --TZT-TAG-COLOR: #333333;
    --TZT-PLAYLIST-BG: #f7f7f7;
    --TZT-PLAYLIST-COLOR: #333333;
    --TZT-PLAYLIST-HOVER: #e0e0e0;
    --TZT-PLAYLIST-ACTIVE: #4c4c4c;
}

/* 深色主题 */
body[shoutu-theme="dark"] {
    --TZT-BG-0: #1a1a1a;
    --TZT-BG-1: #242424;
    --TZT-BG-2: #2a2a2a;
    --TZT-BG-3: #333333;
    --TZT-BG-4: #404040;
    --TZT-BG-5: #2c2c2c;
    --TZT-FG: #e0e0e0;
    --TZT-FG-0: rgba(224, 224, 224, 0.9);
    --TZT-FG-1: rgba(224, 224, 224, 0.7);
    --TZT-FG-2: rgba(224, 224, 224, 0.5);
    --TZT-FG-3: rgba(224, 224, 224, 0.3);
    --TZT-FG-4: rgba(224, 224, 224, 0.15);
    
    /* 深色主题按钮和标签颜色 */
    --TZT-BTN-BG: #404040;
    --TZT-BTN-COLOR: #e0e0e0;
    --TZT-TAG-BG: #333333;
    --TZT-TAG-COLOR: #e0e0e0;
    --TZT-PLAYLIST-BG: #242424;
    --TZT-PLAYLIST-COLOR: #e0e0e0;
    --TZT-PLAYLIST-HOVER: #333333;
    --TZT-PLAYLIST-ACTIVE: #404040;
}

/* 蓝色主题 */
body[shoutu-theme="blue"] {
    --TZT-BG-0: #e8f1f8;
    --TZT-BG-1: #f0f7fc;
    --TZT-BG-2: #ffffff;
    --TZT-BG-3: #e8f1f8;
    --TZT-BG-4: #2c5282;
    --TZT-BG-5: #ffffff;
    --TZT-FG: #2a4365;
    --TZT-FG-0: rgba(42, 67, 101, 0.9);
    --TZT-FG-1: rgba(42, 67, 101, 0.7);
    --TZT-FG-2: rgba(42, 67, 101, 0.5);
    --TZT-FG-3: rgba(42, 67, 101, 0.3);
    --TZT-FG-4: rgba(42, 67, 101, 0.15);
    
    /* 蓝色主题按钮和标签颜色 */
    --TZT-BTN-BG: #2c5282;
    --TZT-BTN-COLOR: #ffffff;
    --TZT-TAG-BG: #e8f1f8;
    --TZT-TAG-COLOR: #2a4365;
    --TZT-PLAYLIST-BG: #f0f7fc;
    --TZT-PLAYLIST-COLOR: #2a4365;
    --TZT-PLAYLIST-HOVER: #e8f1f8;
    --TZT-PLAYLIST-ACTIVE: #2c5282;
}

/* 绿色主题 */
body[shoutu-theme="green"] {
    --TZT-BG-0: #e8f5e9;
    --TZT-BG-1: #f1f8f1;
    --TZT-BG-2: #ffffff;
    --TZT-BG-3: #e8f5e9;
    --TZT-BG-4: #2e7d32;
    --TZT-BG-5: #ffffff;
    --TZT-FG: #1b5e20;
    --TZT-FG-0: rgba(27, 94, 32, 0.9);
    --TZT-FG-1: rgba(27, 94, 32, 0.7);
    --TZT-FG-2: rgba(27, 94, 32, 0.5);
    --TZT-FG-3: rgba(27, 94, 32, 0.3);
    --TZT-FG-4: rgba(27, 94, 32, 0.15);
    
    /* 绿色主题按钮和标签颜色 */
    --TZT-BTN-BG: #2e7d32;
    --TZT-BTN-COLOR: #ffffff;
    --TZT-TAG-BG: #e8f5e9;
    --TZT-TAG-COLOR: #1b5e20;
    --TZT-PLAYLIST-BG: #f1f8f1;
    --TZT-PLAYLIST-COLOR: #1b5e20;
    --TZT-PLAYLIST-HOVER: #e8f5e9;
    --TZT-PLAYLIST-ACTIVE: #2e7d32;
}

/* 暖色主题 */
body[shoutu-theme="warm"] {
    --TZT-BG-0: #fff5f5;
    --TZT-BG-1: #faf0f0;
    --TZT-BG-2: #ffffff;
    --TZT-BG-3: #fff5f5;
    --TZT-BG-4: #c53030;
    --TZT-BG-5: #ffffff;
    --TZT-FG: #742a2a;
    --TZT-FG-0: rgba(116, 42, 42, 0.9);
    --TZT-FG-1: rgba(116, 42, 42, 0.7);
    --TZT-FG-2: rgba(116, 42, 42, 0.5);
    --TZT-FG-3: rgba(116, 42, 42, 0.3);
    --TZT-FG-4: rgba(116, 42, 42, 0.15);
    
    /* 暖色主题按钮和标签颜色 */
    --TZT-BTN-BG: #c53030;
    --TZT-BTN-COLOR: #ffffff;
    --TZT-TAG-BG: #fff5f5;
    --TZT-TAG-COLOR: #742a2a;
    --TZT-PLAYLIST-BG: #faf0f0;
    --TZT-PLAYLIST-COLOR: #742a2a;
    --TZT-PLAYLIST-HOVER: #fff5f5;
    --TZT-PLAYLIST-ACTIVE: #c53030;
}

/* 组件样式 */
/* 立即播放按钮样式 */
.btn-main {
    background-color: var(--TZT-BTN-BG) !important;
    color: var(--TZT-BTN-COLOR) !important;
}

/* 标签样式 */
.tag-list li a {
    background-color: var(--TZT-TAG-BG) !important;
    color: var(--TZT-TAG-COLOR) !important;
}

/* 播放列表样式 */
.shoutu-playlist li a {
    background-color: var(--TZT-PLAYLIST-BG) !important;
    color: var(--TZT-PLAYLIST-COLOR) !important;
}

.shoutu-playlist li a:hover {
    background-color: var(--TZT-PLAYLIST-HOVER) !important;
}

.shoutu-playlist li.active a {
    background-color: var(--TZT-PLAYLIST-ACTIVE) !important;
    color: var(--TZT-BTN-COLOR) !important;
}