/* ============================================================================
   移动端优化层（2026-10-31 · v3.1）
   ----------------------------------------------------------------------------
   为什么单独开一个文件：
     1) 本项目 CSS 加载顺序是 style → tokens → sycm-theme → market → after → cloud
        → weather，越靠后越优先。把移动端补丁塞进前面的文件会被后面的覆盖掉。
     2) 全部规则都写在 @media (max-width: 768px) 里，桌面端一个字都不改。
     3) 出问题一眼能定位到这一层，不用在 1900 行的 sycm-theme.css 里翻。

   解决的三类实际问题（都是 390x844 下量出来的真实数字）：
     A. 底部导航 8 项挤在一行 → 每项只有 43~47px 宽（低于 48px），常点错。
        改为「5 个主项 + 更多抽屉」，每项 ~75px。
     B. 筛选 chip(.seg) 高 26px、.help-btn 18x18、.link-btn 高 20px、
        select.pg-size 高 24px —— 手指按不准（移动端建议 ≥ 36~44px）。
     C. 云空间搜索框等少数输入框仍停在 28px 高，与移动端 16px 字号不匹配。
   ========================================================================== */

@media (max-width: 768px) {

  /* ---------------------------------------------------------------- A. 底部导航 */
  .bottom-nav {
    /* 5 项时每项约 75px，去掉原来的 96px 上限，让它们均分 */
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }

  .bottom-nav .bn-item {
    max-width: none;
    min-width: 0;
    padding: 4px 2px;
    gap: 3px;
    font-size: 12px;
    line-height: 1.2;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }

  .bottom-nav .bn-item svg {
    width: 24px;
    height: 24px;
  }

  .bottom-nav .bn-item.on {
    font-weight: 600;
    background: var(--accent-soft, rgba(32, 98, 230, .10));
  }

  /* 「更多」抽屉：面板浮在底部导航之上，遮罩压在导航之下（导航仍可点） */
  .bn-sheet-mask {
    position: fixed;
    inset: 0;
    z-index: 88;
    background: rgba(0, 0, 0, .30);
    border: none;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .bn-sheet-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 95;
    background: var(--color-bg-surface, #fff);
    border-radius: 14px 14px 0 0;
    border-top: 1px solid var(--border, #e6e6e6);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .14);
    padding: 14px 14px 16px;
    animation: bnSheetIn .18s ease-out;
  }

  @keyframes bnSheetIn {
    from { transform: translateY(14px); opacity: .5; }
    to   { transform: none; opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .bn-sheet-panel { animation: none; }
  }

  .bn-sheet-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
  }

  .bn-sheet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .bn-sheet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /* 移动端触控目标：高度 ≥ 72px，宽度约 1/4 屏 */
    min-height: 74px;
    padding: 10px 2px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text, #1f2328);
    background: var(--color-bg-surface, #fff);
    border: 1px solid var(--border, #e6e6e6);
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
  }

  .bn-sheet-item svg {
    width: 24px;
    height: 24px;
  }

  .bn-sheet-item.on {
    color: var(--accent, #2062e6);
    border-color: currentColor;
    background: var(--accent-soft, rgba(32, 98, 230, .08));
  }

  .bn-sheet-item:active {
    background: var(--surface-subtle, #f2f3f5);
  }

  /* ------------------------------------------- B. 触控目标（≥ 32px，chip ≥ 34px） */
  /* 筛选 chip：原来 26px，手指基本点不准 */
  .seg-tabs .seg,
  .seg > .tab {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    -webkit-tap-highlight-color: transparent;
  }

  .seg-tabs .seg {
    padding: 0 12px;
  }

  /* 小号主按钮：显示更多 / 上传 等，原来 26~32px */
  .ios-btn.sm {
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    line-height: 30px;
  }

  /* 文字链按钮：刷新 / 前一天 / 后一天 / 最新日期 / 回到近7天 … 原来只有 20px 高 */
  .link-btn {
    min-height: 32px;
    padding: 4px 8px;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
  }

  /* 每页条数下拉：原来 24px */
  select.pg-size,
  .mk-pager select.pg-size {
    height: 32px;
    min-height: 32px;
    line-height: 30px;
    font-size: 16px;   /* iOS 聚焦时字号 < 16 会强制放大页面 */
  }

  /* 数据页「表头筛选」按钮（商品ID▾ / 区域▾ / 刷单状态▾ / F层级▾）：
     原来只有 21px 高，而它正是手机上最常用的筛选入口，点不中就等于筛不了。 */
  .dt-fname {
    min-height: 32px;
    padding: 4px 6px;
    gap: 4px;
  }

  /* 表头里带筛选按钮时把表头行高一点，避免 32px 按钮把字挤出去 */
  .dt-fth {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  /* ? 帮助按钮：视觉保持小巧，但把触控区扩到 44x44，不影响任何布局 */
  .help-btn {
    position: relative;
  }

  .help-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* ---------------------------------------------- C. 输入框高度与 16px 字号对齐 */
  /* sycm-theme.css 给所有 input 定了 28px 高；移动端字号是 16px，28px 会显得挤。
     这里只补高度，不动字号（字号已在 sycm-theme.css 的移动段落里改成 16px）。 */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    min-height: 34px;
  }

  /* 云空间 / 数据页等紧凑工具条里的搜索框：原来停在 28px，跟 16px 字号不匹配。
     ⚠ 这里绝对不要写 .lg-input —— 那是登录页的大输入框（tokens-login.css 里
       height: var(--lg-input-h) = 60px），本文件是最后加载的，写了就会把
       登录框压成 36px。这个错犯过一次。 */
  #clKeyword,
  #clSearch,
  .dt-search {
    height: 36px;
    min-height: 36px;
  }

  /* ------------------------------------------------ D. 登录页「记住账号」勾选区 */
  /* 原来 checkbox 16x16、整行高度约 19px，手机上不好点。
     label 包着 checkbox，所以放大 label 的行高就等于放大点击区。 */
  #viewLogin .login-remember {
    min-height: 32px;
    font-size: 14.5px;
  }

  #viewLogin .login-remember input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  /* -------- F. 售后表格新增的勾选框 / 复制按钮（2026-11 第 1、2、3 条） -------- */
  .af-ck, .af-ck-all { width: 18px; height: 18px; }
  .af-copy-one { width: 28px; height: 28px; }
  .af-selbar .ios-btn.sm { height: 34px; }
  .af-selbar { gap: 6px; }
  .af-selbar .link-btn { margin-left: 0; }

  /* ---------------------------------------------- E. 天气页「预报」小标签 */
  /* weather.css 里是 10px / 16px 高，手机上几乎看不清。提到 11px / 18px。 */
  .wx-fc {
    font-size: 11px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
  }
}