/* AI 六壬算卦网页 · 样式（移动端优先，水色系：黑+蓝） */
/* v0.4 主题改为水色（黑色+蓝色系），字体跟随系统，去掉楷体 */
/* B1（9/4）：课式块改等宽中英混排 */
/* 2026-09-22：去掉 Google Fonts @import（国内不可达、且阻塞首屏）；
   盘面为 CJK 等宽，系统字体（YaHei/PingFang/Noto CJK）即可对齐；宋体标题走本地自托管子集。 */
:root {
  --primary: #0ea5e9;            /* 天蓝主色（9/4 ADE 拍板，原 #1f6feb） */
  --primary-deep: #0369a1;       /* 深天蓝 */
  --primary-bg: #e0f2fe;         /* 淡天蓝背景 */
  --primary-fg: #ffffff;
  --bg-page: #f4f7fa;            /* 极浅冷调底 */
  --bg-card: #ffffff;
  --bg-card-2: #f8fafc;
  --border: #e2e8f0;
  --border-light: #edf2f7;
  --text-1: #0f172a;             /* 近黑 */
  --text-2: #1e293b;
  --text-3: #475569;
  --text-4: #64748b;
  --warn-bg: #fef3f2;
  --warn-border: #fecaca;
  --warn-fg: #b91c1c;
  --xiankong: #b91c1c;
  --code-bg: #0f172a;            /* 深色代码块底 */
  --code-fg: #e2e8f0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  background: var(--bg-page); color: var(--text-1); line-height: 1.7; -webkit-font-smoothing: antialiased;
  /* 为底部 tab 留空间 */
  padding-bottom: 64px;
}
.wrap { max-width: 560px; margin: 0 auto; padding: 16px 16px 24px; }

/* ========== 顶部品牌色带（水蓝） ========== */
.topbar {
  background: var(--primary);
  color: var(--primary-fg);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.topbar-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 4px;
  margin: 0;
}
.topbar-share {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.18);
  color: var(--primary-fg);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 16px;
  padding: 4px 10px 4px 8px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.topbar-share svg { stroke: var(--primary-fg); }
.topbar-share:active { background: rgba(255,255,255,0.3); }

/* ========== 表单（index.html） ========== */
.form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}
.form-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.form-row:last-child { border-bottom: none; padding-bottom: 0; }
.form-row-2 {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}
.form-col { flex: 1; }
.form-row-2 .form-col { padding: 10px 0; border-bottom: none; }
.form-label {
  display: block;
  font-size: 13px;
  color: var(--text-4);
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.form-tip {
  font-size: 11px;
  color: var(--text-4);
  margin-left: 6px;
  font-weight: 400;
}
input[type=text], input[type=number], input[type=datetime-local], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
  color: var(--text-1);
  font-family: inherit;
}
.form-hz { margin-top: 8px; }
.form-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--primary-deep);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}
.radio-row {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}
.radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
}
.radio input[type="radio"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
}
.form-err {
  font-size: 13px;
  color: var(--warn-fg);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 8px;
}
.hint { font-size: 12px; color: var(--text-4); margin-top: 4px; }

.card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px; margin-bottom: 16px;
}
.brand { font-size: 13px; letter-spacing: 2px; color: var(--text-4); margin-bottom: 24px; }
h1 { font-size: 26px; font-weight: 700; line-height: 1.45; margin-bottom: 10px; }
.sub { font-size: 15px; color: var(--text-3); margin-bottom: 26px; }
.points { list-style: none; }
.points li { font-size: 14px; color: var(--text-2); margin-bottom: 10px; padding-left: 22px; position: relative; }
.points li::before { content: "·"; position: absolute; left: 6px; color: var(--text-4); font-weight: 700; }
label { display: block; font-size: 14px; color: var(--text-2); margin: 14px 0 6px; }

/* ========== 落地页样例展示 ========== */
.samples {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}
.sample-card {
  background: #fffdf8;
  border: 1px solid #e8e0cf;
  border-radius: 12px;
  padding: 16px;
}
.sample-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.sample-tag {
  font-size: 12px;
  padding: 2px 8px;
  background: var(--primary);
  color: #fff;
  border-radius: 4px;
  letter-spacing: 1px;
}
.sample-q {
  font-size: 13px;
  color: #8a7d63;
  font-family: "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
}
.sample-pan {
  margin: 8px 0 10px;
}
.mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  aspect-ratio: 4 / 3;
  max-width: 320px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.mini-cell {
  background: #fffdf8;
  border: 1px solid #e8e0cf;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 5px;
  font-family: "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
  min-height: 32px;
}
.mini-cell .mini-dipan {
  font-size: 12px;
  color: #6b6659;
}
.mini-cell .mini-tian {
  font-size: 13px;
  font-weight: 700;
  color: #2b2a26;
}
.mini-cell .mini-tian.xk-mark { color: #9c5a3c; }
.mini-cell.mini-xk-dipan { background: #faf0e6; }
.mini-cell.mini-gui {
  background: var(--primary);
  border-color: var(--primary-deep);
}
.mini-cell.mini-gui .mini-dipan,
.mini-cell.mini-gui .mini-tian { color: #fff; }
.mini-cell.mini-gui .mini-tian.xk-mark { color: #f0d8a8; }
.mini-legend {
  text-align: center;
  font-size: 11px;
  color: #8a7d63;
  margin-top: 6px;
  letter-spacing: 0.5px;
}
.mini-legend .lg-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  margin-right: 3px;
  vertical-align: middle;
}
.mini-legend .lg-gui { background: var(--primary); }
.mini-legend .lg-xk-d { background: #faf0e6; border: 1px solid #ecd9c2; }
.mini-legend .xk-mark { color: #9c5a3c; font-weight: 700; }

.sample-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 6px;
  padding-top: 8px;
  border-top: 1px dashed #e8e0cf;
}
.sample-keti {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.sample-keti .keti-tag {
  margin-top: 0;
  font-size: 12px;
  padding: 2px 8px;
}
.sample-sc {
  font-size: 13px;
  color: #3c382d;
  font-family: "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
}
.sample-sc b {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 1px;
}
.sample-line {
  font-size: 14px;
  color: #4c4840;
  line-height: 1.7;
  margin-top: 8px;
  font-family: "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
}
.sample-cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px dashed var(--primary);
  padding-bottom: 1px;
}
.sample-cta:hover { color: var(--primary-deep); border-bottom-color: var(--primary-deep); }
input[type=text], input[type=number], input[type=datetime-local], select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #ddd3bd; border-radius: 8px;
  font-size: 15px; background: #fff; color: #2b2a26; font-family: inherit;
}
textarea { min-height: 90px; resize: vertical; }
.hint { font-size: 12px; color: #9a927f; margin-top: 4px; }
.btn {
  display: block; width: 100%; padding: 14px; border: none; border-radius: 10px;
  background: var(--primary); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
  margin-top: 20px; letter-spacing: 1px;
}
.btn:active { opacity: .85; }
.btn.secondary { background: #f0e8d5; color: #5a5340; font-weight: 500; }
.btn.ghost { background: transparent; border: 1px solid #cfc4a8; color: #6b6659; font-weight: 500; }
.foot { font-size: 12px; color: #a39a83; text-align: center; margin-top: 30px; }
.tag { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 4px;
  background: #f0e8d5; color: #6b6659; margin-right: 6px; }
.warn { font-size: 13px; color: #9c5a3c; background: #faf0e6; border: 1px solid #ecd9c2;
  border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.meta { font-size: 13px; color: #6b6659; margin-bottom: 10px; }
pre.pan {
  background: #f1ecdf; border-radius: 8px; padding: 12px; font-size: 12px; line-height: 1.5;
  white-space: pre; overflow-x: auto; color: #3a362c; font-family: "SF Mono", Consolas, monospace;
}
.section { font-size: 15px; font-weight: 700; margin: 22px 0 10px; color: #3c382d; }
.guwen { border-left: 3px solid #b9a97e; padding: 8px 12px; margin: 10px 0; background: #fbf7ec; }
.guwen .src { font-size: 12px; color: #8a7d63; }
.guwen .txt { font-size: 14px; color: #4c4840; margin-top: 4px; }

/* 古籍卡片 v1.1 · 双栏（原文+今释） */
.guwen-card {
  background: #fbf7ec;
  border: 1px solid #e8e0cf;
  border-left: 3px solid #b9a97e;
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin: 10px 0;
  font-family: var(--serif);
}
.gw-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #ddd3bd;
  flex-wrap: wrap;
}
.gw-key {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 1px;
}
.gw-src {
  font-size: 12px;
  color: #8a7d63;
  font-style: italic;
}
.gw-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gw-col {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.7;
}
.gw-orig {
  background: #f6f1de;
  color: #3c382d;
}
.gw-interp {
  background: var(--primary-bg);
  color: #2b2a26;
}
.gw-label {
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 4px;
  font-weight: 600;
}
.gw-orig .gw-label { color: #8a7d63; }
.gw-interp .gw-label { color: var(--primary); }
.gw-text { font-size: 13px; }
.gw-single .gw-text {
  font-size: 14px;
  color: #4c4840;
}
@media (max-width: 480px) {
  .gw-dual { grid-template-columns: 1fr; gap: 8px; }
}
.sec-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.sec-card h3 { font-size: 14px; color: var(--primary); margin-bottom: 6px; }
.sec-card p { font-size: 14px; color: #4c4840; white-space: pre-line; text-indent: 2em; line-height: 2; }
.sec-card p b.hl, .sec-card p .hl { color: var(--primary-deep); font-weight: 700; }
/* AI 生成进度条（report 页 loading，9/4 加） */
.prog { height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; margin: 8px 0 6px; }
.prog-fill { height: 100%; width: 0; background: var(--primary); border-radius: 99px; transition: width .7s ease; }
.prog-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); margin-bottom: 2px; }
.mode-tip { font-size: 12px; color: #9c5a3c; margin-top: 8px; }
/* 返回条（pan/report 页顶部，9/4 加） */
.back-bar { display: block; margin: 2px 0 10px; font-size: 15px; color: var(--primary-deep); text-decoration: none; font-weight: 500; }
.back-bar:active { opacity: .7; }
/* 节气值两行显示（meta-v 纵向）；用 .meta-row 前缀提高优先级，避免被后面的 .meta-row .meta-v 居中覆盖 */
.meta-row .meta-v.col { flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.6; }
/* 报告页盘面（reportPan，深底代码块缩放版） */
#reportPan { margin: 0 0 10px; font-size: 12.5px; line-height: 1.75; }
/* 起课时间自定义选择弹层（9/4 替换原生 datetime-local） */
.time-show { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 16px; color: var(--text-1); cursor: pointer; }
.time-show::after { content: "▾"; color: var(--text-4); font-size: 14px; }
.tp-mask { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; z-index: 99; padding: 20px; }
.tp-panel { width: 100%; max-width: 400px; background: #fff; border-radius: 14px; padding: 18px 16px 14px; }
.tp-title { font-size: 16px; font-weight: 500; color: var(--text-1); margin-bottom: 12px; }
.tp-grid { display: flex; flex-wrap: wrap; gap: 8px 4px; align-items: center; justify-content: center; margin-bottom: 16px; }
.tp-grid select { padding: 9px 6px; font-size: 16px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text-1); }
.tp-grid .tp-unit { font-size: 14px; color: var(--text-3); margin: 0 6px 0 0; }
.tp-btns { display: flex; gap: 10px; }
.tp-btn { flex: 1; padding: 12px 0; font-size: 16px; font-weight: 500; border-radius: 10px; cursor: pointer; }
.tp-clear { background: #fff; border: 1px solid var(--border); color: var(--text-3); }
.tp-cancel { background: #fff; border: 1px solid var(--border); color: var(--text-2); }
.tp-ok { background: var(--primary); border: none; color: #fff; }
/* 起课记录历史面板（9/4） */
.his-panel { display: flex; flex-direction: column; max-height: 76vh; }
.his-sub { font-size: 12px; color: var(--text-4); margin-bottom: 10px; }
.his-list { flex: 1; overflow-y: auto; margin-bottom: 12px; }
.his-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; background: #fff; }
.his-item:active { background: var(--primary-bg); }
.his-main { flex: 1; min-width: 0; }
.his-q { display: block; font-size: 15px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.his-meta { display: block; font-size: 12px; color: var(--text-4); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.his-tag { flex: 0 0 auto; font-size: 12px; color: var(--primary-deep); background: var(--primary-bg); padding: 2px 8px; border-radius: 99px; }
.his-empty { text-align: center; color: var(--text-4); font-size: 14px; padding: 24px 0; }
.center { text-align: center; }
.big { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  body { background: #1c1b17; color: #e5e0d3; }
  .card, .sec-card { background: #26241e; border-color: #3a3629; }
  .btn.secondary { background: #33301f; color: #c9c0a8; }
  pre.pan { background: #2a271f; color: #d8d0ba; }
  .guwen { background: #2e2b20; }
  .warn { background: #332a20; border-color: #4a3824; color: #d8a37c; }
  input, select, textarea { background: #2a271f; border-color: #4a4434; color: #e5e0d3; }
  .sub, .meta { color: #a49c87; }
  .foot { color: #6f6a5a; }
  .section { color: #d8d0ba; }
  .sec-card h3 { color: #7fbfae; }
}

/* ========== v0.2 课式图可视化 ========== */

/* 课体条 */
.keti-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 14px;
}
.keti-tag {
  display: inline-block;
  font-size: 13px;
  padding: 4px 10px;
  background: var(--primary); color: #fff;
  border-radius: 4px;
  font-family: "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
  letter-spacing: 1px;
}

/* 卡片标题 */
.card-title {
  font-size: 14px;
  font-weight: 700;
  color: #3c382d;
  margin-bottom: 10px;
  letter-spacing: 1px;
  border-left: 3px solid var(--primary);
  padding-left: 8px;
}

/* 盘面代码块（古籍风：宋体等宽骨架——干支全是全角字，宋体一字一格，比黑体更像课式图） */
.pan-code {
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: 8px;
  padding: 16px 18px;
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.85;
  white-space: pre;
  overflow-x: auto;
  margin: 8px 0 6px;
  letter-spacing: 0.2px;
  /* 盘面是 ASCII 版天地盘：作者按「一个半角空格 = 一个字宽」排版，
     而宋体的空格只有 0.22em ⇒ 补 0.78em 把空格撑到整字宽，环才立得起来 */
  word-spacing: .78em;
  font-feature-settings: normal;
}

/* 小屏盘面：字号收一档让主要行尽量不横向溢出（溢出时仍可左右滑） */
@media (max-width: 420px) {
  .pan-code { font-size: 12px; letter-spacing: 0; padding: 14px 12px; }
  .hero-h { font-size: 19px; }
}

/* ========== v0.3 紧凑课体条 ========== */
.lg-xk-t-dot::after {
  content: "⊙"; color: #9c5a3c; font-size: 9px;
  position: absolute; top: -2px; right: -4px;
}
.lg-divider {
  width: 1px; height: 12px;
  background: #ddd3bd;
  margin: 0 4px;
}
.lg-hint { color: #9a927f; font-size: 11px; }

/* 四课三传 双列 */
.sc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sc-col-title {
  font-size: 13px;
  color: #8a7d63;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.sc-card {
  background: #faf6ec;
  border: 1px solid #e8e0cf;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-family: "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
}
.sc-card.sc-chuan {
  background: var(--primary-bg);
  border-color: #9bd9d1;
}
.sc-pos {
  font-size: 12px;
  color: #8a7d63;
  margin-bottom: 3px;
  letter-spacing: 1px;
}
.sc-body {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.sc-shang {
  font-size: 18px;
  font-weight: 700;
  color: #2b2a26;
}
.sc-shang.xk-tian { color: #9c5a3c; }
.sc-xia {
  font-size: 14px;
  color: #6b6659;
}
.sc-meta {
  font-size: 12px;
  color: #8a7d63;
  margin-left: auto;
}
.xk-tian-inline { color: #9c5a3c; font-size: 12px; }

/* 旬空 / 陷空 */
.xunkong-line {
  font-size: 14px;
  color: #3c382d;
  font-family: "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #ddd3bd;
}
.xk-item {
  font-size: 13px;
  color: #9c5a3c;
  background: #faf0e6;
  border-left: 2px solid #9c5a3c;
  padding: 5px 10px;
  margin: 4px 0;
  border-radius: 0 4px 4px 0;
  font-family: "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
}

/* 年命 */
.ming-item {
  font-size: 14px;
  color: #3c382d;
  font-family: "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
  padding: 4px 0;
}

/* 原文折叠 */
.pan-text {
  background: #f1ecdf;
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  color: #3a362c;
  font-family: "SF Mono", Consolas, monospace;
  margin-top: 8px;
}

/* ========== v0.2 深色自适应 ========== */
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  .card-title { color: #d8d0ba; border-left-color: #7fbfae; }
  .keti-tag { background: #7fbfae; color: #1c1b17; }
  .pan-cell { background: #26241e; border-color: #3a3629; color: #e5e0d3; }
  .pan-cell .dipan-zhi { color: #a49c87; }
  .pan-cell .tian-jiang { color: #7fbfae; }
  .pan-cell .tian-zhi { color: #e5e0d3; }
  .pan-cell.xk-dipan { background: #332a20; }
  .pan-cell.gui-cell {
    background: #7fbfae;
    border-color: #5a9b8b;
  }
  .pan-cell.gui-cell .dipan-zhi,
  .pan-cell.gui-cell .tian-zhi,
  .pan-cell.gui-cell .tian-jiang { color: #1c1b17; }
  .pan-cell.gui-cell .dipan-zhi sup { color: #4a3824; }
  .pan-cell.xk-tian-cell .tian-zhi { color: #d8a37c; }
  .pan-cell.xk-tian-cell.gui-cell .tian-zhi { color: #4a3824; }
  .pan-center {
    background: #2a271f;
    border-color: #5a5340;
  }
  .pc-line { color: #d8d0ba; }
  .pc-line.pc-off { color: #8a7d63; }
  .pan-legend { color: #a49c87; }
  .sc-card { background: #2a271f; border-color: #3a3629; }
  .sc-card.sc-chuan { background: #243530; border-color: #4a6655; }
  .sc-pos { color: #a49c87; }
  .sc-shang { color: #e5e0d3; }
  .sc-shang.xk-tian { color: #d8a37c; }
  .sc-xia { color: #a49c87; }
  .sc-meta { color: #8a7d63; }
  .xk-tian-inline { color: #d8a37c; }
  .xunkong-line { color: #d8d0ba; border-bottom-color: #4a4434; }
  .xk-item { background: #332a20; color: #d8a37c; border-left-color: #d8a37c; }
  .ming-item { color: #d8d0ba; }
  .pan-text { background: #2a271f; color: #d8d0ba; }
  .lg-xk-t-dot { background: #26241e; border-color: #3a3629; }
  .lg-xk-t-dot::after { color: #d8a37c; }

  /* 落地页样例 - 深色 */
  .sample-card { background: #26241e; border-color: #3a3629; }
  .sample-q { color: #a49c87; }
  .mini-cell { background: #26241e; border-color: #3a3629; }
  .mini-cell .mini-dipan { color: #a49c87; }
  .mini-cell .mini-tian { color: #e5e0d3; }
  .mini-cell .mini-tian.xk-mark { color: #d8a37c; }
  .mini-cell.mini-xk-dipan { background: #332a20; }
  .mini-cell.mini-gui { background: #7fbfae; border-color: #5a9b8b; }
  .mini-cell.mini-gui .mini-dipan,
  .mini-cell.mini-gui .mini-tian { color: #1c1b17; }
  .mini-cell.mini-gui .mini-tian.xk-mark { color: #4a3824; }
  .mini-legend { color: #a49c87; }
  .mini-legend .lg-xk-d { background: #332a20; border-color: #4a3824; }
  .mini-legend .xk-mark { color: #d8a37c; }
  .sample-meta { border-top-color: #3a3629; }
  .sample-sc { color: #d8d0ba; }
  .sample-sc b { color: #7fbfae; }
  .sample-line { color: #c9c0a8; }
  .sample-cta { color: #7fbfae; border-bottom-color: #7fbfae; }
  .sample-cta:hover { color: #a8d8c9; border-bottom-color: #a8d8c9; }

  /* 古籍卡片 v1.1 深色 */
  .guwen-card { background: #2e2b20; border-color: #3a3629; border-left-color: #5a5340; }
  .gw-head { border-bottom-color: #4a4434; }
  .gw-key { color: #7fbfae; }
  .gw-src { color: #a49c87; }
  .gw-orig { background: #332a1f; color: #d8d0ba; }
  .gw-orig .gw-label { color: #c9c0a8; }
  .gw-interp { background: #243530; color: #e5e0d3; }
  .gw-interp .gw-label { color: #7fbfae; }
  .gw-single .gw-text { color: #c9c0a8; }

  /* v0.3 深色 */
  .topbar { background: #1fa39a; }
  .form-card { background: #26241e; border-color: #3a3629; }
  .form-row { border-bottom-color: #3a3629; }
  .form-label { color: #a49c87; }
  .form-link { color: #7fbfae; }
  .radio { color: #c9c0a8; }
  input[type=text], input[type=number], input[type=datetime-local], select, textarea {
    background: #2a271f; border-color: #4a4434; color: #e5e0d3;
  }
  .meta-table { border-color: #3a3629; }
  .meta-table td { color: #d8d0ba; border-bottom-color: #3a3629; }
  .meta-table .meta-k { background: #26241e; color: #a49c87; }
  .meta-table .meta-v { background: #2a271f; }
  .keti-line { background: #26241e; border-color: #3a3629; }
  .keti-label { color: #a49c87; }
  .keti-vals { color: #7fbfae; }
  .gw-tag { background: #243530; color: #7fbfae; }
  .bottom-tab { background: #1c1b17; border-top-color: #3a3629; }
  .bt-item { color: #a49c87; }
  .bt-item:active { background: #26241e; }
  .bt-pill { background: #7fbfae; color: #1c1b17; }
}

/* ========== v0.5b 顶部元数据表（按 sample：行 + label + value 结构） ========== */
.meta-table {
  display: flex;
  flex-direction: column;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  font-size: 13px;
  font-family: var(--serif);
}
/* 一行：label + value（label 固定窄列，value 占剩余） */
.meta-row {
  display: grid;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}
.meta-row:last-child { border-bottom: none; }
.meta-row-pair { grid-template-columns: 70px 1fr; }
/* v0.5c：5 等分对齐（label + 4 柱 = 5 列；label + 5 项 = 5 列 → 视觉对齐） */
.meta-row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.meta-row-meta-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; border-bottom: 1px solid var(--border); }

/* label cell（米黄色背景） */
.meta-row .meta-k,
.meta-cell-5 .meta-k-5 {
  background: var(--bg-card-2);
  color: var(--text-4);
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  padding: 7px 4px;
  font-size: 12.5px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* value cell */
.meta-row .meta-v {
  background: var(--bg-card);
  color: var(--text-1);
  font-family: var(--serif);
  padding: 7px 10px;
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  display: flex;
  align-items: center;
}
/* 5 列横排里的 cell-5（含 label + value 两段） */
.meta-cell-5 {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-light);
  background: var(--bg-card);
  min-width: 0;
  flex: 1 1 0;  /* 等分 5 列宽度 */
}
.meta-cell-5:first-child { border-left: none; }
.meta-cell-5 .meta-k-5 {
  border-bottom: 1px solid var(--border-light);
}
.meta-cell-5 .meta-v-5 {
  flex: 1;
  background: var(--bg-card);
  color: var(--text-1);
  font-family: var(--serif);
  padding: 7px 4px;
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fz-cell {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: .5px;
}
/* v0.5 一行五列硬性保持，不响应式降级 */

/* ========== v0.3 紧凑课体条 ========== */
.keti-line {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-family: "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
  font-size: 15px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.keti-label {
  font-size: 13px;
  color: var(--text-4);
  letter-spacing: 2px;
  font-weight: 600;
  flex-shrink: 0;
}
.keti-vals {
  color: var(--primary-deep);
  font-weight: 600;
  letter-spacing: 1px;
}

/* ========== v0.3 古籍卡片新增「课义」tag ========== */
.gw-tag {
  display: inline-block;
  font-size: 11px;
  padding: 1px 8px;
  background: var(--primary-bg);
  color: var(--primary-deep);
  border-radius: 4px;
  letter-spacing: 2px;
  font-weight: 600;
  margin-left: auto;
}

/* ========== v0.3 底部固定 tab 栏（sample 风格） ========== */
.bottom-tab {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  z-index: 100;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.bt-item {
  flex: 1;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  cursor: pointer;
  color: var(--text-4);
  font-size: 11px;
}
.bt-item:active { background: var(--bg-card-2); }
.bt-item svg { stroke: var(--text-4); }
.bt-pill {
  display: inline-block;
  background: var(--primary);
  color: var(--primary-fg);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
.bt-item.bt-primary { color: var(--primary-deep); font-weight: 600; }
.bt-item.bt-primary svg { stroke: var(--primary); }

/* ========== v0.5 事项可编辑 ========== */
.meta-edit {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 11px;
  color: var(--text-1);
  padding: 2px 22px 2px 4px;
  outline: none;
  border-radius: 4px;
  transition: background 0.15s;
  white-space: nowrap;
  overflow-x: auto;
}
.meta-edit:focus {
  background: var(--primary-bg);
}
.meta-edit-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-4);
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.meta-edit-btn:hover { color: var(--primary); background: var(--primary-bg); }
.meta-table .meta-v { position: relative; padding-right: 28px; }

/* v0.5b 深色 */
.meta-table { background: var(--border); border-color: var(--border); }
.meta-row { border-bottom-color: var(--border); }
.meta-row .meta-k { background: var(--bg-card-2); color: var(--text-4); }
.meta-row .meta-v { background: var(--bg-card-2); color: var(--text-1); }
.meta-cell-5 { background: var(--bg-card-2); border-left-color: var(--border); }
.meta-cell-5 .meta-k-5 { background: var(--bg-card-2); color: var(--text-4); border-bottom-color: var(--border); }
.meta-cell-5 .meta-v-5 { background: var(--bg-card-2); color: var(--text-1); }






/* ========== 表层文案层组件（2026-09-21 前端改版）==========
   首页 hero / 示例问句 / 三步说明 / 高级折叠 / 找回入口。
   注意：.adv 折叠在首页与排盘页共用，样式必须落在这里（原先误写进 index 内联，排盘页拿不到）。 */
.hero { padding: 6px 2px 14px; }
.hero-h { font-size: 21px; font-weight: 700; line-height: 1.5; letter-spacing: -.2px;
  margin: 0 0 9px; color: var(--text-1); }
.hero-h em { font-style: normal; color: var(--primary-deep); }
.hero-p { font-size: 13.5px; line-height: 1.95; margin: 0; color: var(--text-3); max-width: 36em;
  text-wrap: balance; }
/* 窄屏断行时不让「等结果的人」被拆开，强制断在逗号处 */
.hero-p .nb { white-space: nowrap; }

.chips-label { font-size: 12px; color: var(--text-4); margin: 15px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 12.5px; line-height: 1.5; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-2);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.chip::before { content: "\201C"; opacity: .4; margin-right: 3px; }
.chip:hover { border-color: var(--primary); background: var(--primary-bg); color: var(--primary-deep); }
.chip:active { transform: translateY(1px); }

details.adv { margin: 2px 0 12px; padding: 12px 14px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 12px; }
details.adv > summary { display: flex; align-items: center; gap: 8px; font-size: 13.5px;
  font-weight: 600; color: var(--text-2); cursor: pointer; list-style: none; outline: none; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::before { content: "+"; flex: 0 0 auto; width: 18px; height: 18px;
  line-height: 16px; text-align: center; font-size: 13px; color: var(--text-4);
  border: 1px solid var(--border); border-radius: 50%; }
details.adv[open] > summary::before { content: "\2212"; }
details.adv > summary:hover { color: var(--primary-deep); }

.recover { display: block; width: 100%; margin: 14px 0 0; padding: 4px; background: none;
  border: 0; cursor: pointer; text-align: center; font-size: 13px; color: var(--text-3);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.recover:hover { color: var(--primary-deep); text-decoration-color: var(--primary); }
.rc-field { text-align: left; margin-bottom: 11px; }
.rc-field label { display: block; font-size: 12px; color: var(--text-4); margin-bottom: 5px; }
.rc-field input { width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 14px;
  font-family: monospace; color: var(--text-1); background: var(--bg-card-2);
  border: 1px solid var(--border); border-radius: 8px; }
.rc-field input:focus { outline: none; border-color: var(--primary); }

@media (prefers-color-scheme: dark) and (max-width: 0px) {
  .hero-h { color: #e5e0d3; }
  .hero-h em, .chip:hover, .recover:hover, details.adv > summary:hover { color: #7fbfae; }
  .hero-p { color: #a49c87; }
  .chips-label { color: #8d8574; }
  .chip { background: #26241e; border-color: #3a3629; color: #d8d0ba; }
  .chip:hover { border-color: #7fbfae; background: #2e2b20; }
  details.adv { background: #26241e; border-color: #3a3629; }
  details.adv > summary { color: #d8d0ba; }
  details.adv > summary::before { border-color: #4a4434; color: #a49c87; }
  .recover { color: #a49c87; text-decoration-color: #3a3629; }
  .rc-field input { background: #2a271f; border-color: #4a4434; color: #e5e0d3; }
}

/* =====================================================================
   水墨靛蓝主题层 v2（2026-09-22）
   回滚：删除本整段 + 下方 @font-face 即可，原样式一行未动。
   思路：:root 令牌换血（多数组件走 var 自动跟随）+ 顶栏/盘面改浅底
        + 宋体标题 + 去暖色硬编码 + 纸纹/暖阴影/墨韵 + 贰马朱印。
   ===================================================================== */
@font-face{
  font-family:"ErtaSerif";
  src:url("/static/assets/NotoSerifSC-subset.otf?v=2") format("opentype");
  font-display:swap;
}
:root{
  --primary:#2b4a68; --primary-deep:#1d3550; --primary-bg:#e6eef4; --primary-fg:#f2f6f8;
  --bg-page:#eef1f3; --bg-card:#f8fafb; --bg-card-2:#eef3f5;
  --border:#d5dee3; --border-light:#e6ecef;
  --text-1:#1b2530; --text-2:#3a4a5a; --text-3:#5f7183; --text-4:#8a99a7;
  --warn-bg:#eef3f5; --warn-border:#c6d4dd; --warn-fg:#2b4a68;
  --xiankong:#5b6b7a;
  --code-bg:#f4f7f8; --code-fg:#1b2530;
  --serif:"ErtaSerif","Noto Serif SC","Songti SC","SimSun",serif;
}
/* 冷调纸底（覆盖浅色与深色，统一走这套） */
body{
  background-color:var(--bg-page);
  background-image:
    radial-gradient(1100px 600px at 15% -10%, #f7f9fa 0, transparent 60%),
    radial-gradient(900px 520px at 110% 5%, #dbe4e9 0, transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  color:var(--text-1);
}
/* 宋体：标题 / 标签 / 按钮 / 点缀 */
.topbar-title, h1, .hero-h, .card-title, .section, .brand, .btn,
.keti-label, .keti-vals, .sec-card h3, .gw-key, .tp-title, .tp-btn,
details.adv > summary, .chip, .his-q, .meta-edit,
.rp-h1, .colophon-note { font-family:var(--serif); }

/* 顶栏：实心蓝带 → 浅色宣纸（配朱印 + 墨字） */
.topbar{
  background:linear-gradient(180deg,#f7fafb,#e9eff2); color:var(--text-1);
  border-bottom:1px solid var(--border); box-shadow:0 1px 0 rgba(29,53,80,.05);
  justify-content:flex-start; gap:10px;
}
.topbar-title{ color:var(--text-1); }
.topbar-share{ background:rgba(29,53,80,.05); color:var(--text-3); border-color:var(--border); }
.topbar-share svg{ stroke:var(--text-3); }
.topbar-share:active{ background:rgba(29,53,80,.12); }
.seal{ width:36px; height:52px; object-fit:contain; display:block; flex:0 0 auto;
  filter:drop-shadow(0 2px 4px rgba(150,40,30,.28)); }

/* 卡片：冷底 + 暖(蓝灰)阴影 + 乌丝栏界格 */
.card, .form-card, .sec-card, .sample-card, .guwen-card,
.keti-line, .his-item, .tp-panel, .pay-cta, .deepBlock { box-shadow:0 8px 26px rgba(29,53,80,.10); }
.sample-card, .guwen-card, .sc-card, .mini-cell, .pan-text, pre.pan {
  background:var(--bg-card); border-color:var(--border); color:var(--text-1);
}
.form-card, .card, .sec-card { position:relative; }
.guwen-card{ border-left-color:var(--primary); }
.gw-head{ border-bottom-color:var(--border); }
.gw-orig{ background:var(--bg-card-2); color:var(--text-2); }
.gw-interp{ background:var(--primary-bg); color:var(--text-1); }
.gw-src, .gw-orig .gw-label, .sample-q, .mini-legend, .sc-pos, .sc-meta { color:var(--text-4); }
.sample-card{ border-color:var(--border); }
.sample-meta{ border-top-color:var(--border); }
.sample-sc b, .sample-cta { color:var(--primary-deep); }
.sample-sc b{ color:var(--primary-deep); }

/* 盘面：深底 → 浅宣纸 + 墨韵淡入（等宽骨架保留） */
.pan-code, #reportPan {
  background:linear-gradient(180deg,#ffffff,#eef3f5); color:var(--text-1);
  border:1px solid var(--border); animation:inkA .9s ease both;
}
@keyframes inkA{ from{opacity:0; filter:blur(6px)} to{opacity:1; filter:blur(0)} }

/* 去暖色硬编码：文字/边/底统一冷调 */
.hint, .meta, .section, .card-title, .foot, .tag, .mode-tip,
.xunkong-line, .ming-item, .sc-shang, .sc-xia, .xk-item,
.sub, .his-meta, .lg-hint, .mini-cell .mini-dipan, .mini-cell .mini-tian { color:var(--text-3); }
.card-title{ color:var(--text-1); border-left-color:var(--primary); }
.hint{ color:var(--text-4); }
.tag{ background:var(--bg-card-2); color:var(--text-3); }
.warn{ background:var(--warn-bg); border-color:var(--warn-border); border-left:3px solid var(--primary); color:var(--text-2); }
.btn.secondary{ background:var(--bg-card-2); color:var(--text-2); border:1px solid var(--border); }
.btn.ghost{ border-color:var(--border); color:var(--text-3); }
input[type=text], input[type=number], input[type=datetime-local], select, textarea{
  background:#fff; border-color:var(--border); color:var(--text-1);
}
/* 陷空/虚象：赭棕 → 石板灰（水系无红） */
.xk-item{ background:var(--bg-card-2); color:var(--xiankong); border-left-color:var(--xiankong); }
.mini-cell .mini-tian.xk-mark, .mini-legend .xk-mark, .sc-shang.xk-tian,
.xk-tian-inline, .lg-xk-t-dot::after, .mini-cell.mini-gui .mini-tian.xk-mark { color:var(--xiankong); }
.mini-cell.mini-xk-dipan, .lg-xk-d { background:var(--bg-card-2); border-color:var(--border); }
.xunkong-line{ border-bottom-color:var(--border); }

/* 报告页落款印 */
.colophon{ display:flex; justify-content:flex-end; margin:14px 0 2px; }
.colophon img{ width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(150,40,30,.25)); }

/* =====================================================================
   阶段一：桌面响应式两栏 + 法务页（2026-09-22）
   手机优先不变；仅 ≥860px 时首页转两栏、结果页放宽，法务链接进页脚。
   ===================================================================== */
.legal { display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center; align-items:center;
  margin:16px 0 4px; font-size:12.5px; color:var(--text-4); }
.legal a, .legal button { color:var(--text-3); text-decoration:none; background:none; border:none;
  cursor:pointer; font-size:12.5px; font-family:inherit; padding:0; }
.legal a:hover, .legal button:hover { color:var(--primary-deep); text-decoration:underline; }
.legal .dot { color:var(--border); user-select:none; }

/* 侧栏（仅桌面首页出现） */
.side { display:none; }
.side-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:14px 15px; }
.side-h { font-family:var(--serif); font-size:14px; color:var(--primary-deep); letter-spacing:1px;
  margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.side-ol { padding-left:18px; } .side-ol li { font-size:13px; line-height:1.95; color:var(--text-2); }
.prow { display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; color:var(--text-2);
  padding:5px 0; border-bottom:1px dashed var(--border); }
.prow:last-of-type { border-bottom:none; }
.prow b { color:var(--primary-deep); font-weight:700; }
.side-note { font-size:12px; line-height:1.85; color:var(--text-3); margin-top:8px; }
.side-links { display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:10px; }
.side-links a { font-size:12.5px; color:var(--primary-deep); text-decoration:none; }
.side-links a:hover { text-decoration:underline; }

/* 法务页正文 */
.legal-doc { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:18px 18px 24px; }
.legal-doc h2 { font-family:var(--serif); font-size:15px; color:var(--primary-deep); letter-spacing:1px; margin:18px 0 6px; }
.legal-doc h2:first-child { margin-top:0; }
.legal-doc p, .legal-doc li { font-size:13.5px; line-height:1.95; color:var(--text-2); }
.legal-doc ul { padding-left:20px; margin:4px 0; }
.legal-doc .todo { background:var(--primary-bg); color:var(--primary-deep); padding:0 4px; border-radius:3px; font-weight:600; }
.legal-doc .updated { font-size:12px; color:var(--text-4); margin-bottom:10px; }

@media (min-width: 860px) {
  .wrap { max-width: 760px; }
  .wrap-home { max-width: 700px; }
}

/* 阶段一收尾：去掉装饰性分隔线，改以留白分区（2026-09-22） */
.chip::before { content: none; }                        /* 示例问句不再挂引号 */
.form-row { border-bottom: none; padding: 12px 0; }     /* 字段间用间距，不画细线 */
.form-row:last-child { padding-bottom: 0; }

/* ICP 备案号（工信部要求：网站底部展示并链接至 beian.miit.gov.cn） */
.beian { text-align: center; font-size: 12px; color: var(--text-4); margin: 8px 0 0; letter-spacing: .3px; }
.beian a { color: var(--text-4); text-decoration: none; }
.beian a:hover { color: var(--primary-deep); text-decoration: underline; }

/* =====================================================================
   黑金主题层 v3（2026-10-25）
   与 sh.renhui.work 资料商店同一套视觉语言：暖黑底 #0f1216 + 暖白文字
   + 金 #c9a45c 唯一强调色（品牌、主按钮、按钮悬停、节标题竖线、价格）。
   做法同 v2：只做令牌换血 + 组件覆盖，上方原有样式一行未动。
   回滚：删除本整段即可（work/theme_backup/ 另存有 v2 整份样式）。
   ===================================================================== */
:root{
  color-scheme: dark;

  /* 金：唯一强调色 */
  --gold:#c9a45c;
  --gold-bright:#e6cf9a;
  --gold-deep:#a5813f;
  --gold-grad:linear-gradient(135deg,#f0d9a8 0%,#c9a45c 48%,#a5813f 100%);

  /* 令牌换血：多数组件走 var 自动跟随 */
  --primary:#c9a45c;
  --primary-deep:#e6cf9a;
  --primary-bg:rgba(201,164,92,.12);
  --primary-fg:#17140d;          /* 金底上的字必须是深色，白字对比不够 */

  --bg-page:#0f1216;             /* 暖黑，不用纯黑 */
  --bg-card:#161b22;
  --bg-card-2:#1d242e;
  --input-bg:#10151b;            /* 输入框：比卡片再深一档，形成内嵌感 */

  --border:#272e38;
  --border-light:#202730;
  --line-strong:#39424f;

  --text-1:#e9e4d8;              /* 主文字（暖白） */
  --text-2:#cfc8b8;
  --text-3:#a9a294;
  --text-4:#8a8374;              /* 元信息：深底上仍可读（对比 4.6） */

  --warn-bg:#241a14;
  --warn-border:#4a3824;
  --warn-fg:#d8a37c;
  --xiankong:#c98a5a;            /* 陷空／虚象：赭 */

  --code-bg:#12161c;             /* 盘面深底 */
  --code-fg:#ddd3bd;

  --serif:"ErtaSerif","Noto Serif SC","Songti SC","SimSun",serif;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

/* ---------- 纸底：暖黑 + 微弱金晕 + 颗粒 ---------- */
body{
  background-color:var(--bg-page);
  background-image:
    radial-gradient(1200px 620px at 12% -12%, #1a1f27 0, transparent 62%),
    radial-gradient(900px 520px at 108% 4%, #211c14 0, transparent 58%),
    var(--noise);
  background-size:auto, auto, 140px 140px;
  background-attachment:fixed, fixed, fixed;
  color:var(--text-1);
}
/* 顶部 2px 金线：品牌收口（层级压在顶栏之上、弹层之下） */
body::before{
  content:""; position:fixed; top:0; left:0; right:0; height:2px; z-index:50;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(201,164,92,.10) 0%,#f0d9a8 18%,
    #c9a45c 50%,#f0d9a8 82%,rgba(201,164,92,.10) 100%);
  box-shadow:0 1px 8px rgba(201,164,92,.32);
}

/* ---------- 顶栏：深色毛玻璃 + 金线分隔 ---------- */
.topbar{
  background:linear-gradient(180deg,rgba(25,30,38,.94),rgba(17,21,27,.94));
  color:var(--text-1);
  border-bottom:1px solid rgba(201,164,92,.22);
  box-shadow:0 1px 0 rgba(0,0,0,.5);
  backdrop-filter:saturate(140%) blur(10px);
}
.topbar-title{ color:var(--gold-bright); text-shadow:0 1px 0 rgba(0,0,0,.5); }
.topbar-share{
  background:rgba(201,164,92,.10); color:var(--gold); border-color:rgba(201,164,92,.34);
}
.topbar-share svg{ stroke:var(--gold); }
.topbar-share:active{ background:rgba(201,164,92,.22); }
/* 朱印压在深底上更沉稳，保留原图，只调投影 */
.seal{ filter:drop-shadow(0 2px 6px rgba(150,40,30,.45)); }

/* ---------- 卡片：细金边描线 + 深阴影 ---------- */
.card, .form-card, .sec-card, .sample-card, .guwen-card,
.keti-line, .his-item, .tp-panel, .pay-cta, .deepBlock{
  box-shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.30);
}
.card, .form-card, .sec-card, details.adv, .side-card, .legal-doc{
  border-color:var(--border);
}
.keti-line{ border-left-color:var(--gold); }
.card-title{ color:var(--text-1); border-left-color:var(--gold); }
.sec-card h3{ color:var(--gold-bright); }
.sec-card p b.hl, .sec-card p .hl{ color:var(--gold-bright); }
.section{ color:var(--gold-bright); }
.guwen-card{ border-left-color:var(--gold-deep); }
.gw-head{ border-bottom-color:var(--border); }
.gw-orig{ background:#1b2027; color:var(--text-2); }
.gw-orig .gw-label{ color:var(--text-4); }
.gw-interp{ background:rgba(201,164,92,.10); color:var(--text-1); }
.gw-interp .gw-label, .gw-key{ color:var(--gold-bright); }
.gw-tag{ background:rgba(201,164,92,.13); color:var(--gold-bright); }
.sample-q, .mini-legend, .sc-pos, .sc-meta{ color:var(--text-4); }
.sample-sc b, .sample-cta{ color:var(--gold-bright); }
.sample-cta{ border-bottom-color:rgba(201,164,92,.5); }
.sample-meta{ border-top-color:var(--border); }
.sample-line{ color:var(--text-2); }

/* ---------- 盘面：深底暖白（等宽骨架保留） ---------- */
.pan-code, #reportPan{
  background:linear-gradient(180deg,#141922,#0f131a);
  color:var(--code-fg);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
pre.pan, .pan-text{ background:#12161c; color:var(--code-fg); border-color:var(--border); }

/* ---------- 表单 ---------- */
input[type=text], input[type=number], input[type=datetime-local], select, textarea{
  background:var(--input-bg); border-color:var(--line-strong); color:var(--text-1);
}
input::placeholder, textarea::placeholder{ color:#6f695c; }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--gold-deep); background:#12171e;
}
.time-show{ background:var(--input-bg); border-color:var(--line-strong); color:var(--text-1); }
.time-show::after{ color:var(--text-4); }
.form-label{ color:var(--text-3); }
.hint{ color:var(--text-4); }
.radio{ color:var(--text-2); }
.radio input[type="radio"]{ accent-color:var(--gold); }
.form-link{ color:var(--gold); }
.form-row{ border-bottom-color:var(--border); }
.form-err{ background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn-fg); }

/* ---------- 按钮 ---------------------------------------------------- */
/* 主按钮：金属拉丝金渐变 + 深字（金底配白字对比不足） */
.btn{
  background:var(--gold-grad); color:var(--primary-fg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 4px 14px rgba(201,164,92,.18);
  text-shadow:0 1px 0 rgba(255,255,255,.18);
}
.btn:active{ opacity:.9; transform:translateY(1px); }
.btn.secondary{
  background:var(--bg-card-2); color:var(--text-2);
  border:1px solid var(--line-strong);
  box-shadow:none; text-shadow:none;
}
.btn.btn-secondary{
  background:var(--bg-card-2); color:var(--text-2);
  border:1px solid var(--line-strong); font-weight:500;
  box-shadow:none; text-shadow:none;
}
.btn.btn-secondary:active{ background:#232b36; }
.btn.btn-primary{ background:var(--gold-grad); color:var(--primary-fg); }
.btn.secondary:active{ background:#232b36; }
.btn.ghost{
  background:transparent; border:1px solid var(--line-strong); color:var(--text-3);
  box-shadow:none; text-shadow:none;
}
.btn.ghost:active{ background:var(--bg-card-2); }
.btn:disabled, .btn[disabled]{ opacity:.45; }

/* ---------- 首页表层组件 ---------- */
.hero-h{ color:var(--text-1); }
.hero-h em{ color:var(--gold-bright); }
.hero-p{ color:var(--text-3); }
.chips-label{ color:var(--text-4); }
.chip{ background:var(--bg-card); border-color:var(--border); color:var(--text-2); }
.chip:hover{ border-color:var(--gold-deep); background:rgba(201,164,92,.10); color:var(--gold-bright); }
details.adv{ background:var(--bg-card); border-color:var(--border); }
details.adv > summary{ color:var(--text-2); }
details.adv > summary::before{ border-color:var(--line-strong); color:var(--text-4); }
details.adv > summary:hover{ color:var(--gold-bright); }
.recover{ color:var(--text-3); text-decoration-color:var(--border); }
.recover:hover{ color:var(--gold-bright); text-decoration-color:rgba(201,164,92,.6); }
.rc-field label{ color:var(--text-4); }
.rc-field input{ background:var(--input-bg); border-color:var(--line-strong); color:var(--text-1); }
.rc-field input:focus{ border-color:var(--gold-deep); }

/* ---------- 元数据表 / 课体条 ---------- */
.meta-table{ background:var(--border); border-color:var(--border); }
.meta-row{ border-bottom-color:var(--border); }
.meta-row .meta-k, .meta-cell-5 .meta-k-5{
  background:#141920; color:var(--text-4); border-bottom-color:var(--border);
}
.meta-row .meta-v, .meta-cell-5 .meta-v-5{ background:var(--bg-card); color:var(--text-1); }
.meta-cell-5{ background:var(--bg-card); border-left-color:var(--border); }
.keti-line{ background:var(--bg-card); border-color:var(--border); }
.keti-label{ color:var(--text-4); }
.keti-vals{ color:var(--gold-bright); }
.meta-edit{ color:var(--text-1); }
.meta-edit:focus{ background:rgba(201,164,92,.12); }
.meta-edit-btn{ color:var(--text-4); }
.meta-edit-btn:hover{ color:var(--gold); background:rgba(201,164,92,.12); }

/* ---------- 四课三传 / 旬空 / 年命 ---------- */
.sc-card{ background:#141920; border-color:var(--border); }
.sc-card.sc-chuan{ background:rgba(201,164,92,.10); border-color:rgba(201,164,92,.34); }
.sc-shang{ color:var(--text-1); }
.sc-xia{ color:var(--text-3); }
.xunkong-line{ color:var(--text-2); border-bottom-color:var(--border); }
.xk-item{ background:rgba(201,138,90,.10); color:var(--xiankong); border-left-color:var(--xiankong); }
.ming-item{ color:var(--text-2); }
.xk-tian-inline, .sc-shang.xk-tian, .mini-cell .mini-tian.xk-mark,
.mini-legend .xk-mark, .lg-xk-t-dot::after,
.mini-cell.mini-gui .mini-tian.xk-mark{ color:var(--xiankong); }
.mini-cell{ background:#141920; border-color:var(--border); }
.mini-cell .mini-dipan{ color:var(--text-4); }
.mini-cell .mini-tian{ color:var(--text-1); }
.mini-cell.mini-xk-dipan, .mini-legend .lg-xk-d{ background:#241a14; border-color:var(--warn-border); }
.mini-cell.mini-gui{ background:var(--gold-grad); border-color:var(--gold-deep); }
.mini-cell.mini-gui .mini-dipan,
.mini-cell.mini-gui .mini-tian{ color:#1a160e; }
.mini-legend .lg-gui{ background:var(--gold); }
.lg-divider{ background:var(--border); }
.lg-hint{ color:var(--text-4); }
.lg-xk-t-dot{ background:#141920; border-color:var(--border); }

/* ---------- 进度 / 提示 ---------- */
.prog{ background:#1a2027; }
.prog-fill{ background:var(--gold-grad); }
.prog-meta{ color:var(--text-3); }
.warn{ background:var(--warn-bg); border-color:var(--warn-border); border-left-color:var(--gold); color:var(--warn-fg); }
.mode-tip{ color:var(--warn-fg); }
.tag{ background:var(--bg-card-2); color:var(--text-3); }
.sub{ color:var(--text-3); }
.meta{ color:var(--text-4); }
.brand{ color:var(--text-4); }
.foot{ color:#7d776a; }
.back-bar{ color:var(--gold); }
.back-bar:active{ opacity:.7; }

/* ---------- 起课记录 / 时间弹层 / 底部 tab ---------- */
.his-item{ background:var(--bg-card); border-color:var(--border); }
.his-item:active{ background:rgba(201,164,92,.10); }
.his-q{ color:var(--text-1); }
.his-meta{ color:var(--text-4); }
.his-tag{ background:rgba(201,164,92,.13); color:var(--gold-bright); }
.his-empty{ color:var(--text-4); }
.his-sub{ color:var(--text-4); }
.tp-mask{ background:rgba(0,0,0,.66); backdrop-filter:blur(2px); }
.tp-panel{ background:var(--bg-card); border:1px solid var(--line-strong); }
.tp-title{ color:var(--text-1); }
.tp-grid select{ background:var(--input-bg); border-color:var(--line-strong); color:var(--text-1); }
.tp-grid .tp-unit{ color:var(--text-3); }
.tp-clear{ background:var(--bg-card-2); border-color:var(--line-strong); color:var(--text-3); }
.tp-cancel{ background:var(--bg-card-2); border-color:var(--line-strong); color:var(--text-2); }
.tp-ok{ background:var(--gold-grad); border:none; color:var(--primary-fg); }
.bottom-tab{ background:#12171e; border-top-color:var(--border); box-shadow:0 -2px 8px rgba(0,0,0,.4); }
.bt-item{ color:var(--text-4); }
.bt-item:active{ background:var(--bg-card); }
.bt-item svg{ stroke:var(--text-4); }
.bt-pill{ background:var(--gold-grad); color:var(--primary-fg); }
.bt-item.bt-primary{ color:var(--gold-bright); }
.bt-item.bt-primary svg{ stroke:var(--gold); }

/* ---------- 法务页 / 侧栏 / 页脚 ---------- */
.legal{ color:var(--text-4); }
.legal a, .legal button{ color:var(--text-3); }
.legal a:hover, .legal button:hover{ color:var(--gold-bright); }
.legal .dot{ color:var(--line-strong); }
.side-card{ background:var(--bg-card); border-color:var(--border); }
.side-h{ color:var(--gold-bright); border-bottom-color:var(--border); }
.side-ol li{ color:var(--text-2); }
.prow{ color:var(--text-2); border-bottom-color:var(--border); }
.prow b{ color:var(--gold-bright); }
.side-note{ color:var(--text-3); }
.side-links a{ color:var(--gold); }
.legal-doc{ background:var(--bg-card); border-color:var(--border); }
.legal-doc h2{ color:var(--gold-bright); }
.legal-doc p, .legal-doc li{ color:var(--text-2); }
.legal-doc .todo{ background:rgba(201,164,92,.13); color:var(--gold-bright); }
.legal-doc .updated{ color:var(--text-4); }
.beian{ color:var(--text-4); }
.beian a{ color:var(--text-4); }
.beian a:hover{ color:var(--gold-bright); }
/* 报告页落款印 */
.colophon img{ filter:drop-shadow(0 2px 6px rgba(150,40,30,.4)); }

/* ---------- 滚动条 / 选区 ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#3a2f1d; border-radius:6px; border:2px solid var(--bg-page); }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-deep); }
::-webkit-scrollbar-track{ background:transparent; }
::selection{ background:rgba(201,164,92,.30); color:#fff; }

/* ---------- v3 精修：深底上把卡片从背景里托起来 ---------- */
/* #161b22 与 #0f1216 明度差太小，只靠阴影托不住；加一层极淡的顶光渐变 +
   提亮边框，卡片才立得住（与资料商店同一手法）。 */
.card, .form-card, .sec-card, .guwen-card, .keti-line,
.his-item, .side-card, .legal-doc, details.adv{
  background-image:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 96px);
  border-color:#2b333f;
}
.card, .form-card, .sec-card, .side-card, .legal-doc, details.adv{
  background-color:#161b22;
}
.guwen-card, .keti-line, .his-item{ background-color:#161b22; }
/* 输入框：内嵌感 + 更亮的 placeholder */
input[type=text], input[type=number], input[type=datetime-local], select, textarea,
.time-show, .rc-field input, .tp-grid select{
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45);
}
input::placeholder, textarea::placeholder{ color:#7d7668; }
/* 主按钮悬停/按压的金属反馈 */
.btn:hover{ filter:brightness(1.04); }
.btn:active{ filter:brightness(.96); opacity:1; }
/* 链接与可点文字的悬停统一 */
.legal a:hover, .side-links a:hover{ color:var(--gold-bright); }

/* =====================================================================
   黑金主题层 v3.1 · 排版精修（2026-10-25）
   只动间距 / 字号 / 层级关系；盘面保持 v3 原样（.pan-code 未触碰）。
   全部后缀覆盖，上方样式一行未改。回滚：删除本整段即可。
   ===================================================================== */

/* ---------- 桌面端：卸掉移动端骨架 ---------- */
@media (min-width: 860px){
  .bottom-tab{ display:none !important; }
  body{ padding-bottom:0; }
}

/* ---------- 标题：宋体走正字距，不靠浏览器合成加粗 ---------- */
.hero-h{
  font-size:24px; font-weight:500; letter-spacing:.4px; line-height:1.46;
}
.hero-h em{ letter-spacing:.4px; }
@media (max-width:480px){ .hero-h{ font-size:20px; } }
.hero-p{ line-height:1.82; }

/* ---------- 快捷问句：均分网格，不再出现第二行孤一个 ---------- */
.chips{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.chips .chip{ width:100%; }
@media (min-width:600px){ .chips{ grid-template-columns:repeat(3,1fr); } }

/* ---------- 流程三卡：说明字提到 12px ---------- */

/* ---------- 按钮层级：主按钮抬重量，记录入口降为描边小按钮 ---------- */
#go{ font-size:17px; padding:15px; }
.btn#history{
  margin-top:10px; padding:10px; font-size:13.5px; font-weight:500;
  background:transparent; border:1px solid var(--border); color:var(--text-3);
  box-shadow:none; text-shadow:none; letter-spacing:.4px;
}
.btn#history:active{ background:var(--bg-card-2); color:var(--text-2); }

/* ---------- 提示与页脚：行距放开 ---------- */
.hint{ line-height:1.62; margin-top:5px; }
.foot{ font-size:12.5px; line-height:1.85; }


/* =====================================================================
   黑金主题层 v3.3 · 单栏宽版式（2026-10-25 19:45）
   ADE 否决 v3.2 的左右双栏。页面仍是一条纵向流，不做页面级分栏；
   桌面感靠四件事撑：内容带宽 1080 / 标题 46px / 三列网格 / 表单同宽。
   .tool/.col-l/.col-r 包裹层已从 index.html 移除，DOM 回到原始平铺。
   盘面 .pan-code 未触碰。
   ===================================================================== */

/* ---------- 内容带宽：首页比内页宽一档 ---------- */
@media (min-width:1024px){
  :root{ --wrap-home:1000px; --wrap-page:900px; }
  .wrap{ max-width:var(--wrap-page, 760px); padding:32px 28px 40px; margin:0 auto; }
  .wrap.wrap-home{ max-width:var(--wrap-home, 1000px); padding-top:34px; }
  .topbar{ padding-left:max(28px, calc((100vw - var(--wrap-home, 1000px)) / 2 + 28px)); }
  .topbar-share{ right:max(28px, calc((100vw - var(--wrap-home, 1000px)) / 2 + 28px)); }
}
@media (min-width:1440px){ :root{ --wrap-home:1140px; --wrap-page:960px; } }
@media (min-width:1760px){ :root{ --wrap-home:1260px; --wrap-page:1000px; } }

/* ---------- 首屏：标题居中放大，段落均衡换行，三列网格铺满 ---------- */
@media (min-width:1024px){
  .hero{ text-align:center; padding:14px 0 0; }
  .hero-h{
    font-size:40px; font-weight:400; line-height:1.4; letter-spacing:.8px;
    margin:20px 0 0; text-wrap:balance;
  }
  .hero-h em{ letter-spacing:.8px; }
  .hero-p{
    font-size:16px; line-height:1.86; max-width:640px; margin:20px auto 0;
    text-wrap:balance;
  }
  .chips-label{ margin:34px 0 12px; font-size:12.5px; }
  .chips{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .chips .chip{ text-align:center; font-size:13px; padding:11px 12px; }
}
@media (min-width:1440px){
  .hero-h{ font-size:46px; }
  .hero-p{ font-size:16.5px; max-width:680px; }
}

/* ---------- 表单：单列，问题与占问时间各占一行 ---------- */
@media (min-width:1024px){
  .form-card{
    max-width:860px; margin:30px auto 0; padding:24px 30px 18px;
  }
  .form-row-2{ gap:24px; }
  .form-label{ font-size:13.5px; }
  #q, .time-show, .form-col select{ height:50px; font-size:15.5px; }
  .hint{ font-size:12.5px; }
}

/* ---------- 按钮与页脚：居中一列，不让金色大块横贯全屏 ---------- */
@media (min-width:1024px){
  .btn{ max-width:860px; margin-left:auto; margin-right:auto; }
  #go{ margin:22px auto 0; height:56px; font-size:17px; padding:0; }
  #history{ margin:10px auto 0; }
  .recover{ max-width:860px; margin:14px auto 0; text-align:center; }
  .foot{ max-width:720px; margin:44px auto 0; }
}

/* =====================================================================
   首页产品说明区（2026-10-26）
   参照 bz.dongcha.cyou 的信息层级补足"产品页"叙事：方法 → 免费/付费边界
   → 详解明细 → 做法差异 → 底部 CTA。插在起课按钮之后、免责之前，
   转化位（表单 + 主按钮）不动。
   回滚：删除本整段即可，上方原有样式一行未动。
   ===================================================================== */

/* 往下看锚点 */
.p-jump{
  display:block; text-align:center; margin:26px auto 0;
  font-size:12.5px; color:var(--text-3); text-decoration:none;
  letter-spacing:.3px;
}
.p-jump span{ border-bottom:1px solid var(--border); padding-bottom:2px; }
.p-jump:hover span{ color:var(--primary); border-bottom-color:var(--primary); }

/* 板块通用 */
.p-sec{
  max-width:860px; margin:52px auto 0; scroll-margin-top:20px;
}
.p-head{ margin-bottom:20px; }
.p-label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; letter-spacing:2.2px; color:var(--primary);
  font-family:var(--serif);
}
.p-label::before{
  content:""; width:16px; height:1px; background:var(--gold-deep); opacity:.75;
}
.p-title{
  font-family:var(--serif); font-size:21px; font-weight:400; line-height:1.55;
  letter-spacing:.5px; color:var(--text-1); margin:10px 0 0;
}
.p-sub{
  font-size:13.5px; line-height:1.95; color:var(--text-3);
  margin:10px 0 0; max-width:38em;
}

/* ---------- 方法三条 ---------- */
.m-grid{ display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--border-light); border:1px solid var(--border-light); border-radius:10px; overflow:hidden;
}
.m-item{ background:var(--bg-card); padding:18px 18px 17px; }
.m-num{
  display:block; font-family:var(--serif); font-size:12px; letter-spacing:1.6px;
  color:var(--gold-deep); margin-bottom:9px;
}
.m-t{ font-size:14.5px; font-weight:600; color:var(--text-1); line-height:1.6; margin-bottom:7px; letter-spacing:.2px; }
.m-d{ font-size:13px; line-height:1.95; color:var(--text-3); margin:0; }
.m-d code{ font-family:inherit; color:var(--text-2); }

/* ---------- 免费 / 详解对照表 ---------- */
.plan-wrap{
  border:1px solid var(--border); border-radius:10px; overflow:hidden;
  background:var(--bg-card);
}
.plan-table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.plan-table th{
  font-family:var(--serif); font-size:12px; font-weight:400; letter-spacing:1.2px;
  color:var(--text-4); padding:13px 6px; text-align:center;
  border-bottom:1px solid var(--border); background:var(--bg-card-2);
}
.plan-table th:first-child{ text-align:left; padding-left:16px; }
.plan-table th.unlock{ color:var(--primary); }
.plan-table td{
  font-size:12.5px; color:var(--text-3); padding:10px 6px; text-align:center;
  border-bottom:1px solid var(--border-light); line-height:1.5;
}
.plan-table td:first-child{ text-align:left; padding-left:16px; color:var(--text-2); }
.plan-table td:nth-child(2), .plan-table th:nth-child(2){ border-left:1px solid var(--border-light); }
.plan-table td:nth-child(3), .plan-table th:nth-child(3){ border-left:1px solid var(--border-light); }
.plan-table tr:last-child td{ border-bottom:none; }
.plan-table .col-free{ width:64px; }
.plan-table .col-unlock{ width:64px; }
.plan-table .yes{ color:var(--text-2); font-weight:600; font-size:13px; }
.plan-table .yes.unlock{ color:var(--primary); }
.plan-table .no{ color:#4b525e; }
.plan-table tr.pay-row td{ background:rgba(201,164,92,.06); }
.plan-table tr.pay-row td:first-child{ color:var(--text-1); }
.plan-price{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:8px;
  padding:15px 14px 16px; border-top:1px solid var(--border);
  background:var(--bg-card-2);
}
.plan-price .amt{
  font-family:var(--serif); font-size:24px; color:var(--primary); letter-spacing:.5px;
}
.plan-price .unit{ font-size:12px; color:var(--text-4); }
.plan-note{ font-size:11.5px; color:var(--text-4); text-align:center; margin:10px 0 0; line-height:1.8; }

/* ---------- 详解六节 ---------- */
.rj-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
.rj-item{
  border:1px solid var(--border); border-radius:9px; padding:14px 16px;
  background:var(--bg-card); display:flex; gap:12px; align-items:flex-start;
}
.rj-num{
  flex:0 0 auto; width:26px; height:26px; line-height:26px; text-align:center;
  border-radius:50%; border:1px solid var(--gold-deep); color:var(--primary);
  font-family:var(--serif); font-size:12.5px; margin-top:1px;
}
.rj-body{ min-width:0; }
.rj-t{ font-size:14px; font-weight:600; color:var(--text-1); margin-bottom:5px; letter-spacing:.2px; }
.rj-d{ font-size:12.5px; line-height:1.85; color:var(--text-3); margin:0; }

/* ---------- 做法差异 ---------- */
.df-list{ display:grid; grid-template-columns:1fr; gap:14px; }
.df-item{ position:relative; padding-left:18px; }
.df-item::before{
  content:""; position:absolute; left:0; top:8px; width:6px; height:6px;
  border-radius:50%; background:var(--gold-grad);
}
.df-t{ font-size:14px; font-weight:600; color:var(--text-1); line-height:1.6; margin-bottom:5px; }
.df-d{ font-size:13px; line-height:1.95; color:var(--text-3); margin:0; }

/* ---------- 底部 CTA ---------- */
.cta-band{
  max-width:860px; margin:56px auto 0; padding:30px 24px 28px; text-align:center;
  border:1px solid var(--border); border-radius:14px;
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(201,164,92,.10), transparent 70%),
    var(--bg-card);
}
.cta-t{
  font-family:var(--serif); font-size:19px; font-weight:400; color:var(--text-1);
  letter-spacing:.6px; line-height:1.55; margin:0;
}
.cta-d{ font-size:13px; color:var(--text-3); line-height:1.85; margin:9px 0 0; }
.cta-btn{
  display:inline-block; margin:22px auto 0; padding:0 42px; height:54px; line-height:54px;
  border-radius:999px; background:var(--gold-grad); color:var(--primary-fg);
  font-family:var(--serif); font-size:16px; letter-spacing:1.5px; text-decoration:none;
  box-shadow:0 8px 24px rgba(201,164,92,.18);
}
.cta-btn:active{ opacity:.9; transform:translateY(1px); }
.cta-note{ font-size:11.5px; color:var(--text-4); margin:12px 0 0; }

/* ---------- 窄屏微调 ---------- */
@media (max-width:420px){
  .p-sec{ margin-top:40px; }
  .p-title{ font-size:19px; }
  .plan-table td{ font-size:12px; padding:9px 4px; }
  .plan-table td:first-child{ padding-left:12px; }
  .plan-table th:first-child{ padding-left:12px; }
  .plan-table .col-free, .plan-table .col-unlock{ width:52px; }
  .cta-band{ padding:24px 18px 22px; margin-top:44px; }
  .cta-t{ font-size:17px; }
}

/* ---------- 宽屏：三栏方法、两栏六节 ---------- */
@media (min-width:1024px){
  .p-sec{ margin-top:72px; max-width:860px; }
  .p-title{ font-size:27px; }
  .p-sub{ font-size:14.5px; }
  .m-grid{ grid-template-columns:repeat(3,1fr); }
  .m-item{ padding:22px 20px 21px; }
  .rj-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .rj-item{ padding:16px 18px; }
  .df-list{ grid-template-columns:repeat(2,1fr); column-gap:34px; row-gap:20px; }
  .cta-band{ max-width:860px; margin-top:76px; padding:40px 32px 36px; }
  .cta-t{ font-size:23px; }
  .plan-table th{ font-size:12.5px; padding:15px 8px; }
  .plan-table td{ font-size:13.5px; padding:12px 8px; }
  .plan-table td:first-child, .plan-table th:first-child{ padding-left:22px; }
  .plan-table .col-free, .plan-table .col-unlock{ width:110px; }
  .plan-price .amt{ font-size:27px; }
}

/* ============================================================
   盘面：天地盘格子 + 四课三传（2026-10-26）
   地盘方位固定：顶行 巳午未申 / 右列 酉戌 / 底行 寅丑子亥 / 左列 卯辰；
   格内三层：遁干（小）· 贵神（中）· 天盘支（大、加粗）；地盘支不写，方位已在格子上
   ============================================================ */
.pd-board{ margin-top: 8px; }

.pd-heaven{
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, auto);
  gap: 4px; max-width: 400px; margin: 0 auto;
}
.pd-cell{
  position: relative; box-sizing: border-box; padding: 4px 2px;
  border: 1px solid var(--border); border-radius: 7px;
  background: rgba(201, 164, 92, .05);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
}
.pd-dun{ min-height: 14px; font-family: var(--serif); font-size: 10.5px; line-height: 1.15;
  color: var(--text-4); opacity: .9; }
.pd-j{ font-family: var(--serif); font-size: 15px; line-height: 1.2; letter-spacing: .5px; color: var(--gold); }
.pd-z{ font-family: var(--serif); font-size: 21px; line-height: 1.05; font-weight: 700;
  color: var(--gold-bright); }
/* 旬空标记：〇 落在遁干那一行（替代遁干），字略大于遁干才看得见 */
.pd-dun-zk{ min-height: 14px; font-size: 12.5px; line-height: 1.1; color: #cf4a37; opacity: 1; }
/* 旬空格：只留虚线框，不再叠右上角标 */
.pd-cell.pd-kong{ border-style: dashed; border-color: rgba(201, 164, 92, .45); }

/* 中心五项摘要：日辰 / 月将 / 占时 / 旬空 / 驿马 */
.pd-core{
  grid-area: 2 / 2 / 4 / 4;
  border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255, 255, 255, .015);
  display: grid; grid-template-columns: auto auto; column-gap: 10px; row-gap: 3px;
  justify-content: center; align-content: center;
  padding: 5px 10px;
}
.pd-core-row{ display: contents; }
.pd-core-row em{ font-style: normal; font-size: 11px; color: var(--text-4); letter-spacing: .5px; }
.pd-core-row b{ font-weight: 500; font-family: var(--serif); color: var(--text-1); font-size: 12.5px; }

/* 四课 / 三传：宽屏左右并列，三传纵向（初/中/末成行） */
.pd-lower{
  display: grid; grid-template-columns: 1.08fr 1fr; gap: 14px;
  max-width: 460px; margin: 12px auto 0; align-items: stretch;
}
.pd-sec{ display: flex; flex-direction: column; min-width: 0; }
.pd-sub{ font-size: 11.5px; letter-spacing: 1.2px; color: var(--gold); margin-bottom: 5px; }
.pd-g{
  display: grid; align-items: center; text-align: center;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: rgba(255, 255, 255, .012);
}
/* 四课 3 行（天将/上神/下神，无表头、无六亲）与三传 3 行同高 */
.pd-g4{ grid-template-columns: 44px repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); flex: 1 1 auto; }
/* 三传三行等分：flex-basis 必须是 auto，用 flex:1（basis 0）会与 1fr 行高互相牵制，整块被撑到两倍高 */
.pd-g3v{ grid-template-columns: 44px repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); flex: 1 1 auto; }
.pd-rl, .pd-v{ padding: 6px 4px; }
.pd-rl{ font-size: 11.5px; color: var(--text-4); background: rgba(255, 255, 255, .02); }
.pd-v{ font-family: var(--serif); font-size: 14px; color: var(--text-1); }
.pd-v-big{ font-size: 20px; color: var(--gold-bright); }
/* 下神与上神同字号，颜色压一档，两行不糊成一块 */
.pd-v-xia{ color: var(--text-2); }
/* 陷空标记：用 relative 上移，不用 vertical-align:super —— super 会把行框撑到两倍高 */
.pd-kongmark{ font-style: normal; font-size: 10px; color: var(--xiankong); margin-left: 2px;
  position: relative; top: -6px; display: inline-block; line-height: 1; }
.pd-g4 > span:not(:nth-last-child(-n+5)){ border-bottom: 1px solid var(--border-light); }
.pd-g3v > span:not(:nth-last-child(-n+4)){ border-bottom: 1px solid var(--border-light); }

@media (max-width: 680px){
  .pd-lower{ grid-template-columns: 1fr; gap: 12px; max-width: 440px; }
}

@media (max-width: 420px){
  .pd-heaven{ gap: 4px; }
  .pd-z{ font-size: 19px; }
  .pd-j{ font-size: 13.5px; }
  .pd-dun{ min-height: 12px; font-size: 10px; }
  .pd-core-row em{ font-size: 10px; }
  .pd-g4{ grid-template-columns: 40px repeat(4, 1fr); }
  .pd-g3v{ grid-template-columns: 40px repeat(3, 1fr); }
  .pd-v-big{ font-size: 18px; }
  .pd-v{ font-size: 13px; }
  .pd-rl{ font-size: 10.5px; }
}