/* 明理移动端原型。规则：正文 16px、最小 12px；可点区域至少 44px；按下有反馈；悬停只给有鼠标的设备。 */
:root {
  /* 杂志风格：只保留浅色。纸白底、近黑字、墨绿强调、朱红只用在太阳和少量警示。 */
  color-scheme: light;
  --bg: #f5f4ef;
  --surface: #fbfaf6;
  --surface-2: #ebeae3;
  --press: rgba(22, 22, 22, 0.06);
  --text: #161616;
  --muted: #55554f;
  --subtle: #76766f;
  --line: rgba(22, 22, 22, 0.14);
  --rule: #161616;
  --gold: #23443b;
  --gold-strong: #23443b;
  --gold-soft: rgba(35, 68, 59, 0.08);
  --on-gold: #f5f4ef;
  --green: #2e6b4c;
  --red: #b0432f;
  --el-mu: #2f7a4f;
  --el-huo: #b04434;
  --el-tu: #96701c;
  --el-jin: #6b6558;
  --el-shui: #2f5f9e;
  --serif: "Mingli Serif", "Songti SC", "STSong", serif;
  /* 首屏结论用毛笔楷书；四柱干支用小楷（只含 22 个干支字）。缺字时回退到宋体。 */
  --brush: "Mingli Brush", var(--serif);
  --kai: "Mingli Kai", var(--serif);
  --latin: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --appbar-h: 52px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 20px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* 正式站紫微组件（ui/ziwei/chart.css）用到的变量，映射到原型配色。 */
  --line-bright: color-mix(in srgb, var(--gold) 45%, transparent);
  --panel: var(--surface-2);
  --wx-shui: var(--el-shui);
  --flow-nav-height: calc(var(--safe-top) + var(--appbar-h));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 var(--sans);
  touch-action: manipulation;
}
h1, h2, h3, p { overflow-wrap: anywhere; }
button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
button:disabled { cursor: default; }
input, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }

/* 按压反馈：触屏上没有悬停，按下时缩一点或变底色，确认“点到了”。 */
.tap { transition: transform 0.12s var(--ease), background-color 0.15s, opacity 0.15s; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tap:active:not(:disabled) { transform: scale(0.97); }
.list-row.tap:active:not(:disabled), .group-row.tap:active, .qrow.tap:active:not(:disabled), .link-row.tap:active { transform: none; background-color: var(--press); }
@media (hover: hover) {
  .list-row:hover, .group-row.tap:hover, .qrow:hover:not(:disabled), .link-row:hover { background-color: var(--press); }
  .btn--primary:hover:not(:disabled) { filter: brightness(1.06); }
}

.icon { display: inline-grid; flex: none; width: 24px; height: 24px; }
.icon svg { width: 100%; height: 100%; }
.icon--muted { width: 18px; height: 18px; color: var(--subtle); }
.icon--inline { width: 18px; height: 18px; }

/* ---- 顶栏 ---- */
.appbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  padding-top: var(--safe-top);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.appbar.is-scrolled { border-bottom-color: var(--line); }
.appbar-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px; height: var(--appbar-h); padding: 0 4px; }
.appbar-left { display: flex; min-width: 0; }
.appbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
/* 返回按钮带上一页的简称，像 iOS 原生导航栏：“‹ 报告”。 */
.appbar-back { display: flex; align-items: center; min-width: 44px; max-width: 100%; height: 44px; padding: 0 8px 0 2px; color: var(--gold); font-size: 16px; }
.appbar-back .icon { width: 26px; height: 26px; margin-right: -2px; }
.appbar-back-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar-title { max-width: 56vw; margin: 0; overflow: hidden; font-size: 17px; font-weight: 600; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.appbar-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; }
.appbar-btn--text { width: auto; padding: 0 12px; color: var(--gold); font-size: 16px; }
.appbar-spacer { width: 44px; }
.appbar-pill { flex: none; padding: 1px 8px; border-radius: 10px; background: var(--gold-soft); color: var(--gold); font-size: 12px; }
.appbar-brand { display: flex; align-items: center; gap: 8px; padding-left: 12px; font-family: var(--serif); font-size: 20px; white-space: nowrap; }
.appbar-brand .brand-mark { width: 28px; height: 22px; }
.appbar-progress { height: 3px; background: var(--line); }
.appbar-progress span { display: block; height: 100%; background: var(--gold); transform-origin: left; transition: transform 0.4s var(--ease); }

/* ---- 页面与转场 ---- */
.stage { position: relative; min-height: 100dvh; padding-top: calc(var(--safe-top) + var(--appbar-h)); padding-bottom: calc(var(--dock-h, 0px) + 28px); overflow-x: clip; }
.screen { min-height: calc(100dvh - var(--safe-top) - var(--appbar-h)); background: var(--bg); }
.screen--leaving { position: fixed; left: 0; right: 0; z-index: 1; pointer-events: none; }
.screen--front { position: relative; z-index: 2; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1); }
/* 返回时离开的页面盖在上面滑走，仍须脱离文档流，否则会把下面的页面挤下去、丢掉滚动位置。 */
.screen--leaving.screen--front { position: fixed; z-index: 3; }
.page { padding: 8px var(--gutter) 0; }

/* ---- 底部固定区：跟随键盘上移，避开 iPhone 底部手势区 ---- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  padding-bottom: var(--safe-bottom);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  border-top: 1px solid var(--line);
  transform: translateY(calc(-1 * var(--kb, 0px)));
}
.kb-open .dock { padding-bottom: 0; }
.dock-inner { display: flex; gap: 10px; padding: 10px var(--gutter); }
.dock-inner--split { align-items: center; justify-content: space-between; padding-inline: 8px; }
.dock-btn { display: flex; align-items: center; gap: 2px; min-width: 76px; height: 48px; padding: 0 4px; color: var(--gold); font-size: 15px; white-space: nowrap; }
.dock-btn--end { justify-content: flex-end; }
.dock-btn:disabled { color: var(--subtle); opacity: 0.45; }
.dock-stack { display: grid; }

/* ---- 按钮与链接 ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; padding: 0 20px; border-radius: 14px; font-size: 17px; font-weight: 600; line-height: 1.3; text-align: center; }
.btn--primary { background: var(--gold-strong); color: var(--on-gold); }
.btn--secondary { background: var(--gold-soft); color: var(--gold); }
.btn:disabled { opacity: 0.35; }
.btn--compact { flex: 1; width: auto; min-height: 44px; max-width: 160px; font-size: 16px; white-space: nowrap; }
.dock-inner--split .btn--compact { flex: 0 1 auto; padding: 0 18px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; color: var(--gold); font-size: 15px; }
.text-link--muted { margin-top: 16px; color: var(--subtle); font-size: 14px; }

/* ---- 文字 ---- */
.hero { padding: 20px 0 4px; }
.hero-kicker { margin: 0 0 10px; color: var(--gold); font-size: 13px; letter-spacing: 0.04em; }
.hero-title { margin: 0; font-family: var(--serif); font-size: 32px; font-weight: 400; line-height: 1.3; }
.hero-sub { margin: 10px 0 0; color: var(--muted); font-size: 16px; }
.step-title { margin: 14px 0 6px; font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1.35; }
.step-sub { margin: 0 0 20px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.section-label { margin: 24px 0 10px; color: var(--subtle); font-size: 13px; letter-spacing: 0.02em; }
.fine-print { margin: 20px 0 0; color: var(--subtle); font-size: 13px; line-height: 1.6; }
.muted { color: var(--muted); }
.body-text { margin: 10px 0 0; font-size: 16px; line-height: 1.8; white-space: pre-line; }
.serif-title { margin: 8px 0 0; font-family: var(--serif); font-size: 22px; font-weight: 400; line-height: 1.45; }
.tag { display: inline-block; margin: 0; padding: 2px 8px; border-radius: 8px; background: var(--gold-soft); color: var(--gold); font-size: 13px; }
.clamp-4 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }

/* ---- 首页 ---- */
.ask-card { position: relative; display: block; margin-top: 20px; padding: 14px 16px 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: border-color 0.15s; }
.ask-card:focus-within { border-color: var(--gold); }
.ask-list { display: grid; gap: 10px; }
.ask-list .ask-card { margin-top: 0; }
.page--home .ask-list { margin-top: 20px; }
.ask-card--extra { padding-top: 6px; }
.ask-card--extra .ask-input { min-height: 56px; font-size: 17px; }
.ask-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.ask-card-label { color: var(--gold); font-size: 13px; }
.ask-remove { display: grid; place-items: center; width: 44px; height: 36px; margin-right: -12px; color: var(--subtle); }
.ask-remove .icon { width: 18px; height: 18px; }
.add-question { margin-top: 6px; }
.add-question-plus { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 11px; background: var(--gold-soft); font-size: 17px; line-height: 1; }
.ask-input { display: block; width: 100%; min-height: 86px; padding: 0; border: 0; outline: 0; background: transparent; font-size: 18px; line-height: 1.6; resize: none; }
.ask-input::placeholder { color: var(--subtle); }
.ask-count { position: absolute; right: 14px; bottom: 8px; color: var(--subtle); font-size: 12px; }
.chip-scroll { display: flex; gap: 8px; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll--wrap { flex-wrap: wrap; margin: 4px 0 0; padding: 0; overflow: visible; }
.chip { flex: none; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); font-size: 15px; white-space: nowrap; }
.chip[aria-selected="true"] { border-color: transparent; background: var(--text); color: var(--bg); }
.link-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin-top: 24px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.link-row-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 19px; background: var(--gold-soft); color: var(--gold); flex: none; }
.link-row-icon .icon { width: 20px; height: 20px; }
.link-row-text { display: grid; flex: 1; gap: 2px; }
.link-row-text strong { font-size: 16px; font-weight: 600; }
.link-row-text small { color: var(--muted); font-size: 13px; }

/* ---- 分段选择 ---- */
.segmented { position: relative; display: grid; grid-template-columns: repeat(var(--seg-count), minmax(0, 1fr)); padding: 3px; border-radius: 12px; background: var(--surface-2); }
.segmented-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--seg-count)); border-radius: 9px; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); transform: translateX(calc(var(--seg-index) * 100%)); transition: transform 0.28s var(--ease); }
.segmented-item { position: relative; z-index: 1; min-height: 40px; color: var(--muted); font-size: 15px; text-align: center; }
.segmented-item[aria-checked="true"] { color: var(--text); font-weight: 600; }

/* ---- 生日滚轮 ---- */
.date-result { display: grid; gap: 4px; min-height: 64px; margin: 22px 0 6px; text-align: center; }
.date-result-main { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.date-result-sub { min-height: 22px; color: var(--muted); font-size: 14px; }
.date-result.is-pending .date-result-main { color: var(--subtle); font-family: var(--sans); font-size: 17px; }
.date-result.is-error .date-result-sub { color: var(--red); }
.wheels { position: relative; display: grid; grid-template-columns: 1.35fr 1fr 1fr; margin: 6px 0 4px; }
.wheels--two { grid-template-columns: 1fr 1fr; }
.wheels::before { content: ""; position: absolute; top: 88px; left: 0; right: 0; height: 44px; border-radius: 10px; background: var(--surface-2); pointer-events: none; }
.wheel { position: relative; min-width: 0; }
.wheel-scroll {
  position: relative; z-index: 1; height: 220px; padding: 88px 0;
  overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent);
}
.wheel-scroll::-webkit-scrollbar { display: none; }
.wheel-scroll:focus-visible { outline-offset: -2px; }
.wheel-item { display: flex; align-items: center; justify-content: center; height: 44px; color: var(--muted); font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; scroll-snap-align: center; transition: color 0.15s; }
.wheel-item.is-selected { color: var(--text); font-weight: 600; }

.text-input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; outline: 0; background: var(--surface); font-size: 17px; -webkit-appearance: none; appearance: none; }
.text-input:focus { border-color: var(--gold); }
.text-input::placeholder { color: var(--subtle); }
.text-input--large { height: 60px; margin-top: 12px; font-size: 22px; letter-spacing: 0.08em; text-align: center; }
.search-input { margin-bottom: 8px; }

/* ---- 出生时间 ---- */
.time-result { min-height: 26px; margin: 18px 0 14px; font-size: 16px; text-align: center; }
.time-result.is-pending { color: var(--subtle); }
.shichen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.shichen { display: grid; place-content: center; gap: 2px; min-height: 64px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: center; }
.shichen strong { font-size: 17px; font-weight: 600; }
.shichen small { color: var(--muted); font-size: 12px; }
.shichen[aria-checked="true"] { border-color: transparent; background: var(--gold-strong); color: var(--on-gold); }
.shichen[aria-checked="true"] small { color: inherit; opacity: 0.85; }
.note-card { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.note-card strong { font-size: 17px; }
.note-card p { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }

/* ---- 出生城市 ---- */
.city-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.city { min-height: 48px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 16px; text-align: center; }
.city.is-selected { border-color: var(--gold); color: var(--gold); font-weight: 600; }
.selected-city { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; color: var(--green); font-size: 15px; }
.selected-city .icon { width: 20px; height: 20px; }
.empty-hint { padding: 24px 4px; color: var(--muted); font-size: 15px; text-align: center; }

/* ---- 列表与分组 ---- */
.list { display: grid; }
.list--card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.list-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.list--card .list-row:last-child, #place-results .list-row:last-child { border-bottom: 0; }
.list-row-main { display: grid; flex: 1; gap: 2px; min-width: 0; font-size: 16px; line-height: 1.55; }
.list-row-main strong { font-weight: 600; }
.list-row-main small { color: var(--muted); font-size: 13px; }
.list-row-sub { color: var(--subtle); font-size: 14px; }
.list-row--method { align-items: flex-start; }
.list-row--method .icon--muted { margin-top: 3px; }
.method-name { flex: none; width: 4.6em; padding-top: 1px; color: var(--gold); font-size: 14px; font-weight: 600; }
.group { overflow: hidden; margin-top: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.group + .group, .card + .group, .group + .card { margin-top: 16px; }
.group-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.group-row:last-child { border-bottom: 0; }
.group-label { flex: none; width: 5.4em; color: var(--muted); font-size: 15px; }
.group-value { flex: 1; min-width: 0; font-size: 16px; line-height: 1.5; white-space: pre-line; }

.consent { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-top: 20px; }

.field-group { margin-top: 24px; }
.field-label { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.field-hint { margin: 8px 0 0; color: var(--subtle); font-size: 13px; line-height: 1.6; }
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.name-part { display: flex; align-items: center; gap: 8px; }
.name-part span { color: var(--muted); font-size: 15px; }

/* ---- 卡片 ---- */
.card { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.card-kicker { margin: 0 0 6px; color: var(--gold); font-size: 13px; letter-spacing: 0.04em; }
.card--flush { padding: 16px 0 14px; }

/* ---- 等待页 ---- */
.demo-banner { margin: 8px 0 4px; padding: 8px 12px; border-radius: 10px; background: var(--gold-soft); color: var(--gold); font-size: 13px; line-height: 1.6; }
.ask-echo-text { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.5; }
.progress-bar { overflow: hidden; height: 6px; margin-top: 20px; border-radius: 3px; background: var(--surface-2); }
.progress-bar span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.eta { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.run-steps { display: grid; gap: 2px; margin: 14px 0 0; padding: 0; list-style: none; }
.run-step { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.run-step-status { position: relative; flex: none; width: 22px; height: 22px; margin-top: 2px; border: 2px solid var(--line); border-radius: 50%; }
.run-step[data-state="active"] .run-step-status { border-color: var(--gold); border-top-color: transparent; animation: spin 0.9s linear infinite; }
.run-step[data-state="done"] .run-step-status { border-color: var(--green); background: var(--green); }
.run-step[data-state="done"] .run-step-status::after { content: ""; position: absolute; top: 3px; left: 6px; width: 5px; height: 9px; border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.run-step-text { display: grid; }
.run-step-text strong { font-size: 16px; font-weight: 600; }
.run-step[data-state="waiting"] .run-step-text strong { color: var(--subtle); font-weight: 500; }
.run-step-note { color: var(--muted); font-size: 13px; }
.pillars-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; text-align: center; }
.pillar-mini { display: grid; gap: 2px; padding: 8px 0; border-radius: 12px; background: var(--surface-2); }
.pillar-mini small { color: var(--subtle); font-size: 12px; }
.pillar-mini strong { font-family: var(--kai); font-size: 24px; font-weight: 400; line-height: 1.25; }
.preview-rows { margin: 12px 0 0; }
.preview-row { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.preview-row dt { color: var(--subtle); font-family: var(--serif); }
.preview-row dd { margin: 0; }
.preview-row dd.muted { color: var(--muted); font-size: 14px; }
.leave-title { margin: 0; font-weight: 600; }
.leave-text { margin: 4px 0; color: var(--muted); font-size: 15px; }
.dock-wait { align-items: center; min-height: 70px; color: var(--muted); font-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.3; } }
@keyframes blink { 50% { opacity: 0.25; } }

.el-mu { color: var(--el-mu); } .el-huo { color: var(--el-huo); } .el-tu { color: var(--el-tu); } .el-jin { color: var(--el-jin); } .el-shui { color: var(--el-shui); }
.bg-mu { background: var(--el-mu); } .bg-huo { background: var(--el-huo); } .bg-tu { background: var(--el-tu); } .bg-jin { background: var(--el-jin); } .bg-shui { background: var(--el-shui); }

/* ---- 报告：底部栏目 ---- */
.tabbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 2px 0; }
.tab { position: relative; display: grid; align-content: center; justify-items: center; gap: 2px; min-height: 52px; color: var(--subtle); }
.tab[aria-selected="true"] { color: var(--gold); }
.tab-label { font-size: 12px; line-height: 1.2; }
.tab-badge { position: absolute; top: 3px; left: calc(50% + 8px); min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold-strong); color: var(--on-gold); font-size: 12px; line-height: 18px; text-align: center; }
.kb-open .tabbar { display: none; }
.page--tab { padding-top: 12px; }
.live-banner { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); color: var(--gold); font-size: 14px; }
.live-dot { flex: none; width: 8px; height: 8px; border-radius: 4px; background: var(--gold); animation: pulse 1.2s ease-in-out infinite; }

/* ---- 解答 ---- */
.answer-hero { padding: 20px 18px; }
.answer-hero .btn { margin-top: 4px; }
.answer-stack { display: grid; gap: 12px; }
.answer-stack .card { margin-top: 0; }
.answer-card.is-pending { opacity: 0.6; }
.answer-headline--sm { margin-top: 8px; font-size: 22px; }
.card-actions { display: flex; gap: 10px; margin-top: 4px; }
.card-actions .btn { flex: 1; max-width: none; }
.card-actions .btn--secondary { flex: 0 0 34%; }
.ask-echo-list { display: grid; gap: 6px; margin: 0; padding-left: 1.3em; font-family: var(--serif); font-size: 18px; line-height: 1.5; }
.answer-question { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.answer-label { margin: 16px 0 4px; color: var(--gold); font-size: 13px; letter-spacing: 0.04em; }
.answer-headline { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 1.45; }
.action-box { margin: 16px 0; padding: 14px 16px; border-radius: 14px; background: var(--gold-soft); }
.action-box p { margin: 0; font-size: 16px; line-height: 1.75; }
.action-box .action-label { margin-bottom: 4px; color: var(--gold); font-size: 13px; font-weight: 600; }
.action-box--compact { margin: 14px 0 8px; }
.action-box--compact p:last-child { font-size: 15px; }
.bullets { display: grid; gap: 8px; margin: 0; padding-left: 1.2em; font-size: 16px; line-height: 1.75; }
.detail-section { margin-top: 24px; }
.detail-section .section-label { margin-top: 0; }
.fold { margin-top: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fold-summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-size: 16px; list-style: none; cursor: pointer; }
.fold-summary::-webkit-details-marker { display: none; }
.icon--fold { width: 18px; height: 18px; color: var(--subtle); transition: transform 0.2s var(--ease); }
.fold[open] .icon--fold { transform: rotate(90deg); }
.fold .body-text { margin: 0 0 16px; }
.page--answer { padding-top: 16px; }
.swipe-holder { touch-action: pan-y; }

.tarot-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tarot-thumb { display: grid; gap: 2px; padding: 8px 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: center; }
.tarot-thumb img { width: 100%; height: auto; aspect-ratio: 96 / 166; margin-bottom: 6px; border-radius: 8px; object-fit: cover; }
.tarot-thumb small { color: var(--subtle); font-size: 12px; }
.tarot-thumb strong { font-size: 15px; font-weight: 600; }
.tarot-thumb span { color: var(--muted); font-size: 12px; }
.is-reversed { transform: rotate(180deg); }
.tarot-detail { text-align: center; }
.tarot-detail-img { display: block; width: 180px; height: auto; margin: 4px auto 14px; border-radius: 12px; }
.tarot-detail .body-text { text-align: left; }

.list-head { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 8px; }
.list-title { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 400; }
.list-head-meta { color: var(--muted); font-size: 14px; }
.topic-bar { position: sticky; top: calc(var(--safe-top) + var(--appbar-h)); z-index: 5; margin: 0 calc(-1 * var(--gutter)) 4px; padding: 6px 0 10px; background: var(--bg); }
.qlist { display: grid; gap: 10px; }
.qrow { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: left; }
.qrow-index { flex: none; margin-top: 3px; color: var(--subtle); font-size: 13px; font-variant-numeric: tabular-nums; }
.qrow-body { display: grid; flex: 1; gap: 4px; min-width: 0; }
.qrow-title { font-size: 16px; font-weight: 600; line-height: 1.5; }
.qrow-answer { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 14px; line-height: 1.6; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qrow-mark { flex: none; width: 8px; height: 8px; margin-top: 9px; border-radius: 4px; background: var(--gold); }
.qrow.is-read .qrow-mark { background: transparent; }
.qrow.is-read .qrow-title { color: var(--muted); font-weight: 500; }
.qrow:disabled { opacity: 0.55; }

/* ---- 整体 ---- */
.overview-hero { padding: 8px 0 4px; }
.overview-headline { margin: 4px 0 8px; font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1.4; }
.overview-hero .muted { margin: 0; font-size: 14px; }
.phase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.phase-main { display: block; font-family: var(--serif); font-size: 22px; font-weight: 400; }
.phase-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 0 10px; }
.section-head .muted { font-size: 13px; }
.section-head--inset { margin: 0; padding: 0 16px; }
.section-title { margin: 0; font-size: 19px; font-weight: 600; }

/* ---- 命盘 ---- */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.pillar { display: grid; align-content: start; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.pillar-pos { color: var(--subtle); font-size: 12px; }
.pillar-god { color: var(--muted); font-size: 13px; }
.pillar-char { font-family: var(--kai); font-size: 30px; font-weight: 400; line-height: 1.2; }
.pillar-hidden { display: grid; color: var(--muted); font-size: 12px; line-height: 1.5; }
.daymaster { margin: 0; font-size: 17px; }
.daymaster strong { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.favor { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.favor-chip { padding: 4px 10px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 14px; }
.favor-chip--good { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.element-bars { display: grid; gap: 10px; margin-top: 16px; }
.element-row { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: 8px; }
.element-name { font-size: 15px; font-weight: 600; }
.element-track { overflow: hidden; height: 8px; border-radius: 4px; background: var(--surface-2); }
.element-fill { display: block; height: 100%; border-radius: 4px; transform-origin: left; }
.element-count { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
.luck-scroll { display: flex; gap: 8px; padding: 12px 16px 2px; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding: 0 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
.luck-scroll::-webkit-scrollbar { display: none; }
.luck { display: grid; flex: 0 0 auto; justify-items: center; gap: 2px; min-width: 88px; padding: 10px 8px; border-radius: 12px; background: var(--surface-2); text-align: center; scroll-snap-align: start; }
.luck strong { font-family: var(--serif); font-size: 20px; font-weight: 400; }
.luck small { color: var(--muted); font-size: 12px; }
.luck.is-current { background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold); }
.trend { color: var(--muted); font-size: 12px; }
.trend--up { color: var(--green); } .trend--down { color: var(--red); } .trend--mid { color: var(--gold); }

/* ---- 追问 ---- */
.page--chat { padding-bottom: 8px; }
.chat-context { margin: 0 0 12px; color: var(--subtle); font-size: 13px; text-align: center; }
.chat-log { display: grid; gap: 12px; }
.chat-log > * { scroll-margin: calc(var(--safe-top) + var(--appbar-h) + 12px) 0 calc(var(--dock-h, 0px) + 12px); }
.msg { max-width: 88%; padding: 12px 14px; border-radius: 18px; font-size: 16px; line-height: 1.7; }
.msg--assistant { justify-self: start; border: 1px solid var(--line); border-bottom-left-radius: 6px; background: var(--surface); }
.msg--user { justify-self: end; border-bottom-right-radius: 6px; background: var(--gold-strong); color: var(--on-gold); }
.msg-text { margin: 0; white-space: pre-line; }
/* 网格列默认随内容变宽，宽表格会把整个聊天区撑出屏幕；限定列宽后表格在气泡里横向滚动。 */
.chat-log { grid-template-columns: minmax(0, 1fr); }
.msg { min-width: 0; }
.msg-md { min-width: 0; white-space: normal; }
.msg-md > * { margin: 0; }
.msg-md > * + * { margin-top: 0.7em; }
.msg-md ol, .msg-md ul { padding-left: 1.4em; }
.msg-md li + li { margin-top: 0.45em; }
.msg-md li::marker { color: var(--subtle); }
.msg-md strong { font-weight: 600; }
.msg-md .md-heading { font-weight: 600; }
.msg-md code { font-size: 0.9em; padding: 0 3px; border-radius: 3px; background: var(--line); }
.msg-md hr { border: 0; border-top: 1px solid var(--line); }
.msg-md ol ol, .msg-md ol ul, .msg-md ul ol, .msg-md ul ul { margin-top: 0.4em; }
.msg-md .md-task { list-style: none; margin-left: -1.2em; }
.msg-md .md-check { color: var(--subtle); }
.msg-md blockquote { margin: 0; padding-left: 12px; border-left: 2px solid var(--line); color: var(--muted); }
.msg-md blockquote > * { margin: 0; }
.msg-md blockquote > * + * { margin-top: 0.5em; }
.msg-md .md-pre { overflow-x: auto; padding: 10px 12px; border-radius: 8px; background: var(--line); font-size: 13px; line-height: 1.55; white-space: pre; }
.msg-md .md-pre code { padding: 0; background: none; font-size: inherit; }
.msg-md .md-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.msg-md table { border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.msg-md th, .msg-md td { padding: 6px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; min-width: 4em; }
.msg-md th { font-weight: 600; white-space: nowrap; }
.msg-ask { flex-direction: column; gap: 2px; min-height: 0; margin-top: 12px; padding: 10px 16px; font-family: var(--sans); }
.msg-ask small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.dv-other { display: grid; gap: 8px; margin-top: 14px; }
.dv-other .btn { flex-direction: column; gap: 2px; min-height: 0; padding: 10px 16px; }
.dv-other .btn small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.ask-repeat { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.msg-quote { margin: 0 0 6px; font-size: 13px; opacity: 0.8; }
.msg--typing { display: flex; gap: 5px; padding: 16px; }
.msg--typing span { width: 7px; height: 7px; border-radius: 4px; background: var(--subtle); animation: blink 1s infinite; }
.msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.msg--typing span:nth-child(3) { animation-delay: 0.3s; }
.chat-log .chip-scroll--wrap { margin-top: 0; }
.chat-bar { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-input { flex: 1; min-height: 44px; max-height: 120px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 22px; outline: 0; background: var(--bg); font-size: 16px; line-height: 1.5; resize: none; }
.chat-input:focus { border-color: var(--gold); }
.chat-send { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 22px; background: var(--gold-strong); color: var(--on-gold); }
.chat-send:disabled { opacity: 0.3; }
.quote-chip { display: flex; align-items: center; gap: 4px; padding: 0 0 6px 4px; color: var(--muted); font-size: 13px; }
.quote-chip-text { flex: 1; display: grid; min-width: 0; }
.quote-chip-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-chip-text small { color: var(--text); font-size: 14px; }
.quote-clear { display: grid; place-items: center; width: 44px; height: 32px; margin-right: -8px; }
.quote-clear .icon { width: 16px; height: 16px; }

/* ---- 底部弹层 ---- */
dialog.sheet { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--text); }
dialog.sheet::backdrop { background: transparent; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(15, 12, 8, 0.4); touch-action: none; }
.sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 88dvh; padding-bottom: var(--safe-bottom); border-radius: 20px 20px 0 0; background: var(--surface); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.14); }
.sheet-panel:focus { outline: none; }
.sheet-head { position: relative; display: flex; align-items: center; padding: 20px 8px 6px 20px; cursor: grab; touch-action: none; }
.sheet-handle { position: absolute; top: 7px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--line); }
.sheet-title { flex: 1; margin: 0; font-size: 18px; font-weight: 600; }
.sheet-close { display: grid; place-items: center; width: 44px; height: 44px; color: var(--muted); }
.sheet-body { padding: 4px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
.sheet-foot { padding: 10px 20px 12px; border-top: 1px solid var(--line); }
.sheet-note { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.prose p { margin: 0 0 12px; font-size: 16px; line-height: 1.8; }
.has-sheet { overflow: hidden; }

/* ---- 提示条 ---- */
.toast { position: fixed; bottom: calc(var(--dock-h, 0px) + var(--kb, 0px) + 20px); left: 50%; z-index: 60; max-width: calc(100% - 48px); padding: 10px 16px; border-radius: 12px; background: rgba(30, 26, 22, 0.92); color: #fff; font-size: 15px; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 0.2s, transform 0.2s var(--ease); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* 矮屏（如 iPhone SE 一代 568px）收紧标题区，让生日滚轮完整露在底部按钮上方。 */
@media (max-height: 640px) {
  .step-title { margin: 8px 0 4px; font-size: 24px; }
  .step-sub { margin-bottom: 12px; font-size: 13px; line-height: 1.6; }
  .date-result { min-height: 52px; margin: 10px 0 0; }
  .date-result-main { font-size: 21px; }
  .time-result { margin: 12px 0 10px; }
  .hero { padding-top: 8px; }
  .hero-title { font-size: 28px; }
}

/* 电脑上评审时居中显示手机宽度。 */
@media (min-width: 640px) {
  body { max-width: 480px; margin: 0 auto; box-shadow: 0 0 0 1px var(--line); }
  .appbar, .dock, .screen--leaving { left: calc(50% - 240px); right: calc(50% - 240px); }
  .sheet-panel { left: calc(50% - 240px); right: calc(50% - 240px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.demo-reset { margin-top: 16px; }

/* ---- 紫微斗数 ---- */
.section-head--card { margin: 0 0 6px; }
.zm-summary { margin: 0; font-size: 16px; }
.zm-summary strong { font-family: var(--serif); font-size: 20px; font-weight: 400; }
.zm-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.zm-now-item { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--surface-2); }
.zm-now-item small { color: var(--subtle); font-size: 12px; }
.zm-now-item strong { font-size: 16px; font-weight: 600; }
.zm-now-item span { color: var(--muted); font-size: 12px; }
.zm-hint { margin-top: 10px; }
.zm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.zm-palace { display: grid; grid-template-rows: auto 1fr auto; gap: 4px; min-height: 112px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; }
.zm-palace.is-soul { border-color: var(--gold); }
.zm-palace.is-decade { background: var(--gold-soft); }
.zm-palace-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.zm-palace-head strong { font-size: 15px; font-weight: 600; }
.zm-tag { padding: 0 5px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 12px; line-height: 18px; }
.zm-tag--now { background: var(--gold-strong); color: var(--on-gold); }
.zm-tag--year { background: color-mix(in srgb, var(--el-shui) 16%, transparent); color: var(--el-shui); }
.zm-stars { display: grid; align-content: start; gap: 2px; }
.zm-star { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px; }
.zm-star-name { font-family: var(--serif); font-size: 17px; line-height: 1.35; }
.zm-star-bright { color: var(--subtle); font-size: 12px; }
.zm-hua { padding: 0 4px; border-radius: 5px; font-size: 12px; line-height: 17px; }
.zm-hua--lu { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.zm-hua--quan { background: var(--gold-soft); color: var(--gold); }
.zm-hua--ke { background: color-mix(in srgb, var(--el-shui) 16%, transparent); color: var(--el-shui); }
.zm-hua--ji { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.zm-empty { color: var(--subtle); font-size: 13px; }
.zm-range { color: var(--subtle); font-size: 12px; }
.zm-star-list { display: grid; gap: 6px; }
.zm-star-list .zm-star-name { font-size: 20px; }
.link-row--inset { margin-top: 14px; min-height: 56px; background: var(--surface-2); border-color: transparent; }
.bullets--small { margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.page--ziwei { padding-inline: 8px; }
.zm-classic-note { margin: 4px 8px 10px; }
.zm-classic-scroll { overflow-x: auto; overscroll-behavior-x: contain; }

/* ---- 西方星盘 ----
   杂志信息图：纸色底、细线、平面色。选中用墨绿实心；相位线顺=木绿、紧=朱红虚线、合=近黑。
   轮盘坐标系是 320×320（见 screens/natal.js），下面的字号和线宽都是这个坐标系里的值。 */
.nw-el--fire { --pc: var(--el-huo); } .nw-el--earth { --pc: var(--el-tu); } .nw-el--air { --pc: var(--el-mu); } .nw-el--water { --pc: var(--el-shui); }
.natal-tone--soft { --tone: var(--el-mu); } .natal-tone--hard { --tone: var(--red); } .natal-tone--conj { --tone: var(--text); }
.natal-tag--soft { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.natal-tag--hard { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.natal-tag--plain { background: var(--surface-2); color: var(--muted); }
.card--natal .tag, .natal-detail .tag { margin-left: 6px; padding: 0 6px; font-size: 12px; line-height: 20px; vertical-align: 1px; }

/* 日月升：同四柱的做法，上细线、竖线分栏、大字。 */
.natal-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--line); }
.natal-three-item { position: relative; display: grid; align-content: start; justify-items: center; gap: 2px; padding: 14px 4px 12px; border-right: 1px solid var(--line); text-align: center; }
.natal-three-item:last-child { border-right: 0; }
.natal-three-item.tap:active { transform: none; background-color: var(--press); }
.natal-three-item.is-sel { background: var(--gold-soft); }
.natal-three-art { width: 26px; height: 26px; }
.natal-three-art svg { display: block; width: 100%; height: 100%; }
.natal-three-art--sun { color: var(--red); }
.natal-three-item small { padding-left: 0.24em; color: var(--subtle); font-size: 12px; letter-spacing: 0.24em; }
.natal-three-item strong { font-family: var(--brush); font-size: 28px; font-weight: 400; line-height: 1.25; }
.natal-three-item strong.is-long { font-size: 19px; line-height: 1.3; }
.natal-three-item > span:last-child { color: var(--muted); font-size: 13px; }
.natal-three-item .icon--muted { position: absolute; top: 8px; right: 4px; width: 14px; height: 14px; }

.natal-toolbar { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 6px; border-top: 1px solid var(--line); }
.natal-toolbar .card-kicker { flex: 1; margin: 0; }
.segmented--mini { flex: none; width: 112px; }
.segmented--mini .segmented-item { min-height: 30px; font-size: 13px; }
/* 按钮只有 30px 高，点击区上下各扩 7px。 */
.segmented--mini .segmented-item::after { content: ""; position: absolute; inset: -7px 0; }
.natal-expand { display: inline-grid; width: 14px; height: 14px; }
.natal-expand svg { width: 100%; height: 100%; }
.natal-toolbar .text-link { gap: 4px; white-space: nowrap; }

.natal-wheel-wrap { margin: 2px -12px 0; }
.natal-wheel { display: block; width: 100%; height: auto; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.natal-wheel text { font-family: var(--serif); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.nw-ring { fill: none; stroke: var(--line); stroke-width: 0.7; }
.nw-ring--outer { stroke: var(--rule); stroke-width: 0.8; }
.nw-ring--inner { stroke: var(--rule); stroke-width: 0.5; }
.nw-tick { stroke: var(--line); stroke-width: 0.7; }
.nw-ticks { fill: none; stroke: rgba(22, 22, 22, 0.3); stroke-width: 0.45; }
.nw-sign { font-size: 10.3px; }
.nw-sign.is-glyph { font-family: var(--sans); font-size: 12.2px; }
.nw-sign--fire { fill: var(--el-huo); }
.nw-sign--earth { fill: var(--el-tu); }
.nw-sign--air { fill: var(--el-mu); }
.nw-sign--water { fill: var(--el-shui); }
.nw-cusp { stroke: var(--line); stroke-width: 0.7; }
.nw-cusp--angle { stroke: var(--rule); stroke-width: 1.1; }
.nw-house-hit { fill: transparent; cursor: pointer; transition: fill 0.25s; }
.nw-house-hit.is-sel { fill: rgba(35, 68, 59, 0.1); }
.natal-wheel .nw-house { fill: var(--subtle); font-family: var(--sans); font-size: 8px; transition: fill 0.25s; }
.natal-wheel .nw-house.is-sel { fill: var(--gold); font-weight: 700; }
.nw-hit { fill: transparent; cursor: pointer; }
.nw-angle text { fill: var(--text); font-size: 8.4px; font-weight: 700; }
.nw-angle.is-latin text { font-family: var(--latin); font-size: 6.1px; font-weight: 400; }
.nw-angle-cap { fill: var(--bg); stroke: var(--rule); stroke-width: 0.6; transition: fill 0.25s; }
.nw-angle--minor path { fill: var(--subtle); }
.nw-angle--minor text { fill: var(--subtle); font-weight: 400; }
.nw-angle.is-sel .nw-angle-cap { fill: var(--gold); stroke: var(--gold); }
.nw-angle.is-sel text { fill: var(--on-gold); }

.nw-aspect line { fill: none; }
.nw-aspect--soft line { stroke: var(--el-mu); }
.nw-aspect--hard line { stroke: var(--red); }
.nw-aspect--conj line { stroke: var(--text); }
.nw-aspect-line { stroke-width: 0.8; opacity: 0.62; transition: opacity 0.3s, stroke-width 0.3s; }
.nw-aspect--hard .nw-aspect-line { stroke-dasharray: 3 2.3; }
/* 选中时很淡的流动虚线：一条纸色的细缝沿线移动，不发光。 */
.nw-aspect .nw-aspect-flow { stroke: var(--bg); stroke-width: 1.9; stroke-dasharray: 1.5 9; opacity: 0; }
.nw-aspect .nw-aspect-hit { stroke: transparent; stroke-width: 9; cursor: pointer; }
.nw-node { fill: var(--subtle); transition: fill 0.25s; }
.nw-node.is-rel { fill: var(--text); }

.nw-planet { cursor: pointer; outline: none; transition: opacity 0.3s; }
.nw-lead { fill: none; stroke: var(--pc); stroke-width: 0.6; stroke-opacity: 0.7; }
.nw-dot { fill: var(--pc); }
.nw-body { fill: var(--bg); stroke: var(--pc); stroke-width: 0.85; transition: fill 0.25s, stroke 0.25s, stroke-width 0.25s; }
.nw-glyph { fill: var(--text); font-size: 10.7px; transition: fill 0.25s; }
.nw-glyph.is-glyph { font-family: var(--sans); font-size: 11.8px; }
.nw-retro-cap { fill: var(--bg); stroke: var(--muted); stroke-width: 0.55; }
.natal-wheel .nw-retro { fill: var(--text); font-family: var(--sans); font-size: 5.7px; }
.nw-planet:focus-visible .nw-body { stroke: var(--gold); stroke-width: 1.7; }
.nw-disc { transform-box: fill-box; transform-origin: center; }

/* 选中态：只留相关的，其余降透明度。 */
.natal-wheel.has-sel .nw-aspect-line { opacity: 0.1; }
.natal-wheel.has-sel .nw-aspect.is-rel .nw-aspect-line { opacity: 1; stroke-width: 1.5; }
.natal-wheel.has-sel .nw-aspect.is-rel .nw-aspect-flow { opacity: 0.75; animation: nw-flow 1.6s linear infinite; }
.natal-wheel.has-sel .nw-aspect.is-rel.is-rev .nw-aspect-flow { animation-direction: reverse; }
@keyframes nw-flow { to { stroke-dashoffset: -10.5; } }
.natal-wheel.has-sel .nw-planet { opacity: 0.24; }
.natal-wheel.has-sel .nw-planet.is-rel { opacity: 1; }
.natal-wheel.has-sel .nw-planet.is-rel .nw-body { stroke-width: 1.25; }
.natal-wheel.has-sel .nw-planet.is-sel .nw-body { fill: var(--gold); stroke: var(--gold); }
.natal-wheel.has-sel .nw-planet.is-sel .nw-glyph { fill: #fff; font-weight: 700; }

/* 入场：圆环描出 → 宫位线 → 行星落位 → 相位线，约 1 秒；不发光。 */
.natal-wheel.is-intro .nw-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: nw-draw var(--dur, 0.45s) cubic-bezier(0.5, 0, 0.2, 1) var(--d, 0s) forwards; }
.natal-wheel.is-intro .nw-aspect-line { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: nw-draw 0.25s ease-out var(--d, 0s) forwards; }
@keyframes nw-draw { to { stroke-dashoffset: 0; } }
.natal-wheel.is-intro .nw-fade { opacity: 0; animation: nw-fade 0.3s ease-out var(--d, 0s) forwards; }
@keyframes nw-fade { to { opacity: 1; } }
.natal-wheel.is-intro .nw-disc { opacity: 0; animation: nw-settle 0.26s ease-out var(--d, 0s) forwards; }
@keyframes nw-settle { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .natal-wheel.has-sel .nw-aspect.is-rel .nw-aspect-flow { opacity: 0; animation: none; } }

.natal-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.nw-key { display: inline-block; width: 16px; height: 0; margin: 0 6px 3px 0; border-top: 1.5px solid; vertical-align: middle; }
.nw-key--soft { color: var(--el-mu); }
.nw-key--hard { border-top-style: dashed; color: var(--red); }
.nw-key--conj { color: var(--text); }
.natal-hint { margin: 4px 0 0; text-align: center; }

.natal-tabs { margin-top: 24px; }
.natal-tabs .segmented-item i { margin-left: 4px; font: italic 13px var(--latin); opacity: 0.75; }
.natal-list { margin-top: 10px; border-top-color: var(--line); }
.natal-list .list-row, .natal-detail .list-row { position: relative; }
.natal-list .list-row.is-sel { background: var(--gold-soft); box-shadow: calc(-1 * var(--gutter)) 0 0 var(--gold-soft), var(--gutter) 0 0 var(--gold-soft); }
.natal-list .list-row.is-sel::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--gutter)); width: 2px; background: var(--gold); }
.natal-list .list-row-main small, .natal-detail .list-row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.natal-g { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--pc, var(--rule)); font: 16px/1 var(--serif); }
.natal-g.is-glyph { font: 17px/1 var(--sans); }
.natal-g--num { font: italic 17px/1 var(--latin); }
.natal-g--pair { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 58px; padding: 0 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; white-space: nowrap; }
.natal-g--pair i { width: 8px; height: 0; margin: 0 3px; border-top: 1.5px solid var(--tone); }
.natal-g--pair.natal-tone--hard i { border-top-style: dashed; }
.list-row.is-sel > .natal-g:not(.natal-g--pair) { background: var(--gold); box-shadow: none; color: #fff; }
.natal-list .method-name { width: 3.2em; }

/* 元素分布：细条，同五行条（.element-track）。 */
.natal-balance { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 4px; }
.natal-balance > div { display: grid; grid-template-columns: 2.4em 1fr 1em; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.natal-bar { height: 2px; background: var(--line); }
.natal-bar i { display: block; height: 100%; background: var(--pc, var(--text)); }
.natal-balance b { color: var(--text); font: italic 16px var(--latin); text-align: right; }

/* 弹层：矮一些、不压暗，轮盘上的高亮留在弹层上方看得见。 */
.sheet--peek .sheet-scrim { background: transparent; }
.sheet--peek .sheet-panel { max-height: 46dvh; }
.natal-detail .body-text { margin-top: 0; white-space: normal; }
.natal-detail .detail-section { margin-top: 18px; }
.natal-link { display: flex; align-items: center; justify-content: center; margin: 4px 0 14px; }
.natal-link .natal-g { width: 40px; height: 40px; font-size: 18px; }
.natal-link .natal-g.is-glyph { font-size: 20px; }
.natal-link > i { flex: 1; max-width: 84px; height: 0; border-top: 2px solid var(--tone); }
.natal-link.natal-tone--hard > i { border-top-style: dashed; }
.natal-link-name { margin: 0 8px; padding: 0 10px; box-shadow: inset 0 0 0 1px var(--tone); color: var(--tone); font: 700 14px/26px var(--serif); }

/* 全屏放大 */
.natal-full-open { overflow: hidden; }
.natal-full { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--bg); animation: nw-fade-in 0.25s ease-out; }
@keyframes nw-fade-in { from { opacity: 0; } }
.natal-full-bar { display: grid; flex: none; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: calc(var(--appbar-h) + var(--safe-top)); padding: var(--safe-top) 14px 0; border-bottom: 1px solid var(--line); }
.natal-full-bar strong { font-size: 17px; font-weight: 600; }
.natal-full-bar .text-link:last-child { justify-self: end; }
.natal-full-stage { position: relative; display: grid; flex: 1; place-items: stretch; min-height: 0; overflow: hidden; touch-action: none; }
.natal-full-stage .natal-wheel { width: 100%; height: 100%; min-height: 0; touch-action: none; cursor: grab; transition: transform 0.34s var(--ease); }
.natal-full-stage .natal-wheel:active { cursor: grabbing; }
.natal-full.has-sel .natal-full-stage .natal-wheel { transform: translateY(calc(-1 * var(--lift, 0px))); }
.natal-full-foot { display: grid; flex: none; justify-items: center; gap: 4px; padding: 6px 0 calc(14px + var(--safe-bottom)); pointer-events: none; }
.natal-full-foot .fine-print { margin: 0; }
.natal-zoom { padding: 0 8px; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: italic 13px/22px var(--latin); }

/* 在太阳系中展开（screens/natal-solar.js）：沿用全屏层的顶栏；舞台里是 three.js 画布，文字标签是投影到屏幕上的 DOM。 */
.natal-solar-entry { margin-top: 16px; }
.natal-solar-entry .link-row-icon svg { width: 28px; height: 28px; }
.natal-solar.is-leaving { pointer-events: none; }
.natal-solar.has-sel { padding-bottom: var(--sheet-h, 0px); }
.natal-solar.has-sel .ns-foot, .natal-solar.is-fallback .ns-foot, .natal-solar.is-fallback .natal-full-bar .text-link:last-child { display: none; }
.ns-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; -webkit-user-select: none; user-select: none; }
.ns-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.ns-labels, .ns-leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.ns-leads line { stroke: var(--muted); stroke-width: 0.8; }
.ns-leads line.is-sel { stroke: var(--gold); }
.ns-l { position: absolute; top: 0; left: 0; margin: 0; line-height: 1; white-space: nowrap; will-change: transform, opacity; }
.ns-l--sign { color: var(--pc); font: 13px/1 var(--serif); }
.ns-l--sign.is-glyph { font: 15px/1 var(--sans); }
.ns-l--num { color: var(--subtle); font: 10px/1 var(--sans); }
.ns-l--angle { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); font: 700 11px/1 var(--serif); }
.ns-l--angle.is-latin { font: 700 8px/1 var(--sans); }
.ns-l--angle.is-minor { background: none; box-shadow: none; color: var(--subtle); font-weight: 400; }
.ns-l--chip { display: grid; place-items: center; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.1px var(--pc); font-family: var(--serif); }
.ns-l--chip.is-glyph { font-family: var(--sans); }
.ns-l--body { display: flex; align-items: center; gap: 4px; padding: 2px 4px; background: color-mix(in srgb, var(--bg) 84%, transparent); font: 12px/1.15 var(--serif); cursor: pointer; }
.ns-l--body i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--pc); }
.ns-l--body b { padding: 1px 2px; box-shadow: inset 0 0 0 1px var(--subtle); color: var(--muted); font: 400 9px/1 var(--sans); }
.ns-l--body.is-earth { color: var(--gold); font-weight: 700; }
.ns-l--body.is-sun { color: var(--red); font-weight: 700; }
.ns-l--body.is-sel { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); font-weight: 700; }
.ns-l--note { color: var(--subtle); font: 10px/1.2 var(--sans); }
.ns-corner { position: absolute; bottom: 6px; margin: 0; color: var(--subtle); font-size: 11px; line-height: 1.5; pointer-events: none; transition: opacity 0.3s; }
.ns-corner--l { left: var(--gutter); }
.ns-corner--r { right: var(--gutter); color: var(--gold); text-align: right; }
.ns-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 14px; }
.ns-foot { flex: none; padding: 0 var(--gutter) calc(12px + var(--safe-bottom)); }
.ns-steps { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.ns-steps i { width: 18px; height: 2px; background: var(--line); transition: background-color 0.2s; }
.ns-steps i.is-on { background: var(--text); }
.ns-caption { min-height: 68px; margin: 8px 0 0; font: 700 17px/1.5 var(--serif); text-align: center; }
.ns-caption small { display: block; margin-top: 2px; color: var(--subtle); font: 400 12.5px/1.55 var(--sans); }
.ns-controls { display: flex; justify-content: flex-end; align-items: center; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); transition: opacity 0.3s; }
.ns-controls .text-link { min-height: 36px; font-size: 13px; }
.natal-solar:not(.is-final) .ns-controls, .natal-solar:not(.is-final) .ns-corner { opacity: 0; pointer-events: none; }
.ns-fallback { height: 100%; padding: 20px var(--gutter) calc(20px + var(--safe-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-user-select: text; user-select: text; }
.ns-fallback > strong { display: block; font: 700 20px/1.4 var(--serif); }
.ns-fallback .body-text { margin: 8px 0 16px; font-size: 14px; }
@media (max-width: 350px) { .ns-caption { font-size: 15px; } .ns-l--body { font-size: 11px; } .ns-corner { font-size: 10px; } }

/* ---- 起卦抽牌 ---- */
.ritual { display: grid; gap: 12px; }
.ritual .card { margin-top: 0; }
.rt-head { display: flex; align-items: flex-start; gap: 12px; }
.rt-status { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 14px; background: var(--surface-2); color: var(--muted); font-size: 14px; font-weight: 600; }
.rt-status .icon { width: 18px; height: 18px; }
.rt-step.is-done .rt-status { background: var(--green); color: var(--surface); }
.rt-title { margin: 0; font-size: 17px; font-weight: 600; }
.rt-sub { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.rt-body { margin-top: 12px; }
.rt-cast { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.rt-cast strong { font-family: var(--serif); font-size: 18px; font-weight: 400; }
.rt-cast.is-pending { visibility: hidden; }
.rt-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* 三个位置：下一张要放的那个亮起，空位里虚线框出牌的大小，翻开时亮一下、迸出光点 */
.rt-slot { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 186px; padding: 8px 4px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; transition: border-color 0.3s, background-color 0.3s; }
.rt-slot > small { color: var(--subtle); font-size: 12px; }
.rt-slot.is-next { border-color: var(--gold); background: var(--gold-soft); }
.rt-place { width: 72px; aspect-ratio: 72 / 124; border: 1px dashed var(--line); }
.rt-slot.is-next .rt-place { border-color: var(--gold); animation: rt-breathe 1.8s ease-in-out infinite; }
@keyframes rt-breathe { 50% { opacity: 0.4; } }
.rt-glow { position: absolute; top: 44%; left: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: radial-gradient(circle, rgba(240, 214, 150, 0.75), rgba(240, 214, 150, 0) 65%); pointer-events: none; }
.rt-spark { position: absolute; top: 44%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #f0d696; box-shadow: 0 0 6px #f0d696; pointer-events: none; }
/* 翻开的牌：正反两面，飞过来时从牌背转到正面 */
.rt-face { position: relative; display: grid; justify-items: center; gap: 2px; perspective: 700px; }
.rt-face.is-flying { z-index: 3; }
.rt-flip { position: relative; width: 72px; aspect-ratio: 72 / 124; transform: rotateY(180deg); transform-style: preserve-3d; }
.rt-side { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.rt-side--front { transform: rotateY(180deg); }
.rt-side--front img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rt-face strong { font-size: 14px; font-weight: 600; }
.rt-face .rt-orient { color: var(--muted); font-size: 12px; }
/* 牌轮：牌排在横向的大轮子上，正中那张最大、带一圈暖光；位置由 lib/tarot-wheel.js 逐帧算。
   静止时（is-still）位置变化带过渡，抬起一张有动画；转动时不加过渡，免得拖影。 */
.rt-hint { min-height: 1.6em; margin: 12px 0 0; color: var(--muted); font-size: 14px; letter-spacing: 0.04em; text-align: center; }
.rt-wheel { position: relative; height: 204px; margin: 2px -16px 0; overflow: hidden; outline: 0; touch-action: pan-y; -webkit-user-select: none; user-select: none; transition: opacity 0.45s, transform 0.45s var(--ease); }
.rt-wheel:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }
.rt-wheel .rt-card { position: absolute; top: 34px; left: 50%; width: 62px; height: 106px; margin-left: -31px; padding: 0; will-change: transform; transition: box-shadow 0.2s; }
.rt-wheel.is-still .rt-card { transition: transform 0.22s var(--ease), box-shadow 0.2s; }
.rt-wheel .rt-card.is-center { box-shadow: 0 0 0 2px rgba(240, 214, 150, 0.9), 0 0 22px rgba(240, 214, 150, 0.55), 0 8px 18px rgba(0, 0, 0, 0.22); }
.rt-wheel .rt-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.rt-wheel.is-disabled { pointer-events: none; }
.rt-wheel.is-leaving { opacity: 0; transform: translateY(24px); pointer-events: none; }
.rt-wheel.is-closed { display: none; }
.rt-wheel-actions { display: flex; justify-content: center; gap: 28px; margin-top: 2px; }
.rt-wheel-actions .text-link:disabled { opacity: 0.4; }
/* 牌背：宣纸底、墨线双框和四角回纹，中间二十四格罗盘刻度、一点朱砂。上下对称，牌倒过来时从背面看不出正逆位 */
.rt-card, .rt-side--back { border: 0; border-radius: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 106'%3E%3Crect width='62' height='106' fill='%23eee6d4'/%3E%3Cg fill='none' stroke='%232a2a26'%3E%3Crect x='3.5' y='3.5' width='55' height='99' stroke-width='.9'/%3E%3Crect x='6' y='6' width='50' height='94' stroke-width='.4'/%3E%3Cpath d='M8.5 14.5V8.5H14.5M10.5 14.5V10.5H14.5M53.5 14.5V8.5H47.5M51.5 14.5V10.5H47.5M8.5 91.5V97.5H14.5M10.5 91.5V95.5H14.5M53.5 91.5V97.5H47.5M51.5 91.5V95.5H47.5' stroke-width='.5'/%3E%3Ccircle cx='31' cy='53' r='17.2' stroke-width='.8'/%3E%3Ccircle cx='31' cy='53' r='12.6' stroke-width='.4'/%3E%3Ccircle cx='31' cy='53' r='6.2' stroke-width='.45'/%3E%3Cpath d='M31 42.8L31 36.6M34.26 40.83L35.24 37.16M37.3 42.09L39.2 38.8M38.21 45.79L42.6 41.4M41.91 46.7L45.2 44.8M43.17 49.74L46.84 48.76M41.2 53L47.4 53M43.17 56.26L46.84 57.24M41.91 59.3L45.2 61.2M38.21 60.21L42.6 64.6M37.3 63.91L39.2 67.2M34.26 65.17L35.24 68.84M31 63.2L31 69.4M27.74 65.17L26.76 68.84M24.7 63.91L22.8 67.2M23.79 60.21L19.4 64.6M20.09 59.3L16.8 61.2M18.83 56.26L15.16 57.24M20.8 53L14.6 53M18.83 49.74L15.16 48.76M20.09 46.7L16.8 44.8M23.79 45.79L19.4 41.4M24.7 42.09L22.8 38.8M27.74 40.83L26.76 37.16' stroke-width='.45'/%3E%3Cpath d='M31 22V30M31 76V84' stroke-width='.5'/%3E%3C/g%3E%3Cg fill='%23b0432f'%3E%3Ccircle cx='31' cy='53' r='2.5'/%3E%3Cpath d='M31 16.5l2 3-2 3-2-3z'/%3E%3Cpath d='M31 83.5l2 3-2 3-2-3z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, #eee6d4; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18); }
.rt-cezi { display: flex; align-items: center; gap: 12px; }
.rt-char { width: 72px; height: 72px; border: 1.5px solid var(--gold); border-radius: 12px; background: var(--surface); font-family: var(--serif); font-size: 40px; text-align: center; -webkit-appearance: none; appearance: none; }
.rt-cezi .btn--compact { flex: none; padding: 0 18px; }
/* 提交后的字：只展示，不再像输入框 */
.rt-written { display: block; font-family: var(--serif); font-size: 44px; font-weight: 400; line-height: 1.2; }

/* ---- 问事 ---- */
.ask-cta .btn { margin-top: 12px; }
.asked-card { display: grid; gap: 6px; width: 100%; text-align: left; }
.asked-card .text-link { justify-self: start; }
.dv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dv-chip { padding: 2px 8px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 12px; line-height: 1.6; }
.dv-meta { margin: 4px 0 12px; }
.dv-reasons { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dv-reasons li { display: flex; align-items: baseline; gap: 8px; font-size: 15px; line-height: 1.7; }
.dv-source { flex: none; padding: 0 6px; border-radius: 6px; font-size: 12px; line-height: 20px; }
.dv-source--meihua { background: color-mix(in srgb, var(--el-mu) 15%, transparent); color: var(--el-mu); }
.dv-source--qimen { background: color-mix(in srgb, var(--el-shui) 15%, transparent); color: var(--el-shui); }
.dv-source--tarot { background: color-mix(in srgb, var(--el-huo) 14%, transparent); color: var(--el-huo); }
.dv-source--cezi { background: color-mix(in srgb, var(--el-tu) 16%, transparent); color: var(--el-tu); }
.dv-source--ming { background: var(--gold-soft); color: var(--gold); }
.dv-method { display: grid; gap: 8px; }
.dv-visual { display: grid; gap: 4px; }
.dv-gua { display: flex; align-items: baseline; gap: 10px; }
.dv-gua strong, .dv-ju { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.dv-gua span { color: var(--subtle); font-size: 13px; }
.dv-cezi { display: flex; align-items: center; gap: 12px; }
.dv-char { display: grid; place-items: center; width: 64px; height: 64px; border: 1.5px solid var(--gold); border-radius: 12px; font-family: var(--serif); font-size: 36px; font-weight: 400; }
.dv-headline { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 400; line-height: 1.5; }
.dv-method .text-link { justify-self: start; }
.dv-ming-list { margin-top: 12px; }
.spinner { width: 16px; height: 16px; margin-right: 8px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }

/* ==== 杂志风格 ====
   原则：用细线分区，不用圆角卡片和阴影；标题用宋体放大；序号和小标签用拉丁斜体；
   主按钮是墨绿胶囊；正文留白加大。下面只覆盖形状和排版，交互结构不变。 */
.appbar { background: color-mix(in srgb, var(--bg) 92%, transparent); }
.appbar.is-scrolled { border-bottom-color: var(--rule); }
.appbar-brand { gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: 0.4em; }
.appbar-title { font-family: var(--serif); font-weight: 700; letter-spacing: 0.06em; }
.appbar-pill { border: 1px solid var(--rule); border-radius: 0; background: none; color: var(--text); font-size: 12px; letter-spacing: 0.1em; }
.appbar-progress { height: 1px; }

.btn { border-radius: 999px; font-size: 16px; font-weight: 500; letter-spacing: 0.08em; }
.btn--secondary { background: none; box-shadow: inset 0 0 0 1px var(--rule); color: var(--text); }
.btn--compact { letter-spacing: 0.08em; }
.dock { background: color-mix(in srgb, var(--bg) 94%, transparent); border-top-color: var(--rule); }
.text-link { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* 小标签：字距拉开、灰色；带序号的用拉丁斜体 */
.hero-kicker, .card-kicker, .answer-label, .section-label, .ask-card-label {
  color: var(--subtle); font-size: 12px; font-weight: 400; letter-spacing: 0.24em;
}
.hero-title, .step-title, .overview-headline, .answer-headline, .list-title { font-weight: 700; letter-spacing: 0.01em; }
.hero-title { font-size: 34px; line-height: 1.25; }
.step-title { font-size: 30px; }
.overview-headline { font-size: 30px; line-height: 1.4; }
.answer-headline { font-size: 26px; }
.section-title { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.section-head { border-top: 1px solid var(--rule); padding-top: 14px; }

/* 卡片 → 上细线分隔的段落 */
.card, .group, .list--card, .note-card {
  border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: transparent; padding-left: 0; padding-right: 0;
}
.group-row, .list-row { padding-left: 0; padding-right: 0; }
.list--card .list-row:last-child { border-bottom: 1px solid var(--line); }
.sheet-body .list--card, .sheet-body .group { border-top-color: var(--line); }
.answer-hero { padding: 20px 0; }
.action-box { border-radius: 0; background: none; border-left: 2px solid var(--gold); padding: 4px 0 4px 14px; }
.action-box .action-label { color: var(--gold); letter-spacing: 0.2em; font-weight: 400; font-size: 12px; }
.tag, .zm-tag, .favor-chip { border-radius: 0; }
.demo-banner, .live-banner { border-radius: 0; background: none; border: 1px solid var(--gold); }

/* 首页：提问框是一条下划线，大号宋体 */
.ask-card { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; padding: 10px 0 26px; }
.ask-card:focus-within { border-color: var(--gold); }
.ask-input { min-height: 0; font-family: var(--serif); font-size: 22px; }
.ask-count { right: 0; }
.add-question-plus { border-radius: 0; background: none; box-shadow: inset 0 0 0 1px currentColor; }
.chip { border-color: var(--rule); background: none; font-size: 14px; }
.chip[aria-selected="true"] { background: var(--text); }
.link-row { border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: none; padding: 14px 0; }
.link-row-icon { border-radius: 0; background: none; box-shadow: inset 0 0 0 1px var(--gold); }
.link-row--inset { background: none; border-color: var(--line); padding: 12px 0; }

/* 填资料 */
.segmented { border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--rule); }
.segmented-thumb { border-radius: 999px; background: var(--text); box-shadow: none; }
.segmented-item[aria-checked="true"] { color: var(--bg); }
.date-result-main { font-size: 30px; font-weight: 700; }
.wheels::before { border-radius: 0; background: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.wheel-item.is-selected { font-family: var(--serif); font-size: 20px; }
.text-input { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; padding: 0 2px; }
.shichen, .city { border-color: var(--line); border-radius: 0; background: none; }
.shichen strong { font-family: var(--serif); font-size: 20px; }
.shichen[aria-checked="true"] { background: var(--text); color: var(--bg); }
.city.is-selected { border-color: var(--text); background: var(--text); color: var(--bg); }

/* 等待页与命盘：大号宋体干支，细线代替底色块 */
.progress-bar { height: 1px; border-radius: 0; }
.pillars, .pillars-mini { gap: 0; border-top: 1px solid var(--rule); }
.pillar, .pillar-mini { border-radius: 0; background: none; border-right: 1px solid var(--line); }
.pillar:last-child, .pillar-mini:last-child { border-right: 0; }
.pillar-char { font-size: 40px; line-height: 1.1; }
.element-track { height: 2px; border-radius: 0; }
.element-fill { border-radius: 0; }
.luck { border-radius: 0; background: none; box-shadow: inset 0 0 0 1px var(--line); }
.luck.is-current { background: none; box-shadow: inset 0 0 0 1.5px var(--gold); }
.zm-now-item, .zm-palace { border-radius: 0; background: none; }
.zm-now-item { border-top: 1px solid var(--line); padding: 8px 0; }

/* 解答列表：像杂志目录 */
.qlist { gap: 0; border-top: 1px solid var(--rule); }
.qrow { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 16px 0; }
.qrow-index { font-family: var(--latin); font-style: italic; font-size: 16px; margin-top: 0; min-width: 1.8em; }
.qrow-title { font-family: var(--serif); font-size: 18px; font-weight: 700; }
.qrow-mark { border-radius: 0; width: 6px; height: 6px; }
.topic-bar { border-bottom: 1px solid var(--line); }

/* 整体：首字下沉，六个方面的横滑卡保留边框 */
.overview-hero { padding-top: 4px; }
.phase { border-top: 1px solid var(--rule); }
.phase-main { font-size: 26px; font-weight: 700; }

/* 追问与弹层 */
.msg { border-radius: 2px; }
.msg--assistant { border: 0; border-left: 2px solid var(--gold); background: none; padding-left: 14px; font-family: var(--serif); }
.msg--user { background: var(--text); color: var(--bg); }
.chat-input { border-radius: 0; border: 0; border-bottom: 1px solid var(--rule); background: none; }
.chat-send { background: var(--text); }
.sheet-panel { border-radius: 0; box-shadow: 0 -1px 0 var(--rule); background: var(--bg); }
.sheet-title { font-family: var(--serif); font-weight: 700; }
.toast { border-radius: 0; background: var(--text); }

/* ==== 封面 ==== */
.cover { position: relative; margin: 0 calc(-1 * var(--gutter)) 8px; height: min(66vh, 540px); overflow: hidden; color: var(--text); }
.cover--compact { height: min(52vh, 420px); }
.cover svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover-title { position: absolute; left: var(--gutter); bottom: 34px; margin: 0; font-family: var(--serif); font-size: clamp(64px, 21vw, 104px); font-weight: 900; line-height: 0.98; letter-spacing: -0.01em; }
.cover-title span { display: block; }
.cover--compact .cover-title { bottom: 24px; letter-spacing: 0.12em; }
.cover-side { position: absolute; top: 18px; right: var(--gutter); width: 15em; text-align: right; font-size: 12px; line-height: 1.7; color: #333; }
.cover-latin { display: block; margin-bottom: 4px; font-family: var(--latin); font-size: 26px; font-style: italic; line-height: 1.1; color: var(--gold); }
.cover-meta { position: absolute; left: var(--gutter); bottom: 12px; color: var(--muted); font-size: 12px; letter-spacing: 0.24em; }
.cover--night .cover-title { color: #f2eee4; }
.cover--night .cover-meta { color: rgba(242, 238, 228, 0.7); }
.cover--night .cover-side { color: rgba(242, 238, 228, 0.8); }
.cover--night .cover-latin { color: #e8dcc0; }
.page--tab > .cover:first-child { margin-top: -12px; }

/* ==== 杂志风格：新流程组件（起卦抽牌、问事）====
   与上面同一套原则：细线分区、不用圆角和阴影、标题宋体加粗、序号拉丁斜体。 */
.rt-status { border-radius: 0; background: none; box-shadow: inset 0 0 0 1px var(--rule); color: var(--text); font-family: var(--latin); font-style: italic; }
/* 完成的步骤用和进度列表一样的绿色圆勾，不用方块，免得像能取消的复选框 */
.rt-step.is-done .rt-status { border-radius: 50%; background: var(--green); color: var(--surface); box-shadow: none; }
.rt-title { font-family: var(--serif); font-size: 19px; font-weight: 700; }
.rt-cast strong { font-size: 20px; font-weight: 700; }
.rt-slot { border-style: solid; border-color: var(--line); border-radius: 0; }
.rt-slot.is-next { border-color: var(--gold); }
.rt-char { border-color: var(--rule); border-radius: 0; background: none; font-weight: 700; }
.rt-written { font-weight: 700; }
.asked-card { padding-top: 18px; padding-bottom: 18px; }
.dv-chip { border-radius: 0; background: none; box-shadow: inset 0 0 0 1px var(--line); }
.dv-source { border-radius: 0; background: none !important; box-shadow: inset 0 0 0 1px currentColor; }
.dv-gua strong, .dv-ju, .dv-headline { font-weight: 700; }
.dv-char { border-color: var(--rule); border-radius: 0; font-weight: 700; }

/* ==== 首页整页封面 ====
   第一屏整页是封面，顶栏透明压在画面上；下滑时提问页像一张纸盖上来，封面固定在后面做视差。 */
.stage-flush .stage { padding-top: 0; }
.page--home-cover { padding-top: 0; scroll-snap-align: start; }
html.snap-home { scroll-snap-type: y proximity; }
.home-cover { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; margin: 0 calc(-1 * var(--gutter)); overflow: hidden; }
.cover--full { height: 100%; margin: 0; }
.cover-art { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; }
.cover-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; pointer-events: none; -webkit-user-select: none; user-select: none; }
.cover-layer--moving { will-change: transform; }
.cover--full .cover-title, .cover--full .cover-side, .cover--full .cover-meta, .cover-cue { will-change: transform, opacity; }
.cover--full .cover-title { bottom: calc(108px + var(--safe-bottom)); font-size: clamp(92px, 31vw, 148px); }
.cover--full .cover-side { top: calc(var(--safe-top) + var(--appbar-h) + 24px); }
.cover--full .cover-meta { bottom: calc(84px + var(--safe-bottom)); }
.cover-dim { position: absolute; inset: 0; background: #0d0f0e; opacity: 0; pointer-events: none; will-change: opacity; }
.cover-cue { position: absolute; left: 50%; white-space: nowrap; bottom: calc(14px + var(--safe-bottom)); display: grid; justify-items: center; gap: 2px; min-height: 44px; padding: 4px 16px; color: var(--text); font-size: 13px; letter-spacing: 0.2em; transform: translateX(-50%); }
.home-cover-night .cover-cue { color: #f2eee4; }
.cover-cue-icon { width: 22px; height: 22px; transform: rotate(90deg); animation: cue-float 2.4s ease-in-out infinite; }
@keyframes cue-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
.home-ask { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; margin: 0 calc(-1 * var(--gutter)); padding: calc(var(--safe-top) + var(--appbar-h) + 4px) var(--gutter) 24px; border-top: 1px solid var(--rule); background: var(--bg); box-shadow: 0 -20px 44px rgba(0, 0, 0, 0.14); scroll-snap-align: start; }
.home-ask .hero { padding-top: 12px; }
/* 顶栏：压在封面上时透明；纸盖到顶后恢复底色和细线。 */
.appbar--overlay { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent !important; transition: background-color 0.25s, color 0.25s; }
.home-cover-night .appbar--overlay { color: #f2eee4; }
.home-sheet-top .appbar--overlay { background: color-mix(in srgb, var(--bg) 94%, transparent); color: var(--text); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); border-bottom-color: var(--rule) !important; }
/* 底部按钮：在封面上收起，提问页出现后滑入。 */
.home-cover-mode #dock { transition: transform 0.35s var(--ease), opacity 0.35s; }
.home-on-cover #dock { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cover-cue-icon { animation: none; } }

/* ==== 正式版接口状态：生成中、出错、付款 ==== */
.problem-card { box-shadow: inset 3px 0 0 var(--red); }
.problem-card .btn { margin-top: 12px; }
.pending-card { display: flex; align-items: center; gap: 12px; }
.pending-card .body-text { margin: 0; }
.spinner--dark { flex: none; margin: 0; color: var(--gold); }
.answer-headline.is-pending, .dv-headline.is-pending { color: var(--subtle); font-family: var(--sans); font-size: 16px; font-weight: 400; }
.msg--error { box-shadow: inset 0 0 0 1px var(--red); }
.msg--error .msg-text { color: var(--red); }
.msg--error .text-link { margin-top: 6px; }
.chat-loading { margin: 12px 0; font-size: 14px; }
.btn--danger { background: var(--red); color: #fff; }
.unlock-card .btn { margin-top: 12px; }
.list-row--method:disabled { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* ==== 整体：首屏结论、今日一句、六个方面 ==== */
.hl { padding-bottom: 8px; }
.hl-persona span { display: block; }
.hl-persona { margin: 6px 0 10px; font-family: var(--brush); font-size: clamp(32px, 10vw, 44px); font-weight: 400; line-height: 1.2; letter-spacing: 0.02em; }
.hl-summary { margin: 0 0 18px; font-size: 18px; line-height: 1.7; }
.hl-beliefs { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.hl-belief { padding: 14px 0; border-bottom: 1px solid var(--line); }
.hl-belief-index { color: var(--gold); font-family: var(--latin); font-size: 14px; font-style: italic; letter-spacing: 0.04em; }
.hl-belief-text { margin: 4px 0 6px; font-family: var(--serif); font-size: 18px; font-weight: 700; line-height: 1.6; }
.hl-belief-sources { margin: 0; color: var(--subtle); font-size: 13px; }
.today-card { margin-top: 20px; }
.today-meta { margin: 0 0 6px; color: var(--subtle); font-size: 13px; }
.today-line { margin: 0 0 12px; font-family: var(--serif); font-size: 19px; font-weight: 700; line-height: 1.6; }
.today-signals { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.today-signal { padding: 2px 8px; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 12px; line-height: 1.8; }
.today-tags { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
.today-tag b { margin-right: 6px; color: var(--red); font-weight: 700; }
.today-tag--good b { color: var(--green); }
.dim-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.dim-nav .chip { min-height: 40px; padding: 0 14px; }
.dim-section { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--safe-top) + var(--appbar-h) + 8px); }
.dim-head { display: flex; align-items: baseline; gap: 10px; }
.dim-num { color: var(--gold); font-family: var(--latin); font-size: 18px; font-style: italic; }
.dim-label { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 900; }
.dim-coverage { margin-left: auto; color: var(--subtle); font-size: 12px; }
.dim-headline { margin: 10px 0 6px; font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.55; }
.dim-reasons { margin-top: 12px; }
.dim-block { margin-top: 18px; }
.dim-block .section-label { margin: 0 0 6px; }
.method-list { border-top: 1px solid var(--line); }
.method-row { border-bottom: 1px solid var(--line); }
.method-row.is-failed { display: flex; gap: 12px; padding: 12px 0; font-size: 14px; }
.method-summary { display: flex; align-items: flex-start; gap: 10px; min-height: 52px; padding: 12px 0; list-style: none; cursor: pointer; }
.method-summary::-webkit-details-marker { display: none; }
.method-summary .icon--fold { flex: none; margin-top: 2px; }
.method-row[open] .icon--fold { transform: rotate(90deg); }
.method-main { display: grid; flex: 1; gap: 2px; min-width: 0; }
.method-main strong { font-size: 15px; font-weight: 600; line-height: 1.6; }
.method-tag { color: var(--subtle); font-size: 12px; }
.method-body { padding: 0 0 14px calc(4.6em + 10px); }
.event-comparison .method-body { padding-left: 0; }
.method-body .body-text { margin: 0 0 10px; font-size: 15px; }
.method-action { margin: 0 0 8px; font-size: 14px; line-height: 1.7; }
.method-action b { color: var(--gold); }
.qa-list { margin: 0; }
.qa-list dt { margin-top: 12px; font-weight: 700; line-height: 1.6; }
.qa-list dt::before { content: '问　'; color: var(--gold); }
.qa-list dd { margin: 4px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 15px; line-height: 1.75; }
.dim-chat { margin-top: 14px; }
@media (max-width: 360px) { .method-body { padding-left: 0; } }

/* ==== 四柱：“年柱”等标签竖排，贴在干支右侧 ==== */
.pillar, .pillar-mini { grid-template-columns: 1fr auto 1fr; grid-template-areas: "god god god" ". stem pos" ". branch pos" "hidden hidden hidden"; column-gap: 2px; }
.pillar-mini { grid-template-areas: ". stem pos" ". branch pos"; }
.pillar-god { grid-area: god; }
.pillar-char:nth-of-type(1), .pillar-mini strong:nth-of-type(1) { grid-area: stem; }
.pillar-char:nth-of-type(2), .pillar-mini strong:nth-of-type(2) { grid-area: branch; }
.pillar-hidden { grid-area: hidden; }
.pillar-pos, .pillar-mini small { grid-area: pos; justify-self: start; align-self: start; margin-top: 4px; font-family: var(--serif); font-size: 12px; line-height: 1.1; letter-spacing: 0.1em; writing-mode: vertical-rl; }