/* ============================================================
 * 周易解卦（本地第一版）· 全站样式表
 * 建立卡：T11 首页与起卦屏 ｜ 承接人：QW-千问办公 → TA-TeleAgent（改派）｜ 日期：2026-10-21
 * 区块分工见 00-口径.md §5.4：本文件是全站唯一样式表，各卡只往自己锚点下写。
 *   区块 0 设计令牌 —— 唯一权威来源是 T10《design\视觉规范.md》v1.0（TC-TraeCN，已 verified）
 *     下方变量与规范 §9 可直接粘贴段逐值一致，本文件即权威落地，不再标注占位。
 *   区块 1 通用与布局 / 区块 2 首页+起卦屏（T11）/ 区块 3 结果屏+卦册（T12 预留）
 * 编码：UTF-8 无 BOM
 * ============================================================ */

/* ===== 0. 设计令牌（权威来源：T10《design\视觉规范.md》v1.0） ===== */
:root {
  --c-paper: #faf8f3;      /* 纸白底 */
  --c-ink: #2b2b2b;        /* 墨字 */
  --c-ink-soft: #6b6560;   /* 次级字色 5.4:1 */
  --c-line: #ded8cc;       /* 分隔线/描边/占位爻 */
  --c-accent: #a63a2b;     /* 朱砂：仅用于动爻与强调，面积≤5% */
  --c-accent-soft: #f0e2de;/* 朱砂浅底（仅警示块） */
  --c-surface: #fffdf9;    /* 卡片面/输入底 */

  --f-cjk: "Songti SC", "SimSun", "STSong", "Noto Serif CJK SC", serif;
  --f-latin: Georgia, "Times New Roman", var(--f-cjk);

  --fs-h1: 30px;
  --fs-h2: 21px;
  --fs-body: 16px;
  --fs-note: 13px;

  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 18px;
  --sp-4: 28px;
  --sp-5: 44px;

  --radius: 3px;           /* 直角感为主，不用大圆角 */
  --maxw: 640px;

  /* 卦爻画法比例（T10 规范：宽:高 = 6:1，爻间距 = 爻高）——已按 v1.0 核定 */
  --yao-w: 132px;
  --yao-h: 22px;
  --yao-gap: 22px;
  --yao-half-gap: 12px;    /* 阴爻两段之间的空隙 */
}

/* ===== 1. 通用与布局 ===== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-cjk);
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-3) var(--sp-5);
}
.screen[hidden] { display: none; }
.screen--active { display: block; }

h1, h2, h3 { font-weight: 600; letter-spacing: .02em; margin: 0 0 var(--sp-2); }
p { margin: 0 0 var(--sp-2); }
ul, ol { margin: 0 0 var(--sp-2); padding-left: 1.2em; }

.btn {
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 10px 18px;
  cursor: pointer;
}
.btn:hover { border-color: var(--c-ink-soft); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.btn--primary:hover { background: #000; }
.btn--lg { padding: 14px 34px; font-size: 18px; letter-spacing: .12em; }
.btn--ghost { background: transparent; }
.btn--text { background: none; border: none; padding: 4px 0; color: var(--c-ink-soft); font-size: var(--fs-note); }

.disclaimer {
  flex: none;
  border-top: 1px solid var(--c-line);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  text-align: center;
  font-size: var(--fs-note);
  color: var(--c-ink-soft);
  letter-spacing: .02em;
}

/* 移动端 375px：全站单列，无侧栏，无需断点特判；此处只收窄间距与字号 */
@media (max-width: 400px) {
  :root { --fs-h1: 25px; --fs-h2: 19px; --yao-w: 108px; --yao-h: 18px; --yao-gap: 18px; }
  .screen { padding: var(--sp-3) var(--sp-2) var(--sp-4); }
  .row { flex-wrap: wrap; }
}

/* ===== 2. 首页 + 起卦屏（T11） ===== */

/* 首页 */
.home { padding-top: var(--sp-5); }
.home__mark {
  font-size: var(--fs-note);
  letter-spacing: .35em;
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-3);
}
.home__slogan { font-size: var(--fs-h1); line-height: 1.5; }
.home__sub { color: var(--c-ink-soft); margin-bottom: var(--sp-4); }
.home__actions { margin: var(--sp-4) 0 var(--sp-5); }
.home__slot { margin-top: var(--sp-2); }

.steps { list-style: none; padding: 0; margin: 0; }
.steps li {
  display: flex; gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-note);
  color: var(--c-ink-soft);
}
.steps li:last-child { border-bottom: 1px solid var(--c-line); }
.steps__n {
  flex: none; width: 22px; height: 22px; line-height: 22px;
  text-align: center; border: 1px solid var(--c-line); border-radius: 50%;
  font-size: 12px; color: var(--c-ink);
}

/* 起卦屏 */
.cast__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.cast__title { font-size: var(--fs-h2); }

.field { margin-bottom: var(--sp-4); }
.field__label { display: block; font-size: var(--fs-note); letter-spacing: .1em; color: var(--c-ink-soft); margin-bottom: var(--sp-1); }
.field__input {
  width: 100%;
  font-family: inherit; font-size: var(--fs-body); color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 10px 12px; resize: vertical;
}
.field__input:focus { outline: none; border-color: var(--c-ink-soft); }
.field__input--num { max-width: 140px; }
.field__hint { font-size: var(--fs-note); color: var(--c-ink-soft); margin-top: var(--sp-1); }

.tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tag {
  font-family: inherit; font-size: var(--fs-note);
  padding: 6px 14px;
  background: transparent; color: var(--c-ink-soft);
  border: 1px solid var(--c-line); border-radius: 100px;
  cursor: pointer;
}
.tag--on { color: var(--c-paper); background: var(--c-ink); border-color: var(--c-ink); }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--c-line); margin-bottom: var(--sp-3); }
.tab {
  font-family: inherit; font-size: var(--fs-body);
  padding: 8px 16px; background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--c-ink-soft); cursor: pointer;
}
.tab--on { color: var(--c-ink); border-bottom-color: var(--c-accent); }

.panel { display: none; }
.panel--on { display: block; }
.panel__tip { font-size: var(--fs-note); color: var(--c-ink-soft); }
.panel__now { font-family: var(--f-latin); font-size: var(--fs-note); color: var(--c-ink-soft); }
.panel__actions { display: flex; gap: var(--sp-2); align-items: center; margin: var(--sp-2) 0; }

.row { display: flex; gap: var(--sp-3); }
.row__item { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-note); color: var(--c-ink-soft); }

/* 铜钱动画：三枚圆片，正面（有字）/背面（无字），CSS 3D 翻转 */
.coins { display: flex; gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); }
.coin {
  position: relative;
  width: 54px; height: 54px;
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.34,1.4,.64,1);
}
.coin--back { transform: rotateY(180deg); }
.coin--spin { animation: coin-spin .55s ease-out; }
@keyframes coin-spin {
  0%   { transform: rotateY(0deg)   translateY(0); }
  45%  { transform: rotateY(540deg) translateY(-14px); }
  100% { transform: rotateY(1080deg) translateY(0); }
}
.coin__face {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--c-ink);
  backface-visibility: hidden;
  background: var(--c-surface);
}
/* 正面：方孔 + 字（用文本由 JS 写入 ::after content 不便，改为背景方孔示意） */
.coin__face--front {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 8px, var(--c-ink) 8px 9.5px, transparent 9.5px),
    var(--c-surface);
}
.coin__face--front::after {
  content: "字"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px; color: var(--c-ink-soft);
}
/* 背面：素面无字，只留方孔 */
.coin__face--back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 50%, transparent 0 8px, var(--c-ink) 8px 9.5px, transparent 9.5px),
    #f2ede3;
}

.tosslog { list-style: none; padding: 0; margin: var(--sp-2) 0 0; }
.tosslog li {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  font-size: var(--fs-note); color: var(--c-ink-soft);
  border-bottom: 1px dotted var(--c-line);
  padding: 3px 0;
}
.tosslog li b { font-weight: 400; color: var(--c-ink); }

/* 卦象显示区（画法唯一实现：page_cast.js 的 YI.hexagram，输出 SVG，自下而上） */
.hexwrap { display: flex; gap: var(--sp-5); align-items: flex-end; flex-wrap: wrap; }
.hex { display: flex; flex-direction: column; align-items: center; }
.hex svg { display: block; overflow: visible; }
.hex .yao-rect { fill: var(--c-ink); }
.hex .yao-rect--moving { fill: var(--c-accent); }
.hex .yao-rect--ph { fill: var(--c-line); }
.hex .yao-mark { fill: var(--c-accent); font-size: 11px; }
.hex__cap { font-size: var(--fs-note); color: var(--c-ink-soft); margin-top: var(--sp-1); letter-spacing: .08em; }

/* ===== 3. 结果屏 + 卦册（T12 预留区，T13 组装补齐样式） ===== */
/* 本区块归属 T12：卦象对照区、六段报告纵排、卦册列表与二次确认。 */
/* 承接沿革：T12 由 TC-TraeCN 改派 TA-TeleAgent；样式在 T13 组装时补齐。 */
.result__mount { min-height: 40vh; }

.notice {
  border: 1px dashed var(--c-line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  color: var(--c-ink-soft);
  background: var(--c-surface);
}
.notice__title { color: var(--c-ink); font-size: var(--fs-body); margin-bottom: var(--sp-1); }
.notice__body { font-size: var(--fs-note); }

/* ---- 六段报告纵排（T10 规范 §6.3） ---- */
.result__sec { border-top: 1px solid var(--c-line); padding: var(--sp-4) 0 var(--sp-3); }
.result__sec:first-of-type { border-top: none; padding-top: 0; }
.sec__label {
  font-size: var(--fs-note); letter-spacing: .1em; color: var(--c-ink-soft);
  margin-bottom: var(--sp-2);
}
.meta-line { font-size: var(--fs-note); color: var(--c-ink-soft); margin: 0 0 var(--sp-1); }
.meta-key { display: inline-block; width: 3.5em; color: var(--c-ink-soft); }
.meta-val { color: var(--c-ink); font-family: var(--f-latin); }
.moving-line { color: var(--c-ink-soft); margin-top: var(--sp-2); }

/* 卦象对照区：本卦左、变卦右，无变卦不渲染右块（T10 规范 §4.4） */
.hexpair {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: var(--sp-5); margin-top: var(--sp-2);
}
.hexblock { display: flex; flex-direction: column; align-items: center; }
.hexblock .hex-svg svg { display: block; }
/* 结果屏卦象配色与起卦区一致（选择器兼容 .hexblock 容器，动爻朱砂必须生效） */
.hexblock .yao-rect { fill: var(--c-ink); }
.hexblock .yao-rect--moving { fill: var(--c-accent); }
.hexblock .yao-rect--ph { fill: var(--c-line); }
.hexblock .yao-mark { fill: var(--c-accent); font-size: 11px; }
.hexname { font-size: var(--fs-note); color: var(--c-ink-soft); margin-top: var(--sp-1); letter-spacing: .08em; }

/* 经典引用 */
.quote { border-left: 2px solid var(--c-line); padding-left: 14px; margin: 0 0 var(--sp-3); }
.quote__text { font-size: var(--fs-body); line-height: 1.9; margin: 0 0 4px; }
.quote__from { font-size: var(--fs-note); color: var(--c-ink-soft); margin: 0; }

/* 卦义白话 */
.reading-summary { margin: 0 0 var(--sp-3); }
.sit-intro { font-size: var(--fs-note); color: var(--c-ink-soft); margin: 0 0 var(--sp-2); line-height: 1.8; }
.situation { margin: 0 0 var(--sp-2); padding-left: 12px; border-left: 2px solid var(--c-line); }
.situation--active { border-left-color: var(--c-accent); }
.situation__key { font-size: var(--fs-note); color: var(--c-ink-soft); margin-right: .6em; }
.situation p { margin: 2px 0 0; }
.caution {
  background: var(--c-accent-soft); border-left: 2px solid var(--c-accent);
  padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-note);
}

/* 行动建议 */
.advice { margin: 0; padding-left: 1.3em; }
.advice li { margin-bottom: var(--sp-2); }

/* 复盘提示 + 存入 */
.review { font-size: var(--fs-note); color: var(--c-ink-soft); margin-bottom: var(--sp-3); }
.sec-empty { font-size: var(--fs-note); color: var(--c-ink-soft); }

/* ---- 卦册面板（列表/删除/清空） ---- */
.album-panel {
  position: fixed; inset: 0; z-index: 40;
  background: var(--c-paper);
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-3) var(--sp-5);
}
.album-panel__head {
  display: flex; justify-content: space-between; align-items: baseline;
  max-width: var(--maxw); margin: 0 auto var(--sp-3);
}
.album-panel__head h2 { margin: 0; }
.album-panel > .notice { max-width: var(--maxw); margin: 0 auto var(--sp-3); }
.album-list { list-style: none; padding: 0; margin: 0 auto var(--sp-3); max-width: var(--maxw); }
.album-item {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
  border-bottom: 1px solid var(--c-line); min-height: 48px;
}
.album-item:first-child { border-top: 1px solid var(--c-line); }
.album-item__open {
  flex: 1; text-align: left; background: none; border: none; cursor: pointer;
  font-family: inherit; padding: var(--sp-2) 0;
}
.album-item__head { display: block; color: var(--c-ink); font-size: var(--fs-body); }
.album-item__sub { display: block; font-size: var(--fs-note); color: var(--c-ink-soft); margin-top: 2px; }
.album-item__del { flex: none; }
.album-panel__foot { max-width: var(--maxw); margin: 0 auto; }

/* ---- 375px 结果屏 ---- */
@media (max-width: 400px) {
  .hexwrap { gap: var(--sp-3); }
  .btn--block { width: 100%; }
  .album-panel { padding: var(--sp-3) var(--sp-2) var(--sp-4); }
}

/* ===== T12 样式写入区（结果屏与卦册样式已在本区块内完成，T13 组装补齐） ===== */

/* ============================================================
 * ===== 4. v2 增补（ZCode 2026-10-27；令牌全部沿用区块 0） =====
 * 覆盖：类别识别提示 / 问法示例 / 三卦对照 / 动爻详解 / 传统义理 /
 *       趋势与边界 / 思考问题 / 到期提醒 / 状态角标 / 回填表单
 * ============================================================ */

/* 结果屏头部（v2 增补：返回首页按钮 + 标题，风格同起卦屏） */
.result__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-3);
}

/* 起卦屏：自动识别提示 + 问法示例 */
.suggest { font-size: var(--fs-note); color: var(--c-ink-soft); margin: var(--sp-1) 0 0; }
.suggest--hit { color: var(--c-accent); }
.examples { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); }
.example {
  text-align: left; font-family: inherit; font-size: var(--fs-note); color: var(--c-ink-soft);
  background: var(--c-surface); border: 1px dashed var(--c-line); border-radius: var(--radius);
  padding: 6px 10px; cursor: pointer; line-height: 1.6;
}
.example:hover { border-color: var(--c-ink-soft); color: var(--c-ink); }

/* 结果屏：三卦对照（本卦 / 变卦 / 互卦），互卦弱化显示 */
.hexrow {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: var(--sp-4); margin-top: var(--sp-2);
}
.hexblock--soft { opacity: .72; }

/* 动爻详解 */
.mov { border-left: 2px solid var(--c-accent); padding: 2px 0 2px 12px; margin: var(--sp-2) 0; }
.mov__head { margin: 0 0 4px; font-size: var(--fs-body); }
.mov__head b { font-weight: 400; color: var(--c-accent); letter-spacing: .06em; }
.mov__head span { font-size: var(--fs-note); color: var(--c-ink-soft); margin-left: .5em; }
.mov__quote { margin: 0 0 4px; color: var(--c-ink-soft); font-size: var(--fs-note); }
.mov__baihua { margin: 0 0 4px; line-height: 1.8; }
.mov__wei { margin: 0; font-size: var(--fs-note); color: var(--c-ink-soft); line-height: 1.7; }

/* 传统义理块 */
.tongyi {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3); font-size: var(--fs-note); line-height: 1.8;
}
.tongyi p { margin: 4px 0 0; }
.tongyi__tag {
  font-size: var(--fs-note); color: var(--c-ink-soft); letter-spacing: .1em;
  border-bottom: 1px solid var(--c-line); padding-bottom: 2px;
}

/* 经典引用：可读引文 + 白话 */
.quote__cite { font-size: var(--fs-note); color: var(--c-accent); margin: 0 0 2px; letter-spacing: .06em; }
.quote__baihua { margin: 4px 0 0; font-size: var(--fs-note); line-height: 1.8; }
.sec-hint { font-size: var(--fs-note); color: var(--c-ink-soft); margin: var(--sp-2) 0 0; }

/* 趋势与边界 */
.trend { margin: 0 0 var(--sp-2); line-height: 1.8; }
.trend b {
  font-weight: 400; color: var(--c-ink-soft); margin-right: .6em;
  border: 1px solid var(--c-line); border-radius: var(--radius); padding: 0 6px; font-size: var(--fs-note);
}
.uncertain {
  font-size: var(--fs-note); color: var(--c-ink-soft); background: var(--c-surface);
  border: 1px dashed var(--c-line); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
}

/* 思考问题 */
.reflect { margin: 0; padding-left: 1.3em; }
.reflect li { margin-bottom: var(--sp-2); line-height: 1.8; }

/* 首页：到期提醒 */
.reminder {
  border: 1px solid var(--c-accent); border-radius: var(--radius);
  background: var(--c-accent-soft); padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2); max-width: var(--maxw);
}
.reminder__text { margin: 0 0 var(--sp-2); font-size: var(--fs-note); line-height: 1.7; }
.reminder__btn { background: var(--c-surface); }

/* 卦册：状态角标 / 操作列 / 回填表单 */
.chip {
  display: inline-block; vertical-align: 2px; margin-left: 8px;
  font-size: 11px; color: var(--c-ink-soft); border: 1px solid var(--c-line);
  border-radius: 999px; padding: 0 8px; line-height: 18px; letter-spacing: .05em;
}
.chip--done  { color: #2e5d3a; border-color: #2e5d3a; }
.chip--not   { color: var(--c-accent); border-color: var(--c-accent); }
.chip--watch { color: #7a5b1e; border-color: #7a5b1e; }
.album-item__ops { display: flex; gap: var(--sp-1); flex: none; }
.album-item__note { display: block; font-size: var(--fs-note); color: var(--c-ink-soft); margin-top: 2px; }
.backfill {
  border-top: 1px dashed var(--c-line); padding: var(--sp-2) 0 var(--sp-3); margin-top: var(--sp-1);
}
.backfill[hidden] { display: none; }
.bf-row { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.bf-opt { cursor: pointer; }
.bf-note { width: 100%; resize: vertical; }
.bf-note + .panel__actions { margin-top: var(--sp-2); }

/* 首页知识库入口（v3.1） */
.home__link { text-align: center; margin: var(--sp-3) 0 0; }
.home__link a { color: var(--c-accent); text-decoration: none; letter-spacing: .04em; }
.home__link a:hover { text-decoration: underline; }

/* 危机兜底面板（v3） */
.crisis {
  background: var(--c-accent-soft); border: 1px solid var(--c-accent); border-radius: var(--radius);
  padding: var(--sp-3); margin-top: var(--sp-3);
}
.crisis[hidden] { display: none; }
.crisis__title { color: var(--c-accent); margin: 0 0 var(--sp-2); font-size: var(--fs-body); }
.crisis__line { margin: 0 0 var(--sp-1); font-size: var(--fs-note); line-height: 1.8; }

/* 卦册本地统计（v3） */
.album-stats {
  font-size: var(--fs-note); color: var(--c-ink-soft);
  border-top: 1px dashed var(--c-line); padding-top: var(--sp-2); margin: 0 0 var(--sp-2);
}

/* v4.6：手动点爻面板已下线（原 #manual-yao 下拉样式随之移除） */

/* 375px v2 增补 */
@media (max-width: 400px) {
  .hexrow { gap: var(--sp-3); }
  .album-item { flex-wrap: wrap; }
  .album-item__ops { width: 100%; justify-content: flex-end; }
}


/* ====== v3.2(AutoClaw) 增补：问题回照 / 处境共情 / 卦性分型 / 读卦小词典 ====== */
.sit-empathy {
  margin: var(--sp-2) 0; padding: 10px 14px;
  background: #fffdf9; border-left: 3px solid var(--c-accent);
  color: #5a4a3a; font-size: var(--fs-note); line-height: 1.9;
}
.gloss { margin: var(--sp-2) 0 0; font-size: var(--fs-note); color: var(--c-ink-soft); }
.gloss summary { cursor: pointer; letter-spacing: .05em; }
.gloss dl { margin: var(--sp-1) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.gloss dt { color: var(--c-ink); white-space: nowrap; }
.gloss dd { margin: 0; line-height: 1.8; }
.advice-tier { font-size: var(--fs-note); color: var(--c-ink-soft); margin: 0 0 var(--sp-1); letter-spacing: .03em; }

/* v3.2.1：「古人怎么看」卡片出处小字 */
.tongyi__src { margin-top: 6px; font-size: var(--fs-note); color: var(--c-ink-soft); }

/* ====== v3.3(Doubao) 信任度增补：信任声明 / 识别提醒 / 理解卡片 / 来源小字 ====== */

/* 首页：为什么可以信 */
.home__trust {
  margin-top: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  padding: var(--sp-3);
}
.trust__title {
  font-size: var(--fs-note);
  letter-spacing: .15em;
  color: var(--c-ink-soft);
  margin: 0 0 var(--sp-2);
}
.trust__list { list-style: none; padding: 0; margin: 0; }
.trust__list li {
  font-size: var(--fs-note);
  color: var(--c-ink-soft);
  line-height: 1.8;
  margin: 0 0 var(--sp-1);
}
.trust__list li:last-child { margin-bottom: 0; }
.trust__list b { color: var(--c-ink); font-weight: 400; margin-right: .3em; }

/* 起卦屏：识别失败醒目提示（有文字但未识别且未手选） */
.suggest--miss {
  color: #7a5b1e;
  background: #faf3e3;
  border: 1px solid #e3d3ab;
  border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-2);
}

/* 结果屏：我如何理解你的问题（可纠正卡片） */
.understand {
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius);
  background: var(--c-surface);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.understand__head {
  font-size: var(--fs-note);
  letter-spacing: .1em;
  color: var(--c-ink-soft);
  margin: 0 0 var(--sp-1);
}
.understand__q { margin: 0 0 4px; line-height: 1.8; }
.understand__cat {
  font-size: var(--fs-note);
  color: var(--c-ink-soft);
  margin: 0;
  line-height: 1.9;
}
.understand__extra {
  font-size: var(--fs-note);
  color: var(--c-ink-soft);
  margin: 6px 0 0;
  line-height: 1.8;
  border-top: 1px dashed var(--c-line);
  padding-top: 6px;
}
.understand__fix {
  margin-left: 6px;
  padding: 2px 10px;
  font-size: var(--fs-note);
  color: var(--c-accent);
  border-color: var(--c-accent);
  vertical-align: baseline;
}
.understand__fix:hover { background: var(--c-accent-soft); }
.understand__picker {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--c-line);
  font-size: var(--fs-note);
  color: var(--c-ink-soft);
}
.understand__picker[hidden] { display: none; }
.understand__picker .tags { margin-top: var(--sp-1); }

/* 报告段内：来源小字 */
.sec-src {
  font-size: var(--fs-note);
  color: var(--c-ink-soft);
  margin: var(--sp-2) 0 0;
  line-height: 1.7;
}

/* ====== v3.4(Doubao) 信任度增补：结构化补充输入 / 问题层张力块 ====== */

/* 起卦屏：补充你的选择（选填） */
.struct {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-line);
}
.struct__row {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.struct__item { display: block; flex: 0 1 auto; }
.struct__item--grow { flex: 1 1 0; }
.struct__tag {
  display: block;
  font-size: var(--fs-note);
  color: var(--c-ink-soft);
  margin-bottom: 4px;
}
.struct .field__input { width: 100%; }
@media (max-width: 560px) {
  .struct__row { flex-direction: column; gap: var(--sp-2); }
}

/* 结果屏：问题层张力块（第五段内） */
.sit-tension {
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--c-accent);
  background: var(--c-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height: 1.8;
  font-size: var(--fs-body);
}
.sit-tension__tag {
  display: inline-block;
  font-size: var(--fs-note);
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: 999px;
  padding: 0 10px;
  margin-right: 6px;
  vertical-align: 1px;
}

/* v3.5：卦层底色块（与张力块区分：白底描边，无左侧强调线） */
.sit-factor {
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  line-height: 1.8;
  font-size: var(--fs-body);
}

/* ====== v3.6(Doubao) 信任度增补：一件事只问一次（诚实定位 + 防重复） ====== */

/* 首页 hero 小字 */
.home__note {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-note);
  color: var(--c-ink-soft);
  line-height: 1.7;
}

/* 起卦屏：只问一次说明 */
.cast-note {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--c-line);
  border-radius: var(--radius);
  font-size: var(--fs-note);
  color: var(--c-ink-soft);
  line-height: 1.8;
}

/* 结果屏理解卡片：定位小字 */
.understand__note {
  font-size: var(--fs-note);
  color: var(--c-ink-soft);
  margin: 6px 0 0;
  line-height: 1.8;
  border-top: 1px dashed var(--c-line);
  padding-top: 6px;
}


/* ============================================================
 * ===== 5. v4 增补：天象首页（ZouWu 驺吾） =====
 * ------------------------------------------------------------
 * 目标：首屏给「古老、庄严、宏大」的天意感——
 *   满屏天图（img/hero-tianmen-*.jpg 卦象天门）+ js/heaven.js 的活能量层；
 *   天图之下以纸面板承接阅读区（使用说明 + 信任声明）；
 *   页尾再以第二重天象引向六十四卦知识库。
 * 暗色只用于首页天象层：起卦屏与结果屏沿用 v3 的纸面阅读体系，
 * 保住长文阅读的舒适度，也保住 v3 的信息密度与可读性。
 * 本块只追加不删改：v1–v3 的样式原样保留，便于回退与对照。
 * ============================================================ */

:root {
  --c-night: #070a12;            /* 天象夜底 */
  --c-gold: #d9b877;             /* 古金 */
  --c-gold-hi: #f4e2b4;          /* 亮金 */
  --c-gold-line: rgba(217, 184, 119, .30);
  --c-night-ink: #ece6d8;        /* 天象层字色 */
  --c-night-ink-soft: rgba(236, 230, 216, .74);
}

/* 天图满幅时不留纸白边（overscroll 也压成夜色） */
html { background: var(--c-night); }

/* 首页取消 640px 窄栏，改为满幅 */
.screen--home { max-width: none; padding: 0; }
.home { padding-top: 0; }

/* ---------- 天象首屏 ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--c-night);
  isolation: isolate;
}
@supports (min-height: 100svh) { .hero { min-height: 100svh; } }

.hero__sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__sky picture { display: block; width: 100%; height: 100%; }
.hero__sky img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  display: block;
}
.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}
/* 天图上的压暗层（v4.2 天门图：暖黑，贴合金铜画面）
   ① 文字区椭圆压暗——标题、印章、按钮从金光里浮出来；
   ② 天门光心只压边缘——保住门里那道最亮的「路」；
   ③ 上下收边——把画面收成舞台。 */
.hero__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(50% 27% at 50% 47%, rgba(12,8,4,.86) 0%, rgba(12,8,4,.62) 40%, rgba(12,8,4,0) 74%),
    radial-gradient(78% 52% at 50% 18%, rgba(12,8,4,0) 0%, rgba(12,8,4,.22) 62%, rgba(12,8,4,.44) 100%),
    linear-gradient(180deg, rgba(12,8,4,.58) 0%, rgba(12,8,4,.12) 18%, rgba(12,8,4,.22) 55%, rgba(12,8,4,.90) 100%);
}

.hero__inner {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
  color: var(--c-night-ink);
}
.hero .home__mark {
  color: var(--c-gold);
  letter-spacing: .42em;
  text-shadow: 0 1px 10px rgba(0,0,0,.65);
}
.hero .home__slogan {
  font-size: clamp(28px, 6.4vw, 46px);
  line-height: 1.45;
  letter-spacing: .08em;
  text-shadow: 0 2px 22px rgba(0,0,0,.70), 0 0 48px rgba(217,184,119,.20);
}
.hero .home__sub {
  color: var(--c-night-ink-soft);
  font-size: 15px;
  margin-bottom: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,.65);
}

/* 印章（朱砂，沿用全站强调色） */
.hero__seal {
  width: 54px; height: 54px;
  margin: 0 auto var(--sp-3);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #b8452f, #8e2a1d);
  color: #fdf3e6;
  font-family: var(--f-cjk);
  font-size: 28px;
  border-radius: 4px;
  transform: rotate(-3deg);
  box-shadow: 0 0 28px rgba(166,58,43,.42), inset 0 0 0 1px rgba(253,243,230,.34);
}

/* 主行动按钮：古金 */
.btn--gold {
  background: linear-gradient(180deg, var(--c-gold-hi), var(--c-gold));
  color: #241a08;
  border-color: rgba(255,246,224,.55);
  font-weight: 600;
  box-shadow: 0 0 34px rgba(217,184,119,.36);
}
.btn--gold:hover {
  background: linear-gradient(180deg, #fff4d8, var(--c-gold-hi));
  border-color: rgba(255,246,224,.8);
  box-shadow: 0 0 46px rgba(217,184,119,.55);
}

.hero .home__actions { margin: var(--sp-4) 0 0; }
.hero .home__note { color: var(--c-night-ink-soft); }
.hero .home__slot { margin-top: var(--sp-2); }
.hero .album-entry { color: var(--c-gold); }
.hero .album-entry:hover { color: var(--c-gold-hi); }

/* 向下提示 */
.hero__scroll {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 20px;
  margin: 0; text-align: center;
  font-size: 12px; letter-spacing: .5em;
  color: rgba(236,230,216,.55);
}
.hero__scroll span {
  display: inline-block; padding-left: .5em;
  animation: hero-scroll 2.8s ease-in-out infinite;
}
@keyframes hero-scroll {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50%      { transform: translateY(7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll span { animation: none; }
}

/* ---------- 纸面承接 ---------- */
.home__paper {
  position: relative; z-index: 4;
  max-width: 700px;
  margin: -64px auto 0;
  background: var(--c-paper);
  border-top: 2px solid var(--c-gold);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -26px 60px rgba(7,10,18,.42);
}
.home__paper-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-3);
}

/* ---------- 第二重天象：知识库入口 ---------- */
.home__gate {
  position: relative;
  overflow: hidden;
  background: var(--c-night);
  color: var(--c-night-ink);
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
  isolation: isolate;
}
.home__gate__bg { position: absolute; inset: 0; z-index: 0; }
.home__gate__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  display: block;
  opacity: .60;
}
.home__gate__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(92% 72% at 50% 50%, rgba(7,10,18,.70) 0%, rgba(7,10,18,.44) 56%, rgba(7,10,18,.78) 100%),
    linear-gradient(180deg, var(--c-night) 0%, rgba(7,10,18,.28) 32%, var(--c-night) 100%);
}
.home__gate__inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; }
.home__gate__mark {
  font-size: var(--fs-note);
  letter-spacing: .4em;
  color: var(--c-gold);
  margin-bottom: var(--sp-2);
}
.home__gate__title { font-size: var(--fs-h2); letter-spacing: .06em; margin-bottom: var(--sp-2); }
.home__gate__sub { color: var(--c-night-ink-soft); font-size: var(--fs-note); margin-bottom: var(--sp-2); }
.home__link--gate a {
  color: var(--c-gold);
  text-decoration: none;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--c-gold-line);
  padding-bottom: 2px;
}
.home__link--gate a:hover { color: var(--c-gold-hi); border-bottom-color: var(--c-gold); }

/* ---------- v4 响应式 ---------- */
@media (max-width: 700px) {
  .hero__sky img { object-position: 50% 42%; }
  .home__paper { margin-top: -40px; border-radius: 3px 3px 0 0; }
  .hero .home__slogan { letter-spacing: .04em; }
  .hero__seal { width: 48px; height: 48px; font-size: 25px; }
  .hero__scroll { bottom: 12px; }
}

/* ============================================================
 * ===== 6. v4.3 增补：天光版首页（明亮清新） =====
 * ------------------------------------------------------------
 * 反馈：v4.2 的暗色天象层太压抑。
 * 改法：天意不再由「夜色 + 暖黑压暗」承担，改由「晨光天门」承担——
 *   ① 静态天图换成 img/hero-tianmen-day-*.jpg（晨曦天光、白气清朗）；
 *   ② 压暗层改成提亮层：文字区浮白 + 暖色收边，字色由浅转深（墨字）；
 *   ③ 天象层能量层（js/heaven.js）由「加色发光」改为「暖金浮尘 + 青铜刻线」；
 *   ④ 页尾第二重天象同步转亮。
 * 庄严感改由尺度（天门、长阶、远峰）与金色光柱承担——不是靠黑。
 * 结果：首页与下方纸面板、起卦屏、结果屏连成同一张「纸」，全站气质统一。
 * 本块为覆盖层：删掉整块即可回到 v4.2 暗色天象版。
 * ============================================================ */

:root {
  --c-day-sky-1: #e9eef4;        /* 晨空冷白 */
  --c-day-sky-2: #f8f1e2;        /* 暖米 */
  --c-hero-ink: #211c15;         /* 天光层字色：深墨褐 */
  --c-hero-ink-soft: rgba(33, 28, 21, .78);
  --c-bronze: #7a5c24;           /* 古铜（亮底上的强调字） */
  --c-bronze-hi: #9c7833;
}

/* 取消夜底（覆盖 v4 的 html 夜色底，overscroll 露纸白） */
html { background: var(--c-paper); }

/* ---------- 天光首屏 ---------- */
.hero {
  background: linear-gradient(180deg, var(--c-day-sky-1) 0%, var(--c-day-sky-2) 58%, #fbf7ee 100%);
}
.hero__canvas {
  mix-blend-mode: normal;        /* 亮底上不再用 screen（会被吃没） */
}

/* 提亮层：① 文字区浮白，标题/印章/按钮从晨光里浮出来；
   ② 上方留一层薄暖白，提亮天空；③ 下缘暖色收边，把画面收成舞台。 */
.hero__veil {
  background:
    radial-gradient(44% 30% at 50% 47%, rgba(255, 253, 247, .78) 0%, rgba(255, 253, 247, .50) 46%, rgba(255, 253, 247, 0) 78%),
    radial-gradient(88% 58% at 50% 10%, rgba(255, 252, 242, .38) 0%, rgba(255, 252, 242, 0) 60%),
    linear-gradient(180deg, rgba(255, 251, 240, .26) 0%, rgba(255, 251, 240, 0) 20%, rgba(150, 132, 98, 0) 56%, rgba(118, 100, 68, .12) 100%);
}

.hero__inner { color: var(--c-hero-ink); }
.hero .home__mark {
  color: var(--c-bronze);
  text-shadow: 0 1px 6px rgba(255, 255, 255, .9);
}
.hero .home__slogan {
  color: #1b1610;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 6px 26px rgba(255, 255, 255, .62);
}
.hero .home__sub {
  color: var(--c-hero-ink-soft);
  text-shadow: 0 1px 8px rgba(255, 255, 255, .92);
}

/* 印章（朱砂沿用全站强调色；亮底上改用实体投影，不再发光） */
.hero__seal {
  box-shadow: 0 8px 20px rgba(120, 48, 36, .20), inset 0 0 0 1px rgba(253, 243, 230, .45);
}

/* 主行动按钮：亮底上用「墨底古金字」，庄重且压得住画面 */
.btn--gold {
  background: linear-gradient(180deg, #3b332a, #221c14);
  color: var(--c-gold-hi);
  border-color: rgba(217, 184, 119, .55);
  box-shadow: 0 12px 28px rgba(58, 46, 26, .26);
}
.btn--gold:hover {
  background: linear-gradient(180deg, #4b4235, #2c241b);
  border-color: var(--c-gold-hi);
  box-shadow: 0 14px 34px rgba(58, 46, 26, .32);
}

.hero .home__actions { margin: var(--sp-4) 0 0; }
.hero .home__note {
  color: var(--c-hero-ink-soft);
  text-shadow: 0 1px 8px rgba(255, 255, 255, .92);
}
.hero .home__slot { margin-top: var(--sp-2); }
.hero .album-entry { color: var(--c-bronze); }
.hero .album-entry:hover { color: var(--c-bronze-hi); }

/* 向下提示 */
.hero__scroll { color: rgba(64, 54, 36, .52); }

/* ---------- 纸面承接 ---------- */
.home__paper {
  border-top-color: var(--c-bronze-hi);
  box-shadow: 0 -26px 60px rgba(96, 78, 46, .16);
}

/* ---------- 第二重天象：知识库入口（同步转亮） ---------- */
.home__gate {
  background: linear-gradient(180deg, #fbf7ee 0%, #f2ebdb 100%);
  color: var(--c-hero-ink);
}
.home__gate__veil {
  background:
    radial-gradient(92% 76% at 50% 48%, rgba(255, 253, 247, .74) 0%, rgba(255, 253, 247, .42) 54%, rgba(255, 253, 247, .18) 100%),
    linear-gradient(180deg, rgba(255, 251, 240, .55) 0%, rgba(255, 251, 240, 0) 28%, rgba(118, 100, 68, .12) 100%);
}
.home__gate__mark { color: var(--c-bronze); }
.home__gate__sub { color: var(--c-hero-ink-soft); }
.home__link--gate a {
  color: var(--c-bronze);
  border-bottom-color: rgba(138, 106, 46, .42);
}
.home__link--gate a:hover { color: var(--c-bronze-hi); border-bottom-color: var(--c-bronze); }

/* ============================================================
 * ===== 7. v4.4 增补：撤掉首页底图（文字优先） =====
 * ------------------------------------------------------------
 * 反馈：底图干扰首屏文字。
 * 改法：首屏与页尾横幅都不再铺照片，只留
 *   ① 天光渐变（顶部一道暖金「门内之光」，代替照片里的金光）；
 *   ② 远山轮廓（CSS 剪影，两层，代替照片里的远峰）；
 *   ③ js/heaven.js 的能量层（卦爻天仪 + 金色浮尘 + 光带）继续动。
 * 结果：画面依然有天意与尺度感，但文字完全独占画面，无任何底图干扰。
 * 本块为覆盖层：删掉整块即可回到 v4.3 有底图版本。
 * ============================================================ */

/* ---------- 首屏：天光 + 远山 ---------- */
.hero {
  background:
    /* 门内那道金光：顶部中央的暖金光源 */
    radial-gradient(42% 38% at 50% 4%, rgba(255, 206, 122, .48) 0%, rgba(255, 224, 164, .26) 40%, rgba(255, 240, 210, 0) 72%),
    /* 远山剪影：两层山脊 */
    radial-gradient(120% 34% at 18% 100%, rgba(140, 152, 168, .30) 0%, rgba(140, 152, 168, 0) 100%),
    radial-gradient(130% 30% at 78% 100%, rgba(126, 138, 156, .26) 0%, rgba(126, 138, 156, 0) 100%),
    linear-gradient(180deg, var(--c-day-sky-1) 0%, var(--c-day-sky-2) 58%, #fbf7ee 100%);
}

/* 照片撤掉后，v4 区块里针对 picture / .home__gate__bg 的规则已全部失效
   （对应元素已从 index.html 删除）；此处不写覆盖规则，避免误导。 */

/* ---------- 页尾横幅：纯天光 ---------- */
.home__gate {
  background:
    radial-gradient(38% 46% at 50% 0%, rgba(255, 208, 126, .34) 0%, rgba(255, 226, 170, 0) 70%),
    radial-gradient(120% 40% at 22% 100%, rgba(140, 152, 168, .22) 0%, rgba(140, 152, 168, 0) 100%),
    radial-gradient(120% 36% at 76% 100%, rgba(126, 138, 156, .18) 0%, rgba(126, 138, 156, 0) 100%),
    linear-gradient(180deg, #fbf7ee 0%, #f2ebdb 100%);
}

/* ---------- v4.4 响应式 ---------- */
@media (max-width: 700px) {
  .hero__veil {
    background:
      radial-gradient(72% 22% at 50% 44%, rgba(255, 253, 247, .80) 0%, rgba(255, 253, 247, .52) 48%, rgba(255, 253, 247, 0) 80%),
      radial-gradient(92% 40% at 50% 8%, rgba(255, 252, 242, .40) 0%, rgba(255, 252, 242, 0) 62%),
      linear-gradient(180deg, rgba(255, 251, 240, .24) 0%, rgba(255, 251, 240, 0) 18%, rgba(150, 132, 98, 0) 60%, rgba(118, 100, 68, .10) 100%);
  }
}



/* ============================================================
 * ===== 6. v5 增补：次数池门槛面板（ZouWu 驺吾） =====
 * ============================================================ */
.gate-panel{max-width:520px;margin:40px auto;padding:26px 24px;background:#fffdf9;border:1px solid #ded8cc;border-radius:6px;text-align:center;}
.gate-panel__title{font-size:20px;font-weight:400;margin:0 0 10px;letter-spacing:.04em;}
.gate-panel p{font-size:14px;color:#4a453f;line-height:1.8;margin:8px 0;}
.gate-panel__packs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 6px;}
.gate-panel__redeem{display:flex;gap:8px;justify-content:center;margin:16px 0 6px;}
.gate-code{flex:1;max-width:260px;padding:9px 12px;border:1px solid #ded8cc;border-radius:3px;font-size:14px;background:#faf8f3;color:#2b2b2b;}
.gate-code:focus{outline:none;border-color:#a63a2b;}
@media(max-width:480px){.gate-panel{margin:20px 12px;padding:20px 16px;}}