/* ============================================================
 * chart.css —— 命盘详情页 + 工作台表单样式（姓名栏统一）
 * ------------------------------------------------------------
 * 只做布局与响应式，**不覆盖 engine.css / site.css 的排盘样式**，
 * 命盘图表本身的观感与桌面端保持一致。
 * ============================================================ */

/* ==================================================================
 * 一、姓名输入框组件统一（对齐【年 1990】输入框）
 * ------------------------------------------------------------------
 * 【问题根因】engine.css 第 65 行的组件样式选择器是：
 *     input[type=number], select { background; border; border-radius;
 *                                  padding:9px 8px; font-size:15px; ... }
 *   它**只覆盖 type=number 与 select**。姓名框 #inName 是 type="text"，
 *   完全不在这个选择器里 —— 于是拿到的是浏览器默认裸 input：
 *   无背景、无边框、无圆角、padding 0、字号 13.3px、高度仅 21px。
 *   实测（PC 1440）：姓名框 21px 高 vs 年框 40px 高，视觉严重失衡。
 *
 * 【修法】只把 #inName 显式并入同一套组件规则，逐项对齐：
 *   高度 / 内边距 / 圆角 / 字号 / 背景 / 边框，全部照抄年框。
 *   ★ 用「与 engine.css 同值」而非「另设一套值」，确保今后
 *     engine.css 若调整组件规格，这里同步跟改不会出现漂移。
 *
 * 【边界】★ 本节只做「输入框本身」的规格对齐，**不动页面排版结构**：
 *   · 不给 .fitem-inline 加背景/边框/圆角/内边距（不引入额外大外框容器）；
 *   · 不做黄色高亮，姓名标签保留 .fitem label 原有文字样式；
 *   · 不改两个 .seg 的既有内联 flex/min-width 与整行布局。
 *   仅保留「label 左 + input 右同一行」这一项必要的排布。
 * ================================================================== */

/* ---- 1.1 排布：label 左、input 右，同一行 ----
 * 只改 flex-direction，不加任何装饰性样式。 */
.fitem-inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* ---- 1.2 左侧标签：保留 .fitem label 原有文字样式 ----
 * ★ 刻意**不覆盖** color / font-size / letter-spacing / padding 等文字样式，
 *   让姓名标签继续继承 engine.css 的 .fitem label 规则，
 *   与下方「年 / 月 / 日」等标签完全一致（保持原有观感，无黄色高亮）。 */
.fitem-inline > label {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---- 1.3 输入框：完全复用年框组件样式（本次唯一实质改动） ---- */
.fitem-inline > input {
  /* ★ flex-basis 必须用 0（而不是 auto/100%）：
     若给 width:100%，flex-basis 会解析成 100%，
     shrink 因子按 basis 比例分配 → label（basis:auto 不可缩）
     反而把 input 挤到几十 px。basis:0 才能让 input
     拿走「label 之外的全部剩余空间」。 */
  flex: 1 1 0;
  min-width: 0;   /* 允许在窄屏收缩，避免撑破 .frow */

  /* ↓↓↓ 以下六项与 engine.css 的 input[type=number],select 同值 ↓↓↓ */
  background: var(--card2);
  border: 1px solid var(--line);
  color: var(--txt);
  border-radius: 10px;
  padding: 9px 8px;
  font-size: 15px;
  /* ↑↑↑ 与年框同值 ↑↑↑ */
  text-align: left;        /* 姓名是文本，居中反而难读（年框是数字才居中） */
  appearance: none;
  outline: none;
}
.fitem-inline > input::placeholder {
  color: var(--dim);
  font-size: 13px;         /* placeholder 比正文略小，避免撑高行高 */
}

/* ---------- 详情页顶部：左右分栏的纯按钮条（无外层大白框） ----------
 * 布局：左【返回工作台】 / 右【保存为命例】【复制分享链接】
 *   .chart-actions   —— 外层，flex + space-between
 *     ├ .chart-act-left   左组（贴左）
 *     └ .chart-act-right  右组（贴右）
 *
 * ★ 本轮改动：**取消吸顶悬浮**。
 *   之前是 position:sticky; top:0; z-index:95，页面向下滚动时这组按钮
 *   会一直固定在视口顶部，形成悬浮层 —— 滚动浏览盘面时它挡住导航栏下沿，
 *   也压住盘面文字。现改为 position:static（文档流内普通块）：
 *     · 向下滚动时按钮随页面内容一起上移，不固定、不遮挡任何内容；
 *     · z-index 随之失效，无需再与 sticky 导航(z-index:90)争层级；
 *     · 需要用按钮时滚动回顶部即可（页面顶部即按钮所在处）。
 */
.chart-actions {
  position: static;         /* ★ 取消吸顶：随页面内容一起滚动 */
  display: flex;
  align-items: center;
  /* ★ 关键：space-between 把左右两组推到两端。
     组内换行交给各自的 flex-wrap（见下），外层不换行，
     避免「一组换行把另一组挤走」。 */
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;              /* 无内边距，不再有「框」的观感 */
  background: transparent;  /* ★ 无外层大白框 */
  border: none;            /* ★ 无边框 */
  box-shadow: none;        /* ★ 无阴影 */
  border-radius: 0;        /* ★ 无圆角容器 */
}

/* ★ 2026-10-15 新增：数据留存提示（灰字、无框、低调，不抢按钮视觉） */
.chart-keepnote {
  width: 100%;
  margin: -6px 0 12px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--dim);
  text-align: center;
  letter-spacing: .2px;
}
@media (max-width: 560px) {
  .chart-keepnote { font-size: 11px; margin: -4px 0 10px; }
}
/* 左右两组：组内横向排列，空间不足时组内自动换行 */
.chart-act-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;         /* ★ 组内换行，PC 一行、窄屏可折行 */
  min-width: 0;
}
.chart-act-left  { justify-content: flex-start; }
.chart-act-right { justify-content: flex-end; }   /* ★ 右组靠右对齐 */

/* ---- 统一按钮外观：三个按钮完全同款 ----
 * ★ 本轮取消 .primary —— 【复制分享链接】不再有深色/金色特殊高亮，
 *   与【返回工作台】外观完全一致（同 .chart-btn：同高度/圆角/字号/配色）。 */
.chart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 40px;
  /* ★ 用 min-height 而非固定 height：让长状态文案能折行并撑高，
     同时 min-height 仍保证常规文案下三个按钮高度一致、视觉整齐。 */
  height: auto;
  padding: 0 14px;
  /* ★ 兜底：无论状态文案多长都不撑破按钮边界。
     实测教训：复制失败状态曾用 14 字「复制失败，请手动复制地址栏」，
     在 grid 三等分（窄屏约 100px）下撑出按钮、溢出压到相邻按钮上。
     用 ellipsis 会截断文字，故改用「允许折行 + 高度自适应」：
     极端长文案折成两行也不外扩，信息不丢失。 */
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 13.5px;
  line-height: 1.25;
  font-family: inherit;
  color: var(--sub);
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.chart-btn:hover {
  border-color: var(--gold);
  color: var(--gold2);
}
.chart-btn:active { transform: translateY(1px); }
/* 返回按钮的 <span class="chart-btn-ico"> 箭头 */
.chart-back > span:first-child { font-size: 16px; line-height: 1; }
/* 按钮内图标：超窄屏（≤380px）会被隐藏以给中文文案腾出宽度 */
.chart-btn-ico { flex: 0 0 auto; line-height: 1; }

/* ---- Tooltip：悬浮提示（替代原独立的【分享链接说明】按钮）----
 * ★ 只有一个提示框：靠 `.chart-tip-bubble` 这一个自绘气泡实现。
 *   按钮上**不再设原生 title** —— 原生 title 会与气泡同时弹出，
 *   浏览器提示框叠在气泡上方，形成「两层提示重叠」。 */
.chart-tip {
  position: relative;
}
.chart-tip-bubble {
  position: absolute;
  /* ★ 显示在按钮**下方**而非上方：
     按钮条紧贴站点顶栏，气泡放上方会被 sticky 导航(z-index:90)压住
     （截图实测顶部被盖）。放下方则落在页面正文区域，任何层都不遮挡。
     注：按钮条本身已改 position:static（取消吸顶），不参与层级竞争。 */
  top: calc(100% + 8px);
  right: 0;
  z-index: 130;                  /* 高于站点 sticky 顶栏(90)，保证气泡不被导航压住。
                                   （按钮条本身已改 static，不再需要为它预留层级） */
  /* ★ 固定宽度 = 文案恰好折成**两行**的尺寸。
     文案共 33 字，每行约 15~17 字 → 两行需 ≥220px 可用宽度（实测 220px 恰好两行）。
     原用 width:max-content，浏览器会把整段拉成一行（420px+ 单行长条）；
     186px 则会折成三行。这里取 236px 留一点余量，确保中文字宽差异下仍稳定两行。
     max-width:78vw 兜底，极窄屏不会超出视口（此时改为换行显示，不影响可读性）。 */
  width: 236px;
  max-width: 78vw;
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 400;
  white-space: normal;           /* ★ 必须：允许自动折行 */
  word-break: break-word;
  text-align: left;
  color: var(--txt);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .16s, transform .16s, visibility .16s;
  pointer-events: none;
}
.chart-tip:hover .chart-tip-bubble,
.chart-tip:focus-within .chart-tip-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* 移动端无 hover，Tooltip 改为**常显紧凑小字**。
   ★ 修复重叠：此前保持 absolute 定位并常显（opacity:1/visibility:visible），
     气泡会落在按钮下方的 .chart-keepnote 上，两段文字视觉叠压。
     现改为 relative 定位的独立块级元素：它从 .chart-tip 的定位上下文脱离、
     随父级回到正常文档流，**不可能再压住任何相邻文字**。
     （按钮组 flex 换行时它自然落到下一行，不影响按钮对齐。）
   注：基础规则里 .chart-tip 是 position:relative，此处显式覆写为 static，
     使气泡不再以按钮为定位原点。 */
@media (max-width: 760px) {
  /* ★ 移动端气泡：**默认隐藏，仅聚焦/点击时短暂显示**（用户实机反馈修正）
     ------------------------------------------------------------
     Bug 现象：提示框「本站为参数化排盘工具…」默认就常显，且飘在按钮右侧，
              把「复制分享链接」按钮文字截断遮挡。

     成因：早前为修「免责条遮挡 Tab」与「按钮换行」两轮改动中，
           移动端块把气泡设成了 opacity:1/visibility:visible（常显），
           并改成 position:static 让它进入文档流 ——
           结果它作为 .chart-tip 的块级兄弟节点**常驻占位**，
           把包裹层撑宽、按钮被挤压截断。

     本次修正（对齐需求 4 条）：
       ① 默认**完全隐藏**：沿用基础规则的 opacity:0 + visibility:hidden，
          不再在移动端覆盖为常显；
       ② 定位回归**绝对定位**（基础规则本就是 absolute + top:100%+8px），
          不占文档流宽度 → 不会挤压按钮、不会截断按钮文字；
          锚点为 .chart-tip（position:relative），故贴在按钮下方而非页面中部；
       ③ PC 端 hover 行为完全不变（基础规则已支持，本块不改）；
       ④ 移动端无 hover，靠 .chart-tip:focus-within（点击即聚焦）短暂显示，
          配合 JS 在复制完成后自动移除焦点 → toast 式自动消失。 */
  .chart-tip {
    position: relative;          /* 气泡的定位锚点 = 按钮包裹层 */
  }
  .chart-tip-bubble {
    position: absolute;          /* 脱离文档流 → 不占位、不挤压按钮 */
    /* ★ 贴在按钮**上方**（bottom 锚定），彻底不遮挡下方内容：
       实测放下方时会压住 .chart-keepnote「本盘数据已保存在当前页面链接中…」
       造成两行文字交叠。按钮条紧贴卡片顶部，上方为该卡片内的空白区，
       气泡浮在此处不与任何信息项冲突。 */
    bottom: calc(100% + 8px);
    top: auto;
    right: 0;
    left: auto;
    z-index: 130;
    width: 220px;
    max-width: 72vw;
    padding: 5px 8px;
    font-size: 11px;
    line-height: 1.5;
    background: var(--card2);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    /* ★ 默认隐藏（不改基础规则的 opacity/visibility，重复声明以防被覆盖） */
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
  }
  /* 向上弹出时，过渡方向取反，视觉更自然 */
  .chart-tip:focus-within .chart-tip-bubble,
  .chart-tip.is-tip-show .chart-tip-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ---------- 移动端适配（两页共用） ---------- */
@media (max-width: 760px) {
  /* 表单控件放大到手指友好尺寸 */
  #formCard input,
  #formCard select,
  #formCard textarea {
    font-size: 16px;          /* 16px 可避免 iOS 聚焦时自动放大页面 */
    min-height: 44px;
    padding: 10px 12px;
  }
  #formCard .seg label {
    font-size: 15px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* 姓名框：移动端同样套用与年框一致的放大规格。
     ★ #formCard input 的 padding:10px 12px 会覆盖 1.3 节的 9px 8px，
       这是**期望行为** —— 因为年框在移动端也是同一套值，
       两边仍然完全一致（同为 min-height:44px / 16px / 10px 12px）。
     这里只补 placeholder 字号，避免规格漂移；
     ★ 不加 padding/背景/边框 —— 姓名项不引入额外外框容器。 */
  #formCard .fitem-inline > input::placeholder { font-size: 13px; }
  /* 姓名 / 公历农历 / 性别 同一行均分（窄屏也保持一行，必要时换行）
     ★ 姓名项在 label+input 同行后，三等分会把姓名输入框压到约 1/3 屏宽
       （≈110px），中文 placeholder 被截断。
       现在姓名项 **span 两列**（占满一行），公历/性别各占一列，
       姓名输入框宽度充足。 */
  #formCard .frow-name {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #formCard .frow-name > * {
    min-width: 0 !important;
  }
  #formCard .frow-name > .fitem-inline {
    grid-column: 1 / -1;
  }
  #formCard .frow-name > .fitem-inline > label {
    flex: 0 0 auto;
    /* 字号/颜色继承 .fitem label 原有样式，不做覆盖、不加高亮 */
  }
  #btnGo {
    min-height: 48px;
    font-size: 17px;
    width: 100%;
  }
  .gorow .btn, .gorow button { width: 100%; min-height: 48px; font-size: 17px; }

  /* 详情页顶部按钮条（移动端）
     ★ 修复按钮组错乱：此前窄屏用「外层 space-between + 组内 flex-wrap」，
       三个按钮（返回工作台 / 保存为命例 / 复制分享链接）会在空间不足时
       各自独立换行，实测产生两种错乱形态（用户实机照片确认）：
         · 375px：三个按钮竖排三行，视觉上「跑路」换行；
         · 390/393/412px：换行且**顺序错乱**（保存为命例跑到最前一行）。
       根因：space-between + 组内 wrap 让左右两组各自独立决定换行，
       组内元素顺序与视觉行序不再对应。
     现改为：**移动端三枚按钮等宽平分整行**，单行、恒定顺序、永不换行。 */
  .chart-actions {
    margin: 0 0 12px;
    gap: 8px;
    /* 窄屏统一单行：外层不换行 */
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
  /* ★ 最终方案（本轮多轮实测后定稿）：让**三枚按钮直接平分整行**，
     绕过「左组 / 右组」两层嵌套 flex 的宽度分配。
     踩坑记录——两层嵌套 + flex:1 会互相抢份额，导致：
       393px 实测 → 「保存为命例」22px、「复制分享链接」28px；
       375px 实测 → 加权后仍为 42/32px，文案被 ellipsis 截断。
     嵌套层级的宽度竞争在小屏极难稳定控制，故直接扁平化：
     把两个分组都设为 flex:1 且**不再嵌套等分**（组内按钮 width:auto），
     由两组各自按内容宽度自然伸缩，配合外层 flex:1 瓜分整行。 */
  .chart-act-left,
  .chart-act-right {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  /* 组内按钮不再二次平分，改为按内容宽度自适应（flex:0 0 auto），
     避免与外层 flex 争夺宽度。 */
  .chart-act-left > .chart-btn,
  .chart-act-right > .chart-btn {
    flex: 0 0 auto;
    width: auto;
  }
  .chart-act-right { justify-content: flex-start; }

  /* ★ 移动端按钮组定稿方案（依据用户实机反馈 + 多轮实测）
     ------------------------------------------------------------
     要解决的三个问题（390px 实测）：
       ① 「← 返回工作台」w=226px，占掉大半整行 —— 权重 flex:2.1 把它撑得过大；
       ② 「保存为命例」w=57px（需 76px）→ 截断成「保存为命」；
       ③ 「复制分享链接」w=43px（需 76px）→ 显示不全。

     成因：外层给两组设了 flex-grow 权重（左 2.1 : 右 1），且组内按钮又是
     flex:1 1 0 —— 两层"抢宽度"，左组吃满，右组被压到远小于内容宽度。

     本方案（对齐需求 5 条）：
       1. 三个按钮横向 flex 单行、间距统一（外层与两组 gap 一致 8px）；
       2. 按钮宽度**按内容自适应**（flex:0 0 auto），不再撑满/加权；
       3. 按钮组整体靠左、**不撑满整行**（justify-content:flex-start，
          两组 flex:0 0 auto，总宽=内容宽之和）；
       4. 文案完整显示：字号收到 13px、内边距收到 4px，并保留
          `.chart-btn-ico` 图标 span —— 极窄屏（≤380px）隐藏图标再让出宽度；
       5. 全部规则都在 @media(max-width:760px) 之内，PC 端完全不生效。 */
  .chart-actions {
    justify-content: flex-start;   /* ③ 整体靠左，不撑满 */
    gap: 8px;                        /* ① 统一间距 */
  }
  /* 两个分组均按内容宽度收缩，不再瓜分剩余空间（②③） */
  .chart-act-left,
  .chart-act-right {
    flex: 0 0 auto;                  /* ★ 关键：0 0 auto —— 不放大也不压缩 */
    min-width: 0;
    gap: 8px;
    justify-content: flex-start;
  }
  /* ★ 包裹层 .chart-tip（装着「复制分享链接」按钮 + 提示气泡）同样按内容收缩。
     气泡已是绝对定位（见上方 @media 760px 块），不占布局宽度，
     故包裹层宽度 = 其内按钮宽度。 */
  .chart-act-right > .chart-tip {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-width: 0;
  }
  /* 三个按钮一律按内容宽度自适应，彻底消除截断（②④） */
  .chart-act-left > .chart-btn,
  .chart-act-right > .chart-btn,
  .chart-act-right > .chart-tip > .chart-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
  }
  /* 窄屏字号与内边距略收，为完整文案腾出宽度（④） */
  .chart-btn {
    min-height: 46px;
    height: auto;          /* 长文案可折行自适应，min-height 仍保常规整齐 */
    font-size: 13px;
    padding: 0 5px;
    gap: 4px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: visible;               /* 不再裁剪，宁可让按钮自然变宽 */
    text-overflow: clip;
  }

  /* 超窄屏（≤380px，如 iPhone SE 375px）：沿用上面同一套「按内容自适应」规则，
     只把间距、字号、内边距再各收一档，让三枚按钮总宽仍能放进一行。
     ★ 移除了旧版「气泡默认隐藏」：移动端无 hover，隐藏等于该提示永不可见；
       气泡现已绝对定位在按钮条下方（不压内容），故 375px 下同样常显。 */
  @media (max-width: 380px) {
    .chart-actions,
    .chart-act-left,
    .chart-act-right { gap: 5px; }
    .chart-btn {
      min-height: 44px;
      height: auto;
      font-size: 12.5px;
      padding: 0 3px;
      gap: 2px;
    }
    /* 图标本身可隐藏（文案已完整表意），为中文腾出最后几像素 */
    .chart-btn-ico { display: none; }
    .chart-tip-bubble {
      width: 200px;
      max-width: 70vw;
      font-size: 10.5px;
      padding: 5px 7px;
    }
  }

  /* ---------------- ≤480px 窄屏：三按钮整体水平居中 ----------------
     需求（用户实机反馈后调整）：
       1. 三个按钮「返回工作台/保存为命例/复制分享链接」整体**水平居中**；
       2. 按钮之间保持统一间距，宽度按内容自适应，不撑满；
       3. 三按钮文字完整显示，不截断、不换行。

     实现：把 ≤760px 块里的 justify-content 由 flex-start 改为 center。
     宽度自适应与「文字完整」由上方的 flex:0 0 auto + nowrap + overflow:visible
     保证，本块只调整对齐方式与间距，不改宽度逻辑。

     ★ PC 端（>480px）完全不生效：justify-content 保持 space-between（左右分栏），
       按钮字号 13.5px、单行排布，与改动前一致。
     ★ 本块必须排在 @media(max-width:380px) 之后 —— CSS 中同特异度下
       位置靠后者生效，否则 375px 会被 380px 块的 gap/字号覆盖。 */
  /* ---------- ≤480px：三按钮 grid 精确三等分 ----------
   需求（用户实机反馈）：
     1. 按钮容器撑满内容区，与下方【紫微/八字 Tab 栏】【基本信息】卡片左右对齐；
     2. 三个按钮各占 1/3；
     3. 统一间距、按钮内文字居中；
     4. 文字完整不截断不换行；
     5. PC 端不动。

   ★ 为什么改用 grid 而非 flex 三等分（实测踩坑记录）：
     DOM 为【左组 1 枚】+【右组：保存按钮 + .chart-tip 包裹层(含复制按钮)】，
     两层嵌套做 flex 三等分会互相抢宽度 —— 实测 390px：
       flex:2    → 109 / 115 / 103（等分差 12px）
       flex:2.06 → 109 / 115 / 103（无变化）
       flex:2.072→ 109 / 115 / 103（无变化）
     调 flex-grow 比例**完全无效** —— 因为右组两枚按钮内容需求合计 224px，
     而它在 flex:2 下只分到 217px，差 7px 只能由浏览器压缩第三枚按钮承担。
     即差值来自「内容宽度」而非「比例」，改比例治不了本。

     grid 方案：外层 `grid-template-columns:1fr 2fr` 把左组放第 1 列、
     右组放第 2 列（自动占 2 份），右组内部再 `1fr 1fr` 二等分。
     列宽由容器等分决定，**与内容宽度无关**，故能真正做到精确三等分。 */
  @media (max-width: 480px) {
    /* ---------- 三按钮 grid 平铺：等宽 + 间距完全统一 ----------
       需求（用户实机反馈）：
         1. 三个按钮之间 gap 统一为同一值（12px），不得有宽有窄；
         2. 三按钮宽度完全平分（各 1/3），第三个按钮不因带链接图标而缩窄；
         3. 375px / 390px 下间距一致、视觉整齐。

       ★ 关键改用 display:contents「穿透」两层包裹：
         之前的结构是 grid `1fr 2fr`（左组 1 列 + 右组 1 列），右组内部再 `1fr 1fr`，
         于是**两处 gap 由不同容器提供**：外层 8px、右组 0px。
         实测 375px → 按钮1↔2 = 8px、按钮2↔3 = 0px（后两个贴死），
         视觉上「有的宽有的窄」，正是需求要修的问题。

         display:contents 让【左组 / 右组 / .chart-tip】三层面板对布局**完全透明**，
         三枚按钮直接成为外层 grid 的三个子项 → 只有一个 gap 来源，
         三按钮与两处间距**同时**精确相等，从结构上杜绝不均。 */
    .chart-actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);  /* 三等分，各占 1/3 */
      gap: 12px;                              /* ① 统一间距（唯一来源） */
      width: 100%;
      box-sizing: border-box;
      margin: 0 0 12px;
      align-items: stretch;
    }
    /* 三层包裹面板对布局透明 → 三按钮成为同级 grid 子项 */
    .chart-act-left,
    .chart-act-right,
    .chart-act-right > .chart-tip {
      display: contents;
    }
    /* 三枚按钮各填满自己的等宽列（宽度由列宽决定，与内容/图标无关） */
    .chart-act-left > .chart-btn,
    .chart-act-right > .chart-btn,
    .chart-act-right > .chart-tip > .chart-btn {
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }
    /* 文字居中（图标 span 用 flex 居中，不影响整列等宽） */
    .chart-btn {
      justify-content: center;
      text-align: center;
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
    }
    }
  }

  /* 命盘图表横向滑动查看（图表容器本身不改样式） */
  .zwpal, .zwpanel, #bzFour, #bzDY, #bzLN, .report,
  #resZiwei, #resBazi {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  /* 表格类命盘（紫微十二宫 / 八字四柱）横向铺开时不压缩列宽 */
  .zwpal table, #bzFour table, .report table {
    min-width: 680px;
  }

  /* ★ 2026-10-16 删除「命盘图表可左右滑动查看」提示
     原为 .cs-chart-page .tabs::after 伪元素（flex:100% 0 100% 占满整行的第三个子项）。
     现整块移除：PC 与移动端都不再显示，Tab 栏只保留两个按钮。
     横向滚动能力本身仍保留（上面的 overflow-x:auto 不动），只是不再用文字提示。 */
  .cs-chart-page .tabs::after { content: none; }

  /* ---------------- Tab 栏：两按钮严格平分整行 + 文字各自居中 ----------------
     问题（用户实机反馈 PC 端）：
       1. 提示小字占据整行，把按钮行挤窄；
       2. 「八字排盘」文字视觉偏左，左右不对称。

     根因：
       · .tab 是 <button>，其内容盒宽度由 flex 决定，但按钮内部文字
         若不显式声明居中方式，会受 letter-spacing 尾隙与默认对齐影响而偏左；
       · 之前「移动端居中」的修正写在 @media(max-width:480px) 内，
         PC 端没有对应规则 → PC 端文字不居中。

     做法（两端统一，不写断点）：
       · .tabs 显式声明为 flex，两个 .tab 用 flex:1 1 0 + width:0 精确平分；
       · .tab 显式 text-align:center 并把 letter-spacing 挪到内边距上补偿，
         保证「紫微排盘」「八字排盘」各自在自己那一半的正中间。 */
  .cs-chart-page .tabs {
    display: flex;
    width: 100%;
    gap: 5px;
  }
  .cs-chart-page .tabs .tab {
    flex: 1 1 0;
    width: 0;              /* 与 flex:1 1 0 配合，强制两按钮等宽（忽略内容宽度差异） */
    min-width: 0;         /* 允许极窄屏收缩，避免撑破容器 */
    text-align: center;   /* ★ 文字在按钮内部真正居中 —— PC/移动端同样生效 */
    display: flex;        /* button 内的匿名文本盒包成 flex item，便于精确居中 */
    align-items: center;
    justify-content: center;
    padding: 9px 0;
    white-space: nowrap;  /* 「紫微排盘」「八字排盘」不折行 */
    /* letter-spacing 会在末字后留一个尾隙，使视觉中心偏左；
       用等量内边距补回，保证左右视觉对称 */
    text-indent: 1px;     /* 补偿 1px 字距的尾隙（letter-spacing:1px） */
  }

  /* ---------------- P0 Bug2 修复：窄屏 Tab 按钮平分整行 ----------------
     问题现象：手机端（<=480px）「紫微排盘 / 八字排盘」两个按钮挤在一起，
     视觉上像连成一块，且点击区域偏小、易误触。

     成因：容器内边距 + 按钮自身 min-width 叠加后，可分配给两个按钮的
     剩余宽度被进一步压缩，按钮挤到相邻边缘、几乎贴合。

     处理（@media max-width:480px，仅移动端生效）：
       1. 加大上下内边距，把有效点击区域撑到 ≥44px（移动端可点面积标准）。
       ※ 宽度平分与文字居中已由上面的通用规则统一处理，此处不再重复。 */
  @media (max-width: 480px) {
    /* 加大上下内边距 → 有效点击高度 ≥44px，满足移动端可点面积 */
    .cs-chart-page .tabs .tab {
      padding: 12px 4px;
      font-size: 15px;
      letter-spacing: .5px;
      text-indent: .5px;   /* 同步补偿此处改小的字距 */
    }
  }
}

/* 超窄屏（<=380px）：姓名仍占满一行，公历/性别各半，仅再压缩间距 */
@media (max-width: 380px) {
  #formCard .frow-name {
    gap: 6px;
  }
}

/* 桌面端：姓名项占位保证输入框有足够宽度
 * ------------------------------------------------------------
 * ★ 不再覆盖 .seg 的 flex/min-width —— 那两个分段在 HTML 里带内联样式，
 *   属原有页面排版结构，本次保持原样不动。
 *   这里只给姓名项一个下限宽度，避免 label 挤压后输入框过窄。 */
@media (min-width: 761px) {
  #formCard .frow-name > .fitem-inline { flex: 1 1 0; min-width: 200px; }
}