）是**静态 HTML**，就写在本文件里
· 而决定显示规则的主脚本在文件**末尾**（第 1600 行以后）
· 手机打开 38 万字节的单文件，浏览器解析到 .app 那段就会先画出来 ——
等底部脚本跑起来时，用户已经看到工作台了（哪怕只闪 100ms）
所以规则不能只靠底部的 JS：必须在**解析到工作台之前**就把结论写进 CSS。
做法：在 最开头放一段**同步小脚本**，读一次地址栏，
命中「通知落地」就在 上打 data-landing="employee"，
下面这几条规则于是在第一次绘制时就已生效 —— 工作台根本不会被画出来。
（挂 而不是 ：小脚本执行时 还没开始解析。）
真正的安全边界不在这里（前端隐藏只是 UI，服务端 auth.js 才是），
这里解决的纯粹是「别让不该出现的界面闪一下」。 */
html[data-landing="employee"] .app{display:none}
html[data-landing="employee"] #empPreviewOnly{display:none}
html[data-landing="employee"] .emp-only{
display:flex;flex-direction:column;min-height:100vh;background:var(--panel-3);
}
html[data-landing="employee"] #bootMask{display:none}
html[data-landing="employee"] #loginGate{display:none}
/* 首帧身份未定时（既不是通知落地、也还没免登）：连遮罩一起提前打开，
免得「工作台先画一帧 → 遮罩才盖上来」也是一种闪。 */
html[data-landing="waiting"] #bootMask{display:flex}
/* ============ 管理权限 ============ */
.nav-chip{margin-left:auto;font-size:10px;font-weight:600;padding:1px 6px;border-radius:5px;
background:#e6f4ff;color:#1677ff;border:1px solid #bae0ff;line-height:1.6}
.perm-tb{width:100%;font-size:12px}
.perm-tb th{font-size:11px;font-weight:600;color:#64748b;padding:10px 12px;background:#fafbfc;
border-bottom:1px solid var(--line);white-space:nowrap}
.perm-tb td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.perm-tb tr:last-child td{border-bottom:0}
.perm-tb tr.hl{background:#f0f7ff}
.perm-tb .yes{color:#52c41a;font-weight:700}
.perm-tb .no{color:#cbd5e1;font-weight:700}
.perm-tb .scope{color:#1677ff;font-weight:600;font-size:11.5px}
/* 钉钉应用接入：字段对照表 */
.dt-map{margin-top:14px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
/* ⚠️ 表头说明用**块级 + 行内图标**，不要用 flex。
原因（手机端实测）：flex 里那段中文是「匿名 flex 项」，会被 flex-shrink 压到
**一个字符宽** → 整段文字变成竖排单字列，完全没法读。
中文没有空格，min-content 就是 1 个字，所以这种「图标 + 长中文」千万别用 flex 排。 */
.dt-map-h{padding:9px 12px;font-size:11.5px;color:#475569;
background:var(--panel-2);border-bottom:1px solid var(--line);line-height:1.6}
.dt-map-h svg{vertical-align:-2px;margin-right:5px;color:#94a3b8}
.dt-map .tb{width:100%;font-size:12px}
/* 手机端表格可能比屏幕宽 → 放进横向滚动容器，**别让右边的列被裁掉**
（`.dt-map` 是 overflow:hidden，不套一层的话第三列直接看不见） */
.dt-map-b{overflow-x:auto}
/* 变量名很长且没有断点（DINGTALK_CLIENT_SECRET）→ 允许断行，
否则它会把整列撑宽、手机端就得横向滚才看得到「配在哪儿」那一列 */
.dt-map .tb td .mono{word-break:break-all}
/* 窄屏：对照表改成「一条一张小卡」。
表格在手机上必然放不下三列（实测 375px 下第三列被裁掉），
而横向滚动会让「配在哪儿」默认看不见 —— 那恰恰是这张表最该被看到的一列。
所以窄屏改成竖排：第一列当标题、后两列依次往下排，三样信息都能直接看到。 */
@media(max-width:600px){
.dt-map .tb thead{display:none}
.dt-map .tb, .dt-map .tb tbody, .dt-map .tb tr, .dt-map .tb td{display:block;width:auto}
.dt-map .tb tr{padding:9px 12px;border-bottom:1px solid var(--line-soft)}
.dt-map .tb tr:last-child{border-bottom:0}
.dt-map .tb td{border-bottom:0;padding:0;line-height:1.65}
.dt-map .tb td.mono{margin-bottom:2px}
.dt-map .tb td + td{color:var(--text-2)}
}
.dt-map .tb th{font-size:11px;font-weight:600;color:#64748b;padding:8px 12px;background:var(--panel-2);
border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.dt-map .tb td{padding:9px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.65}
.dt-map .tb tr:last-child td{border-bottom:0}
.dt-map .tb td.mono{color:#1677ff;font-weight:600}
.perm-person{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
border-radius:9px;background:var(--panel)}
.perm-person + .perm-person{margin-top:8px}
.perm-person .avatar{width:30px;height:30px;font-size:11px;flex:0 0 auto}
.perm-person .nm{font-size:12.5px;font-weight:600}
.perm-person .sub{font-size:10.5px;color:#94a3b8}
.perm-person .sp{flex:1}
.perm-log{display:flex;gap:10px;font-size:11.5px;padding:8px 0;border-bottom:1px dashed var(--line)}
.perm-log:last-child{border-bottom:0}
.perm-log .t{color:#94a3b8;font-size:10.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
/* ============ 抽屉 / 弹窗 ============ */
.mask{
position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);
z-index:80;opacity:0;visibility:hidden;transition:.2s;
}
.mask.on{opacity:1;visibility:visible}
.drawer{
position:fixed;top:0;right:0;bottom:0;width:min(660px,94vw);background:var(--panel);
border-left:1px solid var(--line);z-index:90;transform:translateX(101%);
transition:transform .24s cubic-bezier(.3,.8,.3,1);display:flex;flex-direction:column;
}
.drawer.on{transform:none}
.drawer-h{
padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex:0 0 auto;
}
.drawer-h h3{font-size:15px;font-weight:600}
.drawer-h .sp{flex:1}
.drawer-b{flex:1;overflow-y:auto;padding:20px}
.drawer-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex:0 0 auto}
.modal{
position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);
width:min(520px,92vw);background:var(--panel);border:1px solid var(--line);
border-radius:var(--radius-lg);z-index:95;opacity:0;visibility:hidden;transition:.19s;
max-height:88vh;display:flex;flex-direction:column;
}
.modal.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.modal.wide{width:min(760px,94vw)}
.toast-wrap{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{
background:var(--panel-3);border:1px solid var(--line);border-radius:9px;
padding:9px 15px;font-size:12.5px;display:flex;align-items:center;gap:8px;
box-shadow:0 6px 20px rgba(0,0,0,.14);animation:tin .2s ease;
}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.toast svg{width:14px;height:14px;flex:0 0 14px}
.toast.ok svg{color:#00b42a}
.toast.err svg{color:#f53f3f}
.toast.info svg{color:#1677ff}
/* 「忘记密码」→ 联系管理员重置（员工端密码门里展开的那块） */
.adm-help{
border-top:1px dashed var(--line);padding-top:14px;margin-top:2px;
text-align:left;max-width:300px;margin-left:auto;margin-right:auto;
}
.adm-t{font-size:12.5px;font-weight:500;margin-bottom:5px}
.adm-s{font-size:11.5px;color:var(--text-3);line-height:1.7}
.adm-priv{margin-top:10px;padding-top:8px;border-top:1px solid var(--line-soft)}
.adm-list{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.adm-item{display:flex;flex-direction:column;align-items:center;gap:5px;width:52px}
.adm-item .avatar{width:34px;height:34px;font-size:13px}
.adm-nm{font-size:11px;color:var(--text-2);text-align:center;line-height:1.3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.info-list{display:flex;flex-direction:column;gap:0}
.info-row{display:flex;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.info-row:last-child{border-bottom:none}
.info-row .k{width:96px;flex:0 0 96px;color:var(--text-3)}
.info-row .v{flex:1;color:var(--text)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text-2)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:2.5px;display:block}
.bar-row{display:flex;align-items:center;gap:10px;padding:7px 0}
.bar-row .lb{font-size:12px;color:var(--text-2);width:66px;flex:0 0 66px}
.bar-row .bar{flex:1;height:8px;background:var(--panel-3);border-radius:5px;overflow:hidden}
.bar-row .bar i{display:block;height:100%;border-radius:5px}
.bar-row .vl{font-size:12px;color:var(--text-2);width:74px;text-align:right;flex:0 0 74px;font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px}
.muted{color:var(--text-3)}
.sec-title{font-size:13px;font-weight:500;margin-bottom:11px;display:flex;align-items:center;gap:8px}
.sec-title .n{font-size:11px;color:var(--text-3);font-weight:400}
.divider{height:1px;background:var(--line-soft);margin:16px 0}
@media(max-width:1180px){
/* ⚠️ 必须写 minmax(0,1fr) 而不是 1fr：`1fr` 等价于 `minmax(auto,1fr)`，
不会缩到比**内容最小宽度**还窄 —— KPI 里「17 人已查看 · 15 人已确认」这种长文案
会把整列顶宽，于是整块网格溢出视口（.kpi 又有 overflow:hidden，字就被切一半）。 */
.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-2,.grid-2b,.grid-3{grid-template-columns:minmax(0,1fr)}
}
/* ============ 移动端适配（管理端工作台）============
分两段看：
①–⑧ 「能不能用」—— 把桌面布局改造成手机形态（侧边栏收起 / 宽表横滚 / 控件换行…）；
⑨ 「好不好看」—— 层次、触控尺寸、留白节奏、字阶对比（用户：「看起来更美观一些」）。
桌面端一个像素都不动，全部包在 ≤768px 里。 */
@media(max-width:768px){
/* ① 侧边栏**整条收起**，导航改由底部标签栏承担。
以前是把侧边栏横过来当顶部滚动条 —— 8 个入口一屏只看到 2 个，
用户得猜到右边还有东西、再横着划，这正是「页面乱」的主要来源。
顶部只留 .topbar（品牌 + 面包屑 + 图标），底部放 4 个常用入口 + 「更多」。 */
.app{flex-direction:column}
.sidebar{display:none}
.tabbar{
display:flex;flex:0 0 auto;background:var(--panel);
border-top:1px solid var(--line);
/* iPhone 底部小黑条：留出安全区，别让标签被挡住 */
padding:4px 2px calc(4px + env(safe-area-inset-bottom,0px));
}
/* ② 主区：侧边栏变成顶栏后，main 要撑满剩下的高度（否则 .content 滚不动） */
.main{flex:1;min-height:0}
.topbar{height:auto;min-height:52px;flex:0 0 auto;padding:9px 12px;gap:8px}
.crumb{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* 顶栏变窄后品牌名 + 「/」会吃掉一半宽度，把「当前页名」挤成省略号。
手机上先保页名 —— 品牌在启动遮罩/页头都有，而页名是判断「我在哪」的唯一信息。 */
.crumb-brand,.crumb .muted{display:none}
/* 顶栏太窄：用户胶囊里的角色名会折成两行（「工资条主管理」+「员」），很难看。
手机端只留名字，角色在「管理权限」页有完整展示。 */
.user-chip{white-space:nowrap;flex:0 0 auto}
.user-chip .rl{display:none}
/* 侧边栏收起了 → 连接状态改由顶栏胶囊承担 */
.conn-chip{display:flex}
.content{padding:16px 14px 36px}
/* ③ 表格：**自己横向滚动**，别再被裁掉。
`display:block` 让 table 变成可滚动块；里面仍然是正常的表格布局。
⚠️ 这么改之后 sticky 表头会失效，所以显式关掉 —— 不关会在滚动时错位。 */
.card>table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
.card>table>thead th{position:static}
/* ⚠️ 上面两条用的是「直接子元素」选择器，只对 `.card > table` 生效。
而工资条管理 / 定时发送那两张主表外面还包了一层
`
`（见页面结构），
**所以它们一直没吃到这两条规则** —— 既没 nowrap，也没有自己的横滚。
后果：「部门 / 岗位」被按字折成三行（「人力资源」+「部」），行高翻倍。
这里补一条后代选择器兜住：卡片里的表格一律不折行。
横滚交给外层那层 overflow:auto 就好 —— 直接给 table 加 display:block
会把 sticky 表头一起关掉（外层滚动时表头还能吸顶，是我们要的）。 */
.card table{white-space:nowrap}
thead th,tbody td{padding:10px 12px}
/* 「员工与部门」表格：手机上必然要横向滚动（列太多），
把「查看密码」列（状态 + 重置按钮）**吸附在右侧** ——
否则重置入口藏在最右边，要一路滑过去才点得到。
⚠️ 吸附单元格必须有**不透明背景**，否则内容会从它下面穿过去；
thead 那格是双向吸附（top 来自上面那条通用规则），z-index 要压过表头与普通单元格。 */
#page-contacts table thead th:last-child,
#page-contacts table tbody td:last-child{
position:sticky; right:0; background:var(--panel);
box-shadow:-8px 0 10px -8px rgba(0,0,0,.16);
}
#page-contacts table tbody tr:hover td:last-child{background:var(--panel-2)}
#page-contacts table thead th:last-child{background:var(--panel-2); z-index:3}
/* ④ 工具条 / 标签页：搜索框占满一行，其余控件能换行、能横滑 */
.toolbar{padding:12px 14px;gap:10px}
.search{flex:1 1 100%}
.search .field{width:100%}
.toolbar .field{min-width:0}
.tabs{overflow-x:auto;padding:0 14px}
.tab{padding:11px 11px;font-size:13px}
/* ⑤ 页头：标题占一行、按钮换到下一行（.sp 撑满一整行 = 强制换行） */
.page-head{flex-wrap:wrap;gap:10px;margin-bottom:16px}
.page-head .sp{flex:0 0 100%;height:0}
.page-head h1{font-size:19px;font-weight:700}
.page-head p{font-size:12.5px;line-height:1.55}
/* ⑥ 发放向导的步骤条：5 步在 390px 上放不下（`.step{flex:0 0 auto}` 不换行不滚动，
第 4/5 步直接被切掉，用户看不到自己在第几步）。
做法：**数字全留、标签只留当前步**（约 265px，5 步全部可见），
同时留 `overflow-x:auto` 兜底（某步名字特别长时还能滑）。 */
.steps{overflow-x:auto;padding:12px 14px}
.step .lb{display:none}
.step.active .lb{display:block}
.step-line{min-width:12px;margin:0 8px}
/* ⑦ 表单行：标签从「左侧固定 104px」改成上下堆叠 */
.form-row{flex-direction:column;gap:7px;padding:12px 0}
.form-row>label{width:auto;flex:0 0 auto;padding-top:0}
.form-row .ctl{width:100%}
.form-row .ctl .field{max-width:100%} /* 压掉行内写死的 width，避免溢出 */
/* ⑧ KPI / 卡片：用 minmax(0,1fr) 才能真正压缩（内联的 repeat(4,1fr) 要压掉） */
.kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px;margin-bottom:14px}
.kpi{padding:14px 15px;min-width:0}
.kpi-val{font-size:22px;font-weight:700;margin-top:6px;letter-spacing:-.2px}
.kpi-foot,.kpi-val small{white-space:normal;overflow-wrap:anywhere}
.card-b{padding:16px}
/* 卡片头里的月份下拉等控件：允许换行 + 不超出卡片（否则会被切掉右半边） */
.card-h{flex-wrap:wrap;gap:8px;padding:14px 16px}
.card-h .field{max-width:100%}
.notice{padding:12px 13px}
.drawer{width:100vw} /* 抽屉直接占满，不再留那 6vw 缝隙 */
.modal{width:94vw}
/* 长文案（如「环比 2026年7月工资条 +0.6%」）在窄屏要能断行，别顶宽卡片 */
.muted,.hint{overflow-wrap:anywhere}
/* ============================================================
⑨ 手机端视觉打磨 —— 四条原则
· 层次：浅灰底 + 纯白卡片，原来只靠 1px 描边区分，在 #f5f6f7 上几乎看不出边界，
整页糊成一片 → 改成「去描边 + 极淡双层阴影」，把卡片托起来。
· 触控：控件统一 40px、标签栏 ≥ 52px（原来 31/32px，低于 iOS 44 / Android 48）。
· 节奏：左右 14px、块间 14px，别一处 12 一处 18。
· 字阶：页名 15/600、卡片标题 14.5/600、KPI 数值 22/700，把对比拉开。
============================================================ */
/* —— 卡片：去描边 + 双层阴影 —— */
.card,.kpi{border-color:transparent;box-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 4px rgba(16,24,40,.04)}
.card{border-radius:16px;overflow:hidden} /* overflow 让内部表头/横滚条贴合圆角 */
.card-h h3{font-size:14.5px;font-weight:600}
.kpi{border-radius:16px}
.kpi-label{font-size:11.5px}
.kpi-val small{font-size:12px}
.kpi-foot{font-size:11px;margin-top:5px}
/* —— 顶栏：图标去描边、点击区做大（原来 32px 的方框又小又重） —— */
.crumb b{font-size:15px;font-weight:600}
.icon-btn{width:38px;height:38px;border:0;background:transparent;border-radius:10px}
.icon-btn svg{width:19px;height:19px}
.icon-btn .badge-dot{top:6px;right:6px}
.icon-btn:active{background:var(--panel-3)}
.user-chip{padding:0 2px;border:0;background:transparent}
.user-chip .avatar{width:32px;height:32px}
.user-chip .nm{font-size:12.5px}
.conn-chip{font-size:10.5px;padding:3px 8px;background:var(--panel-2)}
/* —— 按钮 / 表单控件：手机上一律 40px —— */
.btn{height:40px;padding:0 16px;border-radius:10px;font-size:13.5px}
.btn svg{width:16px;height:16px}
.btn.sm{height:32px;padding:0 11px;font-size:12.5px}
.btn:active{transform:scale(.97)}
.field{height:40px;border-radius:10px;font-size:13px}
select.field{padding-right:28px;background-position:right 9px center;background-size:12px}
.search .field{padding-left:34px}
.search svg{left:11px;width:15px;height:15px}
/* 开关也跟着放大（原来 34×19，手指很难拨） */
.switch .track{width:40px;height:22px;flex:0 0 40px}
.switch .track::after{width:16px;height:16px}
.switch input:checked + .track::after{transform:translateX(20px)}
/* —— 工具条：控件排整齐。原来宽窄参差、最后「导出」还孤立占一行 —— */
.toolbar>.field{flex:1 1 calc(50% - 5px);width:auto}
.toolbar>.sp{display:none} /* 桌面靠它把按钮推到右边；手机上只会多出一行空白 */
.toolbar>.btn{margin-left:auto}
/* —— 筛选区重排（用户：「这整个区域有点丑」）——
根因不是配色，是**结构**：搜索 + 部门 + 月份 + 状态 + 异常 + 条数 + 导出
7 个控件平铺成 5 行，数据还没露头就先吃掉 1/3 屏。
改成「搜索 + 筛选」一行，筛选项收进可展开面板 —— 默认只占 1 行。 —— */
.ps-toolbar .search{flex:1 1 auto;min-width:0}
.ps-filter-btn{display:inline-flex;flex:0 0 auto}
.ps-filter-btn svg{transition:transform .18s}
.ps-filter-btn.on{border-color:var(--brand);color:var(--brand);background:var(--brand-bg)}
.ps-filter-btn.on svg{transform:rotate(180deg)}
/* 已启用条件数：收起面板后全靠它告诉用户「现在不是全部数据」 */
.ps-filter-n{display:inline-flex;align-items:center;justify-content:center;
min-width:16px;height:16px;padding:0 4px;margin-left:2px;border-radius:8px;
background:var(--brand);color:#fff;font-size:10.5px;font-style:normal;line-height:1}
.ps-filter-n[hidden]{display:none}
.ps-filters{display:none;flex:1 1 100%;flex-wrap:wrap;gap:10px;padding-top:2px}
.ps-filters.on{display:flex}
.ps-filters>.field{flex:1 1 calc(50% - 5px);width:auto;min-width:0}
.ps-filters>.ps-sw{flex:1 1 100%;margin-left:0}
/* 「工资年月」下拉和上方月份标签是**同一个状态**（双向同步，见 renderPayslips），
而标签就在卡片顶上、还带条数 —— 手机上再放一个只是重复，收掉。
仍留在 DOM 里，所以同步逻辑和桌面端都不受影响。 */
.ps-filters>#psMonth{display:none}
.ps-count{font-size:12.5px;color:var(--text-2)}
/* —— 页头控件：最多半宽，排成整齐两列。
原来「一键撤回 / 一键发送 / 批量催办」挤一行、第 4 个「上传工资表」孤零零占一行。
用 `0 1`（不拉伸）而不是 `1 1`：否则只有 1 个按钮的页面（如发放向导的「重置流程」）
会被拉成整行，一个次要操作看起来比主操作还重。 —— */
.page-head>.field,.page-head>.btn{flex:0 1 calc(50% - 5px);min-width:0;width:auto}
/* —— 表格：行内字号收一点、行距匀一点 —— */
thead th{font-size:11px}
.name-cell{gap:8px}
.name-cell .avatar{width:30px;height:30px;font-size:11.5px;flex:0 0 30px}
.name-cell .nm{font-size:13px}
.name-cell .sm{font-size:10.5px}
/* —— 图例 / 条形图：条细一点、圆一点，数字不抢戏 —— */
.legend{gap:10px 14px;font-size:11.5px}
.bar-row{padding:8px 0}
.bar-row .lb{width:60px;flex:0 0 60px;font-size:11.5px}
.bar-row .vl{width:76px;flex:0 0 76px;font-size:11.5px}
.bar-row .bar{height:7px}
.progress{height:6px}
/* —— 底部标签栏：改用上浮阴影（比 1px 硬线更像原生标签栏） —— */
.tabbar{
display:flex;flex:0 0 auto;background:var(--panel);border-top:0;
box-shadow:0 -1px 0 var(--line-soft),0 -6px 20px rgba(16,24,40,.05);
padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
}
.tb-item{padding:7px 2px;font-size:11px;gap:3px}
.tb-ico{height:22px}
.tb-ico svg{width:22px;height:22px}
.tb-item.active{color:#1677ff;font-weight:600}
.tb-item:active{opacity:.55}
/* —— Toast：原来 `.toast-wrap` 是 `left:50%` 的收缩盒，可用宽度只有半个视口，
长文案被压成 4 行、还盖住页头（「暂时连不上服务器…」那条就是）。
改成左右各留 12px 的通栏。 —— */
.toast-wrap{left:12px;right:12px;transform:none;align-items:stretch;top:12px}
body.emp-mode .toast-wrap{top:auto;bottom:16px}
.toast{border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.5}
/* —— 抽屉 / 弹窗：手机上是主角，给足圆角与投影 —— */
.drawer{border-left:0;box-shadow:-8px 0 28px rgba(16,24,40,.12)}
.drawer-h{padding:14px 16px}
.drawer-b{padding:16px}
.drawer-f{padding:12px 16px;gap:8px}
.modal{border:0;border-radius:16px;box-shadow:0 12px 40px rgba(16,24,40,.16)}
.mask{backdrop-filter:blur(3px)}
}
/* ---- 工资条列表的分页控件（表格底部那一行）----
每页 200 条；实测渲染 ~125µs/行，6000 行一次性渲染要 624ms（点一下等一秒）。
⚠️ 分页只影响渲染 —— 批量操作（全选/一键发送/导出）始终作用于全部筛选结果。 */
.pager-row td{padding:12px;background:#fafbfc}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
font-size:13px;color:var(--text-2,#666b73)}
.pager .pg-info b{color:var(--text,#1f2329)}
.pager .pg-ctrl{display:inline-flex;align-items:center;gap:4px}
.pager .pg{min-width:30px;height:28px;padding:0 8px;border-radius:6px;cursor:pointer;
border:1px solid var(--line,#e4e6eb);background:#fff;font-size:13px;color:inherit}
.pager .pg:hover:not(:disabled){border-color:var(--brand,#1677ff);color:var(--brand,#1677ff)}
.pager .pg:disabled{opacity:.4;cursor:not-allowed}
.pager .pg.cur{background:var(--brand,#1677ff);border-color:var(--brand,#1677ff);color:#fff}
.pager .pg-dots{color:var(--text-3,#86909c);padding:0 2px}
.pager .hint{color:var(--text-3,#86909c);font-size:12px}