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

/* 默认模式变量 */
:root {
    --scrollbar-thumb-color: #b3d9ff;
    --scrollbar-stripe-color: #8ab8e6;
    --scrollbar-track-color: #f6f6f6;
}

/* 夜晚模式变量 */
: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;
    --scrollbar-thumb-color: #E95430;
    --scrollbar-stripe-color: #343F50;
    --scrollbar-track-color: #1a202c;
}

/* 护眼模式变量 - 改为米色系 */
: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; /* 渐变结束 */
    --scrollbar-thumb-color: #8b7d6b;
    --scrollbar-stripe-color: #a6967c;
    --scrollbar-track-color: #f2eedf;
}

/* ========== 文章详情页样式 - 夜晚模式 ========== */
: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;
}

/* 护眼模式 - 搜索结果卡片按钮样式 */
:root.eye-care-mode .detail-btn {
    background-color: var(--bg-interactive);
}

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

/* ========== 搜索框新样式 - 参考sousuo.txt ========== */

/* 平台切换按钮样式 */
.platform-tabs {
    display: flex;
    gap: 6px;
    height: 100%;
    align-items: center;
    padding: 0 10px;
}

.platform-tab {
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    white-space: nowrap;
    background: #fff;
    color: #666;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

/* 本站 - 浅蓝色渐变 */
.platform-tab[data-platform="site"] {
    border: 1px solid #4b96e6;
    background: linear-gradient(135deg, #ffffff, #f5f9ff);
}
.platform-tab[data-platform="site"].active {
    background: linear-gradient(135deg, #4b96e6, #6ba8f5);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(75, 150, 230, 0.3);
}
.platform-tab[data-platform="site"]:not(.active):hover {
    background: linear-gradient(135deg, #e8f0fe, #f0f7ff);
    color: #4b96e6;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(75, 150, 230, 0.2);
}

/* 百度 - 绿色渐变 */
.platform-tab[data-platform="baidu"] {
    border: 1px solid #39b54a;
    background: linear-gradient(135deg, #ffffff, #f5fff7);
}
.platform-tab[data-platform="baidu"].active {
    background: linear-gradient(135deg, #39b54a, #64d073);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(57, 181, 74, 0.3);
}
.platform-tab[data-platform="baidu"]:not(.active):hover {
    background: linear-gradient(135deg, #e6f7ea, #f0fcf2);
    color: #39b54a;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(57, 181, 74, 0.2);
}

/* 必应 - 粉橙渐变 */
.platform-tab[data-platform="bing"] {
    border: 1px solid #ff6b8b;
    background: linear-gradient(135deg, #ffffff, #fff5f7);
}
.platform-tab[data-platform="bing"].active {
    background: linear-gradient(135deg, #ff6b8b, #ff8f67);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(255, 107, 139, 0.3);
}
.platform-tab[data-platform="bing"]:not(.active):hover {
    background: linear-gradient(135deg, #ffebee, #fff0e8);
    color: #ff6b8b;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(255, 107, 139, 0.2);
}

/* 选中按钮高亮边框 */
.platform-tab.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 13px;
    pointer-events: none;
}

/* 核心搜索条样式 */
.search-box {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 800px;
    height: 52px;
    border-radius: 26px;
    overflow: hidden;
    border: 2px solid #4b96e6;
    transition: border 0.3s ease, box-shadow 0.3s ease;
    margin: 30px auto;
    position: relative;
}

.search-box .search-form {
    display: flex;
    flex: 1;
    align-items: center;
    height: 100%;
    position: relative;
}

/* 搜索框配色 - 本站 */
.search-box.site {
    border-color: #4b96e6;
    background: linear-gradient(135deg, #ffffff, #f5f9ff);
    box-shadow: 0 2px 10px rgba(75, 150, 230, 0.1);
}
/* 搜索框配色 - 百度 */
.search-box.baidu {
    border-color: #39b54a;
    background: linear-gradient(135deg, #ffffff, #f5fff7);
    box-shadow: 0 2px 10px rgba(57, 181, 74, 0.1);
}
/* 搜索框配色 - 必应 */
.search-box.bing {
    border-color: #ff6b8b;
    background: linear-gradient(135deg, #ffffff, #fff5f7);
    box-shadow: 0 2px 10px rgba(255, 107, 139, 0.1);
}

.line-form-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 15px;
    font-size: 15px;
    background: transparent;
    color: #333;
    font-weight: 400;
    height: 100%;
}

/* 输入框聚焦配色 */
.line-form-input.site-focus:focus {
    background: linear-gradient(135deg, #f8fbff, #ffffff);
    color: #4b96e6;
}
.line-form-input.baidu-focus:focus {
    background: linear-gradient(135deg, #f8fff9, #ffffff);
    color: #39b54a;
}
.line-form-input.bing-focus:focus {
    background: linear-gradient(135deg, #fff8f9, #ffffff);
    color: #ff6b8b;
}

.line-form-input::placeholder {
    color: #ccc;
}

/* 搜索按钮样式 */
#search-btn7 {
    width: 70px;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background: transparent;
}

/* 按钮配色 - 本站 */
#search-btn7.site {
    background: linear-gradient(135deg, #4b96e6, #6ba8f5);
}
#search-btn7.site:hover {
    background: linear-gradient(135deg, #3a88d8, #5b99e8);
    box-shadow: 0 4px 12px rgba(75, 150, 230, 0.2);
}

/* 按钮配色 - 百度 */
#search-btn7.baidu {
    background: linear-gradient(135deg, #39b54a, #64d073);
}
#search-btn7.baidu:hover {
    background: linear-gradient(135deg, #2da83f, #54c062);
    box-shadow: 0 4px 12px rgba(57, 181, 74, 0.2);
}

/* 按钮配色 - 必应 */
#search-btn7.bing {
    background: linear-gradient(135deg, #ff6b8b, #ff8f67);
}
#search-btn7.bing:hover {
    background: linear-gradient(135deg, #ff5a7d, #ff8055);
    box-shadow: 0 4px 12px rgba(255, 107, 139, 0.2);
}

#search-btn7:hover {
    transform: scale(1.02);
}

/* 放大镜核心样式 */
.magnifier-container {
    width: 28px;
    height: 28px;
    position: relative;
    z-index: 10;
}

.magnifier-circle {
    width: 20px;
    height: 20px;
    border: 1.5px solid white;
    border-radius: 50%;
    position: relative;
}

.magnifier-line {
    width: 12px;
    height: 1.5px;
    background: white;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(45deg);
    transform-origin: left center;
}

/* 放大镜圆心容器（分离位移和缩放） */
.magnifier-center-wrap {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 4px;
    height: 4px;
    transition: transform 0.1s ease;
}

/* 放大镜圆心（仅控制缩放） */
.magnifier-center {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover时放大1.5倍 */
#search-btn7:hover .magnifier-center {
    transform: scale(1.5);
}

/* 点击时放大2倍 */
#search-btn7.active .magnifier-center {
    transform: scale(2);
}

/* 按钮点击波纹 */
#search-btn7::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: 1;
}

#search-btn7:active::after {
    width: 100px;
    height: 100px;
    opacity: 0;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .platform-tab {
        padding: 4px 8px;
        font-size: 11px;
    }
    .search-box {
        height: 48px;
    }
    #search-btn7 {
        width: 60px;
    }
    .platform-tabs {
        padding: 0 5px;
    }
    .magnifier-container {
        width: 24px;
        height: 24px;
    }
    .magnifier-circle {
        width: 18px;
        height: 18px;
    }
    .magnifier-line {
        width: 10px;
    }
    .magnifier-center-wrap {
        top: 7px;
        left: 7px;
        width: 3.5px;
        height: 3.5px;
    }
}

/* ========== 搜索框缩放占位符样式 ========== */
.search-box .scale-placeholder {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #9CA3AF;
    pointer-events: none;
    transition: all 0.25s ease;
    background-color: transparent;
    padding: 0 4px;
    z-index: 1;
    white-space: nowrap;
}

.search-box .line-form-input:focus + .scale-placeholder,
.search-box .line-form-input:not(:placeholder-shown) + .scale-placeholder {
    top: 32px;
    transform: translateY(0);
    font-size: 12px;
    color: rgba(0, 163, 255, 0.2);
}

@media (max-width: 768px) {
    .search-box .scale-placeholder {
        font-size: 13px;
        left: 12px;
    }
    .search-box .line-form-input:focus + .scale-placeholder,
    .search-box .line-form-input:not(:placeholder-shown) + .scale-placeholder {
        top: 28px;
        font-size: 11px;
    }
}