/* 主题配色样式 */
/* ========== 主题颜色适配 - 通用元素样式 ========== */

/* 主题颜色适配 - 为每个主题添加section a:hover背景颜色 */
[data-theme-color="classic"] section a:hover {
    background: rgb(32, 159, 233);
}

[data-theme-color="pink"] section a:hover {
    background: #ec407a;
}

[data-theme-color="blue"] section a:hover {
    background: #2196f3;
}

[data-theme-color="green"] section a:hover {
    background: #4caf50;
}

[data-theme-color="gray"] section a:hover {
    background: #607d8b;
}

[data-theme-color="yellow"] section a:hover {
    background: #ffb300;
}

/* 主题颜色适配 - 为每个主题添加footer链接颜色 */
[data-theme-color="classic"] footer a {
    color: #4a6cf7;
}

[data-theme-color="classic"] footer a:hover {
    color: rgb(32, 159, 233);
}

[data-theme-color="pink"] footer a {
    color: #ff80ab;
}

[data-theme-color="pink"] footer a:hover {
    color: #ec407a;
}

[data-theme-color="blue"] footer a {
    color: #82b1ff;
}

[data-theme-color="blue"] footer a:hover {
    color: #2196f3;
}

[data-theme-color="green"] footer a {
    color: #81c784;
}

[data-theme-color="green"] footer a:hover {
    color: #4caf50;
}

[data-theme-color="gray"] footer a {
    color: #90a4ae;
}

[data-theme-color="gray"] footer a:hover {
    color: #607d8b;
}

[data-theme-color="yellow"] footer a {
    color: #ffd54f;
}

[data-theme-color="yellow"] footer a:hover {
    color: #ffb300;
}

/* 主题颜色适配 - 为每个主题添加footer标题下划线颜色 */
[data-theme-color="classic"] .link-group h3::after {
    background-color: rgb(32, 159, 233);
}

[data-theme-color="pink"] .link-group h3::after {
    background-color: #ec407a;
}

[data-theme-color="blue"] .link-group h3::after {
    background-color: #2196f3;
}

[data-theme-color="green"] .link-group h3::after {
    background-color: #4caf50;
}

[data-theme-color="gray"] .link-group h3::after {
    background-color: #607d8b;
}

[data-theme-color="yellow"] .link-group h3::after {
    background-color: #ffb300;
}

/* ========== 主题配色样式 - 按主题分组 ========== */

/* 经典主题 */
[data-theme-color="classic"] #text-logo {
    color: #27D5CB;
    text-shadow: 3px 3px 5px #86ceca;
}

[data-theme-color="classic"] .navbar a:hover {
    color: rgb(32, 159, 233);
}

[data-theme-color="classic"] .navbar a::after {
    background-color: rgb(32, 159, 233);
}

/* 为默认添加更多链接的hover细线样式 */
[data-theme-color="classic"] .more a:hover::after {
    background-color: rgb(32, 159, 233);
}

/* 为默认主题添加text-logo a:hover样式 */
[data-theme-color="classic"] #text-logo a:hover {
    transform: scale(1.05);
    color: rgb(32, 159, 233);
    text-shadow: 0 2px 4px rgba(32, 159, 233, 0.4);
}

/* 粉色主题 */
[data-theme-color="pink"] #text-logo {
    color: #ff80ab;
    text-shadow: 3px 3px 5px #ffab91;
}

[data-theme-color="pink"] .navbar a:hover {
    color: #ec407a;
}

[data-theme-color="pink"] .navbar a::after {
    background-color: #ec407a;
}

/* 为粉色主题添加更多链接的hover细线样式 */
[data-theme-color="pink"] .more a:hover::after {
    background-color: #ec407a;
}

/* 为粉色主题添加text-logo a:hover样式 */
[data-theme-color="pink"] #text-logo a:hover {
    transform: scale(1.05);
    color: #ec407a;
    text-shadow: 0 2px 4px rgba(236, 64, 122, 0.4);
}

/* 为粉色主题添加droplist链接hover背景色 */
[data-theme-color="pink"] .droplist a:hover {
    background-color: rgba(236, 64, 122, 0.1);
}

/* 蓝色主题 */
[data-theme-color="blue"] #text-logo {
    color: #82b1ff;
    text-shadow: 3px 3px 5px #81d4fa;
}

[data-theme-color="blue"] .navbar a:hover {
    color: #2196f3;
}

[data-theme-color="blue"] .navbar a::after {
    background-color: #2196f3;
}

/* 为蓝色主题添加更多链接的hover细线样式 */
[data-theme-color="blue"] .more a:hover::after {
    background-color: #2196f3;
}

/* 为蓝色主题添加text-logo a:hover样式 */
[data-theme-color="blue"] #text-logo a:hover {
    transform: scale(1.05);
    color: #2196f3;
    text-shadow: 0 2px 4px rgba(33, 150, 243, 0.4);
}

/* 为蓝色主题添加droplist链接hover背景色 */
[data-theme-color="blue"] .droplist a:hover {
    background-color: rgba(33, 150, 243, 0.1);
}

/* 绿色主题 */
[data-theme-color="green"] #text-logo {
    color: #81c784;
    text-shadow: 3px 3px 5px #a5d6a7;
}

[data-theme-color="green"] .navbar a:hover {
    color: #4caf50;
}

[data-theme-color="green"] .navbar a::after {
    background-color: #4caf50;
}

/* 为绿色主题添加更多链接的hover细线样式 */
[data-theme-color="green"] .more a:hover::after {
    background-color: #4caf50;
}

/* 为绿色主题添加text-logo a:hover样式 */
[data-theme-color="green"] #text-logo a:hover {
    transform: scale(1.05);
    color: #4caf50;
    text-shadow: 0 2px 4px rgba(76, 175, 80, 0.4);
}

/* 为绿色主题添加droplist链接hover背景色 */
[data-theme-color="green"] .droplist a:hover {
    background-color: rgba(76, 175, 80, 0.1);
}

/* 灰色主题 */
[data-theme-color="gray"] #text-logo {
    color: #90a4ae;
    text-shadow: 3px 3px 5px #b0bec5;
}

[data-theme-color="gray"] .navbar a:hover {
    color: #607d8b;
}

[data-theme-color="gray"] .navbar a::after {
    background-color: #607d8b;
}

/* 为灰色主题添加更多链接的hover细线样式 */
[data-theme-color="gray"] .more a:hover::after {
    background-color: #607d8b;
}

/* 为灰色主题添加text-logo a:hover样式 */
[data-theme-color="gray"] #text-logo a:hover {
    transform: scale(1.05);
    color: #607d8b;
    text-shadow: 0 2px 4px rgba(96, 125, 139, 0.4);
}

/* 为灰色主题添加droplist链接hover背景色 */
[data-theme-color="gray"] .droplist a:hover {
    background-color: rgba(96, 125, 139, 0.1);
}

/* 黄色主题 */
[data-theme-color="yellow"] #text-logo {
    color: #ffd54f;
    text-shadow: 3px 3px 5px #ffecb3;
}

[data-theme-color="yellow"] .navbar a:hover {
    color: #ffb300;
}

[data-theme-color="yellow"] .navbar a::after {
    background-color: #ffb300;
}

/* 为黄色主题添加更多链接的hover细线样式 */
[data-theme-color="yellow"] .more a:hover::after {
    background-color: #ffb300;
}

/* 为黄色主题添加text-logo a:hover样式 */
[data-theme-color="yellow"] #text-logo a:hover {
    transform: scale(1.05);
    color: #ffb300;
    text-shadow: 0 2px 4px rgba(255, 179, 0, 0.4);
}

/* 为黄色主题添加droplist链接hover背景色 */
[data-theme-color="yellow"] .droplist a:hover {
    background-color: rgba(255, 179, 0, 0.1);
}

/* ========== 主题选择器样式 ========== */

/* 主题按钮选中状态样式 - 增加选择器特异性以确保优先级 */
.settings-option.theme-option.theme-classic.selected {
    background-color: #27D5CB;
    color: white !important;
}

.settings-option.theme-option.theme-pink.selected {
    background-color: #ec407a;
    color: white !important;
}

.settings-option.theme-option.theme-blue.selected {
    background-color: #2196f3;
    color: white !important;
}

.settings-option.theme-option.theme-green.selected {
    background-color: #4caf50;
    color: white !important;
}

.settings-option.theme-option.theme-gray.selected {
    background-color: #607d8b;
    color: white !important;
}

.settings-option.theme-option.theme-yellow.selected {
    background-color: #ffb300;
    color: white !important;
}

/* 主题按钮禁用状态样式 */
.theme-option:disabled,
.theme-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 确保已添加设置选项选中状态的样式 */
.settings-option.selected {
    background-color: #6e6e6e;
    color: white;
    border-color: #6e6e6e;
}

/* 弹窗选项选中状态 - 主题配色 */
[data-theme-color="classic"] .popup-option.selected {
    background-color: rgb(32, 159, 233);
    color: white;
    border-color: rgb(32, 159, 233);
}

[data-theme-color="pink"] .popup-option.selected {
    background-color: #ec407a;
    color: white;
    border-color: #ec407a;
}

[data-theme-color="blue"] .popup-option.selected {
    background-color: #2196f3;
    color: white;
    border-color: #2196f3;
}

[data-theme-color="green"] .popup-option.selected {
    background-color: #4caf50;
    color: white;
    border-color: #4caf50;
}

[data-theme-color="gray"] .popup-option.selected {
    background-color: #607d8b;
    color: white;
    border-color: #607d8b;
}

[data-theme-color="yellow"] .popup-option.selected {
    background-color: #ffb300;
    color: white;
    border-color: #ffb300;
}

/* ========== 主题配色扩展 - 按钮样式支持 ========== */

/* 经典主题 - 按钮样式 */
[data-theme-color="classic"] .settings-button,
[data-theme-color="classic"] .btnbacktop {
    background-color: rgba(32, 159, 233, 0.2);
    border-color: rgba(32, 159, 233, 0.3);
    color: rgb(32, 159, 233);
}

[data-theme-color="classic"] .settings-button:hover,
[data-theme-color="classic"] .btnbacktop:hover {
    background-color: rgba(32, 159, 233, 0.3);
    border-color: rgba(32, 159, 233, 0.5);
    color: rgb(32, 159, 233);
}

/* 粉色主题 - 按钮样式 */
[data-theme-color="pink"] .settings-button,
[data-theme-color="pink"] .btnbacktop {
    background-color: rgba(236, 64, 122, 0.2);
    border-color: rgba(236, 64, 122, 0.3);
    color: #ec407a;
}

[data-theme-color="pink"] .settings-button:hover,
[data-theme-color="pink"] .btnbacktop:hover {
    background-color: rgba(236, 64, 122, 0.3);
    border-color: rgba(236, 64, 122, 0.5);
    color: #ec407a;
}

/* 蓝色主题 - 按钮样式 */
[data-theme-color="blue"] .settings-button,
[data-theme-color="blue"] .btnbacktop {
    background-color: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.3);
    color: #2196f3;
}

[data-theme-color="blue"] .settings-button:hover,
[data-theme-color="blue"] .btnbacktop:hover {
    background-color: rgba(33, 150, 243, 0.3);
    border-color: rgba(33, 150, 243, 0.5);
    color: #2196f3;
}

/* 绿色主题 - 按钮样式 */
[data-theme-color="green"] .settings-button,
[data-theme-color="green"] .btnbacktop {
    background-color: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.3);
    color: #4caf50;
}

[data-theme-color="green"] .settings-button:hover,
[data-theme-color="green"] .btnbacktop:hover {
    background-color: rgba(76, 175, 80, 0.3);
    border-color: rgba(76, 175, 80, 0.5);
    color: #4caf50;
}

/* 灰色主题 - 按钮样式 */
[data-theme-color="gray"] .settings-button,
[data-theme-color="gray"] .btnbacktop {
    background-color: rgba(96, 125, 139, 0.2);
    border-color: rgba(96, 125, 139, 0.3);
    color: #607d8b;
}

[data-theme-color="gray"] .settings-button:hover,
[data-theme-color="gray"] .btnbacktop:hover {
    background-color: rgba(96, 125, 139, 0.3);
    border-color: rgba(96, 125, 139, 0.5);
    color: #607d8b;
}

/* 黄色主题 - 按钮样式 */
[data-theme-color="yellow"] .settings-button,
[data-theme-color="yellow"] .btnbacktop {
    background-color: rgba(255, 179, 0, 0.2);
    border-color: rgba(255, 179, 0, 0.3);
    color: #ffb300;
}

[data-theme-color="yellow"] .settings-button:hover,
[data-theme-color="yellow"] .btnbacktop:hover {
    background-color: rgba(255, 179, 0, 0.3);
    border-color: rgba(255, 179, 0, 0.5);
    color: #ffb300;
}

/* ========== 主题配色扩展 - 滚动选项按钮样式 ========== */

/* 滚动选项按钮选中状态 - 主题配色 */
[data-theme-color="classic"] .scroll-option.selected {
    background-color: rgb(32, 159, 233);
    color: white;
    border-color: rgb(32, 159, 233);
}

[data-theme-color="pink"] .scroll-option.selected {
    background-color: #ec407a;
    color: white;
    border-color: #ec407a;
}

[data-theme-color="blue"] .scroll-option.selected {
    background-color: #2196f3;
    color: white;
    border-color: #2196f3;
}

[data-theme-color="green"] .scroll-option.selected {
    background-color: #4caf50;
    color: white;
    border-color: #4caf50;
}

[data-theme-color="gray"] .scroll-option.selected {
    background-color: #607d8b;
    color: white;
    border-color: #607d8b;
}

[data-theme-color="yellow"] .scroll-option.selected {
    background-color: #ffb300;
    color: white;
    border-color: #ffb300;
}

/* 滚动选项按钮普通状态 - 主题配色 */
[data-theme-color="classic"] .scroll-option {
    background-color: rgba(32, 159, 233, 0.1);
    color: rgb(32, 159, 233);
    border-color: rgba(32, 159, 233, 0.3);
}

[data-theme-color="pink"] .scroll-option {
    background-color: rgba(236, 64, 122, 0.1);
    /* #ec407a with 0.1 opacity */
    color: #ec407a;
    border-color: rgba(236, 64, 122, 0.3);
}

[data-theme-color="blue"] .scroll-option {
    background-color: rgba(33, 150, 243, 0.1);
    /* #2196f3 with 0.1 opacity */
    color: #2196f3;
    border-color: rgba(33, 150, 243, 0.3);
}

[data-theme-color="green"] .scroll-option {
    background-color: rgba(76, 175, 80, 0.1);
    /* #4caf50 with 0.1 opacity */
    color: #4caf50;
    border-color: rgba(76, 175, 80, 0.3);
}

[data-theme-color="gray"] .scroll-option {
    background-color: rgba(96, 125, 139, 0.1);
    /* #607d8b with 0.1 opacity */
    color: #607d8b;
    border-color: rgba(96, 125, 139, 0.3);
}

[data-theme-color="yellow"] .scroll-option {
    background-color: rgba(255, 179, 0, 0.1);
    /* #ffb300 with 0.1 opacity */
    color: #ffb300;
    border-color: rgba(255, 179, 0, 0.3);
}

/* 滚动选项按钮悬停状态 - 主题配色 */
[data-theme-color="classic"] .scroll-option:hover {
    background-color: rgba(32, 159, 233, 0.2);
    border-color: rgba(32, 159, 233, 0.5);
}

[data-theme-color="pink"] .scroll-option:hover {
    background-color: rgba(236, 64, 122, 0.2);
    border-color: rgba(236, 64, 122, 0.5);
}

[data-theme-color="blue"] .scroll-option:hover {
    background-color: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.5);
}

[data-theme-color="green"] .scroll-option:hover {
    background-color: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.5);
}

[data-theme-color="gray"] .scroll-option:hover {
    background-color: rgba(96, 125, 139, 0.2);
    border-color: rgba(96, 125, 139, 0.5);
}

[data-theme-color="yellow"] .scroll-option:hover {
    background-color: rgba(255, 179, 0, 0.2);
    border-color: rgba(255, 179, 0, 0.5);
}