/* ============================================================
 *  八字排盘 · 样式
 *  设计语言：现代东方美学 —— 宣纸底 / 朱砂主色 / 五行五色 / 细线分隔
 * ============================================================ */

:root {
  /* 玄金深色主题：墨玄底 + 浅金线刻 + 朱砂点缀 */
  --paper: #10151A;
  --paper-2: #161D22;
  --card: #1B2428;
  --sunken: #0E1418;
  --ink: #F0E9D9;
  --ink-2: #C6BEA9;
  --ink-3: #958D7A;
  --ink-4: #6C675A;
  --line: #333D41;
  --line-2: #2A3236;

  --cinnabar: #D15A3E;
  --cinnabar-2: #E0704F;
  --cinnabar-soft: #3A221B;
  --cinnabar-line: #6E3B2B;

  --pine: #3E6A64;
  --gold: #D8B56A;
  --gold-line: #8A7445;
  --gold-soft: #2C2A1E;

  --w-wood: #6FAE7C;
  --w-fire: #E0684E;
  --w-earth: #D8A653;
  --w-metal: #C8B06B;
  --w-water: #5F97BE;

  --ji: #5FBF8F;
  --ji-soft: #16352A;
  --ping: #B7AC93;
  --ping-soft: #26261E;
  --xiong: #E0684E;
  --xiong-soft: #3A221E;

  --r-xl: 20px;
  --r-lg: 16px;
  --r-md: 10px;
  --r-sm: 8px;
  --r-pill: 999px;

  --sh-1: 0 1px 3px rgba(0, 0, 0, .42);
  --sh-2: 0 2px 12px rgba(0, 0, 0, .48);
  --sh-3: 0 10px 34px rgba(0, 0, 0, .58);
  --sh-red: 0 6px 18px rgba(209, 90, 62, .34);

  --f-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
  --f-sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;

  --tabbar-h: 60px;
  --header-h: 56px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-sans);
  background: #0B0F11;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

/* 桌面端：纸质画布居中 */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  position: relative;
  box-shadow: 0 0 0 1px rgba(28, 26, 23, .06), 0 24px 70px rgba(28, 26, 23, .18);
  display: flex;
  flex-direction: column;
}
@media (min-width: 520px) {
  body { padding: 0; }
  .app { min-height: 100vh; }
}

/* ---------------- Header ---------------- */
.hd {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h); flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: rgba(16, 21, 26, .92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.hd .brand { display: flex; align-items: center; gap: 9px; }
.hd .brand-logo {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; display: block; flex: none;
  box-shadow: 0 2px 8px rgba(28, 26, 23, .16);
}
.hd .tt { font-family: var(--f-serif); font-size: 16.5px; font-weight: 700; letter-spacing: .06em; }
.hd .st { font-size: 10.5px; color: var(--ink-3); letter-spacing: .18em; margin-top: -3px; }
.hd .act {
  font-size: 12px; color: var(--ink-2); border: 1px solid var(--line);
  background: var(--card); padding: 5px 11px; border-radius: var(--r-pill); cursor: pointer;
}

/* ---------------- 主区 ---------------- */
.main { flex: 1; padding: 14px 14px calc(var(--tabbar-h) + 22px); }
.page { display: none; animation: fade .28s ease; }
.page.on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------- 首页宣传通栏 ---------------- */
.home-banner {
  margin: 2px 0 14px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(28, 26, 23, .18);
  border: 1px solid rgba(176, 141, 79, .38);
}
.home-banner img { display: block; width: 100%; height: auto; }

/* ---------------- 卡片 ---------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--sh-1);
}
.card.tight { padding: 14px; }
.sec-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 22px 2px 10px;
}
.sec-h h2 {
  font-family: var(--f-serif); font-size: 16px; font-weight: 700;
  margin: 0; letter-spacing: .04em; position: relative; padding-left: 11px;
}
.sec-h h2::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 14px; border-radius: 2px; background: var(--cinnabar);
}
.sec-h .more { font-size: 11.5px; color: var(--ink-3); text-decoration: none; }

/* ---------------- 表单 ---------------- */
.field { margin-bottom: 15px; }
.field:last-child { margin-bottom: 0; }
.lb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-3); letter-spacing: .08em; margin-bottom: 7px;
}
.lb .req { color: var(--cinnabar); }
.lb .hint { margin-left: auto; font-size: 10.5px; color: var(--ink-4); letter-spacing: 0; }

input[type=text], input[type=date], select {
  width: 100%; height: 42px; padding: 0 12px;
  font-family: var(--f-sans); font-size: 15px; color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  outline: none; transition: .16s;
  -webkit-appearance: none; appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23C6BEA9' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}
input:focus, select:focus { border-color: var(--cinnabar); background: #222C30; box-shadow: 0 0 0 3px var(--cinnabar-soft); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

/* 分段切换 */
.seg { display: flex; background: var(--sunken); border-radius: var(--r-md); padding: 3px; gap: 3px; }
.seg button {
  flex: 1; height: 34px; border: 0; border-radius: 7px; background: transparent;
  font-family: var(--f-sans); font-size: 13.5px; color: var(--ink-2); cursor: pointer; transition: .16s;
}
.seg button.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--sh-1); }

/* 时辰 chips */
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.chip {
  height: 46px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper-2); cursor: pointer; transition: .14s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-family: var(--f-sans); padding: 0;
}
.chip .zg { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.chip .tm { font-size: 9.5px; color: var(--ink-4); line-height: 1.1; }
.chip.on { border-color: var(--cinnabar); background: var(--cinnabar-soft); box-shadow: 0 0 0 2px rgba(200, 68, 46, .1); }
.chip.on .zg { color: var(--cinnabar-2); }
.chip.on .tm { color: var(--cinnabar); opacity: .75; }
.chip.wide { grid-column: span 4; height: 40px; flex-direction: row; gap: 6px; }
.chip.wide .zg { font-size: 13.5px; }

/* 开关 */
.switch-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0 3px; border-top: 1px dashed var(--line); margin-top: 14px;
}
.switch-row .t { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.switch-row .d { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.sw { width: 44px; height: 25px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: .2s; flex: none; }
.sw::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: .2s;
}
.sw.on { background: var(--cinnabar); }
.sw.on::after { left: 21.5px; }

/* 主按钮 */
.btn {
  width: 100%; height: 48px; border: 0; border-radius: var(--r-md);
  background: var(--cinnabar); color: #fff;
  font-family: var(--f-serif); font-size: 16px; font-weight: 700; letter-spacing: .14em;
  cursor: pointer; box-shadow: var(--sh-red); transition: .16s;
}
.btn:active { transform: translateY(1px); background: var(--cinnabar-2); }
.btn.ghost {
  background: var(--card); color: var(--ink-2); border: 1px solid var(--line);
  box-shadow: none; font-size: 14px; letter-spacing: .06em; font-family: var(--f-sans); font-weight: 600;
}
.btn-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
/* 生成分享图 · 金色渐变主按钮（玄金风格，与朱砂主按钮区分层级） */
.btn.poster {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(135deg, #E6CB85 0%, #CFA653 55%, #B28C3E 100%);
  color: #261B07;
  font-size: 15.5px; letter-spacing: .12em;
  box-shadow: 0 4px 14px rgba(216, 181, 106, .30), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn.poster .pi { flex: none; opacity: .92; }
.btn.poster:active {
  transform: translateY(1px);
  background: linear-gradient(135deg, #D8BC77 0%, #C29B48 55%, #A58134 100%);
}

/* ---------------- 排盘结果 ---------------- */
/* 结果页左上角半透明返回按钮（返回表单页；置于 sticky header 下方，避免被 header 遮挡） */
.back-btn {
  position: fixed; top: calc(var(--header-h) + 10px); left: 12px; z-index: 35;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(17, 28, 26, .42);
  color: #fff; font-size: 22px; line-height: 30px; text-align: center;
  padding: 0; cursor: pointer;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.back-btn:active { opacity: .6; }
.res-hd {
  background: linear-gradient(160deg, #2E4A47 0%, #1F3432 100%);
  border-radius: var(--r-lg); padding: 16px; color: #F2EDE4; margin-bottom: 12px;
  position: relative; overflow: hidden;
}
.res-hd::after {
  content: '命'; position: absolute; right: -14px; bottom: -26px;
  font-family: var(--f-serif); font-size: 92px; font-weight: 700;
  color: rgba(255, 255, 255, .05); line-height: 1;
}
.res-hd .nm { font-family: var(--f-serif); font-size: 19px; font-weight: 700; letter-spacing: .04em; }
.res-hd .meta { font-size: 11.5px; opacity: .72; margin-top: 3px; line-height: 1.6; }
.res-hd .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.res-hd .tag {
  font-size: 11px; padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .16);
}

/* 四柱盘 */
.pillars {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-1);
}
.pl { padding: 12px 4px 10px; text-align: center; position: relative; }
.pl + .pl::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--line-2);
}
.pl .pl-name {
  font-family: var(--f-serif); font-size: 11px; color: var(--ink-3); letter-spacing: .1em;
}
.pl .pl-shen {
  font-size: 11px; color: var(--cinnabar); font-weight: 600; margin-top: 2px; min-height: 17px;
}
.pl .pl-gan {
  font-family: var(--f-serif); font-size: 30px; font-weight: 700; line-height: 1.15; margin-top: 3px;
}
.pl .pl-zhi {
  font-family: var(--f-serif); font-size: 30px; font-weight: 700; line-height: 1.15;
}
.pl .pl-ny { font-size: 10px; color: var(--ink-4); margin-top: 5px; }
.pl .pl-hide { margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--line); }
.pl .hg { font-size: 11px; color: var(--ink-2); line-height: 1.55; }
.pl .hg i { font-style: normal; font-size: 9.5px; color: var(--ink-4); margin-left: 2px; }
.pl .pl-extra { font-size: 9.5px; color: var(--ink-4); margin-top: 5px; line-height: 1.5; }
.pl.dim { opacity: .42; }
.wx-木 { color: var(--w-wood); }
.wx-火 { color: var(--w-fire); }
.wx-土 { color: var(--w-earth); }
.wx-金 { color: var(--w-metal); }
.wx-水 { color: var(--w-water); }

/* 校正说明 */
.note {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--gold-soft); border: 1px solid #8A7445; border-radius: var(--r-md);
  padding: 10px 12px; margin-top: 10px;
}
.note .ic { font-size: 13px; line-height: 1.4; }
.note .tx { font-size: 11.5px; color: #E0BE72; line-height: 1.65; }
.note.info { background: var(--cinnabar-soft); border-color: var(--cinnabar-line); }
.note.info .tx { color: var(--cinnabar-2); }

/* 五行分布 */
.wx-list { display: flex; flex-direction: column; gap: 9px; }
.wx-item { display: flex; align-items: center; gap: 10px; }
.wx-item .nm {
  width: 22px; flex: none; font-family: var(--f-serif); font-size: 14px; font-weight: 700; text-align: center;
}
.wx-item .bar { flex: 1; height: 9px; background: var(--sunken); border-radius: 99px; overflow: hidden; }
.wx-item .fill { height: 100%; border-radius: 99px; transition: width .7s cubic-bezier(.22, .8, .3, 1); }
.wx-item .vl { width: 52px; flex: none; text-align: right; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wx-item .vl b { font-size: 13.5px; font-weight: 700; }
.wx-item .vl span { color: var(--ink-4); font-size: 10.5px; margin-left: 3px; }

/* 强弱 */
.strength { display: flex; align-items: center; gap: 14px; }
.st-ring { width: 82px; height: 82px; flex: none; position: relative; }
.st-ring svg { transform: rotate(-90deg); }
.st-ring .ctr {
  position: absolute; inset: 0; display: grid; place-items: center;
  align-content: center; text-align: center;
}
.st-ring .ctr .lv { font-family: var(--f-serif); font-size: 17px; font-weight: 700; }
.st-ring .ctr .sc { font-size: 9.5px; color: var(--ink-4); }
.st-info { flex: 1; }
.st-info .kvs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kv {
  font-size: 11px; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--ping-soft); color: var(--ink-2); border: 1px solid var(--line);
}
.kv.yes { background: var(--ji-soft); color: var(--ji); border-color: #2A4A3A; }
.kv.no { background: var(--sunken); color: var(--ink-4); }
.st-info .ys { font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.st-info .ys b { color: var(--ji); }

/* 日主旺衰 · 分享解锁（第四轮） */
.card.st-lk { position: relative; overflow: hidden; }
.card.st-lk .strength { filter: blur(6px); -webkit-filter: blur(6px); user-select: none; pointer-events: none; opacity: .75; }
.card.st-lk .st-lock {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 18, 22, .6);
  border-radius: var(--r-lg);
}
.card.st-lk .st-lock .lk-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--cinnabar);
  background: #222C30; border: 1px solid var(--cinnabar-line);
  padding: 8px 16px; border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
  cursor: pointer;
}
.card.st-lk .st-lock .lk-tag:active { transform: scale(.97); }

/* 私域引流 · 老师人工精批 */
.lead-card {
  margin: 14px 0 6px; padding: 14px;
  background: linear-gradient(135deg, var(--gold-soft) 0%, #2C2A1E 100%);
  border: 1px solid var(--gold-line); border-radius: var(--r-lg);
}
.lead-card .lead-hd {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 9px; margin-bottom: 9px;
  border-bottom: 1px dashed rgba(176, 141, 79, .45);
}
.lead-card .lead-ic { font-size: 22px; flex: none; }
.lead-card .lead-gift {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 700; color: #E8C87A; line-height: 1.4;
}
.lead-card .lead-tx { }
.lead-card .lead-t1 { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.lead-card .lead-t2 { font-size: 12px; color: var(--ink-2); line-height: 1.7; margin-top: 3px; }
.lead-card .lead-t2 b { color: var(--cinnabar); }
.lead-card .lead-btn { width: 100%; height: 38px; margin-top: 10px; font-size: 13.5px; }

/* 十神表 */
.shen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.shen-c {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 10px; background: var(--paper-2);
}
.shen-c .n { font-family: var(--f-serif); font-size: 13.5px; font-weight: 700; }
.shen-c .c { font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }

/* 神煞 */
.ss-list { display: flex; flex-direction: column; gap: 8px; }
.ss {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; background: var(--paper-2);
}
.ss .bd { width: 3px; align-self: stretch; border-radius: 2px; flex: none; }
.ss.吉 .bd { background: var(--ji); }
.ss.凶 .bd { background: var(--xiong); }
.ss.中 .bd { background: var(--ping); }
.ss .tx { flex: 1; }
.ss .hd2 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ss .nm { font-family: var(--f-serif); font-size: 14px; font-weight: 700; }
.ss .tp {
  font-size: 10px; padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid;
}
.ss.吉 .tp { color: var(--ji); background: var(--ji-soft); border-color: #2A4A3A; }
.ss.凶 .tp { color: var(--xiong); background: var(--xiong-soft); border-color: var(--cinnabar-line); }
.ss.中 .tp { color: var(--ping); background: var(--ping-soft); border-color: var(--line); }
.ss .pos { font-size: 10.5px; color: var(--ink-4); }
.ss .ds { font-size: 11.5px; color: var(--ink-2); line-height: 1.65; margin-top: 3px; }

/* 大运 */
.dy-wrap { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.dy-wrap::-webkit-scrollbar { height: 4px; }
.dy-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.dy {
  flex: none; width: 74px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper-2); padding: 9px 4px; text-align: center; cursor: pointer; transition: .16s;
}
.dy .age { font-size: 10.5px; color: var(--ink-3); }
.dy .gz { font-family: var(--f-serif); font-size: 16px; font-weight: 700; margin: 2px 0 1px; }
.dy .ys { font-size: 10px; color: var(--ink-4); }
.dy .yr { font-size: 9.5px; color: var(--ink-4); margin-top: 2px; }
.dy.on { border-color: var(--cinnabar); background: var(--cinnabar-soft); box-shadow: 0 0 0 2px rgba(200, 68, 46, .09); }
.dy.now .age { color: var(--cinnabar); font-weight: 700; }

/* 流年 */
.ln-wrap { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 6px; }
.ln {
  flex: none; min-width: 52px; border-radius: var(--r-sm); padding: 6px 4px; text-align: center;
  background: var(--sunken); border: 1px solid transparent;
}
.ln .y { font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ln .g { font-family: var(--f-serif); font-size: 13px; font-weight: 700; }
.ln.now { background: var(--cinnabar); border-color: var(--cinnabar); }
.ln.now .y, .ln.now .g { color: #fff; }

/* 解读 Tab */
.tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 12px; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--card); font-size: 13px; color: var(--ink-2); cursor: pointer; transition: .16s;
  font-family: var(--f-sans);
}
.tab.on { background: var(--cinnabar); border-color: var(--cinnabar); color: #fff; font-weight: 600; }
.reading { display: none; }
.reading.on { display: block; animation: fade .24s ease; }
.reading p {
  font-size: 13.5px; line-height: 1.85; color: var(--ink-2); margin: 0 0 11px;
  padding-left: 13px; position: relative;
}
.reading p::before {
  content: ''; position: absolute; left: 0; top: 10px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--cinnabar); opacity: .5;
}
.reading p b { color: var(--ink); font-weight: 700; }

/* 档案列表 */
.arch-item {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); margin-bottom: 8px;
}
.arch-item .av {
  width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--cinnabar-soft);
  color: var(--cinnabar-2); display: grid; place-items: center; font-family: var(--f-serif); font-size: 17px; font-weight: 700;
}
.arch-item .tx { flex: 1; min-width: 0; }
.arch-item .n1 { font-size: 14px; font-weight: 600; }
.arch-item .n2 { font-size: 11px; color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-item .del {
  flex: none; font-size: 11px; color: var(--ink-4); border: 1px solid var(--line);
  background: none; padding: 4px 9px; border-radius: var(--r-pill); cursor: pointer;
}

/* 空态 */
.empty { text-align: center; padding: 54px 20px; color: var(--ink-3); }
.empty .ic { font-size: 34px; opacity: .3; }
.empty .t { font-size: 13.5px; margin-top: 10px; }

/* ---------------- TabBar ---------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  width: 100%; max-width: 100%;
  height: var(--tabbar-h); display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(18, 24, 28, .94);
  backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 520px) {
  .tabbar { max-width: 480px; margin: 0 auto; }
}
.tabbar button {
  border: 0; background: none; cursor: pointer; padding: 7px 0 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--f-sans); font-size: 10.5px; color: var(--ink-4); transition: .16s;
}
.tabbar button svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tabbar button.on { color: var(--cinnabar); }
.tabbar button.on svg { stroke-width: 1.9; }

/* ---------------- 浮层 ---------------- */
.ovl {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(20, 17, 15, .5); backdrop-filter: blur(2px);
  align-items: flex-end; justify-content: center;
}
.ovl.on { display: flex; }
/* 居中变体（确认信息弹窗用） */
.ovl.center-on { align-items: center; padding: 16px; }
.sheet {
  width: 100%; max-width: 480px; max-height: 82vh; overflow-y: auto;
  background: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
  animation: up .28s cubic-bezier(.22, .8, .3, 1);
}
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
.sheet .grab { width: 36px; height: 4px; border-radius: 99px; background: var(--line); margin: 6px auto 14px; }
.sheet h3 { font-family: var(--f-serif); font-size: 17px; margin: 0 0 4px; }
.sheet .sub { font-size: 11.5px; color: var(--ink-3); margin-bottom: 14px; }
.sheet .close {
  width: 100%; height: 44px; margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); font-size: 14px; color: var(--ink-2); cursor: pointer; font-family: var(--f-sans);
}
.term { margin-bottom: 15px; }
.term .t { font-family: var(--f-serif); font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.term .d { font-size: 12.5px; color: var(--ink-2); line-height: 1.75; }

/* ---------------- 确认信息弹窗（confirm.js） ---------------- */
.cfm-card {
  width: 100%; max-width: 360px; max-height: 86vh; overflow-y: auto;
  background: var(--paper); border-radius: 16px;
  padding: 22px 20px 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  animation: cfm-pop .26s cubic-bezier(.22,.8,.3,1.05);
}
@keyframes cfm-pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.cfm-head { position: relative; text-align: center; margin: 4px 0 18px; }
.cfm-title {
  display: inline-block; margin: 0;
  font-family: var(--f-serif); font-size: 20px; font-weight: 700;
  color: var(--cinnabar-2); letter-spacing: .14em;
}
/* 注：.cfm-head / .cfm-deco / .cfm-privacy 在"第四轮增强"区块（文件末尾）被 flex 版覆盖，
   此处只保留兜底，实际生效的是末尾那套。 */
.cfm-deco { position: absolute; top: 50%; transform: translateY(-50%); color: var(--cinnabar-line); }
.cfm-deco-l { left: 6px; width: 44px; height: auto; }
.cfm-deco-r { right: 6px; width: 44px; height: auto; }

/* 单栏：两列网格 —— 短字段各占半行（姓名/性别并排），full 字段跨整行 */
.cfm-body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 12px;
  margin: 4px 0 6px;
}
.cfm-row {
  display: flex; justify-content: flex-start; align-items: baseline;
  gap: 4px; min-width: 0;
  font-size: 14px; line-height: 1.55;
  padding: 7px 2px;
}
.cfm-row.full { grid-column: 1 / -1; align-items: flex-start; }
.cfm-k { color: var(--ink-3); font-size: 13.5px; flex: 0 0 auto; }
.cfm-k::after { content: '：'; }
.cfm-v { color: var(--ink); font-weight: 600; min-width: 0; word-break: break-all; }

/* 双栏（合婚） */
.cfm-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 0 -2px 4px;
}
.cfm-col {
  background: var(--paper-2, var(--card));
  border-radius: 10px;
  padding: 10px 12px 4px;
  border: 1px solid var(--line);
}
.cfm-col-h {
  font-family: var(--f-serif); font-size: 12.5px;
  color: var(--cinnabar-2); letter-spacing: .12em;
  margin-bottom: 4px; text-align: center;
  border-bottom: 1px dashed var(--cinnabar-line);
  padding-bottom: 4px;
}
.cfm-col .cfm-row { padding: 5px 0; font-size: 13px; }
.cfm-col .cfm-k { font-size: 12.5px; }
.cfm-col .cfm-row.full { flex-direction: column; gap: 1px; }
.cfm-col .cfm-row.full .cfm-v { font-size: 12px; line-height: 1.5; }

.cfm-privacy {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.7;
  margin: 14px 4px 14px;
  padding: 10px 12px;
  background: var(--card); border-radius: 8px;
  border: 1px dashed var(--line);
}
.cfm-acts {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px;
  margin-top: 10px;
}
.cfm-btn {
  height: 46px; border-radius: 23px;
  font-family: var(--f-sans); font-size: 14.5px; font-weight: 700;
  cursor: pointer; transition: transform .12s ease, opacity .12s ease;
  display: flex; align-items: center; justify-content: center;
}
.cfm-btn:active { transform: scale(.97); }
.cfm-btn-ghost {
  background: var(--paper); color: var(--cinnabar-2);
  border: 1.5px solid var(--cinnabar-line);
}
.cfm-btn-ghost:active { background: var(--card); }
.cfm-btn-primary {
  background: linear-gradient(135deg, var(--cinnabar), #B83528);
  color: #FFF8EE;
  border: none;
  box-shadow: 0 4px 14px rgba(200,68,46,.28);
  letter-spacing: .12em;
}

/* 提示条 */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 20px); transform: translateX(-50%) translateY(10px);
  background: rgba(28, 26, 23, .92); color: #F5EFE4; font-size: 13px;
  padding: 9px 18px; border-radius: var(--r-pill); z-index: 120;
  opacity: 0; pointer-events: none; transition: .24s; max-width: 84vw; text-align: center;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 免责 */
.disclaim { font-size: 10.5px; color: var(--ink-4); text-align: center; line-height: 1.7; padding: 4px 8px 10px; }

/* ============================================================
 *  付费墙 · 锦旗式板块（命局解读）
 *  视觉对照：参考图 —— 圆角矩形 + 顶轴头 + 朱砂印章 + 列表 chip
 * ============================================================ */

/* 7 大板块的元数据（标题 + 副标 + 图标 emoji） */
:root {
  --wx-chip-bg: #1A2327;
  --wx-chip-line: #2E383C;
  --pay-grad: linear-gradient(135deg, #D15A3E 0%, #E0683E 100%);
}

/* 单个锦旗板块 */
.scroll-board {
  position: relative;
  margin: 0 0 22px;
  padding: 22px 14px 16px;
  background: linear-gradient(180deg, #161D22 0%, #171F23 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
/* 左右朱砂细线 + 居中印章式标题（v2 简化：去掉了原版的两个圆圈轴头） */
.scroll-title-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 6px;
  margin: 0 0 10px;
  text-align: center;
}
.scroll-title-wrap::before,
.scroll-title-wrap::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-line) 50%, transparent 100%);
  margin: 0 8px;
}
/* 板块标题（墨绿印章式 · 庄重高端） */
.scroll-title {
  position: relative;
  font-family: var(--f-serif);
  font-size: 16.5px;
  font-weight: 700;
  color: #F2EDE4;
  letter-spacing: .06em;
  margin: 0;
  padding: 8px 18px;
  display: inline-block;
  background: linear-gradient(160deg, #2E4A47 0%, #1F3432 100%);
  border: 1px solid #42605C;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset, 0 3px 10px rgba(28, 26, 23, .20);
  flex: none;
  white-space: nowrap;
}
.scroll-title .ti { font-size: 16px; margin-right: 5px; opacity: .92; }

/* 板块全部收起/展开按钮 */
.scroll-fold {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 27px; height: 27px; border-radius: 50%;
  background: rgba(62, 106, 100, .16);
  border: 1px solid #8A7445;
  color: #D8B56A;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; line-height: 0;
  transition: .2s;
}
.scroll-fold:active { transform: translateY(-50%) scale(.94); background: rgba(46, 74, 71, .2); }

.scroll-count {
  display: block; text-align: center;
  font-size: 11px; color: var(--ink-3); margin: -4px 0 12px;
  letter-spacing: .04em;
}

/* 子项列表 */
.scroll-items { list-style: none; padding: 0; margin: 0; }
.scroll-item {
  position: relative;
  background: var(--wx-chip-bg);
  border: 1px solid var(--wx-chip-line);
  border-radius: var(--r-md);
  padding: 10px 13px;
  margin-bottom: 8px;
  transition: .2s;
}
.scroll-item:last-child { margin-bottom: 0; }

/* 结论摘要卡（板块顶部 · 墨绿金句） */
.board-summary {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 0 0 10px; padding: 12px 13px;
  background: linear-gradient(135deg, #27403D 0%, #1C2E2C 100%);
  border: 1px solid #4A6763;
  border-radius: var(--r-md);
  color: #F2EDE4;
  box-shadow: 0 3px 10px rgba(28, 26, 23, .16);
}
.board-summary .bs-ic {
  color: #D8B56A; font-size: 15px; line-height: 1.6; flex: none;
  text-shadow: 0 0 8px rgba(216, 181, 106, .35);
}
.board-summary .bs-tx { font-size: 13px; line-height: 1.85; color: #EFE9DD; }
.board-summary .bs-tx b { color: #E8CE9C; font-weight: 700; }

/* 板块关键指标标签（数据卡） */
.board-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.meta-tag {
  font-size: 11px; color: var(--ink-2);
  background: #232C30; border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 3px 10px;
}
.meta-tag b { color: #C9A96A; font-weight: 700; margin-right: 3px; }

/* 子项标题行（含序号 / 标题 / 折叠箭头） */
.scroll-item .it-row { display: flex; align-items: center; gap: 8px; }
.scroll-item .it-row.tgl { cursor: pointer; border-radius: 6px; }
.scroll-item .it-row.tgl:active { opacity: .75; }
.scroll-item .idx {
  flex: none; width: 22px; text-align: center;
  font-family: var(--f-serif); font-size: 11.5px; font-weight: 700;
  color: #C9A96A; letter-spacing: .02em;
  border-right: 1px solid var(--line); padding-right: 7px;
}
.scroll-item .it {
  flex: 1; min-width: 0;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  line-height: 1.5;
}
.scroll-item .fx {
  flex: none; font-size: 12px; color: var(--ink-3);
  transition: transform .22s ease;
}
.scroll-item.folded .fx { transform: rotate(-90deg); }
.scroll-item.folded .ib { display: none; }

.scroll-item .ib {
  font-size: 12.5px; line-height: 1.85; color: var(--ink-2);
  margin-top: 5px;
}
.scroll-item .ib b { color: var(--ink); font-weight: 700; }
.scroll-item .ib strong { color: var(--ink); font-weight: 700; }

/* 要点列表（结构化解读） */
.ib-points { margin: 8px 0 0; padding: 0; list-style: none; }
.ib-points li {
  position: relative; padding-left: 16px;
  font-size: 12.5px; line-height: 1.8; color: var(--ink-2);
  margin-bottom: 4px;
}
.ib-points li::before {
  content: '◆'; position: absolute; left: 0; top: 1px;
  font-size: 8px; color: #B08D4F;
}

/* =====================  付费墙  ===================== */
/* 锁定的子项详情 */
.scroll-item.lk { padding-bottom: 0; }
.scroll-item.lk .ib {
  position: relative;
  filter: blur(5.5px);
  -webkit-filter: blur(5.5px);
  user-select: none;
  pointer-events: none;
  max-height: 64px;
  overflow: hidden;
  margin-bottom: 0;
  padding-bottom: 0;
}
.scroll-item .lock-mask {
  position: absolute; left: 11px; right: 11px; bottom: 8px;
  height: 64px;
  background: linear-gradient(180deg, rgba(13, 18, 22, 0) 0%, rgba(13, 18, 22, .88) 40%, var(--wx-chip-bg) 90%);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 8px;
  z-index: 1;
}
.scroll-item .lock-mask .lk-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--cinnabar);
  background: #222C30; border: 1px solid var(--cinnabar-line);
  padding: 2px 10px; border-radius: var(--r-pill);
  font-weight: 600;
}

/* 解锁后的子项（去除遮罩） */
.scroll-item.ok .ib { filter: none; -webkit-filter: none; }
.scroll-item.ok .lock-mask { display: none; }

/* 整体板块锁定（仅显示标题+子项标题） */
.scroll-board.fully-lk { padding-bottom: 18px; }

/* 合婚深度解读解锁 CTA */
.hh-unlock-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 12px 14px;
  background: linear-gradient(135deg, #3A221B 0%, #331E1A 100%);
  border: 1px solid var(--cinnabar-line);
  border-radius: var(--r-md);
  font-size: 12px; color: var(--ink-2); line-height: 1.6;
}
.hh-unlock-bar b { color: var(--cinnabar); }
.hh-unlock-bar .btn { flex: none; width: auto; height: 34px; font-size: 13px; }

/* =====================  付费状态条  ===================== */
.paybar {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 16px;
  padding: 11px 13px;
  background: linear-gradient(135deg, #3A221B 0%, #331E1A 100%);
  border: 1px solid var(--cinnabar-line);
  border-radius: var(--r-md);
}
.paybar .pi { font-size: 17px; }
.paybar .pt { flex: 1; min-width: 0; }
.paybar .pt .t1 { font-size: 13px; font-weight: 700; color: var(--cinnabar-2); line-height: 1.3; }
.paybar .pt .t2 { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.paybar .pb {
  flex: none; font-size: 12px; font-weight: 700; color: #fff;
  background: var(--pay-grad);
  border: 0; padding: 7px 14px; border-radius: var(--r-pill);
  cursor: pointer; font-family: var(--f-sans);
  box-shadow: var(--sh-red);
}
.paybar.is-unlocked {
  background: linear-gradient(135deg, #16352A 0%, #14302A 100%);
  border-color: #2A4A3A;
}
.paybar.is-unlocked .pt .t1 { color: var(--ji); }
.paybar.is-unlocked .pi { filter: hue-rotate(70deg) saturate(.7); }

/* 浮动解锁 CTA */
.unlock-fab {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 22px 11px 16px;
  background: var(--pay-grad); color: #fff;
  border: 0; border-radius: var(--r-pill);
  font-family: var(--f-sans); font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(200, 68, 46, .35);
  cursor: pointer;
  animation: pulse 1.8s ease-in-out infinite;
  will-change: transform;
}
.unlock-fab::before { content: '🔒'; font-size: 14px; }
.unlock-fab .pr { font-weight: 600; opacity: .92; }
.unlock-fab .pr b { font-size: 16px; }
.unlock-fab.is-hidden { display: none; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(200, 68, 46, .35); }
  50%      { box-shadow: 0 8px 30px rgba(200, 68, 46, .55); }
}

/* 付费弹层 */
.pay-sheet { background: var(--paper); }
.pay-hero {
  text-align: center; padding: 6px 0 14px;
}
.pay-hero .em { font-size: 36px; line-height: 1; }
.pay-hero .ht {
  font-family: var(--f-serif); font-size: 20px; font-weight: 700;
  color: var(--cinnabar); margin: 8px 0 4px;
}
.pay-hero .hd { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.pay-price {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin: 10px 0 6px;
}
.pay-price .cur { font-size: 18px; color: var(--cinnabar); }
.pay-price .num { font-family: var(--f-serif); font-size: 38px; font-weight: 700; color: var(--cinnabar); line-height: 1; }
.pay-price .old { font-size: 13px; color: var(--ink-4); text-decoration: line-through; }

.pay-list { list-style: none; padding: 0; margin: 0 0 16px; }
.pay-list li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px; color: var(--ink-2); line-height: 1.6;
}
.pay-list li:last-child { border-bottom: 0; }
.pay-list li::before {
  content: '✓'; color: var(--ji); font-weight: 700; flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ji-soft); display: grid; place-items: center;
  font-size: 12px;
}
.pay-list li b { color: var(--ink); font-weight: 600; }

.pay-cta {
  display: flex; gap: 8px; margin-top: 8px;
}
.pay-cta .btn-main {
  flex: 1; height: 46px; border: 0; border-radius: var(--r-md);
  background: var(--pay-grad); color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--f-sans);
  box-shadow: var(--sh-red);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pay-cta .btn-side {
  flex: none; width: 78px; height: 46px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--card);
  font-size: 12px; color: var(--ink-2); cursor: pointer; font-family: var(--f-sans);
}
.pay-foot {
  text-align: center; font-size: 10.5px; color: var(--ink-4);
  margin-top: 10px; line-height: 1.6;
}
.pay-tabs {
  display: flex; gap: 6px; margin: 8px 0 14px;
  background: var(--sunken); border-radius: var(--r-md);
  padding: 3px;
}
.pay-tabs button {
  flex: 1; height: 32px; border: 0; background: transparent;
  font-size: 12.5px; color: var(--ink-2); cursor: pointer;
  border-radius: 7px; font-family: var(--f-sans);
}
.pay-tabs button.on {
  background: var(--card); color: var(--cinnabar); font-weight: 700;
  box-shadow: var(--sh-1);
}
.pay-qr {
  display: none;
  background: #fff; border-radius: var(--r-md);
  padding: 16px; margin: 10px 0 4px; text-align: center;
  border: 1px solid var(--line);
}
.pay-qr.on { display: block; }
.pay-qr .ic { font-size: 64px; color: var(--ji); }
.pay-qr .lb { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.pay-qr .lb b { color: var(--ji); }

/* 联系老师 · 微信二维码浮层 */
.teacher-sheet { text-align: center; }
.teacher-sheet .sub { margin-bottom: 12px; }
.teacher-qr {
  width: 260px; height: 260px; margin: 6px auto 14px; display: block;
  border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.teacher-tip { font-size: 12px; color: var(--ink-3); line-height: 1.8; margin-bottom: 18px; }
.teacher-sheet .btn-side.full { margin-bottom: 6px; }

/* 解锁中心弹层（分享解锁 + 付费解锁） */
.unlock-sheet { background: var(--paper); }
.unlock-card { border-radius: var(--r-md); padding: 14px; margin-bottom: 12px; }
.unlock-card.share { background: linear-gradient(135deg, #16352A 0%, #14302A 100%); border: 1px solid #2A4A3A; }
.unlock-card.pay   { background: linear-gradient(135deg, #3A221B 0%, #331E1A 100%); border: 1px solid var(--cinnabar-line); }
.unlock-card .uc-t { font-size: 14px; font-weight: 700; color: var(--ink); }
.unlock-card .uc-t em { font-style: normal; font-size: 11px; font-weight: 600; margin-left: 6px; color: var(--ink-3); }
.unlock-card.share .uc-t em { color: var(--ji); }
.unlock-card.pay .uc-t em { color: var(--cinnabar); }
.unlock-card .uc-d { font-size: 12px; color: var(--ink-2); line-height: 1.65; margin: 6px 0 12px; }
.unlock-card .btn-main {
  width: 100%; height: 44px; border: 0; border-radius: var(--r-md);
  background: var(--pay-grad); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--f-sans);
  box-shadow: var(--sh-red);
}
.unlock-card .uc-foot { font-size: 10.5px; color: var(--ink-4); margin-top: 8px; line-height: 1.6; }

/* 付费弹层 · 演示模式标识（上线接真实支付后删除） */
.pay-demo-tag {
  margin: 2px 4px 12px; padding: 8px 12px; border-radius: 10px;
  background: rgba(216, 181, 106, 0.12); border: 1px dashed rgba(216, 181, 106, 0.55);
  color: #D8B56A; font-size: 12px; line-height: 1.6; text-align: center;
}
.unlock-card.is-done { opacity: .55; }
.unlock-card.is-done .btn-main { background: var(--ink-4); box-shadow: none; cursor: default; }
.unlock-card.is-done::after {
  content: '✓ 已解锁'; display: block; font-size: 12px; font-weight: 700;
  color: var(--ji); margin-top: 8px;
}
.btn-side.full {
  width: 100%; height: 44px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--card);
  font-size: 13px; color: var(--ink-2); cursor: pointer; font-family: var(--f-sans);
}

/* ============================================================
 *  万年历
 * ============================================================ */
.cal-nav {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 10px 12px; margin-bottom: 12px;
  box-shadow: var(--sh-1);
}
.cal-arrow {
  width: 36px; height: 36px; flex: none; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--paper-2); color: var(--ink-2);
  font-size: 20px; line-height: 1; cursor: pointer; font-family: var(--f-sans);
}
.cal-arrow:active { background: var(--sunken); }
.cal-ym { flex: 1; text-align: center; }
.cal-ym b {
  font-family: var(--f-serif); font-size: 19px; font-weight: 700;
  color: var(--ink); letter-spacing: .02em;
}
.cal-ym-ln {
  display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px;
  letter-spacing: .04em;
}
.cal-today {
  flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--cinnabar-line);
  border-radius: var(--r-pill); background: var(--cinnabar-soft); color: var(--cinnabar-2);
  font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: var(--f-sans);
}

.cal-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0;
  padding: 9px 0 7px; margin-bottom: 0;
}
.cal-week span {
  text-align: center; font-size: 12px; color: var(--ink-3); font-weight: 600;
}
.cal-week span.we { color: var(--cinnabar); }

/* 吉日速查 */
.cal-affair {
  background: var(--card); border: 1px solid var(--line);
  border-bottom: 0; padding: 12px 12px 10px;
}
.ca-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.ca-ti {
  font-family: var(--f-serif); font-size: 13.5px; font-weight: 700; color: var(--ink);
  position: relative; padding-left: 9px;
}
.ca-ti::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 12px; border-radius: 2px; background: var(--cinnabar);
}
.ca-sub { font-size: 11px; color: var(--ink-2); }
.ca-chips { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ca-chips .chip { height: 36px; flex-direction: row; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.ca-chips .chip.on { background: var(--cinnabar-soft); border-color: var(--cinnabar); color: var(--cinnabar-2); font-weight: 600; }
.af-i { font-style: normal; font-size: 12px; opacity: 1; }

/* 网格 */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 4px 4px 8px; margin-bottom: 10px; box-shadow: var(--sh-1);
}
.cal-cell {
  position: relative; aspect-ratio: 1 / 1.12; border: 0; background: transparent;
  cursor: pointer; padding: 4px 0 0; display: flex; flex-direction: column;
  align-items: center; gap: 1px; font-family: var(--f-sans); border-radius: var(--r-sm);
  transition: .14s;
}
.cal-cell:active { background: var(--sunken); }
.cal-sd { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.cal-ln { font-size: 10px; color: var(--ink-2); line-height: 1.15; letter-spacing: -.02em; }
.cal-ln.jq { color: var(--cinnabar); font-weight: 700; }
.cal-ln.fest { color: var(--cinnabar); }
.cal-cell.dim .cal-sd, .cal-cell.dim .cal-ln { color: var(--ink-4); }
.cal-cell.we .cal-sd { color: var(--cinnabar); opacity: .85; }
.cal-cell.today .cal-sd {
  color: #fff; background: var(--cinnabar); border-radius: 50%;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.cal-cell.sel { background: var(--cinnabar-soft); box-shadow: inset 0 0 0 1.5px var(--cinnabar); }
.cal-cell.sel .cal-sd { color: var(--cinnabar-2); }
.cal-cell.sel.today .cal-sd { color: #fff; }
.cal-cell.af-ji { background: var(--ji-soft); }
.cal-cell.af-ji.sel { background: var(--ji-soft); box-shadow: inset 0 0 0 1.5px var(--ji); }
.cal-cell.af-xiong { opacity: .42; }
.af-dot {
  position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ji);
}
.af-dot.hd { background: var(--gold); }

.cal-legend {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-2); margin-bottom: 14px;
}
.cal-legend span { display: inline-flex; align-items: center; gap: 4px; }
.cal-legend i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.cal-legend .dot-xiong { background: var(--ink-4); }
.cal-legend .dot-today { background: var(--cinnabar); }

/* 详情卡 */
.cal-detail { margin-top: 4px; }
.cd-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px dashed var(--line); margin-bottom: 12px;
}
.cd-solar { font-size: 16px; font-weight: 700; color: var(--ink); font-family: var(--f-serif); }
.cd-wk { font-size: 11px; color: var(--ink-3); margin-left: 6px; font-weight: 400; }
.cd-today {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--cinnabar); color: #fff; font-size: 10px; font-weight: 600;
}
.cd-lunar { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.cd-r { text-align: center; flex: none; }
.cd-gz {
  font-family: var(--f-serif); font-size: 24px; font-weight: 700; color: var(--cinnabar);
  line-height: 1.1;
}
.cd-gz-lb { font-size: 10px; color: var(--ink-3); margin-top: 1px; }

.cd-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 13px;
}
.cd-pl {
  background: var(--paper-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 8px 4px; text-align: center;
}
.cd-pl .lb { display: block; font-size: 10px; color: var(--ink-4); margin-bottom: 2px; }
.cd-pl .gz { font-family: var(--f-serif); font-size: 17px; font-weight: 700; color: var(--ink); }
.cd-pl .ny { font-size: 10px; color: var(--ink-3); margin-top: 2px; }

.cd-yj { display: grid; gap: 10px; margin-bottom: 13px; }
.cd-yj-b { background: var(--paper-2); border-radius: var(--r-md); padding: 10px 11px; }
.cd-yj-b .t {
  font-family: var(--f-serif); font-size: 14px; font-weight: 700; margin-bottom: 7px;
}
.cd-yj-b.ok .t { color: var(--ji); }
.cd-yj-b.no .t { color: var(--xiong); }
.cd-yj-b .chips {
  display: flex; flex-wrap: wrap; gap: 5px; grid-template-columns: none;
}
.cd-yj-b .chip {
  width: auto; height: auto; padding: 4px 9px; border-radius: var(--r-pill);
  font-size: 12px; flex-direction: row; cursor: default;
}
.cd-yj-b .chip.yi { background: var(--ji-soft); border-color: transparent; color: var(--ji); }
.cd-yj-b .chip.ji { background: var(--xiong-soft); border-color: transparent; color: var(--xiong); }
.cd-yj-b .none { font-size: 12px; color: var(--ink-4); }

.cd-af {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: var(--r-md); margin-bottom: 12px; font-size: 13px;
}
.cd-af.ji { background: var(--ji-soft); color: var(--ji); }
.cd-af.ping { background: var(--ping-soft); color: var(--ink-2); }
.cd-af.xiong { background: var(--xiong-soft); color: var(--xiong); }
.cd-af .af-n { font-weight: 700; }
.cd-af .af-v { font-weight: 700; }
.cd-af .af-d { margin-left: auto; font-size: 11.5px; opacity: .85; }

.cd-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 12px; }
.cd-mt { text-align: center; }
.cd-mt .k { font-size: 10px; color: var(--ink-4); margin-bottom: 3px; }
.cd-mt .v { font-size: 12.5px; color: var(--ink); font-weight: 600; line-height: 1.3; }
.cd-mt .v.ji { color: var(--ji); }
.cd-mt .v.xiong { color: var(--xiong); }

.cd-row {
  display: flex; gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--line-2); font-size: 12.5px; line-height: 1.65;
}
.cd-row.col { flex-direction: column; gap: 3px; }
.cd-row .k { flex: none; width: 62px; color: var(--ink-3); }
.cd-row .v { flex: 1; color: var(--ink-2); }
.cd-row .v.xiong { color: var(--xiong); }
.cd-row .v.fest { color: var(--cinnabar); }

.cd-pos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 12px 0 4px; }
.cd-po {
  text-align: center; background: var(--gold-soft);
  border-radius: var(--r-sm); padding: 7px 2px;
}
.cd-po .k { font-size: 10px; color: var(--ink-3); }
.cd-po .v { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-top: 2px; }

.cd-jq {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--cinnabar-soft); color: var(--cinnabar-2);
  font-size: 14px; font-weight: 700; text-align: center;
}
.jq-tag {
  display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--cinnabar); color: #fff; font-size: 10.5px; font-weight: 600;
}

/* ============================================================
 *  合婚
 * ============================================================ */
.hh-seg { margin-bottom: 10px; }
.hh-seg button { height: 38px; font-weight: 600; }
.hh-seg button.on { color: var(--cinnabar-2); }

.hh-state { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.hh-si {
  background: var(--paper-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 8px 10px; cursor: pointer; transition: .14s;
}
.hh-si.on { border-color: var(--cinnabar); background: var(--cinnabar-soft); }
.hh-si .n {
  font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 5px;
}
.hh-si.on .n { color: var(--cinnabar-2); font-weight: 600; }
.hh-si .n .warn {
  font-style: normal; font-size: 9.5px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--gold-soft); color: var(--gold);
}
.hh-si .v { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.hh-si.on .v { color: var(--ink); }

.hh-acts { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 16px; }
.hh-acts .btn-g2 { display: block; margin: 0; }
.hh-acts .btn-g2 {
  height: 48px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--ink-2); font-size: 14px; font-weight: 600;
  font-family: var(--f-sans); cursor: pointer;
}
.hh-acts .btn { margin: 0; }

/* ① 结论卡 */
.hh-verdict {
  position: relative; overflow: hidden; text-align: center; padding: 20px 16px 18px;
  border-color: var(--cinnabar-line);
}
.hh-verdict.ji { border-top: 3px solid var(--ji); }
.hh-verdict.ping { border-top: 3px solid var(--gold); }
.hh-verdict.xiong { border-top: 3px solid var(--xiong); }
.hv-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 162, 39, .10) 0%, transparent 58%),
    repeating-radial-gradient(circle at 50% 42%, transparent 0 22px, rgba(200, 68, 46, .045) 22px 23px);
}
.hv-top {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 12px;
}
.hv-p span {
  display: inline-block; padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink); font-weight: 600; max-width: 110px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hv-p.f span { border-color: var(--cinnabar-line); color: var(--cinnabar-2); }
.hv-he {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--cinnabar); color: #fff; font-family: var(--f-serif);
  font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-red);
}
.hv-ring { position: relative; width: 132px; height: 132px; margin: 0 auto 8px; }
.hv-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hv-ring .rr-bg { fill: none; stroke: var(--sunken); stroke-width: 9; }
.hv-ring .rr-fg {
  fill: none; stroke: var(--cinnabar); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset .8s ease;
}
.hh-verdict.ji .rr-fg { stroke: var(--ji); }
.hh-verdict.ping .rr-fg { stroke: var(--gold); }
.hv-num {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; gap: 2px;
}
.hv-num b {
  font-family: var(--f-serif); font-size: 40px; font-weight: 700;
  color: var(--ink); line-height: 1;
}
.hv-num i { font-style: normal; font-size: 12px; color: var(--ink-3); margin-top: 14px; }
.hv-lv {
  display: inline-block; padding: 4px 16px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, #E8CE7A, #C9A227);
  color: #4A3A08; font-family: var(--f-serif); font-size: 14px; font-weight: 700;
  letter-spacing: .08em; margin-bottom: 10px;
}
.hh-verdict.ji .hv-lv { background: linear-gradient(135deg, #7EC3A2, #2E7D5B); color: #fff; }
.hh-verdict.xiong .hv-lv { background: linear-gradient(135deg, #E08A78, #C8442E); color: #fff; }
.hv-vd { font-size: 13px; line-height: 1.85; color: var(--ink-2); text-align: left; }
.hv-vd strong { color: var(--ink); }

/* ② 五维雷达 */
.hh-radar { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; }
.hh-radar-l { width: 150px; }
.hh-radar-svg { width: 100%; display: block; }
.hh-radar-svg .rg { fill: none; stroke: var(--line); stroke-width: 1; }
.hh-radar-svg .ra { stroke: var(--line); stroke-width: 1; }
.hh-radar-svg .rp {
  fill: rgba(200, 68, 46, .16); stroke: var(--cinnabar);
  stroke-width: 2; stroke-linejoin: round;
}
.hh-radar-svg .rd { fill: var(--cinnabar); }
.hh-radar-svg .rl {
  font-size: 9.5px; fill: var(--ink-3); text-anchor: middle;
  dominant-baseline: middle; font-family: var(--f-sans);
}
.hh-radar-r { display: grid; gap: 9px; }
.hh-rb { display: grid; grid-template-columns: 52px 1fr 26px; gap: 7px; align-items: center; }
.hh-rb .k { font-size: 11.5px; color: var(--ink-3); }
.hh-rb .bar {
  height: 7px; background: var(--sunken); border-radius: var(--r-pill); overflow: hidden;
}
.hh-rb .bar i { display: block; height: 100%; border-radius: var(--r-pill); }
.hh-rb .bar i.ji { background: var(--ji); }
.hh-rb .bar i.ping { background: var(--gold); }
.hh-rb .bar i.xiong { background: var(--xiong); }
.hh-rb .v { font-size: 12px; font-weight: 700; text-align: right; }
.hh-rb .v.ji { color: var(--ji); }
.hh-rb .v.ping { color: var(--gold); }
.hh-rb .v.xiong { color: var(--xiong); }

/* ③ 双方速览 */
.hh-quick-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }  /* 左右并排格局 */
.hh-quick {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 10px 9px; box-shadow: var(--sh-1); min-width: 0;
}
.hh-quick.m { border-top: 3px solid var(--pine); }
.hh-quick.f { border-top: 3px solid var(--cinnabar); }
.q-hd {
  display: flex; align-items: center; gap: 5px; font-size: 13px;
  font-weight: 700; color: var(--ink); margin-bottom: 9px;
}
.q-hd .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.hh-quick.m .q-hd .dot { background: var(--pine); }
.hh-quick.f .q-hd .dot { background: var(--cinnabar); }
.q-hd i {
  font-style: normal; margin-left: auto; font-size: 10px; font-weight: 400;
  padding: 1px 6px; border-radius: var(--r-pill); background: var(--sunken); color: var(--ink-3);
}
.q-gz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 9px; }
.q-p {
  background: var(--paper-2); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 5px 0; text-align: center;
}
.q-p.day { background: var(--cinnabar-soft); border-color: var(--cinnabar-line); }
.q-p i { display: block; font-style: normal; font-size: 9px; color: var(--ink-4); }
.q-p b {
  display: block; font-family: var(--f-serif); font-size: 13.5px;
  font-weight: 700; color: var(--ink); margin-top: 1px;
}
.q-p.day b { color: var(--cinnabar-2); }
.q-kv {
  display: flex; justify-content: space-between; font-size: 11.5px;
  padding: 3px 0; color: var(--ink-3);
}
.q-kv b { color: var(--ink-2); font-weight: 600; }
.q-wx { margin-top: 8px; display: grid; gap: 3px; }
.mq { display: grid; grid-template-columns: 14px 1fr 30px; gap: 5px; align-items: center; }
.mq i { font-style: normal; font-size: 10px; color: var(--ink-3); }
.mq .mb { height: 5px; background: var(--sunken); border-radius: var(--r-pill); overflow: hidden; }
.mq .mb b { display: block; height: 100%; border-radius: var(--r-pill); }
.mq .mb b.木 { background: var(--w-wood); }
.mq .mb b.火 { background: var(--w-fire); }
.mq .mb b.土 { background: var(--w-earth); }
.mq .mb b.金 { background: var(--w-metal); }
.mq .mb b.水 { background: var(--w-water); }
.mq em { font-style: normal; font-size: 9.5px; color: var(--ink-4); text-align: right; }

/* ④ 五行互补 */
.hh-wx { padding-top: 4px; }
.wx-desc {
  font-size: 12.5px; line-height: 1.8; color: var(--ink-2);
  padding-bottom: 11px; border-bottom: 1px dashed var(--line); margin-bottom: 10px;
}
.wx-desc strong { color: var(--ink); }
.hh-wx-row {
  display: grid; grid-template-columns: 20px 1fr 62px; gap: 9px;
  align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-2);
}
.hh-wx-row:last-child { border-bottom: 0; }
.wr-k {
  font-family: var(--f-serif); font-size: 14px; font-weight: 700; color: var(--ink);
}
.wr-bars { display: grid; gap: 3px; }
.wr-line { display: grid; grid-template-columns: 14px 1fr 32px; gap: 5px; align-items: center; }
.wr-line .lb { font-size: 9.5px; color: var(--ink-3); }
.wr-line .lb.f { color: var(--cinnabar); }
.wr-line .bb { height: 7px; background: var(--sunken); border-radius: var(--r-pill); overflow: hidden; }
.wr-line .bb b { display: block; height: 100%; border-radius: var(--r-pill); }
.wr-line .bb b.m { background: var(--pine); }
.wr-line .bb b.f { background: var(--cinnabar); }
.wr-line em { font-style: normal; font-size: 9.5px; color: var(--ink-4); text-align: right; }
.wr-n { font-size: 10.5px; text-align: right; color: var(--ink-3); }
.wr-n.m { color: var(--pine); font-weight: 600; }
.wr-n.f { color: var(--cinnabar); font-weight: 600; }
.wr-n.ok { color: var(--ji); }
.wr-n.xiong { color: var(--xiong); font-weight: 600; }

/* ⑤ 合盘逐项 */
.hh-pan { padding: 4px 0; }
.hh-pan-row {
  padding: 9px 4px; border-bottom: 1px solid var(--line-2); cursor: pointer;
}
.hh-pan-row:last-child { border-bottom: 0; }
.pr-hd {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px;
}
.pr-lb { flex: none; width: 76px; color: var(--ink-3); font-size: 11.5px; }
.pr-a, .pr-b {
  font-family: var(--f-serif); font-size: 14px; font-weight: 700; color: var(--ink);
  min-width: 22px; text-align: center;
}
.pr-x { font-size: 10px; color: var(--ink-4); }
.pr-tag {
  margin-left: auto; flex: none; padding: 1px 8px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700;
}
.pr-tag.ji { background: var(--ji-soft); color: var(--ji); }
.pr-tag.ping { background: var(--ping-soft); color: var(--ping); }
.pr-tag.xiong { background: var(--xiong-soft); color: var(--xiong); }
.pr-ar {
  flex: none; color: var(--ink-4); font-size: 15px; transition: transform .18s;
}
.hh-pan-row.open .pr-ar { transform: rotate(90deg); }
.pr-rel { font-size: 11.5px; color: var(--ink-3); margin: 3px 0 0 82px; }
.pr-tx {
  display: none; font-size: 12.5px; line-height: 1.8; color: var(--ink-2);
  background: var(--paper-2); border-radius: var(--r-sm);
  padding: 9px 11px; margin: 7px 0 2px;
}
.hh-pan-row.open .pr-tx { display: block; }

/* ⑥ 深度解读 */
.hh-ch-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.hh-ch-tabs::-webkit-scrollbar { display: none; }
.hh-ch-tabs button {
  flex: none; height: 34px; padding: 0 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  font-size: 12.5px; cursor: pointer; font-family: var(--f-sans);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.hh-ch-tabs button i { font-style: normal; font-size: 13px; }
.hh-ch-tabs button.on {
  background: var(--cinnabar); border-color: var(--cinnabar); color: #fff; font-weight: 600;
}
.ch-bd { display: none; }
.ch-bd.on { display: block; }

/* ⑦ 择吉日 */
.hh-jiri { padding: 14px; }
.jr-wrap { display: grid; gap: 8px; }
.hh-jr {
  display: grid; grid-template-columns: 38px 1fr auto auto; gap: 9px;
  align-items: center; padding: 10px 11px; border-radius: var(--r-md);
  background: var(--paper-2); border: 1px solid var(--line-2);
}
.hh-jr.main { background: var(--cinnabar-soft); border-color: var(--cinnabar-line); }
.jr-k {
  font-size: 10.5px; padding: 2px 0; text-align: center; border-radius: var(--r-sm);
  background: var(--sunken); color: var(--ink-3);
}
.hh-jr.main .jr-k { background: var(--cinnabar); color: #fff; font-weight: 600; }
.jr-d b { font-family: var(--f-serif); font-size: 17px; font-weight: 700; color: var(--ink); }
.hh-jr.main .jr-d b { color: var(--cinnabar-2); }
.jr-d i { font-style: normal; font-size: 11px; color: var(--ink-3); margin-left: 5px; }
.jr-l { font-size: 11.5px; color: var(--ink-3); }
.jr-g { font-family: var(--f-serif); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.jr-tip {
  font-size: 12px; line-height: 1.75; color: var(--ink-2);
  padding: 10px 0 12px;
}
.jr-tip b { color: var(--cinnabar-2); }

/* ⑧ 吸底操作条 */
.hh-dock {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 4px 0 22px;
}
.dk {
  height: 44px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--ink-2); font-size: 13px; font-weight: 600;
  font-family: var(--f-sans); cursor: pointer; box-shadow: var(--sh-1);
}
.dk:active { background: var(--sunken); }
.dk.accent { background: var(--cinnabar); border-color: var(--cinnabar); color: #fff; }

/* 档案选择器 */
.pick-list { display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; margin: 6px 0 4px; }
.pick-item {
  text-align: left; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--paper-2); cursor: pointer;
  font-family: var(--f-sans);
}
.pick-item:active { background: var(--sunken); }
.pick-item .n1 { font-size: 14px; font-weight: 600; color: var(--ink); }
.pick-item .n1 span {
  margin-left: 6px; font-size: 10.5px; font-weight: 400; color: var(--ink-3);
  padding: 1px 6px; border-radius: var(--r-pill); background: var(--sunken);
}
.pick-item .n2 { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.pick-item .n3 {
  font-family: var(--f-serif); font-size: 12px; color: var(--cinnabar); margin-top: 4px;
}

/* 小屏适配 */
@media (max-width: 340px) {
  .hh-radar { grid-template-columns: 120px 1fr; }
  .hh-radar-l { width: 120px; }
  .hh-metrics, .cd-metrics, .cd-pos { grid-template-columns: repeat(2, 1fr); }
  .ca-chips { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
 *  合婚录入：上下两段（男女独立卡片）
 * ============================================================ */
.hh-acts-top {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 0 0 12px;
}
.hh-acts-top .btn { height: 40px; font-size: 13px; margin: 0; }

.hh-side-card {
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
}
.hh-side-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
}
.hh-side-card.hh-m::before { background: var(--pine); }
.hh-side-card.hh-f::before { background: var(--cinnabar); }
.hh-side-card + .hh-side-card { margin-top: 10px; }

.hh-side-hd {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.hh-side-hd .hh-side-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.hh-side-card.hh-m .hh-side-dot { background: var(--pine); }
.hh-side-card.hh-f .hh-side-dot { background: var(--cinnabar); }
.hh-side-hd .hh-side-tt {
  font-family: var(--f-serif); font-size: 16px; font-weight: 700; color: var(--ink);
  letter-spacing: .04em;
}
.hh-side-hd .hh-side-st {
  margin-left: auto;
  font-size: 10.5px; letter-spacing: .14em; color: var(--ink-3);
  font-family: var(--f-sans);
}

/* 紧凑 field */
.field.tight { margin-bottom: 9px; }
.field.tight:last-child { margin-bottom: 0; }
.field.tight .lb { margin-bottom: 4px; font-size: 12px; }
.field.tight input[type="date"],
.field.tight input[type="text"],
.field.tight select { height: 38px; font-size: 13.5px; }

.ts-line {
  margin-top: 5px;
  font-size: 11px; color: var(--ink-3);
  line-height: 1.55;
}

.hh-go-row {
  margin: 14px 0 22px;
}
.hh-go-row .btn { height: 48px; font-size: 14.5px; letter-spacing: .12em; }

/* ============================================================
 *  加载层（排盘 / 合婚共用 3 秒过渡）
 * ============================================================ */
/* 夜色底：玄墨 + 星云（与罗盘深色环带配套） */
.loading-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: #0B0910;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 0 24px;
  opacity: 1; transition: opacity .42s ease;
  overflow: hidden;
}
.loading-overlay.hide { opacity: 0; pointer-events: none; }
.loading-overlay.gone { display: none; }

/* 星云背景：紫气东来 + 鎏金西沉 */
.loading-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 22% 26%, rgba(124, 98, 170, .30), transparent 56%),
    radial-gradient(circle at 78% 72%, rgba(201, 162, 39, .15), transparent 52%),
    linear-gradient(180deg, #120F1B 0%, #0B0910 58%, #06050A 100%);
}
.loading-bg::before {
  content: ''; position: absolute; left: -10%; bottom: 18%; width: 50%; height: 38%;
  background: radial-gradient(ellipse at center, rgba(72, 112, 152, .18), transparent 70%);
  filter: blur(2px);
}
.loading-bg::after {
  content: ''; position: absolute; right: -8%; bottom: 22%; width: 46%; height: 36%;
  background: radial-gradient(ellipse at center, rgba(150, 108, 56, .16), transparent 70%);
  filter: blur(2px);
}

/* 顶部标题 */
.loading-title {
  position: relative; z-index: 2;
  text-align: center;
  font-family: var(--f-serif);
  font-size: 17px; font-weight: 600; letter-spacing: .14em; color: #F2E8D6;
  margin-bottom: 16px;
}
.loading-title .ldt-sub {
  display: block; font-family: var(--f-sans);
  font-size: 10.5px; color: rgba(230, 214, 160, .55); letter-spacing: .3em;
  margin-top: 4px;
}

/* 三段进度 */
.loading-progress {
  position: relative; z-index: 2;
  width: 78%; max-width: 320px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-bottom: 12px;
}
.lp-step {
  text-align: center;
  font-size: 11px; color: rgba(242, 232, 214, .42);
  position: relative; padding: 0 4px;
  transition: color .25s ease;
}
.lp-step.on { color: #E8C87A; font-weight: 700; }
.lp-step.done { color: rgba(242, 232, 214, .78); }
.lp-bar {
  width: 70%; height: 4px;
  margin: 5px auto 0;
  background: rgba(255, 255, 255, .09); border-radius: var(--r-pill); overflow: hidden;
  position: relative;
}
.lp-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #C9A96A 0%, #E8C87A 100%);
  border-radius: var(--r-pill);
  transition: width .35s ease;
}
.lp-step.on .lp-bar i { width: 60%; }
.lp-step.done .lp-bar i { width: 100%; }

/* 圆盘舞台（六层同心罗盘，单一 SVG 保证同心） */
.loading-stage {
  position: relative; z-index: 2;
  width: min(300px, 76vw);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  margin: 4px 0 8px;
}
.loading-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 盘外鎏金晕光（在 svg 之下，营造"法器悬浮于夜色"的层次） */
.loading-stage::before {
  content: ''; position: absolute; inset: -9%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(232, 200, 122, .16) 0%,
    rgba(232, 200, 122, .07) 52%,
    rgba(232, 200, 122, 0) 72%);
}

/* 旋转基准：transform-box:view-box 使 transform-origin 落在 viewBox 圆心，
   否则 SVG <g> 会绕自身包围盒中心转，导致偏心。 */
.ls-ring { transform-box: view-box; transform-origin: 50% 50%; }
/* 由内而外 6 层，每一层都与它内圈反向 */
.ls-r1 { animation: ld-spin-cw   9s linear infinite; }  /* ① 太极     顺时针 */
.ls-r2 { animation: ld-spin-ccw 15s linear infinite; }  /* ② 年月日时  逆时针 */
.ls-r3 { animation: ld-spin-cw  24s linear infinite; }  /* ③ 八卦     顺时针 */
.ls-r4 { animation: ld-spin-ccw 34s linear infinite; }  /* ④ 十天干   逆时针 */
.ls-r5 { animation: ld-spin-cw  46s linear infinite; }  /* ⑤ 十二生肖 顺时针 */
.ls-r6 { animation: ld-spin-ccw 60s linear infinite; }  /* ⑥ 六十四卦 逆时针 */
.ls-static { animation: none; }                          /* 分隔细圆静止 */
@keyframes ld-spin-cw  { to { transform: rotate(360deg); } }
@keyframes ld-spin-ccw { to { transform: rotate(-360deg); } }

/* 年月日时 4 个 chip */
.loading-pills {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  width: 78%; max-width: 260px;
  margin-bottom: 10px;
}
.lp-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--f-serif);
  font-size: 12px;
  background: rgba(232, 200, 122, .10); color: #F0DCA8;
  padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid rgba(230, 214, 160, .28);
  white-space: nowrap;
}
.lp-pill i {
  font-style: normal; font-family: var(--f-sans); font-size: 10.5px;
  color: var(--gold); opacity: .9;
}
.lp-pill b { font-weight: 600; }

/* 底部水波纹 */
.loading-ripple {
  position: relative; z-index: 2;
  width: 100%; height: 60px;
  margin-top: auto;
  overflow: hidden;
}
.loading-ripple svg { width: 100%; height: 100%; display: block; }

/* ============================================================
 *  分享海报预览层
 * ============================================================ */
.poster-card {
  width: 92%; max-width: 440px; max-height: 92vh;
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 14px 14px 16px;
  box-shadow: var(--sh-2);
  display: flex; flex-direction: column; align-items: center;
  margin: auto 0 calc(16px + env(safe-area-inset-bottom));
  animation: up .28s cubic-bezier(.22, .8, .3, 1);
}
.pc-hd {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding: 0 2px;
}
.pc-tt {
  font-family: var(--f-serif); font-size: 17px; font-weight: 700; color: var(--gold);
  letter-spacing: .1em; display: flex; align-items: center; gap: 7px;
}
.pc-tt::before {
  content: ''; width: 4px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-line));
}
.pc-x {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper-2);
  color: var(--ink-3); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.pc-x:active { color: var(--ink); }
.poster-img-wrap {
  width: 100%; max-height: 60vh;
  overflow-y: auto; border-radius: var(--r-md);
  background: var(--sunken);
  margin-bottom: 12px;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.poster-img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.poster-ratio {
  width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin-bottom: 12px;
  background: var(--sunken); border-radius: var(--r-md); padding: 4px;
}
.poster-ratio .pr {
  height: 36px; border-radius: calc(var(--r-md) - 3px);
  border: 0; background: transparent;
  color: var(--ink-3); font-size: 13px; cursor: pointer;
  font-family: var(--f-sans);
}
.poster-ratio .pr.on {
  background: var(--card); color: var(--gold); font-weight: 600;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.pc-gzh {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--paper-2), var(--sunken));
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 10px 12px; margin-bottom: 12px;
}
.pc-gzh-img {
  width: 74px; height: 74px; border-radius: 8px; flex: none;
  background: #fff; padding: 4px; box-sizing: border-box;
  border: 1px solid var(--line);
}
.pc-gzh-t1 {
  font-size: 14px; font-weight: 700; color: var(--ink);
  margin-bottom: 6px; letter-spacing: .04em;
}
.pc-gzh-t2 { font-size: 11.5px; color: var(--ink-3); line-height: 1.65; }
.poster-hint {
  font-size: 11px; color: var(--ink-4); text-align: center;
  margin: 0 0 12px; line-height: 1.5;
}
.poster-acts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.poster-acts .btn { height: 46px; font-size: 15px; letter-spacing: .12em; }
@media (max-width: 340px) {
  .poster-acts { grid-template-columns: 1fr; }
}

/* ============================================================
 *  第四轮 · 滚轮日期选择器（picker.js）+ 日期选择按钮
 * ============================================================ */
.picker-field {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: 42px; padding: 0 12px;
  font-family: var(--f-sans); font-size: 15px; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; transition: .16s; text-align: left;
}
.picker-field:active { border-color: var(--cinnabar); background: #222C30; }
.picker-field .pf-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-field .pf-val.placeholder { color: var(--ink-4); }
.picker-field .pf-ic { width: 18px; height: 18px; stroke: var(--ink-3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: transform .2s; }
.picker-field:active .pf-ic { transform: translateY(2px); }

/* 滚轮弹层 */
.pk-sheet { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.pk-hd { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 12px; }
.pk-hd .pk-tt { font-family: var(--f-serif); font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .06em; }
.pk-hd .pk-x, .pk-hd .pk-ok { border: 0; background: none; font-family: var(--f-sans); font-size: 14px; padding: 6px 10px; border-radius: 8px; cursor: pointer; transition: .12s; }
.pk-hd .pk-x { color: var(--ink-3); }
.pk-hd .pk-ok { color: var(--cinnabar); font-weight: 700; }
.pk-hd .pk-ok:active { background: var(--cinnabar-soft); }
.pk-cols {
  display: flex; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  background: var(--card); border-radius: var(--r-md); overflow: hidden;
}
.pk-col { flex: 1; min-width: 0; }
.pk-col-m { flex: 1.25; }
.pk-view { height: 210px; position: relative; overflow: hidden; }
.pk-list {
  height: 100%; overflow-y: auto; scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior: contain;
}
.pk-list::-webkit-scrollbar { display: none; }
.pk-item {
  height: 42px; line-height: 42px; text-align: center;
  font-size: 15px; color: var(--ink-3); scroll-snap-align: center;
  transition: color .12s, font-size .12s;
}
.pk-item.on { color: var(--cinnabar); font-weight: 700; font-size: 16.5px; }
.pk-mask { position: absolute; left: 0; right: 0; height: 84px; pointer-events: none; }
.pk-mask-top { top: 0; background: linear-gradient(180deg, var(--card) 0%, rgba(27, 36, 40, 0) 100%); }
.pk-mask-bot { bottom: 0; background: linear-gradient(0deg, var(--card) 0%, rgba(27, 36, 40, 0) 100%); }
.pk-line {
  position: absolute; left: 10%; right: 10%; top: 50%; height: 42px; transform: translateY(-50%);
  border-top: 1px solid var(--cinnabar-line); border-bottom: 1px solid var(--cinnabar-line);
  background: rgba(200, 68, 46, .045); border-radius: 5px; pointer-events: none;
}

/* ============================================================
 *  第四轮 · 确认信息弹窗增强（confirm.js）
 * ============================================================ */
.cfm-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 18px; }
.cfm-deco { position: static; transform: none; width: 44px; flex: none; color: var(--cinnabar-line); }
.cfm-deco-r { transform: scaleX(-1); }
.cfm-row { border-bottom: 1px dashed var(--line-2); }
.cfm-row:last-child { border-bottom: 0; }
.cfm-privacy { background: var(--cinnabar-soft); border: 1px solid var(--cinnabar-line); color: var(--ink-2); }

/* ============================================================
 *  第四轮 · 全站 UI 打磨（桌面 hover / 动效 / 质感统一）
 * ============================================================ */
@media (hover: hover) {
  .btn:hover { background: #D04A32; box-shadow: 0 7px 20px rgba(200, 68, 46, .3); }
  .btn.ghost:hover { border-color: var(--cinnabar-line); color: var(--cinnabar-2); background: var(--paper-2); }
  .card:hover { box-shadow: var(--sh-2); }
  .chip:hover { border-color: var(--cinnabar-line); }
  .seg button:hover { color: var(--cinnabar); }
  .tabbar button:hover { color: var(--cinnabar-2); }
  .picker-field:hover { border-color: var(--cinnabar-line); background: #222C30; }
}
/* 主按钮：朱砂渐变 + 内高光 */
.btn { background: linear-gradient(135deg, #D0503A 0%, var(--cinnabar) 55%, #B23727 100%); box-shadow: var(--sh-red); }
.btn:active { transform: translateY(1px) scale(.995); }
/* TabBar 激活指示条 */
.tabbar button { position: relative; }
.tabbar button.on::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--cinnabar);
}
/* 表单字段分隔更柔和 */
.field { position: relative; }
/* seg 选中更立体 */
.seg button.on { box-shadow: 0 1px 3px rgba(28, 26, 23, .1); }
/* 页面过渡加轻微视差 */
.page { animation: fade .3s ease; }

/* ============================================================
 *  好友推荐横幅（邀请制分享）+ 分享我的报告弹层
 * ============================================================ */
.inv-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: linear-gradient(135deg, rgba(216, 181, 106, .13), rgba(216, 181, 106, .04));
  border: 1px solid rgba(216, 181, 106, .35);
  border-radius: var(--r-lg);
  padding: 10px 34px 10px 12px; margin-bottom: 12px;
  position: relative;
}
.inv-ic { font-size: 20px; flex: none; line-height: 1.3; }
.inv-t1 { font-size: 13.5px; font-weight: 700; color: var(--gold); letter-spacing: .05em; margin-bottom: 3px; }
.inv-t2 { font-size: 12px; color: var(--ink-2); line-height: 1.55; }
.inv-x {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border: 0; background: transparent;
  color: var(--ink-4); font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.inv-x:active { color: var(--ink); }

.rs-sheet { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.rs-card {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: var(--sunken); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 14px;
  margin-bottom: 10px; cursor: pointer; text-align: left;
  font-family: var(--f-sans); color: inherit;
}
.rs-card:active { border-color: var(--gold); background: var(--paper-2); }
.rs-ic {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: linear-gradient(135deg, rgba(216, 181, 106, .22), rgba(216, 181, 106, .08));
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.rs-t1 { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; letter-spacing: .03em; }
.rs-t2 { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }

/* ============================================================
 *  出生时间选择（时:分 滚轮 + 不知道时辰）
 * ============================================================ */
.time-btn {
  flex: 1; min-width: 0; height: 46px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--sunken);
  color: var(--ink); font-size: 14.5px; font-family: var(--f-sans);
  cursor: pointer; letter-spacing: .02em; text-align: left;
  padding: 0 34px 0 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6BEA9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.time-btn:active { border-color: var(--gold); color: var(--gold); }
.time-unk {
  height: 46px; border-radius: var(--r-md); padding: 0 14px; flex: none;
  border: 1px dashed var(--line); background: transparent;
  color: var(--ink-3); font-size: 13px; cursor: pointer; font-family: var(--f-sans);
}
.time-unk.on { border-color: var(--gold); color: var(--gold); background: rgba(216, 181, 106, .08); }