/* SoulQuest · 我们俩的相处说明书 —— 主题：仙阙夜色
 * 深紫黑夜空 + 三重星云（金 / 青玉 / 紫）+ 顶部金纱天光 + 中心圣光 + 舞台暗角
 * + 胶片颗粒 + 宋体大标题 + 金线质感 + 星尘与流星。
 * 借鉴：Linear / Vercel 的极光渐变，Apple 产品页的滚动揭示节奏，Awwwards 类站点的颗粒质感。
 * 约束：零外链、零依赖、只动画 transform/opacity/filter；prefers-reduced-motion 全静止。
 */

:root {
  --bg: #0E0B16;
  --bg-deep: #07060D;
  --ink: #F7F2E8;
  --ink-soft: rgba(247, 242, 232, .82);
  --ink-dim: rgba(247, 242, 232, .60);
  --ink-faint: rgba(247, 242, 232, .42);
  --gold: #E7C89A;
  --gold-hi: #F8E9C9;
  --gold-deep: #B98F55;
  --jade: #7FD6C8;
  --violet: #8E7BE8;
  --line: rgba(231, 200, 154, .22);
  --line-strong: rgba(231, 200, 154, .46);
  --panel: rgba(255, 255, 255, .07);
  --panel-2: rgba(255, 255, 255, .028);
  --you: #F0A46A;
  --other: #8FA8F0;
  --warn: #F09A85;
  --ok: #7FD8A0;
  --glow-a: .48;
  --glow-b: .52;
  /* 楷体：题诗用（"雅"最强的杠杆，且手机/Windows 都有回落字体，仍然零外链） */
  --kai: "Kaiti SC", "STKaiti", "KaiTi", "楷体", "Noto Serif SC", Georgia, serif;
  --serif: "Songti SC", "STSong", "SimSun", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg-deep); }

/* 中心圣光：让"画面中央"自然发亮，眼球先落在中间（纯装饰，不挡交互） */
html::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(52% 34% at 50% 34%, rgba(248, 233, 201, .24), rgba(248, 233, 201, .09) 48%, transparent 76%);
}

body {
  background:
    radial-gradient(120% 88% at 50% 40%, transparent 46%, rgba(0, 0, 0, .52) 100%),
    radial-gradient(120% 70% at 50% -10%, #191426 0%, var(--bg) 42%, var(--bg-deep) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.68;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* 第三团紫云（神秘感）：很淡，压在底部中央（纯装饰，不挡交互） */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(38% 30% at 50% 78%, rgba(142, 123, 232, .30), transparent 72%);
}

/* 竖向节奏：内容不足一屏时整块竖向居中（原来全部漂在顶部、下半屏空着）；
 * 内容超过一屏时（落地页/报告页）自动退化为"从顶部开始"，不裁切、正常滚动。
 * 用 margin:auto 而不是 justify-content:center —— 后者在内容超高时会把顶部顶出屏幕且无法滚到。 */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.page > :first-child { margin-top: auto !important; }   /* !important：压住 app.js 里写的内联 margin-top（等待页/出错页是 40px），否则居中失效 */
.page > :last-child  { margin-bottom: auto !important; }

/* ---------- 背景动效层（#bg-aurora / #bg-stars 由 index.html 提供，fx.js 驱动）---------- */
#bg-aurora {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
#bg-aurora .blob {
  position: absolute; border-radius: 50%; will-change: transform, opacity;
}
/* 金云：亮度由两人平均强度驱动（fx.js 写 --glow-a） */
#bg-aurora .blob.a {
  left: -26vmax; top: -34vmax; width: 84vmax; height: 84vmax;
  filter: blur(88px);
  background: radial-gradient(circle at 50% 50%, rgba(231, 200, 154, .82), rgba(201, 150, 80, .30) 52%, rgba(201, 150, 80, 0) 78%);
  opacity: calc(var(--glow-a) * .70);
  animation: driftA 64s ease-in-out infinite alternate;
}
/* 青玉云：反向补足（fx.js 写 --glow-b） */
#bg-aurora .blob.b {
  right: -28vmax; bottom: -34vmax; width: 92vmax; height: 92vmax;
  filter: blur(96px);
  background: radial-gradient(circle at 50% 50%, rgba(127, 214, 200, .60), rgba(127, 214, 200, .22) 54%, rgba(127, 214, 200, 0) 78%);
  opacity: calc(var(--glow-b) * .62);
  animation: driftB 78s ease-in-out infinite alternate;
}
/* 顶部天光：双层金纱（金为主、青玉为辅），把"天光"压在页头 */
#bg-aurora::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(46% 60% at 50% 0%, rgba(248, 233, 201, .44), rgba(248, 233, 201, 0) 74%),
    radial-gradient(70% 40% at 50% -6%, rgba(127, 214, 200, .20), rgba(127, 214, 200, 0) 78%);
}
/* 压一层薄纱，保证任何屏幕上文字都在暗底之上 */
#bg-aurora::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,11,22,.20) 0%, rgba(14,11,22,.48) 46%, rgba(7,6,13,.78) 100%);
}
@keyframes driftA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8vmax, 5vmax, 0) scale(1.10); }
}
@keyframes driftB {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-7vmax, -6vmax, 0) scale(1.14); }
}

#bg-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
/* 水面层：与星尘同 z-index，DOM 在后 → 画在星尘之上、页面内容之下 */
/* 水面层：首帧画完才加 .on 淡入（避免"突然出现一张斜条纹"；用户："不要显得太突兀 突然出现"） */
#bg-water { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
#bg-water.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #bg-water { transition: none; opacity: 1; } }

/* 胶片颗粒 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 布局 ---------- */
.page {
  position: relative; z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  padding: 26px 26px calc(48px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
}

/* ---------- 文本 ---------- */
h1 { font-family: var(--serif); font-size: 38px; line-height: 1.35; letter-spacing: .04em; font-weight: 600; text-align: center; }
h2 { font-family: var(--serif); font-size: 22px; line-height: 1.45; margin-bottom: 10px; font-weight: 600; text-align: center; }
h3 { font-size: 15.5px; margin-bottom: 8px; font-weight: 600; }
/* 段落：整块居中（页面本身居中）、文字左对齐——三行长文居中排会难读 */
p  { font-size: 16px; line-height: 1.92; }
.small { font-size: 12.5px; color: var(--ink-dim); letter-spacing: .04em; line-height: 1.7; }
.tiny  { font-size: 11.5px; color: rgba(247, 242, 232, .5); line-height: 1.6; }   /* 原 .42=3.71:1 不到小字 AA；.5 实测 4.87:1 */

.hero-gap { height: 16px; }
.gap { height: 26px; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }

/* ---------- 按钮 ---------- */
.btn {
  display: block; width: 100%; height: 56px;
  border-radius: 999px;
  font-size: 16px; font-family: var(--sans); font-weight: 600; letter-spacing: .04em;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .2s, border-color .2s;
}
.btn:active { transform: scale(.985); }
.btn-primary {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 46%, var(--gold-deep));
  color: #2A1F12;
  box-shadow: 0 16px 44px rgba(231, 200, 154, .30), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn-primary:hover { box-shadow: 0 20px 54px rgba(231, 200, 154, .38), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn-primary:disabled { opacity: .38; cursor: default; box-shadow: none; }
.btn-secondary {
  background: transparent;
  color: var(--ink); border-color: var(--line-strong);
}
.btn-secondary:hover { border-color: rgba(231, 200, 154, .58); background: rgba(231, 200, 154, .10); }
.btn-block + .btn-block { margin-top: 12px; }

/* ---------- 输入框 ---------- */
.input {
  width: 100%; height: 52px;
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: rgba(255,255,255,.05); padding: 0 16px;
  font-size: 16px; font-family: var(--sans); color: var(--ink);
  letter-spacing: .08em;
  transition: border-color .2s, box-shadow .25s, background .2s;
}
.input:focus {
  outline: none; border-color: rgba(231, 200, 154, .62);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 4px rgba(231, 200, 154, .13);
}
.input::placeholder { color: var(--ink-dim); letter-spacing: .02em; }

.hint { margin-top: 10px; font-size: 13px; color: var(--warn); }

/* ---------- 卡片容器 ---------- */
.panel {
  border: 1px solid var(--line); border-radius: 18px; padding: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.035));   /* 原 .065/.022，星点透过来干扰阅读 */
  box-shadow: 0 26px 70px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.panel + .panel, .panel + .block-title { margin-top: 14px; }
.block-title + .panel { margin-top: 0; }

/* ---------- landing ---------- */
.landing-brand {
  position: relative;
  border: 1px solid var(--line-strong); border-radius: 18px;
  padding: 32px 22px 26px; margin-bottom: 22px;
  background:
    radial-gradient(120% 130% at 8% 0%, rgba(231,200,154,.15), rgba(231,200,154,0) 58%),
    radial-gradient(120% 130% at 100% 100%, rgba(142,123,232,.16), rgba(142,123,232,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 26px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  text-align: center;
}
/* 产品名永远不许断开（曾被断成"两个人相 / 处说明书"，把"相处"拆开是排版事故）：
 * 字号随屏宽缩放 + nowrap，保证一行放得下；宽屏仍取到 44px。 */
.landing-brand h1 {
  font-size: clamp(25px, 8.4vw, 44px); letter-spacing: .06em; line-height: 1.3;   /* 名字 8→9 字（我们俩的相处说明书），收一点字号与字距，保证一行放得下 */
  white-space: nowrap;
  text-shadow: 0 0 32px rgba(231, 200, 154, .30);
}
/* 金箔渐变字（高级感的来源之一）；不支持 background-clip 的浏览器自动退回上面的米白字 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .landing-brand h1 {
    background: linear-gradient(135deg, #FBF3E2 0%, #E7C89A 50%, #C9A063 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 26px rgba(231, 200, 154, .28));
  }
}
/* 首屏标题区四角金线角标（与样张卡同一套"请柬"语言） */
.landing-brand::before, .landing-brand::after {
  content: ""; position: absolute; width: 20px; height: 20px; pointer-events: none;
}
.landing-brand::before { left: 9px; top: 9px; border-left: 1px solid rgba(231,200,154,.75); border-top: 1px solid rgba(231,200,154,.75); }
.landing-brand::after  { right: 9px; bottom: 9px; border-right: 1px solid rgba(231,200,154,.75); border-bottom: 1px solid rgba(231,200,154,.75); }
@media (max-width: 520px) {
  /* 手机上把内边距收紧，给标题留出"一行放得下"的宽度 */
  .landing-brand { padding: 30px 14px 24px; }
}
.landing-tag {
  margin-top: 12px; font-size: 15px; line-height: 1.75;
  color: rgba(231, 200, 154, .84);            /* .92 与主标题同为金色、抢戏；.84 仍是金的但退半步 */
  letter-spacing: .04em;
  text-wrap: balance;                          /* 中文断词：22 字原本会把"原因"孤零零甩到第二行 */
}

/* ---------- quiz ---------- */
.quiz-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.progress-track {
  height: 4px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; margin-bottom: 28px;
}
.progress-fill {
  height: 100%; border-radius: 4px; transition: width .3s cubic-bezier(.2,.7,.2,1);
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 55%, var(--gold-hi));   /* 原为 金→青玉→紫，青色在深紫夜里"串味"，改纯金一脉 */
  background-size: 220% 100%;
  animation: sheen 4.5s linear infinite;
  box-shadow: 0 0 18px rgba(231, 200, 154, .35);
}
@keyframes sheen { from { background-position: 0% 0; } to { background-position: 200% 0; } }
.q-text {
  font-size: 24px; line-height: 1.7; margin: 6px 0 28px; text-align: center;
  font-family: var(--serif); letter-spacing: .02em;
  /* 中文没有词间空格，会断在任意字之间，曾把"第一"断成"第/一"两行（与"两个人相/处"同类事故）。
     text-wrap:balance 会把两行长度拉平，断点自然落到标点处。 */
  text-wrap: balance;
}

.opt {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 62px; text-align: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  padding: 13px 24px; font-size: 16px; font-family: var(--sans);
  color: var(--ink); cursor: pointer; line-height: 1.55;
  transition: transform .16s cubic-bezier(.2,.7,.2,1), background .2s, border-color .2s, box-shadow .25s;
  animation: optIn .34s cubic-bezier(.2,.7,.2,1) backwards;
}
.opt + .opt { margin-top: 12px; }
.opt:hover { border-color: rgba(231, 200, 154, .48); background: rgba(231, 200, 154, .06); transform: translateY(-1px); }
.opt.selected {
  border-color: rgba(231, 200, 154, .75);
  background: linear-gradient(150deg, rgba(231,200,154,.16), rgba(142,123,232,.10));
  color: var(--gold-hi);
  box-shadow: 0 0 0 4px rgba(231, 200, 154, .10), 0 10px 26px rgba(0,0,0,.30);
}
@keyframes optIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.quiz-nav { margin-top: 24px; display: flex; gap: 12px; }
.quiz-nav .btn { flex: 1; }

.fade-in { animation: fadeIn .28s cubic-bezier(.2,.7,.2,1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- report ---------- */
.report-head { position: relative; text-align: center; padding: 8px 0 2px; }
/* 顶部金光最强，给标题区垫一层柔和暗底，保证小字也读得清 */
.report-head::before {
  content: ""; position: absolute; left: -26px; right: -26px; top: -30px; bottom: -14px; z-index: -1;
  pointer-events: none;
  background: radial-gradient(72% 100% at 50% 42%, rgba(7,6,13,.55), rgba(7,6,13,0) 76%);
}
.report-type {
  margin-top: 8px;
  font-size: 64px; line-height: 1.25;
  letter-spacing: .02em;
  text-shadow: 0 0 12px rgba(231, 200, 154, .22), 0 0 48px rgba(231, 200, 154, .10);
}
/* 原型名是报告的主角，用与落地页主标题同一套金箔渐变字（原为米白+外发光，评测说"发光糊、显廉价"） */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .report-type {
    background: linear-gradient(135deg, #FCF6E7 0%, #E7C89A 48%, #C79E5E 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 22px rgba(231, 200, 154, .30));
  }
}
@media (min-width: 520px) {
  .report-type { font-size: 72px; }
}
/* 描述句副标题：金调、舒展、居中 */
.report-sub { margin-top: 12px; font-size: 19px; line-height: 1.75; color: rgba(231, 200, 154, .92); letter-spacing: .10em; }   /* 17px/.80 → 19px/.92：这句是关系痛点钩子 */
.report-keywords { margin-top: 18px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.kw {
  /* 原来是一圈金描边的胶囊，评测说"像按钮却点不动、模板感强" → 改成金色小字，中间用菱形分隔 */
  border: 0; background: none; padding: 0;
  font-size: 14px; color: var(--gold-hi);
  letter-spacing: .14em;
  text-shadow: 0 0 12px rgba(231, 200, 154, .22);
}
.kw + .kw::before {
  content: "◆"; font-size: 7px; color: rgba(231, 200, 154, .55);
  margin-right: 14px; vertical-align: 3px; letter-spacing: 0;
}

.role-note { text-align: center; margin-bottom: 18px; }

/* 小节标题：居中 + 上下金色渐隐细线 + 中央菱形光点（纯图形装饰） */
.block-title { margin: 34px 0 14px; }
/* 区块编号 01/02/…：纯 CSS 计数器，文案一个字都不动（01 在上，金线+菱形在下） */
body { counter-reset: blk; }
.block-title { counter-increment: blk; }
.block-title::before {
  content: counter(blk, cjk-ideographic);   /* 01/02 → 一/二/三（雅致）：改用汉字数字 */
  display: block; width: min(230px, 68%); margin: 0 auto 12px;
  padding-bottom: 13px;                       /* 这条线+菱形改由本伪元素的 background 画 */
  /* 汉字数字必须用楷体：无衬线的"一"就是一条横线，读不出是数字（评测把它看成装饰线）；
   * 楷体的"一"有起笔收笔，才像字。13px 也是因此从 11px 提上来的。 */
  font-family: var(--kai); font-size: 13px; font-weight: 600;
  letter-spacing: .30em; text-indent: .30em;
  color: rgba(231, 200, 154, .70);
  background:
    linear-gradient(45deg, transparent 45%, rgba(231, 200, 154, .95) 50%, transparent 55%) 50% 100% / 9px 9px no-repeat,
    linear-gradient(-45deg, transparent 45%, rgba(231, 200, 154, .95) 50%, transparent 55%) 50% 100% / 9px 9px no-repeat,
    linear-gradient(90deg, transparent, rgba(231, 200, 154, .45) 18%, rgba(231, 200, 154, .45) 82%, transparent) 50% calc(100% - 4px) / 100% 1px no-repeat;
}
.block-title::after {
  content: ""; display: block; width: min(230px, 68%); height: 1px; margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, rgba(231, 200, 154, .45) 18%, rgba(231, 200, 154, .45) 82%, transparent);
}

.profile-item { margin-bottom: 22px; }
.profile-item:last-child { margin-bottom: 0; }
.profile-label { font-size: 12px; margin-bottom: 7px; color: rgba(247,242,232,.5); letter-spacing: .16em; }   /* 拉出"标签"与正文的两档层级 */
.profile-body { font-size: 16px; line-height: 1.92; color: rgba(247,242,232,.92); }

.you-tag  { color: var(--you); font-weight: 600; font-family: var(--serif); letter-spacing: .04em; }
.other-tag{ color: var(--other); font-weight: 600; font-family: var(--serif); letter-spacing: .04em; }
.same-tag { color: var(--ink-soft); font-weight: 600; font-family: var(--serif); letter-spacing: .04em; }
.same-note{ font-size: 12.5px; color: var(--ink-dim); margin: 4px 0 14px; line-height: 1.7; }
.same-panel{
  border-color: rgba(231, 200, 154, .22);
  background:
    radial-gradient(110% 120% at 0% 0%, rgba(231,200,154,.10), rgba(231,200,154,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}

.gap-item { margin-bottom: 22px; }
.gap-item:last-child { margin-bottom: 0; }
.gap-index { font-size: 12px; color: var(--gold); margin-bottom: 6px; letter-spacing: .18em; font-weight: 600; }
.gap-row { display: flex; margin-top: 8px; }
.gap-row-label { flex: 0 0 78px; font-size: 11.5px; color: var(--ink-dim);   /* "场景/为什么会这样/可以这样说"是正文级信息，不该用 .42 暗档（3.71:1） */ padding-top: 3px; letter-spacing: .04em; white-space: nowrap; }
.gap-row-text { font-size: 16px; line-height: 1.92; color: rgba(247,242,232,.9); flex: 1; min-width: 0; }
/* 引文强调：金色 + 细引号形角标（纯图形，不是文字） */
.quote-em { font-weight: 700; color: var(--gold-hi); text-shadow: 0 0 18px rgba(231, 200, 154, .35); }
.quote-em::before, .quote-em::after {
  content: ""; display: inline-block; width: .40em; height: .40em; opacity: .85; vertical-align: baseline;
}
.quote-em::before {
  margin-right: .26em; border-top: 1.5px solid var(--gold); border-left: 1.5px solid var(--gold);
  border-top-left-radius: 100%;
}
.quote-em::after {
  margin-left: .26em; border-bottom: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold);
  border-bottom-right-radius: 100%;
}

.sync-text { font-size: 16px; line-height: 1.92; color: rgba(247,242,232,.92); }

.link-panel input, .link-panel textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(0,0,0,.28); padding: 12px; font-size: 13px;
  font-family: var(--sans); color: var(--ink-soft); line-height: 1.5;
  resize: none; height: auto;
}
.link-panel textarea { height: 88px; }
.link-panel .btn { margin-top: 10px; }
.copy-tip { margin-top: 8px; font-size: 12.5px; color: var(--ink-dim); line-height: 1.7; }
.copy-tip.ok { color: var(--ok); }
/* 6 位字符兜底：居中金框小盒，仍可鼠标/长按整段选中 */
.q-chars {
  margin: 10px auto 0; width: fit-content; max-width: 100%;
  font-size: 19px; letter-spacing: .22em; font-weight: 700;
  text-align: center; user-select: all; -webkit-user-select: all; cursor: copy;
  color: var(--gold-hi);
  text-shadow: 0 0 22px rgba(231, 200, 154, .35);
  padding: 10px 16px;
  border: 1px solid rgba(231, 200, 154, .35); border-radius: 10px;
  background: rgba(231, 200, 154, .05);
}

/* ---------- canvas 卡片 ---------- */
.canvas-wrap { margin-top: 14px; position: relative; }
/* 四角细金线角标：左上 / 右下两个 L 形（22px，1px 金线） */
.canvas-wrap::before, .canvas-wrap::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
}
.canvas-wrap::before { left: -6px; top: -6px; border-left: 1px solid rgba(231, 200, 154, .75); border-top: 1px solid rgba(231, 200, 154, .75); }
.canvas-wrap::after  { right: -6px; bottom: -6px; border-right: 1px solid rgba(231, 200, 154, .75); border-bottom: 1px solid rgba(231, 200, 154, .75); }
.canvas-wrap > canvas {
  display: block; width: 100%; height: auto;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(231, 200, 154, .42), 0 0 0 6px rgba(231, 200, 154, .06),
              0 30px 80px rgba(0, 0, 0, .55), 0 0 90px rgba(231, 200, 154, .16);
}
#cardCanvas {
  display: block; width: 100%; height: auto;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(231, 200, 154, .42), 0 0 0 6px rgba(231, 200, 154, .06),
              0 30px 80px rgba(0, 0, 0, .55), 0 0 90px rgba(231, 200, 154, .16);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
}
@media (hover: hover) and (min-width: 700px) {
  #cardCanvas:hover { transform: perspective(1400px) rotateX(1.4deg) rotateY(-1.2deg) translateY(-3px); }
}
.save-row { margin-top: 16px; }

/* ---------- 页脚 ---------- */
.foot { margin-top: 40px; text-align: center; }
/* 备案号是页脚注脚，但它是 <a>：不定色就会落到浏览器默认链接色（亮蓝），在夜色主题里非常刺眼。
   用户 2026-09-29：「备案字体太刺眼了」→ 跟旁边两行注脚同色（inherit），只留一道极淡下划线，
   悬停才转金。合规要的是"挂链接"，不是"抢注意力"。 */
.foot .tiny a,
.landing-foot .tiny a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 242, 232, .16);
  transition: color .2s, border-color .2s;
}
.foot .tiny a:hover,
.landing-foot .tiny a:hover {
  color: var(--gold-hi);
  border-bottom-color: rgba(231, 200, 154, .6);
}
.foot .tiny + .tiny { margin-top: 5px; }

/* ---------- 入场/滚动揭示（由 fx.js 加 .reveal，无 JS 时内容照常可见）---------- */
.reveal { opacity: 0; transform: translate3d(0, 16px, 0); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}

/* 中文标题换行：避免末尾孤字（h1 大字尤其明显） */
h1 { text-wrap: balance; }
h2 { text-wrap: pretty; }

/* 首屏"凭证"输入框：与按钮同一族的金线胶囊，居中、金调提示字
 * （只作用于落地页那一只：.page 的直接子元素；链接/粘贴框保持原样，长 URL 居中会难读） */
.page > .input {
  height: 56px; text-align: center; letter-spacing: .14em;
  border: 1px solid rgba(231,200,154,.34); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.page > .input::placeholder { color: rgba(231,200,154,.52); letter-spacing: .14em; }
.page > .input:focus {
  border-color: rgba(231,200,154,.72);
  box-shadow: 0 0 0 4px rgba(231,200,154,.10), 0 0 36px rgba(231,200,154,.18);
}

/* ---------- landing 两段式 ---------- */
/* 金色渐隐细线 + 中央菱形光点（与 .block-title 呼应） */
.landing-sep {
  height: 11px; margin: 30px 0 26px; border: 0;
  background:
    linear-gradient(45deg, transparent 45%, rgba(231, 200, 154, .9) 50%, transparent 55%) 50% 50% / 9px 9px no-repeat,
    linear-gradient(-45deg, transparent 45%, rgba(231, 200, 154, .9) 50%, transparent 55%) 50% 50% / 9px 9px no-repeat,
    linear-gradient(90deg, transparent, rgba(231, 200, 154, .40) 18%, rgba(231, 200, 154, .40) 82%, transparent) 0 50% / 100% 1px no-repeat;
}
/* 步骤行：序号 + 标题一行，说明另起一段；长文案正常换行不横向溢出 */
.landing-step { margin-bottom: 18px; }
.landing-step:last-child { margin-bottom: 0; }
.step-line { display: flex; align-items: baseline; gap: 10px; }
.step-n {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  color: #2A1F12; background: linear-gradient(150deg, var(--gold-hi), var(--gold-deep));
  box-shadow: 0 0 14px rgba(231, 200, 154, .35);
}
.step-t { font-family: var(--serif); font-size: 16.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); }
.step-d { margin-top: 6px; font-size: 13.5px; line-height: 1.7; color: var(--ink-dim); }

/* ---------- 样张卡（深色页面上的一张真卡片）---------- */
.sample-card {
  position: relative;
  /* 必须与画布上真正的卡片同色：夜金（深空底 + 金箔），否则"样张"就是假的 */
  background: radial-gradient(120% 92% at 50% 0%, #2A2148 0%, #1A1430 58%, #12101F 100%);
  color: #F7F2E8;
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 0 0 1px rgba(231, 200, 154, .62), 0 0 0 6px rgba(231, 200, 154, .08),
              0 30px 80px rgba(0, 0, 0, .62), 0 0 90px rgba(231, 200, 154, .26);
}
/* 样张卡四角金线角标（夜金卡面上用亮金） */
.sample-card::before, .sample-card::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
}
.sample-card::before { left: 8px; top: 8px; border-left: 1px solid rgba(226, 196, 143, .85); border-top: 1px solid rgba(226, 196, 143, .85); }
.sample-card::after  { right: 8px; bottom: 8px; border-right: 1px solid rgba(226, 196, 143, .85); border-bottom: 1px solid rgba(226, 196, 143, .85); }
.sample-label { font-size: 12px; letter-spacing: .14em; color: rgba(201,160,99,.88); }
.sample-type { margin-top: 8px; font-family: var(--serif); font-size: 22px; line-height: 1.4; font-weight: 600; color: #F7F2E8; }
.sample-quote { margin-top: 16px; font-size: 21px; line-height: 1.7; color: #F7F2E8; }
.sample-say { margin-top: 12px; font-size: 21px; line-height: 1.7; color: rgba(226,196,143,.88); }
/* 长文案正常换行（390px 手机不横向溢出）*/
.sample-quote, .sample-say, .sample-type, .step-t { overflow-wrap: anywhere; word-break: break-word; }

/* ---------- 那句没说出口的话 ---------- */
.said-quote {
  position: relative;
  font-family: var(--serif); font-size: 22px; line-height: 1.7;
  color: var(--gold-hi); font-weight: 600; letter-spacing: .02em;
  text-shadow: 0 0 26px rgba(231, 200, 154, .28);
}
/* 两侧金色细引号形角标（纯图形，不是新文字） */
.said-quote::before, .said-quote::after {
  content: ""; display: inline-block; width: .52em; height: .52em; opacity: .9; vertical-align: baseline;
}
.said-quote::before {
  margin-right: .38em; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold);
  border-top-left-radius: 100%;
}
.said-quote::after {
  margin-left: .38em; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold);
  border-bottom-right-radius: 100%;
}

/* ---------- 报告里的猜题对答（「你以为的他」）----------
   猜错是好玩的事，不是错误：不用红色/警示观感，命中用青玉、未中用正文色。 */
.guess-row { margin-top: 12px; font-size: 15px; line-height: 1.85; color: rgba(247, 242, 232, .9); overflow-wrap: anywhere; word-break: break-word; }
.guess-row:first-of-type { margin-top: 0; }
.guess-hit { color: var(--jade); }
.guess-miss { color: var(--ink-soft); }

/* ---------- 减动效 / 低配设备 ---------- */
@media (max-width: 520px) {
  #bg-aurora .blob.a { filter: blur(70px); width: 78vmax; height: 78vmax; }
  #bg-aurora .blob.b { filter: blur(78px); width: 86vmax; height: 86vmax; }
}
@media (prefers-reduced-motion: reduce) {
  #bg-aurora .blob { animation: none; }
  .progress-fill { animation: none; }
  .opt { animation: none; }
  .fade-in { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  #cardCanvas { transition: none; }
}
.no-motion #bg-aurora .blob { animation: none; }


/* ---------- 页尾注脚：购买与输码说明 ----------
 * 2026-09-29 产品负责人拍板「降一档视觉权重」：这一段是给"还没买的人"的信息，
 * 职责是转化提示，不是氛围，不能跟上半页的神秘气质抢焦点。
 * 降权手段全部是数值：字号 22px 衬线 → 13px 无衬线小标签；正文 16px/1.92（报告正文的规格）
 * → 12px/1.85；颜色从 --ink-soft/.92 降到 --ink-dim/.60 一档；顶部加一条极淡断线做分界。
 * 可读性守住：正文只用 --ink-dim（对比度约 5.8:1，过 AA），只有两个短标签用 --ink-faint。
 * 结构注意：它仍是 .page 的最后一个子元素，所以 margin-bottom:auto 的纵向居中不被破坏。 */
.landing-foot { margin-top: 44px; text-align: center; }
.landing-foot .foot-rule {
  width: 46px; height: 1px; margin: 0 auto 20px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  opacity: .55;
}
.landing-foot .foot-title {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: .16em;
  color: rgba(247, 242, 232, .5);   /* 原用 --ink-faint(.42)=3.7:1，小字不达 AA；.5 实测 5.0:1，既暗又读得清 */
  margin: 0 0 7px; text-align: center;
}
.landing-foot .foot-title-2 { margin-top: 22px; }
.landing-foot .foot-body {
  font-size: 12px; line-height: 1.85; letter-spacing: .02em;
  color: var(--ink-dim); max-width: 30em; margin: 0 auto;
}
.landing-foot .foot-small {
  font-size: 12px; line-height: 1.8; color: var(--ink-dim);
}
@media (max-width: 400px) {
  .landing-foot { margin-top: 36px; }
  .landing-foot .foot-body { font-size: 11.5px; }
}


/* ---------- 等待页：星尘聚拢时，中心升起一层暖金光核 ----------
 * 与 fx.js 的 setConverge(true) 配套（它给 html 加 .converging）。
 * 语义：等他答的这段时间不是"空等"，而是两个人的光正在靠到一起。
 * reduced-motion（html.no-motion）时不动，只留静态光核。 */
#bg-aurora::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 1.4s ease;
  background: radial-gradient(46% 36% at 50% 42%, rgba(231,200,154,.22), rgba(231,200,154,.07) 46%, rgba(231,200,154,0) 74%);
}
html.converging #bg-aurora::after { opacity: 1; animation: gather 8s ease-in-out infinite; }
@keyframes gather { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
html.no-motion.converging #bg-aurora::after { animation: none; }


/* ---------- 一行小字链接（hub 的"重新答一遍"，2026-09-29 加） ----------
 * 用途：把"会覆盖已有答案"的次要操作从按钮降级成文字链，别跟主操作抢注意力。 */
.btn-link {
  display: block; width: 100%; margin: 14px auto 0; padding: 8px 6px;
  background: none; border: 0; cursor: pointer; text-align: center;
  font-family: var(--sans); font-size: 13px; line-height: 1.7;
  color: rgba(247, 242, 232, .68);            /* 评测：.58/12.5px 太弱，像说明文字而不像能点 */
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(231, 200, 154, .35);
  transition: color .2s, text-decoration-color .2s;
}
.btn-link:hover { color: var(--gold-hi); text-decoration-color: rgba(231, 200, 154, .7); }


/* ---------- 题诗（雅致）----------
 * 三处：等待页 / 报告结尾 / 卡片落款（卡片是竖排）。
 * 诗句全部取自唐宋（公有领域，可商用，无版权风险），原文与作者已逐条核对（2026-09-29，m.baidu.com）。
 * 用法要点：楷体 + 疏字距 + 疏行距，就是"雅"；字距会在行尾多留一格，用 text-indent 补回来。 */
.poem {
  font-family: var(--kai); font-size: 17px; line-height: 1.95;
  letter-spacing: .18em; text-indent: .18em;
  color: rgba(231, 200, 154, .88); text-align: center; margin-top: 46px;   /* 评测：题诗略偏上、下方留白偏大 → 往下挪一点 */
}
.poem-from {
  font-family: var(--kai); font-size: 12px; letter-spacing: .12em;
  color: rgba(247, 242, 232, .5); text-align: center; margin-top: 9px;
}
.closing { margin: 42px 0 6px; text-align: center; }
.closing-poem {
  font-family: var(--kai); font-size: 20px; line-height: 1.95;
  letter-spacing: .16em; text-indent: .16em;
  color: rgba(231, 200, 154, .92);
}
.closing-from {
  font-family: var(--kai); font-size: 12px; letter-spacing: .12em;
  color: rgba(247, 242, 232, .55); margin-top: 9px;
}
.closing-note {
  font-size: 13px; line-height: 1.9; color: rgba(247, 242, 232, .62);
  margin: 14px auto 0; max-width: 30em;
}


/* ---------- 碧玉璧（hub）：上下两半往中间合拢，合拢后不再分开 ----------
 * 环心正好落在两个按钮的中间：按钮"长"在玉璧的孔里（所以按钮要比环孔窄 —— 见下面 .jade-btns > .btn 的宽度算式；
 * 按钮若比环宽，玉璧左右两侧被遮住，合拢那一瞬就看不见完整的一圈了）。
 * 环带里排两行字：上弧＝铭文（hub 那句）/ 下弧＝款识（产品名）；两行都由 app.js 从内容资产传进来。
 * 动效只动 transform / opacity；prefers-reduced-motion（html.no-motion）时静止成合拢的完整玉璧。
 * .jade-wrap 只负责留出上下空间，环本身绝对定位并溢出容器（别加 overflow:hidden）。 */
.jade-wrap { padding: 150px 0; }
.jade-btns { position: relative; }
.jade-h1 {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(calc(100vw - 16px), 380px); margin: 0; padding: 0;
  pointer-events: none;                          /* 绝不挡住按钮 */
  z-index: 0;
}
.jade-h1 svg { display: block; width: 100%; height: auto; overflow: visible; }
.jade-btns > .btn, .jade-btns > .btn-link { position: relative; z-index: 1; }
/* 按钮宽度＝环孔直径的 83% 再留 48px：环孔 = SVG 宽 × 388/500 = .776 */
.jade-btns > .btn {
  width: min(240px, calc(min(100vw - 16px, 380px) * .776 - 48px));
  margin-left: auto; margin-right: auto;
}

/* 环带里那两行字（楷体：上弧铭文 / 下弧款识） */
.jade-text { font-family: var(--kai); fill: rgba(233, 204, 158, .95); letter-spacing: 2.2px; }
.jade-seal { letter-spacing: 4.6px; fill: rgba(233, 204, 158, .86); }

/* 玉璧本身可点（点它＝水波荡漾）：只有玉璧这块盘面响应，页面其余地方不受影响 */
.jade-hit { pointer-events: all; }

/* 两半从上下分开 → 往中间合拢 → **保持合拢**（一次性：循环会跟"选按钮"抢注意力） */
@keyframes jadeUp {
  0%   { transform: translateY(-22px); opacity: 0; }
  8%   { transform: translateY(-22px); opacity: 1; }
  20%  { transform: translateY(-22px); }
  46%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}
@keyframes jadeDown {
  0%   { transform: translateY(22px); opacity: 0; }
  8%   { transform: translateY(22px); opacity: 1; }
  20%  { transform: translateY(22px); }
  46%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}
.jade-top, .jade-bottom { transform-box: view-box; transform-origin: 50% 50%; }
.jade-top    { animation: jadeUp 5.6s cubic-bezier(.24,.78,.22,1) .35s both; }
.jade-bottom { animation: jadeDown 5.6s cubic-bezier(.24,.78,.22,1) .35s both; }

/* 合拢那一刻：星芒一闪 + 光晕亮一下（分家那一段保持安静） */
@keyframes jadeBurst {
  0%, 36% { opacity: 0; transform: scale(.92); }
  50%     { opacity: .95; transform: scale(1.03); }
  68%     { opacity: 0; transform: scale(1.12); }
  100%    { opacity: 0; }
}
.jade-burst { transform-box: view-box; transform-origin: 50% 50%; animation: jadeBurst 5.6s ease-out .35s both; }
@keyframes jadeRing {
  0%, 32% { opacity: .22; }
  50%     { opacity: .62; }
  70%     { opacity: .34; }
  100%    { opacity: .30; }
}
.jade-glowring { animation: jadeRing 5.6s ease-out .35s both; }

/* 绕着环走的那道光（玉佩上流转的光）：合拢之后还在走，玉是"活"的 */
@keyframes jadeSpin { to { transform: rotate(360deg); } }
@keyframes jadeGlint { 0%, 100% { opacity: .18; } 50% { opacity: .6; } }
.jade-sweep {
  transform-box: view-box; transform-origin: 50% 50%;
  animation: jadeSpin 18s linear infinite, jadeGlint 7s ease-in-out infinite;
}

/* 减弱动态效果：静止成"合拢"的完整玉璧（正是那句话的意思），只留一点走光；水波不出现 */
.no-motion .jade-top, .no-motion .jade-bottom, .no-motion .jade-burst, .no-motion .jade-glowring,
.no-motion .jade-sweep { animation: none !important; }
.no-motion .jade-burst { opacity: 0; }
.no-motion .jade-sweep { opacity: .3; }   /* 停掉旋转，只留一道静态微光 */

/* ---------- 可爱的心形光标（32×32 PNG data URI，零外链；输入框里仍是 I 形） ---------- */
html, body, * {   /* 用户 2026-09-29：光标全站恒为心形 —— 悬停按钮/答题选项/输入框都不许切成手型。
   原来只挂 body/a/button/.btn，而 .opt（答题选项）自带 cursor:pointer、粘贴块 cursor:copy、
   输入框 cursor:text，都会把心形顶掉；这里用 !important 一次性压住所有局部规则。 */
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADQUlEQVR42u2VbUtTYRjHz0foI/gR/AatoBdBEUEFvSiiF71IipFWlKjrAazERrNc04TZilhTl5k1taaSQQ+rucwojQrTLKKWbm07j//u//GF5J6OtYqgC35wcd/X9f9fO7vPuSVpSeD1xx3G8Hjc8A3DaL2dTfsQjP5RYPxdENOfV5iInGvmXq4eaglNakuFwjS/+QT6+T7o7lB+2oToQAyYnI0S5lwr2CM0qZ13CLyPlxnhsbh+thd6UxHct6B3P4QRe2vC3Fwr1ie06UGvrAGM8Smn5glBc3ZbQm8PQx8YXUDkVvvoQa+sAfShZ3GtoQuWcfVAu9C/APNl9NJryeP/Uq7570Ktv5qDAFTnNWHUB80nfqn3NtRzN6Ce7MhTXxx60XPx8U/O2tSWEJRjV7JQT3UsGPc+gj48Bm0gCi0wYg6Rq94K9KLn4gDP39nUputQ6nzZHBcNF8TZ6LwH7VYEWs8DqJfCUBq7ctdbgF70XBzg5YxNcXVDPuzNTe1FKPV+YdoJ5VQA8tHLkKu9+euLQC96Lp6B6c82peUm5ANtfwR60fOHg6h2jiBT1YpMZQsy+zy/B2oLD3plvYZaODYoNwSQqWlHxuEThS1I720uCdQyNYU2PeiV/R14+sau+oehXBYH7PwNpPeLAXa7SoPQoia16UGv7E+xuFT0yGRcG4yZ/1Ha3ozULmdJoBY1qU0PeuW8D4zXHxyaeNdldw9SFS6kdjaUBqFFTWrTI+9taEx9WqHffxGXPb1m07ftJ0qCOYDQpDY9Cl7JxsSMXem4i1SVB8mtx0sCtahJbclK6I8mghlXEMlt9UhuPvJrCA1qUVOyGnxMWng0mq71IrGpDomNNT+H6KUGtYo++hxDlKv9j+OpKjcSG6qRWH94eYge9lKDWtLPhDix5WooEv9W2Yz5dYcwv/agNUQte9hLDelXwnjzsUzti0RT1W2m8NyayoKwhrXsYa9UijDPxMizYPp0APNbHJhbbcfcqiWINe6xhrXL/s8tvR3RV3bZP4jknjOYW3sAX1fuNWHONe6xRvqdYbyaLVfvRKPpxqtIVjhNmHONe9KfCi0y4ZADQyDMpb8R+vOpHUT6H//jX47vljNN4AbLAqwAAAAASUVORK5CYII=") 16 15, auto !important;
}
input[type="text"], input[type="password"], input[type="number"], textarea { cursor: text; }


/* ---------- 大标题纹饰（用户：用精美的花纹装饰一下，要高端大气奢华感）----------
 * 左右各一枚如意云纹收尾（右侧是同一份 SVG 水平镜像），中间一枚小菱形；
 * 纯 CSS 伪元素 + 内联 SVG，零外链文件；窄屏（<352px）自动撤掉，免得挤到换行。 */
.page > h1 { display: flex; align-items: center; justify-content: center; gap: 13px; }
.page > h1::before, .page > h1::after {
  content: ""; flex: 0 0 auto; width: 46px; height: 15px; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2772%27%20height%3D%2722%27%20viewBox%3D%270%200%2072%2022%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23E7C89A%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M4%2011H42%27%20stroke-width%3D%271%27%20opacity%3D%27.30%27%2F%3E%3Cpath%20d%3D%27M42%2011c0-4.6%203.6-7.4%208-7.4s8%202.8%208%207.4%27%20stroke-width%3D%271.3%27%20opacity%3D%27.62%27%2F%3E%3Cpath%20d%3D%27M50%203.6v3.4M50%2014.4v3.4%27%20stroke-width%3D%271.1%27%20opacity%3D%27.45%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M64%2011l3.6%202.8v-5.6z%27%20fill%3D%27%23E7C89A%27%20opacity%3D%27.72%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.page > h1::before { transform: scaleX(-1); }
@media (max-width: 352px) { .page > h1::before, .page > h1::after { display: none; } }
/* 报告原型名（可能两行）：给一枚居中对称纹，别在两侧挂花 */
.report-type::after {
  content: ""; display: block; width: 128px; height: 20px; margin: 16px auto 0; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27128%27%20height%3D%2720%27%20viewBox%3D%270%200%20128%2020%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23E7C89A%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M4%2010H44%27%20stroke-width%3D%271%27%20opacity%3D%27.28%27%2F%3E%3Cpath%20d%3D%27M44%2010c0-4.4%203.4-7%207.6-7s7.6%202.6%207.6%207%27%20stroke-width%3D%271.25%27%20opacity%3D%27.6%27%2F%3E%3Cpath%20d%3D%27M124%2010H84%27%20stroke-width%3D%271%27%20opacity%3D%27.28%27%2F%3E%3Cpath%20d%3D%27M84%2010c0-4.4-3.4-7-7.6-7s-7.6%202.6-7.6%207%27%20stroke-width%3D%271.25%27%20opacity%3D%27.6%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M64%2010l3.4%202.6v-5.2z%27%20fill%3D%27%23E7C89A%27%20opacity%3D%27.75%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}