/* ========== 模式切换样式 - 默认模式保持原版czw_Dh不做修改 ========== */

/* 夜晚模式变量 */
:root.night-mode {
    --bg-body: #1a202c;
    --bg-card: #2d3748;
    --text-main: #f7fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e0;
    --text-quaternary: #94a3b8;
    --border-color: #4a5568;
    --border-light: #374151;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-hover: rgba(99, 179, 237, 0.2);
    --primary-color: #63b3ed;
    --primary-hover: #90cdf4;
    --accent-color: #f6ad55;
    --bg-interactive: #273449;
}

/* 护眼模式变量 */
:root.eye-care-mode {
    --bg-body: #f0f8f0;
    --bg-card: #ffffff;
    --text-main: #2d3748;
    --text-secondary: #2f855a;
    --text-tertiary: #48bb78;
    --text-quaternary: #718096;
    --border-color: #c6f6d5;
    --border-light: #eaf6ea;
    --shadow-color: rgba(47, 133, 90, 0.08);
    --shadow-hover: rgba(47, 133, 90, 0.15);
    --primary-color: #2f855a;
    --primary-hover: #38a169;
    --accent-color: #f6e05e;
    --bg-interactive: #e6fffa;
}

/* ========== 夜晚模式样式覆盖 ========== */
:root.night-mode body {
    background-color: var(--bg-body);
    color: var(--text-main);
}

:root.night-mode .top-nav,
:root.night-mode .navbar,
:root.night-mode .navbar-inner {
    background-color: var(--bg-card);
    box-shadow: 0 2px 8px var(--shadow-color);
}

:root.night-mode .custom-nav {
    background-color: transparent;
}

:root.night-mode .custom-nav-item > ul,
:root.night-mode .custom-nav-item > dl.custom-nav-child {
    background-color: var(--bg-card);
    box-shadow: 0 4px 12px var(--shadow-color);
}

:root.night-mode .mobile-menu-btn {
    color: var(--primary-color);
}

:root.night-mode .logo,
:root.night-mode .logotext {
    color: var(--text-main);
}

:root.night-mode .logotext span {
    color: var(--accent-color);
}

:root.night-mode .search-input-wrapper {
    background: rgba(45, 55, 72, 0.95);
}

:root.night-mode .line-form-input {
    color: var(--text-main);
}

:root.night-mode .scale-placeholder {
    color: var(--text-tertiary);
}

:root.night-mode .article-card,
:root.night-mode .zone-latest-articles,
:root.night-mode .resource-card,
:root.night-mode .zone-card,
:root.night-mode .link-b,
:root.night-mode .widget {
    background-color: var(--bg-card);
    box-shadow: 0 2px 8px var(--shadow-color);
}

:root.night-mode .article-card h2,
:root.night-mode .zone-latest-title,
:root.night-mode .resource-card h3,
:root.night-mode .link-name {
    color: var(--primary-color);
}

:root.night-mode .resource-card h3 a {
    color: var(--primary-color);
    text-decoration: none;
}

:root.night-mode .resource-card h3 a:hover {
    text-decoration: underline;
}

:root.night-mode .article-link,
:root.night-mode .zone-latest-link,
:root.night-mode .resource-card p,
:root.night-mode .link-right p {
    color: var(--text-secondary);
}

:root.night-mode .article-link:hover,
:root.night-mode .zone-latest-link:hover {
    color: var(--primary-color);
}

:root.night-mode .tag-showcase-btn {
    background-color: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

:root.night-mode .tag-showcase-btn:hover {
    background-color: var(--bg-interactive);
    color: var(--primary-color);
}

:root.night-mode .custom-nav-item > a,
:root.night-mode .nav-link {
    color: var(--text-secondary);
}

:root.night-mode .custom-nav-item > a:hover,
:root.night-mode .nav-link:hover {
    color: var(--primary-color);
    background-color: var(--bg-interactive);
}

:root.night-mode .custom-nav-child,
:root.night-mode .mobile-sidebar-nav {
    background-color: var(--bg-card);
    box-shadow: 0 4px 12px var(--shadow-color);
}

:root.night-mode .custom-nav-child > dd > a,
:root.night-mode .custom-nav > li > ul > li > a {
    color: var(--text-secondary);
}

:root.night-mode .custom-nav-child > dd > a:hover,
:root.night-mode .custom-nav > li > ul > li > a:hover {
    background-color: var(--bg-interactive);
    color: var(--primary-color);
}

:root.night-mode .nav-link.active {
    color: #fff;
    background-color: var(--primary-color);
}

:root.night-mode .zone-card {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    border-color: var(--border-color);
}

:root.night-mode .zone-card:hover {
    background: linear-gradient(135deg, var(--gradient-end) 0%, var(--gradient-start) 100%);
}

:root.night-mode .zone-card a {
    color: var(--primary-color);
}

:root.night-mode .zone-card-icon,
:root.night-mode .zone-card-text {
    color: var(--primary-color);
}

:root.night-mode .links-section > div {
    background-color: var(--bg-card);
    box-shadow: 0 2px 8px var(--shadow-color);
}

:root.night-mode .links-section a {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

:root.night-mode .links-section a:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px var(--shadow-color);
}

:root.night-mode .links-section a span:first-of-type {
    color: var(--text-secondary);
}

:root.night-mode .links-section a span:last-child {
    background: rgba(39, 52, 73, 0.5);
}

:root.night-mode .links-section .no-links {
    color: var(--text-quaternary);
}

:root.night-mode .comment,
:root.night-mode .comment-infos {
    border-bottom-color: var(--border-color);
}

:root.night-mode .comment-infos {
    background-color: var(--bg-card);
}

:root.night-mode .comment-post input,
:root.night-mode .comment-post #comment {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}

:root.night-mode footer {
    color: var(--text-tertiary);
}

:root.night-mode footer a {
    color: var(--primary-color);
}

:root.night-mode #word {
    background: rgba(45, 55, 72, 0.95);
    box-shadow: 0 2px 8px var(--shadow-color);
}

:root.night-mode #word > .keylist {
    color: var(--text-secondary);
}

:root.night-mode #word .keylist:hover,
:root.night-mode .selected {
    background-color: var(--bg-interactive);
    color: var(--primary-color);
}

/* ========== 护眼模式样式覆盖 ========== */
:root.eye-care-mode body {
    background-color: var(--bg-body);
    color: var(--text-main);
}

:root.eye-care-mode .top-nav,
:root.eye-care-mode .navbar,
:root.eye-care-mode .navbar-inner {
    background-color: var(--bg-card);
    box-shadow: 0 2px 8px var(--shadow-color);
}

:root.eye-care-mode .custom-nav {
    background-color: transparent;
}

:root.eye-care-mode .custom-nav-item > ul,
:root.eye-care-mode .custom-nav-item > dl.custom-nav-child {
    background-color: var(--bg-card);
    box-shadow: 0 4px 12px var(--shadow-color);
}

:root.eye-care-mode .mobile-menu-btn {
    color: var(--primary-color);
}

:root.eye-care-mode .logo,
:root.eye-care-mode .logotext {
    color: var(--text-main);
}

:root.eye-care-mode .logotext span {
    color: var(--accent-color);
}

:root.eye-care-mode .search-input-wrapper {
    background: rgba(255, 255, 255, 0.95);
}

:root.eye-care-mode .line-form-input {
    color: var(--text-main);
}

:root.eye-care-mode .scale-placeholder {
    color: var(--text-tertiary);
}

:root.eye-care-mode .article-card,
:root.eye-care-mode .zone-latest-articles,
:root.eye-care-mode .resource-card,
:root.eye-care-mode .zone-card,
:root.eye-care-mode .link-b,
:root.eye-care-mode .widget {
    background-color: var(--bg-card);
    box-shadow: 0 2px 8px var(--shadow-color);
}

:root.eye-care-mode .article-card h2,
:root.eye-care-mode .zone-latest-title,
:root.eye-care-mode .resource-card h3,
:root.eye-care-mode .link-name {
    color: var(--primary-color);
}

:root.eye-care-mode .resource-card h3 a {
    color: var(--primary-color);
    text-decoration: none;
}

:root.eye-care-mode .resource-card h3 a:hover {
    text-decoration: underline;
}

:root.eye-care-mode .article-link,
:root.eye-care-mode .zone-latest-link,
:root.eye-care-mode .resource-card p,
:root.eye-care-mode .link-right p {
    color: var(--text-secondary);
}

:root.eye-care-mode .article-link:hover,
:root.eye-care-mode .zone-latest-link:hover {
    color: var(--primary-color);
}

:root.eye-care-mode .tag-showcase-btn {
    background-color: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

:root.eye-care-mode .tag-showcase-btn:hover {
    background-color: var(--bg-interactive);
    color: var(--primary-color);
}

:root.eye-care-mode .custom-nav-item > a,
:root.eye-care-mode .nav-link {
    color: var(--text-secondary);
}

:root.eye-care-mode .custom-nav-item > a:hover,
:root.eye-care-mode .nav-link:hover {
    color: var(--primary-color);
    background-color: var(--bg-interactive);
}

:root.eye-care-mode .custom-nav-child,
:root.eye-care-mode .mobile-sidebar-nav {
    background-color: var(--bg-card);
    box-shadow: 0 4px 12px var(--shadow-color);
}

:root.eye-care-mode .custom-nav-child > dd > a,
:root.eye-care-mode .custom-nav > li > ul > li > a {
    color: var(--text-secondary);
}

:root.eye-care-mode .custom-nav-child > dd > a:hover,
:root.eye-care-mode .custom-nav > li > ul > li > a:hover {
    background-color: var(--bg-interactive);
    color: var(--primary-color);
}

:root.eye-care-mode .nav-link.active {
    color: #fff;
    background-color: var(--primary-color);
}

:root.eye-care-mode .zone-card {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    border-color: var(--border-color);
}

:root.eye-care-mode .zone-card:hover {
    background: linear-gradient(135deg, var(--gradient-end) 0%, var(--gradient-start) 100%);
}

:root.eye-care-mode .zone-card a {
    color: var(--primary-color);
}

:root.eye-care-mode .zone-card-icon,
:root.eye-care-mode .zone-card-text {
    color: var(--primary-color);
}

:root.eye-care-mode .links-section > div {
    background-color: var(--bg-card);
    box-shadow: 0 2px 8px var(--shadow-color);
}

:root.eye-care-mode .links-section a {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

:root.eye-care-mode .links-section a:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px var(--shadow-color);
}

:root.eye-care-mode .links-section a span:first-of-type {
    color: var(--text-secondary);
}

:root.eye-care-mode .links-section a span:last-child {
    background: rgba(230, 255, 250, 0.5);
}

:root.eye-care-mode .links-section .no-links {
    color: var(--text-quaternary);
}

:root.eye-care-mode .comment,
:root.eye-care-mode .comment-infos {
    border-bottom-color: var(--border-color);
}

:root.eye-care-mode .comment-infos {
    background-color: var(--bg-card);
}

:root.eye-care-mode .comment-post input,
:root.eye-care-mode .comment-post #comment {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}

:root.eye-care-mode footer {
    color: var(--text-tertiary);
}

:root.eye-care-mode footer a {
    color: var(--primary-color);
}

:root.eye-care-mode #word {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px var(--shadow-color);
}

:root.eye-care-mode #word > .keylist {
    color: var(--text-secondary);
}

:root.eye-care-mode #word .keylist:hover,
:root.eye-care-mode .selected {
    background-color: var(--bg-interactive);
    color: var(--primary-color);
}

/* ========== 护眼模式 - 资源列表和最新文章蓝色元素修复 ========== */
:root.eye-care-mode .resource-card .tag,
:root.eye-care-mode .resource-card .tags,
:root.eye-care-mode .resource-card .badge,
:root.eye-care-mode .zone-latest-articles .zone-latest-title span,
:root.eye-care-mode .zone-latest-articles .more-btn {
    color: var(--primary-color);
}

:root.eye-care-mode .resource-card .tag:hover,
:root.eye-care-mode .resource-card .tags:hover,
:root.eye-care-mode .zone-latest-articles .more-btn:hover {
    color: var(--primary-hover);
    text-decoration: none;
}

/* 护眼模式 - 资源列表标签 hover 样式修复 */
:root.eye-care-mode .resource-card .tag:hover {
    background-color: var(--primary-color);
    color: #fff;
}

:root.eye-care-mode .resource-card .tags:hover {
    background-color: var(--primary-color);
    color: #fff;
}

/* 护眼模式 - 榜单序号颜色修复 */
:root.eye-care-mode .article-item::before {
    background-color: var(--primary-color);
}

/* 最新文章板块文章项 hover 背景色修复 */
.zone-latest-item:hover {
    background-color: #ebf8ff;
}

:root.eye-care-mode .zone-latest-item:hover {
    background-color: #f0fff4;
}

:root.night-mode .zone-latest-item:hover {
    background-color: #2a4365;
}

/* 护眼模式 - 资源列表卡片边框色修复 */
:root.eye-care-mode .resource-card::before {
    background: linear-gradient(
        45deg, 
        transparent 0%, 
        rgba(47, 133, 90, 0.2) 25%, 
        rgba(47, 133, 90, 0.9) 50%, 
        rgba(47, 133, 90, 0.2) 75%, 
        transparent 100%
    ) border-box;
}

/* 护眼模式 - 标识背景色修复 */
:root.eye-care-mode .resource-card .badge {
    background-color: var(--primary-color);
    color: #fff;
}

:root.eye-care-mode .resource-card .badge:hover {
    background-color: var(--primary-hover);
}

/* 护眼模式 - 最新文章板块查看更多按钮样式修复 */
:root.eye-care-mode .zone-latest-articles .more-btn {
    border-color: var(--primary-color);
}

:root.eye-care-mode .zone-latest-articles .more-btn:hover {
    border-color: var(--primary-hover);
    background-color: var(--primary-hover);
    color: #fff;
}

/* ========== 模式切换开关样式 ========== */
.mode-switch-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 15px;
    border-left: 1px solid #e2e8f0;
    margin-left: 10px;
}

.mode-label {
    font-size: 14px;
    color: #4a5568;
    white-space: nowrap;
}

.mode-switch {
    display: flex;
    align-items: center;
    background: #f5f7fa;
    border-radius: 20px;
    padding: 4px;
    position: relative;
}

.mode-switch-btn {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: #4a5568;
    font-size: 12px;
    cursor: pointer;
    border-radius: 16px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.mode-switch-btn:hover {
    color: #2b6cb0;
}

.mode-switch-btn.active {
    background: #2b6cb0;
    color: #fff;
}

/* 夜晚模式下的切换开关样式 */
:root.night-mode .mode-switch-container {
    border-left-color: var(--border-color);
}

:root.night-mode .mode-label {
    color: var(--text-secondary);
}

:root.night-mode .mode-switch {
    background: var(--bg-interactive);
}

:root.night-mode .mode-switch-btn {
    color: var(--text-secondary);
}

:root.night-mode .mode-switch-btn:hover {
    color: var(--primary-color);
}

:root.night-mode .mode-switch-btn.active {
    background: var(--primary-color);
    color: #fff;
}

/* 护眼模式下的切换开关样式 */
:root.eye-care-mode .mode-switch-container {
    border-left-color: var(--border-color);
}

:root.eye-care-mode .mode-label {
    color: var(--text-secondary);
}

:root.eye-care-mode .mode-switch {
    background: var(--bg-interactive);
}

:root.eye-care-mode .mode-switch-btn {
    color: var(--text-secondary);
}

:root.eye-care-mode .mode-switch-btn:hover {
    color: var(--primary-color);
}

:root.eye-care-mode .mode-switch-btn.active {
    background: var(--primary-color);
    color: #fff;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .mode-label {
        display: none;
    }
    
    .mode-switch-btn {
        padding: 5px 8px;
        font-size: 11px;
    }
}