/* ==========================================================================
   健康频道 · 暗黑主题（/health/ 与 /health/tools.php）
   创建：2026-11-03
   依赖：/common/css/dark_mode.css（body.dark-mode + --dm-* / --lo-* 变量）
         /common/js/dark_mode.js（切换按钮 + body.dark-mode 类）
   说明：本文件只由 health/ 下的页面引入，不影响站点其它模块
   ========================================================================== */

/* ==========================================================================
   1. 页面底色（深海军蓝 + 青绿柔光，呼应浅色版的青色主色）
   ========================================================================== */
body.dark-mode {
    background:
        radial-gradient(1100px 520px at 88% -12%, rgba(20, 184, 166, 0.13), transparent 62%),
        radial-gradient(900px 480px at -5% 105%, rgba(14, 165, 233, 0.10), transparent 60%),
        #0b1220;
    color: #e2e8f0;
}

/* 浅色版 body 用的是亮色渐变底，暗色下必须整体覆盖 */
body.dark-mode a {
    color: #5eead4;
}
body.dark-mode a:hover {
    color: #99f6e4;
}

/* ==========================================================================
   2. Hero（深青绿渐变 + 玻璃拟态）
   ========================================================================== */
body.dark-mode .hero {
    background:
        radial-gradient(760px 260px at 12% -40%, rgba(45, 212, 191, 0.30), transparent 62%),
        radial-gradient(620px 240px at 92% 130%, rgba(56, 189, 248, 0.20), transparent 60%),
        linear-gradient(135deg, #0f3d3e 0%, #123043 48%, #0d1424 100%);
    border-bottom: 1px solid rgba(45, 212, 191, 0.22);
}
body.dark-mode .hero::before {
    opacity: .10;
}
body.dark-mode .hero h1 {
    color: #f8fafc;
}
body.dark-mode .hero p {
    color: rgba(226, 232, 240, 0.88);
}
body.dark-mode .hero .back {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.24);
    color: rgba(226, 232, 240, 0.9);
}
body.dark-mode .hero .back:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.38);
    color: #fff;
}

/* Hero 内「查看内容分析看板」按钮（原为内联浅色样式，需覆盖） */
body.dark-mode .health-hero__cta {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #5eead4 !important;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.35);
}
body.dark-mode .health-hero__cta:hover {
    background: rgba(255, 255, 255, 0.20) !important;
    border-color: rgba(45, 212, 191, 0.45);
    color: #99f6e4 !important;
}

/* tools.php 顶部分类切换 */
body.dark-mode .hero .sub-links a {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
}
body.dark-mode .hero .sub-links a:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
body.dark-mode .hero .sub-links a.is-active {
    background: rgba(45, 212, 191, 0.22);
    border-color: rgba(45, 212, 191, 0.40);
    color: #5eead4;
}

/* Hero 内的主题切换按钮（覆盖 /common/css/dark_mode.css 的 .dm-toggle 默认样式） */
body.dark-mode .hero .health-hero__theme {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.24);
    color: #e2e8f0;
    box-shadow: 0 4px 14px rgba(2, 6, 23, 0.35);
}
body.dark-mode .hero .health-hero__theme:hover {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.38);
    color: #fff;
}
body.dark-mode .hero .health-hero__theme .dm-toggle__icon {
    font-size: 14px;
    line-height: 1;
}

/* 浅色版 Hero 上的主题按钮本身已是半透明白底，无需额外处理 */

/* ==========================================================================
   3. 搜索条（sticky，玻璃拟态）
   ========================================================================== */
body.dark-mode .search {
    background: rgba(11, 18, 32, 0.90);
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.45);
    backdrop-filter: blur(10px);
}
body.dark-mode .search input[type=text],
body.dark-mode .search select {
    background: rgba(2, 6, 23, 0.60);
    border: 1px solid rgba(148, 163, 184, 0.26);
    color: #e2e8f0;
}
body.dark-mode .search input[type=text]:focus,
body.dark-mode .search select:focus {
    border-color: #2dd4bf;
    outline: none;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.16);
}
body.dark-mode .search input[type=text]::placeholder {
    color: #94a3b8;
}
body.dark-mode .search select option {
    background: #16213a;
    color: #e2e8f0;
}
/* 按钮：白字 + 深色渐变（#0891b2 上的白字只有 3.7:1，这里压深到 #155e75/#0e7490 → 白字 >= 7:1） */
body.dark-mode .search button {
    background: linear-gradient(135deg, #155e75 0%, #0e7490 100%);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(8, 145, 178, 0.9);
}
body.dark-mode .search button:hover {
    background: linear-gradient(135deg, #0f4f61 0%, #155e75 100%);
}
body.dark-mode .search .reset {
    color: #94a3b8;
}
body.dark-mode .search .reset:hover {
    color: #cbd5e1;
}

/* ==========================================================================
   4. Section 容器
   ========================================================================== */
body.dark-mode .section,
body.dark-mode .health-top {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 16px 36px -24px rgba(2, 6, 23, 0.95);
    backdrop-filter: blur(6px);
}
body.dark-mode .section h2,
body.dark-mode .health-top h2 {
    color: #5eead4;
    border-left-color: #2dd4bf;
}
body.dark-mode .section .count {
    color: #94a3b8;
}

/* ==========================================================================
   5. 健康卡片（分类矩阵）
   ========================================================================== */
body.dark-mode .card {
    background: rgba(30, 41, 59, 0.66);
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: #e2e8f0;
}
body.dark-mode .card:hover {
    background: rgba(45, 212, 191, 0.10);
    border-color: #2dd4bf;
    box-shadow: 0 10px 26px -14px rgba(45, 212, 191, 0.55);
}
body.dark-mode .card .name {
    color: #e2e8f0;
}
body.dark-mode .card .desc {
    color: #94a3b8;
}
body.dark-mode .card.hi {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.16) 0%, rgba(56, 189, 248, 0.12) 100%);
    border-color: rgba(45, 212, 191, 0.45);
    box-shadow: 0 10px 26px -16px rgba(45, 212, 191, 0.60);
}
body.dark-mode .card.hi:hover {
    border-color: #2dd4bf;
    box-shadow: 0 14px 32px -14px rgba(45, 212, 191, 0.75);
}
/* "AI" 角标：9px 小字，白字需深底（#06b6d4 上白字仅 2.4:1） */
body.dark-mode .card.hi::after {
    background: linear-gradient(135deg, #155e75, #0e7490);
    color: #fff;
}

/* 点击量徽章 */
body.dark-mode .card-clicks {
    background: rgba(45, 212, 191, 0.14);
    border-color: rgba(45, 212, 191, 0.30);
    color: #5eead4;
}

/* 内联说明卡（无外链的方剂/菜谱条目） */
body.dark-mode .note {
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.30);
    color: #fde68a;
}
body.dark-mode .note .name {
    color: #fef3c7;
}
body.dark-mode .note .desc {
    color: #fcd34d;
}

/* 空状态 */
body.dark-mode .empty {
    background: rgba(15, 23, 42, 0.50);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: #94a3b8;
}

/* ==========================================================================
   6. 五大主题入口卡片
   ========================================================================== */
body.dark-mode .health-theme {
    background: rgba(30, 41, 59, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: #e2e8f0;
    box-shadow: 0 12px 30px -22px rgba(2, 6, 23, 0.95);
}
body.dark-mode .health-theme:hover {
    border-color: #2dd4bf;
    background: rgba(45, 212, 191, 0.10);
    box-shadow: 0 18px 40px -18px rgba(45, 212, 191, 0.60);
}
body.dark-mode .health-theme__name {
    color: #5eead4;
}
body.dark-mode .health-theme__desc {
    color: #cbd5e1;
}
body.dark-mode .health-theme__questions {
    color: #94a3b8;
}
body.dark-mode .health-theme__count {
    color: #2dd4bf;
    border-top-color: rgba(148, 163, 184, 0.20);
}

/* ==========================================================================
   7. 文章卡片 / 导读区
   ========================================================================== */
body.dark-mode .health-articles__intro {
    background: rgba(45, 212, 191, 0.08);
    border-left-color: #2dd4bf;
    color: #cbd5e1;
}
body.dark-mode .health-articles__intro a {
    color: #5eead4;
}
body.dark-mode .health-articles__intro code {
    color: #5eead4;
}
body.dark-mode .article-card {
    background: rgba(30, 41, 59, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: #e2e8f0;
}
body.dark-mode .article-card:hover {
    background: rgba(45, 212, 191, 0.10);
    border-color: #2dd4bf;
    box-shadow: 0 10px 26px -14px rgba(45, 212, 191, 0.55);
}
body.dark-mode .article-card__title {
    color: #e2e8f0;
}
body.dark-mode .article-card__preview {
    color: #94a3b8;
}
body.dark-mode .article-card__meta {
    color: #94a3b8;
}
body.dark-mode .health-top__preview {
    color: #94a3b8;
}

/* 主题标签（每个主题一个色系） */
body.dark-mode .health-articles__theme-tag {
    background: rgba(45, 212, 191, 0.16);
    border-color: rgba(45, 212, 191, 0.32);
    color: #5eead4;
}
body.dark-mode .health-articles__theme-tag--sleep {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.34);
    color: #a5b4fc;
}
body.dark-mode .health-articles__theme-tag--diet {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.32);
    color: #86efac;
}
body.dark-mode .health-articles__theme-tag--symptom {
    background: rgba(244, 63, 94, 0.16);
    border-color: rgba(244, 63, 94, 0.32);
    color: #fda4af;
}
body.dark-mode .health-articles__theme-tag--body {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.34);
    color: #c4b5fd;
}

/* 精选徽章 */
body.dark-mode .health-articles__rank-pill {
    background: rgba(251, 191, 36, 0.16);
    border-color: rgba(251, 191, 36, 0.36);
    color: #fde68a;
}

/* ==========================================================================
   8. 热门榜（大家在读）
   ========================================================================== */
body.dark-mode .health-top__item {
    background: rgba(30, 41, 59, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: #e2e8f0;
}
body.dark-mode .health-top__item:hover {
    background: rgba(45, 212, 191, 0.10);
    border-color: #2dd4bf;
    box-shadow: 0 10px 26px -14px rgba(45, 212, 191, 0.55);
}
/* 排名徽章：白字需要深底（#06b6d4 上白字仅 2.4:1） */
body.dark-mode .health-top__rank {
    background: linear-gradient(135deg, #155e75, #0e7490);
    color: #fff;
}
body.dark-mode .health-top__rank--top {
    background: linear-gradient(135deg, #b45309, #b91c1c);
}
body.dark-mode .health-top__name {
    color: #e2e8f0;
}
body.dark-mode .health-top__meta {
    color: #94a3b8;
}
body.dark-mode .health-top__views {
    color: #5eead4;
}
body.dark-mode .health-top__empty {
    color: #64748b;
}

/* ==========================================================================
   9. 按钮 / 行动号召
   ========================================================================== */
body.dark-mode .health-articles__more a,
body.dark-mode .health-articles__more-btn {
    background: linear-gradient(135deg, #155e75 0%, #0e7490 100%);
    color: #fff;
    box-shadow: 0 6px 18px -8px rgba(8, 145, 178, 0.9);
}
body.dark-mode .health-articles__more a:hover,
body.dark-mode .health-articles__more-btn:hover {
    background: linear-gradient(135deg, #0f4f61 0%, #155e75 100%);
    color: #fff;
    box-shadow: 0 10px 24px -8px rgba(8, 145, 178, 0.95);
}

/* ==========================================================================
   10. AI 免责声明横幅
   ========================================================================== */
body.dark-mode .health-disclaimer {
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.30);
    color: #fde68a;
}
body.dark-mode .health-disclaimer strong {
    color: #fef3c7;
}

/* ==========================================================================
   11. 页脚
   ========================================================================== */
body.dark-mode .foot {
    background: rgba(2, 6, 23, 0.55);
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    color: rgba(226, 232, 240, 0.78);
}
body.dark-mode .foot a {
    color: #5eead4;
}
body.dark-mode .foot a:hover {
    color: #99f6e4;
}

/* ==========================================================================
   12. 内联样式的深色适配（浅色版用 style="color:#64748b" 等）
   ========================================================================== */
body.dark-mode .health-articles__warn {
    color: #94a3b8 !important;
}
/* h2 内的灰色说明文字（浅色版为内联 color:#94a3b8）
   注意：#64748b 在 #0b1220 底上只有 3.9:1，达不到 WCAG AA，这里用 #94a3b8（7.3:1） */
body.dark-mode h2 > span[style*="color:#94a3b8"] {
    color: #94a3b8 !important;
}