/* 青灵智语 · 公开站产品样式（从 5 份 mockup 的 <style> 抽取去重 + 补齐缺失状态）
   依赖：qingling-tokens.css（40 个上游 token 逐字 + --bad-bright）。
   抽取约定：画廊脚手架（.frame-wrap/.panel-label/frame 边框/1280px 刚性宽高/demo 缩略图/聊天面板/年表）不进本文件。 */

/* ============ 字体栈扩展 + 罗盘尺寸 ============
   tokens.css 必须与上游逐字一致（tests/test_design_tokens.py 断言），所以字体栈扩展在这里覆写：
   Songti SC / PingFang SC 是 Apple 专属，Linux/Windows/Android 上需 SimSun、思源宋体、
   微软雅黑兜底，否则「衬线承载解读、无衬线承载数据」会静默崩塌。绝不引 webfont / CDN。 */
:root {
  --font-serif: "Songti SC", "Noto Serif SC", "STSong", "SimSun", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --font-sans: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  /* 罗盘盒边长。Python 侧 COMPASS_BOX = 256 与此双写，有测试断言二者一致。
     900px 断点缩到 200px 时，Python 写入的 left/top 必须是百分比坐标，否则错位。 */
  --compass-box: 256px;
}

/* 数字一律走 sans 栈（衬线数字在命盘数据里难对齐） */
.num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* ============ 基础 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 根因级兜底：面板类（.phone-panel 等）的 display:flex 作者规则会盖过 UA 的
   [hidden]{display:none}，全站任何 hidden 元素统一靠这条保证真隐藏 */
[hidden] { display: none !important; }
body { background: var(--night-0); color: var(--ink-1); font-family: var(--font-sans); }

/* ============ 布局壳 ============ */
/* z-index:2 让 .app 成为堆叠上下文： .orn 的负 z-index 才能被关在 .app 之内
   （垫在 .app 底色之上、内容之下），而不是掉到根堆叠上下文的底色下面整层消失。
   背景改 transparent：底色由 body 的同一个 --night-0 提供（qingling.css 基础段）。
   失败模式防的是：内容容器逐个加 z-index 的补丁法漏掉 .article/.topbar/.page/
   .hero 等（它们同样是非定位在流内容），以及单独给 .orn 用 -1 而不建上下文。 */
.app { position: relative; z-index: 2; min-height: 100vh; background: transparent; display: flex; overflow: hidden; }
.app--col { flex-direction: column; }

/* —— 左侧栏（档案卡 + 导航 + 底部引导） —— */
.side { width: 232px; flex-shrink: 0; background: var(--night-1); border-right: 1px solid var(--line-1);
  display: flex; flex-direction: column; }
.side-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 8px; }
.side-logo .name { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--ink-1); }
.side-logo .seal { width: 18px; height: 18px; background: var(--gold); border-radius: 3px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-serif);
  font-size: 12px; color: var(--night-0); font-weight: 600; }
.side-profile { margin: 4px 16px 12px; padding: 12px; border-radius: 8px; background: var(--night-2);
  border: 1px solid var(--line-1); display: flex; align-items: center; gap: 10px; }
.side-profile .avatar { width: 34px; height: 34px; border-radius: 999px; background: var(--night-1);
  border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 14px; color: var(--gold-strong); font-weight: 600; flex-shrink: 0; }
.side-profile .meta { min-width: 0; }
.side-profile .name { font-size: 13px; color: var(--ink-1); font-weight: 600; }
.side-profile .gz { font-size: 12px; margin-top: 3px; color: var(--ink-2); letter-spacing: 0.5px; }
.side-profile .gz b { font-family: var(--font-serif); font-weight: 600; color: var(--wx-wood); }
.side-nav { flex: 1; padding: 4px 12px; display: flex; flex-direction: column; gap: 2px; }
.side-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 8px;
  cursor: pointer; border: 1px solid transparent; font-size: 13px; color: var(--ink-2);
  text-decoration: none; }
.side-nav-item .ico { width: 16px; text-align: center; font-family: var(--font-serif); color: var(--ink-3); }
.side-nav-item:hover { color: var(--ink-1); }
.side-nav-item.on { background: var(--gold-dim); border-color: var(--gold-deep); color: var(--gold-strong); }
.side-nav-item.on .ico { color: var(--gold-strong); }
.side-guide { padding: 14px 16px 18px; border-top: 1px solid var(--line-1); font-size: 12px;
  color: var(--ink-3); line-height: 1.7; }
.side-guide .link { color: var(--gold); cursor: pointer; }

/* —— 中间内容栏 —— */
.mid { flex: 1; min-width: 0; overflow-y: auto; padding: 48px 40px; display: flex; flex-direction: column;
  align-items: center; }
.mid-title { font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: var(--ink-1); }
.mid-sub { margin-top: 8px; font-size: 13px; color: var(--ink-2); }

/* —— 右侧盘面栏 —— */
.right { width: 300px; flex-shrink: 0; background: var(--night-1); border-left: 1px solid var(--line-1);
  padding: 20px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.chart-placeholder { border: 1px dashed var(--line-2); border-radius: 12px; padding: 32px 16px;
  text-align: center; font-size: 12px; color: var(--ink-3); line-height: 1.8; flex: 1;
  display: flex; align-items: center; justify-content: center; }
.follow-row { display: flex; align-items: center; justify-content: space-between; }
.follow-label { font-size: 12px; color: var(--ink-2); }
.toggle { width: 36px; height: 20px; border-radius: 999px; background: var(--gold); position: relative; flex-shrink: 0;
  border: none; cursor: pointer; }
.toggle .knob { width: 16px; height: 16px; border-radius: 999px; background: var(--night-0); position: absolute;
  top: 2px; right: 2px; }
.follow-note { font-size: 12px; color: var(--ink-3); line-height: 1.7; }

/* —— 顶栏 —— */
.topbar { height: 56px; flex-shrink: 0; background: var(--night-1); border-bottom: 1px solid var(--line-1);
  display: flex; align-items: center; padding: 0 24px; gap: 14px; }
.topbar .back { font-size: 13px; color: var(--ink-2); cursor: pointer; text-decoration: none; }
.topbar .back:hover { color: var(--ink-1); }
.topbar .title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--ink-1); }
.topbar .meta { font-size: 12px; color: var(--ink-3); }
.topbar .spacer { flex: 1; }
.btn-ghost-xs { height: 30px; padding: 0 14px; border-radius: 8px; background: transparent;
  color: var(--gold); border: 1px solid var(--gold-deep); font-size: 12px; display: flex; align-items: center;
  cursor: pointer; }

/* —— 落地页顶部导航 —— */
.nav { height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; border-bottom: 1px solid var(--line-1); position: sticky; top: 0;
  background: rgba(18,16,13,0.9); z-index: 5; }
.nav-left { display: flex; align-items: center; gap: 10px; }
.nav-seal { width: 26px; height: 26px; background: var(--gold); border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-serif);
  font-size: 14px; color: var(--night-0); font-weight: 600; }
.nav-name { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--ink-1); letter-spacing: 1px; }
.nav-mid { display: flex; align-items: center; gap: 36px; }
.nav-link { font-size: 13px; color: var(--ink-2); cursor: pointer; text-decoration: none; }
.nav-link:hover { color: var(--ink-1); }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-login { font-size: 13px; color: var(--ink-2); cursor: pointer; text-decoration: none; }
.nav-login:hover { color: var(--ink-1); }
.btn-nav-cta { height: 36px; padding: 0 20px; border-radius: 8px; background: var(--gold); color: var(--night-0);
  font-size: 13px; font-weight: 600; letter-spacing: 1px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* ============ Hero（落地页） ============ */
.hero { position: relative; padding: 88px 40px 96px; display: flex; flex-direction: column;
  align-items: center; text-align: center; overflow: hidden; }
.hero-light { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 820px; height: 520px;
  pointer-events: none; z-index: 2; mix-blend-mode: screen; opacity: 0;
  background:
    radial-gradient(ellipse 200px 150px at 50% 44%, rgba(220,195,137,0.42) 0%, transparent 62%),
    radial-gradient(ellipse at center, rgba(201,169,98,0.30) 0%, rgba(201,169,98,0.11) 45%, transparent 72%);
  animation: hero-light-cycle 6s ease-in-out 0.4s infinite; }
.hero-gz {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-serif); font-size: 168px; font-weight: 600; letter-spacing: 28px;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, rgba(201,169,98,0.16), rgba(201,169,98,0.02));
  white-space: nowrap; pointer-events: none; user-select: none; line-height: 1;
  animation: hero-gz-float 7.5s ease-in-out infinite alternate, hero-gz-kindle 6s ease-in-out 0.4s infinite;
}
@keyframes hero-gz-float {
  from { transform: translateX(-50%) translateY(-6px); }
  to { transform: translateX(-50%) translateY(7px); }
}
@keyframes hero-light-cycle {
  0%   { opacity: 0;  transform: translateX(-50%) scale(0.7); }
  45%  { opacity: 1;  transform: translateX(-50%) scale(1.05); }
  55%  { opacity: 1;  transform: translateX(-50%) scale(1); }
  100% { opacity: 0;  transform: translateX(-50%) scale(0.75); }
}
@keyframes hero-gz-kindle {
  0%   { opacity: 0.35; }
  45%  { opacity: 1; }
  100% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) { .hero-gz { animation: none; } }
@media (prefers-reduced-motion: reduce) { .hero-light { animation: none; opacity: 0.85; } }
.hero-kicker { position: relative; font-size: 12px; letter-spacing: 5px; color: var(--gold); margin-bottom: 22px; }
.hero-title { position: relative; font-family: var(--font-serif); font-size: 52px; font-weight: 600;
  color: var(--ink-1); line-height: 1.35; }
.hero-title .gold { color: var(--gold-strong); }
.hero-sub { position: relative; margin-top: 20px; font-size: 15px; color: var(--ink-2); letter-spacing: 1px; }
.hero-sub .dot { color: var(--ink-3); margin: 0 10px; }
.hero-cta-row { position: relative; margin-top: 40px; display: flex; align-items: center; gap: 16px; }
.btn-hero-primary { height: 50px; padding: 0 32px; border-radius: 8px; background: var(--gold); color: var(--night-0);
  font-size: 15px; font-weight: 600; letter-spacing: 2px; border: none; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; }
.btn-hero-ghost { height: 50px; padding: 0 28px; border-radius: 8px; background: transparent; color: var(--ink-1);
  border: 1px solid var(--line-2); font-size: 14px; letter-spacing: 1px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; }
.hero-note { position: relative; margin-top: 18px; font-size: 12px; color: var(--ink-3); }

/* ============ 通用 section 容器 ============ */
.section { padding: 72px 40px; border-top: 1px solid var(--line-1); }
.section-inner { max-width: 1120px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 44px; }
.section-kicker { font-size: 12px; letter-spacing: 4px; color: var(--gold); margin-bottom: 12px; }
.section-title { font-family: var(--font-serif); font-size: 30px; font-weight: 600; color: var(--ink-1); }
.section-sub { margin-top: 12px; font-size: 14px; color: var(--ink-2); }

/* —— 差异区三卡 —— */
.diff-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.diff-card { background: var(--night-1); border: 1px solid var(--line-1); border-radius: 12px; padding: 28px 24px; }
.diff-step { font-family: var(--font-serif); font-size: 12px; color: var(--gold); border: 1px solid var(--gold-deep);
  border-radius: 3px; padding: 1px 8px; display: inline-block; margin-bottom: 16px; }
.diff-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink-1); margin-bottom: 10px; }
.diff-desc { font-size: 13px; color: var(--ink-2); line-height: 1.8; }
/* 「全真道长」右上角金色徽章（飞书需求 A-9）；字号下限 12px 与全站规则一致 */
.gz-badge { color: #d4af37; font-size: 12px; margin-left: 1px; line-height: 1; }
.diff-flow { margin-top: 44px; display: flex; align-items: center; justify-content: center; gap: 0; }
.flow-node { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.flow-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--gold-dim); border: 1px solid var(--gold-deep); }
.flow-dot.hi { background: var(--gold); }
.flow-label { font-size: 12px; color: var(--ink-2); }
.flow-line { width: 88px; height: 1px; background: var(--line-2); margin: 0 -1px 24px; }

/* —— 报告样例区 —— */
.rpt-sample { display: flex; gap: 32px; align-items: stretch; }
.rpt-sample-left { flex: 1; }
.chap-list { display: flex; flex-direction: column; gap: 10px; }
.chap-list-item { display: flex; align-items: center; gap: 14px; background: var(--night-1);
  border: 1px solid var(--line-1); border-radius: 10px; padding: 14px 18px; }
.chap-list-no { font-family: var(--font-serif); font-size: 13px; color: var(--gold); border: 1px solid var(--gold-deep);
  border-radius: 3px; padding: 1px 8px; flex-shrink: 0; }
.chap-list-name { font-family: var(--font-serif); font-size: 14px; color: var(--ink-1); flex-shrink: 0; width: 120px; }
.chap-list-desc { font-size: 12px; color: var(--ink-2); }
/* 波 12：章伍「免费试读」徽章与列表脚注（落地页口径对齐波 11） */
.chap-free-chip { margin-left: auto; flex: none; font-size: 12px; color: var(--gold);
  border: 1px solid var(--gold-deep); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.chap-list-note { margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.rpt-sample-right { width: 320px; flex-shrink: 0; background: var(--night-1); border: 1px solid var(--gold-deep);
  border-radius: 12px; padding: 28px 24px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px; }
.rpt-price-badge { font-family: var(--font-serif); font-size: 13px; color: var(--gold-strong); letter-spacing: 2px; }
.rpt-price-num { font-size: 34px; font-weight: 700; color: var(--gold-strong); }
.rpt-price-desc { font-size: 12px; color: var(--ink-2); line-height: 1.8; }
.btn-gold-block { width: 100%; height: 44px; border-radius: 8px; background: var(--gold); color: var(--night-0);
  font-size: 14px; font-weight: 600; letter-spacing: 2px; border: none; cursor: pointer; margin-top: 4px; }

/* ============ FAQ（落地页 / 定价页共用一套） ============ */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; }
.faq-block { margin-bottom: 24px; }
.faq-item { border-bottom: 1px solid var(--line-1); padding: 18px 4px; display: flex;
  align-items: center; justify-content: space-between; }
.faq-q { display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  font-size: 13px; color: var(--ink-1); }
.faq-q-text { font-family: var(--font-serif); font-size: 15px; color: var(--ink-1); font-weight: 600; }
.faq-arrow { font-size: 12px; color: var(--gold); }
.faq-a { margin-top: 12px; font-size: 13px; color: var(--ink-2); line-height: 1.85; }

/* —— 底部大 CTA —— */
.cta-final { text-align: center; padding: 80px 40px; border-top: 1px solid var(--line-1); position: relative;
  overflow: hidden; }
.cta-final-glow { position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 700px; height: 400px;
  background: radial-gradient(ellipse at center, rgba(201,169,98,0.14) 0%, transparent 70%); pointer-events: none; }
.cta-final-title { position: relative; font-family: var(--font-serif); font-size: 28px; font-weight: 600;
  color: var(--ink-1); }
.cta-final-sub { position: relative; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.cta-final .btn-hero-primary { position: relative; margin-top: 30px; }

/* —— 页脚 —— */
.foot { padding: 32px 40px 28px; border-top: 1px solid var(--line-1); display: flex; flex-direction: column; gap: 16px; }
.foot-links { display: flex; justify-content: center; gap: 24px; font-size: 12px; color: var(--ink-2); }
.foot-links a { color: var(--ink-2); text-decoration: underline; }
.foot-meta { text-align: center; font-size: 12px; color: var(--ink-3); line-height: 1.8; }
.foot-disclaimer { text-align: center; font-size: 12px; color: var(--ink-2); line-height: 1.8; max-width: 640px;
  margin: 0 auto; }

/* ============ 登录 / 认证 ============ */
.auth-bg-glow { position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 900px; height: 560px;
  background: radial-gradient(ellipse at center, rgba(201,169,98,0.12) 0%, transparent 70%); pointer-events: none; }
.auth-bg-brand { position: absolute; top: 40px; left: 48px; display: flex; align-items: center; gap: 10px; }
.auth-card { position: relative; width: 420px; max-width: calc(100vw - 48px); background: var(--night-1);
  border: 1px solid var(--line-1); border-radius: 12px; padding: 36px 36px 30px; display: flex;
  flex-direction: column; align-items: center; }
.auth-title { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--ink-1); }
.auth-sub { margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.auth-tabs { margin-top: 26px; display: flex; border: 1px solid var(--line-2); border-radius: 8px;
  overflow: hidden; width: 100%; }
.auth-tab { flex: 1; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 13px;
  color: var(--ink-2); cursor: pointer; text-decoration: none; }
.auth-tab.on { background: var(--gold); color: var(--night-0); font-weight: 600; }
.phone-panel { margin-top: 22px; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.code-row { display: flex; gap: 10px; }
.code-row .text-input { flex: 1; }
/* 波 10 登录验证码行：覆盖上方旧 .code-row 间隙，对齐输入框底边 */
.code-row { display: flex; gap: 8px; align-items: flex-end; }
.btn-send { height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 6px;
  background: transparent; color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.btn-code { flex-shrink: 0; width: 108px; height: 42px; border-radius: 8px; background: transparent;
  color: var(--gold); border: 1px solid var(--gold-deep); font-size: 12px; letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-code:disabled { opacity: 0.45; cursor: not-allowed; }
.auth-switch { margin-top: 20px; font-size: 12px; color: var(--ink-2); }
.auth-switch .gold { color: var(--gold); cursor: pointer; }
/* 登录方式 Tab 行（参考腾讯云登录页）：激活金色文字+2px 下划线，非激活灰陶色 */
.login-tabs { display: flex; gap: 28px; width: 100%; margin-top: 20px; border-bottom: 1px solid var(--line-1); }
.login-tab { font-family: var(--font-sans); font-size: 13px; color: var(--ink-3); background: none;
  border: none; border-bottom: 2px solid transparent; padding: 0 2px 10px; cursor: pointer;
  letter-spacing: 1px; }
.login-tab:hover { color: var(--ink-2); }
.login-tab.on { color: var(--gold); border-bottom-color: var(--gold); }
.login-tab:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 2px; }
.panel-note { font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.auth-card .check-row { width: 100%; }
.auth-divider { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 20px; }
.auth-divider .line { flex: 1; height: 1px; background: var(--line-1); }
.auth-divider .txt { font-size: 12px; color: var(--ink-3); }
.one-owner-note { margin-top: 16px; width: 100%; background: var(--night-2); border: 1px solid var(--line-1);
  border-radius: 8px; padding: 10px 14px; font-size: 12px; color: var(--ink-2); line-height: 1.7; text-align: center; }
.ai-disclaimer-auth { margin-top: 14px; font-size: 12px; color: var(--ink-2); text-align: center; line-height: 1.7; }

/* ============ 语义化表单（mockup 全是 <div> + 手工 .on，这里重建为真控件） ============ */
.field-label { font-size: 12px; color: var(--ink-2); margin-bottom: 8px; letter-spacing: 1px; display: block; }
.form-card { margin-top: 28px; width: 100%; max-width: 560px; background: var(--night-1);
  border: 1px solid var(--line-1); border-radius: 12px; padding: 24px; display: flex; flex-direction: column;
  gap: 18px; }
.form-row { display: flex; gap: 10px; }
.form-note { font-size: 12px; color: var(--ink-2); text-align: center; }

/* —— 文本输入（落在真 <input> 上） —— */
.text-input { height: 40px; border-radius: 8px; background: var(--night-2); border: 1px solid var(--line-1);
  padding: 0 12px; font-size: 13px; color: var(--ink-1); font-family: var(--font-sans); width: 100%; }
.text-input::placeholder { color: var(--ink-3); }
.text-input:hover { border-color: var(--line-2); }
.text-input:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 0; border-color: var(--gold-deep); }
.text-input:disabled, .text-input.is-off { opacity: 0.45; cursor: not-allowed; }

/* —— 下拉（真 <select>，自绘箭头，替换 <div class="select-ph">） —— */
.select { appearance: none; -webkit-appearance: none; height: 40px; border-radius: 8px;
  background: var(--night-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a7161' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--line-1); padding: 0 32px 0 12px; font-size: 13px; color: var(--ink-1);
  font-family: var(--font-sans); width: 100%; cursor: pointer; }
.select:hover { border-color: var(--line-2); }
.select:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 0; border-color: var(--gold-deep); }
.select:disabled { opacity: 0.45; cursor: not-allowed; }

/* —— 分段控件（<fieldset class="seg"> + 隐藏 radio + <label class="seg-item">） —— */
.seg { display: flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden;
  min-inline-size: 0; }
.seg-in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-item { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  font-size: 13px; color: var(--ink-2); cursor: pointer; }
.seg-in:checked + .seg-item { background: var(--gold); color: var(--night-0); font-weight: 600; }
.seg-in:focus-visible + .seg-item { outline: 2px solid var(--gold-strong); outline-offset: -2px; }

/* —— 时辰格（<input type="radio" name="branch"> + <label class="sc-item">） —— */
.shichen-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.sc-in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sc-item { min-height: 44px; border-radius: 8px; background: var(--night-2); border: 1px solid var(--line-1);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 13px;
  color: var(--ink-2); cursor: pointer; }
.sc-item:hover { border-color: var(--line-2); }
.sc-in:checked + .sc-item { background: var(--gold-dim); border-color: var(--gold-deep); color: var(--gold-strong);
  font-weight: 600; }
.sc-in:focus-visible + .sc-item { outline: 2px solid var(--gold-strong); outline-offset: 1px; }

/* —— 复选框（✓ 由 :checked 显示，替换写死的 <div class="checkbox">✓</div>） —— */
.checkbox { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 3px;
  border: 1px solid var(--gold-deep); background: var(--night-2); flex-shrink: 0; cursor: pointer;
  vertical-align: middle; }
.checkbox:checked { background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l3 3 5-6' stroke='%2312100d' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; }
.checkbox:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 2px; }
.checkbox:disabled { opacity: 0.45; cursor: not-allowed; }
.check-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; }
.check-row .clabel { font-size: 13px; color: var(--ink-1); line-height: 1.7; }
.check-row .clabel .link { color: var(--gold); text-decoration: underline; }
.check-row .cnote { font-size: 12px; color: var(--ink-3); margin-left: 4px; }

/* —— 三态显隐：原生 :has()，零 JS（Baseline 2023：Chrome 105+ / Safari 15.4+ / FF 121+）。
   #ts-clock / #ts-branch / #ts-unknown 是 time_source 三态 radio；
   #br-zi 是 name="branch" value="子" 的 radio → 选中「子」时早/晚子时追问自动出现。
   #ts-unknown:checked 时三行全隐（基础规则本就是 display:none）。 —— */
.clock-row, .branch-row, .zi-row, .place-row { display:none }
form:has(#ts-clock:checked)                              .clock-row  { display:flex }
/* ★ .place-row 的两个触发器必须各写成一个完整选择器。曾经写成
   `form:has(#ts-clock:checked), form:has(#ts-branch:checked) .place-row`——逗号把它劈成两个
   选择器：前一个匹配的是 **form 本身**（特异性 (1,1,1) 压过 .form-card 的 (0,1,0)，把主路径
   上的 flex 布局覆盖成 block），后一个只覆盖 branch 路径，于是**精确钟点这条主路径下
   .place-row 一直 display:none**：出生地看不见 → 表单不提交 birth_place → 真太阳时校正
   永不发生。335 条经度表与跨日改日柱的全部工作会在这一个逗号上静默归零。
   渲染冒烟 grep 类名只能证明模板用了它，证明不了 CSS 让它可见。 */
form:has(#ts-clock:checked) .place-row,
form:has(#ts-branch:checked) .place-row { display: block; }
form:has(#ts-branch:checked)                             .branch-row { display:grid }
form:has(#ts-branch:checked):has(#br-zi:checked)         .zi-row     { display:flex }
.clock-row { gap: 10px; }
.branch-row { grid-template-columns: repeat(6, 1fr); gap: 8px; }
.zi-row { gap: 10px; }

/* —— 按钮 —— */
.btn-primary-full { height: 44px; border-radius: 8px; background: var(--gold); color: var(--night-0);
  font-size: 15px; font-weight: 600; letter-spacing: 3px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; width: 100%; }
.btn-primary-wide { width: 100%; max-width: 920px; height: 46px; border-radius: 8px; background: var(--gold);
  color: var(--night-0); font-size: 15px; font-weight: 600; letter-spacing: 3px; border: none; cursor: pointer; }
.btn-primary-modal { width: 100%; height: 46px; border-radius: 8px; background: var(--gold); color: var(--night-0);
  font-size: 15px; font-weight: 600; letter-spacing: 2px; border: none; cursor: pointer; }
.btn-plain { flex: 1; height: 40px; border-radius: 8px; background: var(--night-2); color: var(--ink-2);
  border: none; font-size: 13px; letter-spacing: 1px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; }
.btn-plain:hover { color: var(--ink-1); }
.btn-gold-sm { flex: 1; height: 40px; border-radius: 8px; background: var(--gold); color: var(--night-0);
  border: none; font-size: 13px; font-weight: 600; letter-spacing: 1px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; }

/* ============ 推理步骤：五态（硬约束：排队/生成中/校验中/完成/失败） ============ */
.step-card { background: var(--night-1); border: 1px solid var(--line-1); border-radius: 12px; padding: 16px 20px; }
.step-row { display: flex; gap: 8px; }
.step { flex: 1; text-align: center; }
.step-label { font-size: 12px; color: var(--ink-2); }
.step-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; margin-left: 4px;
  background: var(--ink-3); }
/* 排队：空心点，无动画 */
.step.queued .step-label { color: var(--ink-3); }
.step.queued .step-dot { background: transparent; border: 1px solid var(--ink-3); }
/* 生成中：鎏金呼吸 */
.step.active .step-label { color: var(--gold-strong); }
.step.active .step-dot { background: var(--gold-strong); animation: breathe 1.4s ease-in-out infinite; }
/* 校验中：比 active 快一倍，区分「在算」与「在核」 */
.step.checking .step-label { color: var(--ink-1); }
.step.checking .step-dot { background: var(--ink-1); animation: breathe 0.7s ease-in-out infinite; }
/* 完成 */
.step.done .step-label { color: var(--ok); }
.step.done .step-dot { background: var(--ok); animation: none; }
/* 失败：亮版失败色，实心点，无动画 */
.step.failed .step-label { color: var(--bad-bright); }
.step.failed .step-dot { background: var(--bad-bright); border: none; animation: none; }
@keyframes breathe { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }
.step-time { margin-top: 6px; font-size: 12px; color: var(--ink-3); }

/* —— 失败子卡 —— */
.step-card.failed { border-color: var(--bad-bright); }
.retry-note { font-size: 12px; color: var(--bad-bright); margin-top: 10px; line-height: 1.7; text-align: center; }
.warn-note { font-size: 12px; color: var(--warn); margin-top: 10px; line-height: 1.7; text-align: center; }

/* —— 校验明细展开卡 —— */
.expand-card { width: 640px; max-width: 100%; background: var(--night-1); border: 1px solid var(--line-1);
  border-radius: 12px; padding: 28px; }
.expand-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.expand-title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--gold-strong); }
.expand-time { font-size: 12px; color: var(--ink-3); }
.sub-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.sub-item { display: flex; align-items: center; justify-content: space-between; background: var(--night-2);
  border: 1px solid var(--line-1); border-radius: 8px; padding: 12px 16px; }
.sub-item .name { font-size: 13px; color: var(--ink-1); }
.sub-item .check { font-size: 12px; color: var(--ok); }
.expand-note { font-size: 12px; color: var(--ink-3); text-align: center; }

/* ============ 正文（报告 / 解读） ============ */
.prose-wrap { width: 100%; max-width: 720px; }
.chap-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.chap-no { font-family: var(--font-serif); font-size: 13px; color: var(--gold);
  border: 1px solid var(--gold-deep); border-radius: 3px; padding: 1px 7px; }
.chap-title { font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--ink-1); }
/* 02 的 14px/1.9 与 03 的 15px/1.95 合并：正文以报告阅读面（03）为准 */
.prose { font-family: var(--font-serif); font-size: 15px; line-height: 1.95; color: var(--ink-1); }
.prose p { margin-bottom: 14px; text-align: justify; position: relative; }
.term { color: var(--gold); border-bottom: 1px dashed var(--gold-deep); cursor: pointer; }
.prose .hl { color: var(--gold-strong); }

/* —— 章内小结卡 —— */
.mini { background: var(--night-1); border: 1px solid var(--line-1); border-radius: 8px;
  padding: 14px 16px; margin: 4px 0 20px; }
.mini .t { font-size: 12px; color: var(--gold-strong); letter-spacing: 2px; margin-bottom: 6px; }
.mini .d { font-family: var(--font-serif); font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.mini .d + .d { margin-top: 6px; }   /* 波 9：要点逐条分行后多条 .d 直连需间距 */

/* —— 流年年份卡（波 9b：分年度正文独立成块，替代波 9 点击跳转）—— */
.fy { background: var(--night-1); border: 1px solid var(--line-1); border-radius: 8px;
  padding: 14px 16px; margin: 14px 0; }
.fy-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-serif);
  font-size: 14px; color: var(--gold-strong); margin-bottom: 8px; }
.fy p { margin: 0; }

/* —— AI 标识（合规：≥12px、--ink-2、不可折叠） —— */
.ai-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.7;
  color: var(--ink-2); margin-top: 14px; }
.ai-note .ai { color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 3px; padding: 0 4px;
  flex-shrink: 0; font-size: 12px; margin-top: 2px; }
.rpt-foot { padding-top: 16px; border-top: 1px solid var(--line-1); text-align: center;
  font-size: 12px; color: var(--ink-2); line-height: 1.8; margin-top: 12px; }
.rpt-foot .link { color: var(--ink-2); text-decoration: underline; }

/* —— 报告目录 —— */
.body-row { flex: 1; display: flex; min-height: 0; }
.toc { width: 216px; flex-shrink: 0; background: var(--night-0); border-right: 1px solid var(--line-1);
  padding: 20px 12px; overflow-y: auto; }
.toc-item { padding: 10px 12px; border-radius: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer;
  margin-bottom: 4px; border-left: 2px solid transparent; display: block; text-decoration: none; }
.toc-item:hover { color: var(--ink-1); }
.toc-item.on { background: var(--gold-dim); color: var(--gold-strong); border-left-color: var(--gold-deep); }
.article { flex: 1; min-width: 0; overflow-y: auto; display: flex; justify-content: center; padding: 32px 40px; }

/* —— 术语浮层 —— */
.term-mask { position: absolute; inset: 0; background: var(--mask); z-index: 10;
  display: flex; align-items: center; justify-content: center; }
.term-modal { width: 420px; max-width: calc(100vw - 48px); background: var(--night-3); border-radius: 12px;
  box-shadow: var(--shadow-pop); padding: 24px 26px; }
.tm-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--gold-strong);
  margin-bottom: 12px; }
.tm-body { font-family: var(--font-serif); font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.tm-close { margin-top: 18px; height: 42px; border-radius: 8px; background: var(--night-2);
  color: var(--ink-1); font-size: 14px; letter-spacing: 2px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; border: none; width: 100%; }

/* ============ 右栏盘面：四柱迷你卡 + 大运 ============ */
.rt-title { font-family: var(--font-serif); font-size: 13px; font-weight: 600; color: var(--ink-1); margin-bottom: 4px; }
.pillars-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pm { background: var(--night-2); border: 1px solid var(--line-1); border-radius: 8px; padding: 10px 4px 9px;
  text-align: center; }
.pm .cn { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; letter-spacing: 1px; }
.pm .gz { font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.3; }
.pm .ss { font-size: 12px; color: var(--gold); margin-top: 5px; }
.pm .hidden { font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }
.pm .ny { font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.pm.hi { border-color: var(--gold-deep); background: linear-gradient(180deg, var(--gold-dim), var(--night-2) 70%);
  position: relative; }
.pm.hi::after { content: ''; position: absolute; top: -4px; right: -4px; width: 8px; height: 8px;
  border-radius: 999px; background: var(--gold); border: 1px solid var(--night-1); }
.pm.hi .cn { color: var(--gold-strong); }
.pm.hi .ss { color: var(--gold-strong); font-weight: 600; }
.dy-mini { display: flex; gap: 6px; overflow-x: auto; }
.dy-item { flex-shrink: 0; text-align: center; min-width: 44px; padding: 6px 4px; border-radius: 8px;
  border: 1px solid transparent; background: var(--night-2); }
.dy-item .age { font-size: 12px; color: var(--ink-3); }
.dy-item .gz { font-family: var(--font-serif); font-size: 13px; font-weight: 600; margin: 3px 0; }
.dy-item.cur { border-color: var(--gold-deep); background: var(--gold-dim); }
.dy-item.cur .age { color: var(--gold-strong); }

/* —— 付费墙锁态：明文由服务端裁剪（不裁的字段不进 DOM），这里只画锁形与提示，绝不 blur —— */
.dy-item.locked { position: relative; border-style: dashed; border-color: var(--line-1); }
.dy-item.locked .gz { color: var(--ink-3); }
.dy-item.locked .age { color: var(--ink-3); }
.dy-item.locked .lock-badge { width: 14px; height: 12px; margin: 3px auto 0; position: relative; }
.dy-item.locked .lock-badge::before { content: ''; position: absolute; bottom: 0; left: 2px; width: 10px; height: 7px;
  border-radius: 2px; background: var(--night-1); border: 1px solid var(--ink-3); }
.dy-item.locked .lock-badge::after { content: ''; position: absolute; top: 0; left: 4px; width: 6px; height: 6px;
  border: 1px solid var(--ink-3); border-bottom: none; border-radius: 6px 6px 0 0; }
.dy-item.locked .lk-note { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.locked-body { background: var(--night-2); border: 1px dashed var(--line-2); border-radius: 8px;
  padding: 16px; font-size: 13px; color: var(--ink-2); text-align: center; letter-spacing: 1px;
  line-height: 1.8; margin: 4px 0 20px; }

/* ============ 迷你罗盘（命盘主视觉） ============
   .mc-zhi/.mc-gan 的负 margin 是坐标契约：Python 把极坐标算成「中心点」写进
   style="left:…;top:…"，负 margin 把盒中心对齐到该点——margin 一改全盘错位。 */
.mini-compass { width: var(--compass-box); height: var(--compass-box); position: relative; margin: 0 auto;
  flex-shrink: 0; }
.mc-ring { position: absolute; border: 1px solid var(--line-1); border-radius: 999px; }
.mc-ring-outer { inset: 16px; border-color: var(--line-2); }
.mc-ring-mid { inset: 46px; }

.mc-zhi { position: absolute; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  font-family: var(--font-serif); font-size: 12px; color: var(--ink-3);
  background: var(--night-0); border: 1px solid var(--line-1); }
.mc-zhi.hi { font-size: 12px; font-weight: 600; color: var(--night-0); border: 1px solid var(--gold-strong);
  box-shadow: inset 0 0 0 1px rgba(18,16,13,0.2); }
.mc-zhi.hi.wx-wood { background: var(--wx-wood); }
.mc-zhi.hi.wx-fire { background: var(--wx-fire); }
.mc-zhi.hi.wx-earth { background: var(--wx-earth); }
.mc-zhi.hi.wx-water { background: var(--wx-water); }

.mc-gan { position: absolute; width: 34px; height: 34px; margin-left: -17px; margin-top: -17px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mc-gan .ch { font-family: var(--font-serif); font-size: 17px; font-weight: 600; line-height: 1; }
.mc-gan .lb { font-size: 12px; color: var(--ink-3); margin-top: 2px; letter-spacing: 1px; }

.mc-core { position: absolute; top: 50%; left: 50%; width: 92px; height: 92px;
  transform: translate(-50%, -50%); border-radius: 999px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.mc-core-glow { position: absolute; inset: -12px; border-radius: 999px;
  background: radial-gradient(circle, rgba(201,169,98,0.35) 0%, rgba(201,169,98,0.12) 45%, transparent 72%);
  animation: mc-core-breathe 7s ease-in-out infinite; }
@keyframes mc-core-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.mc-core-ch { position: relative; font-family: var(--font-serif); font-size: 42px; font-weight: 600;
  line-height: 1; background: linear-gradient(180deg, var(--gold-strong), var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.mc-core-sub { position: relative; margin-top: 4px; font-size: 12px; color: var(--ink-2); letter-spacing: 1px; }

/* —— 右栏 · 出身 / 神煞 / 胎元命宫空亡卡 —— */
.rt-card { background: var(--night-2); border: 1px solid var(--line-1); border-radius: 8px; padding: 10px 12px; }
.rt-card .rt-title { margin-bottom: 8px; }
.rt-origin { font-size: 12px; color: var(--ink-2); line-height: 1.6; }
.rt-origin b { font-family: var(--font-serif); font-weight: 600; color: var(--ink-1); }
.rt-shen-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-shen-chip { height: 22px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--gold-deep);
  background: var(--gold-dim); color: var(--gold-strong); font-size: 12px; display: flex; align-items: center; }
.rt-tri-table { display: flex; flex-direction: column; gap: 6px; }
.rt-tri-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; }
.rt-tri-row .k { color: var(--ink-3); }
.rt-tri-row .v { font-family: var(--font-serif); font-weight: 600; color: var(--ink-1); letter-spacing: 1px; }

/* ============ 定价页 ============ */
.page { flex: 1; overflow-y: auto; display: flex; justify-content: center; padding: 40px 24px 24px; }
.page-inner { width: 100%; max-width: 920px; }
.head-block { text-align: center; margin-bottom: 36px; }
.head-title { font-family: var(--font-serif); font-size: 26px; font-weight: 600; color: var(--ink-1); }
.head-title .gold { color: var(--gold-strong); }
.head-sub { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.perk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.perk-card { background: var(--night-1); border: 1px solid var(--line-1); border-radius: 12px; padding: 20px; }
.perk-title { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--ink-1);
  margin-bottom: 8px; }
.perk-title .mark { color: var(--gold); margin-right: 4px; }
.perk-desc { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.price-card { background: var(--night-1); border: 1px solid var(--gold-deep); border-radius: 12px;
  padding: 28px 32px; display: flex; align-items: center; gap: 40px; margin-bottom: 24px; }
.price-left { flex-shrink: 0; }
.price-now { font-size: 40px; font-weight: 700; color: var(--gold-strong); }
.price-old { font-size: 14px; color: var(--ink-3); text-decoration: line-through; margin-top: 4px; }
.price-divider { width: 1px; align-self: stretch; background: var(--line-1); }
.price-list { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.price-list .pl-item { font-size: 13px; color: var(--ink-1); }
.price-list .pl-item span { color: var(--gold); margin-right: 6px; }

/* —— 支付方式（与 seg 同一套隐藏 radio + 相邻 label 模式，键盘可达） —— */
.pay-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
.pay-in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pay-card { background: var(--night-1); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 16px 20px; display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; }
.pay-card:hover { border-color: var(--gold-deep); }
.pay-in:checked + .pay-card { border-color: var(--gold); }
.pay-radio { width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--line-2); flex-shrink: 0; }
.pay-in:checked + .pay-card .pay-radio { border-color: var(--gold); background: var(--gold-dim); position: relative; }
.pay-in:checked + .pay-card .pay-radio::after { content: ''; position: absolute; inset: 4px; border-radius: 999px;
  background: var(--gold); }
.pay-in:focus-visible + .pay-card { outline: 2px solid var(--gold-strong); outline-offset: 2px; }
.pay-name { font-size: 14px; color: var(--ink-1); }
.buy-bar { flex-shrink: 0; padding: 16px 24px; background: var(--night-1); border-top: 1px solid var(--line-1);
  display: flex; justify-content: center; }
.foot-block { text-align: center; font-size: 12px; color: var(--ink-2); line-height: 1.8; padding-top: 8px; }
.foot-block .link { color: var(--ink-2); text-decoration: underline; }

/* ============ 弹窗（01 删除确认 / 03 术语 / 04 支付，合并去重） ============ */
.modal-mask { position: absolute; inset: 0; background: var(--mask); z-index: 10; display: flex;
  align-items: center; justify-content: center; }
.modal { width: 480px; max-width: calc(100vw - 48px); max-height: 700px; overflow-y: auto; background: var(--night-3);
  border-radius: 12px; box-shadow: var(--shadow-pop); padding: 28px; display: flex; flex-direction: column;
  gap: 18px; }
.modal-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink-1); }
.modal-gz { font-family: var(--font-serif); font-size: 13px; letter-spacing: 2px; }
.modal-btns { display: flex; gap: 10px; margin-top: 4px; }
.modal-note { margin-top: 14px; font-size: 12px; color: var(--ink-2); text-align: center; line-height: 1.7; }
.amount-list { display: flex; flex-direction: column; gap: 10px; padding: 16px 0;
  border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); margin-bottom: 20px; }
.amount-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }
.amount-row.total { font-size: 15px; color: var(--ink-1); font-weight: 600; }
.amount-row.total .v { color: var(--gold-strong); font-size: 18px; }

/* ============ 动态背景纹饰层 · .orn（墨雾视频，决策 9 原样接） ============
   层叠契约：.orn 必须是负 z-index。曾是 z-index:1——正 z-index 的定位元素按
   绘制顺序画在**所有非定位在流内容之上**，墨雾视频不是「背景太亮」，是盖在
   文字上面（pointer-events:none 只放行点击，不放行视觉），用户实测「文字看不清」。
   配套前提（拆一即塌）：.orn 由各页 shell 在 .app 内 include（templates/_pub_orn.html，
   全站唯一一份），靠 .app 的 position:relative + z-index:2 建堆叠上下文，且
   .app 底色透明、由 body 的 --night-0 提供底——所以 body 基础段的
   background 不许挪到 html 上（html 一旦有背景，body 底色不再传播到画布，
   body 盒自己的背景会画在负 z-index 的 .orn 之上，视频整层消失）。 */
.orn { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
/* 主层：黑底墨雾慢漂（Pexels 9694807，免费商用） */
/* 0.18：层叠修复前视频盖在字上，0.24 的标定已失效；对齐到登录/落地页此前
   人工校过可读的压暗档（原压暗覆盖在基线压到同值后成无操作，死代码已随
   层叠修复一并清掉）。再压会违背决策 9（视频是品牌主视觉，
   压到不可见等于删掉它）。 */
.orn-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.18;
  filter: sepia(0.4) saturate(0.75) brightness(0.92);
}
/* 叠层：鎏金光尘（Pexels 34645311），随基线对齐 */
.orn-golddust {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.07;
}
/* 宣纸颗粒（静态，不参与任何动画） */
.orn-grain {
  position: absolute; inset: -10%; width: 120%; height: 120%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 180px 180px;
  opacity: 0.025; mix-blend-mode: overlay;
}
/* 底部收边：静态柔和渐变，收敛视频边缘 */
.orn-footfade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(to bottom, transparent, rgba(10,9,7,0.5));
}
@media (prefers-reduced-motion: reduce) { .orn video { display: none; } }

/* ============ 降级动效门控（共 7 处 @media 块，缺一不可） ============ */
@media (prefers-reduced-motion: reduce) { .mc-core-glow { animation: none; } }
@media (prefers-reduced-motion: reduce) { .step-dot { animation: none; opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============ 响应式（mockup 零视口断点，本轮只补这一个，不做完整重排） ============ */
@media (max-width:900px) {
  :root { --compass-box: 200px; }  /* 注意：Python 侧 left/top 须为百分比坐标，否则 200px 盒错位 */
  .app { flex-direction: column; }
  .side { width: 100%; flex-direction: row; align-items: center; border-right: none;
    border-bottom: 1px solid var(--line-1); }
  .side-logo { padding: 12px 16px; }
  .side-profile { margin: 8px 12px; }
  .side-nav { flex-direction: row; padding: 8px 12px; overflow-x: auto; }
  .side-nav-item { white-space: nowrap; }
  .side-guide { display: none; }
  .right { width: 100%; border-left: none; border-top: 1px solid var(--line-1); }
  .body-row { flex-direction: column; }
  .toc { width: 100%; border-right: none; border-bottom: 1px solid var(--line-1); padding: 12px; }
  .toc-item { display: inline-block; margin-right: 8px; }
  .mid { padding: 32px 20px; }
  .article { padding: 20px; }
  .nav { padding: 0 20px; }
  .nav-mid { display: none; }
  .hero { padding: 64px 20px 72px; }
  .hero-gz { font-size: 96px; letter-spacing: 14px; }
  .hero-title { font-size: 34px; }
  .section { padding: 48px 20px; }
  .diff-row, .perk-row, .pay-row { grid-template-columns: 1fr; }
  .price-card { flex-direction: column; align-items: flex-start; gap: 16px; }
  .price-divider { width: 100%; height: 1px; }
  .rpt-sample { flex-direction: column; }
  .rpt-sample-right { width: 100%; }
  .topbar { padding: 0 16px; }
}
@media (max-width:480px) {
  /* 小屏隐藏罗盘，只留四柱表（R6：本轮不做完整移动重排） */
  .mini-compass { display: none; }
}

/* ============ 补齐：模板实际用到而此前缺失的规则（只追加，不动上方已有规则） ============ */

/* ① 五行文字色：单个干支字上色（四柱 .pm .gz / 大运 .dy-item .gz / 罗盘 .mc-gan .ch / 流年）。
   五值与 pubcopy.WX_EN 及 token 名逐字对应；metal 最易漏。
   对比度（--night-2 底）：wood 6.2 / fire 4.6 / earth 6.4 / metal 8.9 / water 5.6，均 ≥4.5:1。 */
.ch.wx-wood  { color: var(--wx-wood); }
.ch.wx-fire  { color: var(--wx-fire); }
.ch.wx-earth { color: var(--wx-earth); }
.ch.wx-metal { color: var(--wx-metal); }
.ch.wx-water { color: var(--wx-water); }

/* ② 罗盘地支点亮态 · 金属背景（照抄上段 wood/fire/earth/water 四条的写法，补第五行） */
.mc-zhi.hi.wx-metal { background: var(--wx-metal); }

/* ③ 出生日期年/月/日三 select 横排（年 4 位略宽于月日 2 位），不许竖堆 */
.date-row { display: flex; gap: var(--s-1); }
.date-row .select { width: auto; min-width: 0; }
.date-row .select:nth-child(1) { flex: 3 1 0; }   /* 年 */
.date-row .select:nth-child(n+2) { flex: 2 1 0; } /* 月 / 日 */

/* ④ 闰月行显隐：原生 :has()，零 JS（Baseline 2023：Chrome 105+ / Safari 15.4+ / FF 121+）。
   # ponytail: FF<121 需要 6 行 JS 兜底，本轮不做。
   核对：#ts-clock→.clock-row、#ts-branch→.branch-row、#ts-branch+#br-zi→.zi-row、
   #ts-clock/#ts-branch→.place-row 四条三态规则上方「三态显隐」段已齐全，无缺条。 */
.lunar-row { display: none; }
form:has(#cal-lunar:checked) .lunar-row { display: flex; }

/* ⑤ 锚点可用性补课：.toc-item 已有 text-decoration:none + :hover，这里只补 :focus-visible；
   a.chap-list-item / a.btn-ghost-xs 两者都缺，一并补。outline 与表单控件同一语言（2px --gold-strong）。 */
.toc-item:focus-visible, a.chap-list-item:focus-visible, a.btn-ghost-xs:focus-visible {
  outline: 2px solid var(--gold-strong); outline-offset: 2px; }
a.chap-list-item { text-decoration: none; }
a.chap-list-item:hover { border-color: var(--gold-deep); }
a.btn-ghost-xs { text-decoration: none; }
a.btn-ghost-xs:hover { color: var(--gold-strong); border-color: var(--gold); }

/* ⑦ 报告列表状态徽章（class 名由 webapp 传入，取值仅两个）。
   rstat-lock 的虚线描边呼应报告页 .locked-body 的锁定态语言。 */
.rstat-ok { color: var(--ok); }
.rstat-lock { color: var(--ink-2); border: 1px dashed var(--line-2); border-radius: 999px;
  padding: 2px 10px; flex-shrink: 0; }

/* ⑧ 出生地「省 select + 市 input」双列（省窄市宽 1fr/2fr）。
   与上方「三态显隐」段的 display:block 同选择器同特异性、靠后声明胜出，仅覆盖布局不破坏显隐。 */
form:has(#ts-clock:checked) .place-row,
form:has(#ts-branch:checked) .place-row { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s-2); }
@media (max-width:900px) {
  .date-row { flex-wrap: wrap; }
  form:has(#ts-clock:checked) .place-row,
  form:has(#ts-branch:checked) .place-row { display: block; } /* 窄屏退回单列 */
}

/* ⑥ 流年节奏三态（顺遂/起伏/承压）。用属性选择器而不是新增 class：同一个 .rt-shen-chip
   基类被 pub_report.html:113 复用做五行计数徽章，改基类配色会连带改坏它。
   起伏 = 中性，保持基类默认金色不写规则；顺遂 --ok、承压 --bad-bright。
   属性值就是 pubcopy.RHYTHMS 的白名单原值，模型给出非法值时 validate_llm_struct 已判抽取失败，
   这里的属性选择器落空 = 自动退回默认金色，不会渲染出错色。 */
.rt-shen-chip[data-rhythm="顺遂"] { border-color: var(--ok); background: transparent; color: var(--ok); }
.rt-shen-chip[data-rhythm="承压"] { border-color: var(--bad-bright); background: transparent; color: var(--bad-bright); }

/* ============ SP-3：升级提示区 + 命理问答区（设计 §2.2/§6.5/§6.6） ============
   只 12/13px、只用 token 颜色变量（qingling-tokens.css 逐字节锁定，零改动）。
   .ai-note 本体（:417-421）一行不动——合规属性（≥12px、--ink-2、不可折叠）由原规则
   保证；这里只给对话区副本加 sticky 定位（.chat-ai），不改字号不改颜色。
   tests/test_pub_templates.py 的 test_ai_note_css_compliance 锁死这条边界。 */
.upsell-note { background: var(--night-1); border: 1px solid var(--gold-deep); border-radius: 12px;
  padding: 18px 20px; margin: 18px 0 24px; display: flex; flex-direction: column; gap: 12px; }
.upsell-note p { font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.chat-zone { margin-top: 28px; border-top: 1px solid var(--line-1); padding-top: 16px;
  display: flex; flex-direction: column; gap: 10px; }
/* sticky 必须带不透明底色：对话历史滚过时提示若透明会叠字。z-index:3 在 .app（z-index:2
   堆叠上下文）内部生效，压不住也无需压 .term-mask（z-index:10）。 */
.chat-ai { position: sticky; top: 0; z-index: 3; background: var(--night-0);
  margin-top: 0; padding: 8px 0; }
.chat-remaining { font-size: 12px; color: var(--ink-3); font-weight: 400; margin-left: 8px; }
.chat-log { display: flex; flex-direction: column; gap: 10px; }
.chat-bubble { border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 1.8;
  white-space: pre-wrap; }
.chat-q { align-self: flex-end; background: var(--gold-dim); border: 1px solid var(--gold-deep);
  color: var(--ink-1); }
.chat-a { align-self: flex-start; background: var(--night-2); border: 1px solid var(--line-1);
  color: var(--ink-2); }
.chat-pending { color: var(--ink-3); }
.chat-form { display: flex; gap: 10px; }
.chat-form .text-input { flex: 1; }
/* 基类 .btn-gold-sm 是 flex:1（登录行内双按钮语境的遗留）；对话框里发送钮定宽，
   更具体的选择器覆盖之，不动基类。 */
.chat-form .btn-gold-sm { flex: 0 0 88px; }

/* ============ SP-1：分析页即时命盘（设计 §3）============
   命盘卡片进中栏（原契约只在右栏），给一个块级间距即可——卡片内部样式
   （mini-compass/rt-card/pillars-mini）全部复用既有规则，零新发明。 */
.chart-block { margin: 20px 0 28px; }

/* ============ SP-1：单章阅读态（设计 §2.6/§2.7）============
   窗格显隐走原生 hidden 属性（任务 5 的 JS 施加），零 display 规则、不发明
   body 级 class——设计 §2.7 预计的方案被原生属性取代，少一层活动件。
   .toc-item.on 金色样式（:433）本轮首次消费，规则本体零改动。
   七项 TOC 小屏：900px 断点下 .toc-item 是 inline-block，自然换行（既有行为），
   零新 CSS。# ponytail: 换行观感不行再改横向滚动，add when 部署后真有人反馈。 */
.chap-nav { display: flex; justify-content: space-between; gap: 10px;
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line-1); }
.locked-buy { margin-top: 12px; }

/* ============ 2026-09-14：问答入口卡与权益卡 ============
   只 12/13px、只用 qingling-tokens.css 既有变量。.chat-cta 整卡可点（a 元素），
   .benefit-card 描边卡片语言与 .upsell-note（:741）同量级。 */
.chat-cta { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--gold-dim); border: 1px solid var(--gold-deep); border-radius: 12px;
  padding: 14px 18px; margin: 18px 0 24px; color: var(--ink-1); font-size: 13px;
  text-decoration: none; }
.benefit-card { background: var(--night-1); border: 1px solid var(--gold-deep);
  border-radius: 12px; padding: 18px 20px; margin: 18px 0 24px;
  display: flex; flex-direction: column; gap: 12px; }
.benefit-card .btn-primary-full { margin-top: 10px; }
/* 波 11 付费分界横幅：清单行（横幅容器复用既有 .benefit-card + .paywall） */
.pw-list { margin: 8px 0 12px; padding-left: 1.2em; color: var(--ink-2); font-size: 13px; line-height: 1.9; }
.pw-list li::marker { color: var(--gold-strong); }
/* 快团团渠道兑换码入口（2026-11-04）：原生 details 折叠，零 JS；12px 合规下限。 */
.redeem-box summary { font-size: 12px; color: var(--ink-2); cursor: pointer; }
.redeem-box summary:hover { color: var(--ink-1); }
.redeem-row { display: flex; gap: 8px; margin-top: 10px; }
.redeem-row .text-input { flex: 1; min-width: 0; letter-spacing: 0.1em; text-transform: uppercase; }
/* 邀请有礼（2026-11-04）：报告页常驻邀请卡（不复用 .benefit-card——那是付费横幅
   专属类，paid 档测试锁「benefit-card 零出现」） + 引导行 + /share 链接展示块 */
.invite-card { background: var(--night-1); border: 1px solid var(--gold-deep);
  border-radius: 12px; padding: 18px 20px; margin: 18px 0 24px;
  display: flex; flex-direction: column; gap: 12px; }
.invite-card .btn-ghost-xs { align-self: flex-start; }
.chat-invite { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.chat-invite a { color: var(--gold-strong); }
/* 邀请有礼 /share 二版（2026-11-04，用户反馈「难以理解」后重排）：口号 → 双礼遇卡
   → 三步流程 → 复制链接行 → 战绩三卡 → 兑换码列表 → 规则折叠；全部既有 tokens。 */
.invite-slogan { font-size: 20px; font-weight: 700; color: var(--gold-strong); }
.invite-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.invite-gift { background: var(--night-1); border: 1px solid var(--gold-deep);
  border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.gift-tag { font-size: 12px; color: var(--ink-2); letter-spacing: 0.15em; }
.gift-main { font-size: 15px; font-weight: 600; color: var(--ink-1); }
.gift-main .num { color: var(--gold-strong); }
.gift-sub { font-size: 13px; color: var(--ink-2); }
.invite-steps { display: flex; gap: 8px; margin: 14px 0 16px; flex-wrap: wrap; }
.invite-step { flex: 1; min-width: 150px; font-size: 12px; color: var(--ink-2);
  background: var(--night-1); border-radius: 8px; padding: 8px 10px; }
.invite-step .num { color: var(--gold-strong); font-weight: 700; }
.invite-row { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.invite-row .text-input { flex: 1; min-width: 0; font-size: 12px; }
.invite-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.invite-stat { background: var(--night-1); border-radius: 10px; padding: 12px 8px; text-align: center; }
.stat-n { font-size: 22px; font-weight: 700; color: var(--gold-strong); }
.stat-l { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.invite-code { flex: 1; padding: 9px 12px; border: 1px dashed var(--line-2); border-radius: 8px;
  font-size: 14px; color: var(--ink-1); letter-spacing: 0.2em; align-self: center; }
.invite-rules { margin-top: 14px; border-top: 1px solid var(--line-1); padding-top: 10px; }
.invite-rules summary { font-size: 12px; color: var(--ink-2); cursor: pointer; }
.invite-rules summary:hover { color: var(--ink-1); }
@media (max-width: 640px) { .invite-duo { grid-template-columns: 1fr; } }
/* .chat-cta 是 a 元素：hover/focus 语言同 :705 的 a.btn-ghost-xs（描边加深 + 金色 outline）。 */
.chat-cta:hover { border-color: var(--gold); }
.chat-cta:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 2px; }
/* 2026-10-13 反馈批次1：问答 CTA 引导加重——左句加粗提权、右「去提问」金色加粗
   带箭头位移；只用既有 tokens 变量，零新依赖。 */
.chat-cta-strong { font-weight: 600; font-size: 14px; }
.chat-cta-strong .chat-go { color: var(--gold-strong); font-weight: 700; white-space: nowrap;
  transition: transform 0.15s ease; }
.chat-cta-strong:hover .chat-go { transform: translateX(3px); }

/* ============ 2026-09-14：ai-top 去重补丁 ============
   .ai-note 的 display:flex（:418）压过 UA 的 [hidden]{display:none}，
   单章 JS 施加的 hidden 属性需要这条显式规则才生效。选择器刻意用 #ai-top
   不含 "ai-note"——test_ai_note_css_compliance 禁止任何含 ai-note 的选择器
   声明 display:none（AI 标识不可折叠合规：隐藏的是重复副本，对话区 sticky
   副本仍在）。 */
#ai-top[hidden] { display: none; }

/* ============ 2026-09-14：basic 档章内升级按钮 + 权益 tooltip（UX 波 2）============
   右下角布局；tooltip 默认隐藏、:hover 与键盘 :focus-within 都显示（CSS-only
   零 JS）、绝对定位、不透明浮层底。只 12/13px、只用 qingling-tokens.css 既有变量。 */
.chap-upsell { position: relative; width: fit-content; margin: 12px 0 0 auto; }
.chap-upsell-tip { display: none; position: absolute; right: 0; bottom: calc(100% + 8px);
  z-index: 4; width: max-content; max-width: 260px; padding: 8px 12px;
  background: var(--night-3); border: 1px solid var(--gold-deep); border-radius: 8px;
  color: var(--ink-2); font-size: 12px; line-height: 1.7; text-align: left; }
.chap-upsell:hover .chap-upsell-tip, .chap-upsell:focus-within .chap-upsell-tip { display: block; }

/* ============ 2026-09-14：UX 波 3 ============
   ① 通用 hover/focus tooltip：.upsell-wrap/.upsell-tip（视觉沿用 .chap-upsell-tip
   的值）。.chap-upsell 小按钮已删出模板，其 CSS 规则按 .upsell-note 先例保留为
   死规则（记债，不在本波清理）。
   ② a.btn-primary-full 去下划线：工作台「查看报告」链接与报告页付费按钮（<button>
   天然无下划线）同款视觉。
   ③ .rt-card .edit-link：右栏生辰卡的修改入口，金色 + 下划线明示可点击。 */
.upsell-wrap { position: relative; }
.upsell-tip { display: none; position: absolute; right: 0; bottom: calc(100% + 8px);
  z-index: 4; width: max-content; max-width: 260px; padding: 8px 12px;
  background: var(--night-3); border: 1px solid var(--gold-deep); border-radius: 8px;
  color: var(--ink-2); font-size: 12px; line-height: 1.7; text-align: left; }
.upsell-wrap:hover .upsell-tip, .upsell-wrap:focus-within .upsell-tip { display: block; }
a.btn-primary-full { text-decoration: none; }
.rt-card .edit-link { display: inline-block; margin-top: 8px; color: var(--gold);
  text-decoration: underline; font-size: 12px; }

/* ============ 2026-09-15：UX 波 5 ============
   下一章/问答入口恒贴右：.chap-nav 是 space-between flex，首窗格无「上一章」时
   独子会贴左、章间位置漂移；margin-left:auto 钉死右侧。 */
.chap-nav .chap-next { margin-left: auto; }

/* ============ 2026-09-15：UX 波 7 ============
   /switch-account 的返回链接：.link 无全局规则（四处既有规则都是别的作用域），
   落在 .form-card 里此前零命中 = 浏览器默认紫色下划线。金色+下划线对齐全站
   链接口径（.side-guide/.check-row 同款）；align-self:center 在 flex column
   卡片内居中。form-card 现仅工作台表单与 pub_switch 使用，工作台卡内无 .link，
   零副作用。 */
.form-card .link { color: var(--gold); text-decoration: underline; align-self: center; }