/* ==========================================================================
   天使之约 · AI 面相分析（附加样式）
   —— 仅补充本页专属组件：照片上传、解读报告、桃花速查等；
      版式、配色、卡片、Tabs、收款层等全部沿用 css/style.css 与 css/baobao.css。
   ========================================================================== */

/* 首屏与 CTA 的大字水印改为「缘」（style.css 默认是「吉」） */
.cta-band::after { content: "缘"; }

/* ==========================================================================
   本页色盘：把 style.css 的米色档整体换成淡樱粉
   —— 只重定义 :root 变量，本文件只有 face.html 加载，其他页面不受影响；
      几百处引用这些变量的组件（卡片、按钮、分隔线、导航、表单）会一起变粉。
   ========================================================================== */
:root {
  --paper: #fdf3f6;        /* 卡片主面：极淡粉 */
  --cream: #fefafb;        /* 页面底：几乎白，只带一点粉 */
  --cream-mid: #fbeaf0;    /* 深一档：内嵌分区、取景框 */
  --cream-deep: #f9e2ea;
  --line: #f6dde5;         /* 分隔线：淡粉 */
  --gold: #ddabbb;         /* 原缇金换成淡玖瑰（hover 描边、空心按钮） */
  --gold-soft: #fdeef3;
  --vermilion-soft: #fdf0f3;
  --fx-field: #fffcfd;     /* 输入框 / 取景框 / 输出屏：最浅，保证正文可读 */
}
/* 导航条的毛玻璃底色在 style.css 里是写死的米色，单独换成粉 */
.nav { background: rgba(254,250,251,.88); }

/* ---------- 表单容器：换掉起名页的 #nameForm 选择器，底色交给外层白卡 ---------- */
.bb-form #faceForm {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
}
/* 第一排三列：分析对象 / 性别（合盘时＝男方年份）/ 出生年份（合盘时＝女方年份）；感情状态独占第二排 */
.bb-form #faceForm .tool-row { grid-template-columns: repeat(3, max-content); }
.bb-form #faceForm .tool-row .field:nth-child(4) { grid-column: 1 / -1; }
.bb-form #faceForm .tool-row .field:nth-child(5) { grid-column: 1 / -1; }
/* 出生年份是原生 select：baobao.css 只把 tool-row 里的 input 做成无边框样式，select 没有规则，
   这里按 seg-item 的观感统一（同底、同圆角、同字号），免得它在一排按钮里显得突兀 */
.bb-form #faceForm .tool-row .field select {
  width: auto; min-width: 90px; padding: 5px 24px 5px 9px;
  border: 1px solid var(--line); border-radius: 3px; background-color: var(--cream);
  background-position: right 7px center;
  color: var(--ink-soft); font-size: 12.5px;
}
.bb-form #faceForm .tool-row .field select:focus { border-color: var(--vermilion); box-shadow: none; }
/* 「单人面相 / 双人合盘」始终平铺一排，不换行 */
.bb-form #faceForm #modeSeg { flex-wrap: nowrap; }
.bb-form #faceForm #modeSeg .seg-item { padding: 5px 10px; white-space: nowrap; }
/* 同样的处理扩到这一排剩下的分段按钮（性别 / 感情状态）：
   style.css 里 .tool-row .seg 是 flex-wrap: wrap，列宽稍窄就会把「男」「已婚」挤到下一行 */
.bb-form #faceForm .tool-row .seg { flex-wrap: nowrap; }
.bb-form #faceForm .tool-row .seg-item { padding: 5px 10px; white-space: nowrap; }
/* 关注主题：去掉左侧标签，七个选项平铺一排；宽度不够时（如手机）改为左右横向滑动，不折行不裁切。
   这行单独改成 block：否则 .segm 作为 flex 子项会被内容撑宽，overflow 拿不到确定宽度，滑不动 */
.bb-form #faceForm .fx-scroll-line { display: block; }
.bb-form #faceForm .adv-line .segm[data-multi="focus"],
.bb-form #faceForm .adv-line .segm[data-multi="pairfocus"] {
  display: flex;
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bb-form #faceForm .adv-line .segm[data-multi="focus"]::-webkit-scrollbar,
.bb-form #faceForm .adv-line .segm[data-multi="pairfocus"]::-webkit-scrollbar { display: none; }
.bb-form #faceForm .adv-line .segm[data-multi="focus"] .seg-item,
.bb-form #faceForm .adv-line .segm[data-multi="pairfocus"] .seg-item {
  padding: 5px 10px; font-size: 12px; white-space: nowrap;
}
/* 按钮文案只剩金额，把它推到表单右边缘（昵称输入框仍靠左） */
.bb-form #faceForm .tool-submit { justify-content: space-between; }
.bb-form #faceForm .tool-submit .btn { margin-left: auto; }

/* EN desktop (≥641px) only: the localized CTA — especially the rejected label "Reupload photo to continue" — is wider than the zh text, so the fixed 180/210 name inputs pushed the button off the right edge (clipped). Slim the two name inputs (they shorten toward the left) and let them yield space, so the button moves left and always stays fully on-card. zh keeps its own css untouched. */
@media (min-width: 641px) {
  .bb-form #faceForm .tool-submit .field-row { flex: 0 1 auto; min-width: 0; grid-template-columns: minmax(0, 156px) minmax(0, 176px); }
  .bb-form #faceForm .tool-submit .field-row .field { min-width: 0; }
  .bb-form #faceForm .tool-submit .field-row .field input { min-width: 0; width: 100%; }
  .bb-form #faceForm .tool-submit .btn { padding: 10px 30px; }
}

/* 双人合盘：性别列改成「男方出生年份」下拉——隐藏男女按钮，显示年份选择器（女方年份沿用右侧原「出生年份」列） */
.bb-form #faceForm #birthYearMale { display: none; }
.bb-form #faceForm .field.fx-pair .seg { display: none; }
.bb-form #faceForm .field.fx-pair #birthYearMale { display: inline-block; }

/* ---------- 照片上传区 ---------- */
.fx-up-wrap { padding: 14px 12px 4px; background: transparent; border-bottom: 1px solid var(--line); }
.fx-up-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
/* 标题不参与挤压：否则右侧说明文字会把「上传照片」挤成两行（手机明显） */
.fx-up-head b { flex: 0 0 auto; color: var(--ink); font-family: var(--serif); font-size: 15px; white-space: nowrap; }
.fx-up-head span { color: var(--ink-soft); font-size: 12px; }
.fx-up-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fx-up-grid.single { grid-template-columns: minmax(0, 1fr); }
.fx-up { min-width: 0; }
.fx-up.hide { display: none; }
.fx-up > label { display: block; margin-bottom: 5px; color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.fx-up > label i { color: var(--vermilion); font-style: normal; font-weight: 800; }
.fx-up-box {
  position: relative; display: grid; place-items: center; min-height: 0; padding: 14px 12px;
  border: 1px dashed var(--gold); border-radius: 7px;
  /* 取景框两侧的留白铺一张左右对称的羽翼底图（中间留空）。
     中间那个正方形取景区的底色是不透明的 --cream-mid，正好盖在空的那段上。
     遮罩用均匀一层（不能用方向渐变，否则对称的图会被压成一边深一边浅）。
     注意 hover / dragover / filled 三态都得把这两层重写一遍 ——
     background 是简写属性，只写颜色会把底图整个抹掉。 */
  background:
    linear-gradient(rgba(255,252,253,.78), rgba(255,252,253,.78)),
    var(--fx-field) url('../img/upload-bg.webp') center / cover no-repeat;
  text-align: center; cursor: pointer; transition: all .2s;
}
.fx-up-box:hover, .fx-up-box.dragover {
  border-color: var(--vermilion);
  background:
    linear-gradient(rgba(251,234,240,.72), rgba(251,234,240,.72)),
    var(--cream-mid) url('../img/upload-bg.webp') center / cover no-repeat;
}
.fx-up-box:hover .fx-ph, .fx-up-box.dragover .fx-ph { border-color: var(--gold); }
.fx-up-box .fx-ico { font-size: 30px; line-height: 1; }
.fx-up-box .fx-t { margin-top: 8px; color: var(--ink); font-size: 13.5px; font-weight: 700; }
.fx-up-box .fx-s { margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.fx-up-box input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* 框内固定一个正方形取景区：占位提示与照片预览尺寸一致，上传后不会被图片撑大（单人、双人同用） */
.fx-up-box .fx-ph,
.fx-up-box img {
  box-sizing: border-box; width: min(100%, 150px); aspect-ratio: 1 / 1;
  border: 1px solid var(--line); border-radius: 6px; background: var(--cream-mid);
}
.fx-up-box .fx-ph { display: grid; align-content: center; justify-items: center; padding: 10px 8px; }
.fx-up-box .fx-ico { font-size: 22px; opacity: .5; }
.fx-up-box .fx-t { margin-top: 7px; color: var(--ink-soft); font-size: 11.5px; font-weight: 600; line-height: 1.6; }
.fx-up-box img { display: none; max-width: 150px; max-height: none; object-fit: contain; }
/* 上传前后内边距一致，避免外框高度跳动 */
.fx-up-box.filled {
  padding: 14px 12px; border-style: solid;
  background:
    linear-gradient(rgba(255,252,253,.78), rgba(255,252,253,.78)),
    var(--fx-field) url('../img/upload-bg.webp') center / cover no-repeat;
}
.fx-up-box.filled img { display: block; }
.fx-up-box.filled .fx-ph { display: none; }
.fx-up-tools { display: none; justify-content: center; gap: 10px; margin-top: 7px; }
.fx-up-box.filled + .fx-up-tools { display: flex; }
.fx-up-tools button {
  padding: 4px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--fx-field);
  color: var(--ink-soft); font-family: inherit; font-size: 12px; cursor: pointer;
}
.fx-up-tools button:hover { border-color: var(--vermilion); color: var(--vermilion); }
.fx-privacy { margin: 10px 2px 0; color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.fx-privacy b { color: var(--vermilion); font-weight: 700; }

/* ---------- 解读报告：综合指数、维度、十二宫速览 ---------- */
.fx-gong-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fx-gong {
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: linear-gradient(135deg,#fff,var(--fx-field));
}
.fx-gong b { display: block; color: var(--ink); font-family: var(--serif); font-size: 15px; }
.fx-gong em {
  display: inline-block; margin: 5px 0 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--gold-soft); color: var(--vermilion); font-size: 11px; font-style: normal; font-weight: 700;
}
.fx-gong p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.7; }
.fx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.fx-tags span {
  padding: 4px 11px; border: 1px solid rgba(192,57,43,.2); border-radius: 999px;
  background: #fff2ee; color: var(--vermilion); font-size: 12px;
}
/* Couple almanac grid (replaces the radar/six-bar block) */
.fx-almanac { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.fx-alm {
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: linear-gradient(135deg,#fff,var(--fx-field));
}
.fx-alm small { display: block; color: var(--muted); font-size: 11.5px; }
.fx-alm strong { display: block; margin: 4px 0 6px; color: var(--vermilion); font-family: var(--serif); font-size: 15px; line-height: 1.35; font-weight: 700; }
.fx-alm p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.7; }
/* Couple score block spans full width once the radar is gone */
.bbp-score-row.bbp-score-solo { grid-template-columns: minmax(0,1fr); }
.fx-disclaim {
  margin: 18px 0 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 7px;
  background: var(--fx-field); color: var(--muted); font-size: 12px; line-height: 1.75;
}

/* ---------- 常见问题：样式全部复用 style.css 里的 .bz-faq（含 .card.bz-faq 左右内边距收窄），本页不需额外规则 ---------- */

/* ---------- 报告样例：结构与右栏真实报告一致，直接复用 .bbp-* / .fx-gong / .ai-rich，
              这里只补样例专属的引导语、节选标记与末尾的行动区 ---------- */
.fx-sample-lead { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.fx-sample-note {
  display: inline-block; margin-left: 9px; padding: 2px 9px; border-radius: 99px;
  background: var(--fx-field); color: var(--muted); font-family: var(--sans);
  font-size: 11.5px; font-weight: 400; vertical-align: middle;
}
.fx-sample-rest { margin-top: 22px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--fx-field); }
.fx-sample-rest h4 { margin: 0 0 10px; color: var(--ink); font-family: var(--serif); font-size: 15px; font-weight: 700; }
.fx-sample-rest ul { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.85; }
.fx-sample-rest li + li { margin-top: 5px; }
.fx-sample-rest b { color: var(--vermilion); }
.fx-sample-cta { margin-top: 18px; text-align: center; }
.fx-sample-cta p { margin: 0 0 14px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.8; }

/* ---------- 侧栏：今日桃花提示 ---------- */
.fx-side-list { margin: 10px 0 0; padding: 0; list-style: none; }
.fx-side-list li {
  display: flex; gap: 8px; padding: 7px 0; border-top: 1px dashed var(--line);
  color: var(--ink-soft); font-size: 13px; line-height: 1.7;
}
.fx-side-list li:first-child { border-top: 0; }
.fx-side-list li span { flex: none; color: var(--vermilion); font-weight: 700; }
.fx-side-note { margin: 10px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.6; }

@media (max-width: 900px) {
  .bb-form #faceForm .tool-row { grid-template-columns: 1fr 1fr; }
  /* 窄屏两列：分析对象・感情状态各自独占一行 */
  .bb-form #faceForm .tool-row .field:nth-child(1),
  .bb-form #faceForm .tool-row .field:nth-child(4),
  .bb-form #faceForm .tool-row .field:nth-child(5) { grid-column: 1 / -1; }
  /* 性别（合盘时＝男方年份）与出生年份（合盘时＝女方年份）显式占同一排的左右两列 */
  .bb-form #faceForm .tool-row .field:nth-child(2) { grid-column: 1 / 2; }
  .bb-form #faceForm .tool-row .field:nth-child(3) { grid-column: 2 / 3; }
    /* 换行后，行与行之间补一条横向分隔线（桌面靠相邻字段间的竖线分隔，手机换行后改用横线） */
    .bb-form #faceForm .tool-row .field:nth-child(2),
    .bb-form #faceForm .tool-row .field:nth-child(3),
    .bb-form #faceForm .tool-row .field:nth-child(4),
    .bb-form #faceForm .tool-row .field:nth-child(5) { border-top: 1px solid var(--line); padding-top: 11px; }
    /* 行首字段左侧那条竖线换行后成了多余的竖痕，隐藏；只保留同排两列间（出生年份左侧）的竖线 */
    .bb-form #faceForm .tool-row .field:nth-child(2)::before,
    .bb-form #faceForm .tool-row .field:nth-child(4)::before,
    .bb-form #faceForm .tool-row .field:nth-child(5)::before { display: none; }
  .fx-gong-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bb-form #faceForm .tool-row { grid-template-columns: 1fr 1fr; }
  .fx-up-wrap { padding: 11px 8px 2px; }
  /* 手机上双人合盘的两个上传框仍并排一行（单人模式由 .fx-up-grid.single 占满） */
  .fx-up-grid { gap: 8px; }
  /* 手机上取景框整体缩小，单人与双人三个框同步 */
  .fx-up-box { min-height: 0; padding: 9px 7px; }
  .fx-up-box.filled { padding: 9px 7px; }
  .fx-up-box .fx-ph,
  .fx-up-box img { width: min(100%, 108px); }
  .fx-up-box img { max-width: 108px; }
  .fx-up-box .fx-ph { padding: 6px 5px; }
  .fx-up-box .fx-ico { font-size: 19px; }
  .fx-up-box .fx-t { margin-top: 5px; font-size: 11px; }
  .fx-gong-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   面相分析工作台：左=表单 / 右=解读输出面板
   —— 三态切换（待机 → 生成中 → 报告）全部在右栏内完成，表单区不受影响。
   ========================================================================== */
/* 本页取消右侧边栏，正文单列通栏，与工作台等宽 */
.layout { grid-template-columns: minmax(0,1fr); }

/* 出结果后 JS 会把「填写说明」#formGuide 设为 display:none，工作区就直接贴上「报告样例」，
   而 .fx-work + .bb-form-guide 的 margin-top 因相邻兄弟被隐藏而失效；所以给工作区本身一条下外边距，
   无论下面接的是填写说明还是样例都保持间距（idle 时与填写说明 margin-top 折叠、不叠加变大） */
.fx-work.bb-form { padding: 0; border: 0; background: transparent; box-shadow: none; margin-bottom: 36px; }
/* 外层取消了 22px 内边距，因此抵消「填写说明」原本 -10px 的上提，否则会压到表单底部 */
.fx-work + .bb-form-guide { margin-top: 36px; }
.fx-work #faceForm { overflow: visible; border: 0; border-radius: 0; background: transparent; }
/* 两列：左=表单 / 右=解读输出；stretch 让右栏高度跟左栏一致 */
.fxw-grid {
  display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  gap: 16px; align-items: stretch;
}
/* 左栏表单：白卡 + 浅线 + 轻投影（与 style.css 的 .card 同一套） */
.fxw-formcol {
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow-sm); color: var(--ink);
}
.fxw-formcol .block-title { margin: 0; padding: 16px 14px 0; }
.fxw-formcol .tool-adv { margin-top: 0; }
/* 右栏卡片：与左栏同一套白卡 */
.fxw-card {
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow-sm);
}

/* ---------- 右栏：解读输出 ---------- */
/* .fxw-out 写 height:100% 拦不住报告：grid 行高是两列内容取大，报告一长就把行撑高，
   100% 也随之变高。改成：外层 .fxw-outcol 做定位参照（它本身被 stretch 拉到行高），
   卡片绝对定位钉死四边 —— 绝对定位不参与行高计算，行高于是只由左栏表单定。 */
.fxw-outcol { position: relative; min-height: 520px; }
.fxw-out { position: absolute; inset: 0; display: flex; flex-direction: column; }
.fxw-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fxw-title { margin: 0; color: var(--vermilion); font-family: var(--serif); font-size: 19px; font-weight: 700; }
.fxw-screen {
  flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--fx-field);
  /* 滚动条常驻排版，报告出来前后宽度不跳 */
  scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--gold-soft) transparent;
}
.fxw-screen::-webkit-scrollbar { width: 8px; }
.fxw-screen::-webkit-scrollbar-track { border-radius: 99px; background: transparent; }
.fxw-screen::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: rgba(192,57,43,.28); background-clip: content-box; }
.fxw-screen:hover::-webkit-scrollbar-thumb { background: rgba(192,57,43,.45); background-clip: content-box; }
/* 待机态：底图很淡地铺一层，中间一句提示。
   原来引的 img/hero-2.webp 是起名宝典站的残留，文件不存在（404），所以这里一直是空白。
   现在换成本站的竖版人像；用 cover 不用 contain，否则 3:4 的图在更宽的屏幕里左右会留白。
   四边用负值撑到边框，一点不留：上下左三边各隔着 12px 内边距，
   右侧还多一道 8px 的滚动条预留槽（scrollbar-gutter: stable）所以是 20px。
   这组值正好填满 padding box，不会溢出、不会撑出滚动条；圆角由 .fxw-screen 自己裁。
   opacity 保持 .16，只当水印，不能抢中间那句提示文字。 */
.fxw-idle { position: relative; display: grid; place-items: center; height: 100%; padding: 6px 2px; }
/* 待机态改为展示「面相十二宫」示意头像，原淡水印底图不再需要 */
.fxw-idle::before { display: none; }

/* ===== 面相十二宫示意图（待机态；整框头像做底，上下渐变浮层压字；出解读时随 .fxw-idle 一起隐藏） ===== */
.fx-map {
  position: absolute; inset: -12px -28px -12px -12px; z-index: 0;
}
/* Backdrop moved to the pseudo-element at z-index:-1 with its own opacity .4 (matching the baby idle backdrop); the twelve-palace labels and legend all sit above it and stay crisp */
.fx-map::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('../img/wiv.webp?v=20260926a') center bottom / cover no-repeat;
  opacity: .4;
}
/* ===== 夫妻相分析模式：示意图换成干净底图 face-01.webp，隐藏全部文字层（标题/图例/解释卡）；底图透明度统一钉成 .4，中英夫妻模式一致；单人面相不受影响 ===== */
.fx-map.fx-couple::before {
  background-image: url('../img/face-01.webp?v=20260926a');
  opacity: .4;
}
.fx-map.fx-couple .fx-map-head,
.fx-map.fx-couple .fx-dot,
.fx-map.fx-couple .fx-map-foot,
.fx-map.fx-couple .fx-map-info {
  display: none !important;
}
/* 顶部标题：不加浮层，直接压在图上 */
.fx-map-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding: 10px 12px 28px;
  text-align: center;
}
.fx-map-head b { display: block; color: var(--vermilion); font-family: var(--serif); font-size: 14px; font-weight: 700; }
.fx-map-head span { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 11px; }
/* 脸部编号与底部图例共用同一枚红圈白字徽标 */
.fx-dot,
.fx-map-legend i {
  flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--vermilion);
  color: #fff; font-size: 9px; font-style: normal; font-weight: 700; line-height: 15px; text-align: center;
}
/* 脸部编号直接占据原灰色标点坐标，并使用更小的灰色圆圈 */
.fx-dot {
  display: none;
  position: absolute; z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: #9da3aa; font-size: 8px; line-height: 12px;
}
/* 图例：移到图片左侧空白处，垂排单列一排一个，垂直居中 */
.fx-map-foot {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); right: auto; z-index: 3; padding: 10px 12px;
}
.fx-map-legend {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: auto; justify-content: start; gap: 7px;
}
.fx-map-legend li { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
/* 图例徒标改成与图片脸上灰点一致的灰色 */
.fx-map-legend i { background: #9da3aa; }
/* 图例可点击：鼠标手形、选中态高亮 */
.fx-map-legend li { cursor: pointer; transition: color .15s ease; }
.fx-map-legend li:hover { color: var(--vermilion); }
.fx-map-legend li.active { color: var(--vermilion); font-weight: 700; }
.fx-map-legend li.active i { background: var(--vermilion); box-shadow: 0 0 0 2px rgba(192,57,43,.35); }
/* 点击后在图片下方（肩部空白处）弹出的宫位介绍卡 */
.fx-map-info {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  z-index: 4; width: min(66%, 320px); display: none;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,.5); border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(0,0,0,.1); text-align: left;
}
.fx-map-info.show { display: block; }
.fx-map-info b { display: block; color: var(--vermilion); font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.fx-map-info p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.65; }
.fx-map-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.fx-map-tags span {
  padding: 3px 11px; border-radius: 99px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .8); color: var(--ink-soft); font-size: 11px;
}
.fx-map-can { max-width: none; margin: 9px 0 0; text-align: center; color: var(--muted); font-size: 10.5px; line-height: 1.7; }
/* 报告在窄栏内的紧凑版式 */
.fxw-screen .ai-loading { padding: 64px 6px; }
.fxw-screen .bb-result-title { font-size: 16px; }
.fxw-screen .bb-primary { margin-top: 10px; padding: 11px 12px; }
.fxw-screen .bbp-head { flex-wrap: wrap; }
.fxw-screen .bbp-head h3 { font-size: 15.5px; }
.fxw-screen .bbp-score-row { grid-template-columns: minmax(0,1fr); gap: 8px; }
.fxw-screen .bbp-score strong { font-size: 36px; }
.fxw-screen .bbp-dims { grid-template-columns: minmax(0,1fr); }
.fxw-screen .fx-almanac { grid-template-columns: repeat(2,minmax(0,1fr)); }
.fxw-screen .fx-gong-grid { grid-template-columns: minmax(0,1fr); }
.fxw-screen .bb-analysis { margin-top: 12px; padding: 0 11px 12px; }
.fxw-screen .ai-sec { margin-top: 13px; }
.fxw-screen .bb-analysis .ai-sec:first-child { margin-top: 12px; }
.fxw-screen .ai-acts { margin-top: 14px; padding-top: 12px; }
/* 结果区两个按钮始终并排一行（盖掉 style.css 窄屏排竖） */
.fxw-screen .ai-acts.result-actions { flex-direction: row; flex-wrap: nowrap; gap: 10px; }
.fxw-screen .ai-acts.result-actions .btn { width: auto; flex: 1 1 0; text-align: center; }

/* EN 桌面版（≥1101px）：宫位介绍卡原来偏高，红字标题挡住了第 12 个图例「Palace of Home」。把整卡（含红字标题）下移、并调低白色描述框的行高让它更紧凑，从而让开图例。手机/平板（≤1100px）保持原样不动。 */
@media (min-width: 1101px) {
  .fx-map-info { bottom: 2%; }
  .fx-map-info b { margin-bottom: 3px; }
  .fx-map-info p { line-height: 1.42; }
}

@media (max-width: 1100px) {
  /* 平板与手机均采用 wiv.webp 原图比例，完整显示头顶、面部和肩部 */
  .fxw-grid { grid-template-columns: 1fr; }
  .fxw-outcol { height: auto; min-height: 0; }
  .fxw-out { position: relative; inset: auto; }
  .fxw-screen { flex: none; aspect-ratio: 493 / 720; }
  /* Keep the idle illustration fixed; once .fxw-idle is hidden, long generated reports remain scrollable. */
  .fxw-screen:has(> .fxw-idle:not([style*="display: none"])) { overflow-y: hidden; scrollbar-gutter: auto; }
  /* 与桌面一致：用负 inset 抵消 .fxw-screen 的 12px 内边距与右侧滚动槽，四边铺满不留白 */
  .fx-map { inset: -12px -28px -12px -12px; background-size: cover; background-position: center bottom; }
  /* 手机/苹果/平板：宫位介绍卡往下移、往右拉长（桌面不变）*/
  /* iPhone 上介绍卡仍会挡住第 12 个图例「Palace of Home」：压低顶部内边距、收紧红字间距与白框行高，让整卡更矮、红字随之下移，从而彻底让开图例（桌面用上面 ≥1101px 的规则） */
  .fx-map-info { bottom: 7%; width: min(88%, 420px); padding-top: 8px; }
  .fx-map-info b { margin-bottom: 2px; }
  .fx-map-info p { line-height: 1.38; }
  .fxw-screen .bbp-dims, .fxw-screen .fx-gong-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .fx-work + .bb-form-guide { margin-top: 22px; }
  .fx-work.bb-form { margin-bottom: 22px; }
  .fxw-screen .bbp-dims, .fxw-screen .fx-gong-grid { grid-template-columns: minmax(0,1fr); }
    .fxw-screen .fx-almanac { grid-template-columns: minmax(0,1fr); }
  /* 手机版：底部图例保持4列，字体与徒标适当缩小 */
  .fx-map-legend { gap: 3px 4px; }
  .fx-map-legend li { gap: 4px; font-size: 10px; line-height: 1.3; }
  .fx-map-legend i { width: 14px; height: 14px; font-size: 8.5px; line-height: 14px; }
  .fx-map-foot { padding: 24px 8px 8px; }
}
/* 打印时把这套「定高 + 内部滚动」全部解开，否则纸上只能印出可见的那一屏 */
@media print {
  .fxw-outcol { position: static; height: auto; min-height: 0; }
  .fxw-out { position: static; inset: auto; display: block; box-shadow: none; }
  .fxw-screen { overflow: visible; padding: 0; border: 0; background: none; }
}

/* ==========================================================================
   配色对齐站内现行主题（css/style.css 的 :root）
   —— baobao.css 里的 #f4e8d4 / #e8d8c0 / #d4a85d 是起名宝典的旧皮肤，
      本页只在这里把它覆盖成与首页同款：纸白卡 + 宣纸米白底 + 朱砂点缀 + 极浅分隔线。
      baobao.css 本身不动，起名相关页面不受影响。
   ========================================================================== */

/* 表单内部分区：底色统一交给白卡，只保留极浅分隔线 */
.bb-form #faceForm .tool-row {
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.bb-form #faceForm .tool-row .field + .field::before { border-left-color: var(--line); }
.bb-form #faceForm .tool-row .field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px var(--paper) inset;
}
.bb-form #faceForm .tool-adv { background: transparent; }

/* 选项按钮：一点点小圆角；选中态为朱砂淡底 + 朱砂字，只留 1px 细边框 */
.bb-form #faceForm .seg-item {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--cream);
  color: var(--ink-soft);
}
.bb-form #faceForm .seg-item:not(.active):hover { border-color: var(--gold); color: var(--ink); }
.bb-form #faceForm .seg-item.active {
  border-color: var(--vermilion);
  background: var(--vermilion-soft);
  color: var(--vermilion);
}

/* 昵称输入框改宣纸米白；主按钮回到主题的胶囊形 */
.bb-form #faceForm .tool-adv .field input {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream);
}
.bb-form #faceForm .tool-adv .field input:focus { background: var(--paper); }
.bb-form #faceForm .tool-submit .btn { border-radius: 999px; box-shadow: 0 6px 18px rgba(192,57,43,.3); }

/* 「填写说明」卡：去掉旧皮肤的金棕边与双层米黄，与两栏同为白卡 */
.fx-work + .bb-form-guide {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.fx-work + .bb-form-guide .bbg-head { border-bottom-color: var(--line); }
.fx-work + .bb-form-guide .bbg-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream);
  box-shadow: none;
}

/* ==========================================================================
   报告国际化皮肤（仅本页加载，同时作用于右栏真实报告与页面示例报告）
   —— 去掉 baobao.css 里“金棕内嵌框 + 金→红渐变条 + 米黄雷达网”这三个命理感最强的信号，
      换成中性底 + 单色朱砂点缀 + 扁平圆角卡片的现代风格。baobao.css 本身不动；
      本文件排在 baobao.css 之后加载，同特异性选择器靠层叠顺序覆盖。
   ========================================================================== */

/* 一、外框：抽掉金棕边与米黄 inset，换成白卡 + 极浅分隔线 + 轻投影 */
.bb-primary,
.bb-analysis {
  border-color: var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

/* 二、顶部：等级徽标从金底换成中性灰胶囊 */
.bbp-head > span {
  background: #f2f4f8;
  color: var(--muted);
  font-weight: 600;
}

/* 三、综合指数下的概述框：去金棕边 + 渐变，改中性底 */
.bbp-score p {
  border-color: var(--line);
  background: var(--fx-field);
}

/* 四、六维度条：扁平化——白卡 + 中性轨道 + 单色朱砂填充（去掉金→红渐变） */
.bbp-dim {
  border-color: var(--line);
  background: #fff;
}
.bbp-dim > div { background: #eef1f5; }
.bbp-dim i { background: var(--vermilion); }

/* 五、雷达图：米黄网格/轴改中性灰，数据多边形改朱砂描边 + 极淡填充。
   SVG 的 fill=/stroke= 是 presentation 属性，优先级最低，能被任意 CSS 规则覆盖。 */
.bbp-radar svg polygon { stroke: #e3e7ee; }
.bbp-radar svg line { stroke: #e3e7ee; }
.bbp-radar svg polygon:last-of-type {
  fill: rgba(192, 57, 43, .1);
  stroke: var(--vermilion);
}
.bbp-radar svg text { fill: var(--muted); }

/* 六、特征标签：从朱砂胶囊换成中性灰胶囊（国际化常见做法） */
.fx-tags span {
  border-color: var(--line);
  background: #f4f6f9;
  color: var(--ink-soft);
}

/* 七、面相部位卡：扁平白卡 + 极轻投影，分数徽标改极淡玫瑰底 */
.fx-gong {
  border-color: var(--line);
  background: #fff;
  box-shadow: 0 1px 2px rgba(40, 30, 50, .04);
}
.fx-gong em {
  background: var(--gold-soft);
  color: var(--vermilion);
}

/* ==========================================================================
   报告版式：章节化 + 紧凑化
   —— 右栏是一条窄栏，原先综合指数 46px、每节 24px 间距，一屏装不下两节，
      滚很久还看不到重点，所以这里把字号与留白整体收一档；
      同时把 style.css 的虚线标题换成「编号 + 实线」的章节头，读起来像一份报告而不是一串段落。
   ========================================================================== */

/* 章节标题：左侧朱砂标记 + 实线分隔，取代原本的整条虚线 */
.ai-sec > h3 {
  display: flex; align-items: center; gap: 9px;
  border-bottom: 1px solid var(--line);
}
.ai-sec > h3::before {
  content: ''; flex: none; width: 3px; height: 15px;
  border-radius: 2px; background: var(--vermilion);
}
/* 四章正文用序号章节头：隐藏的精读章节不生成盒子，也就不占编号 */
.bb-analysis { counter-reset: fxsec; }
.bb-analysis .ai-sec > h3::before {
  counter-increment: fxsec;
  content: counter(fxsec);
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 5px;
  background: var(--vermilion-soft); box-shadow: inset 0 0 0 1px rgba(192,57,43,.28);
  color: var(--vermilion); font-family: var(--sans, inherit); font-size: 12px; font-weight: 700;
}

/* 顶部版式：综合指数标题独占一行，两枚徽标（阅读类型 + 评级）在它下面一行同排——
   桌面与右栏窄栏一致。阅读类型 <small> 现在是 .bbp-head 的直接子节点（不再放在 <h3> 里），
   这样才能和评级胶囊排在同一行。 */
.bbp-head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 10px; }
.bbp-head h3 { flex: 1 1 100%; }
.bbp-head > small {
  flex: none; display: inline-block; margin: 0; padding: 3px 9px;
  border: 1px solid rgba(192,57,43,.22); border-radius: 5px;
  background: #fff2ee; color: var(--vermilion); font-size: 12px; line-height: 1.5;
}

/* 两人面相要点：双人合盘专属，两张对照卡，左朱砂右青绿以示区分 */
.fx-persons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fx-person {
  padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--vermilion);
  border-radius: 7px; background: #fff; box-shadow: 0 1px 2px rgba(40, 30, 50, .04);
}
.fx-person b {
  display: block; margin-bottom: 5px;
  color: var(--vermilion); font-family: var(--serif); font-size: 14px;
}
.fx-person p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.8; }
.fx-person-ta { border-left-color: var(--jade, #3f7d6e); }
.fx-person-ta b { color: var(--jade, #3f7d6e); }

/* 精读版专属章节：淡底区分，标题右侧挂一枚版本标，让 19.9 的增量看得见 */
.fx-pro-sec {
  padding: 12px 13px 13px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--fx-field);
}
.fx-pro-sec > h3 { margin-bottom: 10px; }
.fx-pro-sec > h3::after { content: none; }

/* 窄栏内的紧凑度再收一档：指数字号、卡片内边距、章节间距全部下调 */
.fxw-screen .bbp-head { margin-bottom: 10px; padding-bottom: 8px; }
.fxw-screen .bbp-score > label { margin-bottom: 2px; font-size: 12px; }
.fxw-screen .bbp-score em { font-size: 15px; }
.fxw-screen .bbp-score p { margin-top: 8px; font-size: 12.5px; line-height: 1.8; }
.fxw-screen .bbp-radar svg { max-width: 258px; }
.fxw-screen .bbp-dims { gap: 6px; margin-top: 10px; }
.fxw-screen .bbp-dim { grid-template-columns: 56px minmax(0, 1fr) 28px; gap: 7px; padding: 5px 8px; }
.fxw-screen .bbp-dim > div { height: 7px; }
.fxw-screen .ai-sec > h3 { margin-bottom: 10px; padding-bottom: 7px; font-size: 15px; }
.fxw-screen .ai-rich { font-size: 13.5px; line-height: 1.9; }
.fxw-screen .ai-rich .rich-p { margin-bottom: 8px; }
.fxw-screen .fx-gong { padding: 8px 10px; }
.fxw-screen .fx-gong b { font-size: 14px; }
.fxw-screen .fx-gong em { margin: 4px 0 5px; }
.fxw-screen .fx-gong p { font-size: 12px; line-height: 1.65; }
.fxw-screen .fx-tags { gap: 6px; margin-top: 10px; }
.fxw-screen .fx-tags span { padding: 3px 9px; font-size: 11.5px; }
.fxw-screen .fx-persons { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.fxw-screen .fx-pro-sec { padding: 10px 11px 11px; }
.fxw-screen .fx-disclaim { margin-top: 12px; padding: 8px 10px; font-size: 11.5px; line-height: 1.7; }

@media (max-width: 760px) {
  .fx-persons { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   综合指数区与宫位卡的专业化
   —— 原先这两处只有「名称 + 分数 + 一句话」，数字无参照、结论无做法，
      所以补上：档案条（表单选项列回）、四档标尺、基准线雷达、最强最弱结论行，
      以及每张宫位卡里的分级词、进度条与可执行要点。
   ========================================================================== */

/* 档案条：把表单里选的项原样列出来，让用户确认它们真的进了解读 */
.fx-profile {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 12px; padding: 9px 10px;
  border: 1px dashed var(--line); border-radius: 7px; background: var(--fx-field);
}
.fx-profile span {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
}
.fx-profile i { color: var(--muted); font-size: 11px; font-style: normal; }
.fx-profile b { color: var(--ink); font-size: 12px; font-weight: 700; }

/* 四档标尺：分数落在哪一档就点亮那一档，游标标出具体位置 */
.fx-gauge { margin: 12px 0 0; }
.fx-gauge-bar { position: relative; display: flex; gap: 3px; height: 22px; }
.fx-gauge-bar i {
  display: grid; place-items: center; overflow: hidden;
  border-radius: 4px; background: #f0f2f6;
  color: var(--muted); font-size: 10.5px; font-style: normal; white-space: nowrap;
}
.fx-gauge-bar i.on {
  background: var(--vermilion); color: #fff; font-weight: 700;
  box-shadow: 0 2px 6px rgba(192,57,43,.28);
}
.fx-gauge-bar i span { padding: 0 2px; }
.fx-gauge-pin {
  position: absolute; top: -5px; width: 0; height: 0; transform: translateX(-50%);
  border-right: 5px solid transparent; border-bottom: 6px solid var(--ink);
  border-left: 5px solid transparent;
}
.fx-gauge-ax {
  display: flex; justify-content: space-between;
  margin-top: 3px; color: var(--muted); font-size: 10px;
}

/* 雷达：基准线走金棕虚线，顶点补实心点，轴标后跟上具体分值。
   前面的 .bbp-radar svg polygon 把所有多边形描边压成中性灰了，基准线需要单独抬回来 */
.bbp-radar svg polygon.fx-base { stroke: #c9a86b; }
.bbp-radar svg circle.fx-dot { fill: #fff; stroke: var(--vermilion); stroke-width: 2; }
.bbp-radar svg .fx-rv { fill: var(--vermilion); font-size: 11px; font-weight: 700; }
.fx-radar-tip {
  width: 100%; margin: 2px 0 0;
  color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center;
}
.bbp-radar { flex-wrap: wrap; }

/* 六维结论行：最强 / 最弱 / 落差与格局定性 */
.fx-dim-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 14px 0 0; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--fx-field);
}
.fx-dn { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 999px; }
.fx-dn i { font-size: 10.5px; font-style: normal; opacity: .85; }
.fx-dn b { font-size: 12px; font-weight: 700; }
.fx-dn-hi { background: var(--vermilion-soft); color: var(--vermilion); }
.fx-dn-lo { background: #eef1f5; color: var(--muted); }
.fx-dim-note em {
  flex: 1 1 100%; color: var(--ink-soft); font-size: 11.5px; font-style: normal; line-height: 1.7;
}

/* 六维条改四列：标签 / 进度 / 分值 / 分级词，数字旁边必须有一句人话 */
.bbp-dim { grid-template-columns: 62px minmax(0, 1fr) 24px 36px; }
.fx-dlv { color: var(--muted); font-size: 10.5px; font-weight: 600; text-align: right; }
.bbp-dim[data-lv="a"] .fx-dlv { color: var(--vermilion); }
.bbp-dim[data-lv="d"] i { background: #c9a86b; }
.bbp-dim[data-lv="d"] em { color: var(--muted); }

/* 宫位 / 合盘维度卡：标题行 + 分级词 + 进度条 + 部位 + 判读 + 可做的事。
   分级不再靠左侧竖条区分，改由标题行的分级词徽标与进度条颜色承担 */
.fx-gong { padding: 10px 12px 11px; }
.fx-gong-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-gong-hd b { display: block; color: var(--ink); font-family: var(--serif); font-size: 15px; }
.fx-lv {
  flex: none; padding: 2px 8px; border-radius: 999px;
  background: var(--vermilion-soft); color: var(--vermilion); font-size: 10.5px; font-weight: 700;
}
.fx-gong[data-lv="c"] .fx-lv { background: var(--gold-soft); color: #8a641d; }
.fx-gong[data-lv="d"] .fx-lv { background: #eef1f5; color: var(--muted); }
.fx-gong-bar { display: grid; grid-template-columns: minmax(0, 1fr) 26px; gap: 8px; align-items: center; margin: 7px 0 6px; }
.fx-gong-bar > div { height: 6px; overflow: hidden; border-radius: 99px; background: #eef1f5; }
.fx-gong-bar i { display: block; height: 100%; border-radius: inherit; background: var(--vermilion); }
.fx-gong[data-lv="c"] .fx-gong-bar i { background: #c9a86b; }
.fx-gong[data-lv="d"] .fx-gong-bar i { background: #b9c0cc; }
/* 这枚分值原先是个金棕胶囊徽标（.fx-gong em），现在改成进度条右侧的纯数字，得把胶囊底拆干净 */
.fx-gong .fx-gong-bar em {
  display: block; margin: 0; padding: 0; border-radius: 0; background: none;
  color: var(--vermilion); font-size: 12px; font-style: normal; font-weight: 700; text-align: right;
}
.fx-gong p.fx-gong-pos { margin: 0 0 4px; color: var(--muted); font-size: 11px; letter-spacing: .2px; }
.fx-gong p.fx-gong-tip {
  margin: 7px 0 0; padding: 6px 8px;
  border-radius: 6px; background: var(--fx-field);
  color: var(--ink-soft); font-size: 11.5px; line-height: 1.7;
}
/* .fx-gong b 把宫名设成了 15px 宋体块级，要点前的小标题得改回行内正文号 */
.fx-gong p.fx-gong-tip b {
  display: inline; margin-right: 5px;
  color: var(--vermilion); font-family: inherit; font-size: inherit; font-weight: 700;
}

/* 逐项读完的汇总行：项数 / 均分 / 最强 / 最弱 */
.fx-gong-sum {
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  margin: 10px 0 0; padding: 8px 10px;
  border: 1px dashed var(--line); border-radius: 7px; background: var(--fx-field);
  color: var(--muted); font-size: 11.5px;
}
.fx-gong-sum span { display: inline-flex; align-items: baseline; gap: 4px; }
.fx-gong-sum b { color: var(--vermilion); font-weight: 700; }

/* 窄栏里再收一档 */
.fxw-screen .fx-profile { gap: 5px; margin-bottom: 10px; padding: 7px 8px; }
.fxw-screen .fx-profile span { padding: 2px 7px; }
.fxw-screen .fx-gauge { margin-top: 10px; }
.fxw-screen .fx-gauge-bar { height: 20px; }
.fxw-screen .fx-dim-note { margin-top: 11px; padding: 8px 9px; }
.fxw-screen .bbp-dim { grid-template-columns: 58px minmax(0, 1fr) 22px 32px; }

/* ==========================================================================
   结果区去框线：报告里各层内容盒子（含页面示例报告）一律去掉矩形边框，
   只保留最外层大卡（.bb-primary/.bb-analysis）与右栏输出屏（.fxw-screen）两圈外框。
   小圆角标签（档案条各项、特征标签）的描边一并去掉，只留淡底不留线。
   —— 双人卡保留左侧 3px 主色/青绿用竖条作区分，那是配色标记不是框线；
      背景与轻投影不是「线」，予以保留。本文件排在 baobao.css 之后，靠层叠覆盖其边框宽度。
   ========================================================================== */
.fx-profile,
.bbp-score p,
.bbp-dim,
.fx-gong,
.fx-dim-note,
.fx-gong-sum,
.fx-disclaim,
.fx-pro-sec,
.fx-tags span { border: 0; }
.fx-person { border: 0; border-left: 3px solid var(--vermilion); }
.fx-person-ta { border-left-color: var(--jade, #3f7d6e); }

/* 综合指数下的结果概述框：保持为柔和圆角「胶囊」底盒（圆角填充、无描边、有背景）；
   并让框 .bbp-score 与结果框 .bbp-score p 一起撑满右栏面板，去掉 report.css 里 320px 居中的宽度上限，
   这样结果正文不再被挤在中间窄窄一条（报告样例是双列布局，不受影响）。
   （档案条 .fx-profile span 仍保留胶囊描边，靠从上面去框组里移出实现。） */
.fxw-screen .bbp-score { max-width: none; margin: 0; }

/* 去框后的宫位卡改「悬浮卡」观感：白底 + 柔和投影，靠阴影从浅色面板上浮起，不再靠边框描边（比原来的 0 1px 2px 更深一档） */
.fx-gong { background: #fff; box-shadow: 0 3px 12px rgba(60,42,72,.08), 0 1px 3px rgba(60,42,72,.05); }

/* ==========================================================================
   照片预检提示层：上传后视觉模型判断是否清晰正脸，不是就覆盖十二宫示意图，
   隐藏人脸信息、说明图里实际是什么、引导重新上传（正常照片不出现）。
   —— #fxMapCheck 绝对定位钉在 .fx-map 四边，近乎不透明的浅粉底把头像整张盖住。
   ========================================================================== */
.fx-map-check { display: none; }
.fx-map-check.show {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 22px 40px 22px 24px; text-align: center;
  background: rgba(253, 243, 246, .95);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border-radius: inherit;
}
/* 提示出现时，把示意图上的标题、编号点、图例、介绍卡一并压掉，避免从半透明底下透出 */
.fx-map.fx-checking .fx-map-head,
.fx-map.fx-checking .fx-map-foot,
.fx-map.fx-checking .fx-map-info,
.fx-map.fx-rejected .fx-map-head,
.fx-map.fx-rejected .fx-map-foot,
.fx-map.fx-rejected .fx-map-info { display: none; }

.fx-map-check .fmc-spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--vermilion);
  animation: fmcspin .8s linear infinite;
}
@keyframes fmcspin { to { transform: rotate(360deg); } }
.fx-map-check .fmc-ico {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: #fff2ee; color: var(--vermilion); font-size: 24px; font-weight: 800; font-style: normal; line-height: 1;
}
.fx-map-check .fmc-title { color: var(--ink); font-family: var(--serif); font-size: 15px; font-weight: 700; line-height: 1.5; }
.fx-map-check .fmc-sub { color: var(--ink-soft); font-size: 12px; }
.fx-map-check .fmc-desc {
  margin: 2px 0 0; max-width: 340px;
  padding: 10px 13px; border-radius: 10px;
  background: rgba(255, 255, 255, .72); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: 12.5px; line-height: 1.8; text-align: center;
}
.fx-map-check .fmc-advice { margin: 0; max-width: 340px; color: var(--vermilion); font-size: 12px; line-height: 1.7; }
.fx-map-check .fmc-btn {
  margin-top: 4px; padding: 8px 20px; border: 0; border-radius: 999px;
  background: var(--vermilion); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; box-shadow: 0 6px 16px rgba(192, 57, 43, .28); transition: background .2s;
}
.fx-map-check .fmc-btn:hover { background: #a82552; }
@media (max-width: 760px) {
  .fx-map-check.show { padding: 18px 34px 18px 18px; gap: 7px; }
  .fx-map-check .fmc-desc, .fx-map-check .fmc-advice { max-width: 100%; font-size: 12px; }
}

/* 照片识别期间：提交按钮禁用，避免手快在预检出结果前点开始绕过拦截 */
#faceSubmit:disabled, #faceSubmit.is-checking {
  opacity: .55; cursor: not-allowed; box-shadow: none; filter: grayscale(.2);
}



/* Couple Face Match: relationship mark and nine-part relationship reading; the report does not display uploaded photos. */
.fx-pair-mark {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 11px;
  margin: 0 0 12px; padding: 11px 12px; border: 1px solid rgba(192,57,43,.2);
  border-radius: 8px; background: var(--vermilion-soft);
}
.fx-pair-mark small { grid-row: 1 / 3; align-self: center; color: var(--muted); font-size: 10.5px; letter-spacing: .12em; }
.fx-pair-mark strong { color: var(--vermilion); font-family: var(--serif); font-size: 18px; line-height: 1.3; }
.fx-pair-mark p { margin: 0; color: var(--ink-soft); font-size: 11.5px; line-height: 1.7; }
.fxw-screen #fxGongs.fx-pair-nine { grid-template-columns: minmax(0, 1fr); gap: 8px; counter-reset: pairnine; }
.fx-pair-nine .fx-gong { position: relative; min-width: 0; padding: 9px; }
.fx-pair-nine .fx-gong::before {
  counter-increment: pairnine; content: '0' counter(pairnine); display: block; margin-bottom: 5px;
  color: var(--muted); font-size: 9.5px; letter-spacing: .08em;
}
.fx-pair-nine .fx-gong-hd { align-items: flex-start; }
.fx-pair-nine .fx-gong-hd b { font-size: 13px; line-height: 1.4; }
.fx-pair-nine .fx-lv { padding: 2px 5px; font-size: 9px; }
.fx-pair-nine .fx-gong p { font-size: 11px; line-height: 1.6; }
.fx-pair-nine .fx-gong p.fx-gong-pos { font-size: 10px; }
.fx-pair-nine .fx-gong p.fx-gong-tip { padding: 5px 6px; font-size: 10.5px; }
@media (max-width: 760px) {
  .fxw-screen #fxGongs.fx-pair-nine { grid-template-columns: minmax(0, 1fr); }
}

/* What face reading can show: four cards on desktop, one per row on mobile. */
.fx-feat .fx-feat-head { text-align: center; margin-bottom: 22px; }
.fx-feat .fx-feat-head h2 {
  margin: 0; color: var(--ink); font-family: var(--serif);
  font-size: 23px; font-weight: 700; letter-spacing: .01em;
}
.fx-feat .fx-feat-head h2::after {
  content: ""; display: block; width: 46px; height: 3px; margin: 11px auto 0;
  border-radius: 3px; background: linear-gradient(90deg, #f3a8c0, #d9607f);
}
.fx-feat .fx-feat-head p {
  margin: 10px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.6;
}
.fx-feat-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.fx-feat-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 18px; border: 1px solid #f4d3de; border-radius: 16px;
  background: linear-gradient(165deg, #ffffff 0%, #fef4f7 100%);
  box-shadow: 0 10px 24px -16px rgba(197, 78, 110, .38);
  transition: transform .22s ease, box-shadow .22s ease;
}
.fx-feat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -16px rgba(197, 78, 110, .5); }
.fx-feat-card .fx-feat-ico {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 13px; background: #fbdfe8; color: #d9607f;
}
.fx-feat-card .fx-feat-ico svg { display: block; width: 24px; height: 24px; }
.fx-feat-card h3 {
  margin: 0; color: var(--ink); font-family: var(--serif);
  font-size: 16px; font-weight: 700;
}
.fx-feat-card p {
  margin: 0; color: #6b5c63; font-size: 13px; line-height: 1.7;
}
/* Each card gets its own colour family to break the monotony. */
.fx-feat-card:nth-child(2) { border-color: #e7d3f0; background: linear-gradient(165deg, #ffffff 0%, #f8f1fc 100%); }
.fx-feat-card:nth-child(2) .fx-feat-ico { background: #ece0f5; color: #9367b8; }
.fx-feat-card:nth-child(3) { border-color: #f6dcc9; background: linear-gradient(165deg, #ffffff 0%, #fdf3ea 100%); }
.fx-feat-card:nth-child(3) .fx-feat-ico { background: #f9e4d1; color: #c9803f; }
.fx-feat-card:nth-child(4) { border-color: #cfe9e1; background: linear-gradient(165deg, #ffffff 0%, #ecf7f4 100%); }
.fx-feat-card:nth-child(4) .fx-feat-ico { background: #d5ece5; color: #3f9e88; }
@media (max-width: 760px) {
  .fx-feat-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Single reading and couple match introductions, sized to match the Future Baby feature block. */
.fx-intro {
  display: flex; align-items: center; gap: 28px;
  margin: 30px 0 34px; padding: 16px;
  overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
}
.fx-intro-media { flex: 0 0 36%; max-width: 36%; aspect-ratio: 1 / 1; }
/* Keep the enlarged couple-image width while using a shorter 4:5 frame for the new portrait artwork. */
.fx-intro--pair .fx-intro-media { flex: 0 0 39%; max-width: 39%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; }
.fx-intro-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; border-radius: 10px;
}
.fx-intro--pair .fx-intro-media img { width: 100%; height: 100%; object-fit: cover; }
.fx-intro-text {
  flex: 1 1 auto; min-width: 0; padding: 30px 34px;
  display: flex; flex-direction: column; justify-content: center;
  color: #665d76;
}
.fx-intro-tag {
  align-self: flex-start; display: inline-block; margin-bottom: 14px; padding: 5px 10px;
  border: 1px solid #d9e2f1; border-radius: 6px;
  background: #eef3fa; color: #66789b;
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
}
.fx-intro-text h2 {
  margin: 0 0 16px; color: #574d68; font-family: var(--serif);
  font-size: clamp(27px, 2.35vw, 34px); font-weight: 800; line-height: 1.25;
  letter-spacing: .015em;
}
.fx-intro-text p { margin: 0 0 14px; color: #746b82; font-size: 16px; line-height: 1.8; }
.fx-intro-text p:first-of-type { color: #655b75; font-size: 17px; }
.fx-intro-text p:last-of-type { margin-bottom: 0; }
.fx-intro-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 12px;
  width: auto; margin-top: 20px; padding: 12px 22px;
  border-radius: 8px; background: var(--vermilion); color: #fff;
  box-shadow: 0 8px 20px rgba(192,57,43,.22); font-size: 15px; font-weight: 800;
}
.fx-intro-btn:hover { background: var(--vermilion-dark); color: #fff; }

@media (max-width: 560px) {
  .fx-intro { gap: 0; padding: 0; }
  .fx-intro--single { flex-direction: column-reverse; }
  .fx-intro--pair { flex-direction: column; }
  .fx-intro-text { padding: 26px 20px; border-radius: 12px 12px 0 0; }
  .fx-intro-media {
    flex-basis: auto; width: calc(100% - 32px); max-width: 400px;
    aspect-ratio: 1 / 1; margin: 10px auto 18px;
  }
  .fx-intro--pair .fx-intro-media {
    flex-basis: auto; width: calc(100% - 24px); max-width: 420px; aspect-ratio: 4 / 5;
  }
  .fx-intro-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
  .fx-intro-text h2 { font-size: 25px; }
  .fx-intro-text p, .fx-intro-text p:first-of-type { font-size: 15px; line-height: 1.8; }
  .fx-intro-btn { align-self: stretch; justify-content: center; width: 100%; text-align: center; }
}

/* Customer reviews: infinite horizontal marquee, pauses on hover. */
.fx-reviews { margin: 34px 0 38px; }
.fx-reviews-head { text-align: center; margin-bottom: 22px; }
.fx-reviews-head h2 {
  margin: 0; color: var(--ink); font-family: var(--serif);
  font-size: 23px; font-weight: 700; letter-spacing: .01em;
}
.fx-reviews-head h2::after {
  content: ""; display: block; width: 46px; height: 3px; margin: 11px auto 0;
  border-radius: 3px; background: linear-gradient(90deg, #f3a8c0, #d9607f);
}
.fx-reviews-head p { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.fx-reviews-viewport {
  position: relative; overflow: hidden; padding: 6px 0 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.fx-reviews-track { display: flex; gap: 18px; width: max-content; animation: fxReviewScroll 52s linear infinite; }
.fx-reviews-viewport:hover .fx-reviews-track { animation-play-state: paused; }
.fx-review-card {
  position: relative; flex: 0 0 300px; width: 300px; box-sizing: border-box;
  padding: 20px 20px 22px; border: 1px solid #f4d3de; border-radius: 16px;
  background: linear-gradient(160deg, #ffffff 0%, #fef4f7 100%);
  box-shadow: 0 12px 26px -16px rgba(197, 78, 110, .42);
}
.fx-review-card::before {
  content: "\201C"; position: absolute; top: 4px; right: 18px;
  font-family: Georgia, var(--serif); font-size: 56px; line-height: 1;
  color: #f3c3d1; opacity: .7; pointer-events: none;
}
.fx-review-card:nth-child(3n+2) {
  border-color: #e7d3f0; background: linear-gradient(160deg, #ffffff 0%, #f8f1fc 100%);
}
.fx-review-card:nth-child(3n+2)::before { color: #dcc0ea; }
.fx-review-card:nth-child(3n) {
  border-color: #f6dcc9; background: linear-gradient(160deg, #ffffff 0%, #fdf3ea 100%);
}
.fx-review-card:nth-child(3n)::before { color: #f0cbac; }
.fx-review-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fx-review-avatar {
  flex: 0 0 auto; overflow: hidden; width: 48px; height: 48px;
  border-radius: 50%; background: #f0e6ec;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f3c3d1;
}
.fx-review-card:nth-child(3n+2) .fx-review-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #dcc0ea; }
.fx-review-card:nth-child(3n) .fx-review-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f0cbac; }
.fx-review-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.fx-review-name { display: block; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.3; }
.fx-review-role {
  display: inline-block; margin-top: 5px; padding: 1px 9px; border-radius: 999px;
  background: #fdeaf0; color: #c65a7c; font-size: 11px; font-weight: 600;
}
.fx-review-card:nth-child(3n+2) .fx-review-role { background: #f3ebfb; color: #8a5bb0; }
.fx-review-card:nth-child(3n) .fx-review-role { background: #fdf0e6; color: #c2803f; }
.fx-review-stars { color: #f5b301; font-size: 14px; letter-spacing: 2px; margin: 2px 0 9px; }
.fx-review-text { margin: 0; color: #6b5c63; font-size: 13.5px; line-height: 1.8; }
@keyframes fxReviewScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 560px) {
  .fx-review-card { flex-basis: 260px; width: 260px; }
  .fx-reviews-track { animation-duration: 42s; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-reviews-track { animation: none; }
  .fx-reviews-viewport { overflow-x: auto; }
}