/* =========================================================================
 * tril-mobile.css —— 全站移动端适配补丁（所有页面共用）
 * -------------------------------------------------------------------------
 * 解决的问题（真 Chrome 360/375/412px 视口实测）：
 *   1. 目录抽屉在 ≤820px 下无法打开（各页 toggleLayout 缺移动端分支）
 *   2. 词典页搜索按钮被裁切、右侧内容溢出
 *   3. 发音手册表格固定 1019px 宽，手机上必须横向滚动才能看全
 *   4. 学习器/复习/错题页的表格列过多，窄屏挤成一团
 *   5. 复选框/输入框仅 13-19px 高，安卓手指点不准
 *   6. 部分正文/说明文字 10-11px，安卓上偏小
 *   7. 底部固定工具条与内容重叠
 *
 * 设计原则：
 *   - 桌面端行为完全不变（所有规则都包在 max-width 断点内）
 *   - 不删 DOM、不改数据，只用 CSS + 少量 JS 增强
 *   - 表格用「横向滚动容器」而非强制换行，保证信息不丢
 * ========================================================================= */

/* 顶栏按钮容器（桌面端：与原来完全一致，只是包了一层） */
.hbtns{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0}
@media (max-width:820px){ .hbtns{gap:6px} }

/* ============================================================
 * 1. 移动端目录抽屉（各页统一）
 *    与 播放器保持一致：nav 变 fixed 抽屉，show-sidebar-m 打开
 * ============================================================ */
@media (max-width: 820px) {

  /* 抽屉容器：固定定位 + 满高（默认滑出屏幕）
     ⚠️ 关键：position:fixed 必须对「打开态」也生效。
     之前只在 body:not(.show-sidebar-m) 下声明了 fixed，
     打开时选择器不匹配 → nav 退回 static → 高度由内容决定（实测仅 111px）
     → 目录条目挤在一小块、且 overflow 不可滚 → 用户只能缩小页面才看全。 */
  body:not(.show-sidebar-m) .layout > nav,
  body:not(.show-sidebar-m) #nav {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84%;
    max-width: 320px;
    z-index: 60;
    transform: translateX(-105%) !important;
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .55);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 打开状态：同样是固定定位 + 满高（与关闭态共用几何，只有 transform 不同） */
  body.show-sidebar-m .layout > nav,
  body.show-sidebar-m #nav {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84%;
    max-width: 320px;
    z-index: 60;
    transform: translateX(0) !important;
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .55);
  }

  /* 兜底：移动端抽屉打开时，无论 body 是否带 hide-sidebar，
     抽屉都必须完整可见且可滚动（hide-sidebar 会把 nav 宽压成 0、opacity 0） */
  body.show-sidebar-m .layout > nav,
  body.show-sidebar-m #nav {
    width: 84% !important;
    max-width: 320px !important;
    flex-basis: auto !important;
    min-width: 0 !important;
    opacity: 1 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-right-width: 1px !important;
    pointer-events: auto !important;
    /* 纵向必须可滚动：目录条目多时（东钢站 level3 有 4+ 项、词根学段 41 项）要能滑 */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateX(0) !important;
  }
  /* 抽屉打开时主内容区不被压缩 */
  body.show-sidebar-m .layout > main,
  body.show-sidebar-m #main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* 抽屉打开时，底部浮动工具条要隐藏 ——
     它 z-index(45) > 抽屉(41)，会浮在抽屉上面挡住目录条目；
     而且抽屉打开时用户要操作的是目录，工具条此刻用不上。 */
  body.show-sidebar-m #layoutDock {
    display: none !important;
  }
  /* 同理，悬浮诊断按钮也避开抽屉 */
  body.show-sidebar-m #trilDiagWrap,
  body.show-sidebar-m #trilDiagBtn {
    display: none !important;
  }

  /* ==========================================================
   * 1b. 覆盖 tril-skin.css 的窄屏旧规则（真机实测的隐藏元凶）
   * -------------------------------------------------------------
   * tril-skin.css 第 854 行：
   *   @media (max-width:560px){ .layout{flex-direction:column}
   *                            .layout > nav,#nav{flex:0 0 auto;max-height:38vh} }
   * 这条旧规则是为了「窄屏把侧栏改成顶部横条」而写的，
   * 但它与新的「固定抽屉」机制冲突：
   *   · max-height:38vh → 抽屉只有视口的 38%（实测 844px 屏上仅 321px 高）
   *   · flex-direction:column → .layout 变竖排，抽屉不再是覆盖式浮层
   * 结果：手机上点开目录，抽屉只占顶部一小块、条目挤在一起、
   *      溢出部分无法滚动 → 用户只能双指缩小页面才看全。
   *
   * 修法：移动端一律用「固定抽屉 + 满高 + 可滚动」，覆盖旧规则。
   * ========================================================== */
  @media (max-width: 820px) {
    .layout,
    body .layout {
      flex-direction: row !important;
    }
    .layout > nav,
    #nav,
    body .layout > nav,
    body #nav {
      max-height: none !important;
      height: auto !important;
      min-height: 0 !important;
      flex: 0 0 auto !important;
      border-bottom: none !important;
      border-right: 1px solid var(--line) !important;
    }
    /* 抽屉打开时强制满高（top:0 + bottom:0 → 视口全高） */
    body.show-sidebar-m .layout > nav,
    body.show-sidebar-m #nav {
      height: auto !important;
      max-height: none !important;
      bottom: 0 !important;
      top: 0 !important;
    }
  }

  /* 抽屉里的内容要能点（hide-sidebar 会把宽度压成 0，这里覆盖） */
  body.show-sidebar-m .layout > nav,
  body.show-sidebar-m #nav {
    width: 84% !important;
    max-width: 320px;
    flex-basis: auto !important;
    min-width: 0 !important;
    opacity: 1 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-right-width: 1px !important;
    pointer-events: auto !important;
    /* ⚠️ 必须是 auto（可滚动），不能是 visible ——
       目录条目多时（词根学段 41 项、行业主题词库等）内容超出高度就滚不动了。
       此规则在上面的兜底规则之后、特异性相同，故最终生效。 */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 背景遮罩 */
  #navBackdrop {
    position: fixed;
    /* 老浏览器（iOS<14.5 / Chrome<87）不支持 inset，用四边显式声明兜底 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 58;
    display: none;
  }
  body.show-sidebar-m #navBackdrop { display: block; }

  /* 主内容占满整屏（抽屉是浮层，主内容始终占满，不被挤到抽屉下面） */
  body .layout > main,
  body #main {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  /* 抽屉打开时主内容仍在原位（浮层之上由遮罩覆盖），不被推走 */
  body.show-sidebar-m .layout > main,
  body.show-sidebar-m #main {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* 抽屉里的小字放大一点 */
  body .layout > nav .navfile,
  body #nav .navfile {
    font-size: 14px !important;
    min-height: 40px !important;
    padding: 9px 10px !important;
    line-height: 1.45 !important;
  }
  body .layout > nav .navunit,
  body #nav .navunit {
    min-height: 36px !important;
    font-size: 13px !important;
  }
}

/* ============================================================
 * 2. 顶部/底部固定条不遮挡内容 + 顶栏在窄屏收紧凑
 *    实测：640px 高的手机，顶栏本身占 359px（56% 屏高），
 *          内容被完全挤到折叠线以下 → 必须压缩。
 * ============================================================ */
@media (max-width: 820px) {
  body {
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden;                /* 防止个别元素撑出整页 */
  }

  /* ---- 顶栏：改为两行紧凑布局 ---- */
  header {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    row-gap: 6px !important;
    overflow: visible !important;
    /* 关键：header 是 flex item，必须禁止被压缩，
       否则内容（标题+按钮条）会溢出并压住下方面板 */
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body.app-page header h1 {
    font-size: 14px !important;
    /* ⚠️ 手机端标题必须单行省略，否则 flex 容器会把中文压成竖排、
       header 撑到 300+px（真机实测）。这里改成 nowrap + ellipsis。 */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;   /* 不再独占一行 */
    width: auto !important;
    min-width: 0 !important;
    order: -1 !important;          /* 标题永远排第一行 */
    line-height: 1.3 !important;
    word-break: normal;
  }
  header .sub {
    display: none !important;          /* 副标题在窄屏隐藏，标题下已有说明 */
  }
  body.app-page header .spacer { display: none !important; }

  /* 进度条另起一行 */
  header .progwrap,
  header > span.progwrap {
    order: 9;
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 11px !important;
  }

  /* 按钮条：由脚本包成 .hbtns。
     ⚠️ 2026-10-25 真机实测：手机端这条「横向滑动按钮条」会把 header 撑成 3~4 行
        （标题独占一行 + 按钮条独占一行 + 进度 + 今日），占 180px，首屏看不到内容。
        且按钮条与右下角浮层菜单功能完全重复。
        → 手机端改为「完全隐藏，功能统一进右下角 ☰ 菜单」。
        桌面端（>820px）不受影响，规则写在上面的基础段里。 */
  header .hbtns,
  header > div.hbtns {
    order: 8;
    flex: 1 1 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1px;
    max-width: 100%;
  }
  /* 手机端：隐藏整条按钮条（含其内部所有按钮） */
  @media (max-width: 820px) {
    header .hbtns,
    header > div.hbtns,
    header .hbtns > *,
    header > div.hbtns > * {
      display: none !important;
    }
  }
  header .hbtns::-webkit-scrollbar { display: none; }
  header .hbtns .laybtn,
  header .hbtns > button,
  header .hbtns > a,
  header > div.hbtns .laybtn,
  header > div.hbtns > button,
  header > div.hbtns > a {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px;
    line-height: 1.3 !important;
  }
  /* 按钮条里的裸按钮也统一成按钮外观 */
  header .hbtns > button,
  header > div.hbtns > button {
    color: var(--txt) !important;
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
  }

  /* 学习器进度/学习时长 chip：与进度条同一行 */
  header .studyChip,
  header > span.studyChip,
  .studyChip {
    order: 10;
    flex: 0 0 auto !important;
    font-size: 11px !important;
    min-height: 26px !important;
    padding: 2px 7px !important;
    align-self: center;
  }

  /* ---- 单元工具条（lessonbar）：压缩成一行可滑动 ---- */
  .lessonbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding: 7px 10px !important;
    align-items: center !important;
  }
  .lessonbar::-webkit-scrollbar { display: none; }
  .lessonbar > * {
    flex: 0 0 auto !important;
  }
  .lessonbar .lt {
    font-size: 12px !important;
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  .lessonbar button {
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  .lessonbar .nowlang,
  .lessonbar .timeline {
    display: none !important;    /* 窄屏隐藏次要状态元素 */
  }

  /* 底部固定工具条 */
  body .bottombar,
  body .mobbar,
  body .fabbar {
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* 悬浮诊断按钮：避开底栏 */
  body #trilDiagBtn {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    width: 42px !important;
    height: 42px !important;
  }
}

/* ============================================================
 * 3. 表格：窄屏改为横向滚动容器，绝不挤压列宽
 * ============================================================ */
@media (max-width: 820px) {

  /* 通用：给所有表格套一层可横向滚动的行为 */
  .tablewrap,
  .vid-wrap,
  .tblwrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* 学习器/复习/错题的词表：表格本身可独立横向滚动 */
  table.vid,
  table.tbl,
  .vid table,
  .tbl table {
    min-width: 100%;
    width: max-content;
    max-width: none;
  }

  /* 表格容器：允许滚动且不被父级裁切 */
  .stage,
  #main,
  .layout,
  .card {
    overflow-x: visible;
    min-width: 0;
  }

  /* 表格单元格文字不再被压成一列 */
  table.vid td,
  table.vid th,
  table.tbl td,
  table.tbl th {
    white-space: normal;
    word-break: break-word;
    padding: 8px 9px !important;
    font-size: 13px !important;
  }

  /* 词表里的马来语/中文列给足宽度，不折成竖条 */
  table.vid td.c-bm,
  table.vid td.c-zh,
  table.vid td.c-en {
    min-width: 88px;
  }
}

/* ============================================================
 * 4. 控件：安卓触摸目标 ≥40px、输入框字号 ≥16px（防 iOS/Android 自动缩放）
 * ============================================================ */
@media (max-width: 820px) {

  /* 复选框 / 单选框：视觉放大 + 加大可点区域（安卓手指） */
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    margin: 4px 8px 4px 0 !important;
    vertical-align: middle;
    flex: 0 0 auto;
    /* 扩大命中区域（不改变视觉大小） */
    position: relative;
  }
  /* 用伪元素把实际可点区域撑到 44px（安卓推荐最小触摸目标） */
  input[type="checkbox"]::after,
  input[type="radio"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }
  /* 复选框所在标签整体可点 */
  .lang-toggle input[type="checkbox"],
  .lang-radio input[type="checkbox"],
  .lang-toggle input[type="radio"],
  .lang-radio input[type="radio"] {
    position: relative;
  }
  .lang-toggle,
  .lang-radio {
    padding: 9px 12px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* 文本类输入框：高度与字号（16px 避免移动端聚焦自动放大页面） */
  input[type="text"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
    min-height: 40px !important;
    padding: 9px 10px !important;
    border-radius: 8px !important;
    max-width: 100% !important;
  }

  /* 按钮：可点区域不小于 40px */
  button,
  .btn,
  .laybtn,
  .chip,
  .lang-toggle,
  .lang-radio {
    min-height: 40px !important;
    padding: 9px 13px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    border-radius: 9px !important;
  }

  /* 顶部栏里的图标按钮：正方形触摸区 */
  button.iconbtn,
  .iconbtn {
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
  }

  /* 语言显示开关（复习/错题页）：整块可点 */
  .lang-toggle,
  .lang-radio {
    min-height: 38px !important;
    padding: 8px 11px !important;
    font-size: 13px !important;
  }

  /* 滑块（语速/音量）：加高便于拖动 */
  input[type="range"] {
    height: 34px !important;
    min-height: 34px !important;
  }
}

/* ============================================================
 * 5. 字号：正文/说明文字在手机上不低于 12px
 * ============================================================ */
@media (max-width: 820px) {
  body {
    font-size: 14px !important;
  }
  /* 原设计里的 10px/11px 微标在手机上放大（统一覆盖各种命名） */
  .hint, .sub, .note, .meta, .tip, .desc, .sc-sub, .fc, .cnt, .up-n,
  .crumb, .exbm, .exzh, .ex, .mini, .i18n-bm-sm, .rt, .small, .sm,
  .muted, .dim, .light, .aux, .label, .lb, .k, .stat-lb,
  .dash-meta, .cc-sub, .sc-sub, .tril-py, .trilSkinHint {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  /* 卡片/提示框文字 */
  .card, .note, .hint, .cc, .sc {
    font-size: 13px !important;
  }
  /* 10px 级极小字：只抬高确实很小的（按实测类名精确挑，不做全局覆盖） */
  :is(.i18n-bm, .i18n-bm-cta, .i18n-bm-sm, .dash-meta, .cc-sub, .tril-py,
      .up-n, .fc, .cnt, .rt, .mini, .lbl, .badge, .sr-cnt, .sr-donggang,
      .ipa, .pron, .kbd, .prov, .warn, .nowlang, .studyChip) {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  /* 表格内的音标/谐音：12px 起，手机上仍清晰可读 */
  table.vid .ipa,
  table.vid .pron {
    font-size: 12px !important;
  }
}

/* ============================================================
 * 6. 词典页：搜索区在窄屏改为纵向堆叠，按钮不再被裁切
 * ============================================================ */
@media (max-width: 820px) {
  /* 搜索框：输入框一行，模式选择 + 查询按钮一行 */
  .searchbox {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "q    q"
      "mode btn" !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
  }
  .searchbox > input[type="text"],
  .searchbox > #q {
    grid-area: q !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .searchbox > select,
  .searchbox > #mode {
    grid-area: mode !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .searchbox > button,
  .searchbox > #searchBtn {
    grid-area: btn !important;
    white-space: nowrap !important;
    width: auto !important;
    margin: 0 !important;
  }
  /* 工具条也纵向排布 */
  .searchbox + .toolbar,
  .toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* 结果卡片占满宽度 */
  #results .card,
  #resultList .card,
  .results .card {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 词条里的三语框纵向排列 */
  .langbox {
    width: 100% !important;
    margin-bottom: 8px !important;
  }
}

/* ============================================================
 * 7. 发音手册：表格可横向滚动；小屏隐藏英文列以留出空间
 * ============================================================ */
@media (max-width: 820px) {
  .unit .tablewrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    /* 表格本身按内容宽度，但列内容允许换行，避免无限撑宽 */
  }
  .unit table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }
  .unit table th,
  .unit table td {
    font-size: 12px !important;
    padding: 7px 6px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  /* 窄屏隐藏英文列（桌面端与打印仍完整可见） */
  @media (max-width: 560px) {
    .unit table th:nth-child(7),
    .unit table td:nth-child(7) { display: none !important; }
  }
  /* 列宽分配：马来语/谐音/音节 给足空间 */
  .unit table th:nth-child(2),
  .unit table td:nth-child(2) { width: 21%; }   /* 马来语 */
  .unit table th:nth-child(3),
  .unit table td:nth-child(3) { width: 21%; }   /* 音节拆分 */
  .unit table th:nth-child(4),
  .unit table td:nth-child(4) { width: 21%; }   /* 音标 */
  .unit table th:nth-child(5),
  .unit table td:nth-child(5) { width: 19%; }   /* 中文谐音 */
  .unit table th:nth-child(6),
  .unit table td:nth-child(6) { width: 18%; }   /* 中文 */
  /* 单元标题别占太多竖向空间 */
  .unit h2 {
    font-size: 15px !important;
    padding: 10px 12px !important;
    line-height: 1.4 !important;
  }
  .unit h2 .cnt { font-size: 11px !important; }
}

/* ============================================================
 * 8. 看板（首页）图表在窄屏自适应
 * ============================================================ */
@media (max-width: 820px) {
  .dash-grid,
  .grid2,
  .cc-grid {
    grid-template-columns: 1fr !important;
  }
  .cc {
    padding: 12px 10px !important;
  }
  .chart,
  .ct {
    width: 100% !important;
  }
}

/* ============================================================
 * 9. 底部浮动工具条 #layoutDock（真机实测缺陷修复）
 * -----------------------------------------------------------------
 *  实测（Chrome 360×640）：#layoutDock 是 position:fixed; right:8px
 *  的横向 flex 按钮组，6 个按钮总宽约 490px > 视口 360px，
 *  结果整条向左溢出，「☰ 目录」按钮跑到屏幕外 x=-138px 处，
 *  安卓用户根本点不到 —— 这是「安卓极其不友好」的主因之一。
 *
 *  修法（不删功能、只改呈现）：
 *    - 窄屏改成两列网格，宽度自适应，永不溢出
 *    - 按钮本体缩小但仍保持 ≥36px 触摸高度
 *    - 与左下角诊断按钮错开，避免互相遮挡
 * ============================================================ */
@media (max-width: 820px) {
  #layoutDock {
    right: 6px !important;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, auto);
    justify-items: stretch;
    gap: 4px !important;
    padding: 5px !important;
    width: max-content;
    max-width: calc(100vw - 12px);
    background: rgba(26, 34, 56, .93);
    border-radius: 11px;
  }
  /* 非固定定位的两页（复习 / 错题）：靠右显示，不占满整行 */
  body #layoutDock:not([style*="fixed"]) {
    justify-self: end;
    margin: 0 6px 6px auto;
  }
  #layoutDock button {
    font-size: 11px !important;
    padding: 8px 7px !important;
    min-height: 36px !important;
    line-height: 1.25 !important;
    white-space: nowrap;
    justify-content: center;
    border-radius: 8px !important;
  }
  /* 诊断按钮移到左下角原位，避免与 dock 重叠 */
  #trilDiagWrap {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    left: 6px !important;
  }
  #trilDiagBtn {
    bottom: auto !important;
    width: 38px !important;
    height: 38px !important;
  }
  /* 播放器页悬浮 FAB：缩小并避让 dock */
  .fab {
    right: 8px !important;
    bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
 * 10. 顶栏链接型按钮（复习/错题/词库是 <a> 而非 <button>）
 * -----------------------------------------------------------------
 *  实测：<a class="laybtn"> 未继承 header 的按钮底色，浏览器按
 *  默认链接渲染成蓝色小字（「🔁 复习」几乎看不清），且被裁切。
 *  修法：让 <a> 与 <button> 视觉一致。
 * ============================================================ */
@media (max-width: 820px) {
  header a.laybtn,
  header .hbtns a.laybtn {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    flex: 0 0 auto !important;
    color: var(--txt) !important;
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
  }
  header a.laybtn:active,
  header .hbtns a.laybtn:active {
    background: var(--grad-1) !important;
    color: #fff !important;
  }
}

/* ============================================================
 * 11. 通用兜底：任何元素都不许把页面撑出横向滚动条
 * -----------------------------------------------------------------
 *  最后一层保险：主内容区永远不产生页面级横向溢出。
 *  （表格等宽内容已被各自的 .tablewrap 容器横向滚动接管）
 * ============================================================ */
@media (max-width: 820px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  main,
  #main,
  .layout,
  .stage,
  .content,
  .wrap {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* 长英文/马来文单词不撑破容器 */
  main,
  #main,
  .card,
  .unit,
  .lessonbar {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* 图片、SVG、canvas 永远不超出容器 */
  img,
  svg,
  canvas,
  video {
    max-width: 100% !important;
    height: auto;
  }
}

/* ============================================================
 * 12. 顶栏标题与下方「显示设置」面板重叠（真机实测缺陷）
 * -----------------------------------------------------------------
 *  实测（Chrome 360×640 · 复习页）：header h1 是 nowrap + overflow:hidden，
 *  但它的盒底（166px）超出了 header 底边（160px），导致标题压住了
 *  紧接其后的 .display-panel-header 文字，两行内容叠在一起看不清。
 *
 *  修法：窄屏标题允许换行、不裁切；header 与面板之间留出间距。
 * ============================================================ */
@media (max-width: 820px) {
  /* ⚠️ 手机端标题改为单行省略（否则中文被压成竖排、header 撑到 300+px）。
     .title 保留换行（那是设置面板的标题，不是页面主标题）。 */
  body.app-page header h1 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
    word-break: normal;
  }
  header .title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35 !important;
    word-break: break-word;
  }
  header {
    row-gap: 6px !important;
  }
  /* 显示设置面板：标题与箭头各占一行，不再挤在一起 */
  .display-panel-header {
    padding: 9px 12px !important;
    font-size: 12.5px !important;
    gap: 8px;
  }
  .display-panel-header span:first-child {
    min-width: 0;
    line-height: 1.45;
  }
  .display-panel-body {
    padding: 10px 12px !important;
    gap: 10px !important;
    /* 展开后自身可滚动，绝不把主内容区挤没 */
    max-height: 42vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .display-section {
    gap: 6px !important;
  }
  .sec-label {
    font-size: 12px !important;
    width: 100%;
    margin: 0 0 2px;
  }
}

/* ============================================================
 * 13. 老浏览器降级（iOS Safari < 14.5 / Android Chrome < 84）
 * -----------------------------------------------------------------
 *  这些版本不支持 flex 的 gap 属性，横向按钮会「粘在一起」，
 *  虽不溢出但观感差、易误点。这里用 margin 兜底出一份近似间距。
 *  新浏览器同时支持 gap 与 margin，最终效果以 gap 为准。
 * ============================================================ */
@media (max-width: 820px) {
  /* 顶栏按钮条 */
  header .hbtns > *,
  header > div.hbtns > * {
    margin-right: 5px;
  }
  header .hbtns > *:last-child,
  header > div.hbtns > *:last-child {
    margin-right: 0;
  }
  /* lessonbar 单元工具条 */
  .lessonbar > * {
    margin-right: 5px;
  }
  .lessonbar > *:last-child {
    margin-right: 0;
  }
  /* 底部浮动工具条 */
  #layoutDock > * {
    margin-right: 4px;
    margin-bottom: 4px;
  }
  #layoutDock > *:nth-child(2n) {
    margin-right: 0;
  }
  #layoutDock > *:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
  /* 显示设置面板的分组 */
  .display-section > * {
    margin-right: 6px;
    margin-bottom: 6px;
  }
  .display-section > *:last-child {
    margin-right: 0;
  }
  /* 底部 .foot 工具条 */
  .foot > * {
    margin-right: 8px;
  }
  .foot > *:last-child {
    margin-right: 0;
  }
  /* 词典页搜索区 */
  .searchbox > * {
    margin-right: 8px;
  }
  .searchbox > *:last-child {
    margin-right: 0;
  }
}
/* ============================================================
 * 14. 主内容区最小高度保障（真机实测缺陷）
 * -----------------------------------------------------------------
 *  实测（Chrome 360×640 · 复习页）：body 是 height:100vh; overflow:hidden，
 *  若上方「显示设置」面板展开较高，flex:1 的 main 会被压到 28px，
 *  正文几乎看不见 —— 用户反馈「显示不全」的另一半原因。
 *
 *  修法：main / #main 保证至少 45% 视口高度，超出则自身滚动。
 * ============================================================ */
@media (max-width: 820px) {
  main,
  #main {
    min-height: 45vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* 有底部固定工具条的页面给内容留出空间（用 class 标记，避免 :has() 兼容性问题） */
  body.has-dock main,
  body.has-dock #main {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* 底部 .foot 工具条：窄屏改为横向可滑动，不换行堆高 */
  .foot {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px !important;
    padding: 8px 10px !important;
    min-height: 52px;
    align-items: center;
  }
  .foot::-webkit-scrollbar { display: none; }
  .foot > * {
    flex: 0 0 auto !important;
  }
  .foot .progress {
    min-width: 60px;
    flex: 1 1 auto !important;
  }
}

/* ============================================================
 * 15. 安全区（刘海屏）适配
 * ============================================================ */
@media (max-width: 820px) {
  body {
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }
  .topbar,
  .header,
  header {
    /* 与第 2 段的 10px 内边距保持一致，避免覆盖后左右不居中 */
    padding-left: calc(10px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(10px + env(safe-area-inset-right, 0px)) !important;
  }
}

/* =========================================================================
 * 手机端子页面顶栏紧凑化（2026-10-25）
 * -------------------------------------------------------------------------
 * 问题：手机上 header 被拆成 3~4 行（标题+副标题 / 皮肤·返回·登录 /
 *       9 个功能按钮滑动条 / 总进度 / 今日时长）→ 占 180px，首屏看不到内容。
 * 方案：顶栏只留「标题 + 进度」一行；功能按钮全部收进右下角浮层菜单
 *       （#layoutDock 原本就有，与顶栏按钮完全重复）。
 * ========================================================================= */
@media (max-width: 820px) {

  /* ① 顶栏压成一行：标题左、进度右，隐藏副标题 */
  body.app-page header {
    padding: 8px 10px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    min-height: 0 !important;
  }
  body.app-page header h1 {
    font-size: 14px !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    line-height: 1.3;
  }
  body.app-page header .sub,
  body.app-page header .spacer { display: none !important; }

  /* ② 进度信息压缩成一行小字（放在标题行右侧） */
  body.app-page header .progwrap {
    flex: 0 0 auto !important;
    font-size: 10px !important;
    white-space: nowrap;
    order: 9;
  }
  header .progwrap .progbar { width: 44px !important; height: 3px !important; }

  /* ③ 顶栏那条按钮滑动条：功能已移入浮层菜单，手机上直接隐藏 */
  header .hbtns { display: none !important; }

  /* ④ 皮肤 / 返回 / 登录：保留但缩小（登录与返回是主操作） */
  body.app-page header .laybtn,
  body.app-page header .iconbtn { height: 30px !important; padding: 0 9px !important; font-size: 12px !important; }

  /* ⑤ 今日学习时长 chip：并入进度行，不单独占一行 */
  body.app-page header .studyChip {
    order: 10;
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  /* ⑥ 开发者内部工具（🔧 诊断按钮）在用户界面隐藏 */
  #trilDiagWrap { display: none !important; }
  #trilDiagBtn { display: none !important; }

  /* ⑦ 右下角浮层：收成 1 个「☰ 菜单」按钮，点开才展开面板 */
  #layoutDock {
    right: 8px !important;
    bottom: 10px !important;
    display: block !important;
    max-width: min(92vw, 320px);
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  /* dock 里的按钮是裸 <button>（无 class），要按元素选择器隐藏 */
  /* 注意：dockMoved 克隆在 display:contents 的 div 里（孙级），必须用后代选择器
     才能一并隐藏，否则收起态会漏出「返回/登录」两个克隆、dock 高达 126px */
  #layoutDock button:not(#dockToggleBtn) {
    display: none !important;
  }
  /* 展开态：由 JS 给 body 加 .dock-open */
  body.dock-open #layoutDock {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
  }
  body.dock-open #layoutDock button:not(#dockToggleBtn) {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    height: 34px !important;
    padding: 0 6px !important;
    font-size: 11.5px !important;
    white-space: nowrap;
  }
  /* 菜单开关按钮（由 JS 注入） */
  #dockToggleBtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--txt);
    font-size: 17px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
    cursor: pointer;
  }
  #dockToggleBtn:active { transform: scale(.94); }
  body.dock-open #dockToggleBtn { display: none !important; }

  /* ⑧ 主内容区上移：顶栏矮了，多留一点给内容 */
  main, #main { min-height: 0 !important; }

  /* ⑨ 内容底部留出浮层按钮的空间，避免最后一行被遮 */
  #main { padding-bottom: 62px !important; }
}

/* 桌面端隐藏注入的「☰ 目录」快捷按钮（移动端样式见⑪，特异性更高） */
#trilMenuBtn { display: none !important; }

/* =========================================================================
 * 手机端 header 最终覆盖（2026-10-25，放在文件最后确保优先级最高）
 * -------------------------------------------------------------------------
 * 真机实测问题：header 内多个元素带 `flex:1 1 100%`（hbtns / progwrap），
 * 在窄 flex 容器里会互相挤压 → 标题被压成 12px 竖条、按钮竖排、header 反而变高。
 * 修法：手机上 header 只保留「标题 + 进度 + 今日」三件套，
 *       其余（.hbtns 按钮条 / 皮肤切换 / 返回 / 登录）交给右下角 ☰ 菜单。
 * ========================================================================= */
@media (max-width: 820px) {
  body.app-page header {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 10px !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* 标题：占剩余空间，单行省略
     ⚠️ 只作用于 app 子页面（body 有 .app-page 标记）。
        首页的 <header class="hero"> 也叫 header，其 h1 是大标题，必须保持居中大字。 */
  body.app-page header h1 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    order: 1 !important;
  }
  /* 首页 hero 的大标题：保持原样（居中、渐变、clamp 字号） */
  header.hero h1 {
    flex: none !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: clamp(20px, 6vw, 26px) !important;
    line-height: 1.25 !important;
    order: 0 !important;
  }
  /* 进度条：固定不换行 */
  body.app-page header .progwrap {
    flex: 0 0 auto !important;
    width: auto !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    order: 2 !important;
  }
  header .progwrap .progbar { width: 40px !important; }
  /* 今日时长 */
  body.app-page header .studyChip {
    flex: 0 0 auto !important;
    order: 3 !important;
    font-size: 10px !important;
    padding: 2px 7px !important;
    white-space: nowrap !important;
  }
  /* 顶栏按钮条：手机上完全隐藏（功能在右下角 ☰ 菜单里）
     ⚠️ 用更狠的选择器：JS 注入的 .hbtns 带 inline style 或后定义样式，
        单靠 header .hbtns 会被覆盖 → 这里加 :not(#dockToggleBtn) 兜底 + 隐藏所有子元素 */
  body.app-page header .hbtns,
  body.app-page header .hbtns > * {
    display: none !important;
  }
  /* 皮肤切换 / 返回 / 登录：手机上收进菜单，隐藏本体 */
  body.app-page header .laybtn,
  body.app-page header .iconbtn,
  body.app-page header button[data-skin],
  body.app-page header #trilSkinBtn,
  body.app-page header #trilLoginBtn,
  body.app-page header .tril-loginbtn {
    display: none !important;
  }
  /* ⑪ 移动端顶栏「☰ 目录」快捷按钮（auth-client 注入；桌面端由下方全局规则隐藏） */
  body.app-page header #trilMenuBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: -1 !important;
    flex: 0 0 auto !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 4px 0 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: var(--panel) !important;
    color: var(--txt) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }
  body.app-page header #trilMenuBtn:active { transform: scale(.94); }

  /* ⑩ 竖屏顶栏保留「← 返回」可见按钮（真机反馈：收进菜单后找不到返回，
        且菜单里的克隆此前不复制 onclick 是死按钮 —— 等于完全没有返回）。
        排到标题左侧、紧凑 30px 高；☰ 菜单里的返回保留作第二入口。 */
  body.app-page header #trilBack,
  body.app-page header .tril-backbtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: -1 !important;
    flex: 0 0 auto !important;
    height: 30px !important;
    padding: 0 10px !important;
    margin: 0 6px 0 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: var(--panel) !important;
    color: var(--txt) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }
  /* 副标题与占位 */
  body.app-page header .sub,
  body.app-page header .spacer { display: none !important; }
}

/* 复习页 / 错题复习页的 .chip（到期/周内/掌握 统计）：
   真机实测它会 flex 换行占 58px，把顶栏撑到 73px。
   → 改成单行紧凑显示。 */
body.app-page header .chip {
  flex: 0 1 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10.5px !important;
  padding: 2px 8px !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  overflow: hidden !important;
  max-width: 46% !important;
  order: 2 !important;
}
body.app-page header .chip > * {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* ============================================================
 * 16. 悬浮播放键 FAB：不许遮挡任何按键（2026-10-26 真机反馈）
 * ---------------------------------------------------------
 *  实测：播放器 .fab 是 z-index:46 的圆形悬浮按钮，
 *  ① 控制面板展开时它压在「间隔/语速/音量/播放模式」按钮上；
 *  ② 右下角 ☰ 菜单展开时它压在菜单按钮上。
 *  修法：控制面板可见 / 菜单展开时直接隐藏 FAB
 *        （这两个场景下播放键本来就看得见，不需要悬浮键）。
 * ============================================================ */
@media (max-width: 820px) {
  body:not(.hide-controls) .fab { display: none !important; }
  body.dock-open .fab { display: none !important; }
  .fab {
    right: 10px !important;
    /* 120px：底部浮动条(☰)占 ~54px + 词条进度条(.wordstrip)占 ~55px，
       FAB 必须浮在进度条上方，否则挡住单词切换小按钮（真机反馈「播放键阻挡其他按键」） */
    bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 22px !important;
  }
}

/* ============================================================
 * 17b 段：工具栏小控件放大（任务#18 真机审计：复选框 22x22 低于触控下限）
 *   影响页：词典（循环朗读复选框）、发音手册等带 .toolbar 的页面。
 *   修法：≤820px 复选框/单选放大到 26px，标签行补足触控高度。
 * ============================================================ */
@media (max-width: 820px) {
  /* ⚠️ 实测结论（agent-browser Chromium）：checkbox/radio 的 width/height
     会被原生 widget 完全忽略（内联 40px 仍渲染 22x22，div 却正常）。
     zoom 是按新尺寸重绘控件（清晰、改布局、hit-area 同步变大），
     transform:scale 只是视觉放大（发虚且 hit-area 在部分场景不一致），
     故首选 zoom；不支持的旧浏览器保持 22px 原样，无回退风险。 */
  .toolbar input[type="checkbox"],
  .toolbar input[type="radio"] {
    zoom: 1.55;              /* 22px → 约34px，超过 26px 触控下限 */
    accent-color: var(--accent, #5b8cff);
    margin: 0 6px 0 0;
    flex: none;
    vertical-align: middle;
  }
  /* label 包裹着 input，点文字等同点选框 —— 触控区实际是 label，加到 38px 高 */
  .toolbar label {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 8px;
  }
}

/* ============================================================
 * 18 段：长页面（.longpage）恢复普通文档流 —— 修「竖屏显示不全」
 * -----------------------------------------------------------------
 *  根因（2026-10-25 真机反馈）：首页自身 CSS 是
 *    body{display:flex;flex-direction:column;align-items:center}
 *  被第 6 段 viewport 高度补丁（height:100dvh）一叠加，变成「定高弹性列」：
 *  直接子项按 flex-shrink 被压缩，#dashboard 从 2725px 塌到 46px，
 *  且它 overflow:hidden → 看板统计/热力图/图表全部裁掉看不见。
 *  （横屏宽 >820px 不进本媒体查询，所以横屏一直正常）
 *  修法：longpage 页面恢复 block + auto 高度，交还原文档滚动；
 *        app 页（.app-page，学习器/闪记等）与词典等工具页保持定高外壳不变。
 * ============================================================ */
@media (max-width: 820px) {
  body.longpage {
    display: block !important;
    height: auto !important;
    min-height: 100dvh !important;
    /* ⚠️ 必须两轴都 visible：overflow-x:hidden + overflow-y:visible 会让 y
       被规范强制计算成 auto → body 变成「内容刚好撑满、滚不动」的滚动容器，
       吃掉整个触摸/滚轮手势链（真机实测首页滑不动）。横向溢出由 html 的
       overflow-x:hidden 兜底裁剪，不设 body 级裁剪。 */
    overflow: visible !important;
    align-items: stretch !important;
  }
  /* 双保险：任何子项都不许被弹性收缩（header 本来就有 0 0 auto） */
  body.longpage > * {
    flex: 0 0 auto !important;
  }
}

/* =========================================================================
 * 19. 移动端落地空状态 = 一键开目录（2026-10-26）
 * -------------------------------------------------------------------------
 * 竖屏打开 app 落地时主区只有「← 从左侧选择…」一行小字，目录在抽屉里，
 * 用户看到白页。增强脚本（auth-client.js）会：落地自动弹抽屉 + 把提示卡
 * 变成可点卡片。这里只给带 .empty-tap 的卡片做移动端样式，普通 .empty 不受影响。
 * ========================================================================= */
@media (max-width: 820px){
  body.app-page main .empty.empty-tap,
  body.app-page #main .empty.empty-tap{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    margin:16vh auto 0 !important;
    max-width:320px !important;
    min-height:132px !important;
    padding:20px 18px !important;
    border:1.5px dashed var(--line,#3a4a6b) !important;
    border-radius:14px !important;
    background:var(--panel,rgba(255,255,255,.05)) !important;
    color:var(--txt,#e8ecf5) !important;
    font-size:14.5px !important;
    line-height:1.65 !important;
    text-align:center !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
  }
  body.app-page main .empty.empty-tap:active{ transform:scale(.98); }
  .empty-tap-hint{
    font-size:13px !important;
    font-weight:600;
    color:#7ea6ff;
    letter-spacing:.5px;
  }
}