/* ============================================================
   油老茂 · 移动端体验适配层 v2（Mobile UX Layer）
   面向微信内置浏览器 / 手机 Safari / 安卓 Chrome 的窄屏体验。
   仅在 max-width 媒体查询内生效 —— 桌面端界面完全不受影响。

   【为什么需要高优先级】
   部分工具（op-* / ra-* / bi-* / std-* 等）在运行时把 <style> 注入
   <head> 末尾，天然排在 mobile.css 之后。因此本文件：
     ① 关键规则统一加 .tool-main 前缀抬升特异性；
     ② app.js 每次渲染工具后会把本文件重新挂到 <head> 末尾（ensureMobileLayerLast）；
     ③ 仅对"必须赢"的少数字号/触控/溢出规则使用 !important。
   三者叠加，避免与工具自身样式打架。

   【覆盖范围】顶栏 / 首页 Hero·分类·网格·最近使用 / 工具详情页头与主侧栏 /
   31 个工具内容区通用兜底（媒体、表格、网格、代码块、长串）/
   表单与输入 / 按钮与触控目标 / 弹窗与 Toast / 底部快捷导航 / 页脚 / 安全区。

   【设计 token（移动端）】
   断点      : ≤400 小屏 / ≤600 手机 / ≤768 平板竖 / ≤1024 平板横
   触控目标  : 主按钮 ≥44px 高，次级 ≥36px，行内链接 ≥44px 行高
   字号下限  : 正文 13px / 次要 11.5px / 标签 11px（不再更小）
   输入字号  : 16px（低于 16px 会触发 iOS 聚焦自动放大）
   安全区    : env(safe-area-inset-*) 全覆盖（刘海屏、小白条）
   ============================================================ */

/* ---------- 0. 基础：防 iOS 字体缩放 / 点按高亮 / 长串溢出 ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* iOS 滚动惯性 + 防止横向晃动 */
  overflow-x: hidden;
}
body {
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  /* 供 JS 写入真实视口高度（iOS 地址栏收缩问题） */
  min-height: calc(var(--vh, 1vh) * 100);
}
@media (hover: none) {
  /* 触屏设备取消 hover 位移，避免"点一下弹走" */
  .btn:hover, .btn-primary:hover { transform: none; }
  .card:hover { transform: none; }
}
/* 长英文单词 / 长数字串 / URL 强行换行，防止撑破容器 */
.m-break, .tool-main, .tool-side, .panel, .card, .tool-head-text {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---------- 1. 工具内容区通用兜底（31 个工具共同生效） ---------- */
/* 媒体元素绝不超出容器 */
.tool-main img, .tool-side img,
.tool-main canvas, .tool-side canvas,
.tool-main video, .tool-side video,
.tool-main svg, .tool-main iframe, .tool-main embed {
  max-width: 100%;
}
.tool-main canvas { height: auto; }
.tool-main pre, .tool-main code {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
}
/* 裸表格不允许撑破：由 JS 包一层 .m-scroll，兜底再给 display:block 滚动 */
.tool-main table { max-width: 100%; }

/* JS 自动包裹的横向滚动容器（表格 / 宽数据块） */
.m-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin: 0 0 10px;
  border-radius: 10px;
}
.m-scroll > table { margin-bottom: 0 !important; }
/* 滚动提示：右侧渐隐，暗示"还能往右拖" */
.m-scroll.m-can-scroll { position: relative; }
.m-scroll-hint {
  font-size: 11px;
  color: #94a3b8;
  margin: -6px 0 10px;
  text-align: right;
}

/* 已存在滚动容器类的统一增强 */
.check-table-wrap, .table-wrap, .result-table-wrap, .data-table-wrap,
.op-tblwrap, .bi-tblwrap, .ra-tblwrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ---------- 2. 仅移动端：字号下限与最小触控目标 ---------- */
@media (max-width: 1024px) {
  /* 输入类控件字号下限 16px：避免 iOS 聚焦时页面被自动放大 */
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea {
    font-size: 16px !important;
  }
  input[type="checkbox"], input[type="radio"] {
    width: 20px; height: 20px;
    min-width: 20px;
    vertical-align: -4px;
  }
  /* 正文过小字号统一抬到 11.5px 下限（只抬小于 11px 的） */
  .tool-main .m-tiny, .tool-side .m-tiny { font-size: 11.5px; }
}

/* ---------- 3. ≤1024px：平板横屏 → 工具主/侧栏堆叠 ---------- */
@media (max-width: 1024px) {
  .tool-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tool-side { position: static; top: auto; width: 100%; }
  .tool-side .panel { margin-bottom: 0; }
  /* 侧栏面板在窄屏下改为纵向堆叠且等宽 */
  .tool-side { display: flex; flex-direction: column; gap: 14px; }

  /* ---------- 触控目标底线（平板同样适用，手指没有更小） ----------
     基准：主操作 ≥40px，次级 ≥36px，工具内小控件 ≥32px。
     ≤600px 档会在文件后部用更大的值（42/38）覆盖这里。 */
  .tool-main button:not(.btn):not(.m-backtop),
  .tool-side button:not(.btn) {
    min-height: 32px !important;
    min-width: 32px !important;
  }
  .tool-main .btn:not(.btn-sm), .tool-side .btn:not(.btn-sm),
  .btn-row .btn, .tool-head-main > .btn, #btnPrintPage, .btn-back {
    min-height: 40px !important;
  }
  .tool-main .btn-sm, .tool-side .btn-sm { min-height: 38px !important; }
  .tool-main .btn-primary, .tool-side .btn-primary,
  .modal .btn-primary, .modal .btn, .modal-foot .btn { min-height: 40px !important; }
}

/* ---------- 4. ≤900px：紧凑档 ---------- */
@media (max-width: 900px) {
  .container { padding: 14px 14px 40px; }
  .tool-detail { padding-top: 78px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 12px 0; }
  .repeat-row .repeat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-row { gap: 8px; }
  .btn-row .btn { flex: 1 1 calc(50% - 4px); min-width: 0; }
}

/* ============================================================
   5. ≤768px：平板竖屏 / 大屏手机 —— 顶栏改为两行式
   ============================================================ */
@media (max-width: 768px) {
  .topbar-inner {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .logo-text i { display: none; }
  .search-box { order: 3; flex: 1 1 100%; min-width: 0; }
  .topbar-actions { gap: 6px; margin-left: auto; }
  .container { padding: 12px 12px 40px; }
  .hero { padding: 104px 14px 26px; }
  .hero-title { font-size: 22px; }
  .hero-sub { font-size: 13px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .modal { padding: 12px; align-items: flex-end; }
  .modal-box { max-height: 88vh; }
}

/* ============================================================
   6. ≤600px：手机端主力档（微信内置浏览器在这一档）
   ============================================================ */
@media (max-width: 600px) {
  /* ---------- 6.1 顶栏 ---------- */
  .topbar-inner { padding: 7px 10px; gap: 6px; }
  .logo { gap: 7px; flex-shrink: 0; }
  .logo-icon { width: 34px; height: 34px; border-radius: 9px; font-size: 18px; }
  .logo-text b { font-size: 14.5px; }
  .topbar-actions { gap: 6px; }
  /* 顶栏操作按钮：只留图标，触控目标仍 ≥38px */
  .remind-btn, .backup-btn, .profile-tip-btn {
    width: 38px; height: 38px; min-height: 38px; padding: 0;
    justify-content: center; gap: 0;
  }
  .remind-btn .remind-txt, .backup-btn .bb-txt, .profile-tip-btn .ptb-txt { display: none; }
  .remind-btn .remind-ic, .backup-btn .bb-ic, .profile-tip-btn .ptb-ic { font-size: 17px; }
  .site-switcher { max-width: 110px; font-size: 13px; }
  .search-box input { font-size: 16px; padding: 9px 30px 9px 34px; border-radius: 12px; }
  .search-icon { left: 11px; }
  .search-clear { right: 8px; width: 26px; height: 26px; }

  /* ---------- 6.2 首页 ---------- */
  .hero { padding: 96px 12px 22px; }
  .hero-title { font-size: 20px; letter-spacing: .3px; }
  .hero-sub { font-size: 12.5px; line-height: 1.7; }
  .hero-stats { gap: 6px; }
  .hs-item { padding: 10px 4px; }
  .hs-item b { font-size: 19px; }
  .hs-item span { font-size: 11px; }

  .tabs { top: 0; }
  .tabs-inner { padding: 9px 12px; gap: 7px; }
  .tab { padding: 7px 13px; font-size: 12.5px; min-height: 34px; }

  .section-title-row { flex-direction: column; align-items: flex-start; gap: 3px; padding: 0 2px; }
  .str-right { font-size: 11px; line-height: 1.6; }
  .grid { gap: 10px; }
  .card { padding: 12px; border-radius: 14px; }
  .card-icon { width: 40px; height: 40px; border-radius: 11px; font-size: 20px; }
  .card-name { font-size: 14px; margin-bottom: 4px; line-height: 1.45; }
  .card-desc { font-size: 11.5px; line-height: 1.6; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .card-tags .tag { font-size: 10.5px; padding: 2px 6px; }
  .card-online { font-size: 10.5px; padding: 2px 7px; }
  .card-fav { font-size: 17px; width: 34px; height: 34px; }

  .recent-list { gap: 7px; }
  .recent-chip { padding: 6px 10px; font-size: 12px; min-height: 34px; }
  .role-board { margin: 0 12px; }
  .rb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rb-card { padding: 10px; }

  /* ---------- 6.3 工具详情页头部（修复：窄屏被挤成竖条） ---------- */
  .tool-detail { padding-top: 66px; }
  .tool-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  /* 第一行：返回 + 打印 */
  .btn-back { order: 1; flex: 0 0 auto; font-size: 12.5px; padding: 8px 12px; min-height: 38px; }
  .tool-detail-head > #btnPrintPage { order: 2; flex: 0 0 auto; font-size: 12.5px; padding: 8px 12px; min-height: 38px; }
  /* 第二行：图标 + 标题 + 标签（占满整行，杜绝逐字换行） */
  .tool-head-main {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }
  .tool-head-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; flex: 0 0 44px; }
  .tool-head-text { flex: 1 1 160px; min-width: 0; }
  .tool-head-text h1 { font-size: 17px; line-height: 1.35; letter-spacing: 0; word-break: break-word; margin: 0; }
  .tool-head-text .tool-head-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
  .tool-head-text .tool-head-tags .tag {
    font-size: 10.5px; padding: 2px 7px; white-space: nowrap;
  }
  /* 第三行：收藏 / 分享 —— 各占半宽，等高等宽，触控 ≥42px */
  .tool-head-main > .btn {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    min-height: 42px;
    padding: 8px 6px;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---------- 6.4 按钮与触控目标 ---------- */
  .btn { padding: 10px 14px; font-size: 13.5px; min-height: 42px; border-radius: 11px; }
  .btn-sm { min-height: 36px; padding: 7px 12px; font-size: 12.5px; }
  .btn-row { gap: 8px; }
  .btn-row .btn { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .btn-row .btn.wide, .btn-row .btn.full { flex: 1 1 100%; }
  /* 按钮内文字过长时截断而非撑破 */
  .btn { max-width: 100%; }
  /* 表格内的行内小按钮仍保证可点 */
  .tool-main td .btn, .tool-main td button { min-height: 34px; }

  /* ---------- 6.5 面板与表单 ---------- */
  .panel { padding: 14px 13px; border-radius: 14px; }
  .panel-title { font-size: 14.5px; }
  .form-section { margin-bottom: 14px; }
  .field { gap: 5px; }
  .field label { font-size: 13px; line-height: 1.5; }
  .field .hint { font-size: 11.5px; line-height: 1.6; }
  .input, .select, .textarea { padding: 10px 12px; border-radius: 10px; }
  .textarea { min-height: 92px; line-height: 1.65; }
  .repeat-row .repeat-grid { grid-template-columns: minmax(0, 1fr); }
  .option-pills { flex-wrap: wrap; gap: 7px; }
  .option-pills .pill { min-height: 36px; padding: 7px 12px; font-size: 12.5px; }

  /* ---------- 6.6 结果与数据展示 ---------- */
  .result-panel { padding: 14px 13px; }
  .result-big { font-size: 30px; }
  .ref-table, .result-panel table { font-size: 12px; }
  .ref-table th, .ref-table td, .result-panel table th, .result-panel table td { padding: 7px 8px; }

  /* ---------- 6.7 弹窗与 Toast ---------- */
  .modal { padding: 10px; align-items: flex-end; }
  .modal-box { max-height: 86vh; width: 100%; border-radius: 16px 16px 12px 12px; }
  .modal-head { padding: 12px 14px; position: sticky; top: 0; background: #fff; z-index: 2; }
  .modal-head h3 { font-size: 15.5px; }
  .modal-body { padding: 10px 14px 16px; -webkit-overflow-scrolling: touch; }
  .modal-foot { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1 1 auto; }

  /* ---------- 6.8 页脚 ---------- */
  .footer-inner { padding: 22px 14px calc(84px + env(safe-area-inset-bottom)); }
  .footer-disclaimer { font-size: 11.5px; line-height: 1.8; padding: 12px 13px; }
  .footer-links { font-size: 12px; line-height: 2; }
  .footer-links a { display: inline-block; padding: 3px 0; }
  .footer-seo { font-size: 11px; line-height: 1.85; }
  .footer-copy { font-size: 11.5px; }

  /* ---------- 6.9 油价工具（op-*） ---------- */
  .tool-main .op-statusbar { gap: 6px 10px; font-size: 11.5px; padding: 8px 10px; }
  .tool-main .op-focus { font-size: 12.5px; padding: 9px 10px; line-height: 1.6; }
  .tool-main .op-qcard { padding: 12px; }
  .tool-main .op-qcard .q-last { font-size: 26px; }
  .tool-main .op-qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
  .tool-main .op-qgrid span { font-size: 11px; }
  .tool-main .op-qgrid b { font-size: 12px; }
  .tool-main .op-sec { font-size: 13.5px; }
  .tool-main .op-sec small { font-size: 11px; }
  .tool-main .op-tblwrap { border-radius: 10px; }
  .tool-main .op-tbl { font-size: 12px; min-width: 560px; }
  .tool-main .op-pred { padding: 13px; }
  .tool-main .op-pred-num { font-size: 24px; }
  .tool-main .op-pred-head { flex-wrap: wrap; gap: 8px; }
  .tool-main .op-scen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .tool-main .op-scen div { padding: 8px 7px; }
  .tool-main .op-scen b { font-size: 12.5px; }
  .tool-main .op-scen span { font-size: 11px; }
  .tool-main .op-backtest { flex-wrap: wrap; }
  .tool-main .op-backtest div { font-size: 11.5px; padding: 5px 10px; }
  .tool-main .op-tech { padding: 12px; }
  .tool-main .op-mtr { flex-wrap: wrap; gap: 5px; }
  .tool-main .op-mtr span { font-size: 11.5px; padding: 4px 8px; margin-right: 0; }
  .tool-main .op-adjust { padding: 12px; }
  .tool-main .op-adjust-row { font-size: 12.3px; gap: 4px 10px; flex-wrap: wrap; }
  .tool-main .op-arole { padding: 12px; }
  .tool-main .op-arole h4 { font-size: 13.5px; }
  .tool-main .op-arole ul { font-size: 12.3px; line-height: 1.8; }
  .tool-main .op-strategy { font-size: 12.3px; padding: 10px; }
  .tool-main .op-events { padding: 12px; }
  .tool-main .op-events ul { font-size: 12.3px; line-height: 1.9; }
  .tool-main .op-note, .tool-main .op-warn { font-size: 12px; padding: 9px 10px; line-height: 1.7; }
  .tool-main .op-region { padding: 10px; }
  .tool-main .op-region .rchip { padding: 5px 11px; font-size: 11.5px; min-height: 32px; display: inline-flex; align-items: center; }
  .tool-main .op-region table { font-size: 12px; min-width: 440px; }
  .tool-main .op-region th, .tool-main .op-region td { padding: 6px 8px; }
  .tool-main .op-region .rnote { font-size: 11px; }

  /* ---------- 6.10 风险警示工具（ra-*） ---------- */
  .tool-main .ra-card { padding: 12px 13px; }
  .tool-main .ra-head { padding: 12px 13px; }
  .tool-main .ra-title { font-size: 15.5px; line-height: 1.45; }
  .tool-main .ra-ov { min-width: calc(50% - 4px); padding: 8px 6px; }
  .tool-main .ra-ov b { font-size: 18px; }
  .tool-main .ra-ov span { font-size: 10.5px; }
  .tool-main .ra-item-hd { padding: 9px 12px 7px; flex-wrap: wrap; gap: 5px; }
  .tool-main .ra-item-brief { font-size: 12.3px; padding: 0 12px 7px; line-height: 1.7; }
  .tool-main .ra-item-meta { font-size: 11px; padding: 0 12px 7px; line-height: 1.7; }
  .tool-main .ra-item-title { font-size: 13.5px; line-height: 1.5; }
  .tool-main .ra-filters { gap: 5px; flex-wrap: wrap; }
  .tool-main .ra-chip { padding: 6px 11px; font-size: 12px; min-height: 34px; display: inline-flex; align-items: center; }
  .tool-main .ra-legend { gap: 8px; flex-wrap: wrap; }
  .tool-main .ra-lg { font-size: 11.5px; }
  .tool-main .ra-sharetext { font-size: 11.5px; min-height: 120px; }
  .tool-main .ra-badge { font-size: 10.5px; }

  /* ---------- 6.11 商情工具（bi-*） ---------- */
  .tool-main .bi-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .tool-main .bi-card { padding: 12px 13px; }
  .tool-main .bi-chip { min-height: 34px; display: inline-flex; align-items: center; padding: 6px 11px; }
  .tool-main .bi-kws { gap: 6px; flex-wrap: wrap; }
  .tool-main .bi-bar { flex-wrap: wrap; gap: 8px; }
  .tool-main .bi-btn { flex: 1 1 calc(50% - 4px); min-height: 42px; }
  .tool-main .bi-basis, .tool-main .bi-alert { font-size: 11.5px; line-height: 1.75; }

  /* ---------- 6.12 触控目标硬底线（覆盖工具自身样式，40/42px 起步） ---------- */
  .tool-main button:not(.btn):not(.m-backtop),
  .tool-side button:not(.btn) {
    min-height: 32px !important;
    min-width: 32px !important;
  }
  .tool-main .btn:not(.btn-sm), .tool-side .btn:not(.btn-sm),
  .btn-row .btn, .tool-head-main > .btn, #btnPrintPage, .btn-back {
    min-height: 42px !important;
  }
  .tool-main .btn-sm, .tool-side .btn-sm { min-height: 38px !important; }
  .tool-main td .btn, .tool-main td button { min-height: 34px !important; }
  /* 主操作按钮（含以 btn-sm 形态出现的主操作）一律 42px：主操作必须好点 */
  .tool-main .btn-primary, .tool-side .btn-primary,
  .modal .btn-primary, .modal-foot .btn { min-height: 42px !important; }
  /* 弹窗内按钮统一触控友好（含首次进入的引导弹窗） */
  .modal .btn { min-height: 42px !important; }
  .modal-foot { display: flex; flex-wrap: wrap; gap: 8px; }
  .modal-foot .btn { flex: 1 1 calc(50% - 4px); }

  /* ---------- 6.13 窄屏布局修正（固定 px 多列 / 大 min-width） ---------- */
  /* 节日海报生成器：桌面双栏（300px 模板栏 + 预览）→ 手机必须单栏 */
  .tool-main .gst-pm {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    min-height: 0 !important;
  }
  .tool-main .gst-pm-tpls {
    position: static !important; top: auto !important;
    max-height: none !important; min-height: 0 !important;
  }
  .tool-main .gst-pm-edit { max-height: none !important; }
  .tool-main .gst-pm-preview { min-height: 0 !important; padding: 10px !important; }
  /* 固定 min-width 的 flex 子项在窄屏必须允许收缩，否则撑破容器 */
  .tool-main .ev-opt { flex-wrap: wrap; }
  .tool-main .ev-opt-text, .tool-main .ev-opt-note,
  .tool-main .dq-qr-info, .tool-main .ev-result-meta,
  .tool-main .ls-caliber .tip, .tool-main .cl-ct { min-width: 0 !important; }
  /* 装饰性元素不得撑出容器 */
  .tool-main .beam, .tool-main [class*="-beam"], .tool-main [class*="-deco"] {
    max-width: 100% !important;
  }
  .tool-main .gst-pm-preview { overflow: hidden; }

  /* ---------- 6.14 小字号可读性下限（< 11px 一律抬到 11px） ---------- */
  .card-online,
  .member-entry em, .plan-card .hot,
  .tool-main .orm-grade, .tool-main .orm-note, .tool-main .audit-badge,
  .tool-main .orm-cmp-name em, .tool-main .orm-cmp-input-wrap i,
  .tool-main .av-red-flag, .tool-main .cl-proj-sub, .tool-main .cl-rec-tag,
  .tool-main .cmp-lv, .tool-main .cmp-over, .tool-main .cmp-left,
  .tool-main .hz-dp, .tool-main .hz-domain-cut, .tool-main .f-overdue,
  .tool-main .op-region .src-o, .tool-main .op-region .src-e,
  .tool-main .pm-tpl-count, .tool-main .pm-hint, .tool-main .tpl-label,
  .tool-main .sd-note-cell, .tool-main .si-dir, .tool-main .ev-opt-note,
  .tool-main .sp-dot-wrap em { font-size: 11px !important; }
}

/* ============================================================
   7. ≤420px / ≤380px：小屏手机精调（iPhone SE / 320px 宽）
   ============================================================ */
@media (max-width: 420px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .hero-title { font-size: 19px; }
  .hero-stats { flex-wrap: wrap; }
  .tool-main .op-pred-head { gap: 8px; }
  .tool-main .op-pred-dir { font-size: 14px; padding: 4px 10px; }
  .tool-main .op-scen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-main .op-adjust-row .tag { white-space: nowrap; }
  .tool-main .bi-kpis { grid-template-columns: minmax(0, 1fr) !important; }
  /* 头部按钮：小屏仍并排两列（收藏 / 分享），实测 320px 也不截断；
     只有 ≤360px 再退成整行，避免个别工具的长按钮文案被吃掉 */
  .tool-head-main > .btn { flex: 1 1 calc(50% - 5px); padding: 8px 8px; font-size: 12px; }
}
@media (max-width: 360px) {
  .tool-head-main > .btn { flex: 1 1 100%; }
  .topbar-inner { padding: 6px 8px; }
  .logo-text b { font-size: 13.5px; }
  .container { padding: 10px 10px 36px; }
  .tool-detail { padding-top: 62px; }
  .hero { padding: 88px 10px 20px; }
  .hero-title { font-size: 18px; }
  .btn-row .btn { flex: 1 1 100%; }
  .tool-main .op-qgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 8. 底部快捷导航（触控 + 安全区） ---------- */
@media (max-width: 900px) {
  .bottom-nav .bn-item { min-height: 52px; }
}

/* ---------- 9. 今日待办 / 提醒中心 ---------- */
@media (max-width: 520px) {
  .today-box { max-width: 100%; margin: 8px 10px 0; padding: 10px 11px; border-radius: 10px; }
  .today-box .td-title { font-size: 14px; }
  .today-box .td-num, .today-box .td-high { font-size: 11px; padding: 2px 8px; }
  .today-box .td-row { padding: 7px 8px; border-radius: 8px; gap: 6px; }
  .today-box .td-tx b {
    font-size: 12.5px; white-space: normal;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;
  }
  .today-box .td-tx em {
    font-size: 11px; white-space: normal;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;
  }
  .rm-acts { gap: 5px; }
  .rm-acts .btn { padding: 4px 9px; font-size: 11.5px; min-height: 32px; }
}

/* ---------- 10. 空状态 / 异常反馈友好化 ---------- */
@media (max-width: 600px) {
  .empty { padding: 54px 16px; }
  .empty-icon { font-size: 36px; }
  .empty p { font-size: 13px; line-height: 1.7; }
  .tool-main .bi-empty, .tool-main .op-empty, .tool-main .ra-empty { font-size: 12.5px; line-height: 1.8; }
}

/* ---------- 11. 动效降级（弱机型 / 省电模式） ---------- */
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- 12. 横向锁死：任何情况下不出现整页横向滚动条 ---------- */
@media (max-width: 1024px) {
  #homeView, #toolView, .container, .tool-detail, .tool-main, .tool-side { max-width: 100%; }
}

/* ---------- 13. 移动端「回到顶部」 ---------- */
#mBackTop.m-backtop {
  position: fixed;
  right: 14px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 140;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(13,30,64,.12);
  background: rgba(255,255,255,.96);
  color: #334155; font-size: 19px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(20,45,90,.18);
  cursor: pointer; padding: 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#mBackTop.m-backtop.hidden { display: none; }
#mBackTop.m-backtop:active { background: #fff3e4; color: #ea580c; }
@media (min-width: 641px) and (max-width: 1024px) {
  #mBackTop.m-backtop { bottom: calc(20px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1025px) {
  #mBackTop.m-backtop { display: none; }
}

/* ============================================================
   14. 加载中骨架屏 / 加载失败提示（按需加载的配套反馈）
   —— 与 media query 无关，桌面端同样受益（避免长白屏）
   ============================================================ */
.m-skeleton { display: flex; flex-direction: column; gap: 12px; }
.m-sk-line, .m-sk-block {
  background: linear-gradient(90deg, #eef2f7 25%, #e2e9f3 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: m-sk-shine 1.4s ease infinite;
  border-radius: 10px;
}
.m-sk-line { height: 15px; }
.m-sk-line.w40 { width: 40%; }
.m-sk-line.w60 { width: 60%; }
.m-sk-line.w90 { width: 90%; }
.m-sk-block { height: 150px; }
.m-sk-tip { font-size: 12.5px; color: var(--muted, #8b93a5); text-align: center; margin: 2px 0 0; }
@keyframes m-sk-shine {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.m-loadfail { text-align: center; }
.m-loadfail .m-lf-icon { font-size: 34px; margin-bottom: 6px; }
.m-loadfail b { display: block; font-size: 15.5px; color: var(--text, #1b2434); margin-bottom: 6px; }
.m-loadfail p { font-size: 12.5px; color: var(--desc, #5b6577); line-height: 1.75; margin: 0 0 14px; }
.m-loadfail .btn-row { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .m-sk-line, .m-sk-block { animation: none; }
}

/* ============================================================
   15. 首页工作台 + 工具页内链（2026-10-27）
   今日三卡 / 角色入口 / 常用工具 / 任务筛选 / 面包屑 / 相关工具
   ============================================================ */
@media (max-width: 640px) {
  .home-sec .container { padding: 8px 12px 4px; }
  .today-grid { grid-template-columns: 1fr; gap: 10px; }
  .today-card { min-height: 56px; }
  .role-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .role-card { padding: 11px 10px; gap: 8px; min-height: 48px; }
  .rc-num { display: none; }
  .rc-txt i { display: none; }
  .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .feat-card { padding: 9px 10px; min-height: 46px; min-width: 0; }
  .fc-txt i { display: none; }
  .filter-bar { overflow-x: auto; flex-wrap: nowrap; padding: 7px 8px; scrollbar-width: none; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .task-tabs { flex-wrap: nowrap; }
  .filter-clear { flex: none; min-height: 32px; }
  .filter-status { display: none; }
  .crumb { font-size: 11.5px; margin-bottom: 8px; }
  .related-grid { grid-template-columns: 1fr; gap: 8px; }
  .related-wrap { margin-top: 22px; padding-top: 16px; }
  .related-head { align-items: flex-start; flex-direction: column; gap: 4px; }
}