/* ========================================
   响应式：≤768px 移动端 / ≤480px 小屏 / 横屏低高度
   topbar 高度与内容间距通过变量随断点联动，不出现散落的魔法数值
   ======================================== */

/* ===== 移动端适配 (≤768px)：微信导航栏 + 底部 TabBar 壳 ===== */
@media (max-width: 768px) {
  :root {
    /* 2026-09-11 顶栏全端隐藏：原 --topbar-height: var(--wx-nav-height) 覆盖已移除，
       沿用 tokens.css 的 0px（否则移动端会残留 44px 空白） */
    --content-pad: 14px;
  }

  html { font-size: 14px; }

  /* 汉堡菜单按钮退役（2026-09-10 P4）：「我」页 cell 组已接管全部 12 个入口
     （排行/积分/论坛走 TabBar+页级分段，个人配置/接口文档/我的积分/管理×2
     收进「我」页 cell），微信无抽屉形态故移动端隐藏按钮。
     抽屉 DOM（#sidebar/#sidebar-overlay/menu-toggle 绑定）保留——桌面侧边栏
     仍用同一 DOM，勿删。侧边栏底部的连接状态灯移动端随按钮一并不可见，
     Sman 连接异常以执行报错提示兜底 */
  .menu-toggle { display: none; }

  /* 侧边栏遮罩（微信黑遮罩） */
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-sidebar) - 1);
    background: var(--color-mask);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: fadeIn 0.25s ease;
  }

  .sidebar-overlay.active { display: block; }

  /* 移动端侧边栏浮层抽屉模式（含安全区避让；过渡期仍用汉堡菜单可达全部入口）。
     抽屉需压住底部 TabBar（两者 z-index 变量同为 100，靠抬高一层 + DOM 顺序双保险） */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    min-width: 260px;
    background: var(--color-surface);
    transform: translateX(-100%);
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.18);
    transition: transform var(--transition-smooth);
    z-index: calc(var(--z-tabbar) + 1);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sidebar.open { transform: translateX(0); }

  /* 顶部导航栏：微信式白底 + 底部 hairline（含刘海屏安全区） */
  .topbar {
    background: var(--color-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    justify-content: space-between;
    padding: 0 calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));
    gap: 8px;
    z-index: calc(var(--z-sidebar) + 1);
  }

  /* 标题绝对居中：左右留白给 menu-toggle 与 auth-status */
  .page-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 50%;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-actions { gap: 2px; flex-shrink: 0; }

  /* 页级分段条（契约2）：显示并吸附在滚动容器顶部
     （topbar 是 .content-panels 的 flex 兄弟节点、在滚动容器外，
     sticky 相对 .content-panels 吸附，top:0 即视觉上紧贴导航栏下沿）
     2026-09-11 共享排序页该行合并为「4 分段 + 排序 + 搜索」单行工具条：
     sticky 吸附仍由本规则提供，results.css 只负责 display:flex（桌面端） */
  .wx-seg--page {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
  }

  /* 共享排序页单行工具条紧凑参数：保证 375px 下 4 个分段 + 排序 + 搜索一行
     放得下不溢出（2026-09-11 刷新按钮移除后按钮位由搜索放大镜承接，宽度相当；
     改动后须按 coding-standards #30 在 375px 实测默认态与搜索展开态）。
     字号一律绝对 px——本断点 html font-size 为 14/13px，用 rem 会缩到 10px 级
     （2026-09-11 浏览器实测：0.75rem 在 375px 下仅 9.75px）。
     排序下拉 16px 防 iOS 聚焦缩放（项目既有口径，见 results.css 排序下拉注释） */
  #rank-seg-global,
  #rank-seg-personal {
    /* gap 3px（2026-09-11 搜索上线 375px 实测收敛：行自然宽 374 > 真机可用宽
       （375 - .content-panels 左右 --content-pad 10~12px）≈351~355，溢出 ~20px；
       gap 4→3 + 分段项 padding 6→4 + 排序 max-width 96→88 三项共省 ~30px。
       改前后均须 scrollWidth<=clientWidth 实测断言（coding-standards #30） */
    gap: 3px;
    padding: 0 8px;
  }

  #rank-seg-global .wx-seg-item,
  #rank-seg-personal .wx-seg-item {
    height: 40px;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 400;
  }

  #rank-seg-global .tree-sort-select,
  #rank-seg-personal .tree-sort-select {
    /* 2026-09-11 二次口径（与 results.css 的同名 id 规则保持一致，勿单边改）：
       12px + 灰色常规字重 + 外框贴紧（padding 0 2px / max-width 68px）。
       不再用 16px 防缩放口径（iOS 聚焦可能自动放大，已知代价）。 */
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-secondary);
    min-height: 40px;
    max-width: 68px;
    padding: 0 2px;
  }

  /* 树搜索输入框（2026-09-11）：≤768 升 16px 防 iOS 聚焦自动放大——与排序下拉
     12px「视觉一致」口径的区别：输入框是打字焦点件，走项目「防缩放口径」先例
     （coding-standards #29 两条口径的取舍已分别注释在两处） */
  #rank-seg-global.is-searching .tree-search-input,
  #rank-seg-personal.is-searching .tree-search-input {
    font-size: 16px;
    min-height: 40px;
  }

  /* 清空/关闭按钮移动端触摸区保持 ≥40px（放大镜由 .btn-icon-sm 的 34px 紧凑规则
     提供，见 responsive.css:288 附近） */
  #rank-seg-global .tree-search-clear,
  #rank-seg-personal .tree-search-clear,
  #rank-seg-global .tree-search-close,
  #rank-seg-personal .tree-search-close {
    min-height: 40px;
  }

  /* 论坛工具条（2026-09-11 对齐排行页 #rank-seg-* 口径）：375px 下分段项 + 放大镜
     一行放得下不溢出；字号一律绝对 px（本断点 html font-size 14/13px，rem 会被缩小，
     见 coding-standards #29）。sticky 吸附复用 .wx-seg--page 的通用规则，此处不重复定义。
     2026-09-12 两级 tab 合并为一行 5 项（对象/全部/我关注的/官方标的/我的评论），
     按 coding-standards #30 复算自然宽（375px 可用宽取 ~351px 保守值，
     #forum-toolbar 左右 padding 8px → 内容宽 335px）：
       5 项文字 16 个中文字 × 13px = 208；padding 0 4px × 5 = 40；两项间 gap 3px × 4 = 12
       → .forum-view-tabs 260px；+ 工具条 gap 3px + 放大镜 .btn-icon-sm 34px = 297px
     余量 335 − 297 = 38px ≥ 20px，默认态不溢出，故本断点不改 padding/gap
     （#rank-seg-* 那两行是 4 项 + 排序下拉的排行口径，与论坛无关，勿套用）。
     若日后新增第 6 项或放大镜加宽，先按同法复算再收紧 padding/gap。 */
  #forum-toolbar { gap: 3px; padding: 0 8px; }
  #forum-toolbar .forum-view-tabs { gap: 3px; }
  #forum-toolbar .wx-seg-item { height: 40px; padding: 0 4px; font-size: 13px; font-weight: 400; }
  /* 搜索输入框在 ≤768 升 16px 是项目「防 iOS 聚焦自动放大」的既有口径（与排行页
     #rank-seg-global.is-searching .tree-search-input 一致），不是和 13px「视觉一致」
     口径冲突——输入框是打字焦点件，走防缩放先例，两处注释互见。 */
  #forum-toolbar.is-searching .tree-search-input { font-size: 16px; min-height: 40px; }
  #forum-toolbar .tree-search-clear,
  #forum-toolbar .tree-search-close { min-height: 40px; }

  /* 论坛聊天输入框（2026-09-12 微信桌面版形态）：桌面 15px，≤768 升 16px 防 iOS
     聚焦自动放大——与 #forum-toolbar 搜索框同口径（输入框是打字焦点件，走防缩放
     先例，见 coding-standards #29）。id 特异性 (1,0,0) 压过 .forum-chat-input-field。
     line-height 写整数 22px（勿写 1.4 → 22.4px 分数行高）：自增高公式按
     scrollHeight（整数）+边框写像素高，分数行高会让写死高度与实际行盒错位，
     误差落成底部留白（文字贴顶，2026-09-12 用户截图报障）；整数后公式像素级贴合，
     空态另有 forum_chat.js _autoGrowInput 的「交还自然布局」双保险。 */
  #forum-chat-input { font-size: 16px; line-height: 22px; }

  /* 会话态撑满到 **视口底 − 安全区**（2026-09-12 二次口径：会话态连 TabBar 也
     隐藏——forum_ui.showState('chat') 置 #tabbar inline display:none，聊天页彻底
     沉浸，返回箭头承担退出）。TabBar 不占位后：本断点 .content-panels 底部内边距
     = tabbar + safe + 16px 全部位于会话区之下 → margin-bottom 负值抵消其中的
     tabbar + 16px（safe 由 height 扣掉，底边落在 safe 上沿，不被 home indicator
     挡）；输入条自带 8px 下内边距即唯一呼吸。与 showState 的 #tabbar 隐藏联动，
     两处必须同步改 */
  .forum-state-chat {
    height: calc(100dvh - env(safe-area-inset-bottom));
    margin-bottom: calc(-1 * (var(--wx-tabbar-height) + 16px));
  }

  /* 移动端认证状态：紧凑但可读（旧版 0.6rem 级字号 + 30-50px 宽度过分压缩） */
  .auth-status {
    margin-left: 4px;
    font-size: 0.78rem;
    gap: 4px;
    max-width: 140px;
    overflow: hidden;
  }

  .auth-status > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100px;
  }

  .auth-status a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  .auth-status span:not(:first-child) { display: none; }

  .btn-primary {
    padding: 7px 12px;
    font-size: 0.78rem;
    gap: 4px;
  }

  .btn-primary svg { width: 15px; height: 15px; }

  .btn-secondary { padding: 7px 10px; font-size: 0.78rem; }
  .btn-secondary svg { width: 15px; height: 15px; }

  .btn-icon { width: 36px; height: 36px; }
  .btn-icon svg { width: 18px; height: 18px; }

  .btn-warning span { display: none; }
  .btn-warning { padding: 7px 8px; }

  .btn-schedule span { display: none; }
  .btn-schedule { padding: 7px 8px; }

  /* 内容面板（含安全区：底部 TabBar + 底部横条 / 左右刘海） */
  .content-panels {
    padding: 0 calc(12px + env(safe-area-inset-right))
      calc(var(--wx-tabbar-height) + env(safe-area-inset-bottom) + 16px)
      calc(12px + env(safe-area-inset-left));
    -webkit-overflow-scrolling: touch;
  }

  /* 2026-09-11 用户反馈「吸顶条上方透出滚动内容的缝隙」修复：
     成因 = 滚动容器顶部内边距把粘性停靠线下推（停靠偏移 = padding-top + 固定 8px，
     浏览器实测 18px @ --content-pad:10px）。处理：顶部内边距归零（上面已改）
     + 粘性 top 抵消那 8px 固定残留（实测 top:-8px 时停靠偏移为 0，见下方
     .wx-seg--page 覆盖）；无分段条的面板用 margin 补回原顶部间距，视觉不变 */
  .panel > .panel-inner:first-child { margin-top: var(--content-pad); }

  /* 覆盖上面的 .wx-seg--page{top:0}：抵消固定 8px 残留，使条紧贴容器顶部 */
  .wx-seg--page { top: -8px; }

  .panel-inner {
    padding: 20px 16px;
    border-radius: var(--radius-md);
    max-width: 100%;
  }

  #panel-config .panel-inner,
  #panel-api-documentation .panel-inner { max-width: 100%; }

  .panel-header { margin-bottom: 20px; }
  .panel-header h2 { font-size: 1.15rem; }
  .panel-desc { font-size: 0.8rem; }

  .panel-header-row { flex-wrap: wrap; gap: 10px; }

  .panel-actions { margin-top: 18px; padding-top: 14px; }

  .section-divider { margin: 22px 0; }

  /* 表单：两列变单列 */
  .form-grid { grid-template-columns: 1fr; gap: 14px; }

  .form-field.span-2 { grid-column: span 1; }

  .form-field label { font-size: 0.72rem; margin-bottom: 4px; }

  .form-field input,
  .form-field textarea,
  .form-field select {
    padding: 11px 12px;
    font-size: 0.9rem;
  }

  .field-header { flex-wrap: wrap; gap: 8px; }

  .field-header .btn-secondary { font-size: 0.72rem; padding: 5px 10px; }

  .form-field .input-with-icon input { padding-left: 36px; }
  .form-field .input-with-icon svg { left: 11px; width: 16px; height: 16px; }

  .form-field .input-with-suffix input { padding-right: 40px; }

  .input-suffix-btn { right: 2px; width: 34px; height: 34px; }

  .concurrency-btn { width: 40px; height: 40px; }
  .concurrency-btn svg { width: 18px; height: 18px; }

  .concurrency-control input { width: 44px; font-size: 1rem; padding: 11px 4px !important; }

  /* 进度概览 */
  .progress-overview { padding: 14px; margin-bottom: 14px; }

  .progress-stats { gap: 14px; flex-wrap: wrap; }

  .stat-value { font-size: 1.1rem; }
  .stat-item.current .stat-value { font-size: 1.3rem; }
  .stat-label { font-size: 0.65rem; }

  /* 任务列表 */
  .task-list { gap: 8px; }

  .task-item-header { padding: 10px 12px; gap: 8px; flex-wrap: nowrap; }

  /* 领取卡行2 顶格左对齐（2026-10-23 用户口径：卡片内全部元素左对齐；
     原「按序号宽度缩进对齐名称」口径已退役——RunID 行必须与序号同一起始线） */
  .taskpool-claim-card .task-item-row-meta { padding-left: 0; }

  .task-index { font-size: 0.7rem; min-width: 20px; }

  .task-target-input { width: 80px; font-size: 0.85rem; }

  .task-status-badge { font-size: 0.68rem; padding: 3px 7px; }

  .task-runid-label { font-size: 0.62rem; padding: 1px 5px; }

  .task-item-detail { padding: 0 10px 10px 36px; font-size: 0.72rem; }

  .task-item-btn { width: 32px; height: 32px; }
  .task-item-btn svg { width: 15px; height: 15px; }

  .task-item-continue-btn { padding: 3px 7px; font-size: 0.65rem; }

  .task-item-actions { gap: 2px; }

  /* 领取卡手机紧凑布局（2026-10-23 用户拍板「字段都要在手机屏幕上紧凑显示，
     都要显示出来」+ 同日二次拍板「各按钮、文字、排版，都按照左对齐」；
     2026-10-25 三次拍板「向左紧凑型排序」）：
     ① 行1 原 nowrap + 名称固定 80px + 4 个操作按钮 margin-left:auto，360dp
        屏上总宽溢出——按钮被挤出卡片右缘（实测「续做」只露一角）、名称被
        压成两行。改 row 允许换行 + 单行省略（全名在 title/点击查看）。
     ② 操作按钮组靠左（不再 margin-left:auto 靠右）——用户口径是卡片内全部
        元素从左缘顺序排布，不出现右对齐块。
     ③ 名称 2026-10-25 起不再 flex-grow 吃满行宽：旧值 flex:1 1 60px 把种类/
        代码徽章推到行右缘、留下大片空隙，状态徽章被挤出换行（实测 360dp：
        名称内容仅 86px 却撑到 114px，`运行中 0/3` 落到第二行且独占一行）。
        改 flex:0 1 auto——名称按内容宽参与排布、行内超宽时按需收缩省略，
        `#序号/名称/种类/代码/状态` 回到同一行从左紧凑排布；间距同步 12→6、
        徽章内距收紧。
     ④ 字段行原总宽约 450px，窄屏必然折行；改 path 独占一行（目录串长）。
        大类/小类行已随 2026-10-25 分类定制退役删除。 */
  .taskpool-claim-card .task-item-row {
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 6px;
  }
  /* 操作按钮左对齐（覆盖基类 margin-left:auto）。2026-10-28 状态徽章上移行2
     （与 RunID 同行）后本行只剩按钮组——不再强制 flex-basis:100%，窄屏换行
     按可用宽度自然成组、整体左对齐。 */
  .taskpool-claim-card .task-item-actions {
    flex: 0 1 auto;
    margin-left: 0;
    justify-content: flex-start;
  }
  /* 名称按内容宽排布（不撑满、超宽才收缩省略）——见上方 ③ */
  .taskpool-claim-card .task-target-input {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 行1 徽章收紧，给单行排布让宽（meta 行 RunID/倒计时不受影响） */
  .taskpool-claim-card .task-item-row .task-seccode-chip {
    font-size: 0.65rem;
    padding: 1px 6px;
  }
  .taskpool-claim-card .task-item-row-meta { flex-wrap: wrap; row-gap: 2px; }
  /* 展开区同口径顶格（原 36px 对齐名称的缩进退役；12px = header 水平内边距） */
  .taskpool-claim-card .task-item-detail { padding-left: 12px; }
  /* 失败徽章带 24 字错误摘要时基础类是 nowrap + flex-shrink:0，会单块撑爆
     行宽——封顶并裁切，全文仍在 title（悬浮/长按可见） */
  .taskpool-claim-card .task-status-badge { max-width: 100%; overflow: hidden; }
  .taskpool-claim-card .task-path-label { flex: 1 1 100%; margin-right: 0; }
  .taskpool-claim-card .task-path-label .task-path-select {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    max-width: none;
  }
  /* 任务池领取卡大类/小类行已随 2026-10-25 分类定制退役删除，仅 path 独占一行 */

  /* 日志 */
  .log-viewport {
    max-height: 280px;
    font-size: 0.7rem;
    padding: 12px;
  }

  .log-placeholder { min-height: 140px; }
  .log-time { font-size: 0.65rem; }

  .log-actions { gap: 2px; }

  .btn-icon-sm { width: 34px; height: 34px; }
  .btn-icon-sm svg { width: 17px; height: 17px; }

  /* 结果页：移动端单栏「列表 ↔ 详情」导航。
     默认只显示数据树；JS（_isMobileView 守卫，见 ranking_ui.js）在用户选中
     数据项后给 .results-layout 加 .mobile-detail-open，切到整屏详情 + 返回按钮。 */
  .results-layout { display: block; height: auto; max-height: none; }

  .results-tree-panel {
    width: 100%;
    min-width: 0;
    max-width: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .results-detail-panel { display: none; }

  .results-layout.mobile-detail-open .results-tree-panel { display: none; }

  /* 2026-10-03 用户拍板「不要留边框，适应手机屏幕最大化」：详情态面板满屏——
     ①去 1px 描边与圆角（原圆角在四角露出页面底色白角）；
     ②负左右外边距抵消 .content-panels 的左右 padding（var(--content-pad) 随断点
       12/10px 自适应，勿写死像素），forum-state-chat 同款负 margin 手法；
     ③min-height 从「内容自增高」改为撑满可视区（顶 padding 已是 0，下沿落
       TabBar 上沿），矮内容不再露出页面底色。改底部口径时同步核对本文件
       .content-panels 底部 padding 注释与 .forum-state-chat 联动条 */
  .results-layout.mobile-detail-open .results-detail-panel {
    display: flex;
    border: none;
    border-radius: 0;
    margin: 0 calc(-1 * var(--content-pad));
    min-height: calc(100dvh - var(--wx-tabbar-height) - env(safe-area-inset-bottom));
  }

  /* ==================== 通达信详情顶栏（2026-09-29 T1） ====================
     详情态整屏第一行 = 标题栏（照抄通达信手机版）：页顶工具条隐藏；
     「‹返回 + ◀ 标题(代码小字) ▶ + 🔍」单行紧凑排布。
     状态类来源：JS 统一出入口 _enterMobileDetail/_exitMobileDetail 挂/摘
     .panel-detail-open（工具条是 .results-layout 的兄弟节点，必须挂 panel 上） */
  /* 隐藏规则必须升 id 特异性（2026-09-29 harness 实测抓出）：results.css
     `#rank-seg-global/#rank-seg-personal { display:flex }` 是全端生效的 id 规则
     (1,0,0)，类选择器 (0,2,0) 压不过它——工具条在详情态不会被隐藏 */
  .panel-detail-open > .wx-seg--page,
  .panel-detail-open > #rank-seg-global,
  .panel-detail-open > #rank-seg-personal { display: none; }

  .results-layout.mobile-detail-open .detail-header {
    display: block;
    margin-bottom: 8px;
    padding-bottom: 4px;
  }

  /* 单行居中：display:contents 把 nav 的两个箭头提升为 header-main 的 flex 项，
     靠 order 排成「◀ 标题 ▶」——不改 DOM 结构（JS 按 #xxx-nav-prev/next 寻址）*/
  .results-layout.mobile-detail-open .detail-header-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
  }
  .results-layout.mobile-detail-open .detail-nav { display: contents; }
  /* [hidden] 兜底必配（上方 display:contents 是无条件声明，会静默压过 hidden 属性
     ——corrections 2026-09-11 同族）：非树叶子入口（搜索/字典占位进详情）JS 置
     nav.hidden=true 语义=不可导航，箭头不得恒显 */
  .results-layout.mobile-detail-open .detail-nav[hidden] { display: none; }
  .results-layout.mobile-detail-open .detail-title-row { order: 2; }
  .results-layout.mobile-detail-open .detail-nav-btn:first-child { order: 1; }
  .results-layout.mobile-detail-open .detail-nav-btn:last-child { order: 3; }
  /* TDX 无「3/210」位置文案与类目面包屑（has-forum-back 论坛返回链接例外） */
  .results-layout.mobile-detail-open .detail-nav-pos { display: none; }
  .results-layout.mobile-detail-open .detail-breadcrumb { display: none; }
  .results-layout.mobile-detail-open .detail-breadcrumb.has-forum-back {
    display: flex;
    justify-content: center;
  }

  .results-layout.mobile-detail-open .detail-nav-btn {
    border: none;
    background: none;
    padding: 6px 12px;
    min-height: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--color-text-primary);
  }
  .results-layout.mobile-detail-open .detail-nav-btn:disabled { opacity: 0.3; }

  .results-layout.mobile-detail-open .detail-header h2 {
    margin: 0;
    /* 17px/500→18px/600（2026-10-03 用户拍板页头字体像素级对齐通达信参考图：
       DPR2 截图宽度实测标题 ≈17.5px、字重 ≈600；原微信文章 17px/500 口径退役。
       与 quote-tx.css T11 段 .detail-content 规则同值同步，改一处必查另一处） */
    font-size: 18px;
    font-weight: 600;
    text-align: center;
  }

  /* 标题栏右侧「⋯」更多操作钮（2026-10-16 收合改造）：原搜索/加自选两颗裸露钮
     已收进 .detail-more-menu 菜单容器，头部只留本钮——沿用原搜索钮的绝对定位
     口径（右缘 right:2px / 34px / svg 19px）。菜单行按钮不做断点放大（行内
     44px 触摸目标已达标），加自选金色 active 态由 results.css 按类命中天然生效 */
  .results-layout.mobile-detail-open .detail-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 2px;
    top: 4px;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    color: var(--color-text-primary);
  }
  .results-layout.mobile-detail-open .detail-more-btn svg { width: 19px; height: 19px; }
  .results-layout.mobile-detail-open .detail-header { position: relative; }

  /* 返回键并入标题行（2026-09-29 round2，用户报「头部差距还很大」：原独占一行
     ~50px，通达信是「‹ ◀ 标题 ▶ 🔍」同一行）。DOM 是 .detail-content 首子（在
     .detail-header 之外），故锚 .detail-content 补 position:relative。触摸高保持
     基类 44px（results.css min-height:44，勿写 34 被 min-height 顶回——实测踩过），
     top 12px 让视觉中心落在标题行中线；清基类 margin/padding（-6px 左移在绝对
     定位下是错位）。列表态（列表↔详情导航）不受影响——仅详情态选择器生效。 */
  .results-layout.mobile-detail-open .detail-content { position: relative; }
  .results-layout.mobile-detail-open .mobile-back-btn {
    position: absolute;
    left: 0;
    top: 12px;
    width: 40px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    /* z-index 必须高于后兄弟 .detail-header（同为定位元素、DOM 在后 → 默认绘制
       在按钮上层，整行盒子吞掉左侧触摸事件=箭头「看得见点不着」，2026-10-07
       用户报返回无效根因；header 透明底所以视觉无遮挡假象） */
    z-index: 5;
  }
  .results-layout.mobile-detail-open .mobile-back-btn svg { width: 20px; height: 20px; }

  /* 移动端返回按钮（桌面基础样式 display:none，见 layout.css） */
  .mobile-back-btn { display: flex; }

  /* 全局返回按钮（2026-10-08 跨面板子页面）：仅 is-visible 时显示（由
     RankingUI._syncNavBackButton 同步）；固定左上角，z-index 高于 sticky 分段条、
     低于侧边栏抽屉。目标面板的分段条已被 .panel-detail-open 隐藏，无重叠。 */
  .nav-back-btn.is-visible {
    display: flex;
    position: fixed;
    left: 8px;
    top: calc(env(safe-area-inset-top) + 8px);
    z-index: calc(var(--z-sticky) + 5);
  }

  .results-tree-header { padding: 12px 14px 10px; }
  .results-tree-header h2 { font-size: 0.9rem; letter-spacing: -0.01em; }

  /* 2026-09-11 用户要求内容靠左：容器内边距 6px→4px（与 ≤480 档一致） */
  .results-tree { padding: 4px; overflow-x: hidden; }

  /* 树节点：恢复可读字号与 ≥40px 触摸区（旧版压到 0.48-0.72rem 基本不可读）。
     2026-09-11 紧凑化：与 results.css 口径对齐（分类行 12px/7-8px 内边距），
     字号改绝对 px（html font-size 本断点 14px，rem 会被缩小——见规范 #29）；
     min-height 40px 保留（移动端触摸友好） */
  .tree-node-header {
    padding: 7px 8px;
    font-size: 12px;
    gap: 5px;
    min-height: 40px;
  }

  .tree-arrow { width: 16px; height: 16px; }
  .tree-arrow svg { width: 12px; height: 12px; }

  .tree-node-icon { width: 18px; height: 18px; }
  .tree-node-icon svg { width: 14px; height: 14px; }

  .tree-node-name { min-width: 0; }

  /* 2026-09-11 与 results.css 口径同步：缩进 22px→12px/级（内容靠左） */
  .tree-children { margin-left: 6px; padding-left: 6px; }

  .tree-node-runid { font-size: 10px; max-width: 120px; padding: 1px 6px; }

  .detail-content { padding: 12px; }

  .detail-header {
    flex-direction: column;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 14px;
  }

  .detail-header h2 { font-size: 1.05rem; }

  .detail-meta { gap: 8px; margin-bottom: 16px; }

  .detail-meta-item { padding: 5px 10px; font-size: 0.72rem; }

  .detail-meta-item.detail-description { padding: 12px 14px; }
  .detail-meta-item.detail-description .value { line-height: 1.75; }

  .detail-section { margin-bottom: 16px; }

  .detail-section-title { font-size: 0.72rem; margin-bottom: 8px; }
  .detail-section-title svg { width: 14px; height: 14px; }

  .detail-images {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .detail-image-card { width: 100%; max-width: 100%; }

  .detail-image-card img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    background: var(--color-surface-sunken);
  }

  .detail-image-card .image-label { padding: 6px 8px; font-size: 0.72rem; }
  .detail-image-card .image-label .type-badge { font-size: 0.65rem; padding: 2px 5px; }

  /* 历史卡片 */
  .history-card-header { padding: 8px 10px; gap: 6px; font-size: 0.72rem; flex-wrap: wrap; }
  .history-card-date { font-size: 0.72rem; min-width: 70px; }
  .history-card-cat { margin-left: 0; width: 100%; white-space: normal; }
  .history-card-thumb-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .history-card-thumb-grid img { height: 80px; }

  /* 接口文档 */
  .view-toggle-bar { padding: 10px 12px; gap: 6px; flex-wrap: wrap; }

  .view-toggle-btn { padding: 6px 10px; font-size: 0.72rem; gap: 4px; }
  .view-toggle-btn .icon { font-size: 1rem; }

  /* 接口文档：与结果页同一套「列表 ↔ 详情」单栏导航。
     .api-docs-content 的 display:flex 来自 JS 内联（updateViewToggleButtons），
     这里只改方向；选中接口后 JS 加 .mobile-detail-open 切到整屏详情。 */
  .api-docs-layout { height: auto; max-height: none; overflow: visible; align-items: stretch; }

  .api-docs-content { flex-direction: column; overflow: visible; width: 100%; }

  .api-docs-sidebar {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow-y: visible;
  }

  .api-docs-detail { display: none; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }

  /* 文档返回按钮：仅详情打开时显示（列表态需压住通用的 .mobile-back-btn{display:flex}） */
  #btn-mobile-back-docs { display: none; }

  .api-docs-content.mobile-detail-open .api-docs-sidebar { display: none; }
  .api-docs-content.mobile-detail-open .api-docs-detail { display: block; }
  .api-docs-content.mobile-detail-open #btn-mobile-back-docs { display: flex; margin-bottom: 10px; }

  .api-list { padding: 8px 6px; gap: 2px; }
  .api-list-item { padding: 12px 14px; font-size: 0.88rem; min-height: 40px; display: flex; align-items: center; }

  .api-docs-detail { padding: 14px; }

  .api-detail-content h2 { font-size: 1.15rem; margin-bottom: 14px; }

  .api-endpoint { padding: 10px 12px; font-size: 0.75rem; gap: 4px; }

  .api-description { padding: 12px; margin-bottom: 16px; }

  .params-table th,
  .params-table td { padding: 8px 10px; font-size: 0.72rem; }

  .api-example-section pre { padding: 12px; max-height: 300px; }
  .api-example-section code { font-size: 0.72rem; }

  .raw-md-view { padding: 14px; }
  .raw-md-view .md-content { font-size: 0.72rem; }

  /* 空状态 */
  .empty-state { padding: 32px 16px; }
  .empty-state svg { width: 36px; height: 36px; margin-bottom: 12px; }
  .empty-state h3 { font-size: 0.88rem; }
  .empty-state p { font-size: 0.76rem; }

  /* Toast（微信深色底，移动端保持紧凑） */
  #toast-container {
    left: calc(10px + env(safe-area-inset-left));
    right: calc(10px + env(safe-area-inset-right));
    top: calc(10px + env(safe-area-inset-top));
  }

  .toast {
    min-width: auto;
    max-width: none;
    padding: 12px 16px;
    font-size: 14px;
  }

  /* 模态框（微信确认弹窗：actions 通栏需与容器水平 padding 同步负 margin） */
  .modal-dialog {
    padding: 28px 20px 0;
    width: 92%;
    max-width: 380px;
    border-radius: var(--radius-lg);
  }

  .modal-actions { margin: 0 -20px; }

  .modal-title { font-size: 17px; }
  .modal-body { font-size: 14px; }

  /* 图片预览 */
  .image-preview-overlay img { max-width: 95vw; max-height: 85vh; }

  .image-preview-close {
    width: 36px;
    height: 36px;
    top: calc(10px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
  }
}

/* ===== 小屏手机 (≤480px) ===== */
@media (max-width: 480px) {
  :root {
    --content-pad: 12px; /* 导航栏保持微信 44px（768px 断点已设，不覆盖） */
  }

  html { font-size: 13px; }

  .sidebar { width: 85vw; min-width: 85vw; max-width: 300px; }

  .topbar { padding: 0 8px; gap: 4px; }

  .page-title { font-size: 16px; }

  .topbar-actions { gap: 1px; }

  /* 小屏手机：auth-status 紧凑但保持可读与可点（≥36px 触摸区） */
  .auth-status {
    margin-left: 2px;
    font-size: 0.72rem;
    max-width: 96px;
    gap: 3px;
  }

  .auth-status .auth-greeting { max-width: 52px !important; }

  .auth-status .auth-logout-link {
    font-size: 0.72rem;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-brand-subtle);
  }

  .auth-status .auth-login-link { font-size: 0.75rem; padding: 6px 8px; }

  .btn-primary { padding: 6px 10px; font-size: 0.72rem; }
  .btn-primary svg { width: 14px; height: 14px; }

  .btn-icon { width: 34px; height: 34px; }
  .btn-icon svg { width: 17px; height: 17px; }

  .btn-secondary { padding: 6px 8px; font-size: 0.72rem; }

  /* 顶部内边距 0（与 ≤768 档一致，修复分段条吸顶缝隙；顶部间距由
     .panel > .panel-inner:first-child 的 margin-top 补回）。
     底部内边距与 ≤768 档同口径（TabBar 高 + 安全区 + 16px）：2026-09-16 用户报
     「手机上下面遮挡了」——旧值仅 8px，而本断点 TabBar 仍显示（>768 才隐藏），
     固定定位的 TabBar（50px+safe）盖住底部 ~66px 内容；主流手机 CSS 宽度
     360~430px 全部落在本档。左右仍收窄 8px（比 ≤768 的 12px 更窄）。
     ⚠ 与下方 .forum-state-chat 贴底口径联动：改此处底部内边距必须同步核对 */
  .content-panels {
    padding: 0 8px
      calc(var(--wx-tabbar-height) + env(safe-area-inset-bottom) + 16px);
  }

  /* 会话态（TabBar 已随会话隐藏，见 ≤768 注释）：容器底部内边距已与 ≤768 档
     同口径（tabbar + safe + 16px），≤768 的负外边距公式直接适用，本断点不再
     需要单独覆盖（旧值 height:100dvh + margin-bottom:-8px 基于 8px 旧内边距，
     勿回退） */
  .forum-state-chat {
    height: calc(100dvh - env(safe-area-inset-bottom));
    margin-bottom: calc(-1 * (var(--wx-tabbar-height) + 16px));
  }

  .panel-inner { padding: 16px 12px; border-radius: var(--radius-sm); }

  .panel-header h2 { font-size: 1.05rem; }

  .form-field input,
  .form-field textarea { font-size: 0.9rem; padding: 10px 12px; }

  .task-target-input { width: 60px; font-size: 0.8rem; }

  .task-index { min-width: 18px; font-size: 0.62rem; }

  .task-item-header { padding: 8px 10px; gap: 6px; }

  /* 领取卡行2 顶格左对齐（见 ≤768 同名规则注释） */
  .taskpool-claim-card .task-item-row-meta { padding-left: 0; }

  .task-item-detail { padding: 0 8px 10px 30px; font-size: 0.68rem; }

  .task-item-btn { width: 30px; height: 30px; }
  .task-item-btn svg { width: 14px; height: 14px; }

  .task-status-badge { font-size: 0.62rem; padding: 2px 6px; }

  .progress-stats { gap: 10px; }
  .stat-value { font-size: 1rem; }
  .stat-item.current .stat-value { font-size: 1.15rem; }

  .log-viewport { max-height: 240px; font-size: 0.65rem; }

  /* 小屏手机：树节点仍保持可读（单栏化后无需再压缩宽度） */
  .results-tree-header { padding: 10px 12px 8px; }

  .results-tree { padding: 4px; }

  /* 2026-09-11 紧凑化：与 results.css 口径对齐 + 字号改绝对 px（见规范 #29） */
  .tree-node-header { padding: 7px 8px; font-size: 12px; }

  .tree-node-runid { font-size: 10px; max-width: 96px; }

  .detail-content { padding: 10px; }
  .detail-header h2 { font-size: 0.95rem; }

  .detail-images { display: flex; flex-direction: column; gap: 6px; }

  .detail-image-card { width: 100%; max-width: 100%; }

  .detail-image-card img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    background: var(--color-surface-sunken);
  }

  .detail-image-card .image-label { padding: 5px 6px; font-size: 0.65rem; }
  .detail-image-card .image-label .type-badge { font-size: 0.6rem; padding: 1px 4px; }

  .history-card-date { min-width: 60px; font-size: 0.68rem; }
  .history-card-thumb-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }

  .api-list-item { padding: 11px 12px; font-size: 0.85rem; }

  .view-toggle-btn { padding: 5px 8px; font-size: 0.68rem; }

  .modal-dialog { padding: 24px 16px 0; width: 94%; }

  .modal-actions { margin: 0 -16px; }

  #toast-container { left: 6px; right: 6px; top: 6px; }

  .toast { padding: 10px 14px; font-size: 14px; gap: 8px; }
  .toast-icon { width: 18px; height: 18px; }
}

/* ===== 横屏手机 (高度较小) ===== */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    /* 2026-09-11 顶栏全端隐藏：原 --topbar-height: 44px 覆盖已移除（同上） */
    --content-pad: 10px;
  }

  /* 横屏宽度足够，恢复左右分栏（覆盖 ≤768px 的单栏规则；同优先级靠后生效）。
     注：.mobile-detail-open 的隐藏规则优先级更高，窄屏横屏选中数据项后
     仍会切成整屏详情——这正是想要的交互。 */
  .results-layout {
    display: flex;
    flex-direction: row;
    height: calc(100dvh - var(--topbar-height) - var(--content-pad) * 2);
    max-height: calc(100dvh - var(--topbar-height) - var(--content-pad) * 2);
  }

  .results-tree-panel {
    display: flex;
    width: 28%;
    min-width: 140px;
    max-width: 200px;
    max-height: none;
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  }

  /* 横屏下树面板宽度锁定 28%（覆盖 CSS 变量），拖拽无效果——隐藏把手防误导 */
  .col-resizer { display: none; }

  .results-detail-panel {
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
    border-left: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }

  .log-viewport { max-height: 160px; }
  .panel-inner { padding: 14px 16px; }
}