/* 移动端适配层：只改排版和交互密度，不改业务内容与排盘数据。 */
@media (max-width: 620px) {
  :root { --shell-pad: 14px; --header-h: 64px; }
  html { scroll-padding-top: calc(var(--header-h) + 8px); }
  body { font-size: 15px; line-height: 1.75; }
  /* sticky + backdrop-filter 在滚动时会逐帧重采样整块背景，低端手机尤其容易
     出现导航发虚、掉帧。手机改用不透明纸底，视觉不变但滚动只需合成。 */
  .site-header,
  .site-header.is-scrolled {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  button, input, select, textarea { font-size: 16px; }
  :where(button, .button, .nav-link, .portal, .sample, .star-chip, .rel-index-chip, summary, [role="button"]) { min-height: 44px; }

  .header-inner { gap: 12px; }
  .brand { gap: 10px; }
  .brand-symbol { width: 36px; height: 36px; font-size: 19px; }
  .brand strong { font-size: 17px; }
  .brand small { font-size: 11px; }
  .menu-button { min-width: 48px; min-height: 44px; padding: 8px 12px; align-items: center; }
  .main-nav {
    left: 10px; right: 10px;
    max-height: calc(100dvh - var(--header-h) - 16px);
    overflow-y: auto;
    padding: 8px;
    border-radius: 14px;
  }
  .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    padding: 11px 12px;
  }
  .nav-link::after { bottom: 6px; }

  .page-hero { padding: 46px 0 28px; }
  .page-hero::before { top: 28px; width: 32px; }
  .page-hero::after { bottom: 16px; font-size: 70px; }
  .page-hero h1, .facade-title {
    margin-block: 12px 14px;
    font-size: clamp(28px, 8.2vw, 34px);
    line-height: 1.42;
  }
  .page-hero p, .facade-lead { font-size: 15px; line-height: 1.8; }
  .facade { min-height: auto; padding-block: 54px 34px; }
  .facade-inner { gap: 16px; }
  .facade-mark { gap: 12px; }
  .section { margin-bottom: 22px; padding-block: 18px; }
  .section h2 { font-size: 22px; }
  .section-lead { margin-bottom: 18px; }
  .section-card, .card { padding: 18px; }
  .page-articles .grid .card { min-height: 0; padding: 24px; }
  .page-articles .grid .card h3 { margin-top: 22px; }
  .page-about .page-hero + .section,
  .page-booking .page-hero + .section { margin-inline: var(--shell-pad); padding: 22px 18px; }
  .page-cases .entry { padding: 22px 18px; }
  .button { min-height: 48px; padding: 12px 18px; }
  .portal { min-height: 92px; }
  .portal-name { font-size: 21px; }
  .portal-note { line-height: 1.65; }
  .entry-title { font-size: 23px; }
  .entry-fields dd { line-height: 1.85; }
  .entry.mobile-collapsed { padding-bottom: 16px; }
  .entry.mobile-collapsed .entry-fields { display: none; }
  .form-grid { gap: 18px; }
  .field input, .field textarea, .field select { min-height: 48px; }
  .slots { gap: 10px; }
  .slot { min-height: 52px; }
  .contact-box { align-items: flex-start; gap: 16px; }
  .site-footer { padding-inline: 16px; }

  /* 结果页的标题与页签保持上下文，与长内容同步吸顶。 */
  #resultPanel:not([hidden]) .result-title {
    position: sticky;
    top: 0;
    z-index: calc(var(--z-sticky) + 2);
    min-height: 96px;
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    box-shadow: 0 1px 0 var(--line);
  }
  #resultPanel:not([hidden]) .result-title button {
    min-width: 44px;
    padding: 0 6px;
    font-size: 14px;
  }
  #resultPanel:not([hidden]) .result-title button:first-child { font-size: 30px; }
  #resultPanel:not([hidden]) .chart-owner {
    min-width: 0;
    gap: 3px;
    padding: 7px 2px;
    overflow: hidden;
    white-space: nowrap;
  }
  #resultPanel:not([hidden]) .chart-owner h2 { font-size: 20px; }
  #resultPanel:not([hidden]) .chart-owner .owner-sub {
    margin-left: 0;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
  }
  #resultPanel:not([hidden]) .owner-pillars { gap: 7px; }
  #resultPanel:not([hidden]) .owner-pillars span { display: block; }
  #resultPanel:not([hidden]) .owner-pillars small { display: none; }
  #resultPanel:not([hidden]) .owner-pillars b { font-size: 13px; }
  #resultPanel:not([hidden]) .result-title.is-compact { min-height: 58px; }
  #resultPanel:not([hidden]) .result-title.is-compact .chart-owner { display: flex; padding: 0 2px; }
  #resultPanel:not([hidden]) .result-title.is-compact .chart-owner h2 { font-size: 17px; }
  #resultPanel:not([hidden]) .result-title.is-compact .owner-pillars { gap: 5px; }
  #resultPanel:not([hidden]) .result-title.is-compact .owner-pillars b { font-size: 12px; }
  .result-more-menu { top: calc(100% - 4px); right: 6px; }

  /* ⚠⚠ 微滚时顶部吸顶区高频闪烁 —— 四个成因叠加，缺一不可（站长 2026-09-23 报）。
     症状：小幅纵向滚动（未触发大段位移）时，命主信息条 + 四页签闪烁重绘；
     大幅滚动反而正常。原因全在「微滚区间正好是收拢状态反复翻转的区间」：

     ① backdrop-filter: blur(16px)（chart.css .result-title）。
        sticky 元素上的 backdrop-filter 每帧都要重新采样其背后的内容，
        微滚时背后内容每帧都在变 → 每帧重新做一次高斯模糊。
        手机端 GPU 吃不住，表现就是闪。**这是主因。**
        移动端去掉模糊，改用不透明底色 —— 本页底色本就是纯色，
        视觉上几乎无差别，但不再需要逐帧采样。
     ② .result-title 的 transition: min-height。收拢/展开是 96px↔58px 的
        高度动画，微滚时若 toggle 反复触发，每次都要重排整页。
     ③ JS 在 scroll 里读 resultPanel.offsetTop —— 强制同步布局，
        每个滚动事件都触发一次重排（详见 chart.js syncCompactHeader）。
     ④ 两个 sticky 元素的 top 是硬编码（96px / 58px）配 .is-compact，
        高度一动画，页签的 top 就要跟着变，又一轮重排。

     修法（CSS 这半边）：移动端取消模糊、取消高度过渡、改用 transform
     做收拢（合成器属性，不触发布局），并把两个 sticky 的 top 改为
     由 CSS 变量统一驱动，避免硬编码两处对不上。 */
  #resultPanel:not([hidden]) .result-title {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* 不透明底：模糊取消后需要自己挡住下面滚过的内容。 */
    background: #fbfaf6;
    /* 只过渡合成器友好属性；height/min-height 的过渡会把微滚变成重排。 */
    transition: box-shadow var(--dur) var(--ease);
    will-change: transform;
    /* ⚠ 这里**只能**用 contain: layout，绝不能加 paint。
       `.result-more-menu` 是 .result-title 的绝对定位子元素，向下溢出条外
       （menuBottom=185 > headerBottom=96）。contain: paint 会把超出本盒的
       子元素裁掉 —— 实测「更多」菜单 94px 里有 89px 被裁没，点开只剩一条边。
       layout 单独用不裁剪，且仍能隔断内部布局对外的影响，足够。 */
    contain: layout;
  }
  /* .chart-owner 折起时缩到 .86 —— 这个是纯 transform，合成友好，保留。
     ⚠ 但**收尾曲线要换**：--ease 是 cubic-bezier(.4,0,.2,1)，起步慢，
     配上 250ms 时长，折起读完是「慢慢缩进去」，和「收拢」这个语义不搭
     （收拢该是干脆的）。换成快出慢收，并把时长收到 180ms。 */
  #resultPanel:not([hidden]) .result-title .chart-owner {
    transition: transform 180ms cubic-bezier(0, .55, .45, 1);
    transform-origin: center center;
  }
  #resultPanel:not([hidden]) .result-title.is-compact .chart-owner {
    transform: scale(.86);
  }
  /* 收拢只缩放内容，条本身高度不变 —— 于是页签的 top 恒定，
     不再随 .is-compact 变化，sticky 的 top 从此是常量。 */
  #resultPanel:not([hidden]) .result-title.is-compact { min-height: 96px; }
  .result-tabs {
    top: var(--sticky-head-h, 96px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* 2026-10-14：原为 overflow-x:auto。四个页签在 320px 也放得下，栏本身横滚只会
       和“横滑切页签”抢手势，故改为不可横滚。 */
    overflow-x: hidden;
    scrollbar-width: none;
    border-bottom: 0;
    background: #101513;
    /* 页签自身也建独立合成层，避免与头部条互相触发重绘。
       ⚠ 同样只 layout 不 paint：页签里没有溢出子元素，
       但保留下方空间给「更多」菜单相对头部定位，避免将来加下拉时踩同一个坑。 */
    will-change: transform;
    contain: layout;
  }
  /* 不再需要：上面的 top 已是常量，收拢与否都不变。 */
  .result-title.is-compact + .result-tabs { top: var(--sticky-head-h, 96px); }
  .result-tabs::-webkit-scrollbar { display: none; }
  .result-tabs button {
    min-height: 48px;
    padding: 10px 4px;
    font-size: 13px;
    color: rgba(255,255,255,.82);
    white-space: nowrap;
  }
  .result-tabs button.active { color: #d7b873; background: transparent; }
  .result-tabs-ink { background: #d7b873; }
  .result-view { padding: 16px 10px; }
  .basic-section-head { align-items: flex-start; }
  .basic-section-head p { display: none; }
  .basic-section-head h2, .module-heading h2 { font-size: 19px; }
  .basic-module { margin-top: 14px; padding: 14px 10px; border-radius: 14px; }
  .module-heading { align-items: center; }
  .cycle-analysis { align-items: flex-start; padding: 10px 12px; }
  .cycle-analysis strong { font-size: 13px; line-height: 1.55; }
  .timeline-heading span { font-size: 10px; }
  .detail-card {
    margin-bottom: 8px;
    padding: 12px 8px;
    border: 0;
    border-radius: 0;
    background: var(--card);
    box-shadow: none;
  }
  .detail-card h2 {
    margin: 0 -8px 10px;
    padding: 8px 10px;
    border-left: 3px solid var(--gold);
    background: var(--paper-2);
    font-size: 17px;
  }
  .chart-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .chart-toolbar button {
    min-height: 44px;
    padding: 8px 4px;
    font-size: 13px;
    white-space: normal;
  }

  /* 基础盘只有“项目 + 四柱”，手机端一屏完整展示。 */
  #basicChart.table-scroll { overflow-x: visible; }
  #basicChart .pro-table { min-width: 100%; table-layout: fixed; }
  #basicChart .pro-table thead th:first-child,
  #basicChart .pro-table tbody th { width: 54px; }
  #basicChart .pro-table th,
  #basicChart .pro-table td { padding: 8px 2px; }
  #basicChart .pro-table .stem,
  #basicChart .pro-table .branch { font-size: 23px; }
  #basicChart .tiny-lines { font-size: 11px; line-height: 1.55; }
  #basicChart .star-list,
  #detailChart .star-list {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
  }
  #basicChart .star-chip,
  #detailChart .star-chip {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 3px 2px;
    border-width: 1px;
    border-radius: 999px;
    box-shadow: none;
    font-size: 10px;
    line-height: 1.25;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  /* 专业细盘列数多，仅表格局部横滑，不撑宽整页。 */
  #detailChart.table-scroll {
    max-width: 100%;
    overflow-x: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  #detailChart.table-scroll::before {
    display: none;
  }
  /* 默认关闭胎命身时，项目 + 四柱完整收进一屏；打开辅助三列后才局部横滑。 */
  #detailChart .pro-table:not(.has-aux) { min-width: 100%; table-layout: fixed; }
  #detailChart .pro-table:not(.has-aux) thead th:first-child,
  #detailChart .pro-table:not(.has-aux) tbody th { width: 54px; }
  #detailChart .pro-table:not(.has-aux) th,
  #detailChart .pro-table:not(.has-aux) td { padding: 8px 2px; }
  #detailChart .pro-table:not(.has-aux) .stem,
  #detailChart .pro-table:not(.has-aux) .branch { font-size: 23px; }
  #detailChart .pro-table.has-aux {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  #detailChart .pro-table.has-aux thead th:first-child,
  #detailChart .pro-table.has-aux tbody th { width: 42px; }
  #detailChart .pro-table.has-aux th,
  #detailChart .pro-table.has-aux td { padding: 6px 1px; font-size: 10px; overflow-wrap: anywhere; }
  #detailChart .pro-table.has-aux .stem,
  #detailChart .pro-table.has-aux .branch { font-size: 19px; }
  #detailChart .pro-table.has-aux .tiny-lines { font-size: 9px; line-height: 1.45; }
  #detailChart .pro-table.has-aux .star-list { gap: 4px; }
  #detailChart .pro-table.has-aux .star-chip { padding-inline: 1px; font-size: 8.5px; letter-spacing: -0.5px; }
  /* 默认专业盘为：日期标签 + 流年 + 大运 + 年月日时，完整收进手机一屏。 */
  #detailChart .pro-table.has-aux:not(.has-extra-aux) {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
  }
  #detailChart .pro-table.has-aux:not(.has-extra-aux) thead th:first-child,
  #detailChart .pro-table.has-aux:not(.has-extra-aux) tbody th { width: 48px; }

  /* ⚠ 两态（开胎命身 / 关胎命身）的表格布局必须**完全对称**，都是
     fixed + 100% + 钉死列宽。曾经这里给开态单独写了
     `width: max-content; table-layout: auto`（想靠内容宽度抑制竖线位移），
     结果开了胎命身整表宽 382px > 容器 370px，**凭空多出 12px 横向溢出**，
     而竖线该挪多少还是挪多少 —— 布局模式压不住列数差，纯属白改。

     ⚠ 竖线位移 20px 的真相：**左段列数本来就不同**。
       关：日期48 │ 流年53 大运53 ‖ …   → 竖线 x = 164
       开：日期48 │ 身宫42 命宫42 胎元42 ‖ … → 竖线 x = 184
     关态左段 2 列 106px、开态 3 列 126px，差的就是多出来的那一列。
     这是算术，不是舍入 —— fixed 布局下「两列均分」与「三列均分」
     得到的每列宽不同，两态总宽必然不等。
     两列装三列的信息，又要竖线不动，做不到。
     故**不强压这 20px**：竖线随胎命身开合左右让出一列，
     换来的是四柱始终留在屏内（关态 tableW=370，零溢出）。
     真要让竖线不动，只能把左段改成固定总宽、两态内部再分配，
     那会让「流年/大运」两列被压到 53px 以下而换行折字，得不偿失。 */
  #detailChart .pro-table.has-extra-aux {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
  }
  #detailChart .pro-table.has-extra-aux thead th:first-child,
  #detailChart .pro-table.has-extra-aux tbody th { width: 48px; }
  #detailChart .pro-table.has-extra-aux th.aux-col,
  #detailChart .pro-table.has-extra-aux td.aux-col { width: 42px; }
  #detailChart .pro-table.has-extra-aux .sep-col { width: 3px; padding: 0; }

  /* ⚠ 让竖分隔线在两态落在同一个 x 上（站长要求「竖线不动」）。
     不是靠布局模式，而是让**两态左段总宽相等**：
       关（流年 大运）  ：2 列 × 63 = 126
       开（身宫 命宫 胎元）：3 列 × 42 = 126
     上下两条规则就是这个 63/42 的来源，缺一不可 ——
     只钉「开」态会让左段 126 vs 106，竖线照样位移 20px（已实测）。

     ⚠ 关态的 63px 必须写成 `has-aux:not(.has-extra-aux) th.aux-col`，
     不能只写 `has-extra-aux`。`:not(.has-extra-aux)` 让这条只命中关态，
     否则会和开态的 42px 直接对撞（两者特异性相同，按源码顺序决胜负，
     结果不可预测）。 */
  #detailChart .pro-table.has-aux:not(.has-extra-aux) th.aux-col,
  #detailChart .pro-table.has-aux:not(.has-extra-aux) td.aux-col { width: 63px; }
  #detailChart .pro-table.has-extra-aux th.aux-col,
  #detailChart .pro-table.has-extra-aux td.aux-col { width: 42px; }
  #detailChart .pro-table.has-aux:not(.has-extra-aux) th,
  #detailChart .pro-table.has-aux:not(.has-extra-aux) td { padding: 7px 1px; font-size: 10px; overflow-wrap: normal; word-break: keep-all; }
  #detailChart .pro-table.has-aux:not(.has-extra-aux) .sep-col { width: 3px; padding: 0; }
  /* 日柱表头的小字日期在 53px 列里放不下「2000-01-01」（实测 51.2px，
     与列宽只差 2px，稍微有内边距就折成两行，表头因此高出近一倍）。
     缩到 9px 并禁止折行，日期始终一行。 */
  #detailChart .pro-table.has-aux:not(.has-extra-aux) .stem,
  #detailChart .pro-table.has-aux:not(.has-extra-aux) .branch { font-size: 22px; }
  #detailChart .pro-table.has-aux:not(.has-extra-aux) .tiny-lines { font-size: 9px; line-height: 1.45; }
  /* 藏干并排（甲（正印）乙（伤官））两种盘共用，故不限定 #detailChart。
     字号由 tiny-lines 继承，小字按相对大小走（见 chart-detail.css 的 .hidden-pair small），
     这里只收一下横向间距，避免 370px 下两组并排顶破列宽。 */
  #basicChart .hidden-pair-list,
  #detailChart .hidden-pair-list { gap: 2px; }
  #detailChart .pro-table.has-aux:not(.has-extra-aux) .star-chip { font-size: 8px; }
  #detailCyclesSlot .basic-module { margin-top: 10px; border-inline: 0; border-radius: 0; box-shadow: none; }
  #detailCyclesSlot .module-heading { position: sticky; left: 0; }
  #detailCyclesSlot .cycle-analysis { margin-bottom: 8px; padding-block: 8px; }
  #detailCyclesSlot .timeline-group + .timeline-group { margin-top: 8px; padding-top: 8px; }
  #detailCyclesSlot .timeline-heading { margin-bottom: 4px; }
  /* ---------- 岁运三表（大运 / 流年 / 流月）的手机端列宽 ----------
     ⚠ 去重记录（2026-09-25）：本块原先有**两套列宽规则同时命中同一批元素**——
       一套选 `#detailCyclesSlot …`（98px），一套选 `.cycles-module …`（68px）。
       实测 DOM 是 `#detailCyclesSlot > #cyclesModule.cycles-module`，
       即后者嵌在前者里，所以两套**都生效**；又因 `#detailCyclesSlot .x` 的
       特异性（1 个 id）高于 `.cycles-module .x`（0 个 id），最终是 **98px 胜出**，
       68px 那套连同它的 min-height:108px、8px padding 全是死规则。
       已合并为一套，只留 #detailCyclesSlot 前缀，避免下次再被误读。

     ⚠ 2026-09-25 第二次修正，这条记录必须留着，它踩过一个隐蔽的坑：
     本站**曾经**在这里写 `flex: 0 0 98px` —— flex 布局里 flex-basis **直接压过
     width**，所以无论上方 chart-detail.css 把 width 改成多少，手机端永远是 98px。
     表现就是「本地改完、桌面看着对了，手机上跟之前一模一样」。
     现在只用 `width`（配 `flex: 0 0 auto`），与 chart-detail.css 一致。

     列宽 40px：十神去掉括号、跟到干支右侧后，一柱自然宽 = 干支 17px 字 + 十神
     .82em ≈ 33px；加左右 padding 各 1px、右边框 1px = 36px，留 4px 容错。
     容器 350px ÷ (40+5) ≈ 7.7 → 一屏 **7~8 列**（桌面端 .chart-app 更宽，是 10 列）。 */
  /* gap 8px（原 0）：间距为 0 时干支字两列紧贴，视觉上糊成一片 ——
     参考图每列之间是有呼吸的。 */
  #detailCyclesSlot .dayun-table { width: max-content; min-width: 100%; gap: 6px; padding-bottom: 4px; }
  #detailCyclesSlot .dayun-table .dy-col,
  #detailCyclesSlot .dayun-table.liunian .dy-col,
  #detailCyclesSlot .dayun-table.liuyue .dy-col,
  #detailCyclesSlot .dayun-table.xiaoyun .dy-col {
    flex: 0 0 auto;
    /* 44px：一柱（干支 17px 字 + 十神 .82em）自然宽 34~35px，
       列内可用宽 = 44 − 左右 padding 4 = 40px，留 5px 容错。
       ⚠ 收到 38px 时实测第二行的十神会被裁掉半个字（列内只剩 34px）。
       被裁的是这张表的读数本身，不能裁 —— 宁少一列。 */
    width: 42px;
    min-width: 42px;
    min-height: 0;
    padding: 3px 2px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
  }
  #detailCyclesSlot .dayun-table.liuyue { min-width: 0; }
  #detailCyclesSlot .dayun-table .dy-year,
  #detailCyclesSlot .dayun-table .dy-age { font-size: 8px; line-height: 1.4; }
  #detailCyclesSlot .dayun-table .dy-gz,
  #detailCyclesSlot .dayun-table.liunian .dy-gz,
  #detailCyclesSlot .dayun-table.liuyue .dy-gz { font-size: 17px; }
  #detailCyclesSlot .dayun-table .dy-xy { display: none; }
  #detailCyclesSlot .dayun-table .dy-col.active,
  #detailCyclesSlot .dayun-table .dy-col.cur { background: var(--gold-soft); box-shadow: inset 0 -2px 0 var(--gold); }
  .detail-relations { margin: 8px 0 12px; padding: 10px 4px; }
  #detailCyclesSlot .dayun-scroll {
    max-width: 100%;
    overflow-x: auto;
  }
  .gz-diagram-scroll { overflow-x: visible; }
  .gz-diagram { min-width: 0; }
  .gz-diagram-scroll::after { display: none; }
  .result-actions { gap: 10px; padding: 0 14px 24px; }
  .result-actions .button { width: 100%; }

  .star-drawer {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    height: min(88dvh, 760px);
    padding-bottom: max(var(--sp-7), env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    /* 关闭态的收起由 JS 在过渡结束后置 hidden 完成（见 closeDrawer），
       不靠这里的 transform 撑出页面 —— 那会在底部留下大块无内容白边。 */
    transform: translateY(105%);
  }

  /* 排盘结果页不再折叠：站长要求内容一眼见底。
     案例页的 .entry.mobile-collapsed 仍在用，保留在文件上方。 */

  .entry-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .mobile-section-toggle {
    display: inline-flex;
    min-width: 66px;
    min-height: 44px;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    padding: 5px 8px;
    border: 0;
    background: transparent;
    color: var(--gold);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: var(--fw-normal);
    cursor: pointer;
  }
}

/* 专业细盘神煞最终覆盖：纯文字保留分类颜色；mobile.css 最后加载，须在此收口。 */
@media (max-width: 620px) {
  #detailChart .pro-table .star-list { display: flex; flex-direction: column; align-items: center; gap: 3px; }
  #detailChart .pro-table .star-chip,
  #detailChart .pro-table.has-aux:not(.has-extra-aux) .star-chip {
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 1px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.1px;
  }
  #detailChart .pro-table.has-extra-aux .star-chip { padding: 1px 0; font-size: 9.5px; }
}

@media (min-width: 621px) {
  .mobile-section-toggle { display: none; }

  /* ⚠ 桌面端同样让两态左段总宽相等，竖线才不动：2 × 72 = 3 × 48 = 144。
     放在 mobile.css 的 ≥621px 段里，是因为上面 `has-aux:not(...)`
     那套全在 ≤620px 段内 —— 桌面端本来没有 aux-col 宽度声明，
     所以这里从零写一套即可，不存在特异性对撞。

     曾经把这套写进 chart-detail.css（不分视口），结果连手机端一起
     钉成 42px，把手机端本来 53px 的「流年/大运」压窄，
     竖线位移从 20px 恶化到 42px。桌面规则必须留在桌面断点内。 */
  #detailChart .pro-table.has-aux:not(.has-extra-aux) th.aux-col,
  #detailChart .pro-table.has-aux:not(.has-extra-aux) td.aux-col { width: 72px; }
  #detailChart .pro-table.has-extra-aux th.aux-col,
  #detailChart .pro-table.has-extra-aux td.aux-col { width: 48px; }
  #detailChart .pro-table th.sep-col { width: 3px; padding: 0; }
  #detailChart .pro-table thead th:first-child,
  #detailChart .pro-table tbody th { width: 48px; }
  /* 2026-10-15 全站排查：胎命身三列钉在 48px（为保竖线不动，见上），四字神煞（太极贵人等）13px 不换行需 52px → 溢出。
     列宽不动，只让左段（标签列 + 胎命身列）里的神煞缩字号并允许折行。 */
  #detailChart .pro-table.has-aux tbody td:nth-child(-n+4) .star-chip { white-space: normal; font-size: 11.5px; line-height: 1.25; letter-spacing: -.2px; text-align: center; }
}

@media (max-width: 360px) {
  :root { --shell-pad: 12px; }
  .brand small { display: none; }
  .result-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .result-tabs button { font-size: 12px; }
  #basicChart .pro-table thead th:first-child,
  #basicChart .pro-table tbody th { width: 48px; }
  #basicChart .pro-table .stem,
  #basicChart .pro-table .branch { font-size: 21px; }
  #detailChart .pro-table.has-aux thead th:first-child,
  #detailChart .pro-table.has-aux tbody th { width: 38px; }
  #detailChart .pro-table.has-aux th,
  #detailChart .pro-table.has-aux td { font-size: 9px; }
  #detailChart .pro-table.has-aux .stem,
  #detailChart .pro-table.has-aux .branch { font-size: 17px; }
  #detailChart .pro-table.has-aux .star-chip {
    padding-inline: 1px;
    font-size: 7.5px;
    letter-spacing: -0.65px;
  }
}

/* 2026-10-14 流畅度：返回顶部按钮是 fixed 元素，带 backdrop-filter 时手机每帧滚动都要
   重新模糊其背后内容（与本文件顶部页头、结果标题条去掉毛玻璃同理）。按钮底色本就 92% 不透明，
   去掉模糊视觉几乎无差别。 */
@media (max-width: 620px) {
  .back-to-top { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--card); }
}