/* ==========================================================================
   天使之约 · 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; }

/* 双人合盘：性别列改成「男方出生年份」下拉——隐藏男女按钮，显示年份选择器（女方年份沿用右侧原「出生年份」列） */
.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;
}
/* 夫妻相·生辰民俗网格（替代雷达图/六维条） */
.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; }
/* 夫妻相去掉雷达图后，分数块独占一行 */
.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) { 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 { 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;
}
/* 底图移到伪元素、z-index:-1 沉到最底。中文原图本身偏白偏亮，.4 盖在白底上几乎看不见；
   英文那张对比强、.4 就够。为让两边"看起来一样清晰"（而非数字相同），中文单独提到 .7 */
.fx-map::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('../img/wiv.webp?v=20260921a') center bottom / cover no-repeat;
  opacity: .7;
}
/* ===== 夫妻相分析模式：示意图换成干净底图 face-01.webp，隐藏全部文字层（标题/编号点/图例/解释卡）；底图透明度统一钉成 .4（比单人 .7 更透），中英夫妻模式一致；单人面相不受影响 ===== */
.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; }

@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; }
  /* 待机示意图不应在框内上下滑动；结果态 .fxw-idle 隐藏后仍保留长报告的滚动能力。 */
  .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; }
  /* 手机/苹果/平板：宫位介绍卡往下移、往右拉长（桌面不变）*/
  .fx-map-info { bottom: 7%; width: min(88%, 420px); }
  .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);
}



/* 夫妻相分析：关系印记 + 九项关系读数。报告不回显人物照片，只保留结构化图表与文字。 */
.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); }
}

/* 「面相分析能看出什么」四卡片区：电脑一排 4 个，手机一排 1 个 */
.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;
}
/* 四张卡片各自色系，打破单调 */
.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); }
}

/* 单人面相与双人合盘介绍：尺寸和未来宝宝介绍模块保持一致。 */
.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; }
/* 双人分析的新图按原始比例完整显示，避免方形裁切造成画面被放大；同时略增大图片框。 */
.fx-intro--pair .fx-intro-media { flex: 0 0 39%; max-width: 39%; aspect-ratio: auto; }
.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 { height: auto; object-fit: contain; }
.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: auto;
  }
  .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; }
}

/* 用户评价：无限横向滚动，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; }
}