`，只在窄屏把
table/tr/td 改成块级并用 `td:before{content:attr(data-lbl)}` 印字段名。
为什么不动 DOM：6 套历史回归（v130/v158/v163/v167/v219/v257）都依赖
`#smpd_rows tr.smpd-row` 选择器与 `[data-k]` 取值契约，换结构等于把既有回归全部推倒。 */
@media(max-width:820px){
/* 说明文字最多两行（手机上一屏要留给卡片，这两段第一次看过就不用再占地方） */
.smpd-tip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}
.smpd-wrap{overflow:visible}
/* 表格整体降为块级 —— 不再横向滚动
⚠ 必须连 **tbody** 一起降级：只改 table/tr/td 不够，`tbody` 仍是 `display:table-row-group`，
会按表格算法用「内容最小宽度」撑开父级 —— 实测表现为卡片右半边溢出屏幕被截断
（真浏览器截图 `_shot_1_smpd.png` 抓到的就是这个）。 */
#smpd_rows{display:block;width:100%;min-width:0;border-collapse:separate}
#smpd_rows tbody{display:block;width:100%;min-width:0}
#smpd_rows .smpd-hd{display:none}
#smpd_rows tr.smpd-row{
display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;width:100%;
background:#fff;border:1px solid var(--line);border-radius:12px;
padding:9px 11px;margin:0 0 9px;box-shadow:0 1px 3px rgba(20,40,60,.06);
}
#smpd_rows tr.smpd-row[data-locked="1"]{border-color:var(--green);background:var(--green-l)}
#smpd_rows tr.smpd-row td{display:block;border:none;padding:0;margin:0;min-width:0}
/* 换行靠这两个「零高 · 全宽」占位伪元素。
⚠ 为什么非它不可：flex-wrap 只会把子项**按 order 顺序往右填**，填不下才换行 ——
6 个只读小字格（编码/整砖/小样/库位/单位/单片kg）在窄屏下的自然宽度之和
刚好能塞进第一行，于是它们骑在搜索框那一行上、把搜索框压成 **31px**
（真机探针实测：`.smpd-td-name client=31`）。
`flex-basis:100%` + `height:0` = 在此处强制断行，且不占任何高度（跨行只靠 row-gap:0）。 */
#smpd_rows tr.smpd-row::before{content:'';flex-basis:100%;height:0;order:3}
#smpd_rows tr.smpd-row::after{content:'';flex-basis:100%;height:0;order:10}
/* 行①：产品搜索（占满剩余宽度）+ 删除按钮 */
#smpd_rows .smpd-td-name{flex:1 1 0;min-width:0;order:1}
#smpd_rows .smpd-td-name input{width:100%;height:42px;font-size:15px;padding:0 10px}
/* 行①右：删除按钮 42×42 触控区 */
#smpd_rows .smpd-td-del{flex:0 0 auto;order:2}
#smpd_rows .smpd-td-del .btn{width:42px;height:42px;font-size:20px;line-height:1;padding:0;border:1px solid var(--line);border-radius:12px;background:#fff}
/* 行②③：只读带出字段，小字两行，形如「编码 KL-001 整砖 800×800 小样 100×100」
各格宽度按「每行放得下 3 格」定：行② = 编码+整砖+小样（约 253px+间隔），
行③ = 库位+单位+单片kg（约 192px+间隔）。放不下的情况交给 flex 自动换行兜底，
因为每格自然宽度都远小于整行宽，永远不会出现单格撑破卡片。 */
/* ⚠ 下面三条「格级」规则一律带 `tr.smpd-row` 前缀 —— 上面那条通用规则
`#smpd_rows tr.smpd-row td{display:block;...;margin:0}` 的特异性是 (1,1,2)，
而 `#smpd_rows .smpd-td-qty` 只有 (1,1,0) ⇒ 会被它压掉（表现：数量/备注格没变成
flex 行、「备注」标签掉到输入框上面单独占一行、margin-top 也不生效）。
加层级后变成 (1,2,2)，稳定胜出。 */
#smpd_rows tr.smpd-row .smpd-td-ro{order:4;margin-top:7px;font-size:11.5px;color:var(--tx2);line-height:1.6;white-space:nowrap}
#smpd_rows tr.smpd-row .smpd-td-qty{order:11;margin-top:9px;flex:0 0 auto;display:flex;align-items:center;gap:6px}
#smpd_rows tr.smpd-row .smpd-td-rem{order:12;margin-top:9px;flex:1 1 110px;display:flex;align-items:center;gap:6px;min-width:0}
#smpd_rows .smpd-td-ro:before{content:attr(data-lbl) ' ';color:#8a97a6;font-size:11px}
#smpd_rows .smpd-td-ro input{border:none !important;background:transparent !important;padding:0 !important;color:var(--tx2);font-size:11.5px;min-width:0}
#smpd_rows .smpd-td-ro[data-lbl="编码"] input{width:66px}
#smpd_rows .smpd-td-ro[data-lbl="整砖"] input{width:60px}
#smpd_rows .smpd-td-ro[data-lbl="小样"] input{width:52px}
#smpd_rows .smpd-td-ro[data-lbl="库位"] input{width:46px}
#smpd_rows .smpd-td-ro[data-lbl="单位"] input{width:22px}
#smpd_rows .smpd-td-ro[data-lbl="单片kg"] input{width:36px}
#smpd_rows .smpd-td-qty:before{content:attr(data-lbl);font-size:12px;color:var(--tx2);white-space:nowrap}
/* 数量框 17px 要**保住**（比需求⑤ 的通用 16px 更大、更醒目），
两条都带 !important 时比特异性：(1,1,1) > (0,2,1)，本条胜出。 */
#smpd_rows .smpd-td-qty input{width:92px;height:42px;font-size:17px !important;font-weight:700;text-align:center;padding:0 4px}
#smpd_rows .smpd-td-rem:before{content:attr(data-lbl);font-size:12px;color:var(--tx2);white-space:nowrap}
#smpd_rows .smpd-td-rem input{flex:1 1 auto;height:42px;font-size:14px;min-width:0}
/* 下拉在手机上更高更宽，滚动选更顺手 */
#smpd_drop{max-height:62vh} /* v6.14：窄屏同步放大 */
}
/* ===== v5.05 需求3：手机端「项目列表 / 订单列表」改卡片显示 =====
老板原话：「项目列表，订单列表在手机端也是改成卡片显示」。
与需求2 同一套思路：表格加 `cardable` 标记（只标记这两个列表，其他 20+ 列表行为不变），
窄屏下把 table/tr/td 降为块级 flex，字段名由 `td:before{content:attr(data-lbl)}` 印出——
列是配置驱动的（可自定义/隐藏/换序），标签只能来自列定义，所以渲染时用 lblTd() 写进 data-lbl。
勾选格（pkTd 的 .pk-td）与 colspan 行（空态/「显示更多」/分页脚）单独处理成非卡片。
===== v5.05c：卡片排版定稿（「歪歪扭扭」返工）=====
老板原话（附订单列表手机端真机截图）：「手机端卡片信息显示的歪歪扭扭，在优化一下」。
病根是 v5.05 的字段排法 `flex:0 1 auto` + `gap` —— 字段**按内容宽度横向自由流动**，
于是每张卡、每一行的字段起点都落在不同的 X 上（越看越歪）；值里的空格还会被当成断行点，
空值那个孤零零的 `-` 就被挤到下一行单独待着；主列没值时标题更是只剩一个 `-`。
定稿改法：**一格一行 + 标签定宽左列**（标签靠悬挂缩进锁死，值全部从同一竖线起排），
并把「只有破折号」的格在窄屏整格隐藏（`.card-hide`，由 app.js cardTitleApply() 打标）。
===== v5.05d：卡片「状态」徽标叠印（悬挂缩进的副作用，老板装完 v5.05c 当场反馈）=====
老板原话（附手机截图）：「订单列表的卡片里面状态显示的还是不对，重叠了」——
截图里 `已发完` 与 `待提货` 叠成一团（读起来像「已发完提货」），还压到了左边的 `状态` 标签。
病根：**`text-indent` 是继承属性** —— 上面悬挂缩进那条的负值会被格内**每个子元素**继承，
徽标 ``（inline-block）继承后**内容宽度被算成 0**，盒子只剩 padding 的 20px
（「备货完成」本该 68px）⇒ 文字溢出到框外、两个徽标互相叠印。
修法：下面补一条「格内子元素 `text-indent:0`」（`:before` 那条只挡住标签自己，挡不住子元素）。
取证（真 Edge）：徽标盒宽 **20px → 68px**；值起点 X 仍是**唯一值**（对齐未受影响）。
⚠ 全程纯 CSS 布局 + 渲染期加 class，**DOM 一行没改**（6 套历史回归都靠元素结构）。 */
/* ===== v5.06：全站列表自动卡片化（老板「所有的界面都把手机端重新优化一下，该用卡片的就用卡片」）=====
本节规则**一条都没改** —— v5.05c/v5.05d 定稿的排版机制（一格一行 + 标签定宽左列 + 格内
`text-indent:0`）直接复用；改的只是「谁来打标」：以前只有项目/订单/工作台待办三个列表
手工写 `cardable` + `data-lbl`，现在由 app.js 的 `cardifyTables()` 在渲染出口统一补，
于是**所有列表页在手机上自动变卡片**，各页面的渲染代码一行没动。
弹窗（#modal-root）不经过渲染出口 ⇒ 备货单 A4 预览、订单明细编辑表仍保持普通表格。 */
/* ⚠ v5.06：`screen and` 不能省！A4 纸宽 ≈ 794px < 820px ⇒ `@media(max-width:820px)` 在**打印**时
同样成立，会把要打印的单据/表格也改成卡片样式（施工费单、施工结算单这类单据是要打印的）。
加上 `screen` 后：屏幕上窄屏走卡片，打印一律走桌面表格样式 —— 两边都符合预期。 */
@media screen and (max-width:820px){
table.tbl.cardable{display:block;width:100%;min-width:0;border-collapse:separate}
/* 同小样明细：tbody 必须一起降级，否则会按表格算法撑宽（卡片溢出屏幕右侧） */
table.tbl.cardable > tbody{display:block;width:100%;min-width:0}
/* 表头整行隐藏（卡片自身印字段名） */
table.tbl.cardable > tbody > tr:first-child{display:none}
table.tbl.cardable > tbody > tr{
display:flex;flex-wrap:wrap;align-items:flex-start;gap:2px 0;width:100%;
background:#fff;border:1px solid var(--line);border-radius:12px;
padding:10px 12px;margin:0 0 10px;box-shadow:0 1px 3px rgba(20,40,60,.06);
}
table.tbl.cardable > tbody > tr.click:active{background:#f7fafc}
table.tbl.cardable > tbody > tr > td{display:block;border:none;padding:0;margin:0;min-width:0;line-height:1.7}
/* ---- 通用字段格：**一格一行 + 标签定宽左列**（v5.05c 定稿，见文件头 v5.05c 说明）----
标签靠「悬挂缩进」锁在左边（padding-left + 负 text-indent，:before 自身宽 = 标签列宽）：
首行整体左移给标签，值从 `--card-lbw` 处起排，**折行的续行也从同一条竖线开始**。
⇒ 每张卡、每一行的值都从同一个 X 开始，这就是老板要的「不歪」。
⚠ 唯一的宽度旋钮：`--card-lbw`（默认 74px ≈ 6 个中文字）。标签比它长时会在列内折行，
但**值的起点不动**（宁可标签折行，也不要一行一个位置）。 */
table.tbl.cardable > tbody > tr > td[data-lbl]{
flex:1 1 100%;box-sizing:border-box;
padding:1px 0 1px var(--card-lbw,74px);text-indent:calc(-1 * var(--card-lbw,74px));
font-size:13px;color:var(--tx);word-break:break-all;
/* ⚠ `text-align:left !important` 不是随手加的：订单列表「重量」格等带**行内**
`style="text-align:right"`，行内优先级高于媒体查询（铁律 41①）⇒ 不清掉的话这一行的
「标签+值」整段被推到右边，标签跑到别的 X 上 —— 又回到「歪」。卡片里一律左对齐。 */
text-align:left !important;
}
table.tbl.cardable > tbody > tr > td[data-lbl]:before{
content:attr(data-lbl);
display:inline-block;width:var(--card-lbw,74px);text-indent:0;vertical-align:top;
color:#8a97a6;font-size:11.5px;line-height:1.8;
}
/* ⚠⚠ v5.05d 修（老板 09-13 截图：「订单列表的卡片里面状态显示的还是不对，重叠了」）：
**`text-indent` 是继承属性** —— 上面 td 的负值会被格内**每一个子元素**继承。
实测（真 Edge 探针）：状态格里的徽标 `` 是 inline-block，
继承 `text-indent:-74px` 后**内容宽度被算成 0**（盒子只剩 padding 的 20px 宽，
本该 68px），文字直接溢出到徽标框外面 ⇒ 两个徽标「叠印」成「已发完提货」，
并与左侧标签粘在一起 —— 老板看到的「重叠」就是这个。
⇒ **格内所有子元素一律 `text-indent:0`**：悬挂缩进只保留在 td 自身的首行
（`:before` 标签 + 首行纯文本），折行续行由 `padding-left` 对齐，不受影响。 */
table.tbl.cardable > tbody > tr > td[data-lbl] *{text-indent:0}
table.tbl.cardable > tbody > tr > td[data-lbl] .btn.sm{font-size:12px;padding:3px 8px}
/* 空字段不印。否则卡片上会出现一排只有字段名、没有值的「要求到货日期 出库单号 加工单号」，
纯噪声（真机截图 `_shot_2_orders.png` 一眼就看出来了）。
`:empty` 只认「一个子节点都没有」的元素，所以渲染时不能往空格里塞空格/换行。 */
table.tbl.cardable > tbody > tr > td[data-lbl]:empty{display:none}
/* v5.05c：**只有破折号**的字段格整格隐藏。`:empty` 抓不到「内容是 `-`」的格（订单列表
空值就渲染成 `-`），于是老板截图里 `单号日期 -`、`客户编码 -` 各占一整行、全是噪声。
这些格由 app.js 的 cardTitleApply() 标上 `.card-hide`（判定在渲染期，CSS 抓不到文本内容）；
★ 只在窄屏隐藏 —— 桌面表格照旧显示 `-`，信息不丢。
⚠ 第二条选择器是把特异性顶到 (0,5,5) 才压得住：**主列（勾选格后的第一格）被标 card-hide 时**，
它同时命中下面那条 `td.pk-td + td[data-lbl]`（(0,4,5)，比 `.card-hide` 单写法的 (0,3,4) 高；
写成 `td.pk-td + td.card-hide` 只是 (0,4,5) 并列、位置又更靠前 ⇒ 照样输），
结果空格以「标题样式」留在卡片顶部 —— 那正是老板截图里孤零零的那个 `－`
（**真浏览器探针抓到的**：光看 DOM 有 class 是查不出来的，必须量 computed display）。 */
table.tbl.cardable > tbody > tr > td.card-hide,
table.tbl.cardable > tbody > tr > td.pk-td + td[data-lbl].card-hide{display:none}
/* ---- 卡片标题：不印字段名、不缩进、放大加粗 ----
两个来源，声明刻意保持一致：
· `td.pk-td + td[data-lbl]` —— 主列（勾选格后的第一格），特异性 (0,4,5) 稳压下面的通用规则；
· `td.card-title` —— 没有勾选列的表（工作台待办提醒），以及 v5.05c 主列为空时
「提升」上来的第一个有值格（由 cardTitleApply() 打类）。
★ 这两条**必须排在通用 `td[data-lbl]` 规则之后**：与它同为 (0,3,4) 特异性，靠后来者胜出；
排前面的话标题会被通用规则重新印上字段名 + 缩进 74px（v5.05b 就踩过这个坑）。
★ 别给「没有勾选列」的表复用 `.pk-td` —— 下面那条 `.pk-td{order:99;margin-left:auto}`
会把标题挪到卡片右下角、贴着按钮。 */
table.tbl.cardable > tbody > tr > td.card-title{
flex:1 1 100%;order:0;display:block;
font-size:15.5px;font-weight:600;color:var(--tx);
padding:0 0 3px;text-indent:0;word-break:break-all;line-height:1.45;
}
table.tbl.cardable > tbody > tr > td.card-title:before{content:none}
table.tbl.cardable > tbody > tr > td.pk-td + td[data-lbl]{
flex:1 1 100%;order:0;display:block;
font-size:15.5px;font-weight:600;color:var(--tx);
padding:0 0 3px;text-indent:0;word-break:break-all;line-height:1.45;
}
table.tbl.cardable > tbody > tr > td.pk-td + td[data-lbl]:before{content:none}
/* v6.04：日常巡场表卡片上「项目地址」加大加黑（老板 10-07：「卡片上的项目地址加大加黑」）。
这一格是本卡片标题格（勾选格后第一格），客户名本身已 15.5px/600；地址原是小灰字 ，
这里把它提到同级并再加重 —— 扫一眼就能看见地址。桌面表格不在本媒体查询内，保持原样。 */
table.tbl.cardable > tbody > tr > td[data-lbl] small.dinsp-addr{
font-size:15px;font-weight:700;color:var(--tx);line-height:1.5;
}
/* 订单二维码：必须显式写 width/height —— SVG 上带的是 width/height **表现属性**，
CSS 优先级高于它，但只给 `max-width` 是不会把它从小缩到大的（原写法就是 max-width:72px，
60px 的码原样输出）。
v5.05c：这一格的行内样式带 `padding:6px 4px`，要用 !important 才压得住，
并且同样吃标签列的悬挂缩进（码与其它值左对齐，不再靠 margin-left:auto 甩到右边）。 */
table.tbl.cardable > tbody > tr > td[data-lbl="二维码"]{
margin-left:0;padding:4px 0 2px var(--card-lbw,74px) !important;text-indent:calc(-1 * var(--card-lbw,74px));
}
table.tbl.cardable svg{width:52px;height:52px;max-width:52px}
/* 操作列：独占一行、按钮撑开（拇指友好）；不印标签、不吃缩进 */
table.tbl.cardable > tbody > tr > td[data-lbl="操作"]{
flex:1 1 100%;order:98;display:flex;gap:8px;margin-top:4px;
padding:0;text-indent:0;
}
table.tbl.cardable > tbody > tr > td[data-lbl="操作"] .btn{flex:1 1 0;height:40px;font-size:13.5px}
table.tbl.cardable > tbody > tr > td[data-lbl="操作"]:before{content:none}
/* 勾选格：挪到卡片右下角，44px 触控区 */
table.tbl.cardable > tbody > tr > td.pk-td{order:99;margin-left:auto;padding-left:8px;text-indent:0}
table.tbl.cardable > tbody > tr > td.pk-td input{width:22px;height:22px}
/* 空态 / 「显示更多」/ 分页脚：不卡片化 */
table.tbl.cardable > tbody > tr.card-skip,
table.tbl.cardable > tbody > tr.tbl-pg-foot{
display:block;background:transparent;border:none;box-shadow:none;padding:0;margin:0;
}
table.tbl.cardable > tbody > tr.card-skip > td,
table.tbl.cardable > tbody > tr.tbl-pg-foot > td{display:block;text-align:center}
table.tbl.cardable > tbody > tr.card-skip > td:before,
table.tbl.cardable > tbody > tr.tbl-pg-foot > td:before{content:none}
/* ===== v5.49：手机端显示内容开关（后台可单独配置，见 app.js 的 mobileCfg / mbApply / mbTag）=====
老板原话：「订单列表手机端不要显示批量导入、导出、编辑、发货、批量删除、勾选框这些按钮」
+ 「最好是在后台可以单独配置手机端显示的内容」。配置存 DB.settings.mobile（`===1` 才显示
⇒ 缺省全部不显示）；app.js 的 mbApply() 按开关往 `` 挂 `mb-hide-` 状态类，
mbTag() 给批量按钮 / 勾选元素打 `data-mbk`。本节只读 body 类与 data-mbk
⇒ **桌面端不受任何影响**（body 类只在窄屏挂上，见 mbApply 自己判窄屏并在宽屏清空）。
⚠ `!important` 是**刻意**的，不是偷懒：
· 被隐藏的元素同时命中本节上面的卡片布局规则（`td[data-lbl="操作"]{display:flex}`、
`td.pk-td + td[data-lbl]{display:block}`），hide 与 show 两组特异性相同 —— 靠
「谁写在后面」决胜太脆（后人往后追加一条规则就会把已隐藏的元素复活）；
· 开关语义是「用户显式要求不显示」，本就该压过一切布局规则（与上面 `text-align:left
!important` 同一精神）。
⚠ 表头勾选列（pkTh / pkThInv 输出的 ）不用单独处理：卡片化已把整个表头行
（`tbody > tr:first-child`）隐藏掉了，见上面那条。
⚠ `data-mbk="pk"` 一个值同时覆盖三种元素：每行的勾选格 `.pk-td`（由类判定）、
「已勾选 N 条」计数提示、「清空勾选」按钮 —— 老板要的是「整套勾选功能不显示」。 */
body.mb-hide-pk td.pk-td,
body.mb-hide-pk [data-mbk="pk"]{display:none !important}
/* v5.51 修 bug（老板 09-22 原话：「配置中心手机端显示内容每行操作按钮（编辑 / 发货 等）关了显示之后
附件的下载、预览、删除不要关」）：原规则按**整列**隐藏，而这两张表的「操作」列里装的就是附件动作，
一关「操作列按钮」附件动作跟着没了 ——
· 订单详情 → 附件表（附件动作=预览 / ⬇下载 / 删除）
· 销售预算单 → 附件表（附件动作=下载 / 删除）
改法（外科手术，不是重写成"逐按钮打标"）：这两张表的操作格由渲染处挂 data-mbk="actkeep"
（附件动作属"附件区"，不是"列表行操作"），本规则用 :not() 排除掉。
⇒ 其余 40+ 张表的「操作」列（编辑 / 发货 / 去处理）行为**逐字节不变**。
⚠ 刻意不改成"给每个行操作按钮打 data-mbk=act"：那样漏掉任意一个动作按钮，方向相反的
回归（该隐藏的没隐藏）更隐蔽；按整列隐藏 + 白名单例外，错也只会错在明面上。 */
body.mb-hide-act td[data-lbl="操作"]:not([data-mbk="actkeep"]){display:none !important}
body.mb-hide-imp [data-mbk="imp"]{display:none !important}
body.mb-hide-exp [data-mbk="exp"]{display:none !important}
body.mb-hide-del [data-mbk="del"]{display:none !important}
/* v5.59 F①：行内操作按钮（mbTag 只给「点得进详情的表」里的按钮打 data-mbk="row"） */
body.mb-hide-row [data-mbk="row"]{display:none !important}
/* ★ v6.54⑱（老板 10-09 夜）：「项目管理，订单管理列表手机端卡片上不要显示操作按钮」
⇒ 挂了 m-nodact 的两张表（项目 / 订单），窄屏卡片里整块「操作」不显示。
⚠ 只影响这两张表；其余列表仍按后台「手机端显示内容」的 act / row 开关走（线上这两项是开着的）。 */
table.tbl.cardable.m-nodact td[data-lbl="操作"],
table.tbl.cardable.m-nodact [data-mbk="row"]{display:none !important}
/* v5.59 F②：订单列表状态徽章一排（撑不下才自动折行）—— 配合 app.js ordCell 去掉的
*/
.ord-badges{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.ord-badges .badge{margin:0}
/* ===== v5.05b 需求④：工作台「待办提醒」手机端也改卡片 =====
老板原话：「工作台待办提醒手机端也做成卡片」。
主体沿用 v5.05 需求3 那套机制（表格打 `cardable` + 各格 `data-lbl` + 第一格 `.card-title`），
这里只补一条：面板头上那段说明列了 12 个待办来源，手机上要占 4~5 行、
会把卡片挤出屏幕 ⇒ 截成 2 行。与 `.smpd-tip` 同一手法。 */
.dash-todo-tip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 面板头换行：`.ph` 是 `display:flex` 且不换行，而待办提醒的说明文字很长（列了 12 个待办来源），
它会抢走宽度、把 `h3` 压成**逐字竖排**（真截图 `_shot_5_todo.png` 里「📋 待办提醒（4）」
被挤成三行）。解法沿用 v5.05 那招「零高 · 全宽换行位」，只是这次占位的是真实元素 `.sp`：
让它变成 `flex-basis:100%; height:0` ⇒ 标题留在第一行、说明文字自然掉到第二行。
★ 这是**通用改善**：其它面板头的长说明在手机上同样会压标题，不止待办提醒一处。 */
.panel .ph{flex-wrap:wrap}
.panel .ph h3{flex:0 0 auto;white-space:nowrap}
.panel .ph .sp{flex:1 0 100%;height:0}
/* ===== v5.61：订单详情页头手机端改两行 =====
老板原话：「订单详情手机端单号后面的状态没有自动换行，单号很长后面的状态都超出屏幕没有显示了，
不行手机端就改成 2 行显示，第一行显示单号，第二行显示状态和分享图标」。
★ 只钉 **od-ph** 这个标记 —— 故意不动上面那条通用 `.panel .ph h3`（nowrap）：其它面板头的长说明
正靠它压住标题（v5.05 待办提醒那一修），改通用规则会连坐其他面板。
★ h3 占满整行（flex-basis:100%）后内部自由折行；单号 .od-no 转 block ⇒ 独占第一行，
后面的徽章组自然掉到第二行。
★ 长单号配 word-break:break-all：单号本身超宽时自己也能折，不再溢出屏幕。 */
.panel .ph h3.od-ph{flex:1 1 100%;min-width:0;white-space:normal}
.panel .ph h3.od-ph .od-no{display:block;word-break:break-all}
.panel .ph .od-share-mb{display:inline-flex}
/* ★ 按钮排那条「🔗 分享」在手机端让位：第二行已有图标（上一行），两条都留就是重复入口，
也不是老板要的「2 行」。只在本媒体查询内隐藏 ⇒ 桌面端丝毫不受影响。 */
.panel .ph .od-share-pc{display:none}
/* ★ v7.48（老板 10-14 13:4x：「预约信息第一行手机端没有自动换行」）——
场地预约的**记录卡片头**：v7.47 起"同一次预约的多个场地"合并成一张卡，标题串变成
「场地1、场地2 · 日期（周x）＋ 状态＋类型＋共 N 个场地」很长；上面那条通用
`.panel .ph h3{flex:0 0 auto;white-space:nowrap}`（v5.05 为「待办提醒」的长说明加的）
会把它**一路撑出屏幕**（不折行）。
⇒ 与 v5.61 那次「订单详情单号不换行」**完全同款手法**：只钉 `vrec-ph` 这个标记 —— 标题占满整行后内部自由折行。
（⚠ 这里刻意不写那次用的标记名：test-v563 有一条「该标记恰 3 处」的反回归计数断言，
在注释里引用它会被算进去 —— "注释也算源码"。）
⚠ 上面那条通用 nowrap **原样不动**（其它面板头仍靠它压标题；test-v563 有反回归断言钉着）。 */
.panel .ph h3.vrec-ph{flex:1 1 100%;min-width:0;white-space:normal}
/* 场地名串自身可在任意字间断开（长场地名不溢出）；日期与徽标各是一块，整体换行不拆散 */
.panel .ph h3.vrec-ph .vrec-vn{white-space:normal;word-break:break-word}
/* ---- 需求⑤ ③：可编辑表单元素字号 ≥16px（防 iOS 聚焦自动放大）----
iOS Safari 在 `font-size < 16px` 的输入框获得焦点时会强制把整页放大 —— 用户什么都没碰，
界面就自己变大了，正是老板说的「不能随意放大缩小」里最烦的那一种。
排除 `[readonly]`：只读带出字段（小样明细的 编码/整砖/小样/库位/单位/单片kg）是刻意的小字，
撑到 16px 会把卡片顶高一截，而用户根本不会去聚焦它们。
★ 必须用 `!important`：站内大量输入框带着行内 `style="font-size:12px"`，
而行内样式优先级高于媒体查询（v5.05 铁律 41①），不加就压不过去。 */
input:not([readonly]), select, textarea{font-size:16px !important}
}
/* ===== v4.7-114：自由画布布局编辑器（场地屏排版） ===== */
.vle-mod{position:absolute;border:1px dashed rgba(255,255,255,.28);background:rgba(90,120,180,.14);border-radius:6px;cursor:move;box-sizing:border-box}
.vle-mod:hover{border-color:rgba(120,160,230,.75);background:rgba(90,120,180,.22)}
.vle-mod.sel{border:2px solid #4a90d9;background:rgba(74,144,217,.22);box-shadow:0 0 0 1px #4a90d9}
.vle-mod .vle-h{user-select:none}
.vle-mod.sel .vle-h{border-color:#e8f1ff}
/* ============ v4.27 增补⑳：视频会议中心（大厅/切页保活胶囊/录制/邀请/预约） ============ */
/* 会议层：body 级固定层（不在 #app 内，切页不销毁 → 声音与连接保持） */
.meet-wrap{position:fixed;left:0;top:0;right:0;bottom:0;z-index:180;background:var(--bg);display:flex;flex-direction:column;padding:12px 16px}
.meet-wrap .meet-active{height:100%}
/* 底部胶囊条：切到其他页面时会议收起为胶囊（点返回会议复原） */
.meet-capsule{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:190;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;box-shadow:0 10px 28px rgba(15,40,70,.28);max-width:calc(100vw - 24px)}
.meet-capsule .mc-ic{font-size:20px;line-height:1}
.meet-capsule .mc-t{font-weight:600;font-size:13px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meet-capsule .mc-n{color:var(--tx2);font-size:12px;white-space:nowrap}
/* 右下角邀请/预约提醒弹窗（30 秒自动消失） */
.meet-pop{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:195;width:288px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(15,40,70,.3);padding:12px 14px;animation:fade .2s}
.meet-pop .mp-t{font-weight:600;font-size:13px;margin-bottom:4px;color:var(--green)}
.meet-pop .mp-b{color:var(--tx2);font-size:12.5px;line-height:1.65;margin-bottom:10px}
.meet-pop .mp-f{display:flex;gap:8px}
/* 会议大厅 */
.meet-hub{padding:2px 0 28px;max-width:980px;margin:0 auto;width:100%}
.meet-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.mtab{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:8px 16px;font-size:13px;cursor:pointer;color:var(--tx)}
.mtab:hover{border-color:var(--green)}
.mtab.on{background:var(--green);border-color:var(--green);color:#fff}
/* 会中打开大厅的返回条 */
.meet-inmeet{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--green-l);border:1px solid var(--green);border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:13px}
/* 快速会议 + 房号加入 双卡 */
.meet-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:18px}
.meet-quick .mq{display:flex;flex-direction:column}
.meet-quick .mq .btn{margin-top:auto;align-self:flex-start}
/* 分区标题 */
.meet-sec-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;font-size:14px}
/* 固定会议室卡片 */
.meet-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:12px}
.meet-room{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow)}
.meet-room.live{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.meet-room .mr-name{font-weight:600;font-size:14px}
.meet-room .mr-code{color:var(--tx2);font-size:12px;letter-spacing:1px}
.meet-room .mr-live{color:var(--green);font-size:12.5px;line-height:1.6}
.meet-room .mr-live span{color:var(--tx2)}
.meet-room .mr-idle{color:var(--tx2);font-size:12.5px}
.meet-room .mr-act{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
/* 历史会议 */
.meet-hist{display:flex;flex-direction:column;gap:10px}
.meet-hist-row{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.meet-hist-row .mh-line1{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.meet-hist-row .mh-time{color:var(--tx2);font-size:12px}
.meet-hist-row .mh-meta{color:var(--tx2);font-size:12.5px;margin:4px 0 8px}
.meet-hist-row .mh-recs{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.meet-hist-row .mh-norec{color:var(--tx2);font-size:12px}
.meet-hist-row .mh-video{width:100%;margin-top:8px}
.meet-hist-row .mh-video video{width:100%;max-width:640px;border-radius:8px;background:#000;display:block}
/* 表单字段（预约/新建会议室弹窗） */
.meet-fld{margin-bottom:10px}
.meet-fld label{display:block;font-size:12.5px;color:var(--tx2);margin-bottom:5px}
.meet-fld .meet-input{margin-bottom:0;letter-spacing:0}
/* 邀请/预约弹窗里的选人区 */
.meet-users{display:flex;flex-wrap:wrap;gap:6px;max-height:210px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:8px}
.meet-ucheck{display:flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:5px 10px;font-size:12.5px;cursor:pointer}
.meet-ucheck:hover{border-color:var(--green)}
.meet-ucheck input{margin:0}
/* 录制按钮（录制中红底闪烁） */
.meet-ctrl.rec-on{background:var(--red);color:#fff;animation:meetRecPulse 1.6s infinite}
@keyframes meetRecPulse{0%,100%{box-shadow:0 0 0 0 rgba(217,79,67,.45)}50%{box-shadow:0 0 0 8px rgba(217,79,67,0)}}
/* 移动端适配 */
@media(max-width:820px){
.meet-wrap{padding:8px 10px}
.meet-hub{padding:0 0 20px}
.meet-rooms{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.meet-quick{grid-template-columns:1fr}
.meet-pop{width:calc(100vw - 32px)}
.meet-capsule .mc-t{max-width:110px}
}
/* ============ v4.30 辅料明细「清单点选」模式（自有/第三方共用） ============ */
.auxd-bar{display:flex;gap:8px;align-items:center;margin:2px 0 10px}
.auxd-search{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:#fff;color:var(--tx)}
.auxd-search:focus{outline:none;border-color:var(--green)}
.auxd-count{font-size:12px;color:var(--tx2);background:var(--green-l);padding:3px 10px;border-radius:20px;white-space:nowrap;flex:none}
.auxd-list{display:flex;flex-direction:column;gap:8px}
.auxd-it{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 13px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:.12s;user-select:none}
.auxd-it.sel{border-color:var(--green);background:var(--green-l);box-shadow:inset 3px 0 0 var(--green)}
.auxd-it.orph{border-style:dashed;background:#fbfcfd}
/* v5.59 D②：无库存行灰掉（数量仍可显示"已选"，但点「＋」会被 auxdClamp 拦下并提示去目录补库存）。
⚠ 刻意**不用** pointer-events:none —— 那样点了完全没反应，老板会当成界面卡死；
让它照常触发 auxdStep → 走 auxdClamp 弹出「库存为 0，先去补库存」的提示，才知道下一步该干什么。 */
.auxd-it.nostock{opacity:.55;filter:grayscale(.6)}
.auxd-it.nostock .auxd-t1 b{color:var(--tx2)}
.auxd-it .auxd-lf{flex:1;min-width:0}
.auxd-t1{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.45}
.auxd-t1 b{font-size:15.5px;color:var(--tx);word-break:break-word} /* v5.36：连续无空格长串（英文型号等）也能断行，不再撑宽弹窗 */
.auxd-t1 i{font-style:normal;font-size:12px;color:var(--tx2);background:#eef1f4;border-radius:5px;padding:1px 7px;white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis} /* v5.36：规格标签限宽截断——nowrap 无上限时长规格（1200×2600mm 抛光面/磨边…）会把弹窗内容区撑宽，手机端 .mb 可横向拖动（老板 09-19：「添加辅料明细弹窗在手机上还是能左右晃，改成固定不动的」）；max-width 用百分比自适应任意屏宽 */
.auxd-t1 .auxd-sup{font-style:normal;font-size:11px;color:var(--blue);background:#eaf1fb;border-radius:5px;padding:1px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.auxd-t1 .auxd-tag{font-style:normal;font-size:11px;color:var(--orange);background:#fdf0e0;border-radius:5px;padding:1px 7px;white-space:nowrap;max-width:38%;overflow:hidden;text-overflow:ellipsis} /* v5.36：保留行标签同样限宽（同款防撑宽） */
.auxd-t2{font-size:12px;color:var(--tx2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auxd-t3{margin-top:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.auxd-t3 label{font-size:12px;color:var(--tx2)}
.auxd-fl{font-size:13.5px;padding:6px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--tx);max-width:180px}
.auxd-qw{display:flex;align-items:center;gap:7px;flex:none}
.auxd-b{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--green);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:.12s;padding:0}
.auxd-b:hover{border-color:var(--green);background:var(--green-l)}
.auxd-b.add{background:var(--green);color:#fff;border-color:var(--green);font-weight:700}
.auxd-b.add:hover{background:var(--green-d);border-color:var(--green-d)}
.auxd-b:active{transform:scale(.9)}
.auxd-q{width:58px;height:42px;text-align:center;border:1px solid var(--line);border-radius:10px;font-size:16.5px;font-weight:600;background:#fff;color:var(--tx);flex:none;-moz-appearance:textfield}
.auxd-q::-webkit-outer-spin-button,.auxd-q::-webkit-inner-spin-button{-webkit-appearance:none}
.auxd-ft{font-size:13px;color:var(--tx);align-self:center;white-space:nowrap}
.auxd-ft b{color:var(--green)}
.auxd-empty{font-size:13px;color:var(--tx2);text-align:center;padding:26px 12px;border:1px dashed var(--line);border-radius:12px;background:#fbfcfd}
.auxd-def{margin-bottom:12px;padding:10px 12px;background:var(--green-l);border:1px solid #d3def0;border-radius:10px}
.auxd-def label{display:block;font-size:12px;color:var(--tx2);margin-bottom:6px}
.auxd-def select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:#fff;color:var(--tx)}
.auxd-def select:focus{outline:none;border-color:var(--green)}
/* ============ v4.31 第三方辅料「楼层单子」卡 ============ */
.auxd-st-h{font-size:12px;color:var(--tx2);margin:2px 0 8px}
.auxd-st{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px;background:var(--green-l)}
.auxd-st1{display:flex;align-items:center;gap:8px;font-size:13.5px;flex-wrap:wrap}
.auxd-st1 b{color:var(--green-d,var(--green))}
.auxd-st1 span{font-size:12px;color:var(--tx2)}
.auxd-st1 em{font-style:normal;font-size:11.5px;color:var(--tx2);margin-left:auto;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auxd-st2{font-size:12px;color:var(--tx2);margin-top:4px;line-height:1.5;word-break:break-all}
.auxd-st3{display:flex;gap:6px;margin-top:6px}
@media(max-width:420px){
.auxd-b{width:38px;height:38px;font-size:22px}
.auxd-q{width:50px;height:38px;font-size:15.5px}
.auxd-t1 b{font-size:14.5px}
.auxd-st1 em{display:none}
}
/* ============ v5.32 自有辅料图片 + 按分类显示（老板 09-18） ============ */
/* 产品目录：分类筛选 chips 行（渲染在 #zone_auxprods 内，随表格一起 zone 刷新） */
.auxp-cats{display:flex;flex-wrap:wrap;gap:6px;margin:0 14px 8px}
/* 产品目录 / 清单行：无图占位（灰底 📦；尺寸由调用方 inline 给定，与有图缩略图同格不塌陷） */
.auxp-noimg{display:flex;align-items:center;justify-content:center;background:#f2f5f8;border:1px dashed var(--line);border-radius:8px;font-size:18px;color:#b9c4cf;flex:none}
/* 产品编辑弹窗：未上传时的上传占位 */
.auxp-addimg{width:86px;height:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#fbfcfd;border:1px dashed var(--line);border-radius:8px;cursor:pointer;color:var(--tx2);font-size:12px;box-sizing:border-box}
.auxp-addimg:hover{border-color:var(--green);color:var(--green);background:var(--green-l)}
/* 添加辅料明细清单：行内分类标签 + 分类筛选下拉 */
.auxd-t1 .auxd-cat{font-style:normal;font-size:11px;color:#2f7a5a;background:#e8f5ee;border-radius:5px;padding:1px 7px;white-space:nowrap;max-width:38%;overflow:hidden;text-overflow:ellipsis} /* v5.36：分类标签限宽（同款防撑宽；test-v531 只断言 .auxd-cat{ 类存在，追加属性不冲突） */
.auxd-catsel{padding:11px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:#fff;color:var(--tx);flex:none;max-width:150px}
.auxd-catsel:focus{outline:none;border-color:var(--green)}
@media(max-width:420px){
.auxd-catsel{max-width:112px;font-size:13px;padding:10px 8px}
.auxd-t1 .auxd-cat{font-size:10.5px;padding:1px 6px}
}
/* ============ v5.33 批量设分类 + 分类改名（老板 09-18 晚） ============ */
/* 产品目录：批量模式操作条（已选计数 + 全选 + 分类输入 + 应用 + 退出），渲染在 #zone_auxprods 内 chips 行之前 */
.auxp-bbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 14px 8px;padding:10px 12px;background:#f8fafc;border:1px solid var(--line);border-radius:10px}
.auxp-bbar input{padding:9px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.auxp-bbar input:focus{outline:none;border-color:var(--green)}
/* 产品目录：批量模式行内勾选框（塞在产品名称单元格内，勾选框不加列；库存列为 v5.33 新增第 6 列） */
.auxp-ck{width:16px;height:16px;accent-color:var(--green);cursor:pointer;vertical-align:-2px;margin-right:6px}
/* v5.33：产品目录「库存」列行内输入框（直接改库存，失焦/回车即存） */
.auxp-stock{width:86px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;color:var(--tx);background:#fff}
.auxp-stock:focus{outline:none;border-color:var(--green)}
.auxp-stock::placeholder{color:#b9c4cf}
/* v5.33：订单列表「导航红点溯源」——触发左侧导航「订单管理」角标的单，行左缘红条标记（与 row-urge 加急整行标红区分开） */
.row-ordhot>td:first-child{box-shadow:inset 3px 0 0 #e5484d}
/* ============ v4.72 纯联网版：同步状态横幅 + 写锁置灰 ============ */
#sync-banner{position:fixed;top:0;left:0;right:0;z-index:99990;display:none;align-items:center;justify-content:center;font-size:13px;padding:6px 12px;text-align:center;pointer-events:none;line-height:1.5}
#sync-banner.sb-red{display:flex;background:#dc2626;color:#fff}
#sync-banner.sb-yellow{display:flex;background:#d97706;color:#fff}
#sync-banner.sb-green{display:flex;background:#16a34a;color:#fff}
body.wlock .btn-write{opacity:.4;pointer-events:none}
/* v4.91：ICP 备案号页脚——《非经营性互联网信息服务备案管理办法》第13条：主页底部中央标明备案编号 + 其下方链接备案系统网址 */
.beian-foot{margin-top:14px;text-align:center;font-size:12px;line-height:1.6;color:var(--tx2)}
.beian-foot a{color:var(--tx2);text-decoration:none;border-bottom:1px dotted currentColor}
.beian-foot a:hover,.beian-foot a:active{color:var(--ac);border-bottom-color:var(--ac)}
/* 静态兜底（index.html 内 #beian-fallback）：JS 未加载时也满足「主页底部中央」；
#app 有内容（JS 已渲染）时隐藏，改由 app.js 登录页内的 .beian-foot 显示，避免两条重复 */
#beian-fallback{position:fixed;left:0;right:0;bottom:calc(6px + env(safe-area-inset-bottom,0px));z-index:2;margin-top:0;pointer-events:none}
#beian-fallback a{pointer-events:auto}
#app:not(:empty)~#beian-fallback{display:none}
/* ===== v5.38 ②（老板 09-19：「所有的弹窗在手机端都改成不能左右滑动，一个界面显示不下的就自动换行」）=====
本节只作用于**手机端**（`@media screen and`：A4 纸宽 ≈794px < 820px，不加 screen 打印单据会被打歪，v5.06 铁律）。
① 弹窗内容区一律不许横滑：`.modal .mb{overflow-x:hidden}` —— 手机端任何弹窗都拖不动。
桌面端（≥900px）那条 `.modal .mb{overflow-x:auto}` **不动**：键鼠宽屏上横滚是合理操作，
老板说的是手机端。同时关掉**内层**滚动容器（`.table-wrap` 默认 `overflow-x:auto`，
弹窗里大量明细表还带行内 `max-height/overflow:auto`）⇒ 必须 `!important` 才压得住行内样式。
⚠ 与 v5.37 ① 的关系：那次是「对症」——诊断不出是哪个子元素撑宽，只给辅料明细/退货明细
两个弹窗挂 .mb-nox；这次是「机制级」——**所有**弹窗一律关死。.mb-nox 保留（它还作用于桌面端，
且被 test-v536 断言钉住），两者并存不冲突。
② 「显示不下的自动换行」不是靠裁切：**弹窗内的表格交给卡片化**（app.js cardifyTables 新增
弹窗模式，由 openModal/scheduleCardify 打标）。只写 overflow-x:hidden 会把宽表格右半边
直接裁掉、内容变得不可达 —— 这是 v5.05 那轮踩过的坑，卡片化才是「换行地显示完整」。
配套压掉撑宽源头：表格 min-width / table-layout:fixed / 行内列宽 / 单元格 nowrap / 输入框固有宽。
③ thead 表（表头在 里、不在 tbody 首行）：卡片模式默认规则「隐藏 tbody 第一行」会
**误隐藏第一行真数据**（那是给「表头就写在 tbody 首行」的表格用的）⇒ 渲染期给这类表加
`.card-thead` 类，这里把两条规则反过来：隐藏 thead、保留 tbody 第一行。 */
@media screen and (max-width:820px){
.modal .mb{overflow-x:hidden}
.modal .mf{flex-wrap:wrap}
#modal-root .mb .table-wrap{overflow-x:hidden !important}
/* 撑宽源头逐条压掉（!important：站内大量行内 style，其优先级高于媒体查询 —— v5.05 铁律 41①） */
#modal-root table.tbl{min-width:0 !important;width:100% !important;table-layout:auto !important}
#modal-root table.tbl th,#modal-root table.tbl td{white-space:normal !important;word-break:break-word;overflow-wrap:anywhere;max-width:100%}
/* 列宽拖拽存下来的行内 th 宽度（v5.31 ⑧ / v5.34 ①）窄屏一律不生效：几十列固定宽之和超过屏宽
又会把内容推出可视区，而手机上本来也拖不了列宽 */
#modal-root table.tbl[data-colkey] th,#modal-root table.tbl[data-colkey] td{width:auto !important;min-width:0 !important}
#modal-root .mb img,#modal-root .mb video,#modal-root .mb canvas{max-width:100%;height:auto}
#modal-root .mb svg{max-width:100%}
#modal-root .mb input,#modal-root .mb select,#modal-root .mb textarea{max-width:100%;box-sizing:border-box}
#modal-root .mb .row,#modal-root .mb .toolbar,#modal-root .mb .tabs{flex-wrap:wrap;max-width:100%}
#modal-root .mb .row>*,#modal-root .mb .grid2>*,#modal-root .mb .toolbar>*{min-width:0}
#modal-root .mb pre,#modal-root .mb code{white-space:pre-wrap;word-break:break-word}
/* thead 表卡片化配套（与 app.js 的 .card-thead 打标成对出现） */
table.tbl.cardable.card-thead > thead{display:none}
table.tbl.cardable.card-thead > tbody > tr:first-child{display:flex}
/* ===== v5.44（老板 09-21）：「添加考勤组手机端的界面也修改一下，把所有手机端的界面都优化一下，
要好操作、好看、美观，不要搞得乱七八糟的界面」=====
★★ ① 「0 宽列」根因修复（整张表单被撕成「一列 0 宽 + 一列满宽」）
现象（真机 390×844 实测）：「添加考勤组」弹窗里「组名 / 上班时间 / 休息时长」三个输入框
只剩 **26px 宽**（.field 宽 0 ⇒ input width:100% = 0 + padding 24 + border 2 = 26），
而「考勤方式 / 下班时间 / 加班折算」却是满宽；`.grid2` 的 used value 打印出来是 `0px 302px`。
根因：`.grid2` 在手机端是**单列**（grid-template-columns:1fr，CSSOM 实测生效），
但 app.js 里 4 处 `.field` 写了**行内** `style="grid-column:span 2"`（考勤组「加班方式」+
企微通知 3 处）。Grid 自动布局遇到 `span 2` 而显式列只有 1 条时会**创建隐式列**，
隐式列宽按内容取 max-content（那个 select 的最长选项 ≈302px）⇒ 第一列（1fr）被压到 0。
⇒ 单列时必须把 span 归位到 `auto`。**内联样式优先级高于媒体查询 ⇒ 必须 !important**
（同 v5.05 铁律 41① / v5.38 ② 的写法）。
为什么以前没发现：桌面端是两列，`span 2` 本来就该跨两列 ⇒ 桌面完全正常；jsdom 不排版 ⇒ 测试全绿。
这是典型的**静默失败**：只有真机窄屏才看得见。 */
#modal-root .mb .grid2 > *{grid-column:auto !important}
/* ② 触控尺寸达标（手机端弹窗内）---------------------------------------------
真机实测（390×844，「添加考勤组」）：勾选框只有 **13×13px**（工作日 7 个 + 角色 4 个
共 11 个）、单选 13px、输入框高 40~41px、页脚按钮 40px —— 全都低于 44px 的触控基线，
手指点不准（老板说的「好操作」直接落在这上面）。放大后逐条真机复测。
⚠ 表格内的勾选框单独给 18px：手机端表格已卡片化，20px 会把勾选列的标题挤变形。 */
#modal-root .mb input[type="checkbox"],#modal-root .mb input[type="radio"]{width:20px;height:20px;min-width:20px;min-height:20px;margin:0}
#modal-root .mb table.tbl input[type="checkbox"],#modal-root .mb table.tbl input[type="radio"]{width:18px;height:18px;min-width:18px;min-height:18px}
#modal-root .mb input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#modal-root .mb select,#modal-root .mb textarea{min-height:46px}
#modal-root .mb textarea{min-height:76px}
#modal-root .mf .btn{min-height:46px;padding:12px 20px;font-size:15px}
/* ③ 括号里的「补充说明」不再贴着一行挤（勾选项文字可读性）：行内勾选/单选标签统一给足
行高与最小高度，长名字不再被压成竖条（实测「店长」「销售」曾变成 43×51px 的竖条）。 */
#modal-root .mb label{line-height:1.5}
/* ④ 行内勾选/单选选项组：从「小方框 + 贴着字」升级为**整块可点的标签**
真机实测：勾选框放大到 20px 之后，label 整块仍只有 **50×20px**（手指点的是标签不是方框）
⇒ 给足内边距与最小高度，让真实可点区域 ≥44px；短线选项（周日…周六）在容器的
`flex-wrap:wrap` 里自动排成**标签云**，长选项（如「大小周（大周周六上班 / 小周双休，交替轮换）」）
自动独占一行 —— 两种情况都不用改 app.js。
⚠ 必须 `!important`：这些 label 的 `display:inline-flex;gap:4px;margin:…` 全是**行内样式**
（站内 4 处 grid-column:span 同理，见 ①）。 */
#modal-root .mb label[style*="inline-flex"]{
display:inline-flex !important;align-items:center !important;gap:8px !important;
min-height:44px;padding:7px 12px;border-radius:9px;background:var(--bg);
box-sizing:border-box;margin:0 8px 7px 0 !important;font-size:13.5px !important;
}
#modal-root .mb label[style*="inline-flex"]:active{background:var(--green-l)}
/* ⑤ 字段间距收紧：手机端屏幕金贵，`14px` 的字段间距在 10 个字段的弹窗里白吃掉 140px
（真机实测「添加考勤组」内容高 1498px、可视只有 678px）。 */
#modal-root .mb .field{margin-bottom:11px}
#modal-root .mb .fld-note{font-size:11.5px}
}
/* v5.59 需求I（老板 09-23「各种界面右边和底下的双滚动条优化一下」）——全站滚动条细化。
现象：内容区 / 弹窗 / 表格横向滚动各自长出一条**又宽又实**的滚动条，与窗口滚动条并排
⇒ 看着像"两个滚动条"。v5.58 ⑫ 已把**导航栏**那条藏掉（它最碍眼，菜单一多就有）。
本版做**全站统一**：宽/高收窄到 6px、轨道透明、滑块半透明，鼠标移上去才加深。
⚠ 铁律：只改**外观**，一条滚动能力都不关 —— 不许用 overflow:hidden（会把内容裁掉，
导航栏菜单项会点不到），也不动任何容器的 overflow 值。
⚠ `*` 的特异性低于 `.nav{scrollbar-width:none}` ⇒ 导航栏仍然不显示滚动条，不被本条覆盖。 */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.34)}
::-webkit-scrollbar-corner{background:transparent}
*{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}
/* v5.59 需求L（老板 09-23「销售预算单里的输入框改成圆润一点好看一点」「明细输入框加高一点」
＋「项目信息里所有输入框改成一样宽」）：
· 圆润：边框倒角 10px、内边距加大、聚焦时外发光（只改外观，不改任何值 / 行为）。
· 加高：明细行内输入框原先只有浏览器默认高度（老板看着"很扁"）⇒ padding 8px 11px +
min-height 36px、字号跟正文 14px（不改行高逻辑，表格自己会撑开）。
· 等宽：项目信息是 kv 两列表，输入框 width:100% ⇒ 一列多宽就多宽；min/max 只是防极端屏。
⚠ 选择器钉在 #bq_body（bqDetail 弹窗正文容器）⇒ 只影响销售预算单，其它弹窗零波及。
⚠ 不碰 button / a —— 只 input / select / textarea。 */
#bq_body input,#bq_body select,#bq_body textarea{
border:1px solid var(--line);border-radius:10px;padding:8px 11px;background:var(--bg);
min-height:36px;font-size:14px;line-height:1.4;box-sizing:border-box;
transition:border-color .15s,box-shadow .15s;
}
#bq_body input:focus,#bq_body select:focus,#bq_body textarea:focus{
outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(1,39,108,.12);
}
#bq_body table.kv td input{width:100%;min-width:210px;max-width:340px}
/* v5.70 ①：第三方采购单「采购明细」—— 输入框跟随列宽（改列宽，输入框自动跟着变）
改之前：列宽写在 （重量70/数量60/楼层60/单价80），输入框又各写一套死值
（单位56/重量66/数量58/楼层58/备注 min-width:70）⇒ 两组数字互不相关，改列宽输入框不动。
现在：① 输入框 width:100% + box-sizing:border-box ⇒ 宽度只由单元格决定，且总能填满；
② size="1" 压掉 input 默认 size=20 的固有宽度（table-layout:auto 时会被撑到 ~180px）；
③ 宽屏 table-layout:fixed ⇒ 列宽只认 | ，跟随是真跟随；窄屏（≤820）由 v5.05 的
媒体查询强制回 auto 并走卡片化，size="1" 兜底不会把卡片撑爆。
⚠ 选择器钉在 #tpo_rows（第三方采购单明细表）⇒ 其它弹窗零波及。 */
@media screen and (min-width:821px){
/* min-width：fixed 布局下列宽严格按 | ，容器装不下就要**横向滚动**而不是把列压扁。
实测容器 720px、定宽合计 968px ⇒ 不写 min-width 会被压回 720，宽列塌成 56px。 */
#tpo_rows{table-layout:fixed;min-width:968px}
}
#tpo_rows input.tpo-in{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
/* v5.71 需求⑨：新建订单「所属项目」输入框加到最宽顶到右边（老板 09-24）
⚠ 根因：站内搜索框统一被 srchClearApply 包一层 `.srchw`，而 `.srchw` 是 **inline-flex**
⇒ 宽度随内容，输入框看着没顶满、右侧留一条空白（这才是「加宽顶到右边」的成因）。
⚠ 只做 #op_picker 局部覆盖：`.srchw` 是全站共用的（工具栏里的搜索框本来就该是窄的），
全局改成 flex/100% 会把别处布局撑破。
⚠ 这里不添加任何新按钮 —— 清除按钮复用既有的 `.srch-x`（v4.7-24 就有），
只是它在这个场景里由 srchXPin() 判定为**常显**。 */
#op_picker .srchw{display:flex;width:100%}
/* ============ v5.77 ② 角色编辑器手机端优化（老板 09-25 上午「角色权限设置手机端操作不方便」） ============
· 桌面端零变化：① .bp-cell 是从 app.js 行内样式**逐字平移**成 class（桌面效果等价）；
② 手机端变形全部收在 @media screen and (max-width:820px)（screen 关键字保打印安全）。
· 采集链零改动：roleSave 只认 [data-pk]/[data-dash]/[data-kqcfg]，此处不动任何 name/data-pk。
· 真浏览器取证（jsdom 不算布局）：Edge 无头 375px 截图 + 探针量勾选框可点区与卡片无横向溢出。 */
.bp-cell{display:inline-flex;align-items:center;gap:4px;margin:2px 12px 2px 0;font-size:12.5px;cursor:pointer}
/* v5.78④：按钮权限格子的位置小字直接可见（老板 09-25「按钮也没有显示位置在哪里」——
位置原来只在 title 悬浮里，手机端没有悬浮永远看不到；现在格子内常显小字，title 保留） */
.bp-cell .bp-loc{font-style:normal;font-size:11px;color:var(--tx2,#8a94a6);margin-left:2px;white-space:nowrap}
@media screen and (max-width:820px){
/* ── 主权限表 perm-grid：三列宽表 → 「一个权限项一张卡」（DOM 一行不改）── */
table.perm-grid{display:block;width:100%;border-collapse:separate}
table.perm-grid > tbody{display:block;width:100%}
table.perm-grid > tbody > tr:first-child{display:none} /* 表头行（模块/数据范围/操作权限，全 th）藏掉 */
table.perm-grid > tbody > tr{display:block;border:1px solid var(--line);border-radius:8px;margin:0 0 8px;padding:6px 10px;background:var(--card,#fff)}
table.perm-grid > tbody > tr.perm-grp-tr{margin-top:10px;background:var(--bg2,#f2f4f8)} /* 分组头保留成标题条 */
table.perm-grid > tbody > tr > td{display:block;border:none;padding:3px 0;text-align:left !important}
table.perm-grid > tbody > tr > td:first-child{font-weight:600;white-space:normal}
/* 二、三列块级后各印一行小标签（组头/子行的 colspan 格自带说明文字，不印） */
table.perm-grid > tbody > tr > td:nth-child(2):before{content:'数据范围';display:block;font-size:11px;color:#8a97a6}
table.perm-grid > tbody > tr > td:nth-child(3):before{content:'操作权限';display:block;font-size:11px;color:#8a97a6}
table.perm-grid > tbody > tr > td[colspan]:before{content:normal}
/* ── 勾选框 chip 化：可点区 ≥36px，勾选框放大到 17px ── */
.perm-grid label, .bp-cell{display:inline-flex;align-items:center;vertical-align:middle;margin:3px 8px 3px 0;padding:5px 10px;background:var(--bg2,#f2f4f8);border-radius:8px;font-size:13px;min-height:36px;box-sizing:border-box}
.perm-grid label input[type=radio], .perm-grid label input[type=checkbox], .bp-cell input[type=checkbox]{width:17px;height:17px;vertical-align:middle}
}
/* v6.04：日常巡场表列表「项目地址」的默认样式 —— 原来写在行内 style 里，挪到类上，
好让上面 media (max-width:820px) 的卡片规则能覆盖它（行内样式是覆盖不动的）。
桌面 = 小灰字（与改前完全一致）；窄屏卡片 = 加大加黑（见上面的 cardable 规则）。 */
.dinsp-addr{color:var(--tx2)}
/* v6.24：地图页「贴底」（老板 10-08：「地图底下还是有一个空白条」）
—— `.main` 的底部内边距是桌面 22px / 手机 90px＋安全区（见上面两条 .main 规则），
地图再怎么精算高度都会被它顶出一条 ⇒ 本页归零，配合 pmapFit() 让页面正好一屏、不出滚动条。
⚠ v6.29（老板 10-09）：「项目地图最下面留白和左右两边一样」⇒ **撤掉 v6.24 的「贴底」**：
原先这里那条规则把地图页 .main 的底部内边距归零 ⇒ 地图一直贴到最底部，与左右留白不一致。
现已删除该规则 ⇒ 地图页沿用 .main 的默认内边距（桌面 22px / 手机 90px＋安全区）。
⚠ 但手机端那个 90px **其实并不等于左右的 14px**（老板 10-15 又报「底下还空了一截」）
⇒ 真正的"与左右一致"由下面 v7.63 那条规则实现，本条只保留历史结论。
`body.pg-pmap` 标记仍由 pageProjMap() 挂着（无副作用，留作将来再调时的挂点）。 */
/* ★ v7.63（老板 10-15 00:0x「项目地图手机端地图框底下还空了一截，能不能底下和左右留一样的距离固定不动」）：
窄屏下 `.main` 的**底部**内边距是 90px＋底部安全区（见上面那条 ≤820px 的 .main 规则），而**左右**只有 14px
⇒ 地图容器按 pb 精算到"正好填满"后，底部仍比左右多出一大截（iPhone 上 90＋34＝124px vs 左右 14px）。
⚠ v6.29 当时撤掉 v6.24 的「贴底」只是把底部从 0 退回 90px，**并没有真的做到"与左右一致"** —— 本版才算做到。
做法：**地图页**在窄屏下把底部内边距改成**与左右同一个表达式**（14px＋左右安全区）。
⚠ 这里特意取**左右**那侧的安全区（不是底部那侧），才能让"底部 ≡ 左右"严格相等：
竖屏时两者都是 0 ⇒ 地图四周各留 14px；横屏（刘海在左）时底部等于左边，仍与左右同距。
另：这样写也**不会在 styles.css 里多出**一条底部安全区的 env() —— 包自检会数那个串的出现次数。
⚠ 留白是**常量表达式**，不随滚动位置／地址栏伸缩变化 ⇒ 地图框底部与左右始终同距（老板要的「固定不动」）；
pmapFit() 读的是 .main 的实测 paddingBottom，本条一改它自动跟着适配，**无需改 JS**。
⚠ 只作用于**地图页**+**窄屏**：桌面端（左右 26 / 底部 22）与其它页面的底部 90px 留白一字不动。 */
@media screen and (max-width:820px){
body.pg-pmap .main{padding-bottom:calc(14px + env(safe-area-inset-left,0px))}
}
/* ★ v7.63②（老板 10-15 00:1x「手机端找项目里导航栏图标下面的找项目3个字和图标隐藏不要，
搜产品名称和搜区域的搜索框分上下两条，宽度改成界面最宽，下面筛选时间的和在地图显示放一排中分各占一半」）：
**只作用于「找项目」页的工具栏**（`.toolbar.fp-bar` 由 pageFindProj 打）**＋ 窄屏**：
① 标题标签「🔍 找项目」整块隐藏（手机端它占了整整一行，下面的搜索框才是真正要用的）；
② 两个搜索框各占一整行（上下两条、宽度铺满）；
③ 时间筛选 ＋「在地图显示」并排一行、各占一半。
桌面端（≥820px）一行不变 —— 那三样加上标题在宽屏上排得下。
⚠ 搜索框的宽度必须**打在它外面那层壳上**：`srchClearApply()` 运行时会把这个 input 包进
`span.srchw`（inline-flex）—— 只给 input 设宽会被那层壳挡住（`#op_picker` 早踩过同一处）。
这里"包壳前 / 包壳后"两种形态都写（`>.srchw` 与 `>#fp_q,>#fp_aq`），谁在都不会漏。
⚠ 各占一半按 `.toolbar` 的 gap（10px）算 ⇒ calc(50% − 5px)。
⚠ 本块插在文件中段、不在末尾 —— styles.css 末尾还有 820px 段，追加到末尾会被后面的规则盖掉。
⚠ 时间下拉原来把宽度写在**行内样式**（`max-width:130px`）里 ⇒ 行内样式优先级最高，
窄屏那条 `max-width:none` 根本压不动（实测：两半分别是 130 / 222，不是各半）⇒
本版把它**挪到样式表**（下面这条顶层规则），窄屏才改得动。 */
.toolbar.fp-bar .fp-range{max-width:130px}
@media screen and (max-width:820px){
.toolbar.fp-bar .fp-title{display:none}
/* ★ v7.64：项目地图页那行标题（图标＋文字）同样藏掉 —— 手机端它纯占位置，右边的统计数字留着有用。 */
.toolbar.pm-bar .pm-title{display:none}
.toolbar.fp-bar>.srchw,
.toolbar.fp-bar>#fp_q,
.toolbar.fp-bar>#fp_aq{flex:1 1 100%;width:100%;max-width:none;min-width:0}
.toolbar.fp-bar>.srchw{display:flex}
.toolbar.fp-bar .srchw>input{flex:1 1 auto;width:100%;min-width:0}
/* 各占一半；两者**等高**（select 与 button 的默认内边距不同 ⇒ 差 3~4px，看起来不齐） */
.toolbar.fp-bar .fp-range,
.toolbar.fp-bar .fp-mapbtn{flex:1 1 calc(50% - 5px);max-width:none;min-width:0;width:auto;
height:38px;box-sizing:border-box;padding:0 10px;font-size:13px}
}
/* ============================================================ ★ v6.27⑩（老板 10-09 02:0x）
「新增巡场记录里手机端，巡场时间的输入框超出了屏幕」。
v5.58 曾修过同一字段的同一症状（`` 的**固有宽度**撑破半宽列 ⇒「右边没有收口」），
本版再加一层**更硬的收口兜底** —— 只作用于弹窗（#modal-root .mb）里的表单，不动其它布局：
① `.field` 与其中的控件一律 `min-width:0`（flex/grid 子项默认 min-width:auto 是撑宽的老根因）；
② 控件宽度钉成 `100%` + `box-sizing:border-box`（即便某端 UA 对 date 有固有宽度也压得住）；
③ `.spick`（项目/销售检索组件）也纳入 —— 它内部 `input{flex:1}` 在窄屏下同样会顶宽父级。
⚠ 刻意**不加** `-webkit-appearance:none` —— 那会把手机上的原生日期选择器外观去掉（点了不弹日历），
属于「越修越坏」；收口只需宽度约束即可。 */
#modal-root .mb .field{min-width:0;max-width:100%}
#modal-root .mb .field>input,#modal-root .mb .field>select,#modal-root .mb .field>textarea,
#modal-root .mb .field>.spick,#modal-root .mb .field>div{min-width:0;max-width:100%}
#modal-root .mb .field>input,#modal-root .mb .field>select,#modal-root .mb .field>textarea{
width:100%;box-sizing:border-box}
(日期 / 时间类输入的收口已**并入 v5.58 那条四条一组的规则**（本版给它补了 `width:100%`）——
故意不在末尾再加一条重复规则：包自检会数那条选择器的出现次数，重复写会让计数变 2 而当场报红。
⚠ 注释里同样**不抄那段选择器**（抄了照样算进计数 —— 注释自伤，本版第 5 次）。)
/* 窄屏（含手机）再压一层：检索组件的输入框不强制 150px 下限（窄屏下那是溢出的直接推手） */
@media screen and (max-width:820px){
#modal-root .mb .spick>input{min-width:0}
#modal-root .mb .grid2{grid-template-columns:minmax(0,1fr)}
}
/* ★ v6.27⑪（老板 10-09 02:13）：「手机端日常巡场表列表：搜索框单独一行加宽到底，
下面一行放状态选择框 + 新建巡场记录，清筛选删掉」。
只作用于该页工具栏（`.dinsp-bar` 由 pageDailyInspections 打，其它列表不受影响）；
桌面端（≥820px）一字不变 —— 仍是「搜索 / 状态 / 明细计数 / 新增」一行排开。 */
@media screen and (max-width:820px){
.toolbar.dinsp-bar{flex-wrap:wrap;gap:8px}
/* ★ 搜索框要打在 **.srchw** 上：srchClearApply() 运行时会自动给搜索框包一层
``（styles.css 里它是 `display:inline-flex`）＝ toolbar 的真正 flex 子项；
打在 input 上的 flex 是无效的（本版实测踩到，四处"独占一行"全没生效）。 */
.toolbar.dinsp-bar>.srchw{flex:1 1 100%;width:100%;min-width:0;display:flex}
.toolbar.dinsp-bar #ipt_dinspQ{width:100%;min-width:0}
.toolbar.dinsp-bar .sp{display:none} /* 手机端不要那个"撑开占位" */
.toolbar.dinsp-bar>select{flex:1 1 auto;min-width:0} /* 状态选择与新建按钮同一行 */
}
/* ★ v6.27⑫（老板 10-09 02:2x）：「手机端项目管理的搜索框也改成一整行，清筛选按钮也删掉」。
与日常巡场表同款做法（`.proj-bar` 由 pageProjects 打）——桌面端一字不变。 */
@media screen and (max-width:820px){
.toolbar.proj-bar{flex-wrap:wrap;gap:8px}
.toolbar.proj-bar>.srchw{flex:1 1 100%;width:100%;min-width:0;display:flex} /* 搜索框独占一行（同 dinsp-bar） */
.toolbar.proj-bar #ipt_projQ{width:100%;min-width:0}
.toolbar.proj-bar .sp{display:none}
}
/* ===== ★★★ v7.27（老板 10-13 13:2x：「为什么底部调高低的短横抓手是在明细里面跟着明细一起动的，这个是bug吧」）=====
真根因：拖拽柄原来是 position:absolute —— 而**绝对定位元素本身就是滚动内容的一部分**：
① 框自己内滚时，柄跟着内容一起滚走；
② 框不高（高度＝内容高、纵向滚动发生在外层弹窗正文）时，柄贴在**内容底部**（最后一行下面），
外层一滚照样看不见 —— 老板看到的正是②。
两步修（对齐住户电费结清区 .ems-box{overflow:auto} ＋ .ems-grip{position:sticky;bottom:0}
这一套站内已验证的「sticky 常驻、滚动时也看得见」范式）：
① app.js 的 paneGrip 里柄改 position:sticky —— 钉在框的**滚动可视口底部**；
② 明细框给一个高度上限 ⇒ 明细很长时**框内滚动**，柄不会被推到内容末尾（也让「拖柄改高低」真正有意义）。
⚠ 上限只作用于 .smpd-wrap（小样明细表）这一个框；弹窗内其它可滚容器一字不动。
⚠ 手机端也给上限：卡片化布局不受影响（#smpd_rows{display:block} 那套降级仍在，只是明细区在框内滚）；
这里只写 overflow-y，横向交给 v5.38 的 #modal-root .mb .table-wrap{overflow-x:hidden !important} 管，
不去动那条全局规则。 */
@media (min-width:821px){ #modal-root .mb .smpd-wrap{max-height:58vh;overflow:auto} }
@media screen and (max-width:820px){ #modal-root .mb .smpd-wrap{max-height:68vh;overflow-y:auto} }
/* ★ v6.27⑬⑭（老板 10-09 02:3x）：
⑬「手机端订单列表搜索框改成一整行，其他 4 个一行」
⑭「手机端发货管理搜索框改成一整行；按创建时间筛选删掉、导出按钮取消、清筛选取消；另外三个放一排」
做法与 ⑪⑫ 同款：两个工具栏各有专属类，控件由 `tbGrp()` 包成 flex 单元（`.ord-fl` / `.ship-fl`）。
桌面端（≥820px）**一字不变**。 */
@media screen and (max-width:820px){
.toolbar.ord-bar,.toolbar.ship-bar{flex-wrap:wrap;gap:8px}
.toolbar.ord-bar>.srchw,.toolbar.ship-bar>.srchw{flex:1 1 100%;width:100%;min-width:0;display:flex} /* 搜索独占一行 */
.toolbar.ord-bar #ipt_ordQ,.toolbar.ship-bar #ipt_shipQ{width:100%;min-width:0}
.toolbar.ord-bar .sp,.toolbar.ship-bar .sp{display:none}
/* 订单：状态 / 发货状态 / 列设置 / 清空筛选 —— ★ v6.34（老板 10-09 14:33
「订单列表手机端里面几个分类全部挤到一起了」）：**改「两两一行」**。
原先 `flex:1 1 0` 四等分 —— 手机可用宽约 350px ⇒ 每格仅约 81px，
而「全部发货状态」6 字 ≈75px **再加下拉箭头**就超，「✕ 清空筛选」同理，
⇒ 四个控件被压扁、相邻贴死。现在每格 ≈ 50% − 半个 gap（约 171px），
第一行「全部状态 | 全部发货状态」（两个筛选），第二行「⚙ 列设置 | ✕ 清空筛选」（两个操作）。
`min-width` 是兜底：屏再窄就**整格换行**，绝不把文字压扁（宁可两行，不要挤）。 */
.toolbar.ord-bar .ord-fl{flex:1 1 calc(50% - 4px);min-width:130px;display:flex}
.toolbar.ord-bar .ord-fl>*{width:100%;min-width:0;box-sizing:border-box;font-size:12.5px;padding-left:6px;padding-right:6px}
/* 发货：送货人 / 状态 / 列设置 —— 3 个均分一排 */
.toolbar.ship-bar .ship-fl{flex:1 1 0;min-width:0;display:flex}
/* ★ 空分组不占位（如管理员看不到「列设置」⇒ 该组为空，否则会白占 1/3 行宽） */
.toolbar.ord-bar .ord-fl:empty,.toolbar.ship-bar .ship-fl:empty{display:none}
.toolbar.ship-bar .ship-fl>*{width:100%;min-width:0;box-sizing:border-box;font-size:12.5px;padding-left:6px;padding-right:6px}
/* ══ ★ v6.52④⑥⑦（老板 10-09 22:xx）：手机端「订单列表 / 项目列表 / 发货管理列表」
都**只留「搜索框 + 新建」**，其余（筛选下拉 / 列设置 / 清空筛选 / 导出 / 导入 / 定位 /
批量删除 / 统计条）一律隐藏。
⚠ 用「**除白名单外全隐藏**」而不是逐个黑名单 ⇒ 以后工具栏再加按钮，也自动守住这条口径
（不用老板再提一次"怎么又多出来一个"）。
⚠ 白名单三样：`.srchw`（srchClearApply 运行时给搜索框包的壳）/ 裸 `input`（还没被包上的那一瞬）
/ `.m-add`（新建按钮 —— 渲染时显式打的类，见 pageOrders / pageProjects / pageShipments）。 */
.toolbar.ord-bar>*:not(.srchw):not(#ipt_ordQ):not(.m-add),
.toolbar.proj-bar>*:not(.srchw):not(#ipt_projQ):not(.m-add),
.toolbar.ship-bar>*:not(.srchw):not(#ipt_shipQ):not(.m-add){display:none}
/* ⚠ 搜索框要独占一行、拉满：**连裸 input 一起管** ——
srchClearApply 只在运行时给输入框包 `.srchw`，而「点清空筛选 → 重渲染」那一瞬还没包上
⇒ 旧规则只写 `.toolbar.ord-bar>.srchw` 会落空 ⇒ 搜索框缩成一小条（老板 10-09 报的就是这个）。 */
.toolbar.ord-bar>.srchw,.toolbar.ord-bar>#ipt_ordQ,
.toolbar.proj-bar>.srchw,.toolbar.proj-bar>#ipt_projQ,
.toolbar.ship-bar>.srchw,.toolbar.ship-bar>#ipt_shipQ{flex:1 1 100%;width:100%;min-width:0;display:flex}
.toolbar.ord-bar #ipt_ordQ,.toolbar.proj-bar #ipt_projQ,.toolbar.ship-bar #ipt_shipQ{width:100%;min-width:0}
/* ══ ★ v6.52⑤：手机端订单列表**卡片**里的「发货」按钮隐藏（同行的「编辑」等不受影响） */
.cardable .m-shipbtn{display:none}
/* ══ ★ v6.52⑧（老板 10-09 22:xx）：「手机端订单列表的状态显示隐藏」
卡片态下每行的 td 由渲染出口 `cardifyTables()` **统一补 data-lbl**（值＝列名），
而卡片态的表头行本就被 `tr:first-child{display:none}` 隐藏
⇒ 只隐藏 `td[data-lbl="状态"]` 就行；桌面端表格视图（>820px）**一字未动**。 */
table.tbl.cardable > tbody > tr > td[data-lbl="状态"]{display:none}
}
/* ===== v6.30 版本更新记录（左下角版本号点进来） ===== */
.sidebar .foot .ver .verlink{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
.sidebar .foot .ver .verlink:hover{color:#fff}
/* ★ v6.53⑪：元素图库卡片作拖拽落点时的提示（拖到哪张卡，就传给哪个产品） */
.elem-drop.elem-over{outline:2px dashed var(--ac);outline-offset:2px;background:#f6faff}
.chg-list{display:flex;flex-direction:column;gap:10px}
.chg-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:10px 14px;box-shadow:var(--shadow)}
.chg-card.chg-now{border-color:#b7e0bb;background:#f7fdf8}
.chg-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.chg-ver{font-weight:700;font-size:14px;color:var(--tx)}
.chg-date{font-size:12px;color:var(--tx2)}
.chg-badge{font-size:11px;line-height:16px;padding:0 7px;border-radius:9px;background:#e8f5e9;color:#2e7d32;border:1px solid #b7e0bb}
.chg-cnt{font-size:11.5px;color:var(--tx2);margin-left:auto}
.chg-items{margin:0;padding-left:20px;font-size:13px;line-height:1.85;color:var(--tx)}
.chg-items li{margin:0}
@media (max-width:820px){
.chg-card{padding:9px 11px}
.chg-items{font-size:12.5px;line-height:1.75}
}
/* ===== ★ v6.88⑧⑥（老板 10-11）：配置中心吸顶 =====
老板原话：「配置中心往上滚动时 ① 选择功能模块及以上的部分固定不动」。
滚动容器是整页（.layout / .main 都没有 overflow）⇒ sticky 相对视口直接可用。
① 面板的 top 由 JS 按**实测的 topbar 高度**设置（不写死像素，换机型也准）。 */
.main.cfg-sticky .topbar{position:sticky;top:0;z-index:31;background:var(--bg);padding:12px 0 10px;margin-bottom:8px}
.main.cfg-sticky [data-cfgbar]{position:sticky;top:0;z-index:30}
/* ★ v7.85（老板 10-16 20:1x）：「① 选择功能模块」由按钮排改成下拉选择 ⇒ 补一条下拉自己的样式
（全局只有 .field select / .toolbar select 两套，这里不在 .field 里、也不是工具条，不补就是浏览器默认长相）。
⚠ 故意写在 cfg-sticky 这段旁边、**不追加到文件末尾** —— 末尾还有 820px 段会盖（铁律 12）。 */
.cfg-mod-sel{min-width:240px;width:240px;box-sizing:border-box;max-width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;
font-size:14px;background:#fff;color:var(--tx);cursor:pointer}
.cfg-mod-sel:focus{outline:none;border-color:var(--green)}
/* ★ v8.04（老板 10-18 11:00）：「搜索框外框改成和右边的选择一样的形状和大小」——
搜索框原来只有一段行内 style（max-width:190px），不在任何 .field/.toolbar 里 ⇒ 浏览器默认方框，
跟右边那颗下拉完全两个样子。这里补一条与 .cfg-mod-sel **同 padding / 同圆角 / 同字号 / 同宽度**
的规则（宽度对齐靠 select 也定成 240px，见上面那条）。
⚠ 与 .cfg-mod-sel 一样写在文件中部（铁律 12：别追加末尾，820px 段会盖）。 */
.cfg-mod-q{min-width:240px;width:240px;box-sizing:border-box;padding:9px 12px;border:1px solid var(--line);
border-radius:8px;font-size:14px;background:#fff;color:var(--tx);margin-right:8px;vertical-align:middle}
.cfg-mod-q:focus{outline:none;border-color:var(--green)}
@media (max-width:820px){
.cfg-mod-sel{width:100%;min-width:0}
.cfg-mod-q{width:100%;min-width:0;margin:0 0 8px}
}
/* ★ v7.96（老板 10-17 12:48）：「登记入住 / 离开」里的输入框太方不好看 ⇒ 给它们补一套与全站一致的
圆角 / 内边距 / 聚焦态。同 cfg-mod-sel 的经验：这层不在 .field 里、也不是工具条，
**不补就是浏览器默认长相**（四四方方）。选择器统一挂在 .dorm-reg 下，不污染别处。
⚠ 同样写在文件**中部**、不追加末尾（末尾还有 820px 段会盖，铁律 12）。
⚠⚠ **一律不做原生外观重置**（那条硬属性名在此**一字不写**，v6.27⑩ 有断言扫全段）：
重置后手机点了不弹原生日期选择器 / 滚轮，属"越修越坏"（test-v629/v630 守着）。
所以这里只调边框 / 圆角 / 内边距 / 聚焦态，控件本身的系统外观一概不动。 */
.dorm-reg{max-width:420px}
.dorm-reg .rg-row{margin-bottom:12px}
.dorm-reg .rg-row>label{display:block;font-size:13px;color:var(--tx2);font-weight:600;margin:0 0 6px}
.dorm-reg select,.dorm-reg input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);
border-radius:10px;font-size:14px;background:#fff;color:var(--tx);transition:border-color .15s,box-shadow .15s}
.dorm-reg select:focus,.dorm-reg input:focus{outline:none;border-color:var(--green);
box-shadow:0 0 0 3px rgba(34,160,107,.13)}
.dorm-reg input[type=date]{min-height:42px;line-height:1.2}
@media (max-width:820px){
.dorm-reg{max-width:none} /* 手机上撑满（与其它表单一致） */
}
/* ★ v6.90①（老板 10-11 16:2x）：元素图库往下翻时**顶部标题栏 + 搜索/新建产品那一排**固定不动。
与配置中心（.cfg-sticky）同一套打法：滚动容器是整页（.layout/.main 都无 overflow）⇒
position:sticky 相对视口直接可用；工具栏的 top 由 pageElem() **实测 topbar 高度**后写进去（不写死像素）。
⚠ 这个类在 route() 开头会被统一清掉 —— 切到别的页面不该吸顶。 */
.main.elem-sticky .topbar{position:sticky;top:0;z-index:31;background:var(--bg);padding:12px 0 10px;margin-bottom:8px}
.main.elem-sticky [data-elembar]{position:sticky;top:0;z-index:30;background:var(--bg);padding-bottom:8px}
/* ===== ★ v6.90⑫：配置中心「元素图库 → 字段与选项」面板（卡片 + 选项药丸） ===== */
.ef_wrap{display:flex;flex-direction:column;gap:10px}
.ef_row{border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:var(--card)}
.ef_top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.ef_top input.ef_label,.ef_top input.ef_key{padding:7px 10px;border:1px solid var(--line);border-radius:8px;
font-size:13px;background:#fff;color:var(--tx);width:150px}
.ef_top input.ef_key{background:#f7f9fb;color:var(--tx2)}
.ef_top .sp{flex:1;min-width:8px}
.ef_tog{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--tx2);cursor:pointer;
border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:#fff;user-select:none}
.ef_tog input{margin:0}
.ef_tog:has(input:checked){color:var(--tx);border-color:#cfd9e4;background:#f4f8fd}
.ef_del{padding:6px 10px}
.ef_chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:38px;padding:6px 8px;
border:1px solid var(--line);border-radius:9px;background:#fafbfc}
.ef_chip{display:inline-flex;align-items:center;gap:2px;background:#eef4fb;border:1px solid #d9e4f0;
border-radius:999px;padding:2px 4px 2px 4px;font-size:12.5px;color:var(--tx);line-height:1.9}
.ef_chip .ef_v{padding:0 4px}
.ef_chip .ef_mv{cursor:pointer;color:#9fb0c2;font-size:9px;padding:0 2px;line-height:1}
.ef_chip .ef_mv:hover{color:var(--tx)}
.ef_chip .ef_x{cursor:pointer;color:#a8b6c6;font-size:14px;line-height:1;padding:0 5px 0 3px}
.ef_chip .ef_x:hover{color:var(--red)}
.ef_optin{flex:1;min-width:150px;border:0;outline:none;background:transparent;font-size:12.5px;
color:var(--tx);padding:6px 4px}
.ef_add{padding:5px 12px}
.ef_foot{margin-top:12px}
/* ===== ★ v6.90b（老板 10-11 17:1x）：元素图库图片角标 =====
`.elem-bbtn/.elem-xbtn` 此前**只有类名没有定位规则** ⇒ 里面的 `right:2px` 被忽略，
角标其实一直挤在图片**左上角**排着。补上定位，删除固定图片右上角。 */
.elem-xbtn{position:absolute;top:2px;right:2px;z-index:3;width:22px;height:22px;display:flex;align-items:center;
justify-content:center;border-radius:6px;background:rgba(255,255,255,.92);border:1px solid var(--line);
font-size:12px;line-height:1;text-decoration:none;color:var(--red);cursor:pointer}
.elem-xbtn:hover{background:#fff;border-color:var(--red)}
/* ★ 2026-10-25（老板：「手机端大鼎主页点击进入单个软件后没有返回到主页的按钮」）：
顶栏右侧加一个「⌂ 返回大鼎主页」，**只在窄屏显示**（桌面有侧栏，用不上这个）。
点击直达 https://shgani.vip/ 那张六张卡的主页。 */
.homebtn{display:none}
@media(max-width:820px){
.homebtn{display:inline-flex;align-items:center;justify-content:center;flex:none;
width:34px;height:34px;border-radius:9px;background:#fff;
border:1px solid var(--line);color:var(--tx);
font-size:17px;line-height:1;text-decoration:none;margin-left:2px}
.homebtn:active{background:var(--green-l)}
}
/* ═══════════════════════════════════════════════════════════════════
v9.04（2026-10-25）：顶栏标题居中 + 手机端右侧小头像（进「我的账号」）
· .topbar 变 position:relative，标题用绝对定位居中 —— 不受左右两侧按钮多少影响
· 标题 max-width 55%，超长省略，避免压住右侧操作按钮
· .tb-av 只在 <=768 显示；桌面端侧栏底部本来就有头像入口
═══════════════════════════════════════════════════════════════════ */
.topbar{position:relative}
.topbar .tb-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
margin:0;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
text-align:center;pointer-events:none}
.tb-av{display:none;flex:0 0 auto;width:28px;height:28px;border-radius:50%;margin-left:6px;
align-items:center;justify-content:center;overflow:hidden;cursor:pointer;
background:linear-gradient(135deg,#fdeec0,#f3d493 42%,#dfae52 78%,#c8912f);
color:#01276c;font-size:12px;font-weight:700;line-height:1}
.tb-av img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:768px){ .tb-av{display:flex} .topbar .tb-title{max-width:50%} }
/* v9.06（2026-10-25）：手机端彻底去掉抽屉入口（汉堡按钮）
老板：「手机端导航栏还是在」→ 底部已有分类导航。
⚠ 为什么带 !important：原有 717 行的 @media 里写了 `.hamburger{display:block}`，
不加 !important 会被它盖掉（第一次就踩了这个：判断字符串命中 227 行的 display:none，误以为已加）。
⚠ 抽屉 DOM 保留，只隐藏按钮 —— 「我的账号」「退出登录」改从顶栏小头像进。 */
@media (max-width:768px){ .hamburger{display:none !important} }
/* v9.18（2026-10-25）：编辑效果图 —— 照片自适应（宽度撑满、高度按比例、最多 48vh） */
.fx_edit_ph{text-align:center}
/* v9.22：改成「高度优先、宽度自适应」—— width:100% 会让 16:9 的图在 760px 弹窗里撑到 427px 高，
连同上面几个字段一起超过弹窗高度被截断。现在按 44vh 限高、宽度自动缩，比例不变也不会溢出。 */
.fx_edit_ph img{max-width:100% !important;max-height:44vh;width:auto;height:auto;
object-fit:contain;display:block;margin:0 auto;border-radius:8px}
/* ═══════════════════════════════════════════════════════════════════
v9.29（2026-10-25）：**五个系统的「回大鼎主页」按钮统一位置**
老板：「5个软件的房子图标能不能放同一个位置」
⇒ 统一到**右下角固定圆钮**（38px，半透明），与 ev / hui / wb 三个独立系统完全一致；
手机端抬高到 64px，避开底部那排分类 tabs。
⚠ 顶栏里的 .homebtn 原来靠 flex 排在右上角，这里用 position:fixed 把它从文档流里拎出来
（不改 app.js 结构，风险最小）。
═══════════════════════════════════════════════════════════════════ */
.homebtn{position:fixed !important;right:14px !important;bottom:14px !important;left:auto !important;top:auto !important;
width:38px !important;height:38px !important;min-width:0 !important;border-radius:50% !important;
z-index:2147483000 !important;background:rgba(255,255,255,.94) !important;
box-shadow:0 2px 12px rgba(16,30,54,.22) !important;display:flex !important;
align-items:center !important;justify-content:center !important;color:#1f2733 !important;
text-decoration:none !important}
.homebtn svg{width:19px !important;height:19px !important}
@media (max-width:768px){ .homebtn{bottom:64px !important} } /* 避开手机底部 tabs */
/* ★ 2026-10-27 13:24（老板：「右下角的悬浮的主页图标还是在」）：
手机端底栏（MobTabs）最右已经有「大鼎主页」这一项，右下角这颗悬浮圆钮是重复的。
这里整颗隐藏；桌面端本来就 display:none（见上方 .homebtn 基础规则），所以等于全端不显示。 */
.homebtn{display:none !important}
/* ★ 2026-10-27（老板：「把电脑网页版左下角的退出登录改成返回主页」）
侧栏底部那颗按钮现在是 ，补两行让链接长得跟原来的按钮一致。 */
.sidebar .foot a.logout-btn{text-decoration:none}
.sidebar .foot a.logout-btn:hover{background:rgba(120,180,255,.16);border-color:rgba(120,180,255,.38);color:#fff}
body.dd-ops .sidebar .foot a.logout-btn:hover{background:rgba(120,95,40,.18);border-color:rgba(120,95,40,.34);color:#4a3818}
| | |