/* ============================================================
   移动端响应式适配（≤768px）
   所有 @media(max-width:768px) 规则集中在此文件
   桌面端（>768px）完全不加载本文件中的 @media 规则
   ============================================================ */

/* ========== 移动端 DOM 元素：桌面默认隐藏 ========== */
.mt-bar,.mt-tank-drawer,.mt-admin-block,.mt-topbar-right{display:none}
/* 便捷模式提示条：桌面端默认隐藏，移动端显示 */
.mt-tip-bar{display:none}

/* ========== 移动端布局（≤768px） ========== */
@media (max-width:768px){
  /* 重置 body 滚动行为：让 html 成为滚动容器，避免 fixed 元素在移动端异常 */
  body{overflow:visible !important;scrollbar-gutter:auto}

  /* 隐藏桌面端元素 */
  .corner-btns{display:none !important}
  .page-hd .nav-right{display:none !important}

  /* 移动端顶栏：复用 page-hd，sticky 吸顶 */
  /* 禁用 anim-in 动画：transform:translateY(0) 会创建 containing block，影响 fixed 后代 */
  .page-hd.anim-in{animation:none !important;transform:none !important}
  .page-hd{
    position:sticky;top:0;z-index:50;
    margin:0 -12px;  /* 满宽抵消 container padding:0 12px，与提示条对齐 */
    background:var(--card);
    border-bottom:1px solid var(--border);
    padding:8px 12px;
    padding-top:calc(8px + env(safe-area-inset-top));
    display:flex;align-items:center;justify-content:space-between;
  }
  .page-hd .left{gap:8px}
  .page-hd h1{font-size:17px;font-weight:600;margin:0}
  .page-hd .badge{font-size:12px}

  /* 移动端顶栏右侧（鱼缸切换 + 主题 + 账号） */
  .mt-topbar-right{display:flex !important;align-items:center;gap:8px}
  .mt-tank-sw{
    background:var(--bg);border:1px solid var(--border);
    border-radius:16px;padding:6px 12px;
    font-size:13px;color:var(--text);
    display:flex;align-items:center;gap:4px;
    min-height:36px;max-width:140px;overflow:hidden;white-space:nowrap;
  }
  .mt-tank-sw .mt-sw-name{overflow:hidden;text-overflow:ellipsis}
  .mt-theme,.mt-avatar{
    background:var(--bg);border:1px solid var(--border);
    border-radius:50%;width:36px;height:36px;
    font-size:16px;display:flex;align-items:center;justify-content:center;
    cursor:pointer;
  }

  /* 底部 tab 栏 */
  .mt-bar{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;z-index:50;
    background:var(--card);
    border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mt-tab{
    flex:1;background:none;border:none;
    padding:8px 0;
    display:flex;flex-direction:column;align-items:center;gap:2px;
    color:var(--text3);font-size:11px;
    position:relative;min-height:48px;
    cursor:pointer;
  }
  .mt-tab .mt-tab-ico{font-size:20px;line-height:1}
  .mt-tab.active{color:var(--accent)}
  .mt-tab.active::before{
    content:'';position:absolute;top:4px;
    width:4px;height:4px;border-radius:50%;background:var(--accent);
  }

  /* 内容区底部留白（底栏 54px + 余量） */
  .page-body{padding-bottom:80px}

  /* 鱼缸抽屉 */
  .mt-tank-drawer.open{display:flex;position:fixed;inset:0;z-index:100}
  .mt-td-mask{position:absolute;inset:0;background:rgba(0,0,0,.55)}
  .mt-td-sheet{
    position:absolute;bottom:0;left:0;right:0;
    background:var(--card);
    border-top-left-radius:16px;border-top-right-radius:16px;
    max-height:70vh;display:flex;flex-direction:column;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mt-td-head{
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 16px;border-bottom:1px solid var(--border);
    font-size:15px;font-weight:600;
  }
  .mt-td-head button{
    background:none;border:none;font-size:18px;color:var(--text3);
    cursor:pointer;padding:4px 8px;
  }
  .mt-td-list{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 0}
  .mt-td-item{
    display:flex;align-items:center;gap:10px;
    padding:14px 16px;font-size:15px;color:var(--text);
    border:none;background:none;width:100%;text-align:left;
    min-height:48px;cursor:pointer;
  }
  .mt-td-item.active{color:var(--accent)}
  .mt-td-item .t-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
  .mt-td-item .mt-td-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mt-td-item .mt-td-edit{font-size:13px;color:var(--text3);opacity:.6}
  .mt-td-add{
    padding:14px 16px;border-top:1px solid var(--border);
    color:var(--accent);font-size:15px;
    background:none;border-left:none;border-right:none;border-bottom:none;
    min-height:48px;cursor:pointer;width:100%;text-align:center;
  }

  /* admin 拦截 */
  .mt-admin-block.show{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:40px 20px;text-align:center;min-height:60vh;
  }
  .mt-ab-icon{font-size:48px;margin-bottom:16px}
  .mt-ab-title{font-size:18px;font-weight:600;color:var(--text);margin-bottom:8px}
  .mt-ab-desc{font-size:14px;color:var(--text3);line-height:1.6;max-width:280px}

  /* container 满宽 */
  .container{padding:0 12px}

  /* ========== 弹窗移动端转底部抽屉 ========== */
  /* 遮罩底部对齐，让弹窗从底部滑入而非居中 */
  .modal-overlay.open{
    align-items:flex-end;
    justify-content:center;
  }
  /* 弹窗本体：满宽、顶部圆角、去边框，贴合底部 */
  .modal-overlay.open .modal{
    width:100%;
    max-width:100% !important;  /* 覆盖内联 max-width（如 lightDataModal 的 90vw/480px） */
    max-height:85vh;
    border-radius:16px 16px 0 0;
    border:none;
    /* 桌面端用 scale 缩放动画，移动端直接显示（避免缩放显得突兀） */
    transform:translateY(0) !important;
    opacity:1 !important;
    padding-bottom:env(safe-area-inset-bottom);
  }
  /* 内容区可滚动（modal-bd 已有 overflow-y:auto，此处补强其他结构） */
  .modal-overlay.open .modal-bd{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    flex:1;
  }

  /* ========== sysConfirm 转底部抽屉 ==========
     sysConfirm 在 utils.js 用 .cfm-overlay+.cfm-box 结构生成
     桌面端居中显示，移动端改为底部弹出抽屉
     注意：cfm-box 有内联 transform:scale(1)，且 water.css 用 #sysCfmOverlay ID
     选择器覆盖了 border-radius/padding/max-width，故此处需用 !important */
  .cfm-overlay.open{
    align-items:flex-end;
  }
  .cfm-overlay.open .cfm-box{
    width:100%;
    max-width:100% !important;  /* 覆盖 water.css #sysCfmOverlay .cfm-box 的 max-width:380px */
    border-radius:16px 16px 0 0 !important;  /* 顶部圆角，覆盖 water.css ID 选择器 */
    transform:translateY(0) !important;  /* 覆盖内联 style="transform:scale(1)" */
    padding:20px 16px !important;  /* 覆盖 water.css #sysCfmOverlay .cfm-box 的 padding */
    padding-bottom:calc(20px + env(safe-area-inset-bottom)) !important;
  }
  .cfm-overlay.open .cfm-box p{
    font-size:15px;
    line-height:1.5;
  }
  .cfm-overlay.open .cfm-input{
    width:100%;
    font-size:16px;  /* ≥16px 防 iOS Safari 聚焦自动缩放 */
    padding:12px;
    min-height:44px;  /* 触控目标 ≥40px */
  }
  .cfm-overlay.open .cfm-btns{
    flex-direction:row-reverse;  /* 确认按钮在右，取消在左，符合移动端习惯 */
    gap:10px;
    margin-top:16px;
  }
  .cfm-overlay.open .cfm-btns button{
    flex:1;
    min-height:44px;  /* 触控目标 ≥40px */
    font-size:15px;
  }

  /* ========== 概览页 ========== */
  /* 便捷模式提示条：系统公告风格，满宽窄横条，紧贴标题行下方，所有页面显示 */
  .mt-tip-bar{
    display:flex;
    align-items:center;
    gap:6px;
    background:var(--input-bg);
    border-bottom:1px solid var(--border);
    border-radius:0;
    padding:5px 12px;
    margin:0 -12px 10px;  /* 满宽抵消 container padding:0 12px，下方留 10px 间距 */
    font-size:11px;
    color:var(--text3);
    line-height:1.3;
  }
  .mt-tip-bar.hidden{display:none !important}
  .mt-tip-bar .mt-tip-text{flex:1;text-align:center}
  .mt-tip-bar .mt-tip-close{
    background:none;border:none;
    color:var(--text4);
    font-size:12px;cursor:pointer;
    padding:0 2px;
    min-height:auto;  /* 覆盖全局 button min-height:40px */
    line-height:1;
    flex-shrink:0;
  }
  .mt-tip-bar .mt-tip-close:active{color:var(--text2)}

  /* 两栏改单栏（profile.css 第 315 行的 520px 断点提前到 768px） */
  .pf-columns{flex-direction:column !important;gap:12px}
  .pf-col-left,.pf-col-right{width:100% !important}

  /* 投入表格紧凑化 + 横向滚动 */
  .pf-inv-table{font-size:11px;width:100%}
  .pf-inv-table th,.pf-inv-table td{padding:4px;white-space:nowrap}
  .pf-inv-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* 库存卡片 2 列 */
  .inv-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px;
  }
  .inv-card{min-height:auto;padding:10px 8px}
  .inv-card .inv-icon{font-size:24px}
  .inv-card .inv-card-icon{width:32px;height:32px;margin-bottom:4px}
  .inv-card .inv-name{font-size:12px}
  .inv-card .inv-sub{font-size:10px;margin-top:2px}

  /* tab 行纵向堆叠：tab-bar 在上，过滤栏在下满宽
     防止过滤按钮过多导致水平溢出撑大 layout viewport */
  .pf-tab-row{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .pf-tab-bar{width:100%;justify-content:flex-start}
  .pf-filter-slot{width:100%}
  /* 过滤栏横向滑动（按钮多时） */
  .inv-filter-bar{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .inv-filter-bar::-webkit-scrollbar{display:none}
  .inv-filter-bar .inv-ft{flex-shrink:0}

  /* 封面区域紧凑 */
  .profile-header{padding:12px 0;gap:10px}
  .profile-header .profile-avatar{width:40px;height:40px;font-size:20px}

  /* 模块标题 */
  .pf-mod-title{font-size:14px}

  /* ========== 水质页 ==========
     水质记录表格在弹窗内（.tbl-wrap > table），桌面端是横向滚动表格，
     移动端转为卡片：thead 隐藏，tr 变成卡片块，td 用 ::before 显示 data-label 列名。
     add-row（新增行）也转卡片，但保留输入能力。
  */
  /* 图表高度：桌面 640px 太高，移动端改为 320px（约视口 38%）*/
  #page-water .chart-wrap{height:320px}
  /* 工具栏：移动端仅保留"数据""全览"按钮，隐藏主页快捷录入 */
  #page-water .card-toolbar{
    flex-wrap:wrap;
    gap:6px;
  }
  /* 隐藏快捷录入（日期 + 参数输入），录入统一走"数据"按钮弹窗 */
  #page-water .qb-date,
  #page-water .qb-fields,
  #page-water .tb-sep{display:none !important}
  #page-water .btn-data{
    min-height:36px;
    padding:6px 12px;
    font-size:13px;
    flex-shrink:0;
  }
  #page-water .card{padding:14px 12px !important}

  .tbl-wrap{overflow:visible}
  .tbl-wrap > table{display:block;width:100%;background:none;border:none;border-collapse:separate}
  .tbl-wrap > table thead{display:none}
  .tbl-wrap > table tbody{display:block}
  .tbl-wrap > table tbody tr{
    display:block;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    margin-bottom:8px;
    padding:10px 12px;
  }
  .tbl-wrap > table tbody td{
    display:flex;
    align-items:center;
    border:none;
    padding:4px 0;
    font-size:13px;
    text-align:left;
  }
  .tbl-wrap > table tbody td::before{
    content:attr(data-label);
    color:var(--text3);
    font-size:12px;
    min-width:48px;
    flex-shrink:0;
    margin-right:8px;
  }
  /* 日期列：加粗显示 */
  .tbl-wrap > table tbody td.dc{
    font-weight:600;
    color:var(--text);
    font-size:14px;
  }
  /* 输入框：移动端左对齐 + 16px 防 iOS 缩放 */
  .tbl-wrap > table tbody td input{
    text-align:left !important;
    width:auto !important;
    min-width:60px;
    flex:1;
    font-size:16px;
    padding:6px 8px;
  }
  .tbl-wrap > table tbody tr.add-row td:first-child input{
    width:100% !important;
    text-align:left !important;
    padding-left:8px;
  }
  /* 操作按钮列（最后两个 td）：横排，无 ::before 标签 */
  .tbl-wrap > table tbody td:last-child,
  .tbl-wrap > table tbody td:nth-last-child(2){
    justify-content:flex-end;
    gap:8px;
    margin-top:4px;
    padding-top:6px;
  }
  .tbl-wrap > table tbody td:last-child::before,
  .tbl-wrap > table tbody td:nth-last-child(2)::before{content:none}
  /* add-row 的空 td（倒数第二个）隐藏 */
  .tbl-wrap > table tbody tr.add-row td:nth-last-child(2){display:none}
  /* add-row 添加按钮放大触控 */
  .tbl-wrap > table tbody tr.add-row td:last-child .btn-sm{
    min-height:36px;
    min-width:44px;
    font-size:16px;
  }
  /* 数据行按钮触控目标放大 */
  .tbl-wrap > table tbody td .del-btn{
    min-width:36px;
    min-height:36px;
    font-size:14px;
  }
  /* conv-hint 位置修正（卡片内输入框下方） */
  .tbl-wrap > table tbody td .conv-hint{
    position:static;
    display:block;
    margin-top:2px;
  }

  /* 目标值网格 tgt-grid：单列堆叠 */
  .tgt-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px !important}
  .tgt-grid .tgt-item{padding:8px !important}

  /* 字段编辑网格 w-edit-grid：单列 */
  .w-edit-grid{grid-template-columns:1fr !important;gap:8px !important}
  .w-edit-item input{font-size:16px;padding:10px !important;min-height:44px}

  /* 水质编辑弹窗内的行布局：转纵向 */
  .w-edit-row{flex-direction:column;align-items:stretch;gap:4px}
  .w-edit-label{text-align:left;min-width:0}
  .w-edit-input{font-size:16px;min-height:44px;padding:10px 12px}

  /* 弹窗内 modal-bd 横向内边距收紧 */
  #waterModal .modal-bd{padding:12px}
  .sec-label{font-size:13px;margin-top:10px}

  /* expand-bar 触控友好 */
  .expand-btn{min-height:40px;font-size:13px;padding:8px 16px}

  /* ========== 光谱页 ==========
     移动端：page-actions 改 static 不遮挡内容；
     快速/通道模式恢复 grid 5 列 + 横向滑动（参考逐点模式）；
     stp 触控目标放大。
  */
  /* 保存/更多按钮：不浮动，占据文档流 */
  #page-light .page-actions{
    position:static;
    margin-bottom:8px;
    justify-content:flex-end;
  }
  #page-light .page-act-btn,#page-light .act-trigger{
    min-height:36px;
    font-size:13px;
    padding:6px 12px;
  }

  /* 快速/通道模式：恢复 grid 5 列 + 横向滑动 */
  #page-light .mode-panel.quick,
  #page-light .mode-panel.adv{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  #page-light .mode-panel.quick::-webkit-scrollbar,
  #page-light .mode-panel.adv::-webkit-scrollbar{display:none}
  /* prow 恢复桌面 5 列布局 + min-width 防止压缩 */
  #page-light .ptable .prow{
    grid-template-columns:72px repeat(4,1fr);
    gap:8px;
    min-width:460px;
    min-height:44px;
    padding:4px 0;
  }
  #page-light .ptable .prow.header{
    display:grid;
    min-height:auto;
  }
  #page-light .ptable .prow .pcell{
    width:auto;
    justify-content:center;
    font-size:13px;
  }
  #page-light .ptable .prow .pcell:first-child{
    justify-content:flex-start;
    font-size:13px;
    font-weight:600;
  }
  /* 通道行内 stp 触控目标放大（≥40px） */
  #page-light .ptable .stp button{
    width:40px;height:40px;font-size:18px;
  }
  #page-light .ptable .stp input{
    width:52px;font-size:16px;  /* ≥16px 防 iOS 缩放 */
    min-height:40px;
    padding:6px 0;
  }

  /* seg 控件（快速/通道/逐点）：按钮内边距加大，触控目标 ≥40px */
  #page-light .top-bar{
    gap:8px;
    margin-bottom:10px;
  }
  #page-light .seg.seg3{
    width:100%;
    justify-content:center;
  }
  #page-light .seg-item{
    flex:1;
    padding:8px 10px;
    font-size:13px;
    min-height:40px;
  }

  /* 逐点编辑表：sticky 首列 + 横向滑动
     桌面端 .pp-grid-wrap 已有 overflow-x:auto 和 min-width:780px，移动端保持横向滑动
     补首列 sticky left，便于滑动查看时对照通道名 */
  #page-light .pp-grid-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:0 -4px;
    padding:8px 4px;
  }
  #page-light .pp-table{
    border-collapse:separate;
    border-spacing:0;  /* 移动端紧凑，去掉 3px 间距 */
    min-width:780px;  /* 保持横向滑动宽度 */
  }
  #page-light .pp-table th:first-child,
  #page-light .pp-table td:first-child{
    position:sticky;
    left:0;
    z-index:2;
    background:var(--card);
    min-width:84px;
    border-right:1px solid var(--border);
    box-shadow:1px 0 2px rgba(0,0,0,.05);  /* 右侧阴影分隔 */
  }
  /* 表头首列 z-index 高于表头其他列（th 已有 top:0 sticky） */
  #page-light .pp-table th:first-child{
    z-index:3;
  }
  /* 单元格紧凑化 + 触控目标放大 */
  #page-light .pp-table td input{
    width:38px;
    min-width:38px;
    max-width:42px;
    min-height:36px;  /* 触控目标 ≥36px */
    font-size:14px;  /* ≥14px 接近 16px 防 iOS 缩放 */
    padding:6px 0;
  }

  /* 图表全宽：覆盖内联 height:380px */
  #page-light .chart-sec{
    padding:14px 12px;
    margin-bottom:16px;
  }
  #page-light .chart-wrap{
    width:100%;
    height:300px !important;
    overflow:visible;
  }

  /* QR 码区域紧凑 + 居中 */
  #page-light .qr-sec{
    padding:14px 12px;
    margin-bottom:16px;
  }
  #page-light .qr-head{
    flex-direction:column;
    gap:6px;
    margin-bottom:10px;
  }
  #page-light #qrcode{
    min-width:auto;
    min-height:auto;
    width:220px;
    height:220px;
    padding:8px;
  }

  /* ========== 换水页 ==========
     桌面端 .config-row / .input-row 是横向 flex（多个配置项/输入组并排），
     移动端改纵向堆叠，每个 config-item / input-group 满宽。
     .input-group 本身已是 flex-direction:column（标签在上、输入框在下），
     只需让外层 .input-row 改纵向 + 每个 .input-group 满宽即可。
  */
  #page-change .config-row,
  #page-change .input-row{
    flex-direction:column;
    gap:10px;
    align-items:stretch;
  }
  /* config-item（缸总水体/盐度）：满宽，标签和输入框左对齐 */
  #page-change .config-item{
    width:100%;
    justify-content:flex-start;
    gap:8px;
  }
  #page-change .config-item label{
    font-size:13px;
    color:var(--text3);
    min-width:80px;
  }
  #page-change .config-item input{
    width:80px;
    min-height:44px;  /* 触控目标 ≥40px */
    font-size:16px;  /* ≥16px 防 iOS Safari 聚焦自动缩放 */
    padding:8px 10px;
    text-align:center;
  }
  /* input-group：满宽，输入框 16px */
  #page-change .input-group{
    min-width:0;
    width:100%;
  }
  #page-change .input-group input{
    width:100%;
    min-height:44px;
    font-size:16px;  /* ≥16px 防 iOS Safari 聚焦自动缩放 */
    padding:10px 12px;
    text-align:left;
  }
  /* 结果卡片：4 个改 2x2 网格（保留卡片视觉，避免单列过长） */
  #page-change .result-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  #page-change .result-card{
    min-width:0;
    padding:12px 10px;
  }
  #page-change .result-card .r-value{
    font-size:20px;
  }
  /* 卡片内边距收紧 */
  #page-change .card{
    padding:14px 12px !important;
  }

  /* ========== 滴定页 ==========
     滴定页是表格结构（.t-table），列多（7 列）+ 输入框固定 72px，
     桌面端已用 overflow-x:auto 包裹支持横向滑动。
     移动端保持横向滑动，但放大输入框触控目标 + sticky 首列便于对照元素名。
     另有 .config-row > .config-item 缸水量输入框（非表格内），单独适配。
  */
  /* 表格容器：横向滑动顺畅 */
  #page-titrate .card{
    padding:14px 12px !important;
  }
  /* config-item 缸水量输入框：触控目标 + 16px 防 iOS 缩放 */
  #page-titrate .config-row{
    flex-direction:column;
    gap:10px;
    align-items:stretch;
  }
  #page-titrate .config-item{
    width:100%;
    justify-content:flex-start;
    gap:8px;
  }
  #page-titrate .config-item label{
    font-size:13px;
    color:var(--text3);
    min-width:80px;
  }
  #page-titrate .config-item input{
    width:100px;
    min-height:44px;
    font-size:16px;
    padding:8px 10px;
    text-align:center;
  }
  #page-titrate .t-table{
    font-size:12px;
  }
  #page-titrate .t-table th{
    font-size:10px;
    padding:6px 4px;
    white-space:normal;  /* 表头允许换行，缩短横向宽度 */
  }
  #page-titrate .t-table td{
    padding:8px 4px;
  }
  /* 首列（元素名）sticky left，便于横向滑动时对照 */
  #page-titrate .t-table th:first-child,
  #page-titrate .t-table td:first-child{
    position:sticky;
    left:0;
    z-index:2;
    background:var(--card);
    min-width:72px;
    max-width:84px;
    border-right:1px solid var(--border);
    box-shadow:1px 0 2px rgba(0,0,0,.05);
  }
  #page-titrate .t-table th:first-child{
    z-index:3;
  }
  /* 输入框触控目标放大（≥36px），字号 ≥14px 接近 16px 防 iOS 缩放 */
  #page-titrate .t-table input{
    width:60px;
    min-width:60px;
    min-height:36px;
    font-size:14px;
    padding:6px 2px;
  }
  /* 结果数值字号略减 */
  #page-titrate .t-table .t-result{
    font-size:14px;
  }

  /* ========== 表单触摸友好全局规则 ========== */
  /* 输入框 font-size ≥16px 防 iOS Safari 自动缩放 */
  input[type="text"],input[type="number"],input[type="password"],
  input[type="email"],input[type="date"],input[type="tel"],
  input[type="search"],textarea,select{
    font-size:16px !important;
    min-height:40px;
    padding:8px 10px;
  }

  /* 触控目标 ≥40px */
  button,.btn,.nav-tab,.mt-tab,.mt-td-item,.ad-tab{
    min-height:40px;
  }

  /* hover → :active（触摸设备不支持 hover） */
  button:not(:disabled):active,
  .btn:not(:disabled):active,
  .nav-tab:not(.active):active,
  .tank-tab:not(.active):active{
    transform:scale(.97);
    opacity:.85;
    transition:all .1s;
  }

  /* 标签改顶部（通用） */
  .form-row,.input-row,.edit-row{
    flex-direction:column;
    align-items:stretch;
    gap:4px;
  }
  .form-row label,.input-row label,.edit-row label{
    font-size:13px;
    color:var(--text3);
  }

  /* 数字输入触发数字键盘 */
  input[type="number"]{
    inputmode:numeric;
  }

  /* checkbox/radio 触控目标放大 */
  input[type="checkbox"],input[type="radio"]{
    width:20px;
    height:20px;
    min-height:20px;
  }

  /* ========== toast 移到顶部 ========== */
  #toast{
    top:calc(60px + env(safe-area-inset-top));
    bottom:auto;
    left:12px;
    right:12px;
    width:auto;
    max-width:none;
    text-align:center;
    font-size:14px;
    padding:10px 16px;
  }

  /* ========== 下拉菜单转底部 sheet ========== */
  /* 光谱页右上角"更多操作"下拉菜单，移动端从底部滑入 */
  /* 注意：祖先 .anim-in 的 fadeUp 动画用 both 保留 transform:translateY(0)，
     会让 position:fixed 的后代相对该祖先而非视口定位，导致底部 sheet 无法贴底。
     因此移动端取消光谱页卡片的入场动画（仅影响 .ptable.anim-in，其他页面不受影响）。*/
  .ptable.anim-in{
    animation:none !important;
  }
  .act-menu{
    position:fixed !important;
    bottom:0 !important;
    top:auto !important;
    left:0 !important;
    right:0 !important;
    min-width:0 !important;
    max-width:100% !important;
    width:100% !important;
    border-radius:16px 16px 0 0 !important;
    border:none !important;
    padding:8px 0 calc(8px + env(safe-area-inset-bottom)) !important;
    box-shadow:0 -6px 22px var(--shadow) !important;
    /* 桌面端用 opacity+scale 隐藏，移动端改用 translateY */
    opacity:1 !important;
    transform:translateY(100%) !important;
    transform-origin:bottom center !important;
    transition:transform .3s cubic-bezier(.22,1,.36,1) !important;
    z-index:200 !important;
  }
  .act-menu.open{
    transform:translateY(0) !important;
  }
  /* 菜单项放大触控目标 */
  .act-menu-item{
    min-height:48px;
    padding:14px 18px !important;
    border-radius:0 !important;
    font-size:15px !important;
    text-align:left;
  }
  .act-menu-item:active{
    background:color-mix(in srgb,var(--accent) 13%,transparent);
    color:var(--accent);
  }
  /* 触发按钮点击时移除 hover 强调，避免与底部 sheet 状态冲突 */
  .act-trigger.open{
    background:var(--card);
    color:var(--text3);
    border-color:var(--border2);
  }
  /* 遮罩：菜单打开时用 body::before 兜底，便于点击空白处关闭 */
  body:has(.act-menu.open)::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:199;
    pointer-events:auto;
  }

  /* ========== 登录/注册/找回密码：移动端顶部卡片（不盖住整个屏幕） ========== */
  .auth-overlay.open{
    align-items:flex-start;
    background:rgba(0,0,0,.5);
  }
  .auth-overlay.open .auth-box{
    width:100%;
    max-width:100%;
    border:none;
    border-radius:0 0 18px 18px;
    box-shadow:0 8px 32px rgba(0,0,0,.3);
    padding:calc(20px + env(safe-area-inset-top)) 20px 28px;
    max-height:88vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    box-sizing:border-box;
    animation:authSlideDown .3s ease;
  }
  @keyframes authSlideDown{
    from{transform:translateY(-100%);opacity:0}
    to{transform:translateY(0);opacity:1}
  }
  .auth-overlay.open .auth-hd h4{font-size:20px}
  .auth-overlay.open .auth-form input{font-size:16px;padding:12px 14px}
  .auth-overlay.open .auth-submit{padding:13px;font-size:15px}
  .auth-overlay.open .auth-tabs{padding:4px}
  .auth-overlay.open .auth-tab{padding:9px 10px;font-size:13px}

  /* ========== 修改密码弹窗：移动端全屏 ========== */
  .acc-overlay.open{
    align-items:stretch;
    background:var(--bg);
  }
  .acc-overlay.open .acc-modal{
    width:100%;
    max-width:100%;
    border:none;
    border-radius:0;
    box-shadow:none;
    padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
    min-height:100vh;
    transform:none;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-sizing:border-box;
  }
  .acc-overlay.open .acc-form input{font-size:16px;padding:11px 12px}

  /* ========== 反馈弹窗：移动端全屏 ========== */
  .fb-overlay.open{
    align-items:stretch;
    background:var(--bg);
  }
  .fb-overlay.open .fb-box,
  .fb-overlay.open .fb-box-wide{
    width:100%;
    max-width:100%;
    max-height:100vh;
    border:none;
    border-radius:0;
    box-shadow:none;
    padding:calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
    min-height:100vh;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
  }
  .fb-overlay.open .fb-form textarea,
  .fb-overlay.open .fb-form input{font-size:16px}

  /* 维护周期区块：手机端输入框加大、防 iOS 缩放 */
  .mt-cycle-mode,.mt-cycle-num,.mt-cycle-weekday,.mt-cycle-monthday{font-size:16px !important;padding:9px 12px !important}
  .mt-cycle-num{width:90px}
  .mt-cycle-row{gap:8px}
  /* 下次维护确认弹窗：手机端居中显示 */
  .mt-nextmaint-box{width:92% !important;max-width:340px !important;padding:22px 20px !important}
  .mt-nextmaint-input{font-size:16px !important}
  .mt-nextmaint-title{font-size:16px !important}
}

/* ========== 移动端横屏：折线图全屏展示 ==========
   旋屏到 landscape 时，水质页折线图占满视口，便于查看长周期数据。
   用 orientation:landscape + max-height:500px 匹配手机横屏（手机横屏高度通常 <500px，
   桌面窗口高度一般 >500px），避免影响桌面端。
*/
@media (orientation:landscape) and (max-height:500px){
  /* 禁用 .card.anim-in 的 transform，否则 position:fixed 后代会以 card 为包含块而非视口 */
  #page-water .card.anim-in{animation:none !important;transform:none !important}
  #page-water .chart-outer{
    position:fixed;
    inset:0;
    z-index:1000;
    background:var(--card);
    padding:8px 12px;
    box-sizing:border-box;
  }
  #page-water .chart-wrap{
    height:calc(100vh - 16px) !important;
  }
  /* 通道标签宽度收窄，避免遮挡数据 */
  #page-water .lane-labels{width:72px}
  #page-water .lane-lbl{font-size:11px}
}

/* ========== 价值明细弹窗：底部抽屉 + 表格横向滚动 ========== */
@media(max-width:768px){
  .inv-detail-modal{align-items:flex-end}
  .inv-detail-inner{
    width:100%;
    max-width:none;
    max-height:88vh;
    border-radius:16px 16px 0 0;
    padding:16px 12px 12px;
  }
  .inv-detail-hd{margin-bottom:10px;font-size:15px}
  .inv-detail-toolbar{gap:6px;margin-bottom:10px;padding-bottom:10px}
  .inv-d-flabel{font-size:10px;min-width:24px}
  .inv-d-fbtn{padding:3px 8px;font-size:11px}
  .inv-detail-table{min-width:520px}
  .inv-d-th{padding:6px 4px;font-size:10px}
  .inv-detail-table td{padding:6px 4px;font-size:11px}
  .inv-d-name{max-width:100px;overflow:hidden;text-overflow:ellipsis}
}