/* =============================================================================
   星盾 · 移动端排版契约  mobile.css
   -----------------------------------------------------------------------------
   为什么存在：
     起因是移动端「乱 + AI 感强」。实测根因不是配色，而是结构失控 ——
     · 15 个碎断点（400/420/480/560/600/640/768/820/900/901/1024/1080/1240…）
     · 321 处 !important 的「谁最后加载谁赢」
     · 间距用了 27 个不同 px 值（1→52），毫无节奏
     · 每个迭代版本都在文件尾部追加一个 @media，从不收敛

   定位：
     本文件在 deskin.css 之后加载，是移动端「排版」的唯一契约层。
     · 只管：间距 / 字号 / 行高 / 圆角 / 栅格列数 / 触控尺寸
     · 不碰：颜色令牌（颜色系统归 deskin.css 的墨青 · 赤金）
   基线：
     4px 网格 · 间距 6 档 · 字阶 6 档 · 圆角 3 档 · 断点 2 个（768 / 380）
   回滚：
     删除三个入口 HTML 里的 mobile.css 引用即可，零副作用。
   ============================================================================= */

/* =============================================================================
   1. 排版令牌 —— 作用域锁死在 ≤768px，绝不上溢到桌面
   ============================================================================= */
@media (max-width: 820px) {
  :root {
    /* 间距：4px 网格，只保留 6 档 */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
    --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;

    /* 字阶：只保留 6 档 */
    --fs-xs: 11px;   /* 极小注脚 */
    --fs-sm: 12px;   /* 辅助信息 */
    --fs-md: 13.5px; /* 正文 */
    --fs-lg: 15px;   /* 卡片标题 */
    --fs-xl: 17px;   /* 页面标题 */
    --fs-2xl: 20px;  /* 数值强调 */

    /* 行高 */
    --lh-tight: 1.3;
    --lh-base: 1.55;

    /* 圆角：3 档 + 胶囊 */
    --r-ctl: 10px;   /* 控件：输入框 / 按钮 / 小方块 */
    --r-card: 14px;  /* 卡片 */
    --r-lg: 16px;    /* 弹窗 / 大容器 */
    --r-pill: 999px; /* 标签 / 胶囊 */

    /* 节奏（唯一真相源） */
    --gutter: 14px;     /* 内容区左右留白 */
    --stack: 12px;      /* 模块之间的垂直间距 */
    --card-gap: 10px;   /* 卡片与卡片之间 */
    --pad-card: 14px;   /* 卡片内边距（四周统一） */
    --ctl-h: 40px;      /* 触控控件高度（≥40 才够拇指） */
  }
}

/* =============================================================================
   2. 基线：字体渲染与数字对齐
      —— 数字统一 tabular-nums，金额/统计列不再「跳字」
   ============================================================================= */
@media (max-width: 820px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--lh-base);
  }
  /* 数值类元素统一等宽数字 */
  .stat-value, .stat-sub, .money-line, .mini-stat b, .pager-info,
  .kv-v, .app-stats, table.tbl td, table.data td {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }
  /* 长文本一律允许换行，杜绝横向溢出 */
  .card-title, .m-title, .app-name, .kv-v, .enh-mcard-val, .page-sub {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* =============================================================================
   3. 内容区与模块节奏 —— 全站统一 14px 留白 / 12px 模块间距
   ============================================================================= */
@media (max-width: 820px) {
  .content {
    padding: var(--sp-3) var(--gutter) calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* 模块之间：统一垂直节奏，不再各写各的 margin */
  .content > * + * {
    margin-top: var(--stack);
  }
  .card { margin: 0 !important; border-radius: var(--r-card) !important; }
  .card + .card { margin-top: var(--stack) !important; }
  .card-head,
  .card-body,
  .card-foot {
    padding-left: var(--pad-card) !important;
    padding-right: var(--pad-card) !important;
  }
  .card-head  { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
  .card-body  { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
  .card-foot  { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
}

/* =============================================================================
   4. 页头 —— 标题独占一行，操作按钮组换到第二行，不再挤压标题
   ============================================================================= */
@media (max-width: 820px) {
  .page-head {
    display: block !important;
    margin-bottom: var(--sp-3) !important;
    padding-bottom: var(--sp-3) !important;
    border-bottom: 1px solid var(--line, rgba(60,70,120,.12));
  }
  .page-title {
    font-size: var(--fs-xl) !important;
    line-height: var(--lh-tight) !important;
    font-weight: 650 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
  }
  .page-title::before {
    width: 3px !important;
    height: 15px !important;
    margin-right: 8px !important;
  }
  .page-sub {
    font-size: var(--fs-sm) !important;
    margin-top: var(--sp-1) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
  }
  /* 操作按钮组：整行铺开、可换行 */
  .page-head .btn-group,
  .page-head .page-actions,
  .head-actions,
  .action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: var(--sp-2) !important;
    margin-top: var(--sp-3) !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .page-head .btn-group .btn,
  .page-actions .btn { flex: 0 0 auto !important; }
}

/* =============================================================================
   5. 工具栏 —— 搜索框独占一行，筛选控件自动换行，杜绝横向滑条
   ============================================================================= */
@media (max-width: 820px) {
  .toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--sp-2) !important;
    margin-bottom: var(--stack) !important;
    overflow: visible !important;
  }
  .toolbar .search-box {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .toolbar .search-box .input,
  .toolbar input.input {
    height: var(--ctl-h) !important;
    width: 100% !important;
  }
  .toolbar .select,
  .toolbar .select.inline {
    flex: 1 1 calc(50% - var(--sp-1)) !important;
    height: var(--ctl-h) !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .toolbar .btn {
    flex: 0 0 auto !important;
    height: var(--ctl-h) !important;
  }
  .toolbar .spacer { display: none !important; }
}

/* =============================================================================
   6. 卡片头部 / 标题
   ============================================================================= */
@media (max-width: 820px) {
  .card-title { font-size: var(--fs-lg) !important; line-height: var(--lh-tight) !important; }
  .card-head .card-title { font-size: var(--fs-lg) !important; }
  .cfg-group-title { font-size: var(--fs-md) !important; }
}

/* =============================================================================
   7. 统计卡 —— 稳定两列网格，信息层级收敛
   ============================================================================= */
@media (max-width: 820px) {
  .stat-grid,
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--sp-2) !important;
    margin-bottom: var(--stack) !important;
  }
  .stat-card {
    padding: var(--sp-3) !important;
    gap: var(--sp-2) !important;
    border-radius: var(--r-card) !important;
  }
  .stat-icon {
    width: 34px !important; height: 34px !important;
    border-radius: var(--r-ctl) !important;
  }
  .stat-icon svg { width: 16px !important; height: 16px !important; }
  /* 注意：必须用 .stat-card 后代选择器，才能与 enhance.css 的
     .stat-card .stat-value{...!important} 同特异性并在其后胜出 */
  .stat-card .stat-label { font-size: var(--fs-sm) !important; margin-bottom: 2px !important; }
  .stat-card .stat-value { font-size: var(--fs-2xl) !important; line-height: 1.2 !important; }
  .stat-card .stat-sub   { font-size: var(--fs-xs) !important; margin-top: 2px !important; }

  /* mini 统计：2 列网格，不再横向滚动 */
  .mini-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--sp-2) !important;
    overflow: visible !important;
  }
  .mini-stat { width: auto !important; padding: var(--sp-3) !important; border-radius: var(--r-ctl) !important; }
  .mini-stat b { font-size: var(--fs-xl) !important; }
  .mini-stat span { font-size: var(--fs-xs) !important; }
}

/* =============================================================================
   8. 表单 —— label 回到输入框上方，输入框满宽；iOS 不再自动放大
   ============================================================================= */
@media (max-width: 820px) {
  .form-grid,
  .modal-body .form-grid {
    display: block !important;
  }
  .field,
  .cfg-form .field,
  .modal .field {
    display: block !important;
    margin-bottom: var(--sp-4) !important;
  }
  .field label,
  .field .field-label {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    font-size: var(--fs-md) !important;
    font-weight: 550 !important;
    color: var(--text-2, #444) !important;
    margin-bottom: 6px !important;
    line-height: var(--lh-tight) !important;
  }
  .field .input,
  .field select.input,
  .field .select,
  .field select.select,
  .field textarea.input {
    width: 100% !important;
    min-width: 0 !important;
    /* 关键：≥16px 才会阻止 iOS Safari 聚焦时自动放大页面 */
    font-size: 16px !important;
    min-height: var(--ctl-h) !important;
    padding: 9px 12px !important;
    border-radius: var(--r-ctl) !important;
  }
  .field textarea.input { min-height: 88px !important; }
  .field .hint { font-size: var(--fs-xs) !important; margin-top: 5px !important; }
  /* 仅含开关的字段：label 与开关同行、两端对齐 */
  .field:has(.switch:only-of-type) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .field:has(.switch:only-of-type) label { margin-bottom: 0 !important; }
  .field.full { display: block !important; }
}

/* =============================================================================
   9. 按钮 / 图标按钮 —— 统一 40px 触控高度，去掉渐变与上浮
   ============================================================================= */
@media (max-width: 820px) {
  .btn {
    min-height: var(--ctl-h) !important;
    padding: 0 16px !important;
    font-size: var(--fs-md) !important;
    border-radius: var(--r-ctl) !important;
    background-image: none !important;
    letter-spacing: normal !important;
  }
  .btn:active { transform: scale(.98) !important; }
  .btn.sm { min-height: 32px !important; height: 32px !important; padding: 0 12px !important; font-size: var(--fs-sm) !important; }
  .icon-btn {
    width: var(--ctl-h) !important; height: var(--ctl-h) !important;
    border-radius: var(--r-ctl) !important;
  }
  /* 列表行内操作按钮：紧凑但不小于 32px */
  .td-actions .btn,
  .mcard-actions .btn,
  .col-act .btn {
    min-height: 32px !important; min-width: 32px !important;
    padding: 0 10px !important;
    font-size: var(--fs-sm) !important;
    border-radius: 8px !important;
  }
}

/* =============================================================================
   10. 列表 / 表格 —— 保留横向滑动，但统一单元格节奏与字号
   ============================================================================= */
@media (max-width: 820px) {
  .table-wrap {
    border-radius: var(--r-card) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table.tbl, table.data { font-size: var(--fs-md) !important; }
  table.tbl thead th,
  table.data thead th {
    padding: 10px 12px !important;
    font-size: var(--fs-sm) !important;
    white-space: nowrap !important;
  }
  table.tbl tbody td,
  table.data tbody td {
    padding: 10px 12px !important;
    line-height: var(--lh-base) !important;
  }
  /* 移动卡片（若页面仍渲染） */
  .m-card { padding: var(--pad-card) !important; border-radius: var(--r-card) !important; }
  .m-title { font-size: var(--fs-lg) !important; }
  .m-card-grid { gap: var(--sp-1) var(--sp-3) !important; font-size: var(--fs-md) !important; }
  .m-card-grid > div > span { font-size: var(--fs-sm) !important; }
  .mcard-row { gap: var(--sp-2) !important; }
  .mcard-row .k { width: 64px !important; }
}

/* =============================================================================
   11. 应用卡片 / 图标卡
   ============================================================================= */
@media (max-width: 820px) {
  .app-grid { grid-template-columns: 1fr !important; gap: var(--card-gap) !important; }
  .app-card { padding: var(--pad-card) !important; gap: var(--sp-2) !important; border-radius: var(--r-card) !important; }
  .app-avatar { width: 40px !important; height: 40px !important; border-radius: var(--r-ctl) !important; font-size: 16px !important; }
  .app-name { font-size: var(--fs-lg) !important; }
  .app-stats { gap: var(--sp-3) !important; font-size: var(--fs-sm) !important; }
  .app-stats b { font-size: var(--fs-md) !important; }
}

/* =============================================================================
   12. 分页器 —— 单行可滑，按钮 >=36px
   ============================================================================= */
@media (max-width: 820px) {
  .card-foot { padding: var(--sp-3) var(--pad-card) !important; }
  .pager {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
  }
  .pager-info { font-size: var(--fs-sm) !important; white-space: nowrap !important; margin-right: var(--sp-2) !important; }
  .pager-btn, .pager button {
    min-width: 36px !important; min-height: 36px !important;
    height: 36px !important;
    padding: 0 8px !important;
    font-size: var(--fs-md) !important;
    border-radius: var(--r-ctl) !important;
    flex: none !important;
  }
}

/* =============================================================================
   13. 弹窗 —— 底部抽屉式，统一内边距与圆角
   ============================================================================= */
@media (max-width: 820px) {
  .modal {
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  }
  .modal-head { padding: var(--sp-4) var(--sp-4) var(--sp-3) !important; }
  .modal-head h3 { font-size: var(--fs-lg) !important; }
  .modal-body { padding: var(--sp-4) !important; }
  .modal-foot { padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)) !important; gap: var(--sp-2) !important; }
  .confirm-mask .modal { border-radius: var(--r-card) !important; }
}

/* =============================================================================
   14. 标签 / 胶囊 / 徽标
   ============================================================================= */
@media (max-width: 820px) {
  .tag, .badge {
    border-radius: var(--r-pill) !important;
    font-size: var(--fs-xs) !important;
    padding: 3px 10px !important;
    white-space: nowrap !important;
    letter-spacing: normal !important;
  }
}

/* =============================================================================
   15. KV 信息网格 / 树形 / 配置组
   ============================================================================= */
@media (max-width: 820px) {
  .kv-grid { gap: var(--sp-2) !important; }
  .kv-grid .kv { padding: var(--sp-3) !important; border-radius: var(--r-ctl) !important; }
  .kv-k { font-size: var(--fs-sm) !important; margin-bottom: 3px !important; }
  .kv-v { font-size: var(--fs-md) !important; }
  .tree-row { padding: var(--sp-2) var(--sp-3) !important; gap: 6px !important; }
  .tree-name { font-size: var(--fs-md) !important; }
  .cfg-group { margin-bottom: var(--sp-4) !important; }
  .cfg-group-title {
    font-size: var(--fs-md) !important;
    padding-bottom: 6px !important;
    margin-bottom: var(--sp-3) !important;
  }
}

/* =============================================================================
   16. 底部导航
   ============================================================================= */
@media (max-width: 820px) {
  .bottom-nav .nav-btn,
  .bn-item { font-size: var(--fs-xs) !important; }
}

/* =============================================================================
   17. 去 AI 感 —— 逐条拆除模板化痕迹
   ============================================================================= */
@media (max-width: 820px) {
  /* (1) 撤掉「所有下拉框文本强制居中」这一 AI 默认：恢复左对齐与正常内边距 */
  select,
  select.input,
  select.select,
  .field select,
  .field .select,
  .app-select .select {
    text-align: left !important;
    text-align-last: auto !important;
    padding-left: 12px !important;
    padding-right: 28px !important;
    background-position: right 10px center !important;
  }
  /* (2) 卡片不再「悬浮上浮」——移动端没有 hover，保留位移只会造成点击瞬移 */
  .card:hover,
  .app-card:hover,
  .stat-card:hover,
  .stat-click:hover,
  .mini-stat:hover,
  .kv-grid .kv:hover {
    transform: none !important;
  }
  /* (3) 去掉入场淡入上浮动画，列表滚动更利落 */
  #page-content,
  #page-content > *,
  .card,
  .app-card,
  .stat-card {
    animation: none !important;
  }
  /* (4) 焦点态统一：赤金细环，不发光、不带紫 */
  :focus-visible {
    outline: 2px solid var(--accent, #a9762b) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }
  .input:focus,
  .select:focus,
  textarea.input:focus {
    border-color: var(--brand, #155e6e) !important;
    box-shadow: 0 0 0 3px var(--brand-weak, rgba(21,94,110,.14)) !important;
  }
  /* (5) 眉标类全大写/宽字距一律收掉（中英文都不该被拉宽） */
  [class*="eyebrow"],
  .brand-sub,
  .card-eyebrow,
  .section-label {
    text-transform: none !important;
    letter-spacing: normal !important;
  }
  /* (6) 滚动条在移动端保持隐藏，但保留可滚性 */
  .toolbar::-webkit-scrollbar,
  .pager::-webkit-scrollbar,
  .table-wrap::-webkit-scrollbar,
  .mini-stats::-webkit-scrollbar,
  .m-card-act::-webkit-scrollbar {
    display: none !important;
  }
}

/* =============================================================================
   18-pre. .filter-selects / .filter-selects-wrap 全断点基础规则
   桌面端（>820px）作为 toolbar 的行内 flex item，内部下拉横向排布，
   与原生 flex 行为一致；箭头按钮在桌面端隐藏（内容无需滚动）；
   移动端由下方 §18 的 @media 覆盖为独占一行 + 箭头显示。
   ============================================================================= */
.card-body.filter-band .toolbar .filter-selects-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0;
}
.card-body.filter-band .toolbar .filter-selects {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  min-width: 0;
}
/* 箭头按钮默认隐藏，移动端 §18 显示 */
.card-body.filter-band .toolbar .fs-arrow {
  display: none !important;
}

/* =============================================================================
   18. 卡密管理 · 筛选栏（filter-band toolbar）专项修复 —— 分区单行方案 v5
   -----------------------------------------------------------------------------
   根因（级联审计确诊）：
     style.css 合并块给它 display:grid + grid-column 放位；
     本文件 §5 又给 .toolbar 加了 display:flex !important —— 两套布局引擎杂交。
   方案演进：
     v2（单行 + 横滑）：375px 实测内容总宽 717px，右半边整体被截出屏幕——
        物理上 7 个控件不可能塞进一行，方案废弃。
     v3（分区单行）：375px 模拟正常，但真机 CSS 视口仅 ~310px：
        ① search-box flex-basis:auto 按内容撑 → 重置按钮被挤下单行；
        ② 下拉 3 列均分每列 76px，减去左右 padding 仅剩 36px → 文字截成单字。
     v4（分区单行 + 小屏加固）：下拉 2 列均分（2+2+1）。
     v5（用户要求：下拉横着排成一排）：
        JS 端给 5 个下拉包一层 .filter-selects 容器；
        CSS 移动端：
          第一行 = 搜索框 + 重置按钮（固定）
          第二行 = .filter-selects 独占一行，内部 5 个下拉 nowrap 横排 +
                   横向滚动（右缘渐隐提示可滑）。
        桌面端：.filter-selects 保持行内（display:contents 或行内 flex），
                与原生 flex 行为一致。
    ============================================================================= */
@media (max-width: 820px) {
  /* 主容器：唯一引擎 flex + 换行 */
  .card-body.filter-band .toolbar {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: wrap !important;
    gap: var(--sp-2) !important;
    margin-bottom: 0 !important;
    align-items: center !important;
    overflow: visible !important;   /* 撤销 v2 的横滑裁切 */
  }
  /* 第一行：搜索框固定基准 + 弹性收缩，保证与重置按钮同行（310px 视口实测通过） */
  .card-body.filter-band .toolbar .search-box {
    order: 1 !important;
    grid-column: auto !important;   /* 清掉 grid 残留 */
    flex: 1 1 140px !important;     /* 固定基准，不用 auto（auto 会按内容撑爆一行） */
    width: auto !important;
    min-width: 0 !important;        /* 允许收缩到 gap 之外全让位 */
    max-width: none !important;
  }
  .card-body.filter-band .toolbar .search-box .input {
    /* 不动 font-size：必须保持 ≥16px 防 iOS 聚焦放大（§2 规则） */
    padding-left: 30px !important;
    padding-right: 10px !important;
  }
  /* 重置按钮：与搜索框同行、行尾右侧 */
  .card-body.filter-band .toolbar .btn {
    order: 2 !important;
    grid-column: auto !important;
    justify-self: auto !important;
    flex: 0 0 auto !important;
    height: var(--ctl-h) !important;
    margin-left: 0 !important;
    white-space: nowrap;
  }
  /* spacer：强制换行符——占满一整行，把 .filter-selects 挤到第二行 */
  .card-body.filter-band .toolbar .spacer {
    order: 3 !important;
    display: block !important;
    flex: 1 1 100% !important;
    height: 0 !important;
    min-width: 100% !important;
  }
  /* 第二行：下拉容器独占一行，内部 5 个下拉横排 + 横向滚动 + 箭头按钮 */
  .card-body.filter-band .toolbar .filter-selects-wrap {
    order: 4 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .card-body.filter-band .toolbar .filter-selects {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--sp-2) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;       /* 允许横向 pan（滚动轨道无 select 时可靠） */
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .card-body.filter-band .toolbar .filter-selects::-webkit-scrollbar {
    display: none;
  }
  /* 滚动箭头按钮：移动端显示，桌面端由 §18-pre 隐藏 */
  .card-body.filter-band .toolbar .fs-arrow {
    order: 0 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: var(--r-ctl) !important;
    background: var(--surface) !important;
    color: var(--text-3) !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .card-body.filter-band .toolbar .fs-arrow:active {
    background: var(--surface-3) !important;
  }
  /* 下拉：按内容自然宽度，不再均分，文字完整不换行 */
  .card-body.filter-band .toolbar .filter-selects .select.inline {
    grid-column: auto !important;
    flex: 0 0 auto !important;       /* 固定内容宽度，不伸缩 */
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--ctl-h) !important;
    padding-left: 10px !important;
    padding-right: 26px !important;
    background-position: right 8px center !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    touch-action: manipulation;
  }
}

/* =============================================================================
   18b. 桌面端（821–1090px）：从 4 列 grid 切换为 flex 单行
   与 >1090px 原生 flex 行为统一，整个桌面区间一套引擎。
   mobile.css 全局最末加载，min-width 块可安全覆盖 style.css 的 grid。
   ============================================================================= */
@media (min-width: 820.5px) and (max-width: 1090px) {
  .card-body.filter-band .toolbar {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: var(--sp-2) !important;
    align-items: center !important;
  }
  .card-body.filter-band .toolbar .search-box {
    grid-column: auto !important;
    flex: 1 1 208px !important;
    width: auto !important;
    min-width: 176px !important;
    max-width: 260px !important;
  }
  .card-body.filter-band .toolbar .select.inline {
    grid-column: auto !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 96px !important;
    max-width: 150px !important;
  }
  .card-body.filter-band .toolbar .btn {
    grid-column: auto !important;
    justify-self: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap;
  }
}

/* =============================================================================
   19. 极小屏（≤380px）—— 只做「再收一档」，不再另立一套断点
   ============================================================================= */
@media (max-width: 380px) {
  :root {
    --gutter: 12px;
    --pad-card: 12px;
  }
  .page-title { font-size: 16px !important; }
  .stat-grid,
  .stats-grid,
  .mini-stats { gap: 6px !important; }
  .stat-card { padding: var(--sp-2) !important; }
  .stat-card .stat-value { font-size: 18px !important; }
  .btn { padding: 0 12px !important; }
}