/* 首页「宣纸墨色」覆盖层（2026-10-21）：只被 index.php 引用，style2.css 本体不动。
   选择器统一加 html 前缀抬高优先级，保证压过 style2.css 与 index.php 内联样式，不依赖加载顺序。
   取值同 bazi.css 的 --bz-*：白天纸色底墨字朱砂主色，暗黑墨黑底琥珀强调。
   主题仍沿用首页原有机制（body.dark-mode + localStorage.theme）。 */

html body {
    --primary-color: #2b2622;
    --accent-color: #b3361f;
    --bg-color: #f3efe6;
    --card-bg: #fbf9f4;
    --text-main: #2b2622;
    --text-sub: #6f6458;
    --header-bg: rgba(243, 239, 230, 0.94);
    --border-color: #d9d1c0;
    --shadow-color: rgba(43, 38, 34, 0.08);
    --ticker-bg: #fbf9f4;
    --deepseek-bg: #fbf9f4;
    --compare-bg: #f6f2ea;
    --warm-accent: #b3361f;
    --cool-accent: #3f6275;
    --green-accent: #4f7a55;
    --ink-btn: #b3361f;
    --ink-btn-hover: #9a2d19;
    --ink-tint: #f6e9e2;
    --ink-gold: #8a5a14;
    background-image: none;
}
html body.dark-mode {
    --primary-color: #ece4d6;
    --accent-color: #e0a34a;
    --bg-color: #16130f;
    --card-bg: #211d18;
    --text-main: #ece4d6;
    --text-sub: #a09382;
    --header-bg: rgba(22, 19, 15, 0.94);
    --border-color: #3a332a;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --ticker-bg: #211d18;
    --deepseek-bg: #211d18;
    --compare-bg: #1c1915;
    --warm-accent: #e0a34a;
    --cool-accent: #7fa6bd;
    --green-accent: #8fbf98;
    --ink-btn: #c2452c;
    --ink-btn-hover: #ab3a24;
    --ink-tint: #33291d;
    --ink-gold: #e0a34a;
    background-image: none;
}

/* 顶栏按钮 */
html body .btn-app-install,
html body .btn-user-login { background: var(--ink-btn); box-shadow: none; color: #fff }
html body .btn-app-install:hover,
html body .btn-user-login:hover { background: var(--ink-btn-hover); box-shadow: none }
html body .btn-theme-toggle:hover { background: var(--ink-tint) }

/* 公告条 */
html body .ticker-label { background: var(--ink-btn); color: #fff }
html body .badge-new { background: var(--ink-tint); color: var(--accent-color) }
html body .badge-hot { background: #f6e2da; color: #8a2d1a }
html body .badge-update { background: #efe9dc; color: #6f6458 }
html body.dark-mode .badge-new { background: #33291d; color: #e0a34a }
html body.dark-mode .badge-hot { background: #43261c; color: #f1c8b8 }
html body.dark-mode .badge-update { background: #2a251f; color: #a09382 }

/* 区块标题：朱砂竖条改细、字用宋体系 */
html body .section-title {
    font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
    letter-spacing: 1px;
    border-left: 3px solid var(--accent-color);
}

/* 服务卡片：纸色底细边线，去掉彩色渐变图标，改低饱和印章色 */
html body .service-card { border-radius: 6px; box-shadow: none }
html body .service-card:hover { box-shadow: 0 6px 18px var(--shadow-color) }
html body .bg-red { background: #b3361f }
html body .bg-purple { background: #6b4a7a }
html body .bg-blue { background: #3f6275 }
html body .bg-green { background: #4f7a55 }
html body .bg-orange { background: #a8641a }
html body.dark-mode .bg-red { background: #c2452c }
html body.dark-mode .bg-purple { background: #7d5a8c }
html body.dark-mode .bg-blue { background: #4a748a }
html body.dark-mode .bg-green { background: #5b8a62 }
html body.dark-mode .bg-orange { background: #b8741a }
html body .card-icon { border-radius: 6px }
html body .card-apply {
    background: var(--ink-tint);
    border-left: 2px solid var(--accent-color);
    color: var(--text-main);
}
html body .service-card:hover .card-apply { background: var(--ink-tint) }
html body .tutorial-badge { background: var(--ink-btn); color: #fff; box-shadow: none }
html body .tutorial-badge:hover { background: var(--ink-btn-hover) }

/* 新手指南 */
html body .guide-wrapper { background: var(--ink-tint); border: 1px solid var(--border-color); box-shadow: none }
html body .guide-title { color: var(--accent-color) }
html body .guide-arrow { color: var(--accent-color) }
html body .guide-toggle:hover { background: transparent }
html body .guide-btn { background: var(--card-bg); border: 1px solid var(--border-color); box-shadow: none }
html body .guide-btn .text { color: var(--text-main) }
html body .guide-btn .desc { color: var(--text-sub) }
html body .guide-btn::before { color: rgba(179, 54, 31, 0.14) }
html body .guide-btn.active { border-color: var(--accent-color); background: var(--ink-tint); box-shadow: none }
html body.dark-mode .guide-btn { background: var(--card-bg); border-color: var(--border-color) }
html body.dark-mode .guide-btn::before { color: rgba(224, 163, 74, 0.1) }
html body.dark-mode .guide-btn.active { border-color: var(--accent-color); background: var(--ink-tint) }
html body .service-card.highlight-target {
    background: var(--card-bg);
    border: 1px solid var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-color) !important;
}
html body.dark-mode .service-card.highlight-target {
    background: var(--card-bg);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-color) !important;
}

/* 用户案例 */
html body .review-card-marquee { background: var(--card-bg); border-color: var(--border-color); box-shadow: none }
html body .review-card-marquee:nth-child(even) { background: var(--compare-bg) }
html body .review-card-marquee::after { border-color: var(--card-bg) transparent transparent transparent }
html body .review-card-marquee:nth-child(even)::after { border-color: var(--compare-bg) transparent transparent transparent }
html body .review-card-marquee::before { border-color: var(--border-color) transparent transparent transparent }
html body .review-card-marquee:hover { box-shadow: 0 6px 16px var(--shadow-color) }
html body .review-tag { background: var(--ink-btn); color: #fff; box-shadow: none }
html body .review-q { color: var(--text-main); border-bottom-color: var(--border-color) }
html body .review-f { color: var(--text-sub) }
html body.dark-mode .review-card-marquee { background: var(--card-bg); border-color: var(--border-color); box-shadow: none }
html body.dark-mode .review-card-marquee:nth-child(even) { background: var(--compare-bg) }
html body.dark-mode .review-card-marquee::after { border-color: var(--card-bg) transparent transparent transparent }
html body.dark-mode .review-card-marquee:nth-child(even)::after { border-color: var(--compare-bg) transparent transparent transparent }
html body.dark-mode .review-card-marquee::before { border-color: var(--border-color) transparent transparent transparent }
html body.dark-mode .review-tag { background: var(--ink-btn); color: #fff }
html body.dark-mode .review-q { color: var(--text-main); border-bottom-color: var(--border-color) }
html body.dark-mode .review-f { color: var(--text-sub) }
html body .privacy-notice { color: var(--text-sub) }
html body .privacy-notice i { color: #4f7a55 }
html body.dark-mode .privacy-notice { color: var(--text-sub) }
html body.dark-mode .privacy-notice i { color: #8fbf98 }

/* 购买入口条与会员权益 */
html body .pay-vip { background: var(--ink-tint); border-color: var(--border-color); color: var(--accent-color) }
html body .pay-card { background: var(--card-bg); border-color: var(--border-color); color: #3f6275 }
html body .pay-visitor { background: var(--card-bg); border-color: var(--border-color); color: #4f7a55 }
html body.dark-mode .pay-vip { background: var(--ink-tint); border-color: var(--border-color); color: var(--accent-color) }
html body.dark-mode .pay-card { background: var(--card-bg); border-color: var(--border-color); color: #7fa6bd }
html body.dark-mode .pay-visitor { background: var(--card-bg); border-color: var(--border-color); color: #8fbf98 }
html body .pay-action-item:hover { box-shadow: 0 6px 16px var(--shadow-color) }
html body .benefits-head h3,
html body .benefit-title b { color: var(--text-main) }
html body.dark-mode .benefits-head h3,
html body.dark-mode .benefit-title b { color: var(--text-main) }
html body .benefits-more { color: var(--accent-color) }
html body .benefit-card { background: var(--card-bg); border-color: var(--border-color) }
html body.dark-mode .benefit-card { background: var(--card-bg); border-color: var(--border-color) }
html body .benefit-card.featured { border: 2px solid var(--accent-color); background: var(--ink-tint); box-shadow: none }
html body.dark-mode .benefit-card.featured { background: var(--ink-tint); box-shadow: none }
html body .benefit-badge { background: var(--ink-btn); color: #fff }
html body .benefit-price { color: var(--text-sub) }
html body .benefit-price strong { color: var(--accent-color) }
html body .benefit-points li { color: var(--text-sub) }
html body.dark-mode .benefit-points li { color: var(--text-sub) }
html body .benefit-points li::before { color: #4f7a55 }
html body .benefit-cta { background: var(--ink-tint); color: var(--accent-color) }
html body .benefit-cta.primary { background: var(--ink-btn); color: #fff; box-shadow: none }

/* 信息区：对比卡顶线改成印章色 */
html body .compare-card.qimen { border-top-color: #b3361f }
html body .compare-card.liuren { border-top-color: #3f6275 }
html body .compare-card.taiyi { border-top-color: #4f7a55 }
html body .link-btn:hover { background: var(--ink-btn); border-color: var(--ink-btn); color: #fff }

/* PWA 安装提示 */
html body #pwa-install-banner { background: var(--card-bg); border: 1px solid var(--border-color); box-shadow: 0 8px 24px var(--shadow-color) }
html body.dark-mode #pwa-install-banner { background: var(--card-bg); border-color: var(--border-color) }
html body .pwa-title,
html body.dark-mode .pwa-title { color: var(--text-main) }
html body .pwa-sub,
html body.dark-mode .pwa-sub { color: var(--text-sub) }
html body .pwa-btn-install { background: var(--ink-btn); color: #fff; box-shadow: none }
html body .pwa-btn-dismiss,
html body.dark-mode .pwa-btn-dismiss { color: var(--text-sub) }
html body .pwa-watermark,
html body.dark-mode .pwa-watermark { color: rgba(179, 54, 31, 0.06) }

/* ── 顶部主视觉 ── */
.home-hero {
    margin: 22px 0 6px;
    padding: 26px 24px 22px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.home-hero::after {
    content: "☰";
    position: absolute;
    right: 18px;
    top: -14px;
    font-size: 120px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.07;
    pointer-events: none;
    font-family: "SimSun", "STSong", serif;
}
.home-hero-title {
    margin: 0 0 8px;
    font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-main);
}
.home-hero-sub {
    margin: 0 0 16px;
    max-width: 640px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-sub);
}
.home-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1 }
.home-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-color);
    color: var(--text-main);
    font-size: 14px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.home-hero-chip:hover,
.home-hero-chip:focus-visible { border-color: var(--accent-color); color: var(--accent-color) }
.home-hero-chip:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px }
.home-hero-chip .mdi { font-size: 16px; color: var(--accent-color) }
.home-hero-chip.primary { background: var(--ink-btn); border-color: var(--ink-btn); color: #fff }
.home-hero-chip.primary:hover { background: var(--ink-btn-hover); color: #fff }
.home-hero-chip.primary .mdi { color: #fff }
@media (max-width: 768px) {
    .home-hero { padding: 20px 16px 16px; margin-top: 14px }
    .home-hero-title { font-size: 21px; letter-spacing: 1px }
    .home-hero-sub { font-size: 13px }
    .home-hero-chip { padding: 7px 13px; font-size: 13px }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero-chip { transition: none }
}