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

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

/* 护眼模式变量 - 改为米色系 */
:root.eye-care-mode {
    --primary-color: #8b7d6b; /* 米色系主色调 */
    --primary-hover: #a6967c; /* 主色调hover效果 */
    --accent-color: #e6d7b9; /* 辅助色 */
    --bg-body: #f9f6ed; /* 页面背景-浅米色 */
    --bg-card: #fffbf5; /* 卡片背景-极浅米色 */
    --text-main: #4a4032; /* 主要文字-深棕色 */
    --text-secondary: #7a6c58; /* 次要文字-中棕色 */
    --text-tertiary: #9a8c78; /* 三级文字-浅棕色 */
    --text-quaternary: #b0a18c; /* 四级文字-更浅棕色 */
    --bg-interactive: #f2eedf; /* 交互背景-米色 */
    --border-color: #e6d9c0; /* 边框色 */
    --border-light: #f0e9d8; /* 浅色边框 */
    --shadow-color: rgba(139, 125, 107, 0.08); /* 阴影色 */
    --shadow-hover: rgba(139, 125, 107, 0.15); /* hover阴影 */
    --shadow-mobile: rgba(139, 125, 107, 0.12); /* 移动端阴影 */
    --gradient-start: #f2eedf; /* 渐变开始 */
    --gradient-end: #f9f6ed; /* 渐变结束 */
}

/* ========== 文章详情页样式 - 夜晚模式 ========== */
:root.night-mode .article-content {
    background-color: var(--bg-card);
    box-shadow: 0 2px 8px var(--shadow-color);
}

:root.night-mode .article-title {
    color: var(--text-main);
}

:root.night-mode .article-meta {
    border-bottom-color: var(--border-color);
    color: var(--text-tertiary);
}

:root.night-mode .meta-icon {
    color: var(--primary-color);
}

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

:root.night-mode .article-body h2,
:root.night-mode .article-body h3 {
    color: var(--text-main);
}

:root.night-mode .article-body p {
    color: var(--text-secondary);
}

:root.night-mode .article-body ul,
:root.night-mode .article-body ol {
    color: var(--text-secondary);
}

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

:root.night-mode .article-tags {
    border-top-color: var(--border-color);
    border-bottom-color: var(--border-color);
}

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

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

:root.night-mode .tag-item:hover {
    background-color: var(--primary-color);
    color: white;
}

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

:root.night-mode .comment-title {
    color: var(--text-main);
}

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

:root.night-mode .quick-reply-btn {
    background-color: var(--bg-interactive);
    color: var(--primary-color);
}

:root.night-mode .quick-reply-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

:root.night-mode .reply-option {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

:root.night-mode .reply-option:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--bg-interactive);
}

:root.night-mode .comment-submit-btn {
    background-color: var(--primary-color);
    color: white;
}

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

:root.night-mode .comment-list {
    border-top-color: var(--border-light);
}

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

:root.night-mode .comment-author {
    color: var(--text-main);
}

:root.night-mode .comment-time {
    color: var(--text-quaternary);
}

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

/* ========== 文章详情页样式 - 护眼模式 ========== */
:root.eye-care-mode .article-content {
    background-color: var(--bg-card);
    box-shadow: 0 2px 8px var(--shadow-color);
}

:root.eye-care-mode .article-title {
    color: var(--text-main);
}

:root.eye-care-mode .article-meta {
    border-bottom-color: var(--border-color);
    color: var(--text-tertiary);
}

:root.eye-care-mode .meta-icon {
    color: var(--primary-color);
}

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

:root.eye-care-mode .article-body h2,
:root.eye-care-mode .article-body h3 {
    color: var(--text-main);
}

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

:root.eye-care-mode .article-body ul,
:root.eye-care-mode .article-body ol {
    color: var(--text-secondary);
}

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

:root.eye-care-mode .article-tags {
    border-top-color: var(--border-color);
    border-bottom-color: var(--border-color);
}

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

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

:root.eye-care-mode .tag-item:hover {
    background-color: var(--primary-color);
    color: white;
}

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

:root.eye-care-mode .comment-title {
    color: var(--text-main);
}

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

:root.eye-care-mode .quick-reply-btn {
    background-color: var(--bg-interactive);
    color: var(--primary-color);
}

:root.eye-care-mode .quick-reply-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

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

:root.eye-care-mode .reply-option:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--bg-interactive);
}

:root.eye-care-mode .comment-submit-btn {
    background-color: var(--primary-color);
    color: white;
}

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

:root.eye-care-mode .comment-list {
    border-top-color: var(--border-light);
}

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

:root.eye-care-mode .comment-author {
    color: var(--text-main);
}

:root.eye-care-mode .comment-time {
    color: var(--text-quaternary);
}

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

/* ========== 夜晚模式样式覆盖 ========== */
: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 .search-input {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}

:root.night-mode .search-input:focus {
    border-color: var(--primary-color);
}

: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: none;
}

: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 .comment .comment-reply {
    color: var(--primary-color);
    background-color: var(--bg-interactive);
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
}

:root.night-mode .comment .comment-reply:hover {
    color: #fff;
    background-color: var(--primary-color);
    text-decoration: none;
}

/* 夜间模式 - comment-replay-btn样式 */
:root.night-mode .comment-replay-btn {
    color: var(--primary-color);
    background-color: var(--bg-interactive);
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
}

:root.night-mode .comment-replay-btn:hover {
    color: #fff;
    background-color: var(--primary-color);
    text-decoration: none;
}

:root.night-mode .comment-post .cancel-reply {
    color: #fff;
    background-color: var(--primary-color);
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
}

:root.night-mode .comment-post .cancel-reply:hover {
    color: #fff;
    background-color: var(--primary-hover);
    text-decoration: none;
}

: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.night-mode .comment-info {
    border-bottom-color: var(--border-light);
}

:root.night-mode .comment-info:hover {
    background-color: var(--bg-interactive);
}

:root.night-mode .comment-info_img {
    border-color: var(--border-color);
}

:root.night-mode .comm-lates-name {
    color: var(--text-main);
}

:root.night-mode .comment-info > a {
    color: var(--text-secondary);
}

:root.night-mode .comment-info > a:hover {
    color: var(--primary-color);
}

:root.night-mode .comment-info > hr {
    border-color: var(--border-light);
}

/* 夜间模式 - 侧边栏个人资料样式 */
:root.night-mode .profile-info {
    background-color: var(--bg-card);
}

:root.night-mode .profile-name {
    color: var(--text-main);
}

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

:root.night-mode .profile-avatar {
    border-color: var(--bg-interactive);
}

/* 夜间模式 - 推荐文章样式 */
:root.night-mode .recommend-title {
    color: var(--primary-color);
}

:root.night-mode .recommend-item {
    border-bottom-color: var(--border-light);
}

:root.night-mode .recommend-item:hover {
    background-color: var(--bg-interactive);
}

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

:root.night-mode .recommend-link:hover {
    color: var(--primary-color);
}

/* 夜间模式 - 侧边栏列表样式 */
:root.night-mode .widget-list li {
    border-bottom-color: var(--border-light);
}

:root.night-mode .widget-list li:hover {
    background-color: var(--bg-interactive);
}

:root.night-mode .widget-list a {
    color: var(--text-secondary);
}

:root.night-mode .widget-list a::before {
    color: var(--primary-color);
}

:root.night-mode .widget-list a:hover {
    color: var(--primary-color);
}

/* 夜间模式 - 最新文章样式 */
:root.night-mode .blog-lates > a {
    color: var(--text-main);
}

:root.night-mode .blog-lates:hover {
    background-color: var(--bg-interactive);
}

:root.night-mode .blog-lates > a::before {
    color: var(--primary-color);
}

:root.night-mode .blog-lates > a:hover {
    color: var(--primary-color);
}

/* 夜间模式 - 热门文章样式 */
:root.night-mode .blog-hot > a {
    color: var(--text-main);
}

:root.night-mode .blog-hot:hover {
    background-color: var(--bg-interactive);
}

:root.night-mode .blog-hot > a::before {
    color: var(--primary-color);
}

:root.night-mode .blog-hot > a:hover {
    color: var(--primary-color);
}

/* 夜间模式 - 分类样式 */
:root.night-mode .log-classify-f > li:hover {
    background-color: var(--bg-interactive);
}

:root.night-mode .log-classify-f > li > a::before {
    color: var(--primary-color);
}

:root.night-mode .log-classify-f > li > a {
    color: var(--text-main);
}

:root.night-mode .log-classify-f > li > a:hover {
    color: var(--primary-color);
}

:root.night-mode .log-classify-c > li > a {
    color: var(--text-main);
}

:root.night-mode .log-classify-c > li > a:hover {
    color: var(--primary-color);
}

/* 夜间模式 - 标签样式 */
:root.night-mode .tags-side {
    background-color: var(--bg-interactive);
    color: var(--primary-color);
}

:root.night-mode .tags-side:hover {
    background-color: var(--primary-color);
    color: white;
}

/* 夜间模式 - 搜索按钮样式 */
:root.night-mode .search-btn {
    background-color: var(--primary-color);
    color: #fff;
}

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

/* ========== 护眼模式样式覆盖 ========== */
: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: none;
}

: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 .custom-nav-item-active > a {
    background-color: var(--bg-interactive);
    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(232, 220, 200, 0.15);
}

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

/* 护眼模式 - 友情链接标签颜色修复 */
:root.eye-care-mode .link-jb {
    background-color: var(--primary-color);
}

:root.eye-care-mode .link-jb:before {
    border-color: var(--primary-color);
    border-left-color: transparent;
    border-bottom-color: transparent;
}

/* 护眼模式 - 友情链接标题颜色修复 */
:root.eye-care-mode .link-title {
    color: var(--primary-color);
}

/* 护眼模式 - 友情链接卡片 hover 阴影颜色修复 */
:root.eye-care-mode .link-b:hover {
    box-shadow: 0 4px 12px var(--shadow-hover);
    background-color: var(--bg-interactive);
}

/* 护眼模式 - 友情链接描述边框颜色修复 */
:root.eye-care-mode .link-right p {
    border-top-color: var(--border-color);
}

/* 护眼模式 - 友情链接列表 hover 背景色修复 */
:root.eye-care-mode .links-section a:hover {
    background-color: rgba(232, 220, 200, 0.3);
    border-color: var(--primary-color);
}

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

/* 护眼模式 - 侧边栏样式修复 */
:root.eye-care-mode .widget {
    background-color: var(--bg-card);
    box-shadow: 0 2px 8px var(--shadow-color);
}

:root.eye-care-mode .widget-title {
    border-bottom-color: var(--border-color);
}

:root.eye-care-mode .widget-title h3 {
    color: var(--primary-color);
}

:root.eye-care-mode .widget-title h3::before {
    background-color: var(--primary-color);
}

:root.eye-care-mode .widget-list li {
    border-bottom-color: var(--border-light);
}

:root.eye-care-mode .widget-list li:hover {
    background-color: var(--bg-interactive);
}

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

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

:root.eye-care-mode .widget-list a:hover {
    color: var(--primary-color);
    background-color: var(--bg-interactive);
}

/* 护眼模式 - 侧边栏个人资料样式 */
:root.eye-care-mode .profile-info {
    background-color: var(--bg-card);
}

:root.eye-care-mode .profile-name {
    color: var(--text-main);
}

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

/* 护眼模式 - 推荐文章样式 */
:root.eye-care-mode .recommend-title {
    color: var(--primary-color);
}

:root.eye-care-mode .recommend-item {
    border-bottom-color: var(--border-light);
}

:root.eye-care-mode .recommend-item:hover {
    background-color: var(--bg-interactive);
}

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

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

/* 护眼模式 - 侧边栏标签样式 */
:root.eye-care-mode .tags-side {
    background-color: var(--bg-interactive);
    color: var(--primary-color);
}

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

/* 护眼模式 - 侧边栏分类样式 */
:root.eye-care-mode .log-classify-f > li:hover {
    background-color: var(--bg-interactive);
}

:root.eye-care-mode .log-classify-c > li > a:hover {
    color: var(--primary-color);
}

/* 护眼模式 - 最新文章样式 */
:root.eye-care-mode .blog-lates:hover {
    background-color: var(--bg-interactive);
}

/* 护眼模式 - 热门文章样式 */
:root.eye-care-mode .blog-hot:hover {
    background-color: var(--bg-interactive);
}

:root.eye-care-mode .blog-hot > a::before {
    color: var(--primary-color);
}

:root.eye-care-mode .blog-hot > a:hover {
    color: var(--primary-color);
}

/* 护眼模式 - 搜索按钮样式 */
:root.eye-care-mode .search-btn {
    background-color: var(--primary-color);
    color: #fff;
}

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

/* 护眼模式 - 分类序号和高亮样式 */
:root.eye-care-mode .log-classify-f > li > a::before {
    color: var(--primary-color);
}

:root.eye-care-mode .log-classify-f > li > a:hover {
    color: var(--primary-color);
}

/* 护眼模式 - 搜索条样式 */
:root.eye-care-mode .search-input {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}

:root.eye-care-mode .search-input:focus {
    border-color: var(--primary-color);
}

/* 护眼模式 - 最新文章样式 */
:root.eye-care-mode .blog-lates > a::before {
    color: var(--primary-color);
}

:root.eye-care-mode .blog-lates > a:hover {
    color: var(--primary-color);
}

/* 护眼模式 - 最新评论样式 */
:root.eye-care-mode .comment-info {
    border-bottom-color: var(--border-light);
}

:root.eye-care-mode .comment-info:hover {
    background-color: var(--bg-interactive);
}

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

:root.eye-care-mode .comm-lates-name {
    color: var(--text-main);
}

:root.eye-care-mode .comment-info > a {
    color: var(--text-secondary);
}

:root.eye-care-mode .comment-info > a:hover {
    color: var(--primary-color);
}

:root.eye-care-mode .comment-info > hr {
    border-color: var(--border-light);
}

: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,
:root.eye-care-mode .resource-card .tags {
    background-color: var(--bg-interactive);
}

: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-card h2 {
    border-bottom-color: var(--border-color);
}

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

/* 护眼模式 - 榜单链接 hover 颜色修复 */
:root.eye-care-mode .article-link:hover {
    color: var(--primary-color);
}

/* 护眼模式 - 最新文章标题下划线颜色修复 */
:root.eye-care-mode .zone-latest-title {
    border-bottom-color: var(--border-color);
}

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

:root.eye-care-mode .zone-latest-item:hover {
    background-color: var(--bg-interactive);
}

: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;
}

/* 护眼模式 - 评论按钮样式 */
:root.eye-care-mode .comment-post #comment_submit {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

:root.eye-care-mode .comment-post #comment_submit:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

:root.eye-care-mode .comment .comment-reply {
    color: var(--primary-color);
    background-color: var(--bg-interactive);
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
}

:root.eye-care-mode .comment .comment-reply:hover {
    color: #fff;
    background-color: var(--primary-color);
    text-decoration: none;
}

/* 覆盖base.css中的hover下划线效果 */
:root.eye-care-mode .comment .comment-reply:hover {
    text-decoration: none;
}

/* 护眼模式 - comment-replay-btn样式 */
:root.eye-care-mode .comment-replay-btn {
    color: var(--primary-color);
    background-color: var(--bg-interactive);
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
}

:root.eye-care-mode .comment-replay-btn:hover {
    color: #fff;
    background-color: var(--primary-color);
    text-decoration: none;
}

:root.eye-care-mode .comment-post .cancel-reply {
    color: var(--primary-color);
}

:root.eye-care-mode .comment-post .cancel-reply:hover {
    color: var(--primary-hover);
}

:root.eye-care-mode #pagenavi a {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

:root.eye-care-mode #pagenavi a:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

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

:root.eye-care-mode #pagenavi span.current {
    background-color: var(--primary-color);
    color: #fff;
}

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