/* ==========================================================================
   V0.8 项目落地与运营缺口 · 样式层
   覆盖：骨架屏 / 过渡 / 阅读进度 / 设置与无障碍 / 新手引导 / 搜索增强 /
        笔记 / 报告与看板 / 每日历史 / 帮助中心 / 反馈入口
   ========================================================================== */

/* ---------- 1. 字号档位（--fs-k） ---------- */
html{ --fs-k:1 }
html[data-font="0"]{ --fs-k:.92 }
html[data-font="1"]{ --fs-k:1 }
html[data-font="2"]{ --fs-k:1.08 }
html[data-font="3"]{ --fs-k:1.18 }
@media (min-width:900px){
  #main{ zoom:var(--fs-k); max-width:calc(var(--maxw) / var(--fs-k)) }
}
@media (max-width:899px){
  #main{ font-size:calc(15px * var(--fs-k)) }
}

/* ---------- 2. 高对比度模式 ---------- */
html[data-contrast="1"]{
  --paper:#ffffff; --paper-2:#ffffff; --paper-3:#f2f2f2; --card:#ffffff;
  --line:#000000; --line-strong:#000000;
  --ink:#000000; --ink-2:#000000; --ink-3:#1c1c1c; --ink-4:#333333;
  --cinnabar:#8a1200; --cinnabar-soft:#8a1200; --cinnabar-bg:#ffe9e4;
  --jade:#00463f; --gold:#6b4c00; --indigo:#12275c;
}
html[data-contrast="1"] body{ background-image:none }
html[data-contrast="1"] .card,
html[data-contrast="1"] .claim,
html[data-contrast="1"] .chip{ border-width:2px }
html[data-contrast="1"] a:hover{ text-decoration:underline }

/* ---------- 3. 减少动效 ---------- */
html[data-motion="0"] *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
html[data-motion="0"] html{ scroll-behavior:auto }
html[data-motion="0"] .h8-fade{ animation:none !important }

/* ---------- 4. 青少年模式：折叠非史料层说法 ---------- */
html[data-teen="1"] .claim[data-ctype="野史传说"],
html[data-teen="1"] .claim[data-ctype="文学演绎"],
html[data-teen="1"] .claim[data-ctype="民间信仰"]{ display:none }
.h8-teenbar{
  background:var(--indigo-bg); border:1px solid var(--line); border-radius:var(--r-m);
  padding:10px 14px; font-size:13px; color:var(--ink-2); margin:0 0 14px;
  display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}

/* ---------- 5. 骨架屏 ---------- */
#hl8-boot{ padding:26px 0 60px }
.h8-sk{ background:linear-gradient(90deg,var(--paper-3) 25%,var(--card) 37%,var(--paper-3) 63%);
  background-size:400% 100%; animation:h8shim 1.3s ease-in-out infinite; border-radius:var(--r-s) }
@keyframes h8shim{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.h8-sk-line{ height:13px; margin:0 0 11px }
.h8-sk-card{ height:118px; border-radius:var(--r-m); margin:0 0 14px }

/* ---------- 6. 页面过渡 ---------- */
.h8-fade{ animation:h8fade .22s ease-out }
@keyframes h8fade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* ---------- 7. 阅读进度条 ---------- */
#hl8-prog{ position:fixed; left:0; top:0; height:3px; width:0; z-index:60;
  background:var(--cinnabar); transition:width .12s linear; pointer-events:none }

/* ---------- 8. 浮动反馈按钮 ---------- */
#hl8-fab{ position:fixed; right:16px; bottom:20px; z-index:55; display:flex; flex-direction:column; gap:8px; align-items:flex-end }
.h8-fab-btn{ background:var(--card); border:1px solid var(--line-strong); border-radius:999px;
  padding:8px 14px; font-size:13px; box-shadow:var(--shadow-1); display:inline-flex; gap:6px; align-items:center }
.h8-fab-btn:hover{ border-color:var(--cinnabar); color:var(--cinnabar) }
.h8-fab-dot{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; border-radius:999px;
  background:var(--cinnabar); color:#fff; font-size:10px; line-height:16px; text-align:center; padding:0 4px }

/* ---------- 9. 通用面板 / 网格 ---------- */
.h8-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:14px }
.h8-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); padding:16px }
.h8-card h3{ margin:0 0 8px; font-size:15px }
.h8-row{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line) }
.h8-row:last-child{ border-bottom:0 }
.h8-row .h8-lab{ font-size:14px }
.h8-row .h8-desc{ font-size:12.5px; color:var(--ink-3); margin-top:2px }
.h8-seg{ display:inline-flex; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden }
.h8-seg button{ background:transparent; border:0; padding:5px 13px; font-size:13px; color:var(--ink-2) }
.h8-seg button.on{ background:var(--cinnabar); color:#fff }
.h8-sw{ position:relative; width:44px; height:24px; border-radius:999px; background:var(--line-strong);
  border:0; flex:0 0 auto; transition:background .16s }
.h8-sw::after{ content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; transition:transform .16s }
.h8-sw[aria-checked="true"]{ background:var(--cinnabar) }
.h8-sw[aria-checked="true"]::after{ transform:translateX(20px) }
.h8-note-tip{ font-size:12.5px; color:var(--ink-3); margin-top:6px }

/* ---------- 10. 数据块 / 条形图 ---------- */
.h8-stats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px }
.h8-stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); padding:13px 14px }
.h8-stat b{ display:block; font-family:var(--serif); font-size:24px; line-height:1.2; color:var(--cinnabar) }
.h8-stat span{ font-size:12.5px; color:var(--ink-3) }
.h8-bars{ display:flex; flex-direction:column; gap:8px }
.h8-bar{ display:grid; grid-template-columns:88px 1fr 46px; gap:10px; align-items:center; font-size:13px }
.h8-bar i{ display:block; height:9px; border-radius:999px; background:var(--cinnabar-soft); opacity:.85 }
.h8-bar i.low{ background:var(--gold) }
.h8-bar em{ font-style:normal; color:var(--ink-3); text-align:right }

/* ---------- 11. 新手引导 ---------- */
#hl8-onb{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:20px }
.h8-onb-mask{ position:absolute; inset:0; background:rgba(24,20,14,.58) }
.h8-onb-box{ position:relative; background:var(--card); border-radius:var(--r-l); max-width:560px; width:100%;
  padding:26px 26px 20px; box-shadow:var(--shadow-2) }
.h8-onb-box h3{ margin:0 0 10px; font-size:19px }
.h8-onb-box p{ margin:0 0 12px; font-size:14px; color:var(--ink-2); line-height:1.8 }
.h8-onb-steps{ display:flex; gap:6px; margin:0 0 16px }
.h8-onb-steps i{ flex:1; height:4px; border-radius:999px; background:var(--line) }
.h8-onb-steps i.on{ background:var(--cinnabar) }
.h8-onb-acts{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:6px; flex-wrap:wrap }
.h8-onb-list{ list-style:none; margin:0; padding:0; font-size:13.5px; color:var(--ink-2) }
.h8-onb-list li{ padding:6px 0 6px 20px; position:relative }
.h8-onb-list li::before{ content:"▸"; position:absolute; left:2px; color:var(--cinnabar) }
.h8-interests{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px }
.h8-interests .chip{ cursor:pointer }

/* ---------- 12. 搜索增强 ---------- */
.h8-sline{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; font-size:12.5px; color:var(--ink-3) }
.h8-sline b{ color:var(--ink-2); font-weight:600; font-size:13px }
.h8-sugg{ position:relative }
#h8-sugg-box{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40; background:var(--card);
  border:1px solid var(--line-strong); border-radius:var(--r-m); box-shadow:var(--shadow-2);
  max-height:300px; overflow:auto; display:none }
#h8-sugg-box.on{ display:block }
#h8-sugg-box a{ display:block; padding:9px 14px; font-size:14px; border-bottom:1px solid var(--line) }
#h8-sugg-box a:last-child{ border-bottom:0 }
#h8-sugg-box a:hover, #h8-sugg-box a.cur{ background:var(--cinnabar-bg) }
#h8-sugg-box .sk{ font-size:12px; color:var(--ink-3); margin-left:8px }
.h8-resbar{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px }

/* ---------- 13. 笔记 ---------- */
.h8-note{ background:var(--card); border:1px solid var(--line); border-left:3px solid var(--cinnabar);
  border-radius:var(--r-m); padding:13px 15px; margin:0 0 12px }
.h8-note .h8-nh{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap }
.h8-note .h8-nh b{ font-size:14.5px }
.h8-note .h8-nh span{ font-size:12px; color:var(--ink-3) }
.h8-note p{ margin:8px 0 0; font-size:14px; line-height:1.8; white-space:pre-wrap }
.h8-form{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); padding:16px }
.h8-form label{ display:block; font-size:13px; margin:0 0 6px; color:var(--ink-2) }
.h8-form input[type=text], .h8-form textarea, .h8-form select{
  width:100%; border:1px solid var(--line-strong); border-radius:var(--r-s); padding:9px 11px;
  font-family:inherit; font-size:14px; background:var(--paper-2); color:var(--ink); margin:0 0 12px }
.h8-form textarea{ min-height:96px; resize:vertical; line-height:1.7 }

/* ---------- 14. 模态框 ---------- */
#hl8-modal{ position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:20px }
#hl8-modal.on{ display:flex }
.h8-mask{ position:absolute; inset:0; background:rgba(24,20,14,.5) }
.h8-modal-box{ position:relative; background:var(--card); border-radius:var(--r-l); padding:22px;
  max-width:520px; width:100%; max-height:86vh; overflow:auto; box-shadow:var(--shadow-2) }
.h8-modal-box h3{ margin:0 0 12px; font-size:17px }

/* ---------- 15. 每日历史 ---------- */
.h8-daily{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-l); padding:22px }
.h8-daily .h8-dk{ font-size:12px; color:var(--cinnabar); letter-spacing:.08em }
.h8-daily h2{ margin:6px 0 6px; font-size:26px }
.h8-ann{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px }
.h8-ann a{ display:block; border:1px solid var(--line); border-radius:var(--r-m); padding:11px 13px; background:var(--paper-2) }
.h8-ann a:hover{ border-color:var(--cinnabar) }
.h8-ann b{ display:block; font-size:14.5px }
.h8-ann span{ font-size:12.5px; color:var(--ink-3) }
.h8-ann a.big{ border-color:var(--cinnabar); background:var(--cinnabar-bg) }

/* ---------- 16. 帮助中心 FAQ ---------- */
.h8-faq{ border:1px solid var(--line); border-radius:var(--r-m); background:var(--card); margin:0 0 10px; overflow:hidden }
.h8-faq summary{ padding:13px 16px; font-size:14.5px; cursor:pointer; font-weight:600 }
.h8-faq .h8-fb{ padding:0 16px 14px; font-size:14px; color:var(--ink-2); line-height:1.8 }
.h8-faq .h8-fb ul{ margin:6px 0 0; padding-left:19px }

/* ---------- 17. 法务正文 ---------- */
.h8-legal{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); padding:20px 22px; font-size:14px; line-height:1.9 }
.h8-legal h3{ margin:20px 0 8px; font-size:15.5px }
.h8-legal h3:first-child{ margin-top:0 }
.h8-legal p, .h8-legal li{ color:var(--ink-2) }
.h8-legal ul{ padding-left:20px }

/* ---------- 18. 空状态强化 ---------- */
.h8-empty{ text-align:center; padding:44px 20px; border:1px dashed var(--line-strong);
  border-radius:var(--r-l); color:var(--ink-3); font-size:14px; background:var(--paper-2) }
.h8-empty b{ display:block; color:var(--ink); font-size:16px; margin-bottom:8px }
.h8-empty .h8-ea{ margin-top:14px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap }

/* ---------- 19. 收藏整理工具条 ---------- */
.h8-shelf-tools{ display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); padding:12px 14px; margin:0 0 14px }
.h8-shelf-tools input[type=text]{ border:1px solid var(--line-strong); border-radius:var(--r-s);
  padding:7px 11px; font:inherit; font-size:13.5px; background:var(--paper-2); color:var(--ink); min-width:180px }
.h8-tag{ font-size:11.5px; background:var(--gold-bg); color:var(--gold); border-radius:999px; padding:2px 9px; margin-left:6px }

/* ---------- 20. 打印 / 导出友好 ---------- */
@media print{
  .topbar, .foot, #hl8-fab, #hl8-prog, #hl8-onb, #hl8-modal{ display:none !important }
}
@media (max-width:640px){
  #hl8-fab{ right:10px; bottom:12px }
  .h8-grid{ grid-template-columns:1fr 1fr }
  .h8-stats{ grid-template-columns:1fr 1fr }
}