/* ============================================================
   ROFilter mobile.css — 手机/平板响应式适配（独立断点文件）
   桌面端（>1024px）完全不受影响；本文件仅 media query 生效
   · ≤1024px 平板：设计页/分析页/结果页转单列，表格容器可横滚
   · ≤768px 手机：汉堡抽屉菜单 + 全部单列 + 对话框全宽 + 触控字号
   ============================================================ */

/* ---------------- 平板断点（1024px 及以下） ---------------- */
@media (max-width: 1024px) {
  /* 设计页：设计基础 + 系统面板 上下排列（系统面板不再固定 300px 右侧栏） */
  .dsg-top { flex-direction: column; }
  .dsg-sys-panel { flex: 1 1 auto; max-width: none; }
  /* 分析页：离子表 / 水质参数 单列 */
  .ana-layout { grid-template-columns: 1fr; }
  /* 结果页：三列网格 → 两列 */
  .calc-grid { grid-template-columns: 1fr 1fr; }
  /* 通用三列 → 两列 */
  .grid-3col { grid-template-columns: 1fr 1fr; }
}

/* ---------------- 手机断点（768px 及以下） ---------------- */
@media (max-width: 768px) {

  /* ---------- 全局：放开桌面最小宽度，容器贴边 ---------- */
  body { min-width: 0; }
  .page-container { padding: 6px 0 30px; }
  .panel > .panel-body { padding: 6px 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* 触屏输入字号（iOS 输入聚焦自动放大阈值 16px → 14px 折中） */
  input[type=number], input[type=text], input[type=password] { font-size: 14px; }
  .rofilter-toolbar { gap: 6px; }
  .tbtn-ico { min-width: 46px; padding: 5px 8px 3px; }

  /* ---------- 品牌栏：保留 logo，隐藏右侧副标（省高度） ---------- */
  .rofilter-brandbar { height: 42px; padding: 0 10px; }
  .brand-sub, .brand-right { display: none; }
  .brand-logo { font-size: 19px; }
  .brand-logo .rf-mark { width: 26px; height: 26px; }
  .brand-logo .rf-word { font-size: 16px; }
  .brand-logo img { height: 24px !important; }

  /* ---------- 横幅：汉堡抽屉菜单 ---------- */
  .rofilter-banner { height: 40px; padding: 0 8px; }
  .banner-left { flex: 1 1 auto; min-width: 0; }
  /* 汉堡按钮（仅移动端显示；桌面 display:none） */
  .mobile-menu-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; padding: 0; font-size: 16px; }
  /* 菜单变抽屉：默认收起，body.mobile-menu-open 时下拉展开 */
  .banner-menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #003a72;
    padding: 4px 0 10px;
    box-shadow: 0 8px 22px rgba(0,20,40,.45);
    z-index: 150;
    max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  body.mobile-menu-open .banner-menu { display: flex; }
  .banner-menu > li { margin: 2px 8px; padding: 10px 14px; font-size: 14px; border-radius: 6px; }
  .banner-menu > li .mi { font-size: 15px; }
  /* 子菜单平铺展开（触屏无 hover）：文件/系统 子项直接列出 */
  .banner-menu .submenu {
    display: block; position: static;
    min-width: 0; background: transparent; border: none; box-shadow: none;
    padding: 0 0 0 14px;
  }
  .banner-menu .submenu li { color: #cfe0f0; font-size: 13px; padding: 9px 14px; }
  .banner-menu .submenu li:hover { background: rgba(255,255,255,.12); color: #fff; }
  .banner-menu .submenu li.sep { background: rgba(255,255,255,.15); }
  /* 横幅右侧：留 EN + 登出，隐藏用户名/版本号（宽度不够） */
  .banner-right { gap: 8px; }
  .user-mail, .rofilter-version { display: none; }
  .banner-btn { padding: 3px 10px; }

  /* ---------- 项目信息行：已 flex-wrap，缩小输入宽度 ---------- */
  .rofilter-projrow { padding: 6px 8px; gap: 4px 10px; }
  .pr-input { height: 24px; }

  /* ---------- 分析页：参数行换行 + 离子表满宽 ---------- */
  .ana-paramrow { padding: 6px 8px; gap: 6px 12px; }
  .ana-layout { grid-template-columns: 1fr; }
  .ana-ionwrap { grid-template-columns: 1fr; }
  /* 修复：中文按钮竖排 —— 禁止换行（分析页按钮在 .ana-actions-bar，其余工具栏 .rofilter-toolbar），按钮行 flex-wrap 换行排列 */
  .rofilter-toolbar .btn, .ana-actions-bar .btn { white-space: nowrap; padding: 4px 10px; font-size: 12px; }
  /* 修复：按钮行溢出 —— 允许换行排列（nowrap 后总宽超视口） */
  .ana-actions-bar { flex-wrap: wrap; gap: 6px; }
  /* 修复：按钮行溢出 —— 允许换行排列（nowrap 后总宽超视口） */
  .ana-actions-bar { flex-wrap: wrap; gap: 6px; }
  /* 手机空间不足：隐藏工具栏右侧长提示（避免竖排挤压） */
  .ana-actions-hint { display: none; }
  /* 修复：离子表列被压缩溢出 —— 百分比列表格 width:100% 不会触发容器滚动，需 min-width + 容器 overflow */
  .ana-left { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ion-table { min-width: 100%; }
  .ion-table table { min-width: 430px; }
  /* 修复：水质参数双列表挤压重叠 —— 撑开最小宽度后 panel-body 横向滚动 */
  .sat-table { min-width: 520px; table-layout: fixed; }
  .sat-table td > input { width: 100%; box-sizing: border-box; }
  /* 带单位的单元格：input 与单位同一行（原 100% 宽度把单位挤出单元格，压到右侧名称列上） */
  .sat-table td > .sv { width: 100%; }
  .sat-table td > .sv > input { flex: 1 1 auto; width: 0; min-width: 42px; box-sizing: border-box; }
  .sat-table td > .sv > .unit { font-size: 10px; letter-spacing: -.1px; }
  /* 进水 TDS 旁「自动」按钮：收窄，给输入框留出可读宽度 */
  .sat-table .tds-mix-btn { height: 22px; padding: 0 5px; margin-left: 2px; font-size: 10px; border-radius: 4px; }
  /* 管理页宽表 */
  .admin-table { min-width: 560px; }

  /* ---------- 设计页：设计基础双列 → 单列；段表横向滚动 ---------- */
  .dsg-top { flex-direction: column; gap: 10px; }
  .dsg-sys-panel { flex: 1 1 auto; max-width: none; }
  .dsg-basis { flex-direction: column; padding: 6px 8px; }
  .basis-col { padding: 0; }
  .basis-col + .basis-col { border-left: none; border-top: 1px solid var(--c-border-light); padding-top: 8px; margin-top: 8px; }
  /* 段表（6 段列）与级2 段表：等宽自适应，不再强制 640px 横向滚动 */
  .dsg-spec { flex-wrap: wrap; overflow-x: visible; }
  .dsg-spec .spec-side { width: 100%; margin-top: 8px; }
  .stg-table { min-width: 0; width: 100%; table-layout: fixed; }
  .stg-table th, .stg-table td { padding: 3px 2px; font-size: 11px; }
  .stg-table th:first-child, .stg-table td:first-child { width: 62px; }
  .stg-table td input.elem-name {
    width: 100%; min-width: 0; height: 26px; padding: 0 2px;
    font-size: 10.5px; text-overflow: ellipsis;
  }
  .stg-table td input[type=number] {
    width: 100%; min-width: 0; height: 26px; padding: 0 1px; font-size: 11px;
  }
  .stg-table .incell { gap: 1px; }
  .stg-table .incell input[type=number] { width: 100%; min-width: 0; }
  .stg-table .incell .unit-s { display: none; }
  .p2-section .stg-table { min-width: 0; }
  /* 工具栏按钮行自动换行（已有 flex-wrap） */


  /* 页脚在手机上需要更松：登录页贴底、行距偏紧 */
@media (max-width: 768px) {
  .icp-footer { padding: 26px 16px 34px; }
  /* 登录页页脚是 fixed 贴底 8px，手机上太贴边：抬高到 18px，并留出安全区 */
  .icp-footer.icp-fixed { bottom: 18px; padding: 0 16px; }
  .icp-footer .icp-row { line-height: 2.05; }
  .icp-footer .icp-row + .icp-row { margin-top: 8px; }
}

/* ---------- 设计页：表单行在小屏不再截断标签 ----------
     原 .brow label 固定 128px + nowrap，中文标签（如「平均水通量 (lmh)」）会被裁掉；
     这里改为「标签 42% 可换行 + 输入框自适应」，仍在同一行内，不额外拉长页面 */
  .brow { flex-wrap: wrap; gap: 4px 6px; padding: 4px 0; min-height: 0; }
  .brow label { flex: 1 1 42%; min-width: 96px; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
  .brow input[type=number], .brow input[type=text], .brow select {
    height: 30px; font-size: 13px; flex: 1 1 52%; min-width: 0; width: auto; max-width: none;
  }
  /* 长占位提示（输入产水回收率 / 输入产水流量）在 40% 宽下会被裁，给到 52% 并允许压缩 */
  .brow input::placeholder { font-size: 12.5px; }
  .brow .unit-sel { flex: 0 0 auto; min-width: 56px; }
  .brow .p2-col { flex-wrap: wrap; }
  .dsg-sys .brow label { flex: 1 1 42%; }
  .dsg-sys .brow.feat-row label { flex: 1 1 42%; }
  .brow .tip-ico {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; min-height: 18px; margin-left: 6px; flex: none;
  }
  .brow label { padding-right: 2px; }
  /* 段表里的「浓度衰减趋势」按钮：窄屏收成图标并绝对定位在单元格右上角，
     避免绝对宽度把元件名输入框顶出单元格（原先按钮压住输入框 26px） */
  .stg-table td { position: relative; }
  /* 膜元件输入框右侧固定留出 22px 给按钮：两者同一行内排布，不再重叠 */
  .stg-table td input.elem-name { width: calc(100% - 22px); padding-right: 2px; vertical-align: middle; }
  /* 浓度衰减趋势按钮：与输入框同排、垂直居中对齐（不再绝对定位，避免压住输入框） */
  .elem-sc-btn {
    display: inline-flex; width: 18px; height: 18px; margin: 0 0 0 2px;
    padding: 0; align-items: center; justify-content: center;
    vertical-align: middle; font-size: 0; line-height: 1; border-radius: 4px;
  }
  .elem-sc-btn::before { content: '📈'; font-size: 11px; }
  .stg-table td { vertical-align: top; }

  /* 顶部项目信息行：两列等宽、标签与控件垂直居中（原来每项按内容宽度布局，
     且 .pr-input 有固定 96px，导致两列左右边缘都不齐） */
  .rofilter-projrow { flex-wrap: wrap; gap: 6px 10px; }
  .rofilter-projrow .pr-item {
    flex: 1 1 calc(50% - 10px); min-width: 0;
    display: flex; align-items: center; gap: 4px; white-space: nowrap;
  }
  .rofilter-projrow .pr-item .pr-input,
  .rofilter-projrow .pr-item select {
    flex: 1 1 auto; width: auto !important; min-width: 0; height: 30px; font-size: 12.5px;
  }

  /* basis-tbl（设计基础表）内的输入框：占满单元格，避免「自动计算」占位被裁 */
  .basis-tbl td input, .basis-tbl td select {
    width: 100% !important; min-width: 0; max-width: none;
    font-size: 12.5px; padding: 0 3px; height: 30px;
  }
  .basis-tbl td { padding: 2px 3px; }
  .basis-tbl th.pnam { font-size: 12.5px; }
  /* 字距与字号微调：12px 下「量/率」等笔画密集字在窄屏易糊成一块，稍放大并加字距 */
  .brow label, .des-table th.pnam, .des-table td.pname { font-size: 12.5px; letter-spacing: .2px; }
  .des-table th.pnam { white-space: normal; padding-right: 4px; }

  /* 工具按钮：触控目标不小于 34px 高；运行按钮与其它按钮同高 */
  .tbtn-ico { min-height: 34px; padding: 6px 10px; font-size: 12px; }
  .tbtn-ico .lbl { line-height: 1.2; }
  .dsg-tools { flex-wrap: wrap; gap: 6px; }
  .btn-run, .run-btn, .dsg-run, #btnRun { min-height: 34px; height: 34px; padding: 0 12px; }
  .brow input[type=number], .brow input[type=text] { text-align: right; }

  /* 系统规格表头：允许换行，不挤成一列 */
  .stg-table th { white-space: normal; word-break: break-word; line-height: 1.25; }

  /* ---------- 结果页：全部单列 + 宽表格在面板内横滚 ---------- */
  .calc-grid { grid-template-columns: 1fr; }
  /* 网格项默认 min-width:auto 会被内部宽表撑开，导致面板/标题栏比表格窄、两列宽度不一致：
     允许收缩，宽表交给 panel-body 自己的 overflow-x 滚动 */
  .calc-grid > * { min-width: 0; }
  .calc-grid .panel-body { max-height: none; overflow: auto; }
  #page-calculation .panel-body { overflow-x: auto; }
  /* 部分网格项下面直接是表格（没有 panel-body 包一层），此时父级 overflow 仍是 visible，
     宽表右缘会被网格裁掉且无法滚动 —— 统一给网格项自己开横向滚动 */
  .calc-grid > div { min-width: 0; overflow-x: auto; }
  /* 结果页字号：桌面 12px / 行内上下 1px 在手机上偏小且数据挤在一起 */
  #page-calculation .rofilter-table { font-size: 12.5px; }
  #page-calculation .rofilter-table th,
  #page-calculation .rofilter-table td { padding: 3px 6px; line-height: 1.35; }
  #page-calculation .panel-title { font-size: 13px; }
  /* 计算摘要是 <pre> 等宽块，design.css 给它定了 min-width:460px，手机上整段右侧被切掉 */
  #page-calculation .summary-box { min-width: 0; white-space: pre-wrap; word-break: break-word; overflow-x: visible; }
  /* 宽表横滚时给容器一条常驻的淡色滚动条，提示右侧还有列（触屏滑动即可看到） */
  #page-calculation .panel-body::-webkit-scrollbar,
  .calc-grid > div::-webkit-scrollbar { height: 6px; }
  #page-calculation .panel-body::-webkit-scrollbar-thumb,
  .calc-grid > div::-webkit-scrollbar-thumb { background: #b9cee4; border-radius: 3px; }
  .grid-2col, .grid-3col { grid-template-columns: 1fr; }
  /* 修复：宽百分比列表格压缩 —— 撑开最小宽度后横向滚动（panel-body 已 overflow-x:auto）
     3~5 列的参数/离子表在 371px 内可自然压缩，不设下限，避免无谓横滚；14/16 列的大表才需要滚动 */
  #passSummaryTable { min-width: 680px; }
  #stageTable { min-width: 760px; }
  #elemDetailTable { min-width: 820px; }
  #feedIonTable, #concTable, #feedParamTable { min-width: 0; }
  #sysInfoTable { min-width: 360px; }
  #agingImpactTable { min-width: 560px; }
  #elemIonTable { min-width: 720px; }
  /* 必须横滚的宽表：给容器加一行常显提示（:has 不支持的旧浏览器只是没有这行字，不影响滚动） */
  #page-calculation .panel-body:has(#stageTable)::before,
  #page-calculation .panel-body:has(#elemDetailTable)::before,
  #page-calculation .panel-body:has(#sysInfoTable)::before,
  #page-calculation .panel-body:has(#passSummaryTable)::before,
  #page-calculation .panel-body:has(#agingImpactTable)::before {
    content: "← 左右滑动查看全部列 →";
    display: block; padding: 2px 0 4px;
    font-size: 11px; color: #7a90a6; letter-spacing: .2px;
  }
  /* 拓扑图 SVG 满宽自适应（viewBox 缩放） */
  .flow-diagram { min-height: 90px; }
  .fd-svg { width: 100%; height: auto; }

  /* ---------- 后处理页：左右两列 → 单列 ---------- */
  .pt-main { grid-template-columns: 1fr; }
  .pt-ions-row { grid-template-columns: 1fr; }
  .pt-chem-h { grid-template-columns: repeat(2, 1fr); }
  /* 化学消耗已拆成两张 5 列表：手机上上下排列，每张都能完整显示，无需横滚 */
  .pt-cons-grid { grid-template-columns: 1fr; }
  .pt-consumption-table { min-width: 0; }
  .pt-consumption-table th, .pt-consumption-table td { padding-left: 3px; padding-right: 3px; }
  .pt-consumption-table td input { width: 100% !important; min-width: 40px; }
  /* 离子表只有 3 列，自然宽度约 371px 正好占满，硬设 min-width 反而逼出横滚 */
  .pt-ion-table { min-width: 0; }
  .pt-sat-table { min-width: 0; }
  /* 说明文字 11px 在手机上偏小，放大并加行高，便于阅读 */
  #page-posttreatment .elem-detail-tip { font-size: 12px; line-height: 1.55; }
  .pt-sat-grid { grid-template-columns: 1fr; }
  .pt-basic-row { gap: 8px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-f input { width: 100%; max-width: none; }
  /* 参数行各字段宽度原来由 label+input 自然宽决定（94~160px 参差），换行后右缘不齐、看着挤：
     手机上改为等比两列，label 省略号截断，input 吃满剩余空间 */
  .pt-basic-row .pt-f { flex: 1 1 calc(50% - 7px); min-width: 0; }
  .pt-basic-row .pt-f label { flex: 0 0 auto; white-space: nowrap; }
  /* 单位/切换标记（如「bar ⇄」）不能被 input 的 flex:1 挤掉 */
  .pt-basic-row .pt-f > span { flex: 0 0 auto; white-space: nowrap; }
  .pt-basic-row .pt-f input { width: auto; flex: 1 1 auto; min-width: 52px; }

  /* ---------- 管理页：侧栏 → 顶部横向条 ---------- */
  .admin-layout { flex-direction: column; }
  .admin-side { width: auto; max-width: none; max-height: none; overflow: visible; margin-bottom: 8px; }
  .admin-side-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .admin-side .side-item { flex: 0 0 auto; padding: 5px 10px; font-size: 12px; }
  .admin-side-tip { display: none; }
  .admin-main .admin-scroll { max-height: none; }

  /* 二级页面操作区（筛选下拉 / 搜索 / 导出导入 / 新增按钮排）：
     手机上换到标题下方整行，内部可换行 —— 原先固定单行会横向溢出屏幕，部分按钮点不到 */
  .admin-sec-actions { width: 100%; gap: 6px; }
  .admin-sec-actions .txt,
  .admin-sec-actions select,
  .admin-sec-actions input { flex: 1 1 120px; min-width: 0; max-width: 100%; min-height: 32px; }
  .admin-sec-actions .btn { flex: 0 1 auto; min-height: 32px; }

  /* 触控友好：表格行内操作链（编辑/删除）与顶栏按钮在手机上放大到可稳定点按的尺寸 */
  .admin-table .op { display: inline-block; padding: 5px 8px; font-size: 12.5px; }
  .banner-btn { min-height: 30px; }

  /* ---------- 对话框：全宽贴边（高度由 dialogs.css 通用 flex 机制自适应，内部滚动） ----------
     手机地址栏/工具栏会动态改变可视高度，这里不再用 vh 写死高度或留 margin，
     否则「保存 / 取消」会被挤出屏幕。 */
  .dlg-overlay { padding: 8px; }
  .dlg { width: 94vw !important; max-width: 94vw !important; }
  /* 关闭按钮：手机上放大到 32px 触控区，避免误触 */
  .dlg-x, .ui-x { width: 32px; height: 32px; font-size: 17px; }
  .ui-dialog-title { padding-right: 6px; }
  .dlg-header { padding-right: 6px; }
  .dlg-sm { min-width: 0; }
  .dlg-xl { width: 94vw !important; }
  .dlg-body { padding: 10px; }
  .dlg-body::-webkit-scrollbar { height: 6px; width: 6px; }
  .dlg-fixed-h { min-height: 0; }
  /* 系统选项对话框：纵向单位选择在手机上更顺 */
  .opt-tab { padding: 6px 12px; font-size: 12.5px; }

  /* ---------- 登录页：卡片贴边 ---------- */
  .login-screen { padding: 12px; }
  .login-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box; padding: 22px 18px !important; }

  /* ---------- 通用滚动条瘦身为触屏留出更多空间 ---------- */
  ::-webkit-scrollbar { height: 6px; width: 6px; }
}

/* ---------------- 超小屏（480px 及以下）：进一步紧凑 ---------------- */
@media (max-width: 480px) {
  .panel > .panel-body { padding: 5px 6px; }
  .tbtn-ico .lbl { font-size: 10px; }
  .tbtn-ico { min-width: 42px; }
  .rofilter-projrow .pr-input { width: 96px !important; }
  .pt-chem-h { grid-template-columns: repeat(2, 1fr); }
  .pt-f input { width: 72px; }
  .dsg-panel-head { font-size: 12px; }
}

/* ---------------- 矮屏（高度 ≤700px）：为固定页脚（含工程免责提示）让出空间，避免遮挡登录卡片 ---------------- */
@media (max-height: 700px) {
  .login-screen { align-items: flex-start; padding-top: 16px; padding-bottom: 132px; overflow-y: auto; }
}


/* 分析页 · 手机端：左右两栏改为上下堆叠，参数行与表格自适应不溢出 */
@media (max-width: 720px) {
  /* 登录页：页脚是 fixed，卡片必须靠上并留足底部空间，否则窄屏下会与页脚重叠 */
  .login-screen {
    align-items: flex-start;
    padding: 16px 12px 190px;
    overflow-y: auto;
  }
  .login-card { margin-top: 8px; }

  /* 主布局：单列堆叠，右侧水质参数表完整可见 */
  .ana-layout { grid-template-columns: 1fr !important; gap: 10px; }
  .ana-left, .ana-right { width: 100%; min-width: 0; }

  /* 参数行：两列自适应，TDS 独占一行且可换行 */
  .ana-paramrow { gap: 8px 10px; padding: 8px 10px; }
  .ana-paramrow .pr { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .ana-paramrow .pr input { width: 100% !important; flex: 1 1 auto !important; min-width: 0; }
  /* 勾选框不能被上面的 100% 宽度规则撑开（否则方框与文字之间出现大片空白） */
  .ana-paramrow .pr input[type="checkbox"] { width: 15px !important; height: 15px !important; flex: 0 0 15px !important; }
  .ana-paramrow .pr-tds { flex: 1 1 100%; flex-wrap: wrap; }
  .ana-paramrow .pr-tds input#resTDS { flex: 1 1 90px !important; width: auto !important; min-width: 0; }
  .ana-paramrow .pr-tds .tds-mix-btn { flex: 0 0 auto; }

  /* 结果表：输入框自适应，单位不挤压 */
  .sat-table { width: 100%; table-layout: auto; }
  .sat-table td .sv { display: flex; align-items: center; gap: 3px; min-width: 0; }
  .sat-table td .sv input, .sat-table td > input { width: 100% !important; flex: 1 1 auto !important; min-width: 0; }
  .sat-table td .sv .unit { font-size: 10px; white-space: nowrap; }
  .sat-table input.osmo-hl, .sat-table input.key-hl { width: 100% !important; flex: 1 1 auto !important; font-size: 14px; }


  /* 结果表锁定列宽，避免 4 列撑破容器 */
  .sat-table { table-layout: fixed; width: 100%; }
  .sat-table td:nth-child(1), .sat-table td:nth-child(3) { width: 31%; }
  .sat-table td:nth-child(2), .sat-table td:nth-child(4) { width: 19%; }
  .sat-table td { overflow: hidden; }

  /* 结果表：名称列允许换行压缩，避免撑宽整表 */
  .sat-table td.sat-name { font-size: 11px; line-height: 1.15; white-space: normal; word-break: break-word; padding: 2px 2px; }
  .sat-table td { max-width: 0; }

  /* 结果表容器允许横向滑动，保证窄屏下所有列可达 */
  .ana-right .panel-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 参数行：第一行 TDS 独占；第二行 pH / 浊度 / Feed Softener */
  .ana-paramrow .pr-tds { flex: 1 1 100%; order: 1; }
  .ana-paramrow .pr-ph { flex: 0 1 auto; order: 2; }
  .ana-paramrow .pr-turb { flex: 0 1 auto; order: 3; }
  .ana-paramrow .chk-line { flex: 1 1 auto; order: 4; justify-content: flex-start; }
  .ana-paramrow .pr-ph input, .ana-paramrow .pr-turb input { width: 64px !important; flex: 0 0 64px !important; }
  .ana-paramrow .soft-label { gap: 5px; }
  /* 手机端 Feed Softener 与同排输入项垂直对齐 */
  .ana-paramrow .chk-line { height: 24px; align-items: center; }

  /* 离子表：字号与内边距收紧，自定义行选择框不被截断 */
  .ion-table th, .ion-table td { padding: 0 3px; font-size: 12px; }
  /* 手机端完整显示三列：离子名只占 16%，两个数值列各 42%，不再横向滚动 */
  .ion-table table { min-width: 0 !important; }
  .ion-table col:first-child { width: 16% !important; }
  .ion-table col:nth-child(2), .ion-table col:nth-child(3) { width: 42% !important; }
  .ion-table .iname, .ion-table td.iname { padding: 0 2px; font-size: 11.5px; }
  .ion-table td input[type=number] { font-size: 12px; padding: 0 2px; }
  .ion-table .cus-box { gap: 2px; }
  .ion-table .cus-box .cus-sel { font-size: 10px; padding: 0 1px; height: 20px; }
  .ion-table .cus-box .cus-del { flex: 0 0 17px; width: 17px; height: 17px; font-size: 10px; }
}

/* ============================================================
   分析页 · 手机端「水质参数」表：单列显示（一行一个参数）
   —— 原 2×2 四列表格在窄屏右侧两列超出视口（右边看不到），
      改为「名称 44% | 数值 56%」逐行排列；桌面/平板仍为四列，不受影响。
      名称格宽度、数值框宽度全部统一，各行数值起点与宽度完全一致。
   ============================================================ */
@media (max-width: 720px) {
  /* 取消 768 断点给的最小宽度，整页不再横向溢出 */
  .sat-table {
    display: block; width: 100%; min-width: 0 !important;
    table-layout: auto; margin-top: 2px;
    border: 1px solid var(--c-border-light); border-bottom: none;
  }
  .sat-table tbody { display: block; width: 100%; }
  /* 每个 tr 两列：第 3/4 个格子自动落到下一行 → 一个参数一行 */
  .sat-table tr { display: grid; grid-template-columns: 36% 64%; width: 100%; align-items: stretch; }
  .sat-table td {
    display: flex; align-items: center;
    width: auto !important; max-width: none; min-width: 0;
    height: auto; min-height: 30px; overflow: visible;
    padding: 3px 8px; white-space: nowrap;
    border: none; border-bottom: 1px solid var(--c-border-light);
    box-sizing: border-box;
  }
  /* 名称格：统一宽度 + 右侧竖线，所有数值从同一条线开始 */
  .sat-table td.sat-name, .sat-table td.sat-name-r {
    border-left: none; border-right: 1px solid var(--c-border-light);
    font-size: 12px; font-weight: 700; line-height: 1.25;
    white-space: normal; word-break: normal;
  }
  /* 电导率/渗透压行右侧的占位空格不占位，避免多出一条空行 */
  .sat-table td:empty { display: none; }
  /* 数值框：所有行宽度完全一致（带单位的行与不带单位的行同宽），并撑满数值格
     —— 带单位行留出固定 40px 单位位，不带单位行右侧也留同样宽度，两边数值框等宽 */
  .sat-table td > input {
    flex: 0 0 auto !important; width: calc(100% - 44px) !important;
    min-width: 0; height: 24px; box-sizing: border-box; text-align: right;
  }
  .sat-table td > .sv { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; width: auto; min-width: 0; }
  /* 带单位的行：数值框宽度 = 100% −（单位位 40px + 间距 4px），与不带单位行完全等宽 */
  .sat-table td > .sv > input {
    flex: 0 0 auto !important; width: calc(100% - 44px) !important;
    min-width: 0; height: 24px; box-sizing: border-box; text-align: right;
  }
  .sat-table td > .sv > .unit { flex: 0 0 40px; text-align: left; font-size: 10.5px; }
  .sat-table input.osmo-hl, .sat-table input.key-hl { font-size: 14px; }
  /* 表格本身已单列自适应，容器不再需要横向滚动 */
  .ana-right .panel-body { overflow-x: hidden; }
}

/* ============================================================
   手机端 · 按钮均衡排布 + 选膜品牌下拉框
   —— 设计页工具栏 12 个按钮等宽 4 列（3 行，正好排满）
   —— 分析页操作栏 6 个按钮等宽 3 列（2 行，正好排满）
   —— 选膜对话框：品牌页签改为下拉框（含「全部」）
   ============================================================ */
@media (max-width: 720px) {
  /* ---------- 设计页工具栏：等宽网格、逐行对齐 ---------- */
  #page-design .rofilter-toolbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    align-items: stretch;
  }
  #page-design .rofilter-toolbar .tsep { display: none; }
  #page-design .rofilter-toolbar .tbtn-ico {
    width: 100%; min-width: 0; padding: 6px 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  }
  #page-design .rofilter-toolbar .tbtn-ico .lbl { font-size: 11.5px; white-space: nowrap; }

  /* ---------- 分析页操作栏：6 个按钮等宽 3 列 ---------- */
  .ana-actions-bar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .ana-actions-bar .btn,
  .ana-actions-bar .btn.primary {
    width: 100%; min-width: 0; height: 32px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; white-space: nowrap;
  }
  .ana-actions-bar .ana-actions-hint, .ana-actions-bar #anaxFileInput { display: none !important; }

  /* ---------- 选膜对话框：品牌页签 → 下拉框 ---------- */
  #elemBrandTabs { display: none !important; }
  .elem-brand-sel {
    display: block; width: 100%; height: 34px; box-sizing: border-box;
    margin: 0 0 6px; padding: 0 8px; font-size: 13px;
    border: 1px solid #b9cee4; border-radius: 5px; background: #fff; color: #123c5e;
  }
}
/* 桌面/平板：下拉框隐藏，仍用品牌页签（手机端见上方 ≤720 规则） */
@media (min-width: 721px) {
  .elem-brand-sel { display: none; }
}

/* ---------------- 极窄 + 矮屏（如 320×568）：登录卡片与固定页脚争空间 ----------------
   加入验证码行后卡片高度增加约 46px，320×568 下页脚本身换行变高（约 210px），
   原来的 190px 底部预留不够，卡片会被页脚压住 20px。这里同时压缩卡片与加大预留，
   并允许整屏滚动，保证任何高度下都不会互相遮挡。 */
@media (max-width: 400px) and (max-height: 620px) {
  .login-screen { padding: 10px 12px 240px; overflow-y: auto; }
  .login-card { padding: 12px 12px 10px !important; }
  .login-card input { margin-bottom: 7px; height: 32px; }
  .login-captcha-row { margin-bottom: 7px; }
  .login-captcha-row .captcha-img { width: 104px; height: 32px; }
  .login-sub { margin: 2px 0 6px; }
  .login-logo { font-size: 26px; }
  .login-reg { margin-top: 6px; }
  .login-error { margin-top: 3px; min-height: 14px; }
  .login-card .btn { height: 34px; }
}