/* ============================================================
   海天宗式盘 · 移动端适配层（Android WebView / 手机浏览器）
   全部规则仅窄屏（≤720px）生效；桌面端加载本文件无任何影响。
   配套：app.js 中 isMobile 分支（排盘后滚动结果区、振动反馈、抽屉锁定）。
   ============================================================ */

/* ---------- 1. 顶部栏：吸顶 + 触控目标 ---------- */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .top-header {
    position: sticky; top: 0; z-index: 300;
    height: 48px;
    padding: 6px 10px;
  }
  /* 品牌居中（与桌面端一致）。注意：.brand 是绝对定位，不受顶栏剩余空间约束，
     窄屏下宽度会顶进右侧按钮区 —— 必须给 max-width 才会收缩
     （否则重演「导出压住版本号」的重叠）。
     130px = 右侧 ☰ 按钮(44) + 顶栏内边距(10) + 安全间隙：
     品牌居中时右边界 =(W+bw)/2，需 ≤ W-54-6 → bw ≤ W-120，取 130 留余量。 */
  .brand {
    font-size: 17px; letter-spacing: 2px;
    max-width: calc(100% - 130px);
    min-width: 0;
    gap: 6px;
  }
  /* 极窄屏（≤360px）时让标题先省略，保证版本号始终完整可见 */
  .brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  /* 顶栏只留一个 ☰ 按钮：历史记录的入口收进下拉菜单 */
  #toggleHistory { display: none; }
}

/* ---------- 2. 历史面板 → 全屏抽屉 ---------- */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .history-pane {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 0;
    border: none;
    border-radius: 0;
    z-index: 400;
    display: flex;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top) + 8px) 12px 12px;
    overflow: hidden;
  }
  .history-head { flex-shrink: 0; }
  .history-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .history-list li { padding: 10px 6px; }
  .history-actions { flex-shrink: 0; padding-top: 8px; }
  .history-export-btn { flex: 1; min-height: 40px; }
  .history-backup-actions { flex-shrink: 0; padding-top: 8px; }
  .history-backup-btn { flex: 1; min-height: 40px; }
  body.history-open { overflow: hidden; }
}

/* ---------- 3. 输入区：放宽限高 + 触控目标 ---------- */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .left-pane { max-height: 56vh; }
  .section-head { padding: 10px 8px; }
  .section-head h2 { font-size: 15px; }
  .atom-option {
    padding: 8px 10px;
    font-size: 13px;
  }
  .atom-option input {
    width: 18px; height: 18px;
    margin-right: 4px;
    accent-color: var(--accent);
  }
  /* 勾选视觉反馈：卡片头整体高亮 */
  .section-head:has(input:checked) h2 { color: var(--accent); }
  /* 折叠 body 平滑开合（动画轻量） */
  .collapse-body { transition: opacity .15s ease; }
  .input-card.collapsed .collapse-body { opacity: 0; }
  /* 表单控件触控高度 */
  .form-grid select, .form-grid input,
  .aligned-form select, .aligned-form input {
    min-height: 34px;
    font-size: 12px;
  }
  .time-row label, .number-row label { min-width: 44px; }
  .time-row select, .number-row select { min-height: 32px; }
}

/* ---------- 4. 排盘按钮 → 底部固定悬浮 ---------- */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .master-run {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 350;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--panel);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
  }
  .combo.run-atoms.master-run-btn { min-height: 44px; }
  .app-main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .left-pane { margin-bottom: 0; }
}

/* ---------- 5. 结果区：横向滚动 + 页签滑动 ---------- */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .right-pane { padding: 6px; }
  .result-scale { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .combo-result { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sheet-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .sheet-tabs::-webkit-scrollbar { display: none; }
  .sheet-tab { flex: 0 0 auto; min-height: 36px; padding: 6px 12px; white-space: nowrap; }
  .result-actions { justify-content: flex-start; gap: 4px; }
  .result-zoom-btn { min-width: 34px; min-height: 34px; }
  .result-export-btn, .result-font-btn { min-height: 34px; }
}

/* ---------- 6. 反馈层：toast 抬升避让悬浮按钮 ---------- */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .toast {
    bottom: calc(72px + env(safe-area-inset-bottom));
    max-width: 88vw;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: 20px;
  }
}

/* ---------- 7. 元命归藏 / 风水 ---------- */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .fengshui-tabs { padding: 6px; }
  .fengshui-result-tools { flex-wrap: wrap; gap: 6px; }
  .fengshui-result-tools label { min-height: 36px; }
  .floorplan-canvas { max-width: 100%; }
  .fs-actions-sep { display: none; }
}

/* ---------- 8. 安全区 & 纵向小屏 ---------- */
@media (max-width: 480px) {
  .left-pane { max-height: 50vh; }
  .input-card { padding: 5px 6px; margin-bottom: 6px; }
  .time-row label { min-width: 38px; flex: 1 1 30%; }
  .sheet-tab { font-size: 12px; }
  .brand-icon { width: 20px; height: 20px; }
  .version-badge { font-size: 9px; padding: 0 4px; }
}

/* ============ 移动端三步导航：选择排盘 → 输入 → 输出 ============ */
.mobile-home { display: none; }
.mobile-nav-bar { display: none; }

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  /* 首页：只显示排盘选择面板（flex 纵向布局，grid 撑满） */
  body.mobile-step-home #mobileHome { display: flex; flex-direction: column; }
  body.mobile-step-home .left-pane,
  body.mobile-step-home .right-pane { display: none; }
  body.mobile-step-home .app-main { padding-bottom: 0; overflow-y: auto; }

  /* 输入页：只显示当前排盘卡片 */
  body.mobile-step-input #mobileHome { display: none; }
  body.mobile-step-input .right-pane { display: none; }
  body.mobile-step-input .left-pane { border-right: none; }
  /* 手机端全屏单栏：隐藏桌面分栏拖拽条 */
  .pane-resizer { display: none; }
  /* 输入页：让表单区撑满排盘按钮上方的全部可用高度，消除下方留白
     （.left-pane 默认 max-height:56vh/50vh，桌面双栏时代的习惯；手机端输入页应
       解除该限制，flex:1 顶到 app-main 底部，底部留出 fixed 按钮的避让空间） */
  body.mobile-step-input .left-pane {
    max-height: none;
    flex: 1 1 auto;
    height: auto;
    overflow-y: auto;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  body.mobile-step-input .app-main { overflow-y: auto; }
  body.mobile-step-input #tab-input .input-card { display: none; }
  body.mobile-step-input #tab-input .input-card.mobile-active { display: block; }
  /* 输入页：活动卡片撑满表单区高度，消除底部到排盘按钮之间的空白
     （.left-section 有 display:block !important，需同样 !important 压过；
        #tab-input 撑满 left-pane，卡片再 flex:1 填充） */
  body.mobile-step-input #tab-input {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  body.mobile-step-input #tab-input .input-card.mobile-active {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  body.mobile-step-input #tab-input .input-card.mobile-active > * { flex-shrink: 0; }
  /* 元命归藏：输入页默认隐藏，进入风水卡片时才显示
     （.left-section 有 display:block !important，这里必须同样 !important 才能压过） */
  body.mobile-step-input #tab-tools { display: none !important; }
  /* 风水输入页打开时：隐藏 #tab-input（空占位），只显示 #tab-tools，消除上方空白 */
  body.mobile-step-input:has(#tab-tools.mobile-fs-open) #tab-input {
    display: none !important;
  }
  body.mobile-step-input #tab-tools.mobile-fs-open {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--card-bg);
  }
  /* 风水输入页：left-pane 米黄背景与 padding 是顶部黄色区域的来源，一并压掉 */
  body.mobile-step-input:has(#tab-tools.mobile-fs-open) .left-pane {
    background: var(--card-bg);
    padding: 0;
  }
  /* 风水输入页：白色背景 + 卡片按内容高度靠上，消除顶部米黄大片空白 */
  body.mobile-step-input #tab-tools.mobile-fs-open .input-card.mobile-active {
    flex: 0 0 auto;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--card-bg);
  }
  /* 风水输入页：压缩头部让输入内容靠上 —— 隐藏重复的"元命归藏"折叠标题头，
     返回栏（#mobileInputBar 在 tab-tools 外，sticky 顶部）缩为紧凑一行 */
  body.mobile-step-input #tab-tools.mobile-fs-open .section-head.collapse-head {
    display: none;
  }
  body.mobile-step-input #tab-tools.mobile-fs-open ~ .mobile-nav-bar,
  body.mobile-step-input:has(#tab-tools.mobile-fs-open) .mobile-nav-bar {
    padding: 4px 8px;
  }
  body.mobile-step-input:has(#tab-tools.mobile-fs-open) .mobile-nav-bar .mobile-back-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
  body.mobile-step-input:has(#tab-tools.mobile-fs-open) .mobile-nav-bar .mobile-nav-title {
    font-size: 13px;
  }
  body.mobile-step-input #tab-tools .input-card.mobile-active {
    display: flex !important;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
  }
  /* 元命归藏：卡片内输入区按内容自然高度，消除顶部大片黄色留白 */
  body.mobile-step-input #tab-tools .input-card.mobile-active > * { flex-shrink: 0; }
  body.mobile-step-input #tab-tools .fengshui-card .collapse-body { flex: 0 0 auto; }
  body.mobile-step-input #tab-tools .fengshui-card .fengshui-sheet { flex: 0 0 auto; }
  body.mobile-step-input #tab-tools .fengshui-card .fengshui-layout { flex: 0 0 auto; }
  body.mobile-step-input #tab-tools .fengshui-card .fengshui-inputs { flex: 0 0 auto; }

  /* ============================================================
     输入页控件整体放大（触控友好 + 消除"字太小"观感）
     仅窄屏生效，桌面端不受影响
     ============================================================ */
  body.mobile-step-input .form-grid,
  body.mobile-step-input .aligned-form {
    gap: 10px 12px;
  }
  /* 普通 field 下拉/输入：更大更饱满 */
  body.mobile-step-input .form-grid label,
  body.mobile-step-input .aligned-form label {
    font-size: 13px;
  }
  body.mobile-step-input .form-grid input,
  body.mobile-step-input .form-grid select,
  body.mobile-step-input .aligned-form input,
  body.mobile-step-input .aligned-form select {
    font-size: 15px;
    padding: 9px 11px;
    min-height: 44px;
    border-radius: 6px;
  }
  /* 复选框 / radio 加大 */
  body.mobile-step-input .form-grid label:has(> input[type="checkbox"]) input[type="checkbox"],
  body.mobile-step-input .aligned-form label:has(> input[type="checkbox"]) input[type="checkbox"],
  body.mobile-step-input .atom-option input[type="checkbox"],
  body.mobile-step-input .atom-option input[type="radio"] {
    width: 20px; height: 20px;
  }
  /* 含 checkbox/radio 的标签文字加大 */
  body.mobile-step-input .form-grid label:has(> input[type="checkbox"]),
  body.mobile-step-input .aligned-form label:has(> input[type="checkbox"]),
  body.mobile-step-input .atom-option {
    font-size: 15px;
    padding: 6px 0;
    gap: 8px;
  }

  /* ---------- 时间行（年/月/日/时/分）：5 等分横排，不换行 ---------- */
  body.mobile-step-input .time-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  body.mobile-step-input .time-row label {
    min-width: 0;
    font-size: 13px;
  }
  body.mobile-step-input .time-row select {
    font-size: 15px;
    padding: 9px 6px;
    min-height: 44px;
    min-width: 0;
    width: 100%;
  }
  /* 紫微斗数：省辖/城市并排一行省空间；
     时间行含历法共 6 项（历法|年、月|日、时|分）3 行 2 列 */
  body.mobile-step-input #ziweiForm {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 5px;
  }
  /* 性别/真太阳时 跨满两列 */
  body.mobile-step-input #ziweiForm > label:nth-child(1),
  body.mobile-step-input #ziweiForm > label:nth-child(2) {
    grid-column: 1 / -1 !important;
  }
  /* 省辖/城市 各占一列（并排一行） */
  body.mobile-step-input #ziweiForm > label:nth-child(3),
  body.mobile-step-input #ziweiForm > label:nth-child(4) {
    grid-column: auto !important;
  }
  /* 时间行跨满两列 */
  body.mobile-step-input #ziweiForm .time-row { grid-column: 1 / -1 !important; }
  /* 时间行内部：历法|年、月|日、时|分 三行两列 */
  body.mobile-step-input #ziweiForm .time-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
  }
  body.mobile-step-input #ziweiForm .time-row select {
    min-height: 40px;
    font-size: 15px;
  }
  /* number-row（子平"以数成课"数字输入） */
  body.mobile-step-input .number-row { gap: 10px; }
  body.mobile-step-input .number-row label { min-width: 0; font-size: 13px; }
  body.mobile-step-input .number-row input {
    font-size: 15px; padding: 9px 11px; min-height: 44px;
  }

  /* ---------- bazi-meta-row（子平 meta）：2 列换成单列更饱满 ---------- */
  body.mobile-step-input .bazi-meta-row { gap: 10px; }
  body.mobile-step-input .bazi-meta-row label {
    flex-basis: 100%;
    min-width: 0;
    font-size: 13px;
  }

  /* ============================================================
     字段少工具 → 单列填充（下拉框撑满整行，字号自然放大）
     ============================================================ */
  body.mobile-step-input #heluoForm,
  body.mobile-step-input #huangjiForm,
  body.mobile-step-input #baziForm {
    grid-template-columns: 1fr !important;
  }
  body.mobile-step-input #heluoForm label,
  body.mobile-step-input #huangjiForm label,
  body.mobile-step-input #baziForm label {
    grid-column: 1 / -1;
  }
  /* 子容器内的 atom-option / 子行 label 需回到自适应列，避免被上面的 grid-column 压成一整行 */
  body.mobile-step-input #baziForm .ht-mode-row .atom-option,
  body.mobile-step-input #meihuaForm .meihua-mode-row .atom-option,
  body.mobile-step-input #meihuaForm .meihua-options-row .atom-option,
  body.mobile-step-input #liuyaoForm .time-row:has(> label.atom-option) .atom-option,
  body.mobile-step-input #liuyaoForm .liuyao-moving-check,
  body.mobile-step-input #liuyaoForm .form-grid label,
  body.mobile-step-input #liuyaoForm .aligned-form label,
  body.mobile-step-input .time-row label {
    grid-column: auto !important;
  }
  /* 奇门遁甲：省辖/城市并排 + 时家排盘/时家起局并排，压缩高度避免底部出界 */
  body.mobile-step-input #qimenForm {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 5px;
  }
  /* 性别/时间行/手工定局/定盘说明 跨满两列 */
  body.mobile-step-input #qimenForm > label:nth-child(1),
  body.mobile-step-input #qimenForm .qimen-panel,
  body.mobile-step-input #qimenForm > label:nth-child(10),
  body.mobile-step-input #qimenForm .qimen-ding-note {
    grid-column: 1 / -1 !important;
  }
  /* 历法 左列 + 真太阳时 右列（相邻并排） */
  body.mobile-step-input #qimenForm > label:nth-child(2),
  body.mobile-step-input #qimenForm > label:nth-child(4) {
    grid-column: auto !important;
  }
  /* 省辖 左列 + 城市 右列（相邻并排） */
  body.mobile-step-input #qimenForm > label:nth-child(5),
  body.mobile-step-input #qimenForm > label:nth-child(6) {
    grid-column: auto !important;
  }
  /* 时家排盘 左列 + 时家起局 右列（相邻并排） */
  body.mobile-step-input #qimenForm > label:nth-child(8),
  body.mobile-step-input #qimenForm > label:nth-child(9) {
    grid-column: auto !important;
  }
  /* 定盘说明：居中灰字小注 */
  body.mobile-step-input #qimenForm .qimen-ding-note {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    padding: 2px 0 0;
  }
  /* 命盘说明：居中灰字小注（与定盘说明同款），跨满两列避免文字被截断换行 */
  body.mobile-step-input #qimenForm .qimen-shipan-note {
    grid-column: 1 / -1 !important;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    padding: 2px 0 0;
  }
  /* 命盘禁用飞宫法：时家排盘 select 置灰提示 */
  body.mobile-step-input #qimenForm label:has(select[name="shipan"]) {
    position: relative;
  }
  body.mobile-step-input #qimenForm label:has(select[name="shipan"]) select:disabled {
    color: var(--muted);
  }
  /* 奇门时间行内部 5 等分 */
  body.mobile-step-input #qimenForm .qimen-panel .time-row {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  body.mobile-step-input #qimenForm .qimen-panel .time-row select {
    min-height: 40px;
    font-size: 15px;
  }

  /* 子平"日时课/以数成课"模式行：撑满一行 */
  body.mobile-step-input #baziForm .ht-mode-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  body.mobile-step-input #baziForm .ht-mode-row .atom-option {
    flex-direction: row;
    justify-content: center;
    font-size: 15px;
    padding: 12px 8px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  /* 子平"以数成课"数字行：2 列 */
  body.mobile-step-input #baziForm .number-row {
    grid-template-columns: 1fr 1fr;
    display: grid;
    gap: 10px;
  }

  /* ============================================================
     历法挪到「城市」下面（仅手机排盘输入页）
     ------------------------------------------------------------
     手机是竖着读的，先「地点」（省辖/城市）再「时间口径」（历法）更顺；
     原来的顺序是 历法 → 省辖 → 城市。
     做法只用 order（不改 DOM、不改桌面）：
       · 桌面端这些表单靠 grid-template-areas / grid-area 定位，
         order 对已显式定位的网格项不生效 → 桌面渲染零变化。
       · order 会改变「自动排布」的顺序，所以给表单所有直接子级一个基准值，
         再把 location/time 这几项提到前面，其余自然沉底。
     保留原「压缩高度」意图：这些字段仍两两并排，不额外增加行数。
     子平 meta 行是 flex 单列堆叠，直接排 真太阳时/省辖/城市/历法/闰月。
     ============================================================ */

  /* ---- 子平（单列）---- */
  /* 注意：子平的历法 <label> 没有 .bazi-calendar 类（只有奇门/纳甲/梅花/河洛/皇极有），
     所以这里必须用 :has(select[name="calendar"]) 选，别抄别处的 .bazi-calendar。 */
  body.mobile-step-input #baziForm .bazi-meta-row > * { order: 0; }
  body.mobile-step-input #baziForm .bazi-meta-row > label:has(select[name="city"]) { order: 1; }
  body.mobile-step-input #baziForm .bazi-meta-row > label:has(select[name="calendar"]) { order: 2; }
  /* 闰月跟历法走（只在阴历时出现，与历法强绑定） */
  body.mobile-step-input #baziForm .bazi-meta-row > label[data-leap-label] { order: 3; }

  /* ---- 奇门 / 纳甲 / 梅花（2 列）：第 1 行 省辖|城市，第 2 行 真太阳时|历法 ---- */
  body.mobile-step-input #qimenForm > *,
  body.mobile-step-input #liuyaoForm > *,
  body.mobile-step-input #meihuaForm > * { order: 9; }

  body.mobile-step-input #qimenForm > label:has(select[name="province"]),
  body.mobile-step-input #liuyaoForm > label:has(select[name="province"]),
  body.mobile-step-input #meihuaForm > label:has(select[name="province"]) { order: 0; }

  body.mobile-step-input #qimenForm > label:has(select[name="city"]),
  body.mobile-step-input #liuyaoForm > label:has(select[name="city"]),
  body.mobile-step-input #meihuaForm > label:has(select[name="city"]) { order: 1; }

  body.mobile-step-input #qimenForm > label:has(select[name="zty"]),
  body.mobile-step-input #liuyaoForm > label:has(select[name="zty"]),
  body.mobile-step-input #meihuaForm > label:has(select[name="zty"]) { order: 2; }

  body.mobile-step-input #qimenForm > label.bazi-calendar,
  body.mobile-step-input #liuyaoForm > label.bazi-calendar,
  body.mobile-step-input #meihuaForm > label.bazi-calendar { order: 3; }

  /* 纳甲是唯一没有给 .bazi-calendar 松绑的表单：styles.css 的
     @media(max-width:720px) 里 `.bazi-calendar{grid-column:1}` 会把它钉死在左列，
     结果历法自己掉到第三行。这里放回 auto 让它和真太阳时并排。
     （奇门/梅花各自已有 nth-child 的 auto 规则，无需重复。） */
  body.mobile-step-input #liuyaoForm > label.bazi-calendar {
    grid-column: auto !important;
  }

  body.mobile-step-input #qimenForm > label[data-leap-label],
  body.mobile-step-input #liuyaoForm > label[data-leap-label],
  body.mobile-step-input #meihuaForm > label[data-leap-label] { order: 4; }

  body.mobile-step-input #qimenForm > label.solar-location-lock,
  body.mobile-step-input #liuyaoForm > label.solar-location-lock,
  body.mobile-step-input #meihuaForm > label.solar-location-lock { order: 5; }

  /* 奇门「性别」始终第一（其余表单首项不是性别） */
  body.mobile-step-input #qimenForm > label:has(select[name="sex"]) { order: -1; }

  /* ---------- 梅花易数：起卦方式 2 列重排 + 选项 1 列饱满 ---------- */
  /* 历法|真太阳时 / 省辖|城市 两两并排，压缩高度避免滚动 */
  body.mobile-step-input #meihuaForm {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 5px;
  }
  /* 时间行 / 起卦方式行 / mode行 / 选项行 跨满两列 */
  body.mobile-step-input #meihuaForm .time-row,
  body.mobile-step-input #meihuaForm .meihua-mode-row,
  body.mobile-step-input #meihuaForm .meihua-options-row,
  body.mobile-step-input #meihuaForm > label.full {
    grid-column: 1 / -1 !important;
  }
  /* 历法(1) 左列 + 真太阳时(3) 右列 */
  body.mobile-step-input #meihuaForm > label:nth-child(1),
  body.mobile-step-input #meihuaForm > label:nth-child(3) {
    grid-column: auto !important;
  }
  /* 省辖(4) 左列 + 城市(5) 右列 */
  body.mobile-step-input #meihuaForm > label:nth-child(4),
  body.mobile-step-input #meihuaForm > label:nth-child(5) {
    grid-column: auto !important;
  }
  body.mobile-step-input #meihuaForm .meihua-mode-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  body.mobile-step-input #meihuaForm .meihua-mode-row .atom-option {
    flex-direction: row;
    justify-content: center;
    font-size: 15px;
    padding: 9px 8px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  /* 梅花 错卦/综卦/卦辞爻辞 → 三个并列一行（压缩高度，不占滚动余地） */
  body.mobile-step-input #meihuaForm .meihua-options-row {
    flex-direction: row;
    gap: 8px;
    align-items: stretch;
  }
  body.mobile-step-input #meihuaForm .meihua-options-row .atom-option {
    flex: 1 1 0;
    flex-direction: row;
    justify-content: center;
    font-size: 15px;
    padding: 8px 4px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  /* 梅花 panel（双数/单数/手工）内的字段 */
  body.mobile-step-input #meihuaForm .meihua-panel .span-2 {
    font-size: 13px;
  }
  body.mobile-step-input #meihuaForm .meihua-panel input[type="number"] {
    font-size: 15px; padding: 9px 11px; min-height: 44px;
  }

  /* ---------- 梅花易数·手工指定：初/二/三 一行，四/五/上 一行，动爻放最下面 ---------- */
  /* DOM/value 顺序保持 上→初（后端 reversed 解析），仅用 CSS order 重排视觉 */
  body.mobile-step-input #meihuaForm [data-meihua-panel="manual"] {
    grid-column: 1 / -1 !important;
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 10px;
  }
  body.mobile-step-input #meihuaForm .meihua-manual-rows {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    grid-column: 1 / -1 !important;
  }
  body.mobile-step-input #meihuaForm .meihua-manual-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 6px 8px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 14px;
  }
  body.mobile-step-input #meihuaForm .meihua-manual-row > span {
    flex: 0 0 auto;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
  }
  body.mobile-step-input #meihuaForm .meihua-manual-row select {
    font-size: 15px;
    padding: 8px 10px;
    min-height: 42px;
    width: 100%;
  }
  /* 视觉重排：初爻/二爻/三爻 第一行，四爻/五爻/上爻 第二行 */
  body.mobile-step-input #meihuaForm .meihua-manual-row[data-yao="初爻"] { order: 1; }
  body.mobile-step-input #meihuaForm .meihua-manual-row[data-yao="二爻"] { order: 2; }
  body.mobile-step-input #meihuaForm .meihua-manual-row[data-yao="三爻"] { order: 3; }
  body.mobile-step-input #meihuaForm .meihua-manual-row[data-yao="四爻"] { order: 4; }
  body.mobile-step-input #meihuaForm .meihua-manual-row[data-yao="五爻"] { order: 5; }
  body.mobile-step-input #meihuaForm .meihua-manual-row[data-yao="上爻"] { order: 6; }
  /* 动爻放最下面（独占一行） */
  body.mobile-step-input #meihuaForm [data-meihua-panel="manual"] label:has(select[name="moving_yao"]) {
    grid-column: 1 / -1 !important;
    order: 7;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    padding: 4px 0;
  }
  body.mobile-step-input #meihuaForm [data-meihua-panel="manual"] label:has(select[name="moving_yao"]) select {
    flex: 1;
    font-size: 15px;
    padding: 8px 10px;
    min-height: 44px;
  }

  /* ---------- 纳甲筮法：摇卦/定卦 radio 2 列 + 动爻 1 列饱满 ---------- */
  body.mobile-step-input #liuyaoForm .time-row:has(> label.atom-option) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  body.mobile-step-input #liuyaoForm .time-row:has(> label.atom-option) .atom-option {
    flex-direction: row;
    justify-content: center;
    font-size: 15px;
    padding: 6px 2px;
    min-height: 40px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  /* 定卦法面板：上卦/下卦 左列 + 动爻勾选 右列（并排），说明移底部 */
  body.mobile-step-input #liuyaoForm [data-liuyao-panel="manual"] {
    grid-column: 1 / -1 !important;
  }
  body.mobile-step-input #liuyaoForm .liuyao-manual-grid {
    grid-column: 1 / -1 !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    align-items: start;
  }
  body.mobile-step-input #liuyaoForm .liuyao-manual-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  body.mobile-step-input #liuyaoForm .liuyao-manual-left .span-2 {
    grid-column: auto;
  }
  body.mobile-step-input #liuyaoForm .liuyao-manual-right {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  body.mobile-step-input #liuyaoForm .liuyao-moving-checks {
    grid-template-columns: 1fr 1fr;
    display: grid;
    gap: 8px 10px;
  }
  body.mobile-step-input #liuyaoForm .liuyao-moving-title {
    font-size: 13px;
    text-align: center;
    color: var(--muted);
    margin-top: 8px;
    width: 100%;
  }
  body.mobile-step-input #liuyaoForm .liuyao-moving-check {
    font-size: 15px; padding: 8px 6px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    white-space: nowrap;
  }
  /* 纳甲铜钱区：爻名 | 卦符 | 摇按钮；摇按钮占整行约 1/3 宽、文字居中 */
  body.mobile-step-input #liuyaoForm .yao-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1px 8px;
  }
  body.mobile-step-input #liuyaoForm .yao-card {
    padding: 3px 8px;
  }
  body.mobile-step-input #liuyaoForm .yao-rows {
    gap: 3px;
  }
  body.mobile-step-input #liuyaoForm .yao-head {
    margin-bottom: 1px;
  }
  body.mobile-step-input #liuyaoForm .yao-head strong { font-size: 12px; }
  body.mobile-step-input #liuyaoForm .yao-row > span {
    flex: 0 0 40px;
    font-size: 14px;
    font-weight: 600;
  }
  body.mobile-step-input #liuyaoForm .yao-row .yao-symbol {
    flex: 1 1 auto;
    min-height: 30px;
    font-size: 17px;
  }
  body.mobile-step-input #liuyaoForm .yao-row [data-roll] {
    flex: 0 0 33.333%;
    min-height: 30px;
    font-size: 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  /* 摇卦法/定卦法大按钮：文字真正居中（radio+文字整体居中） */
  body.mobile-step-input #liuyaoForm .time-row:has(> label.atom-option) .atom-option {
    width: 100%;
    text-align: center;
  }
  body.mobile-step-input #liuyaoForm .time-row:has(> label.atom-option) .atom-option input {
    margin-left: auto;
  }
  /* 纳甲时间行（年月日时分）select 压矮，避免下压铜钱区 */
  body.mobile-step-input #liuyaoForm .time-row:not(:has(> label.atom-option)) select {
    min-height: 38px;
    padding: 6px 6px;
  }

  /* ============================================================
     元命归藏（#tab-tools）输入页：增强字体 + 控件加高（用户特别指出字太小）
     ============================================================ */
  body.mobile-step-input #tab-tools .fengshui-title-row { font-size: 15px; }
  body.mobile-step-input #tab-tools .fengshui-inputs label {
    font-size: 14px;
    gap: 4px;
  }
  body.mobile-step-input #tab-tools .excel-input {
    font-size: 16px;
    padding: 10px 12px;
    min-height: 46px;
    border-radius: 6px;
  }
  body.mobile-step-input #tab-tools .fengshui-tab-buttons {
    gap: 10px;
    margin: 8px 4px 4px;
    padding: 0 6px;
  }
  body.mobile-step-input #tab-tools .fengshui-tab-buttons label {
    font-size: 17px;
    font-weight: 700;
    min-height: 52px;
    padding: 10px 14px;
    border-radius: 10px;
    border-width: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 2px;
  }
  /* 三个风水排盘切换按钮：激活态更醒目（深金底 + 白字） */
  body.mobile-step-input #fengshuiYuanming:checked ~ .fengshui-tab-buttons label[for="fengshuiYuanming"],
  body.mobile-step-input #fengshuiXuankong:checked ~ .fengshui-tab-buttons label[for="fengshuiXuankong"],
  body.mobile-step-input #fengshuiBazhai:checked ~ .fengshui-tab-buttons label[for="fengshuiBazhai"] {
    background: #b08a3e;
    border-color: #b08a3e;
    color: #fff;
    box-shadow: 0 2px 8px rgba(176, 138, 62, 0.45);
  }
  /* 八字天干地支表格：格内 select 加大 */
  body.mobile-step-input #tab-tools .fengshui-bazi-grid .excel-input {
    font-size: 15px;
    padding: 8px 4px;
    min-height: 40px;
    text-align: center;
  }
  body.mobile-step-input #tab-tools .bazi-grid-title,
  body.mobile-step-input #tab-tools .bazi-grid-head { font-size: 13px; }
  body.mobile-step-input #tab-tools .bazhai-summary { font-size: 15px; padding: 10px 12px; }
  body.mobile-step-input #tab-tools .primary[data-fengshui-run] {
    font-size: 16px;
    min-height: 46px;
  }

  /* 结果页：只显示输出区 */
  body.mobile-step-result #mobileHome { display: none; }
  body.mobile-step-result .left-pane { display: none; }
  body.mobile-step-result .right-pane { display: flex; padding: 0; }

  .mobile-home {
    height: calc(100vh - 44px);   /* 减去顶部 header，占满剩余屏高（固定高度才能撑开 flex/grid 均分） */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 16px;
  }
  .houtian-card .houtian-mode-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .houtian-card .time-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .houtian-card .ht-input-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .houtian-card .ht-input-row .ht-field-row,
  .houtian-card .ht-input-row .ht-time-field-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }
  .houtian-card .ht-input-row .ht-field-row label {
    font-size: 10px;
  }
  .houtian-card .ht-input-row .ht-field-row select {
    min-width: 0;
    font-size: 10px;
    padding: 3px 1px;
  }
  .houtian-card .ht-input-row .ht-meta-row {
    align-items: end;
    flex-direction: row;
    gap: 5px;
  }
  .ht-row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .ht-row-line {
    white-space: normal;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
  }
  .ht-row-label {
    font-size: 18px;
  }
  .ht-cells {
    justify-content: center;
    gap: 8px;
  }
  .ht-cell-gz {
    font-size: 22px;
  }

  .mobile-home-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, 1fr);   /* 10 个按钮 5 行均分剩余高度 */
    gap: 14px;
    margin: 0;
    align-content: stretch;
  }
  .mobile-home-item {
    min-height: 0;
    font-size: 19px;
    font-weight: 600;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-home-item:active { transform: scale(0.97); background: var(--panel-2); }
  .mobile-home-tip { text-align: center; color: var(--muted); font-size: 12px; margin-top: 18px; flex-shrink: 0; }

  /* ===== 八卦首页：中心"元命归藏" + 外围 8 卦位 ===== */
  .bagua-stage {
    position: relative;
    width: min(94vw, calc(100vh - 150px));
    height: min(94vw, calc(100vh - 150px));
    margin: 4px auto 0;
    align-self: center;
    flex-shrink: 0;
  }
  .bagua-ring {
    position: absolute;
    left: 50%; top: 50%;
    width: 76%; height: 76%;
    transform: translate(-50%, -50%);
    border: 1px dashed var(--line);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
  }

  /* 中心按钮（子平命法上半 + 纳甲筮法下半，两半圆）：绝对居中 + 圆形 */
  .bagua-center {
    position: absolute;
    left: 50%; top: 50%;
    width: 40%; height: 40%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--text);
    background:
      radial-gradient(circle at 50% 50%, #fdfdfb 0%, #f5f1e6 70%, #ece4cf 100%);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18), inset 0 0 0 4px rgba(255,255,255,0.55);
    z-index: 2;
    padding: 4px;
    overflow: hidden;
  }
  .bagua-half {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    height: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: var(--text);
    padding: 0;
  }
  .bagua-half-top {
    border-bottom: 1px dashed rgba(0,0,0,0.12);
    align-items: flex-end;
    padding-bottom: 6px;
  }
  .bagua-half-bottom {
    align-items: flex-start;
    padding-top: 6px;
  }
  .bagua-half:active { background: rgba(0,0,0,0.05); }
  .bagua-center-text {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.18;
    text-align: center;
    letter-spacing: 4px;
  }
  .bagua-half-top .bagua-center-text { letter-spacing: 2px; font-size: 20px; }
  .bagua-half-bottom .bagua-center-text { letter-spacing: 2px; font-size: 20px; }

  /* 8 个外圈按钮：固定宽高 + 中心定位到圆周点 */
  /* 圆周半径 = stage 边长的 35%，按钮自身直径 22% */
  .bagua-item {
    position: absolute;
    width: 23%; height: 23%;
    aspect-ratio: 1 / 1;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    padding: 2px;
    overflow: hidden;
    z-index: 1;
    /* 让元素中心对齐 left/top 坐标 */
    transform: translate(-50%, -50%);
  }
  /* left/top 是相对 stage 的%，圆周 35% 半径 + 12 点钟方向起算 */
  /* pos1: 12 点  → (50%, 15%) */
  .bagua-pos-1 { left: 50%;  top: 15%;  }
  /* pos2: 1:30   → (50% + 35%·sin45, 50% - 35%·cos45) ≈ (74.75%, 25.25%) */
  .bagua-pos-2 { left: 74.75%; top: 25.25%; }
  /* pos3: 3 点   → (85%, 50%) */
  .bagua-pos-3 { left: 85%;  top: 50%;  }
  /* pos4: 4:30   → (74.75%, 74.75%) */
  .bagua-pos-4 { left: 74.75%; top: 74.75%; }
  /* pos5: 6 点   → (50%, 85%) */
  .bagua-pos-5 { left: 50%;  top: 85%;  }
  /* pos6: 7:30   → (25.25%, 74.75%) */
  .bagua-pos-6 { left: 25.25%; top: 74.75%; }
  /* pos7: 9 点   → (15%, 50%) */
  .bagua-pos-7 { left: 15%;  top: 50%;  }
  /* pos8: 10:30  → (25.25%, 25.25%) */
  .bagua-pos-8 { left: 25.25%; top: 25.25%; }

  /* 横屏（高度受限）兜底：圆形 stage 自动缩小 */
  @media (max-height: 560px) {
    .bagua-stage { width: min(70vh, 80vw); margin-top: 4px; }
    .bagua-center-text { font-size: 17px; }
    .bagua-half-top .bagua-center-text, .bagua-half-bottom .bagua-center-text { font-size: 16px; }
    .bagua-item { font-size: 15px; }
  }
  /* 手机横屏（触摸设备 + 宽度>高度）：stage 用高度主导，避免被压成小圆 */
  @media (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .bagua-stage {
      width: min(72vh, 92vw);
      height: min(72vh, 92vw);
    }
    .bagua-center-text { font-size: 18px; }
    .bagua-half-top .bagua-center-text, .bagua-half-bottom .bagua-center-text { font-size: 17px; }
    .bagua-item { font-size: 15px; }
  }
  /* 极窄屏（< 360px）兜底：缩字号 */
  @media (max-width: 360px) {
    .bagua-item { font-size: 15px; }
    .bagua-center-text { font-size: 18px; }
    .bagua-half-top .bagua-center-text, .bagua-half-bottom .bagua-center-text { font-size: 16px; }
  }

  .mobile-nav-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .mobile-back-btn {
    border: none;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(138, 106, 42, 0.4);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-back-btn:active { background: var(--accent-strong); }
  .mobile-nav-title { font-weight: 600; font-size: 15px; flex: 1; }
}

/* ============ 手机端字体与输出显示优化 ============ */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  /* 手机系统默认字体栈（Android: Roboto + Noto Sans CJK SC；iOS: SF + PingFang SC） */
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 14px;
  }

  /* 输出区：手机全宽，去多余留白，横向滚动流畅 */
  .right-workspace { padding: 0; }
  .result-toolbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
  }
  .result-zoom-wrap { order: 10; width: 100%; display: flex; gap: 6px; }
  .result-zoom-wrap .result-zoom-label { margin: 0 2px; }
  .result-viewport {
    padding: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 结果页签：横滑不换行，避免手机窄屏挤压 */
  .sheet-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .sheet-tab { flex-shrink: 0; font-size: 13px; padding: 8px 11px; }

  /* 结果表格：紧凑 cell + 统一细线（高 DPI 下 1px 已清晰），横向可滚 */
  .result table,
  .result .table,
  #fengshuiResult table,
  #fengshuiResult .table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 12px;
  }
  .result table td,
  .result table th,
  #fengshuiResult table td,
  #fengshuiResult table th,
  .result .table td,
  .result .table th {
    padding: 5px 7px;
    border: 1px solid var(--line);
    line-height: 1.4;
  }
  /* 结构型密排表格（九宫/星盘/干支盘）保持不换行、整表横滚 */
  .result table.qimen-grid td,
  .result table.qimen-grid th,
  .result table.ziwei-grid td,
  .result table.ziwei-grid th,
  .qimen-palace,
  .qimen-palace-mini {
    white-space: nowrap;
  }
  .result { font-size: 13px; }
  #fengshuiResult { font-size: 13px; }

  /* 奇门九宫 / 紫微盘等宽表格：保持结构但线色统一 */
  .qimen-palace,
  .qimen-palace-mini {
    border-color: var(--line);
    font-size: 12px;
    padding: 3px 5px;
  }

  /* 长纯文本结果（文本盘）手机可读性 */
  .result:not(.html-mode) .result-scale {
    font-size: 13px;
    line-height: 1.55;
  }
}

/* ============ 手机端：结果工具栏合并到底部一行 ============ */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  /* 元命归藏卡片：隐藏三个"生成"按钮，统一用底部"排盘"按钮触发 */
  .fengshui-sheet .primary[data-fengshui-run] { display: none !important; }

  body.mobile-step-result .result-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: var(--panel);
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
  }
  /* 返回栏：取消 sticky，作为 flex 项；标题隐藏，返回图标按钮排到最右 */
  body.mobile-step-result .mobile-nav-bar {
    position: static;
    border-bottom: none;
    padding: 0;
    background: transparent;
    flex: 0 0 auto;
    gap: 6px;
    order: 99;
    margin-left: auto;
  }
  body.mobile-step-result .mobile-nav-title {
    display: none !important;
  }
  body.mobile-step-result .mobile-back-icon {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 2px 8px rgba(138, 106, 42, 0.5);
  }
  /* 结果操作：复制 / 导出（缩放已独立拆出到底部一行） */
  body.mobile-step-result .result-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  body.mobile-step-result .result-actions .ghost {
    font-size: 12px;
    padding: 6px 8px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  /* 缩放独立一行：固定在底部工具栏最下排（- 100% + 适宽 原始），一套控件双目标 */
  body.mobile-step-result .result-toolbar > .result-zoom-wrap {
    display: flex;
    align-items: center;
    gap: 3px;
    order: 0;
    width: auto;
    margin: 0;
    flex-basis: auto;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }
  body.mobile-step-result .result-zoom-btn,
  body.mobile-step-result .result-font-btn {
    font-size: 12px;
    padding: 6px 7px;
    min-width: 0;
    min-height: 0;
  }
  body.mobile-step-result .result-zoom-label {
    font-size: 12px;
    margin: 0 1px;
  }
  /* 结果内容底部留白，避免被固定工具栏遮挡 */
  body.mobile-step-result .result-viewport {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }

  /* ---------- 八字（子平/先天后天八字）结果表格：列宽跟随内容（v8.8.1） ----------
     桌面端 styles.css 为了让 bazi-raw-* 这几个表跟纯文本「等宽对齐」一致，做了三件事：
       ① .bazi-raw-sheet { min-width: 720px }  ← 整块固定 720px 宽
       ② .bazi-raw-table / -wide-table { table-layout: fixed }
          且 th/td 写死 width（72px / 92px / 86px）
       ③ th/td { white-space: nowrap }
     在 387px 宽的手机上，① 让整块内容固定 720px 往右溢出（实测表格 699/741px，
     右边三分之一直接被切掉）；② 又把列宽写死，最短的列（"比肩"仅 24px 内容）
     也占 146px，白占空间。

     窄屏处理：解除最小宽度 + 改回按内容排布（table-layout:auto / width:auto）+
     去掉写死的列宽，让列宽真正由内容决定。实测三张表 303/316/316px，
     全部落在可用宽度（325px）内，横向溢出从 426px 降到 0。
     ⚠️ 别用 `!important` 之外的简写 `width:100%` —— 那会重新把列拉平均，
        就失去"跟随内容"的意义了。 */
  body.mobile-step-result .bazi-raw-sheet {
    min-width: 0;
    width: 100%;
  }
  body.mobile-step-result .bazi-raw-table,
  body.mobile-step-result .bazi-raw-wide-table {
    width: auto;
    max-width: 100%;
    table-layout: auto;
  }
  body.mobile-step-result .bazi-raw-table th,
  body.mobile-step-result .bazi-raw-table td,
  body.mobile-step-result .bazi-raw-wide-table th,
  body.mobile-step-result .bazi-raw-wide-table td {
    width: auto;
    min-width: 0;
    /* 5px 时 9 列的「排大运」表要 352px（超 27px），压到 3px → 316px 正好放下 */
    padding: 0 3px;
  }
  /* 这些 <pre> 是等宽文本行（命主信息 / 节气 / 起运），桌面靠"不换行"保持对齐；
     窄屏放不下会整行被切掉，改成允许换行，文字才完整可见。 */
  body.mobile-step-result .bazi-raw-info,
  body.mobile-step-result .bazi-raw-tail {
    white-space: pre-wrap;
    word-break: break-word;
  }
  /* 空亡那行的 352px 左缩进是给桌面等宽版式对齐用的，窄屏改为不缩进 */
  body.mobile-step-result .bazi-raw-note {
    margin-left: 0;
  }
  /* 风水排盘结果界面：复制/导出同样生效（v7.10 起统一支持），仅保留缩放 */
  body.mobile-fs-result .result-actions {
    display: flex;
  }
  /* ⚠️ 历史雷区（v8.0.1 遗物，勿再加回来）：
     这里原来有一条「菜单向上弹」的规则
         body.mobile-step-result .result-io-menu { top: auto; bottom: calc(100% + 6px); }
     那是导出按钮还挂在**结果区底部工具栏**（.result-actions）时写的，为的是让菜单
     向上展开、不被屏幕底边裁掉。

     v8.0.1 把导出按钮移到了**顶栏**右上角之后，这条规则就成了 bug：
     菜单是绝对定位在 .result-io 里的，bottom:calc(100% + 6px) 会把它抛到
     .result-io（高约 44px）**上方** → 菜单 top ≈ −254px，整个跑到屏幕外。
     用户看到的现象就是「排盘输出界面点三横杠只闪一下，没有任何弹出」。
     （首页能正常弹出，因为那里 body 没有 mobile-step-result 类，规则不命中 ——
       所以只在结果页复现，很容易漏测。）

     结论：菜单只从顶栏**向下**展开，不要再给 .result-io-menu 加向上弹的规则。 */
  body.mobile-step-result .result-io-menu[hidden] { display: none; }
  body.mobile-step-result .result-io-menu {
    min-width: 210px;
  }
  body.mobile-step-result .result-io-menu button {
    font-size: 13px;
    padding: 9px 11px;
  }

  /* 结果切换条（多结果时显示，如紫微"紫斗命数/流分命宫"）：顶部横滑 pills */
  body.mobile-step-result #sheetTabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: 8px 10px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  body.mobile-step-result #sheetTabs .sheet-tab {
    flex: 0 0 auto;
    font-size: 13px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-2);
    color: var(--text);
  }
  body.mobile-step-result #sheetTabs .sheet-tab.active {
    background: #b08a3e;
    color: #fff;
    border-color: transparent;
  }
  body.mobile-step-result #sheetTabs .sheet-close {
    display: none;
  }
  body.mobile-step-result #sheetTabs::-webkit-scrollbar { display: none; }
  /* 结果页：不展示排盘标签栏（用户要求）——普通结果 #sheetTabs 与风水结果 #fengshuiSheetTabs 均隐藏 */
  body.mobile-step-result #sheetTabs,
  body.mobile-step-result #fengshuiSheetTabs {
    display: none !important;
  }
}

/* 河洛文本盘保持空格对齐，只有外层 viewport 滚动，避免嵌套滚动和断行。 */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  #comboResult.heluo-result .result-scale {
    width: max-content;
    max-width: none;
    white-space: pre;
    overflow: visible;
  }
  #comboResult.heluo-result .result-viewport {
    max-width: 100%;
    overflow-x: auto;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 手机端：奇门命法（先天/后天）盘适配窄屏 ---------- */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .plain-sheet.qimen-mingfa-sheet {
    min-width: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  /* 对齐表格：窄屏缩字号保宽度 */
  table.qimen-aligned-grid {
    max-width: 100%;
    width: 100%;
  }
  table.qimen-aligned-grid td.qg-palace {
    font-size: 13px;
    padding: 3px 1px;
    line-height: 1.35;
  }
  table.qimen-aligned-grid .qg-line {
    white-space: normal;
    word-break: break-word;
    min-height: 0;
  }
  .qimen-aligned-wrap,
  .qimen-mingfa-wrap {
    max-width: 100%;
    padding: 6px 2px;
  }
  .qmf-steps {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .qimen-empty-box,
  .qimen-empty-box {
    max-width: 100%;
  }
  /* 窄屏保留奇门辅助算法区（奇门梅花 / 颠倒颠变局）：允许纵向滚动查看，避免撑破主盘布局 */
  /* 奇门盘：窄屏改纵向堆叠（九宫在上、辅助在下），避免横向挤占 */
  .plain-sheet.qimen-sheet {
    display: block;
    width: 100%;
  }
  .qimen-sheet .qimen-assist {
    display: block;
    max-width: 100%;
    width: 100%;
    margin: 14px 0 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .qimen-sheet .qimen-assist table {
    width: max-content;
    min-width: 100%;
  }
  .qimen-sheet .qimen-assist-panel summary {
    font-size: 15px;
    padding: 8px 0 6px;
  }
  .qimen-sheet .qimen-assist p {
    font-size: 13px;
    line-height: 1.55;
    white-space: normal;
    text-align: left;
  }
  .qimen-sheet .qimen-assist .qimen-plum-control {
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
  }
}

/* ---------- 导出完成提示：移动端做成底部卡片 ----------
   为什么不做成小 toast：用户实测反馈"点完导出什么提示都没有，谁知道文件存哪了"。
   所以改成必须手动关闭的卡片，路径能看清，三种关法：X / 点遮罩 / 向下滑动。 */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .save-info-mask {
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.42);
  }
  .save-info-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    border: none;
    border-radius: 16px 16px 0 0;
    padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
    animation: save-info-up 0.22s ease-out;
    touch-action: none;              /* 下滑手势由 JS 处理，禁掉浏览器默认滚动 */
    will-change: transform;
  }
  @keyframes save-info-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .save-info-grip {
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: var(--line);
    margin: 0 auto 14px;
  }
  .save-info-x {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    font-size: 24px;
  }
  .save-info-title { font-size: 16px; }
  .save-info-path { font-size: 14px; padding: 10px 12px; }
  .save-info-note { font-size: 13px; }

  /* 顶栏：品牌居中 + 右侧单个 ☰ 下拉（导出 PNG / Word、导出目录、历史记录） */
  .top-actions { gap: 6px; }
  .top-actions .result-export-btn {
    min-width: 44px; min-height: 40px;
    justify-content: center;
    padding: 0 10px;
  }
  .result-io-label, .top-actions .result-io-caret { display: none; }
  .result-io-burger { display: inline-block; font-size: 17px; }
  .result-io-mobile-only { display: block; }
  .top-actions .result-io-menu { min-width: 210px; }
}