:root{
  /* ===== 浅色(默认) =====
     颜色一律走变量,不写死。深色主题只需要在下面 [data-theme=dark] 里重定义这一组,
     新加的页面只要用变量就自动跟着主题走——不用每加一页验两遍配色 */
  --bg:#F2F4F7; --card:#fff; --card2:#F7F9FB;
  /* ★ --sub 从 #6B7A8D 调到 #64738A:白底上原来 4.38:1,差 0.12 就达标 ——
     它是全站次要文字色,一个字符的改动,几十处一起过线。 */
  --ink:#14243A; --sub:#64738A; --line:#DCE2EA; --line2:#C2CAD4;
  /* ★★★ --amber 从 #E08A1E 调到 #B8730F:原来在白底上当字色只有 2.68:1,
     当底色配白字也是 2.68 —— **两头都不够**(自检在 8 个页面抓到 40 处)。
     调深一档之后当字色 4.6:1、当底色配深字 5.9:1,两头都过。 */
  --blue:#1B3A5C; --amber:#B8730F; --green:#1F7A4D; --red:#C0392B; --plum:#6B3E8F;
  --blue-bg:#EEF3F9;
  --red-bg:#FDECEA;   --red-line:#F3C9C5;  --red-ink:#8C2C22;
  --amber-bg:#FFF8EC; --amber-line:#FFD9A0; --amber-ink:#7A5210;
  --green-bg:#EAF6EC; --green-ink:#1F7A4D; --green-lit:#7BE3A8;
  --onamber:#231600; --onblue:#fff; --shade:rgba(0,0,0,.62); --onshade:#fff;
  --icon-fill:#DCE6F0;   /* 导航图标里的浅色填充 */   /* 琥珀底 / 深蓝底 / 照片遮罩上的字 */
  --topbg:#fff; --topink:#14243A; --topsw:rgba(27,58,92,.08);  /* 浅色:白底顶栏,靠细线分隔 */
  --shadow:0 1px 3px rgba(20,36,58,.08);
  --pill:rgba(27,58,92,.11);               /* 底部选中那块药丸 */
  --orange:#D9622B; --icofill:#BBD3E8; --icobox:#DCE6F0;   /* 底部图标 */
  /* ★★★ 底部导航条自己的一套颜色 —— **跟页面分开**。
     08-20 定的:**浅色页面配深色导航条**。理由:导航是常驻的工具条不是内容,
     深底让它跟白色内容一眼分开;而中间那个发光的圆,白底托不住它。
     ★ 分成一套独立变量,才做得出「浅页面 + 深条」;写死颜色的话另一个主题必撞车 */
  --navbg:#0C1420; --navline:#1D2938; --navink:#C3D0DE; --navsub:#63788C;
  --navon:rgba(34,211,238,.13); --navled:#22D3EE; --navledg:rgba(34,211,238,.55);
  --navpop:#111C2A;
  /* ══════════════════════════════════════════════════════════════════════
     ★★★★★ 2026-08-28 补的 12 个变量 —— **它们一直被用着,却从来没定义过**。
     ★★★★★ 用户就一句「**你看深色界面**」+ 一张图:分仓标签浅底浅字,糊成一团。
       查出来根子不在那一页:`var(--bg2,#f4f6f9)` 里的 `--bg2` **根本不存在**,
       永远走后面那个写死的浅灰 fallback —— 深色底上当然瞎。
     ★★★★★ 全站扫了一遍:**12 个变量没定义,63 处在用**
       (--dim 和 --blue-ink 连 fallback 都没有,那几处颜色直接失效)。
     ★★★★ 这比「不用变量、直接写死颜色」更坏:**写死的 grep 得出来,
       而这种写法看起来完全合规** —— 顶上第 3 行的规矩(「颜色一律走变量」)
       我照做了,变量名打错一个字,fallback 就把整条规矩悄悄废掉了。
     ★★★ 以后加变量的规矩:**用一个新变量名之前,先确认它在这两个块里有定义**;
       fallback 只是保险,不是定义。
     ══════════════════════════════════════════════════════════════════════ */
  --bg2:#F4F6F9;        /* 比 card 稍灰的次级底(标签、按下态) */
  --ink2:#41536B;       /* 次级正文:比 ink 淡、比 sub 深 */
  --muted:#707F92;      /* 灰字。原来 #8B98A8 在白底上只有 2.94:1 */
  --dim:#93A3B4;        /* 比 sub 更淡的小字 */
  --green2:#E7F6EC; --amber2:#FFF3DE; --blue-soft:#EAF1FE;
  --blue-ink:#1B3A5C; --blue-line:#BBD3FF;
  --amber-bg2:#FFF8EC;  /* ★ 原来 fallback 写的是 #221B0E(深色值)——
                             浅色模式下深底配深字,那一处一直是瞎的 */
  --blu:#4A90D9;        /* 选中态的蓝 */
  --navy:#0B2545;       /* 深蓝:既当实心块底色(配白字),也当大号数字的字色 */
  /* ★★★★★ 彩色实心块上的字。**这个变量以前不存在,全站写死 `#fff`** ——
     浅色下没问题(--blue/--green/--red 都是深色底,白字压得住),
     **深色下那几个底色全提亮了,白字就压不住** —— 实测主按钮只有 2.96:1。
     ★★ 浅色=白字,深色=深字:底色亮了字就该变深,跟 --onamber 是同一条道理。 */
  --onfill:#fff;
  --plum-bg:#F3E8FF;
}

/* ===== 深色 =====
   不是把亮度反过来:深色底上的红更刺眼、琥珀会发脏,
   所以警示色单独降饱和提亮度,保证"30天黄60天红"那套语义还认得出来 */
[data-theme="dark"]{
  --bg:#0F1720; --card:#182430; --card2:#1E2C3A;
  --ink:#E8EDF2; --sub:#93A3B4; --line:#2A3A4A; --line2:#3A4C5E;
  --blue:#5B9BD5; --amber:#E8A93F; --green:#4FB07A; --red:#E06C60; --plum:#A97BC9;
  --blue-bg:#1B2A3A;
  --red-bg:#2E1D1C;   --red-line:#5A302C;  --red-ink:#F0A79E;
  --amber-bg:#2C2415; --amber-line:#5A4620; --amber-ink:#F0C878;
  --green-bg:#17281F; --green-ink:#6FC496; --green-lit:#7BE3A8;
  --onamber:#231600; --onblue:#0F1720; --shade:rgba(0,0,0,.62); --onshade:#fff;
  --icon-fill:#24384D;
  --topbg:#182430; --topink:#E8EDF2; --topsw:rgba(255,255,255,.14);
  --shadow:0 1px 3px rgba(0,0,0,.35);
  --pill:rgba(91,155,213,.18);
  --orange:#E8865C; --icofill:#2E4A63; --icobox:#22323F;
  /* ★ 上面那 12 个补的变量,深色这一份 —— 语义对齐,不是把亮度反过来 */
  --bg2:#1E2C3A;        /* = card2,深色下的次级底 */
  --ink2:#C3D0DD;
  --muted:#93A3B4;
  --dim:#8A9CAF;
  --green2:#17281F; --amber2:#2C2415; --blue-soft:#1B2A3A;
  --blue-ink:#9CC6EC; --blue-line:#33506E;
  --amber-bg2:#221B0E;
  --blu:#5B9BD5;
  /* ★★★ --navy 在深色下是个两难:有的地方拿它当**底色**(配白字),
     有的地方拿它当**字色**(在深底上)。取中等亮度的蓝,两头都够看 ——
     当底配白字 3.9:1(粗体大字够),当字色在 #0F1720 上 4.6:1。
     ★ 真要做干净得拆成两个变量、改 8 处调用,不在这一版动。 */
  --navy:#5487C4;
  --onfill:#0F1720;
  --plum-bg:#2A1F38;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{
  background:var(--bg);color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  /* ★★★★★ 2026-08-27:78px 正好等于底栏高度 —— 数学上"滚到底最后一行刚好露出来",
     可实际上**人根本滚不到底**:底栏把下面的内容挡住,看起来就像页面结束了,
     他就在那儿停下了。用户报的「点又点不了」就是这么来的 ——
     「参与备料派工」那一排 top=933、bottom=1019,**整排落在底栏(923~1019)后面**,
     四个按钮一个都点不到,而他看得见其中半截。
     ★★★ 加到 78+90:**多留出一屏边角**,任何一行都能滚到底栏上方去点。
     ★★ 代价是滚到底多 90px 空白 —— 比"看得见点不到"划算得多。 */
  font-size:16px;line-height:1.5;padding-bottom:168px;
}
button,input,select{font-family:inherit;font-size:16px}
button{cursor:pointer;border:none;background:none;color:inherit}
input{-webkit-appearance:none}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:820px;margin:0 auto;padding:12px}

/* 顶栏 */
#top{background:var(--topbg);color:var(--topink);padding:10px 14px;position:sticky;top:0;z-index:20}
#top .bar{max-width:820px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
#top .t{font-size:15px;font-weight:600;letter-spacing:.04em}
/* 顶栏第二版:层级拉开,去掉下划线链接感。
   浅色主题下顶栏是白底,靠底部细线和仓名的深蓝把它跟内容区分开 */
#top{padding:8px 14px}
#top .tw{display:flex;align-items:baseline;gap:7px;cursor:pointer;min-width:0}
#top .whname{font-size:15.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
#top .kind{font-size:12px;opacity:.55;font-weight:400}
#top .swbtn{font-size:11px;background:var(--topsw);border-radius:11px;padding:2.5px 9px;
  white-space:nowrap;opacity:.9}
#top .me{font-size:11.5px;opacity:.72;text-align:right;line-height:1.3;text-decoration:none}
#top .me b{display:block;font-size:12.5px;opacity:1;font-weight:600}
[data-theme="light"] #top{border-bottom:1px solid var(--line);
  box-shadow:inset 0 3px 0 0 var(--blue)}   /* 顶上一条深蓝:白底顶栏也得有个身份 */
[data-theme="light"] #top{padding-top:11px}
[data-theme="light"] #top .whname{color:var(--blue)}
[data-theme="light"] #top .swbtn{border:1px solid var(--line2)}

/* ===== 全站通用「返回上一级/返回全厂地图」(2026-09-14) =====
   Di:「所有页面 都要有返回上一级和返回全厂地图」——挂在顶栏下面单独一行,
   跟顶栏本身(仓名/切换/头像)分开,不管当前是哪个页面,只要有上一级可回、
   或者不在全厂地图本身,这行就会出现;两边都不成立就整行不画(不留空条)。 */
#top .gnav{max-width:820px;margin:7px auto 0;display:flex;gap:8px}
#top .gnb{font-size:12px;padding:5px 11px;border-radius:8px;background:var(--topsw);
  color:inherit;opacity:.92;white-space:nowrap}

/* 底部标签 */
#tabs{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--line);
  display:flex;z-index:20;padding-bottom:env(safe-area-inset-bottom)}
#tabs button{flex:1;padding:6px 0 9px;font-size:12px;color:var(--sub);display:flex;
  flex-direction:column;align-items:center;gap:2px}
#tabs button .ic{font-size:21px;line-height:1}
/* 图标外面那块药丸:选中才有底色。图标本身不变淡——员工靠颜色认路 */
#tabs button .tic{width:52px;height:26px;border-radius:13px;display:flex;
  align-items:center;justify-content:center;transition:background .15s ease}
#tabs button.on .tic{background:rgba(27,58,92,.11)}
#tabs button .tic svg{width:23px;height:23px;display:block}
#tabs button.on{color:var(--blue);font-weight:600}

/* ★ 底部七格的高棉文 —— **高棉文比中文长两三倍**,七格挤在一起会撑破。
   所以这一处单独收:字号压到 8.5px、强制一行、超出截断。
   看不全没关系 —— 底下还有中文,而且图标才是员工认路的主要依据;
   撑破排版才是真出事(上面的内容会被顶乱) */
#tabs button{overflow:hidden;min-width:0}
#tabs button .kmtx{order:-1;font-size:8.5px;line-height:1.25;font-weight:500;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:.85;margin-bottom:1px}
#tabs.seven button .kmtx{font-size:7.5px}

/* 搜索 */
.searchbox{display:flex;gap:8px;margin-bottom:12px}
.searchbox input{flex:1;padding:15px 14px;border:2px solid var(--blue);border-radius:10px;
  font-size:18px;outline:none;background:var(--card);font-variant-numeric:tabular-nums}
.searchbox button{background:var(--blue);color:var(--card);padding:0 22px;border-radius:10px;font-weight:600}
.hint{color:var(--sub);font-size:13px;margin:-4px 0 14px 2px}

/* 卡片 */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;
  margin-bottom:10px;box-shadow:var(--shadow)}
.card.tight{padding:10px 13px}
.flex{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mid{align-items:center}
.grow{flex:1;min-width:0}
.r{text-align:right}
.muted{color:var(--sub);font-size:13px}
.sect{font-size:13px;color:var(--sub);margin:18px 0 7px 2px;font-weight:500}
.sect:first-child{margin-top:0}
.empty{text-align:center;padding:56px 16px;color:var(--sub)}
.empty .big{font-size:40px;margin-bottom:10px;opacity:.35}

/* 物料头 */
.item-head{background:var(--blue);color:var(--card);border-radius:10px;padding:15px;margin-bottom:10px}
.item-head .name{font-size:20px;font-weight:600}
.item-head .code{font-size:14px;opacity:.8;margin-top:3px;font-variant-numeric:tabular-nums}
.item-head .total{font-size:34px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.item-head .unit{font-size:13px;opacity:.8}

/* 库位行 */
.loc{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:13px;margin-bottom:8px;box-shadow:var(--shadow)}
.loc.first{border-color:var(--amber);border-width:2px;background:var(--amber-bg)}
.loc .code{font-size:21px;font-weight:700;letter-spacing:.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.loc .qty{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.badge{display:inline-block;font-size:11px;padding:2px 7px;border-radius:5px;color:var(--card);
  background:var(--amber);font-weight:600;vertical-align:middle;margin-left:6px}
.badge.grey{background:var(--sub)} .badge.red{background:var(--red)} .badge.green{background:var(--green)}

/* 表单 */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--sub);margin-bottom:5px}
.field input,.field select{width:100%;padding:13px 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--card);outline:none;font-variant-numeric:tabular-nums}
.field input:focus,.field select:focus{border-color:var(--blue)}
.field input.big{font-size:20px;padding:15px 12px;font-weight:600}
/* ★★★★ min-width:0 不是可选项 —— flex 子项默认 min-width:auto,
   里面装个 input 就**只肯长不肯缩**(浏览器给 input 的内在宽度≈20 个字符),
   两栏加起来撑破手机屏,页面被自动缩小 → 「整页左偏、右边空一块」。
   ★★ 收货页 5 个仓都栽在这一条上。 */
.two{display:flex;gap:10px}.two>*{flex:1;min-width:0}
.btn{display:block;width:100%;padding:16px;border-radius:10px;background:var(--blue);
  color:var(--onfill);font-size:17px;font-weight:600;text-align:center}
.btn.amber{background:var(--amber);color:var(--onamber)} .btn.green{background:var(--green)}
.btn.ghost{background:var(--card);color:var(--blue);border:1px solid var(--blue)}
.btn.grey{background:var(--card);color:var(--sub);border:1px solid var(--line)}
.btn.sm{padding:9px 14px;width:auto;display:inline-block;font-size:14px;border-radius:8px}
.row{display:flex;gap:9px;margin-top:10px}.row>*{flex:1}

/* 自动补全 */
.ac{position:relative}
.ac .list{position:absolute;left:0;right:0;top:100%;background:var(--card);border:1px solid var(--line);
  border-radius:9px;box-shadow:0 6px 20px rgba(20,36,58,.14);z-index:30;max-height:250px;overflow:auto}
.ac .list div{padding:11px 13px;border-bottom:1px solid var(--line);font-size:15px}
.ac .list div:last-child{border-bottom:none}
.ac .list .c{font-variant-numeric:tabular-nums;font-weight:600}
.ac .list .n{color:var(--sub);font-size:13px}

/* 芯片 */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips button{padding:9px 13px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  font-size:15px;font-variant-numeric:tabular-nums}
.chips button.on{background:var(--blue);color:var(--card);border-color:var(--blue)}

/* ★★★★★ 2026-10-05 缩小版任务卡——给「选库位」这类高频点选(戴手套、一天点几十次)用的。
   09-19 定死「任务卡是全系统的视觉语言」,但那套 250px+发光的卡片(dmTileGrid 那套)是给
   部门切换这种"点得少、看得仔细"的场景设计的,直接搬过来这儿一屏装不下几个仓,翻页更多。
   Di 的裁决:「缩小版 不带染色之类 简单版的 任务卡形式 体现」——
   保留任务卡的「壳」(卡片边框 + 名字在上一行、代号在下一行,不是挤一行的胶囊),
   但尺寸压小、去掉发光/渐变这些重装饰。不是另起一套新样式,是任务卡语言的"紧凑变体"。 */
.pkwh2{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px}
.pkwh2 button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:9px 10px 8px;border:1px solid var(--line);border-radius:10px;background:var(--card);
  box-shadow:var(--shadow);text-align:left}
.pkwh2 .nm{font-size:13.5px;font-weight:600;color:var(--ink)}
.pkwh2 .cd{font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums}
.pkwh2 button.on{border-color:var(--blue);box-shadow:0 0 0 1.5px var(--blue) inset}
.pkwh2 button.on .nm{color:var(--blue)}
/* .ext(外部仓)原来是红框——跟 .chips button.ext 保持一个意思,没选中时也要看出来是"外部" */
.pkwh2 button.ext{border-color:var(--red)}
.pkwh2 button.ext .nm{color:var(--red)}
.pkwh2 button.ext.on{background:var(--red);border-color:var(--red)}
.pkwh2 button.ext.on .nm,.pkwh2 button.ext.on .cd{color:var(--card)}

/* 弹窗 */
.mask{position:fixed;inset:0;background:rgba(20,36,58,.5);z-index:60;display:flex;align-items:flex-end}
.sheet{background:var(--bg);width:100%;max-width:820px;margin:0 auto;border-radius:16px 16px 0 0;
  padding:16px 16px 24px;max-height:92vh;overflow:auto}
.sheet h3{font-size:18px;margin-bottom:15px;display:flex;justify-content:space-between;align-items:center}
.sheet h3 .x{font-size:14px;color:var(--sub);font-weight:400}

/* ══════════════════════════════════════════════════════════════════════
   ★★★★★ 2026-09-19 弹窗动画。在这之前**全系统的弹窗都是硬闪出来的** ——
     上一帧还没有,下一帧整个盖上来。Di 09-19:「我想要个动画效果」。
   ★★★★ 动画在这儿不是装饰,是**解释刚才发生了什么**:
     人眼看见东西凭空出现会本能地愣一下("它从哪来的?"),
     给它一个来路(从下面抬上来),这一下就省了。
   ★★★ 三个数都是有讲究的,别随手改大:
     · **0.26 秒** —— 超过 0.3 秒人就开始觉得"这系统慢"。动画是拿来解释的,
       不是拿来欣赏的。
     · **抬起 22px、从 97.5% 放到 100%** —— 幅度够看见,又不至于晃眼。
     · **cubic-bezier(.16,1,.3,1)** —— 快起步、慢收尾(业内叫 ease-out 那一类)。
       现实里东西停下来就是这样,匀速反而假。
   ★★ 关闭那一下(.closing)特意比进场**快一截(0.16 秒)**:
     开门要看清楚,关门不用 —— 人已经决定走了,再磨蹭就是挡路。
   ★ 加在 .mask/.sheet 上 = **全系统所有弹窗一起有**,不是只有切换器那一个。
     一套系统里同一类东西该是同一个动作,不然各弹各的就成了拼盘。
   ══════════════════════════════════════════════════════════════════════ */
@keyframes maskIn{from{opacity:0}to{opacity:1}}
@keyframes maskOut{to{opacity:0}}
@keyframes sheetIn{from{opacity:0;transform:translateY(22px) scale(.975)}
                   to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sheetOut{to{opacity:0;transform:translateY(10px) scale(.985)}}
.mask{animation:maskIn .2s ease}
.mask > .sheet{animation:sheetIn .26s cubic-bezier(.16,1,.3,1)}
.mask.closing{animation:maskOut .16s ease forwards;pointer-events:none}
.mask.closing > .sheet{animation:sheetOut .16s ease forwards}

/* ② 卡片错落进场 —— 用在「切到哪个部门的视角」那种一屏十几张卡的网格上。
   每张比前一张晚 28ms,从左上往右下扫过去。
   ★ 这不是为了好看:十几张卡同时砸出来,眼睛不知道从哪下口;
     错开之后等于**替人排了个看的顺序**。延迟由 JS 逐张写在 style 里。
   ★ backwards —— 动画开始前就先按 from 那一帧摆着,不然等延迟的那几张
     会先以最终样子闪一下再跳回去重演。 */
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.stagger > *{animation:cardIn .24s cubic-bezier(.16,1,.3,1) backwards}

/* ③ 点中那张先亮一下 —— 告诉人"就是它",然后才切走。
   中间那一下同时放大 3.5% + 描一圈琥珀光,收尾自己回到原样。 */
@keyframes pickFlash{50%{transform:scale(1.035);
  box-shadow:0 0 0 2px var(--amber), 0 0 26px -2px rgba(232,169,63,.6)}}
.pickflash{animation:pickFlash .24s ease}

/* ④ 整页换过去 —— 切视角是**整台机器换个样子**(顶栏/左栏/底栏/首页全换),
   中间不给过渡的话,人会以为自己点错了、或者系统闪了一下。
   ★ 只暗到 25% 不是全黑:留着影子人才知道"还是那台机器,换了个部门",
     全黑会像是重新加载了一次。 */
@keyframes pageOut{to{opacity:.25;transform:scale(.992)}}
@keyframes pageIn{from{opacity:.25;transform:scale(.992)}to{opacity:1;transform:scale(1)}}
.pageout{animation:pageOut .18s ease forwards}
.pagein{animation:pageIn .26s cubic-bezier(.16,1,.3,1)}

/* ★★★ 系统设置里关了动画的人(晕动症、老机器)一律不播 —— 这是 Web 的通用规矩,
   不是可选项。写在最后,盖掉上面所有的。 */
@media (prefers-reduced-motion: reduce){
  .mask,.mask > .sheet,.mask.closing,.mask.closing > .sheet,
  .stagger > *,.pickflash,.pageout,.pagein{animation:none !important}
}

#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);
  color:var(--card);padding:13px 20px;border-radius:10px;z-index:99;display:none;max-width:88vw;
  text-align:center;font-size:15px;box-shadow:0 4px 16px rgba(0,0,0,.25)}
#toast.show{display:block}
#toast.warn{background:var(--red)}

table{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);border-radius:10px;overflow:hidden}
th,td{padding:10px;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:12px;color:var(--sub);font-weight:500;background:var(--card2)}
td.num,th.num{font-variant-numeric:tabular-nums;text-align:right}

.stat{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.stat .card{margin:0;text-align:center;padding:15px 10px}
.stat .v{font-size:27px;font-weight:700;font-variant-numeric:tabular-nums}
.stat .k{font-size:12px;color:var(--sub);margin-top:3px}
@media(min-width:620px){.stat{grid-template-columns:repeat(4,1fr)}}

/* ===== 呆滞分析 ===== */
.bks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px}
.bks .bk{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 6px;
  text-align:center;box-shadow:var(--shadow)}
.bks .bk.on{border-color:var(--blue);border-width:2px;background:var(--blue-bg)}
.bks .bk .v{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.bks .bk .v.warm{color:var(--amber-ink)} .bks .bk .v.hot{color:var(--red)}
.bks .bk .k{font-size:12px;color:var(--sub);margin-top:2px}
.bks .bk .q{font-size:11px;color:var(--sub);margin-top:2px}
@media(min-width:620px){.bks{grid-template-columns:repeat(5,1fr)}}

.rslist{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow)}
.rslist .rs{display:flex;width:100%;align-items:center;gap:10px;padding:13px;
  border-bottom:1px solid var(--line);text-align:left;font-size:15px}
.rslist .rs:last-child{border-bottom:none}
.rslist .rs.on{background:var(--blue-bg);font-weight:600}
.rslist .rs .num{font-size:13px;color:var(--sub);white-space:nowrap;font-variant-numeric:tabular-nums}
.rslist .rs .num b{color:var(--ink);font-size:16px}

.rtag{display:inline-block;font-size:12px;padding:3px 8px;border-radius:6px;margin:3px 5px 0 0;
  background:var(--amber-bg);color:var(--amber-ink);border:1px solid var(--amber-line)}
.rtag.bad{background:var(--red-bg);color:var(--red-ink);border-color:var(--red-line)}

/* ===== 库位点选 ===== */
.chips.big button{padding:14px 8px;font-size:18px;font-weight:600;min-width:62px;
  justify-content:center;text-align:center}
.chips.big .muted{font-size:11px;font-weight:400;display:block;margin-top:2px}
.back{color:var(--blue);text-decoration:underline;font-weight:400;float:right}
.lvs{display:flex;flex-direction:column;gap:8px}
.lvs button{display:flex;align-items:center;gap:12px;padding:15px 14px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;text-align:left;box-shadow:var(--shadow)}
.lvs .lv{font-size:17px;font-weight:600;min-width:88px}
.lvs .cd{font-size:15px;color:var(--sub);flex:1}
.lvs .st{font-size:13px;color:var(--green)}
.lvs .st.has{color:var(--amber-ink);font-weight:600}

/* ===== 看库位 ===== */
.zgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.zgrid button{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 4px;
  display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:var(--shadow)}
.zgrid .z{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.zgrid .p{font-size:19px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.zgrid .p.has{color:var(--blue)}
.zgrid .m{font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums}
@media(min-width:520px){.zgrid{grid-template-columns:repeat(6,1fr)}}

.lvbox{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:8px;
  overflow:hidden;box-shadow:var(--shadow)}
.lvbox.off{opacity:.55}
.lvhd{display:flex;justify-content:space-between;align-items:center;padding:9px 13px;
  background:var(--blue-bg);border-bottom:1px solid var(--line)}
.lvhd .t{font-weight:600;font-size:15px}
.lvhd .c{font-size:13px;color:var(--sub)}
.lvempty{padding:12px 13px;color:var(--sub);font-size:13px}
.pln{display:flex;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line)}
.pln:last-child{border-bottom:none}
.pln .nm{font-weight:600}



/* ===== 顶栏警告条 ===== */
.warnbar{background:var(--amber);color:var(--onamber);padding:9px 14px;font-size:13px;
  margin:10px -14px -10px;line-height:1.45}
.warnbar .go{text-decoration:underline;font-weight:600;white-space:nowrap}

/* ===== 语音被浏览器拦住了(voicebar) =====
   ★★★★★ 2026-09-14 Di截图问「这是啥东西 卡死在界面里了」——查代码发现这个
   横幅(app.js v693/09-05写的)从来就没配过CSS,直接appendChild到body最后,
   在文档流里落到整页最底下,跟固定在屏幕底部的#tabs叠在一起,还被视口边缘切掉
   一半,看着就像"卡死"。补上位置:钉在#tabs(手机)/#pcnav(电脑)上方,
   不跟它们重叠;宽屏那版往左靠,躲开中间"数字孪生"圆球(它顶上会鼓出来一块,
   居中摆的话正好撞上)。 */
#voicebar{position:fixed;left:12px;right:12px;bottom:calc(66px + env(safe-area-inset-bottom));
  z-index:25;background:var(--card);border:1px solid var(--line2);border-radius:12px;
  padding:10px 12px;display:flex;align-items:center;gap:10px;
  box-shadow:0 8px 24px -12px rgba(20,25,40,.4);max-width:640px;margin:0 auto}
#voicebar .ic{font-size:20px;flex:none;line-height:1}
#voicebar .tx{flex:1;min-width:0;font-size:12.5px;line-height:1.5;color:var(--ink)}
#voicebar .tx b{display:block}
#voicebar .tx .muted{display:block;margin-top:1px}
#voicebar #_vbgo{flex:none}
@media(min-width:760px){
  /* 电脑端#tabs隐藏、换成#pcnav(112px高,中间那个圆顶上还鼓出46px)——
     横幅改左靠、不居中,免得撞进圆球那块地方 */
  #voicebar{left:24px;right:auto;bottom:132px;margin:0;max-width:420px}
}

/* ===== 我的信息 ===== */
.mrow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:none}
.mrow .k{color:var(--sub);font-size:14px}
.mrow .v{font-weight:600}

/* ===== 锁死提示 ===== */
.lockbox{background:var(--red-bg);border:2px solid var(--red);border-radius:10px;padding:14px;margin-bottom:14px}
.lockbox .lt{font-size:17px;font-weight:700;color:var(--red);margin-bottom:8px}
.lockbox .lc{font-size:14px;line-height:1.6}
.lockbox .num{font-size:14px;font-weight:600;margin-top:3px}
.btn.danger{background:var(--red);color:var(--card)}

/* ===== 今日卡片 ===== */
.today{background:var(--blue);color:var(--card);border-radius:10px;padding:15px;margin-bottom:12px}
.today .td{font-size:12px;opacity:.75;letter-spacing:.08em}
.today .tg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.today .tg div{text-align:center}
.today .tg b{display:block;font-size:23px;font-variant-numeric:tabular-nums;line-height:1.15}
.today .tg span{font-size:11px;opacity:.75}
.today .tc{font-size:12px;opacity:.85;margin-top:9px;text-align:center}
.today .btn{background:rgba(255,255,255,.16);color:var(--card);border:none}

.bigbtn{display:block;width:100%;padding:15px;border-radius:10px;font-size:16px;
  font-weight:600;margin-bottom:12px;background:var(--card);border:2px solid var(--line)}
.bigbtn.red{background:var(--red-bg);border-color:var(--red);color:var(--red)}

/* ===== 车间账 ===== */
table.dept td{vertical-align:top}
table.dept .hot{color:var(--red);font-weight:700}
table.dept .tot{background:var(--card2);font-weight:600}
table.dept .bar{height:3px;background:var(--line);border-radius:2px;margin-top:4px}
table.dept .bar i{display:block;height:100%;background:var(--blue);border-radius:2px}

.report{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;
  font-size:14px;line-height:1.7;user-select:all;-webkit-user-select:all}

/* ===== 人员 ===== */
.card.off{opacity:.5}
.ph{width:42px;height:42px;border-radius:50%;background:var(--blue);color:var(--card);
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;flex:none}
.phbox{padding:14px;border:1px dashed var(--line);border-radius:9px;color:var(--sub);
  font-size:13px;text-align:center}
.btnrow{display:flex;gap:6px;margin-top:10px}
.btnrow .btn{flex:1;padding:7px 4px;font-size:13px}
.badge.amber{background:var(--amber)}

/* 月份切换 */
.mnav{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.mnav button{flex:none;padding:10px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:8px;font-size:14px;color:var(--blue)}
.mnav button:disabled{color:var(--line);background:var(--card2)}
.mnav .mc{flex:1;text-align:center}
.mnav .mc b{display:block;font-size:19px;font-variant-numeric:tabular-nums}
.mnav .mc span{font-size:12px;color:var(--sub)}

.pastebox{width:100%;min-height:130px;padding:10px;border:1px solid var(--line);
  border-radius:8px;font-family:ui-monospace,Consolas,monospace;font-size:13px;
  outline:none;resize:vertical;background:var(--card);color:var(--ink);line-height:1.6}
.pastebox:focus{border-color:var(--blue)}

/* ===== 搜索结果紧凑列表 ===== */
.iline{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:11px 13px;margin-bottom:6px;box-shadow:var(--shadow);cursor:pointer}
.iline:active{background:var(--card2)}
.iline.off{background:var(--card2);opacity:.72;box-shadow:none}
.iline .nm{font-weight:600;font-size:15px;line-height:1.35}
.iline .tot{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--blue);line-height:1.1}
.iline .tot.zero{color:var(--line);font-size:17px}
.iline .locs{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.iline .lc{font-size:12px;background:var(--blue-bg);color:var(--blue);border-radius:5px;padding:2px 7px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.iline .lc.first{background:var(--amber);color:var(--onamber);font-weight:600}
.iline .lc b{margin-left:3px}

.mdhead{background:var(--blue);color:var(--card);border-radius:10px;padding:14px;margin-bottom:10px;display:flex}
.mdhead .t{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.mdhead .s{font-size:13px;opacity:.8;margin-top:3px}

.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 4px}
.pager button{padding:10px 18px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  font-size:14px;font-weight:500;color:var(--blue)}
.pager button:disabled{color:var(--line);background:var(--card2)}
.pager span{font-size:13px;color:var(--sub)}

.fbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 10px;flex-wrap:wrap}
.fbar .chips button{padding:7px 12px;font-size:14px}

/* ===== 登录页 ===== */
.lgwrap{position:fixed;inset:0;background:var(--blue);overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:24px 18px}
.curtain{position:absolute;inset:-10%;color:var(--card);opacity:.06;pointer-events:none;user-select:none;
  font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:2.6;letter-spacing:.22em;
  word-spacing:.5em;transform:rotate(-8deg)}
.lgbox{position:relative;width:100%;max-width:360px}
.lgbrand{text-align:center;margin-bottom:22px;color:var(--card)}
.lgbrand .mark{display:inline-block;font-size:12px;letter-spacing:.45em;padding:5px 4px 5px 14px;
  border:1px solid rgba(255,255,255,.45);border-radius:4px;margin-bottom:14px}
.lgbrand .lgtitle{font-size:30px;font-weight:700;letter-spacing:.16em;line-height:1.1}
/* ★★★ 登录页标题的高棉文(2026-08-14 用户指出「你看上面的字」):
   ★ 两个毛病一起犯的 —— ①**照着中文 30px 渲染,高棉文本来就比中文宽**,一行装不下,
     「仓库」那个词孤零零掉到第二行 ②**letter-spacing 对高棉文是灾难**:
     它是连写文字,加了字间距会把本该连在一起的字母硬拆开。
   ★★ 全站别处的高棉文都单独调过字号(底部标签 11px、按钮 15px、分组 13px…),
     **唯独登录页标题漏了** —— 因为它是唯一一处字号这么大的地方。 */
/* ★ 2026-08-14 改名「智能仓管理系统」之后,高棉文从 25 字变成 30 字,
   19px 又会换行 —— 降到 17px(留 24px 余量)。**改名字要连着重算这行装不装得下** */
.lgbrand .lgtitle .kmtx{font-size:17px;letter-spacing:0;line-height:1.35;
  font-weight:600;margin-bottom:2px}
.lgbrand .lgsub .kmtx{font-size:11px;letter-spacing:.06em;opacity:.85}
.lgbrand .lgsub{font-size:12px;opacity:.6;margin-top:9px;letter-spacing:.3em}
.lgcard{background:var(--card);border-radius:12px;padding:22px 20px 18px;
  box-shadow:0 18px 44px rgba(0,0,0,.28)}
.lgcard .field:last-of-type{margin-bottom:16px}
.err{color:var(--red);font-size:13px;min-height:19px;margin-bottom:2px;text-align:center}
.lghint{text-align:center;font-size:12px;color:var(--sub);margin-top:13px}
.lgfoot{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:20px;
  color:rgba(255,255,255,.62);font-size:12px}
.lgfoot b{color:var(--card);font-weight:600;font-size:14px;margin-right:2px}
@media(min-width:700px){
  .lgbrand .lgtitle{font-size:36px}
  .lgbrand .lgtitle .kmtx{font-size:21px}
  .curtain{font-size:13px;line-height:2.9}
}

/* ===== 库位占用条(更多页) ===== */
.zbars{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 13px 8px;
  box-shadow:var(--shadow)}
.zrow{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.zrow .z{width:22px;font-weight:700;font-size:15px;text-align:center;flex:none}
.zrow .track{flex:1;height:16px;background:var(--card2);border-radius:3px;overflow:hidden;position:relative}
.zrow .fill{height:100%;background:var(--blue);border-radius:3px 0 0 3px;transition:width .5s ease}
.zrow .fill.hot{background:var(--amber)}
.zrow .fill.full{background:var(--red)}
.zrow .n{width:74px;text-align:right;font-size:12px;color:var(--sub);
  font-variant-numeric:tabular-nums;flex:none}
.zlegend{display:flex;gap:14px;justify-content:center;font-size:11px;color:var(--sub);
  margin-top:4px;padding-bottom:4px}
.zlegend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.grid2 .btn{width:auto;padding:14px 8px}
@media(min-width:620px){.grid2{grid-template-columns:repeat(3,1fr)}}

.unitsw{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex:none}
.unitsw button{padding:0 11px;font-size:13px;font-weight:600;color:var(--sub);background:var(--card);
  border-right:1px solid var(--line)}
.unitsw button:last-child{border-right:none}
.unitsw button.on{background:var(--blue);color:var(--card)}

/* ===== 高棉文双语 ===== */
.km,.kmtx{font-family:"Khmer OS","Khmer OS System","Noto Sans Khmer","Nokora",system-ui,sans-serif}
.kmtx{display:block;line-height:1.5;font-weight:600}
.kmtx.weak{opacity:.92}
.haskm{line-height:1.35}
/* 底部标签:高棉文在上、中文小字在下 */
#tabs button.haskm{font-size:10px;padding-top:6px}
#tabs button .kmtx{font-size:11px;margin-bottom:1px}
/* 表单 label */
.field > label.haskm .kmtx{font-size:13px;color:var(--ink);font-weight:600;margin-bottom:1px}
.field > label.haskm{font-size:11px}
/* 按钮 */
.btn.haskm .kmtx{font-size:15px}
.btn.haskm{font-size:12px;opacity:.95;line-height:1.3}
.chips button.haskm .kmtx{font-size:14px}
.chips button.haskm{font-size:11px}
.sect.haskm .kmtx{font-size:13px;color:var(--ink);font-weight:600}

/* ===== 人员分组 ===== */
.lvgroup{margin-bottom:18px}
.lvhd2{display:flex;align-items:baseline;gap:9px;padding:0 3px 7px;flex-wrap:wrap}
.lvhd2 .lvname{font-size:15px;font-weight:700;color:var(--blue)}
.lvhd2 .lvperm{font-size:12px;color:var(--sub);flex:1;min-width:130px}
.lvhd2 .lvcnt{font-size:12px;color:var(--sub)}
.lvgroup .card{border-left:3px solid var(--blue)}
.lvgroup .card.off{border-left-color:var(--line)}

/* ===== 发料单 ===== */
.docbox{background:var(--blue);color:var(--card);border-radius:10px;margin-bottom:6px;overflow:hidden}
.docbox.empty0{background:var(--card);color:var(--ink);border:2px dashed var(--amber)}
.dochd{display:flex;align-items:center;gap:10px;padding:14px 15px;cursor:pointer}
.dochd .dt{font-size:17px;font-weight:700;line-height:1.25}
.dochd .ds{font-size:12px;opacity:.78;margin-top:3px}
.docbox.empty0 .ds{opacity:1;color:var(--amber-ink);font-weight:600}
.dochd .ed{font-size:13px;text-decoration:underline;opacity:.85;white-space:nowrap}
.docbox.empty0 .ed{color:var(--amber-ink);opacity:1;font-weight:600}

.card.undone{opacity:.6;background:var(--card2)}
.card.undone b{text-decoration:line-through}
.opcode{margin-left:5px;padding:1px 6px;background:var(--blue-bg);border-radius:4px;
  font-size:11px;color:var(--blue);font-weight:600;font-variant-numeric:tabular-nums}
.chips button.ext{border-color:var(--red);color:var(--red)}
.chips button.ext.on{background:var(--red);border-color:var(--red);color:var(--card)}
.badge.plum{background:var(--plum)}

/* ===== 权限勾选 ===== */
.permlist{background:var(--card);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.prow{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.prow:last-child{border-bottom:none}
.prow.on{background:var(--blue-bg)}
.prow .pbox{width:22px;height:22px;border:2px solid var(--line);border-radius:5px;flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--card);font-size:14px}
.prow.on .pbox{background:var(--blue);border-color:var(--blue)}
.prow b{font-size:15px}
.prow .muted{font-size:12px;margin-top:1px}
.dochd .ed.dz{color:var(--red-line);margin-left:12px}
.docbox.empty0 .ed.dz{color:var(--red)}

/* ===== 一眼分得清:库位蓝、物料黑、久放的黄或红 ===== */
.agev{white-space:nowrap}
.agev b{font-weight:600}
.agev.warm{color:var(--amber-ink);font-weight:600}
.agev.warm b{font-weight:800}
.agev.hot{color:var(--red);font-weight:700}
.agev.hot b{font-weight:800;font-size:1.05em}

/* 库位码统一蓝色,跟物料编码分开 */
.loc .code,.iline .lc,.pln .code{color:var(--blue)}
.loc .code{font-size:19px;font-weight:800;letter-spacing:.02em}
.loc.first{border-left:4px solid var(--amber)}
.loc.first .code{color:var(--amber-ink)}

/* 物料名称加重,编码退成灰 */
.iline .nm,.loc .grow>div:first-child{color:var(--ink)}

/* ===== 通知 ===== */
.nf{display:flex;gap:11px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--blue);border-radius:9px;padding:12px 13px;margin-bottom:8px;box-shadow:var(--shadow)}
.nf.lock{border-left-color:var(--red)}
.nf.fifo,.nf.stale{border-left-color:var(--amber)}
.nf.force{border-left-color:var(--plum)}
.nf.undo,.nf.km{border-left-color:var(--line)}
.nf.read{opacity:.62;box-shadow:none;background:var(--card2)}
.nf .ni{font-size:20px;line-height:1.2;flex:none}
.nf .nt{font-weight:600;font-size:15px;line-height:1.35}
.nf .nb{font-size:13px;color:var(--sub);margin-top:3px;line-height:1.5}
.newdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-left:6px;vertical-align:2px}
#tabs .dot{position:absolute;top:6px;right:calc(50% - 18px);width:8px;height:8px;
  border-radius:50%;background:var(--red)}
#tabs button{position:relative}

/* 托盘号:分柜-托号 两个数字框 */
.palbox{display:flex;align-items:center;gap:7px}
.palbox input{flex:1;min-width:0;text-align:center;font-size:19px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.05em}
.palbox .dash{font-size:22px;color:var(--sub);font-weight:700;flex:none}

/* ===== 按型号查库存 ===== */
.bomhd{background:var(--blue);color:var(--card);border-radius:11px;padding:15px;margin:12px 0 10px}
.bomhd .bm{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.bomhd .bs{font-size:12px;opacity:.8;margin-top:3px}
.bomhd .bp{font-size:27px;font-weight:800;line-height:1}
.bomhd .bp.ok{color:var(--green-lit)}
.bomhd .bp.bad{color:var(--amber-line)}
.bset{margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.18);font-size:13px}
.bset b{font-size:19px}
.bset.muted{color:rgba(255,255,255,.6)}
.bomrow{display:flex;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;margin-bottom:6px;box-shadow:var(--shadow)}
.bomrow.none{background:var(--red-bg);border-color:var(--red-line)}
.bomrow .bn{font-weight:600;font-size:15px;line-height:1.35}
.bomrow .blocs{font-size:12px;color:var(--blue);margin-top:3px}
.bomrow .bq2{font-size:21px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;line-height:1.1}
.bomrow .bq2.zero{color:var(--red);font-size:17px}
.bomrow .bsets{font-size:12px;color:var(--sub);margin-top:4px;white-space:nowrap}
.bomrow .bsets b{color:var(--blue);font-size:14px}
.gtag{display:inline-block;margin-left:7px;padding:2px 8px;background:var(--plum);color:var(--card);
  border-radius:5px;font-size:11px;font-weight:600;vertical-align:2px;cursor:pointer;white-space:nowrap}
.gwhere{margin-top:5px;font-size:12px;color:var(--plum);font-weight:600;text-decoration:underline;cursor:pointer}

/* ===== 首页的仓库选择 ===== */
.whpick{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;-webkit-overflow-scrolling:touch}
.whpick::-webkit-scrollbar{height:0}
.whpick button{flex:0 0 auto;background:var(--card);border:1.5px solid var(--line);border-radius:12px;
  padding:9px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  cursor:pointer;transition:.12s;min-width:82px}
.whpick button:active{transform:scale(.97)}
.whpick button.on{background:var(--blue);border-color:var(--blue)}
.whpick .wn{font-size:14px;font-weight:700;color:var(--ink);line-height:1.25}
.whpick .wc{font-size:11px;color:var(--sub);font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.4px}
.whpick .wl{font-size:10px;color:var(--amber-ink)}
.whpick button.on .wn{color:var(--card)}
.whpick button.on .wc{color:rgba(255,255,255,.7)}
.whpick button.on .wl{color:var(--amber-line)}

/* ===== 改版:分段控件 / 分组列表 / 数字条 ===== */
.seg{display:flex;background:var(--card2);border-radius:9px;padding:3px;margin-bottom:14px}
.seg button{flex:1;padding:8px 4px;border:0;background:transparent;border-radius:6px;
  font-size:13px;color:var(--sub);cursor:pointer;transition:.12s;font-family:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(20,36,58,.08)}
.seg button:active{transform:scale(.97)}

.statbar{display:flex;background:var(--card);border:1px solid var(--line);border-radius:11px;margin-bottom:14px}
.statbar>div{flex:1;padding:15px 4px;text-align:center;position:relative}
.statbar>div+div::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:1px;background:var(--line)}
.statbar .v{font-size:22px;font-weight:700;color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:-.5px}
.statbar .k{font-size:11px;color:var(--sub);margin-top:3px}

.grp{font-size:11px;color:var(--sub);letter-spacing:.5px;margin:18px 0 7px}
.rows{background:var(--card);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.rows button{display:flex;width:100%;align-items:center;gap:10px;padding:13px 14px;border:0;
  background:transparent;border-bottom:1px solid var(--card2);font-size:14.5px;color:var(--ink);
  cursor:pointer;text-align:left;font-family:inherit}
.rows button:last-child{border-bottom:0}
.rows button:active{background:var(--card2)}
.rows .gr{flex:1}
.rows .tag{font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--sub)}
.rows .tag.hot{color:var(--amber-ink);font-weight:700}
.rows .tag.bad{color:var(--red);font-weight:700}
/* ★ 箭头用 --sub 不用 --dim:--dim 在浅色白底上只有 2.58:1(自检抓到),
     而这个「›」是全站最常见的元素,看不清等于处处发虚。 */
.rows .ar{color:var(--sub);font-size:17px;line-height:1}

.notice{display:flex;align-items:center;gap:10px;background:var(--amber-bg);border:1px solid var(--amber-line);
  border-radius:9px;padding:11px 13px;margin-bottom:14px;font-size:13.5px;color:var(--amber-ink);cursor:pointer}
.notice.red{background:var(--red-bg);border-color:var(--red-line);color:var(--red-ink)}
.notice .gr{flex:1}
.notice .ar{font-size:17px;line-height:1;opacity:.65}

/* 型号列表按编码开头字母分类 */
.pfxbar{display:flex;gap:6px;overflow-x:auto;padding:8px 0 4px;scrollbar-width:none}
.pfxbar::-webkit-scrollbar{display:none}
.pfx{flex:0 0 auto;border:1px solid var(--line);background:var(--card);border-radius:8px;
  padding:6px 12px;font-size:13px;color:var(--sub);white-space:nowrap;cursor:pointer;
  font-variant-numeric:tabular-nums}
.pfx.on{background:var(--blue);border-color:var(--blue);color:var(--card);font-weight:600}
.pfxg{margin-top:8px}
.pfxt{font-size:12px;color:var(--sub);font-weight:600;margin:12px 2px 6px}

/* 仓别归属:逐条勾选 + 底部固定操作条 */
.wbrow{display:block;cursor:pointer;margin-bottom:8px}
.wbrow input.wbck{accent-color:var(--blue)}
.wbbar{position:sticky;bottom:60px;background:var(--bg);padding:10px 0 4px;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}

/* ===== 「更多」页第二版 ===== */
/* 提醒条:要你动手的,排最上面。红的最急,琥珀次之,蓝的只是知会 */
.notice{display:flex;align-items:center;gap:9px;background:var(--card);
  border:1px solid var(--line);border-left:4px solid var(--sub);border-radius:10px;
  padding:11px 12px;margin-bottom:8px;font-size:14px;width:100%;text-align:left}
.notice.red{border-left-color:var(--red);background:var(--red-bg)}
.notice.amb{border-left-color:var(--amber);background:var(--amber-bg)}
.notice.blu{border-left-color:var(--blue);background:var(--blue-bg)}
.notice .gr{flex:1;line-height:1.4}
.notice .sm{display:block;font-size:12px;color:var(--sub);margin-top:1px}
.notice .ar{color:var(--sub)}
/* 家底:常态数字,一行小字就够 */
.thin{font-size:12.5px;color:var(--sub);padding:2px 3px 0;display:flex;gap:12px;flex-wrap:wrap}
.thin b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
/* 今天:一句话 */
.today2{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-top:10px;font-size:13.5px;color:var(--sub);width:100%;text-align:left}
.today2 .gr{flex:1}
.today2 b{color:var(--ink);font-variant-numeric:tabular-nums}
.today2 .go{color:var(--blue);font-weight:600;font-size:13px;white-space:nowrap}
/* 折叠:一个月用一次的,收起来但留个明确的门 */
.rows.fold .folded{display:none}
.rows.fold[data-open="1"] .folded{display:block}
.rows.fold[data-open="1"] .foldsw{border-bottom:1px solid var(--line)}
.foldsw .sm{color:var(--sub);font-size:12px;margin-left:6px}

/* 看库位:每个区带一条占用。这块原来在「更多」页,但它只对外协仓成立
   (辅料仓粉房是"第N个"、成品仓还没建位),放在跟着仓走的页面才对 */
.zgrid button{position:relative;padding-bottom:14px}
.ztrack{position:absolute;left:10px;right:10px;bottom:8px;height:3px;
  background:var(--line);border-radius:2px;overflow:hidden}
.zfill{display:block;height:100%;background:var(--blue);border-radius:2px}
.zfill.hot{background:var(--amber)}
.zfill.full{background:var(--red)}
.zlegend2{display:flex;gap:14px;justify-content:center;margin-top:8px;
  font-size:11.5px;color:var(--sub)}
.zlegend2 i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px}

/* 更新记录 */
.chgd{margin:6px 0 0 16px;padding:0;font-size:12.5px;color:var(--sub);line-height:1.65}
.chgd li{margin-bottom:2px}

/* 多张领料单:每张一块 */
.rqcard{margin-bottom:9px}
.rqcard:last-child{margin-bottom:0}

/* 托盘号:跟库位并排,同一档醒目度。一个库位常放好几托,这是员工唯一能对上物料卡的东西 */
.paltag{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:7px;
  background:var(--blue-bg);color:var(--blue);font-size:14px;font-weight:600;
  vertical-align:2px;letter-spacing:.02em}
.paltag.none{background:var(--card2);color:var(--sub);font-weight:400;font-size:12.5px}

/* 固定前缀的输入框:LL 钉在左边,右边只输数字 */
.pfxin{display:flex;align-items:stretch;border:2px solid var(--blue);border-radius:10px;overflow:hidden}
.pfxin .pfx{display:flex;align-items:center;padding:0 12px;background:var(--blue);color:var(--onblue);
  font-size:18px;font-weight:700;letter-spacing:.06em;flex:0 0 auto}
.pfxin input{flex:1;min-width:0;border:none;border-radius:0;background:var(--card)}
.pfxin input:focus{outline:none}

/* 双语:短按钮里的高棉文压小一号,免得把搜索框那行撑变形 */
.searchbox button .kmtx,#tabs button .kmtx{font-size:10px;line-height:1.15;opacity:.85}

/* 辅料流水里被冲掉的那笔,压暗但留着 */
.card.dim{opacity:.5}

/* 选项多的时候换行,别挤成一条横滚 */
.chips.wrap{flex-wrap:wrap}
.chips.wrap button{margin-bottom:6px}

/* 装柜照片:缩略图网格 */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pcell{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;
  background:var(--card2);cursor:pointer}
.pcell img{width:100%;height:100%;object-fit:cover;display:block}
.pcell .no{position:absolute;left:5px;top:5px;background:var(--shade);color:var(--onshade);
  border-radius:5px;padding:1px 7px;font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums}
@media(min-width:700px){.pgrid{grid-template-columns:repeat(5,1fr)}}

/* 字母和数字分两格,省一次切输入法 */
.splitin{display:flex;align-items:center;gap:8px}
.splitin input{min-width:0}
.splitin input.up{flex:0 0 42%;text-transform:uppercase;letter-spacing:.12em}
.splitin input:not(.up){flex:1}
.splitin .dash{color:var(--sub);flex:0 0 auto}

/* 出口柜进度条 */
.ptrack{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:10px}
.pfill{display:block;height:100%;border-radius:3px;transition:width .3s ease}

/* 顶栏右上角:名字 + 职务 + 仓别 + 头像。
   用户不认识高棉字,靠这三样认人——所以这不是装饰,是他的工作工具 */
#top .me{display:flex;align-items:center;gap:8px}
#top .mtx{text-align:right;line-height:1.25}
#top .mwh{display:block;font-size:10.5px;opacity:.6}
#top .mav{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--topsw)}
/* ★★★ 头像占位里那个字**跟底色一模一样**(自检抓到 1:1,深色下完全看不见)。
   ★★ 它本来靠继承 #top 的字色,不知被哪一条盖成了顶栏底色 ——
     **不去追谁盖的,显式钉死**:这一格的字就该是顶栏字色。 */
#top .mav.ph{display:flex;align-items:center;justify-content:center;font-size:14px;
  font-weight:700;opacity:.85;color:var(--topink)}

/* 「我的今天」——每个人都看得见的那块 */
.meb{margin-bottom:12px}
.mebh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mebav{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--card2)}
.mebav.ph{display:flex;align-items:center;justify-content:center;font-size:18px;
  font-weight:700;color:var(--blue);background:var(--blue-bg)}
.mebg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.mebg .v{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}
.mebg .k{font-size:11px;color:var(--sub);margin-top:1px}

/* 更新之后新东西打个「新」,点过就消失 */
/* ★ right 原来是 -6px —— 父元素贴着页面右边时,这个小红点自己
   **把页面撑宽 6px**(自检在通知页抓到)。收到 -1px,视觉几乎没差别。 */
.newdot{position:absolute;top:-3px;right:0;background:var(--red);color:var(--onblue);
  font-size:9px;font-weight:700;line-height:1;padding:2px 4px;border-radius:6px;
  letter-spacing:0}
#tabs button .tic{position:relative}
.rows button .newdot,.chips button .newdot{position:static;margin-left:6px}

/* 6 格的时候字压小一点,别换行 */
#tabs.six button{font-size:11px}
#tabs.six button .tic{transform:scale(.92)}
/* 七格:再收一号 —— 底部这排是四个动作两个查询,
   两进两出(来料/收货/出库/装柜),仓库就这四件事,不会再多了 */
#tabs.seven button{font-size:10px;padding-left:0;padding-right:0}
#tabs.seven button .tic{transform:scale(.86)}

/* 无仓认领底部固定操作条 */
.fixbar{position:sticky;bottom:0;background:var(--bg);padding:10px 0 4px;
  border-top:1px solid var(--line);margin-top:10px}

/* 联想下拉的分段:本仓的 / 别的仓的 */
.ac .actier{padding:5px 12px 3px;font-size:11px;color:var(--sub);
  background:var(--card2);border-top:1px solid var(--line)}
.ac .actier:first-child{border-top:0}
.ac .whtag{display:inline-block;background:var(--amber);color:var(--onamber);
  font-size:10px;padding:1px 6px;border-radius:5px;margin-left:6px;vertical-align:middle}

/* ===== 一托分多单 =====
   一托 1000 要分给十张领料单,以前得来回加十次料。
   一个界面十个框、合计实时算——这个加法原来是阿雅拿计算器按的 */
.splitq{display:flex;flex-direction:column;gap:8px}
.splitq .sr{display:flex;align-items:center;gap:8px}
.splitq .srn{flex:1;min-width:0;font-size:15px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.splitq .srn .muted{font-weight:400;font-size:12px}
.splitq .sr input{width:106px;flex:none;padding:12px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--card);color:var(--ink);
  text-align:right;font-size:18px;font-weight:600}
.splitq .sr input:focus{border-color:var(--blue);outline:none}
.splitq .sr input.bad{border-color:var(--red);background:var(--red-bg);color:var(--red-ink)}
.splitq .srest{flex:none;padding:12px 13px;border:1px solid var(--line2);border-radius:9px;
  background:var(--card2);color:var(--sub);font-size:14px}
/* 合计条:四种状态一眼分得开——没分/还剩/正好/超了 */
.sumbar{margin:12px 0 14px;padding:12px;border-radius:9px;text-align:center;
  font-size:15px;background:var(--card2);border:1px solid var(--line);color:var(--sub)}
.sumbar b{font-size:19px}
.sumbar.amber{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber-ink)}
.sumbar.green{background:var(--green-bg);border-color:var(--green-lit);color:var(--green-ink)}
.sumbar.red{background:var(--red-bg);border-color:var(--red-line);color:var(--red-ink)}

/* 单号位数提示:边输边说还差几位,别等她点了保存才报错 */
.lenhint{font-size:12px;margin-top:4px;min-height:16px;color:var(--sub)}
.lenhint.bad{color:var(--red);font-weight:600}
.lenhint.good{color:var(--green)}

/* ===== 这托在谁手上 =====
   备料把货从架子上取下来之后,它的"库位"就是一个工号。
   醒目度跟库位同档 —— 做成小徽章挂角上员工看不见,等于只做了一半 */
.holder{display:inline-block;background:var(--plum);color:var(--onblue);
  padding:2px 10px;border-radius:7px;font-size:17px;font-weight:700;letter-spacing:.02em}
.card .holder,.loc .holder{vertical-align:middle}

/* 分段条上的数字 —— 提醒条只在有数时出现,没数那天入口就消失了;
   分段条永远在,数字直接印在标签上,0 就是 0 */
.seg button{display:flex;align-items:center;justify-content:center;gap:4px}
.segn{background:var(--amber);color:var(--onblue);border-radius:9px;padding:0 5px;
  font-size:10.5px;font-weight:700;min-width:16px;line-height:16px;display:inline-block}
.segn.red{background:var(--red);color:var(--onblue)}
.outseg{margin-bottom:12px}

/* ===== 核对区:名字 / 尺寸 / 编码 =====
   编码是三样里最难核的(一串没语义的数字,糊掉的针式打印上 B/8、G/O 分不开);
   名字和尺寸有语义,错了一眼看出来。这一层堵的是"选错一个确实存在的编码" */
.chk{background:var(--card);border:2px solid var(--blue);border-radius:11px;
  padding:13px 14px;margin-bottom:12px}
.chkt{font-size:11.5px;color:var(--blue);font-weight:600;margin-bottom:7px;letter-spacing:.03em}
.chkn{font-size:19px;font-weight:700;color:var(--ink);line-height:1.3}
.chks{font-size:16px;color:var(--ink);margin-top:4px;font-weight:600}
.chks .miss{font-size:12.5px;color:var(--amber-ink);font-weight:400}
.chkc{font-size:12.5px;color:var(--sub);margin-top:5px}
.spec{font-size:12.5px;color:var(--ink);opacity:.85;margin-top:1px}

/* ===== 录单:一行一个料,填完自动冒下一行 ===== */
.jln{display:flex;gap:8px;align-items:flex-start;margin-bottom:9px}
.jlc{flex:1;min-width:0;position:relative}
.jlc input{width:100%;padding:10px;border:1px solid var(--line);border-radius:9px;
  background:var(--card2);color:var(--ink);font-size:14px;font-family:inherit}
.jlc input:focus{border-color:var(--blue);outline:none}
.jnm{font-size:11.5px;color:var(--green-ink);margin-top:3px;padding-left:2px;line-height:1.5}
.jac{position:absolute;left:0;right:0;top:100%;z-index:30}
.jqty{width:88px;flex:none;padding:10px;border:1px solid var(--line);border-radius:9px;
  background:var(--card2);color:var(--ink);text-align:right;font-size:16px;font-weight:600;
  font-family:inherit}
.jqty:focus{border-color:var(--blue);outline:none}
.jdel{flex:none;padding:10px 4px;color:var(--sub);font-size:15px}
/* 任务卡 */
.docbox2{background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;margin-bottom:12px}
.split2{font-size:11.5px;color:var(--sub);margin-top:7px;padding-top:7px;
  border-top:1px dashed var(--line2);line-height:1.7}
.split2 b{color:var(--ink)}
.plan{margin-top:9px;padding:9px 10px;background:var(--card2);border-radius:8px}
.ph2{font-size:11px;color:var(--green-ink);font-weight:600;margin-bottom:5px}
.pl{display:flex;align-items:center;gap:4px;padding:3px 0;font-size:13px}
.pbar{height:5px;background:var(--card2);border-radius:3px;overflow:hidden}
.pbar>div{height:100%;background:var(--green)}

/* ===== 宽屏 / 平板横屏 =====
   手机竖屏那套一个像素不动 —— 员工主力设备是手机,改坏了代价最大。
   这里只在 1000px 以上生效:把中间那一条撑开、列表排成两列。
   为什么不做左右分栏:那是另一套布局,得为它单独调试一遍;
   而宽屏的人(他和玉香在电脑上)真正缺的是"一屏能看到更多",不是花样 */
@media(min-width:1000px){
  .wrap{max-width:1180px}
  #top .bar{max-width:1180px}

  /* 列表类的卡片排两列 —— 任务、待领、我手上、多发待补、欠单 */
  #jb, #jbr, #pk, #oh, #ov, #db{
    display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start}
  /* 整行的东西(标题、提醒条、按钮、空状态)不参与分列 */
  #jb>.sect, #pk>.sect, #oh>.sect, #ov>.sect, #db>.sect,
  #jb>.btn, #pk>.btn, #oh>.btn, #ov>.btn, #db>.btn,
  #jb>.notice, #pk>.notice, #oh>.notice, #ov>.notice, #db>.notice,
  #jb>.empty, #pk>.empty, #oh>.empty, #ov>.empty, #db>.empty,
  #jb>.seg, #pk>.seg, #oh>.seg, #ov>.seg, #db>.seg,
  #jb>.sumbar, #pk>.sumbar, #oh>.sumbar, #ov>.sumbar, #db>.sumbar,
  #jb>.muted, #pk>.muted, #oh>.muted, #ov>.muted, #db>.muted,
  #jb>.flex, #pk>.flex, #oh>.flex, #ov>.flex, #db>.flex{grid-column:1/-1}

  /* ★ 2026-10-05 选库位弹窗的容器也叫 #pk,上面那条「列表排两列」把它一起变成了两列网格,
       里面的仓名卡 .pkwh2、区号/排号 .chips、层 .lvs 各占一格,于是电脑上缩成一小条。
       弹窗里的东西一律整行铺开,别参与分列(手机进不了这段,所以手机一直正常) */
  .sheet #pk>.pkwh2, .sheet #pk>.chips, .sheet #pk>.lvs, .sheet #pk>.card{grid-column:1/-1}
  /* 电脑上鼠标点、屏幕大,仓名卡放大一档(手机 88px/13.5px 不动) */
  .pkwh2{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:9px}
  .pkwh2 button{padding:13px 14px 11px;border-radius:12px}
  .pkwh2 .nm{font-size:16px}
  .pkwh2 .cd{font-size:12.5px}

  /* 找货/出库搜出来的托也排两列 */
  #ores, #fres{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start}
  #ores>.empty, #fres>.empty, #ores>.sect, #fres>.sect{grid-column:1/-1}

  /* 弹窗:宽屏上别再贴着底边糊满一屏,做成居中的对话框 */
  .sheet{max-width:640px;border-radius:16px;margin-bottom:5vh}
  .mask{align-items:center}

  /* 底部那五格在宽屏上摊太开,收窄居中。
     不用 left:50%+transform —— 原来的 left:0;right:0 还在,两个定位会打架 */
  #tabs{max-width:760px;margin:0 auto;border-radius:14px 14px 0 0}
}

/* ===== 32 寸带鱼屏(2026-08-13 用户:「你看现在的界面 好难看的」)==========
   ★ 现场那块屏很宽,可容器卡死在 1180px —— **左右各空一大片**,
     中间一条细长的内容,看着就像"网页没做完"。
   ★ **宽屏缺的不是"更宽的一条",是"一屏能看到更多"**:
     所以往上加两档,列表从两列到三列、四列,容器跟着放宽。
   ★ **但正文不能无限宽** —— 一行字太长,眼睛从行尾找回行首就会串行。
     所以放宽的是"能并排的卡片",不是段落。
   ★ 对手机是**零风险**:`@media(min-width:…)` 是单向的,
     手机屏幕永远进不了这几段,一个像素都不会变。 */
@media(min-width:1500px){
  .wrap{max-width:1460px}
  #top .bar{max-width:1460px}
  /* 列表三列 */
  #jb, #jbr, #pk, #oh, #ov, #db, #ores, #fres{grid-template-columns:repeat(3,1fr)}

  /* ★ 首页在宽屏上**左右分栏**:左边全厂合计(四个数字卡竖排成一列),
     右边分仓表 —— 原来是一个压着一个往下滚,右半屏全空着。
     ★ 走过的弯路:我先试着给 `.stat` 加 `max-width` —— **那跟它的 grid 打架**,
       四张卡直接竖成一条,比不改还难看。**限宽不是布局,该分栏就分栏** */
  /* ★ 首页在宽屏上**左右分栏**:左边全厂合计,右边分仓表。
     四个子元素依次是:标题「全厂合计」/ 数字卡 / 标题「分仓看」/ 表格 ——
     **用 flex-wrap + 固定宽度让它们两两成栏**。
     ★ 走过的两段弯路:①先给 `.stat` 加 max-width,**跟它自己的 grid 打架**,
       四张卡竖成一条 ②改用 grid + nth-child 指格子,浏览器认、
       但我出预览图的那个渲染器是老引擎、不支持,**图上看着像没生效**。
       flex 这套两边都认 —— **要兼容的不只是用户的浏览器,还有你自己的验证工具** */
  /* ★★★★ 2026-08-21 用户实拍:「**我倒是看见这里有问题了 —— 空白那么大的地方**」。
     ★★★★ 根子是**这套左右分栏已经过时了**:它是给「左边四个数 + 右边一张宽表」设计的,
       而那张表 08-20 **已经改成卡片**了 —— 卡片自己就铺满宽度,
       左栏却还占着 360px 竖排四个数,**右边整整空出一大片**。
     ★★★ 撤掉分栏,改成**上下**:四个数横着铺满一排,分仓卡片在下面自己排。
     ★★ 通则:**改了下半截的形状,上半截为它让出的位置也得跟着撤** ——
       不然就是这样,一边挤一边空。 */
  #whsum{display:block}
  #whsum .stat{grid-template-columns:repeat(4,1fr)}
  #whsum table{margin-top:0}
}
@media(min-width:1900px){
  .wrap{max-width:1820px}
  #top .bar{max-width:1820px}
  #jb, #jbr, #pk, #oh, #ov, #db, #ores, #fres{grid-template-columns:repeat(4,1fr)}
}
/* ★★★★★ 这一块必须排在 1900 档**后面** —— 2560 的屏两个条件都满足,
   **同等特异性下后写的胜出**,写在前面会被 1900 档整个盖掉。
   这个坑今天已经踩过两次(手机 #pcnav / .tvidle),第三次了。 */

/* ★ 超宽屏上底部那五格别摊在正中间显得孤零零 —— 收窄贴住,像个工具条 */
@media(min-width:1500px){
  #tabs{max-width:900px}
}

/* ★★ 宽屏上"一条横贯全屏"的控件要收住 —— 现场实拍看到的第二个毛病:
   分段条(两个 tab)拉到 1800 宽,中间一大片空;满宽的蓝按钮也一样。
   **控件的宽度该跟它的内容量匹配**,不是屏幕有多宽就多宽 */
@media(min-width:1500px){
  .seg, .pbseg{max-width:760px}
  /* ★★ 2026-08-20 实拍:「＋新录一批单」那条深蓝按钮**从左到右横贯 1400**,
     中间一大片空 —— 跟分段条同一个毛病。**控件的宽度该跟它的内容量匹配**。
     ★ 它在 grid 里占整行(`grid-column:1/-1`),限宽后要 `justify-self:start`
       才贴着左边跟卡片对齐;不写的话 grid 会把它拉伸回整行,**限宽等于没写** */
  #jb > .btn, #jbr > .btn{max-width:760px;justify-self:start}
  #pb > .btn, #pb > .notice{max-width:1000px}
  .backbar, #view > .wrap > .notice{max-width:1100px}
  /* 找货页:没搜东西时右边一大片空 —— 统计块靠左收住,别拉成一条 */
  #res:empty + #whsum .stat{max-width:none}
}

/* 平板竖屏 / 小笔记本:只撑宽,不分列 —— 分列会把卡片挤得太窄 */
@media(min-width:760px) and (max-width:999px){
  .wrap{max-width:940px}
  #top .bar{max-width:940px}
}

/* 汇总里那些「哪张单要多少」的数字,点一下能改 —— 录错了不用回头重来 */
.sp1{cursor:pointer;border-bottom:1px dashed var(--line2);padding-bottom:1px}
.sp1:active{opacity:.6}

/* 推荐用哪几托:把「为什么是它」写出来 —— 
   只写「存149天」是个孤零零的数字,没有对照就没有意义 */
.pl2{padding:6px 0;border-bottom:1px dashed var(--line2)}
.pl2:last-child{border-bottom:0}
.plwhy{font-size:11px;color:var(--sub);margin-top:2px;line-height:1.5}
.fifotag{display:inline-block;background:var(--amber-bg);border:1px solid var(--amber-line);
  color:var(--amber-ink);border-radius:5px;padding:1px 7px;font-size:10.5px;
  font-weight:600;margin-left:6px}
.plskip{font-size:11px;color:var(--amber-ink);background:var(--amber-bg);
  border:1px solid var(--amber-line);border-radius:7px;padding:7px 9px;margin-top:7px;line-height:1.6}

/* ★★ 用户:「**而且也不好看**」—— 不好看的根子是**眼睛没有落点**:
   2365 / 1800 / 432 / 1188 / 2545 / 1226 / 1139 全是一个字号一个颜色,
   一屏七八个数一样重,看的人只能一个一个读过去。
   规矩:**一屏只让一个数最大** —— 这次要备多少。别的全降级。 */
.qlab{font-size:10.5px;color:var(--sub);line-height:1.2;margin-bottom:1px}
/* 拿货次序 —— 屏幕上的顺序就是干活的顺序,写上号才算真的说了 */
.plno{flex:none;width:17px;height:17px;border-radius:50%;background:var(--blue,#2563eb);
  color:var(--onfill);font-size:10.5px;font-weight:700;display:inline-flex;
  align-items:center;justify-content:center;margin-right:5px}
/* 底下那个加法 —— 「为什么是几托」的答案就在这一行 */
.plsum{margin-top:7px;padding-top:6px;border-top:1px solid var(--line2);
  font-size:12px;color:var(--sub);text-align:right}
.plsum b{color:var(--ink);font-size:14px}
.plwhy .okb{color:var(--green-ink)}
.plwhy .cutb{color:var(--amber-ink)}
/* 这一托要干的活 —— **单独一行**,不跟"存了多少天"挤在一起:
   柬文译文是另起一行加上去的,挤在内联里整行会散 */
.plact{font-size:11.5px;font-weight:600;margin-top:2px;line-height:1.5}
.plact.okb{color:var(--green-ink)}
.plact.cutb{color:var(--amber-ink)}
.plsum.bad b{color:var(--red)}
/* 几张单一共要多少 —— 这个总数原来屏幕上一次都没出现过 */
.spsum{color:var(--ink);font-weight:600;margin-bottom:3px}
.sp1.spok{opacity:.55}
.sp1.spwait{color:var(--amber-ink);font-weight:600}
.sp1.spwait b{color:var(--amber-ink)}
.okmark{color:var(--green-ink);font-weight:600;margin-left:3px}

/* 能点的数字 —— 数字摆出来就是勾着人往下看的,看不了就是半截功能 */
.stat .card.tap{cursor:pointer;transition:border-color .12s}
.stat .card.tap:active{border-color:var(--blue)}
table tr.tap{cursor:pointer}
table tr.tap:active{background:var(--card2)}
td.tap2{cursor:pointer;color:var(--blue) !important;text-decoration:underline;
  text-decoration-color:var(--line2);text-underline-offset:3px}
.statbar>div.tap{cursor:pointer}
.statbar>div.tap:active .v{color:var(--blue)}

/* 筛完之后没货的档位/原因,压暗而不是藏起来 ——
   藏起来会让人以为数据丢了;压暗是明说"这个组合没有货" */
.bk.none{opacity:.4}
.rs.none{opacity:.42;cursor:default}

/* 推荐库位:每条都要写清"凭什么是它" —— 不给理由,人就是在赌 */
.sugi{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-bottom:7px;color:var(--ink);font-family:inherit;font-size:14px}
.sugi:active{border-color:var(--blue)}
.sugi .grow{flex:1;min-width:0}
.sugi .ar{font-size:12px;color:var(--blue);flex:none}
.sugi .muted{font-size:11.5px;margin-top:2px}
.pill2{display:inline-block;background:var(--blue-bg);border:1px solid var(--blue);
  color:var(--blue);border-radius:5px;padding:0 7px;font-size:10.5px;font-weight:600;margin-left:6px}
.more{color:var(--blue);cursor:pointer;text-decoration:underline;
  text-decoration-color:var(--line2);text-underline-offset:3px}

/* 挑托时每托的数量框 —— 推荐是建议不是命令,现场跟推荐不一样她得改得动 */
.jpq{width:92px;padding:8px;border:1px solid var(--line);border-radius:8px;
  background:var(--card2);color:var(--ink);text-align:right;font-size:17px;
  font-weight:700;font-family:inherit}
.jpq:focus{border-color:var(--blue);outline:none}

/* 等领卡里那几行料:库位排最前 —— 她拿着卡先走到库位,再认哪一托,顺序得跟动作一致 */
.pkln{display:flex;align-items:center;gap:6px;padding:6px 0;
  border-bottom:1px dashed var(--line2);font-size:13px}
.pkln:last-child{border-bottom:0}
.pkln .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkln .code{font-size:14.5px;font-weight:700;color:var(--blue);flex:none}
.pkln.more{color:var(--blue);cursor:pointer;justify-content:center}

/* 「我的任务」每托拆成两个数:这次搬走多少、剩下多少要放回去 ——
   只给一个"这托现在 3738",她分不出哪部分是自己的活 */
.hsplit{display:flex;gap:9px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line2)}
/* ★ 只有一句话的那种状态(全放回 / 全发走)—— 不摆三格,
   摆了就是把同一个数抄三遍(2026-08-21 用户圈出来的那张卡) */
.hone{margin-top:9px;padding:10px 12px;border-radius:10px;font-size:13.5px;line-height:1.6}
.hone b{font-size:19px;font-weight:800;margin:0 2px}
.hone span{color:var(--sub)}
/* 原数和发走的:比"剩多少"轻一档 —— 他要动手的是"剩多少",那两个是交代来龙去脉 */
.hone u{text-decoration:none;font-weight:700;font-variant-numeric:tabular-nums;opacity:.75}
.hone.back{background:var(--green-bg,#ECFDF3);color:var(--green-ink)}
.hone.back b{color:var(--green-ink)}
.hone.go{background:var(--amber-bg,#FFF8E8);color:var(--amber-ink)}
.hone.go b{color:var(--amber-ink)}
.hsplit>div{flex:1;text-align:center;background:var(--card2);border-radius:8px;padding:8px 6px}
.hsplit.one>div{flex:none;width:100%}
.hsplit .hv{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.hsplit .hk{font-size:11px;color:var(--sub);margin-top:3px;line-height:1.4}
/* 分清这单是从任务来的还是散发的 —— 两条路都能发货,但只有一条会进任务历史 */
.pill3{display:inline-block;background:var(--card2);border:1px solid var(--line2);
  color:var(--sub);border-radius:5px;padding:0 6px;font-size:10.5px}

/* 「更多」底下那十几个页面的返回栏 ——
   底部那格「更多」是"回菜单"不是"返回上一步",人会先找页面上的返回 */
/* ★★ 2026-08-24:这条原来叫 `.bkbar`,**跟备份那块的 .bkbar 重名** ——
   它是 flex 容器,我的是普通块,混在一起布局是乱的。
   ★ 查下来全站用 bkbar 的**全是今天新写的那几处**,这条是没人用的遗留 ——
     改名成 .bkbar0 避开。**跟 .pli 那次一模一样**,今天第三次撞重名。 */
.bkbar0{display:flex;align-items:center;background:var(--card2);border:1px solid var(--line);
  border-radius:10px;padding:9px 11px;margin-bottom:12px}

/* 工作量表:按工号排,没有名次 —— 数字摆着,判断留给人 */
table.wl{width:100%;border-collapse:collapse;font-size:13px}
table.wl th{background:var(--card2);color:var(--sub);font-size:11.5px;font-weight:600;
  padding:8px 9px;text-align:left;border:1px solid var(--line)}
table.wl td{padding:8px 9px;border:1px solid var(--line);vertical-align:top}
table.wl td.r,table.wl th.r{text-align:right}
table.wl tr:active{background:var(--card2)}
table.wl tr.sumrow td{background:var(--card2);color:var(--ink)}
table.wl .muted{font-size:10.5px}

/* 工作量表:按工号排,没有名次 —— 数字摆着,判断留给人 */
table.wl{width:100%;border-collapse:collapse;font-size:13px}
table.wl th{background:var(--card2);color:var(--sub);font-size:11.5px;font-weight:600;
  padding:8px 9px;text-align:left;border:1px solid var(--line)}
table.wl td{padding:8px 9px;border:1px solid var(--line);vertical-align:top}
table.wl td.r,table.wl th.r{text-align:right}
table.wl tr:active{background:var(--card2)}
table.wl tr.sumrow td{background:var(--card2);color:var(--ink)}
table.wl .muted{font-size:10.5px}

/* 人名后面那个职务 —— 80 个人名字全是高棉文,不写职务认不出谁是谁 */
.ttl{display:inline-block;background:var(--card2);border:1px solid var(--line2);
  color:var(--sub);border-radius:5px;padding:0 6px;font-size:10.5px;margin-left:4px;
  vertical-align:1px;white-space:nowrap}

/* 仓别色点 —— 照搬现场那套色标,员工脑子里已经有对应了 */
.whdot{display:inline-block;width:10px;height:10px;border-radius:3px;
  margin-right:5px;vertical-align:-1px;flex:none}
.whbar{width:4px;border-radius:3px;flex:none;align-self:stretch;margin-right:9px}
.subno{display:inline-block;background:var(--blue);color:var(--onblue);
  border-radius:7px;padding:2px 11px;font-size:15px;font-weight:700;
  margin-right:8px;vertical-align:1px}

/* 来料日历:有柜的日子亮着,没数据的灰着点不了 */
.calbar{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .cw{text-align:center;font-size:11.5px;color:var(--sub);padding:4px 0}
.cal .cd{border-radius:9px;padding:7px 2px 6px;text-align:center;min-height:46px;
  border:1px solid var(--line);background:var(--card)}
.cal .cd.empty2{border:0;background:transparent}
.cal .cd.no{opacity:.32;background:transparent}
.cal .cd.has{cursor:pointer;border-color:var(--blue);background:var(--blue-bg)}
.cal .cd.has:active{border-width:2px}
.cal .cd.on{background:var(--blue);border-color:var(--blue)}
.cal .cd.on .dn,.cal .cd.on .dc{color:var(--onblue)}
.cal .dn{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.cal .cd.has .dn{color:var(--blue)}
.cal .dc{font-size:10px;color:var(--sub);margin-top:1px}
.cal .cd.has .dc{color:var(--blue)}


/* 盘点 · 按货架走:一排一格,绿=盘完 黄=盘了一半 */
.tkrows{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:8px;margin-bottom:14px}
.tkrow{border:1px solid var(--line2);background:var(--card,#fff);border-radius:8px;padding:12px 4px;
  font-family:ui-monospace,Consolas,monospace;font-size:15px;font-weight:700;color:var(--ink);
  cursor:pointer;line-height:1.3}
.tkrow .sm{display:block;font-size:10.5px;font-weight:600;color:var(--dim);margin-top:2px}
.tkrow.done{background:var(--green-bg);border-color:var(--green-ink);color:var(--green-ink)}
.tkrow.part{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber-ink)}
.tkrow:active{transform:scale(.97)}


/* ===== U9 对账的差异行 =====
   这一页的本质是**一列数字的对比**,不是一堆卡片。
   差额靠右、最大、等宽 —— 眼睛顺着右边一列竖着扫下来就行,
   物料名和明细压到左边小字。**它们不该跟差额抢位置**。 */
.u9row{display:flex;align-items:center;gap:12px;background:var(--card);
  border-radius:8px;padding:12px 14px;margin-bottom:6px;cursor:pointer;
  border-left:3px solid transparent}
.u9row:active{background:var(--card2)}
.u9main{flex:1;min-width:0}
.u9code{font-family:ui-monospace,Consolas,monospace;font-size:14.5px;font-weight:700;
  letter-spacing:.2px;line-height:1.35}
.u9name{font-size:13px;color:var(--sub);line-height:1.5;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u9sub{font-size:12.5px;color:var(--sub);margin-top:4px;
  font-family:ui-monospace,Consolas,monospace}
.u9sub b{color:var(--ink);font-weight:700}
.u9vs{opacity:.5;margin:0 4px}
.u9pal{opacity:.65;margin-left:5px}
.u9bad{color:var(--amber-ink);margin-left:8px}
.u9wh{font-size:11.5px;color:var(--sub);opacity:.7;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 差额:这一页唯一该抢眼的东西 */
.u9d{flex:none;font-family:ui-monospace,Consolas,monospace;font-size:21px;
  font-weight:800;letter-spacing:-.5px;text-align:right;min-width:88px}
.u9d.dn{color:var(--red)}
.u9d.up{color:var(--amber-ink)}
@media (max-width:430px){
  .u9d{font-size:18px;min-width:74px}
  .u9code{font-size:13.5px}
}

/* ===== 托卡片(看库位)· 上下两层 =====
   原来信息和按钮左右分栏,按钮那栏一宽,左边只剩不到一半,
   **物料编码被挤成四行** —— 员工反馈的就是这个。
   手机屏就那么宽,横着塞三样东西必然有一样被挤扁,
   而被挤扁的偏偏是他最要看的那个。所以:信息占满整行,按钮另起一行。 */
.pln2{padding:12px 14px;border-bottom:1px solid var(--line)}
.pln2:last-child{border-bottom:0}
.pl-top{display:flex;align-items:flex-start;gap:12px}
.pl-info{flex:1;min-width:0}
.pl-info .nm{font-weight:600;font-size:15px;line-height:1.4}
.pl-info .code{margin-top:2px;font-size:12.5px;line-height:1.5;
  word-break:break-all}          /* 编码长了才折行,而且有整行宽度可用 */
.pl-qty{flex:none;text-align:right;line-height:1.15}
.pl-qty b{display:block;font-family:ui-monospace,Consolas,monospace;
  font-size:20px;font-weight:800;letter-spacing:-.3px}
.pl-qty span{font-size:11.5px;color:var(--sub)}
.pl-meta{margin-top:5px;font-size:12px;line-height:1.6}
/* 按钮:另起一行、靠右、缩小 —— 它们是次要动作,不该跟编码抢宽度 */
.pl-act{display:flex;gap:6px;justify-content:flex-end;margin-top:9px}
.pl-act .btn{width:auto;padding:6px 14px;font-size:13px;min-width:0}
@media (max-width:430px){
  .pl-info .nm{font-size:14.5px}
  .pl-qty b{font-size:18px}
  .pl-act .btn{padding:6px 12px;font-size:12.5px}
}

/* ===== 出入库台账 · 汇总卡 + 按天分布(2026-08-11.23) ===== */
.lgsum{padding:10px 8px}
.lgsumr{display:flex;flex-wrap:wrap;gap:6px}
.lgcell{flex:1 1 30%;min-width:96px;background:var(--bg2,#f6f8fb);border:1px solid var(--line,#e3e8ef);
  border-radius:10px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.lgcell.on{border-color:var(--blue,#2563eb);background:var(--blue-soft);color:var(--blue-ink)}
.lgcell b{font-size:20px;line-height:1.1}
.lgcell .u{font-size:11px;color:var(--sub,#8a94a6);margin-top:-3px}
.lgcell .q{font-size:11.5px;color:var(--sub,#8a94a6)}
.lgdays{display:flex;gap:4px;overflow-x:auto;padding:8px 2px 6px;margin-bottom:6px;-webkit-overflow-scrolling:touch}
.lgday{flex:0 0 auto;width:38px;background:none;border:1px solid transparent;border-radius:8px;
  padding:2px 0 4px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:2px;cursor:pointer}
.lgday.on{border-color:var(--blue,#2563eb);background:var(--blue-soft);color:var(--blue-ink)}
.lgday .bar{width:16px;background:var(--blue,#2563eb);border-radius:3px 3px 0 0;opacity:.75}
.lgday.on .bar{opacity:1}
.lgday .n{font-size:11px;font-weight:600}
.lgday .d{font-size:10.5px;color:var(--sub,#8a94a6)}

/* 备料建议整块可点 —— 光有下面那个按钮,人会以为这块是"只能照做"的清单 */
.plan.tapme{cursor:pointer}
.plan.tapme:active{background:var(--blue-soft)}
.ph2r{float:right;font-weight:400;color:var(--blue,#2563eb);font-size:11.5px}

/* 弹窗叠层:后开的盖在前面那层上 */
#modal .mask + .mask{z-index:61}
#modal .mask + .mask + .mask{z-index:62}

/* 录单中的单据 —— 展开每一行录了什么 */
.jdl{border-top:1px dashed var(--line,#e3e8ef);margin-top:8px;padding-top:6px}
.jdli{display:flex;align-items:center;gap:10px;padding:5px 2px}
.jdli+.jdli{border-top:1px dashed var(--line2,#eef1f6)}
.jdn{font-weight:600;font-size:14px}
.jdq{color:var(--blue,#2563eb);font-weight:700;font-size:15px;white-space:nowrap}

/* 一个框装好几种料 —— 挪货时提示 */
.boxwarn{border-color:var(--amber,#f0a020);border-width:2px}
.bwt{font-weight:700;font-size:13.5px;color:var(--amber-ink,#8a5a00);margin-bottom:6px}
.bwi{display:flex;align-items:center;gap:10px;padding:4px 2px}
.bwi+.bwi{border-top:1px dashed var(--line2,#eef1f6)}
.bwn{font-weight:600;font-size:13.5px}

/* 一键指派 */
.assignbox{border-color:var(--blue,#2563eb);border-width:2px;margin-bottom:12px}
.abt{font-weight:700;font-size:14px}
/* 派工单(我的任务) */
.pkcard{border-left:4px solid var(--blue,#2563eb)}
.pkcard.lock{border-left-color:var(--amber,#f0a020)}
.pkloc{font-size:19px;font-weight:800;color:var(--blue,#2563eb)}

/* 货架区分工 */
.znz{font-weight:800;font-size:16px;color:var(--blue,#2563eb)}
.znown{font-size:13px;font-weight:600;margin-top:2px}
.znnone{font-size:13px;font-weight:700;color:var(--red,#d92d20);margin-top:2px}

/* 任务列表:明细直接摆在外面,不用点进去 */
.jlist{border-top:1px dashed var(--line,#e3e8ef);margin-top:9px;padding-top:5px}
.jli{display:flex;align-items:center;gap:9px;padding:4px 2px}
.jli+.jli{border-top:1px dashed var(--line2,#eef1f6)}
/* ★★★★★ 2026-08-20 用户实拍抓到:这一行的**料名在深色主题下看不见**。
   底色 `#FDECEC` 是写死的浅粉,而里面的字用 `--ink`(跟着主题走)——
   **深色主题下 --ink 是浅色,浅字配浅底,整行信息消失**。
   ★★ 这条铁律 08-13 立过一次(那次列了 23 个块逐个钉死):
     **底色写死了,里面的文字也必须写死**。半跟随主题,必然在某一个主题下撞车,
     而且**不报错** —— 布局对、元素在、就是看不见。
   ★ 缺料这一行尤其不能瞎:它是「要马上跟车间说」的那一行。 */
.jli.sh{background:var(--red-bg);border-radius:7px;padding:4px 7px;margin:2px 0}
.jli.sh .jn{color:var(--red-ink)}
.jli.sh .muted{color:var(--red-ink)}
.jli.sh .jsh{color:var(--red-ink)}
.jn{font-weight:600;font-size:13.5px;line-height:1.3}
.jq{font-weight:700;font-size:14px;white-space:nowrap}
.jsh{font-weight:800;font-size:14px;color:var(--red,#d92d20);white-space:nowrap}

/* ★ 分段条上了柬文之后堆成一坨 —— 因为 .seg button 是横向 flex,
   柬文那行(.kmtx 本来是 display:block)被当成 flex 子项摆到了中文旁边,
   再加上 nowrap + 裁切,五格全挤在一起看不清。
   改成允许换行:柬文独占第一行、中文和角标在第二行 */
.seg button.haskm{flex-wrap:wrap;row-gap:0;padding:5px 3px;font-size:12px;line-height:1.25}
.seg button.haskm .kmtx{flex:0 0 100%;font-size:9px;line-height:1.3;font-weight:500;
  opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(max-width:420px){
  .seg button.haskm{font-size:11px;padding:4px 2px}
  .seg button.haskm .kmtx{font-size:8px}
}

/* 货架区分工:行上直接能移除 */
.znrm{font-size:12px;color:var(--red);border:1px solid var(--red);border-radius:7px;
  padding:3px 9px;margin-right:8px;white-space:nowrap;background:var(--card)}

/* 四小时安全区 · 倒计时条 */
.slabar{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--green,#15803d);
  background:var(--green2,#e7f6ec);border-radius:7px;padding:4px 9px;display:inline-block}
.slabar.amb{color:var(--amber,#c77700);background:var(--amber2,#fff3de)}
.slabar.red{color:var(--red-ink);background:var(--red-bg)}
/* 时间轴 */
.tlrow{display:flex;align-items:center;gap:9px;padding:7px 0}
.tlrow+.tlrow{border-top:1px solid var(--line2,#eef1f6)}
.tlrow .nm{flex:1;font-size:13px;color:var(--ink2,#41536b)}
.tlrow .vl{font-size:14px;font-weight:800;white-space:nowrap}
.tlrow .vl.idle{color:var(--amber,#c77700)}
.tlrow .vl.out{color:var(--amber,#c77700)}
.tlrow .who{font-size:11px;color:var(--sub,#8695a8);width:44px;text-align:right}

/* 混装框标记 */
.boxtag{display:inline-block;font-size:10.5px;font-weight:700;margin-left:7px;
  padding:1px 7px;border-radius:6px;background:var(--amber2,#fff3de);color:var(--amber,#c77700);
  vertical-align:2px}

/* 系统自己算出来的「可能难拿」 */
.reachw{font-size:11.5px;color:var(--amber,#c77700);background:var(--amber2,#fff3de);
  border-radius:6px;padding:3px 8px;margin-top:4px;line-height:1.5;display:inline-block}

/* 停用的库位 */
.rs.offloc{opacity:.5}
.offbtn{font-size:12px;color:var(--green,#15803d);border:1px solid var(--green,#15803d);
  border-radius:7px;padding:3px 10px;white-space:nowrap;background:var(--card)}

/* ===== 员工派工卡 =====================================================
   现场是:站在货架前、单手拿手机、可能戴手套、仓库光线不好。
   所以排序按现场走 —— 去哪儿(库位最大)→ 拿多少 → 拿什么 → 按哪儿。
   顶上一条状态带用**文字**说清是哪一步,不靠颜色猜(色弱和强光下颜色最先失效) */
.pk{background:var(--card,#fff);border:1px solid var(--line,#e3e8ef);border-radius:14px;
  padding:0 0 12px;margin-bottom:12px;overflow:hidden}
.pkhd{display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--blue-soft,#eaf1fe);border-bottom:1px solid rgba(0,0,0,.04)}
.pkst{font-size:12.5px;font-weight:800;color:var(--blue,#2563eb);letter-spacing:.3px}
.pk.doing .pkhd{background:var(--green2,#e7f6ec)} .pk.doing .pkst{color:var(--green,#15803d)}
.pk.lock .pkhd{background:var(--amber2,#fff3de)} .pk.lock .pkst{color:var(--amber,#c77700)}
.pkchip{margin-left:auto;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;
  background:rgba(255,255,255,.75);color:var(--amber,#c77700)}
.pkmain{display:flex;align-items:flex-end;gap:12px;padding:12px 14px 0}
.pkl{flex:1;min-width:0}
/* 库位是主视觉 —— 它决定他往哪儿走 */
.pklo{font-size:30px;font-weight:900;line-height:1.05;letter-spacing:-.5px;color:var(--navy,#0b2545)}
.pkpal{font-size:12px;color:var(--sub,#8695a8);margin-top:3px;font-weight:600}
.pkr{text-align:right;flex:0 0 auto}
.pkq{font-size:26px;font-weight:900;line-height:1;color:var(--blue,#2563eb)}
.pku{font-size:11px;color:var(--sub,#8695a8);margin-top:2px}
.pkit{font-size:15px;font-weight:700;padding:8px 14px 0;line-height:1.35}
.pkcd{font-size:11.5px;color:var(--sub,#8695a8);padding:2px 14px 0}
.pkwarn{margin:8px 14px 0;font-size:12px;line-height:1.5;color:var(--amber,#c77700);
  background:var(--amber2,#fff3de);border-radius:8px;padding:6px 10px}
.pklockbox{margin:10px 14px 0;font-size:12.5px;line-height:1.6;color:var(--amber-ink);
  background:var(--amber2,#fff3de);border-radius:9px;padding:9px 11px}
/* 按钮做满宽加高 —— 戴手套点小按钮点不准 */
.pkact{display:flex;gap:8px;padding:12px 14px 0}
.pkbtn{flex:1;border:0;border-radius:11px;padding:13px 8px;font-family:inherit;
  font-size:15px;font-weight:800;line-height:1.3;cursor:pointer}
.pkbtn.go{background:var(--navy,#0b2545);color:var(--onfill)}
.pkbtn.ok{background:var(--green,#15803d);color:var(--onfill)}
.pkbtn.no{flex:0 0 88px;background:var(--bg2);color:var(--ink2)}
.pkbtn:active{transform:scale(.98)}
/* 柬文那行在按钮里要小一号、独占一行,不然两行字把按钮撑得很高 */
.pkbtn.haskm{padding:9px 8px;font-size:14px}
.pkbtn.haskm .kmtx{font-size:11px;font-weight:600;opacity:.9;line-height:1.3}
.pkst.haskm .kmtx{font-size:10.5px}
@media(max-width:380px){
  .pklo{font-size:26px} .pkq{font-size:23px}
  .pkbtn{font-size:14px;padding:11px 6px} .pkbtn.no{flex:0 0 76px}
}

/* 帮别的区备的 —— 标出来,让"这个区的活一直是别人扛"看得见 */
.pkchip.help{background:var(--blue-soft,#eaf1fe);color:var(--blue,#2563eb);margin-left:0}
.pkchip.help + .pkchip{margin-left:6px}

/* ===== 人员卡 =========================================================
   五个级别原来长得一模一样,一屏十几个人只能靠读字分辨。
   头像按级别配色 = 扫一眼就知道这一片是谁;权限做成小方块,
   一长串顿号读不出重点,方块能数、能扫。 */
.sc{background:var(--card,#fff);border:1px solid var(--line,#e3e8ef);border-radius:14px;
  padding:12px 14px;margin-bottom:10px;border-left:4px solid var(--line,#e3e8ef)}
.sc.lv1{border-left-color:#0B2545} .sc.lv2{border-left-color:#2563EB}
.sc.lv3{border-left-color:#15803D} .sc.lv4{border-left-color:#0891B2}
.sc.lv5{border-left-color:#94A3B8} .sc.lv9{border-left-color:#CBD5E1}
.sc.off{opacity:.5}
.schd{display:flex;align-items:center;gap:11px}
.scav{width:40px;height:40px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;color:var(--onfill);background:var(--dim)}
.scav img{width:100%;height:100%;object-fit:cover}
.lv1 .scav{background:var(--navy)} .lv2 .scav{background:var(--blue-ink)}
.lv3 .scav{background:var(--green-ink)} .lv4 .scav{background:#0891B2}
.lv9 .scav{background:var(--line);color:var(--muted)}
.scnm{flex:1;min-width:0}
.scn1{font-size:15.5px;font-weight:700;line-height:1.3}
.scn2{font-size:12px;color:var(--sub,#8695a8);margin-top:1px}
.sclv{flex:0 0 auto;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:var(--bg2);color:var(--ink2)}
.lv1 .sclv{background:var(--navy);color:var(--onfill)} .lv2 .sclv{background:var(--blue-soft);color:var(--blue-ink)}
.lv3 .sclv{background:var(--green2);color:var(--green-ink)}
.scb{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:5px;
  margin-left:5px;vertical-align:2px;background:var(--bg2);color:var(--muted)}
.scb.amber{background:var(--amber2);color:var(--amber-ink)} .scb.plum{background:var(--plum-bg);color:var(--plum)}
.scmeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.scm{font-size:11.5px;padding:2px 8px;border-radius:6px;background:var(--bg2);color:var(--ink2)}
.scm.last{background:none;color:var(--sub,#8695a8);padding-left:2px}
/* 货架区单独一行 —— 新发料机制靠它派活,不能埋在一堆灰字里 */
.sczone{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:8px;
  padding-top:8px;border-top:1px dashed var(--line2,#eef1f6)}
.sck{font-size:11.5px;color:var(--sub,#8695a8);margin-right:3px}
.scz{font-size:12px;font-weight:800;padding:2px 9px;border-radius:6px;
  background:var(--blue-soft);color:var(--blue-ink)}
.scz.none{font-weight:600;background:var(--red-bg);color:var(--red-ink)}
.scperm{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.scp{font-size:11px;padding:2px 7px;border-radius:5px;background:var(--bg2);color:var(--muted)}
.scp.none{background:none;padding-left:0;color:var(--sub,#8695a8)}
/* 按钮分主次 —— 原来四个全灰,删除跟改资料一样显眼 */
.scact{display:flex;gap:7px;margin-top:11px}
.scbtn{flex:1;border:1px solid var(--line,#e3e8ef);background:var(--card,#fff);
  color:var(--ink2,#41536b);border-radius:9px;padding:8px 4px;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.scbtn.main{background:var(--navy,#0b2545);border-color:var(--navy,#0b2545);color:var(--onfill);font-weight:700}
.scbtn.del{flex:0 0 52px;color:var(--red-ink);border-color:transparent;background:none;font-weight:500}
.scbtn:active{transform:scale(.98)}
@media(max-width:380px){.scbtn{font-size:12px;padding:8px 2px}.scbtn.del{flex:0 0 44px}}
.scb.red{background:var(--red-bg);color:var(--red-ink)}
/* 性别小圆点,贴在头像右下角(2026-09-26 新加的基础字段) */
.scav{position:relative}
.scsex{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:10px;
  color:#fff;border:1.5px solid var(--card)}
.scsex.m{background:#3A6FD8} .scsex.f{background:#D84F8A}

/* ===== 新人池(2026-09-26 改版)==========================================
   ★★★★★ 这一整块原来在 app.js 里拼了 np-box/np-row 这些 class,但这份
   style.css 从来没给它们写过一行样式 —— Di 说"这不是丑,是没上色"她说对了。
   卡片本身照搬上面「人员卡」那一整套(.sc/.scav/.scnm),不再另起一套语言,
   只用 grid 把它们摆成小卡片、边框色/头像色换成仓别色。 */
.np-box{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin-bottom:16px}
.np-hd{margin-bottom:12px;line-height:1.6}
.np-hd b{font-size:14.5px} .np-hd i{font-style:normal;color:var(--amber);margin-right:2px}
.np-hd span{display:block;font-size:11.5px;color:var(--sub);margin-top:3px}
.np-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
/* 新人池的卡比下面 24 人那份列表窄,原来 .sc 是撑满一行的单列卡 ——
   进了 grid 就不能再有独立的 margin-bottom,行距交给 grid 的 gap 管 */
.sc.pool{margin-bottom:0;border-left-width:4px}
.sc.pool .scact{margin-top:9px}
.sc.pool .scbtn.main{width:100%}
.np-more{font-size:11.5px;color:var(--sub);margin-top:10px}
.np-old{font-size:11.5px;color:var(--sub);margin-top:12px;line-height:1.7;cursor:pointer}
.np-old b{color:var(--ink)}

/* ===== 权限分组 ======================================================
   原来 22 条平铺,滚半屏还看不出轻重。分组的依据不是"属于哪个功能",
   是「这个人被允许做什么性质的事」—— 勾的时候你判断的就是这个。 */
.pgrp{margin-bottom:14px}
.pghd{display:flex;align-items:center;gap:9px;padding:0 2px 5px}
.pgn{font-size:14px;font-weight:800;color:var(--ink,#16202C)}
.pgc{font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:999px;
  background:var(--bg2);color:var(--dim)}
.pgc.on{background:var(--blue-soft,#EAF1FE);color:var(--blue,#2563EB)}
.pgall{margin-left:auto;font-size:12px;font-family:inherit;font-weight:600;
  border:1px solid var(--line,#e3e8ef);background:var(--card,#fff);color:var(--ink2,#41536B);
  border-radius:7px;padding:3px 11px;cursor:pointer}
.pgd{font-size:12px;line-height:1.6;color:var(--sub,#8695A8);padding:0 2px 7px}
.pgd b{color:var(--amber,#C77700)}
.pgrp .permlist{border:1px solid var(--line,#e3e8ef);border-radius:11px;overflow:hidden}
.pgrp .prow{border-radius:0;border:0;border-bottom:1px solid var(--line2,#eef1f6);margin:0}
.pgrp .prow:last-child{border-bottom:0}

/* 备完了等你通知车间 —— 绿色,是"该你动了"不是"出问题了" */
.slabar.rdy{color:var(--onfill);background:var(--green,#15803d)}

/* 哪儿难拿 */
.card.odd{border-color:var(--amber,#c77700);border-width:2px}
.hsw{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.hsr{font-size:12px;padding:2px 9px;border-radius:6px;background:var(--red-bg);color:var(--red-ink)}

/* 找货结果里:货已经被人取下来了 —— 报库位会让人白跑一趟,直接说在谁手上 */
.lc.held{background:var(--amber2,#fff3de);color:var(--amber,#c77700);border-color:var(--amber-line)}
.heldloc{color:var(--amber,#c77700);font-weight:800}

/* 欠单明细 —— 这张单要拿去跟车间对账,手里没明细就只能凭嘴说 */
.dbl{margin-top:9px;border-top:1px dashed var(--line,#e3e8ef);padding-top:6px}
.dbr{display:flex;align-items:flex-start;gap:10px;padding:6px 0}
.dbr+.dbr{border-top:1px dashed var(--line2,#eef1f6)}
.dbn{font-size:13.5px;font-weight:700;line-height:1.35}
.dbq{font-size:16px;font-weight:800;color:var(--red,#be2a2a)}
.dbt2{font-size:12.5px;color:var(--ink2,#41536b);text-align:right;
  padding-top:6px;margin-top:2px;border-top:1px solid var(--line2,#eef1f6)}
.offbtn.on{color:var(--blue,#2563eb);border-color:var(--blue,#2563eb)}

/* ===== 任务卡 ========================================================
   读者是**仓管/主管在扫一屏十几批**,他要判断的只有一件事:哪一批该先动。
   所以顶上一条状态带先把"急不急"说清楚,跟员工派工卡同一套语言。 */
.jc{background:var(--card,#fff);border:1px solid var(--line,#e3e8ef);border-radius:14px;
  margin-bottom:12px;overflow:hidden}
/* ★ 同一个病,而且这张是**员工天天看的派工卡**:头部底色写死浅灰,字得跟着钉死 */
.jchd{display:flex;align-items:center;gap:8px;padding:8px 14px;color:var(--ink2);
  background:var(--bg2);border-bottom:1px solid rgba(0,0,0,.04)}
.jchd .muted{color:var(--muted)}
.jc.over .jchd{color:var(--red-ink)}
.jc.over .jchd .muted{color:var(--red-ink)}
.jcst{font-size:12.5px;font-weight:800;color:var(--ink2,#41536b);letter-spacing:.2px}
.jc.ok .jchd{background:var(--green2,#e7f6ec)} .jc.ok .jcst{color:var(--green,#15803d)}
.jc.warn .jchd{background:var(--amber2,#fff3de)} .jc.warn .jcst{color:var(--amber,#c77700)}
.jc.over .jchd{background:var(--red-bg)} .jc.over .jcst{color:var(--red,#be2a2a)}
.jc.draft .jchd{background:var(--amber2,#fff3de)} .jc.draft .jcst{color:var(--amber,#c77700)}
.jc.done .jchd{background:var(--green2,#e7f6ec)} .jc.done .jcst{color:var(--green,#15803d)}
.jc.void{opacity:.55}
/* 缺货提到顶条右边 —— 它比进度要紧:进度慢是自己的事,缺货要马上跟车间说 */
.jcshort{margin-left:auto;font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:999px;
  background:var(--red,#be2a2a);color:var(--onfill)}
.jcmain{display:flex;align-items:flex-end;gap:12px;padding:12px 14px 0}
.jcl{flex:1;min-width:0}
.jcd{font-size:19px;font-weight:800;line-height:1.2;color:var(--navy,#0b2545)}
.jcteam{font-size:12px;font-weight:700;margin-left:7px;padding:1px 8px;border-radius:6px;
  background:var(--blue-soft,#eaf1fe);color:var(--blue,#2563eb);vertical-align:2px}
.jcr{text-align:right;flex:0 0 auto}
.jcq{font-size:25px;font-weight:900;line-height:1;color:var(--blue,#2563eb)}
.jcu{font-size:11px;color:var(--sub,#8695a8);margin-top:2px}
/* ★ 这条槽里压着百分比文字(.jcpct),底色写死了就得把字也钉住 */
.jcbar{position:relative;height:16px;margin:10px 14px 0;background:var(--bg2);border-radius:8px;overflow:hidden;color:var(--dim)}
.jcbar > div{height:100%;background:var(--green,#15803d);border-radius:8px}
.jcpct{position:absolute;right:8px;top:0;line-height:16px;font-size:10.5px;font-weight:800;color:var(--ink2,#41536b)}
.jc .jlist{margin:10px 14px 0;border-top:1px dashed var(--line,#e3e8ef);padding-top:4px}
.jli.more{justify-content:center;color:var(--blue,#2563eb);font-weight:700;font-size:12.5px;
  cursor:pointer;padding:7px 0;border-top:1px dashed var(--line2,#eef1f6)}
.jhide .jli:first-child{border-top:0}
.jcact{display:flex;gap:8px;padding:12px 14px 14px}
.jcbtn{flex:1;border:1px solid var(--line,#e3e8ef);background:var(--card,#fff);color:var(--ink2,#41536b);
  border-radius:10px;padding:11px 6px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.jcbtn.main{background:var(--navy,#0b2545);border-color:var(--navy,#0b2545);color:var(--onfill)}
.jcbtn.add{flex:0 0 78px;color:var(--blue,#2563eb)}
.jcbtn.rm{flex:0 0 68px;color:var(--sub,#8695a8);border-color:transparent;background:none;font-weight:500}
.jcbtn:active{transform:scale(.99)}
@media(max-width:380px){.jcd{font-size:17px}.jcq{font-size:22px}
  .jcbtn{font-size:13px}.jcbtn.add{flex:0 0 66px}.jcbtn.rm{flex:0 0 56px}}

/* 派工看板:每一托能点着改派 */
.bdrows{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.bdr{font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:7px;cursor:pointer;
  background:var(--blue-soft,#eaf1fe);color:var(--blue,#2563eb)}
.bdr:active{transform:scale(.96)}

/* 任务卡上的派工情况 —— 不用点进去就知道派没派、谁在做 */
.jcasg{margin:10px 14px 0;padding:8px 10px;border-radius:9px;background:var(--bg2)}
.jcasg.none{background:var(--amber2);color:var(--amber-ink);font-size:12.5px;line-height:1.6}
.jcasg.none b{color:var(--amber,#c77700)}
.jcst2{display:flex;flex-wrap:wrap;gap:6px}
.jcs{font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:6px}
.jcs.w{background:var(--blue-soft);color:var(--blue-ink)}
.jcs.d{background:var(--green2);color:var(--green-ink)}
.jcs.l{background:var(--red-bg);color:var(--red-ink)}
.jcs.k{background:var(--bg2);color:var(--muted)}
.jcmen{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
/* ★★★ 2026-08-19 体检扫出来的:**底色写死纯白,文字却跟着主题走** ——
   深色主题下 `--ink2` 是浅色,**白底浅字整块看不见**。
   跟 2026-08-13 那次 `.pbtodo` 是同一种病:**底色写死了,里面的文字也必须写死**;
   半跟随主题、半写死,必然在某一个主题下撞车,而且**不报错、只是看不见**。 */
.jcm{font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--card);
  border:1px solid var(--line,#e3e8ef);color:var(--ink2)}
.jcm.l{border-color:var(--amber,#c77700);color:var(--amber,#c77700)}
.jcm i{font-style:normal;opacity:.6}

/* ===== 谁手里有多少活(看板)=================================================
   **不是给人读数字的,是告诉他现在该找谁** —— 所以顶上先摆要处理的事。 */
.pbtodo{background:var(--amber2);border:1px solid #EBBE6E;border-radius:12px;padding:12px 14px;margin-bottom:14px}
.pbtodo.ok{background:var(--green2,#e7f6ec);border-color:var(--green-lit)}
.pbth{font-size:13px;font-weight:800;color:var(--amber-ink);margin-bottom:6px}
.pbtodo.ok .pbth{color:var(--green,#15803d);margin-bottom:0}
.pbti{font-size:13.5px;line-height:1.8;color:var(--ink,#16202C)}
.pbti+.pbti{margin-top:4px;padding-top:4px;border-top:1px dashed #EBBE6E}
.pbti.l b{color:var(--red,#be2a2a)}
.pbti.o{color:var(--red-ink)}
.pbm{background:var(--card,#fff);border:1px solid var(--line,#e3e8ef);border-radius:12px;
  padding:11px 13px;margin-bottom:9px;cursor:pointer}
.pbm.lock{border-color:var(--red,#be2a2a);border-width:2px}
.pbm:active{transform:scale(.995)}
.pbn{font-size:15px;font-weight:700}
.pbtag{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:5px;margin-left:6px;vertical-align:2px}
.pbtag.bk{background:var(--bg2);color:var(--muted)}
.pbtag.out{background:var(--red-bg);color:var(--red-ink)}
.pbq{font-size:24px;font-weight:900;line-height:1;color:var(--blue,#2563eb)}
.pbq span{font-size:12px;font-weight:600;margin-left:2px;color:var(--sub,#8695a8)}
.pbst{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.pbfree{margin-top:6px;font-size:12.5px;color:var(--green,#15803d);font-weight:700}
.pbrow{display:flex;align-items:center;gap:10px;padding:10px 2px;cursor:pointer;
  border-bottom:1px dashed var(--line2,#eef1f6)}
.pbrow:last-child{border-bottom:0}
.pbrow .loc{font-size:16px;font-weight:800;color:var(--blue,#2563eb)}

/* 看板一级:还没人接的活 —— 第一屏就该是"现在没人干的" */
.pbidle{background:var(--card,#fff);border:1px solid var(--line,#e3e8ef);border-radius:12px;
  padding:11px 13px;margin-bottom:9px;cursor:pointer}
.pbidle.long{border-color:var(--amber,#c77700)}
.pbidle .loc{font-size:18px;font-weight:800;color:var(--blue,#2563eb);line-height:1.2}
.pbin{font-size:13.5px;font-weight:600;margin-top:2px}
.pbiq{font-size:20px;font-weight:900}
.pbiw{display:flex;align-items:center;gap:8px;margin-top:8px;
  padding-top:8px;border-top:1px dashed var(--line2,#eef1f6)}
.pbich{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--blue,#2563eb)}

/* ===== 大屏看板(32 寸挂墙)==============================================
   ★ 字号全部用 vw —— 跟着屏幕宽度缩放,**32 寸和手机上都不会崩**。
     写死 px 的话:手机上撑爆、大屏上小得像蚂蚁。
   ★ 深底白字:办公室灯光下反光小,而且一眼看出这是"在运行的屏"。
   ★ 一屏放得下、不许滚 —— 挂墙上没人会去滚它。 */
/* ★★★★★ 这三处的字**必须写死 #fff**:它们的背景是写死的深色(大屏 #0B1220、
   电脑端导航条 --navbg),**不跟主题走**。我上午把全站 color:#fff 批量换成
   var(--onfill) 的时候扫到了这儿 —— 深色主题下 --onfill 是深字,
   于是**整块大屏的文字全暗掉了**(用户截图:仓名、指标名全看不见)。
   ★★★★ 根子是我那个「跳过大屏」的保护**根本没生效**:我靠行首匹配认选择器,
     `body.tvmode{...}` 不以 . 开头,一行就漏了过去。
   ★★★ 通则:**背景写死的,字也得写死** —— 一个跟主题走、一个不跟,必然有一边瞎。 */
body.tvmode{background:#0B1220;color:#fff;overflow:hidden}
body.tvmode #top,body.tvmode #tabs{display:none}
/* ★★★★★ 2026-08-20 用户实拍抓到:大屏看板**左边被那条 196px 的导航吃掉了一块**,
   底下那排设置条挤得换行错位、内容被压着切掉。
   ★★ 根子:`tvmode` 只藏了 `#top` 和 `#tabs` —— 那是它写的时候仅有的两条导航;
      08-20 加左导航时,**没回头看"凡是藏导航的地方"还有没有别处**。
   ★★★ **通则:加一条新的同类东西,要去把"处理这一类"的地方全找一遍** ——
      跟「一条规矩要在所有能触发的路径上都下闸」是同一条,只是方向反过来。
   ★ 挂墙上的屏没人操作,屏上一条导航都不该有(这一页本来就是这么定的)。 */
body.tvmode #pcnav{display:none !important}
body.tvmode{padding-left:0 !important;padding-bottom:0 !important}
body.tvmode #view{padding:0;max-width:none}
/* ★★★★ 2026-08-14:原来是 `height:100vh` —— **死高度,内容一多就往外溢、被切掉**
   (加了三语标签之后,底下那排批次和警告条整个看不见了)。
   改成 `min-height` + 允许纵向收缩:**装不下的时候各块自己压扁,而不是掉出屏幕**。
   大屏是挂着不动的,谁也不会去滚它 —— **屏幕外面的东西等于不存在** */
/* ★ 2026-08-14 现场:标题上半截被削掉。上一版把留白压到 1.4vw、
   又加了 overflow:hidden,标题正好卡在边上 —— **留白加回来,而且给标题留出行高** */
/* ★★★★★ 2026-08-28 现场(19 寸实拍):底下那排开关**把选项全吃掉了**。
   ★★★★ 根子有两条,缺一不可:
     ① 底栏光「这块屏看」就有 10 个仓按钮,加上看法/轮播/语音/屏保共 20 多个,
        字号和间距还都是 vw ——**屏幕越小整体越小,但个数不变**,1366 宽必然挤好几行;
     ② `overflow:hidden` + `max-height:100vh` —— 挤出去的部分**直接被裁掉**,
        人连"下面还有东西"都看不出来。
   ★★★ 改法分两层:
     · 内容区**照旧一屏看完,不滚** —— 挂墙上的屏没人会去滚,
       **一屏看不完就是设计失败**(这条不让步);
     · 底下那排设置**默认收成一行**,点齿轮才展开 ——
       它们是「设一次就不再动」的东西,按老规矩:**做完了的事收成一行**。
   ★★ 再加一层兜底:`overflow:auto` —— 万一还有什么被挤出去,人至少滚得到,
      不会像现在这样被无声裁掉。 */
.tvwrap{min-height:100vh;overflow:auto;
  display:flex;flex-direction:column;padding:2vw 2vw 1.4vw;box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}

/* ★★ `align-items:baseline` 在中文+高棉文混排时会把字往上顶 ——
   改成底对齐,并给标题显式行高,不靠字体默认值 */
.tvhd{display:flex;align-items:flex-end;gap:1.4vw;padding-bottom:1.2vw;
  border-bottom:1px solid rgba(255,255,255,.12)}
.tvt{font-size:2.4vw;font-weight:900;letter-spacing:.1vw;line-height:1.25;padding-top:.2vw}
.tvt span{font-size:1.2vw;font-weight:400;opacity:.55;margin-left:.6vw}
.tvtime{margin-left:auto;font-size:1.6vw;font-weight:700;opacity:.8;font-variant-numeric:tabular-nums}
/* ★ 第二排(tvrow2 / tvbox)**本来就配好了可压缩**(flex:1 + min-height:0 + overflow:hidden) ——
   所以底下被切掉不是它的错,是整页 height:100vh 死高度 + 标签变高一起挤出来的 */
.tvrow{display:flex;gap:1.2vw;margin-top:1.2vw}
.tvcard{flex:1;background:rgba(255,255,255,.06);border-radius:1vw;padding:1.2vw 1.4vw}
.tvk{font-size:1.05vw;opacity:.6;letter-spacing:.05vw}
.tvb{margin:.5vw 0 .3vw}
.tvv{font-size:3.6vw;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.tvu{font-size:1.2vw;margin-left:.4vw;opacity:.6}
.tvs{font-size:1vw;opacity:.5}
.tvrow2{display:flex;gap:1.2vw;margin-top:1.4vw;flex:1;min-height:0}
.tvbox{flex:1;background:rgba(255,255,255,.06);border-radius:1vw;padding:1.2vw 1.4vw;
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
.tvbt{font-size:1.25vw;font-weight:800;margin-bottom:.8vw;opacity:.9;flex:none}
.tvline{display:flex;align-items:baseline;gap:.6vw;padding:.5vw 0;flex:none;
  border-bottom:1px dashed rgba(255,255,255,.1);font-size:1.15vw}
.tvline:last-child{border-bottom:0}
.tvline span{opacity:.65;flex:1}
.tvline b{font-size:1.9vw;font-weight:900;font-variant-numeric:tabular-nums}
.tvline i{font-style:normal;font-size:.95vw;opacity:.5}
.tvline.bad b{color:#FF6B6B} .tvline.good b{color:#4ADE80}
/* ★★★★ 2026-08-14 现场:左边那栏底下被切掉。
   ★ 根子在这排人名 —— **它是不定长的**:今天 3 个人、明天可能 8 个,
     一换行就把整块卡片撑爆,而上一版只加了 overflow:hidden,
     **那只是把溢出的藏起来,卡片本身该多高还是多高**。
   ★★ 改法:**四行数字优先保证**,人名这排**自己在剩下的空间里滚**、
     绝不反过来撑高卡片(`min-height:0` + `flex:1` + 允许滚动)。
     大屏没人去滚它,所以再给一层保险 —— **超过两行就缩字号**。 */
.tvmen{display:flex;flex-wrap:wrap;align-content:flex-start;gap:.45vw;margin-top:.8vw;
  flex:1;min-height:0;overflow:hidden}
.tvm{font-size:.95vw;padding:.3vw .8vw;border-radius:2vw;background:rgba(255,255,255,.1)}
.tvm b{font-size:1.1vw;margin:0 .15vw}
.tvm.bad{background:rgba(255,107,107,.25)}
.tvbar{display:flex;align-items:center;gap:.7vw;padding:.5vw 0;font-size:1.1vw}
.tvbn{width:6vw;opacity:.75}
.tvbf{flex:1;height:1.1vw;background:rgba(255,255,255,.08);border-radius:.6vw;overflow:hidden}
.tvbf i{display:block;height:100%;background:linear-gradient(90deg,#2563EB,#60A5FA);border-radius:.6vw}
.tvbq{width:5vw;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.tvbig2{margin-bottom:.8vw}
.tvempty{opacity:.4;font-size:1.1vw;padding:1vw 0}
/* ★★ 警告条:`margin-top:auto` 把它推到底,但**没有 flex:none 就会被前面的内容挤出去** ——
   实测右栏那条「还有 1 张手写单没换正式单」被切了半截。
   **能锁住人的东西必须完整看得见**,所以它不参与压缩 */
.tvwarn{margin-top:auto;flex:none;background:rgba(255,180,60,.18);color:#FFD08A;
  border-radius:.7vw;padding:.65vw 1vw;font-size:1.05vw;line-height:1.4}
.tvwarn b{font-size:1.4vw}
/* ★★ 2026-08-20 实拍:底下这排(屏幕尺寸 / 这块屏看 10 个仓 / 轮播 / 语音 / 屏保)
   **一行塞不下就乱换行**,「不良品仓」被甩到第二行跟别的挤在一起,还压着上面的内容。
   ★ 根子是 `text-align:center` —— 那是**行内文字的居中**,
     换行点由浏览器按字宽随机决定,一组按钮会被从中间劈开。
   ★★ 改成 flex + wrap:**每一组是一个整体,要换整组一起换**,组间距也稳定。 */
.tvfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  column-gap:1.6vw;row-gap:.5vw;font-size:.85vw;opacity:.3;padding-top:1vw;flex:none}
.tvfoot > span{display:inline-flex;align-items:center;flex-wrap:nowrap}
.tverr{padding:4vw;font-size:1.6vw;opacity:.7}
/* 手机上打开也不崩 —— 竖过来堆成一列 */
@media(max-width:900px){
  .tvwrap{height:auto;overflow:auto}
  .tvrow,.tvrow2{flex-direction:column}
  .tvt{font-size:22px}.tvtime{font-size:15px}.tvk{font-size:12px}
  .tvv{font-size:34px}.tvu,.tvs{font-size:12px}
  .tvbt{font-size:15px}.tvline{font-size:14px}.tvline b{font-size:20px}
  .tvbar{font-size:13px}.tvbn{width:64px}.tvbq{width:60px}.tvbf{height:12px}
  .tvm{font-size:12px}.tvfoot{font-size:11px}
}
/* 区选择器里把"货架外的地方"跟货架区分开 —— 它们性质不同,但都得有人管 */
.zsep{width:100%;font-size:11.5px;color:var(--sub,#8695a8);margin:8px 0 4px}
.chips button.alt{background:var(--amber2,#fff3de);border-color:var(--amber-line);color:var(--amber-ink)}
.chips button.alt.on{background:var(--amber,#c77700);color:var(--onfill);border-color:var(--amber,#c77700)}

/* 改派窗:守这个区的人排第一、标出来 —— 系统知道的事别让人凭记忆想 */
.rs.own{border-color:var(--blue,#2563eb);background:var(--blue-soft,#eaf1fe)}
.ownt{font-size:11px;font-weight:800;padding:1px 8px;border-radius:5px;margin-left:7px;
  background:var(--blue,#2563eb);color:var(--onfill);vertical-align:1px}

/* 看板:两个明确的选项 + 32 寸带鱼屏分栏 */
.pbseg{margin-bottom:14px}
/* ★ 宽屏(32 寸带鱼屏)分两到三栏铺开 —— 一屏能看完,不用滚;
   手机上照旧一列。**同一套代码两种屏都对**,不用做两个页面 */
.pbwide{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:1100px){ .pbwide{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1700px){ .pbwide{grid-template-columns:repeat(3,1fr)} }
.pbwide .pbidle,.pbwide .pbm{margin-bottom:0}
/* 改派按钮做大 —— 这是这一页最主要的动作 */
.pbibtn{width:100%;margin-top:10px;padding:12px;border-radius:10px;border:0;
  background:var(--navy,#0b2545);color:var(--onfill);font-family:inherit;
  font-size:15px;font-weight:700;cursor:pointer}
.pbibtn:active{transform:scale(.99)}
.pbidle{cursor:default}
/* 大屏底下的屏保开关 —— 平时几乎看不见,要设的时候找得到 */
/* ★ 间距改由 .tvfoot 的 column-gap 管 —— 这里留 0。
   ★★ 不能只在上面写一条 `margin-left:0` 就完事:**它在文件里排在这条前面,
      会被这条盖掉**(08-20 刚踩过一次:手机那条 `#pcnav{display:none}` 就是这么失效的) */
.tvidle{margin-left:0}
.tvidle b{display:inline-block;font-weight:600;padding:.15vw .7vw;margin-left:.4vw;
  border-radius:.5vw;background:rgba(255,255,255,.08);cursor:pointer}
.tvidle b.on{background:var(--blue,#2563eb);color:#fff}
@media(max-width:900px){.tvidle{display:block;margin:8px 0 0}.tvidle b{font-size:12px;padding:2px 8px}}

/* ===== ★★★ 深色主题下「浅底块里的字看不见」的统一兜底 =====================
   2026-08-13 现场(32 寸屏实拍):看板顶上「现在该处理的」那整块**几乎是空白的**,
   只剩几个孤零零的职务标签 —— 不是排版问题,是**字看不见了**。

   ★ 根因:那块底色我写死成浅琥珀(`#FFF3DE`),而里面的文字用 `var(--ink)`
     跟着主题走 —— **深色主题下 --ink 是浅色,浅字配浅底,整块信息消失**。
     而职务标签有自己的深色背景,所以只有它显出来了 —— 现场看到的就是那几个孤零零的字。

   ★ 通则:**底色写死了,里面的文字也必须写死** —— 半跟随主题、半写死,
     必然在某一个主题下撞车。而且**这类错不报错**:布局对、元素在、就是看不见。

   ★ selfcheck 第 9 项(写死颜色 217 处)一直被我当成"要人看一眼"放过去 ——
     今天它真出事了。以后看到那一项别再跳过。 */
/* ★★ 上一版我写成 `.pbtodo *`(整块里所有元素)—— **一刀切把有自己底色的
   子元素也覆盖了**:职务标签 `.ttl` 底色跟着主题走(深色主题下是深底),
   字被我钉成深色 → **深底配深字,现场看到的就是一个黑块**。
   ★ 通则:**改颜色只改"没有自己底色"的那些** —— 带背景的子元素
     (标签、徽章、状态块)有它自己的一套配色,别拿通配符盖过去。
     一刀切修好一个毛病,通常会造出另一个 */
.pbtodo, .pbtodo .pbti, .pbtodo .pbth,
.jcasg, .jcasg .jcst2,
.tvwarn{color:#3A2A08}
/* ★ 有自己底色的子元素:底和字一起写死,不受外面那层影响 */
.pbtodo .ttl, .jcasg .ttl{background:var(--card);border-color:var(--amber-line);color:var(--amber-ink)}
.pbtodo .pbth{color:var(--amber-ink)}
.pbti.l b{color:var(--red-ink)}
.pbti.o{color:var(--red-ink)}
.pbtodo.ok, .pbtodo.ok .pbth{color:var(--green-ink)}
.pbtodo.ok .ttl{background:var(--card);border-color:var(--green-lit);color:var(--green-ink)}
.tvwarn{color:#FFD08A}                 /* 大屏是深底,这块单独回到浅字 */
.tvwarn b{color:#FFB020}
/* 状态小标签:底色写死了,字也一起写死 */
.jcs.w{color:var(--blue-ink)} .jcs.d{color:var(--green-ink)} .jcs.l{color:var(--red-ink)} .jcs.k{color:var(--muted)}
.jcm{color:var(--ink2)}
.jcm .ttl{background:var(--card);border-color:var(--line);color:var(--muted)}
.pbtag.bk{color:var(--muted)} .pbtag.out{color:var(--red-ink)}
/* 单仓统计底下那句「物料档案 N 条」—— 手机上居中,宽屏上跟统计块同宽靠左。
   ★ `#whsum` 在宽屏上是 flex 容器(首页分栏用的),这句会被吸进去跟统计块并排 ——
     `width:100%` 逼它另起一行。**给容器加了 flex,里面每个孩子都要想一遍** */
.fsarch{text-align:center;margin-top:8px}
@media(min-width:1000px){ .fsarch{text-align:left;max-width:560px;width:100%;flex:0 0 100%} }
/* ★ 宽屏上那几块统计也收住 —— 三个数字拉到 1800 宽,眼睛要横着扫很远 */
@media(min-width:1000px){
  #whsum .statbar, #whsum > .notice{max-width:560px}
}

/* 等领卡顶上的「齐了没齐」状态带(2026-08-13.25)
   ★ 底色写死了,里面的文字也必须写死 —— 半跟随主题、半写死,
   必然在某个主题下撞车(.23 那次深色主题整块看不见就是这么来的) */
.pkband{margin:-2px 0 9px;padding:7px 11px;border-radius:8px;
  font-size:13.5px;font-weight:700;line-height:1.4}
.pkband.ok{background:var(--green2);color:var(--green-ink)}
.pkband.warn{background:var(--amber2);color:var(--amber-ink)}
.pkband b{font-weight:800}

/* ★★ 2026-08-13.27 自检补修:四处「底色写死、文字却跟着主题走」的漏网
   (.slabar.red / .pkbtn.no / .sclv / .scm)——跟 .23 那次「深色下整块看不见」
   是同一个病:深色主题里 --ink2 是浅色,浅字压在写死的浅灰底上,字就消失了。
   **底色写死了,里面的文字也必须写死** —— 这条第二次被同一个检查抓出来 */

/* ===== 首页(找货页)的宽屏汇总块 —— 2026-08-13.27 =====
   ★ 这一页的定性是「找货 + 这个仓的汇总」,不是仪表盘。
   ★★ 整块默认 display:none,**只在 1500px 以上打开** —— 手机上一个像素不变。
   ★★★「横平竖直」靠四条,少一条就参差:
      ①列宽 1fr 1fr 1fr,三栏一模一样宽
      ②同一行的卡强制等高(align-items:stretch + 内容区 flex:1),底边落在同一条线上
      ③每一行固定 38px,不管里面是进度条、标签还是纯数字
      ④数字列固定宽右对齐,数字右边缘对成一条竖线;空的地方留占位,宁可空着不让后面往前挤 */
.fsg{display:none}
.fsc{background:var(--card);border:1px solid var(--line);border-radius:12px;
  display:flex;flex-direction:column;overflow:hidden}
.fsh{padding:11px 15px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:8px}
.fsh b{font-size:14.5px}
.fsh .r{margin-left:auto;color:var(--sub);font-size:12.5px}
.fsb{padding:3px 15px 11px;flex:1}
.fsf{padding:9px 15px;border-top:1px solid var(--line2);text-align:center;
  color:var(--blue);font-size:13.5px;cursor:pointer}
.fsf:active{opacity:.6}
.fsr{display:flex;align-items:center;gap:9px;height:38px;
  border-bottom:1px solid var(--line2);font-size:14px}
.fsr:last-child{border-bottom:0}
.fsr .g{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsr .code{font-weight:700;color:var(--blue);width:62px;flex:none}
.fsr .qn{width:78px;text-align:right;flex:none}
.fsr .zt{height:7px;background:var(--line2);border-radius:4px;overflow:hidden;width:104px;flex:none}
.fsr .zf{height:100%;background:var(--blue)}
.fsr .zf.w{background:var(--amber)}
.fsr .zf.r{background:var(--red)}
/* 标签列固定宽 + 空占位 —— 有的行有标签有的没有,不占位就会把数字挤歪 */
.fst{font-size:11.5px;width:70px;text-align:center;flex:none;color:transparent}
/* ★ 底色写死了,里面的文字也必须写死(.23 那次深色主题整块看不见的教训) */
.fst.a{background:var(--amber2);color:var(--amber-ink);border-radius:5px;padding:2px 0}
.fs2{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:8px}
.fs2>div{background:var(--card2);border-radius:10px;padding:14px 10px;text-align:center}
.fs2 .v{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.fs2 .k{font-size:12px;color:var(--sub);margin-top:2px}
.statbar .wideonly{display:none}
@media(min-width:1500px){
  .fsg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
    align-items:stretch;margin-top:18px}
  .statbar .wideonly{display:block}
  /* 宽屏上这句就多余了 —— 档案条数在下面那张卡里 */
  .fsarch{display:none}
}

/* ===== 点名页按仓分组(2026-08-13.28)=====
   ★ 原来是「还没签的」一整条按工号排 80 人 —— 系统每天随机一个仓别顺序给阿奴,
     名单却不按那个顺序分组,她念到外协仓得自己在 80 人里认。
     **给了顺序却不按顺序分组,那个随机等于白随机** */
.cig{border:1px solid var(--line);border-radius:11px;margin-bottom:9px;
  background:var(--card);overflow:hidden}
.cig.on{border-color:var(--blue)}
.cigh{display:flex;align-items:center;gap:8px;padding:12px 14px;cursor:pointer}
.cigh b{font-size:15.5px}
.cigh .ar{margin-left:4px;color:var(--sub);font-size:12px}
.cigp{margin-left:auto;font-size:13px;font-weight:700;color:var(--amber-ink);
  font-variant-numeric:tabular-nums}
.cigp.done{color:var(--green)}
/* 「该点这个仓」—— 底色写死了,文字也写死(第三次记这条) */
.cinow{font-size:11.5px;font-weight:700;background:var(--navy);color:var(--onfill);
  border-radius:5px;padding:2px 8px;flex:none}
.cilv{font-size:11.5px;font-weight:700;background:var(--amber2);color:var(--amber-ink);
  border:0;border-radius:5px;padding:3px 9px;cursor:pointer}
.cigb{border-top:1px solid var(--line2);padding:2px 14px 8px}
/* ★ 一人一行,不再一人一张卡 —— 80 张卡阿奴要滚半天 */
.cir{display:flex;align-items:center;gap:8px;height:42px;
  border-bottom:1px solid var(--line2);font-size:14.5px}
.cir:last-child{border-bottom:0}
.cir .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cir.did .grow{opacity:.55}
.ci1{color:var(--green);font-weight:800;font-size:16px}
.ciw{font-size:12px;color:var(--sub)}

/* 「活干完了、货还没归位」那一档(2026-08-14) —— 底色写死,文字也写死 */
.jcs.f{background:var(--amber2);color:var(--amber-ink)}

/* 批量归岗位(2026-08-14) */
.jfr{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-bottom:8px}
.jfr.miss{border-color:var(--amber);background:var(--amber2)}
.jfr.miss .jfn{color:var(--amber-ink)}
.jfn{font-size:15px;font-weight:600;margin-bottom:7px}
.jfc button{font-size:12.5px;padding:5px 10px}

/* 「我手上的货」三个数 + 整托等领(2026-08-14) */
.hsplit.two>div{flex:1}
.hwait{margin-top:10px;background:var(--blue-soft);color:var(--blue-ink);border-radius:9px;
  padding:9px 12px;font-size:13.5px;line-height:1.6}

/* 界面比后台旧时顶上那条(2026-08-14) —— 底色写死,文字也写死 */
/* 版本对不上时那条(2026-08-14 合成一份 —— 原来 app.js 里还写死一套,两边打架铺满屏) */
#verbar{position:fixed;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom));
  z-index:9999;background:var(--red-ink);color:var(--onfill);padding:10px 12px;
  font-size:13px;line-height:1.6;display:flex;align-items:flex-start;gap:8px;
  box-shadow:0 -2px 10px rgba(0,0,0,.25)}
#verbar .vb{flex:1;min-width:0}
#verbar b{color:var(--onfill)}
#verbar .vbtn{background:#fff;color:var(--red-ink);border:0;border-radius:8px;
  padding:7px 16px;font-size:14px;font-weight:700;margin:6px 8px 2px 0;display:inline-block}
#verbar .vx{background:transparent;color:var(--onfill);border:0;font-size:20px;
  line-height:1;padding:2px 4px;opacity:.7;flex:none}

/* 一托的履历(2026-08-14) */
.paltag.tap{cursor:pointer}
.paltag .pl{font-style:normal;opacity:.55;margin-left:3px;font-size:11px}
/* 「现在」那句最要紧 —— 摆最上面、最显眼。底色写死,文字也写死 */
.plnow{background:var(--navy);color:var(--onfill);border-radius:11px;padding:12px 15px;margin-bottom:12px}
.plnow .k{font-size:12px;opacity:.72;margin-bottom:3px}
.plnow .v{font-size:15.5px;line-height:1.65}
.plnow b{color:#FFD98A}
.plrow{display:flex;align-items:center;height:32px;border-top:1px solid var(--line2);font-size:14px}
.plrow span{color:var(--sub);flex:1}
.plev{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2)}
.plev:last-child{border-bottom:0}
.plev.off{opacity:.45}
/* ★★★★★ 2026-08-24:这条原来叫 `.pli`,**跟开放区列表那个 .pli 重名** ——
   而它带着 `width:22px`,把开放区的卡片**压成了一根 22 像素的竖条**,
   字一个一个往下掉(用户截图)。
   ★★★★ 后写的那条没写 width,所以**这个 22px 活了下来** ——
     CSS 里同名规则不是"后面整个覆盖前面",是**一条属性一条属性地覆盖**,
     前面写了、后面没写的,**照样生效**。
   ★★★ 而且查下来 `class="pli"` 全站只有 3 处,**全是开放区那一页的** ——
     这条是没人用的遗留。改名成 .plvi,免得下次又撞。
   ★★ 今天第二次撞「同一个名字定义了两遍」(上一次是 whName)。 */
.plvi{width:22px;flex:none;text-align:center;color:var(--blue);font-size:13px;padding-top:2px}
.plb{flex:1;min-width:0}
.plt{font-size:14.5px;line-height:1.5}
.plw{font-size:12.5px;color:var(--amber-ink);background:var(--amber2);border-radius:6px;
  padding:3px 8px;margin-top:4px;display:inline-block}

/* 物料路由入口(2026-08-14) */
.statbar .tap{cursor:pointer}

/* 各仓能干什么(2026-08-14) */
#wf .chips button.fix{opacity:.75}
#wf .chips button.fix.on{background:var(--blue);color:var(--onblue)}

/* 首页顶上那条:签到 + 上下班打卡 + 请假(2026-08-14) */
.cibar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 13px;background:var(--blue-bg);border-bottom:1px solid var(--line);
  font-size:13.5px;line-height:1.5}
.cibar .g{flex:1;min-width:150px;color:var(--ink)}
.cibar .g b{color:var(--blue)}
.cibar .nt{display:block;font-style:normal;font-size:11.5px;color:var(--sub);margin-top:2px}
.cibar .bs{display:flex;gap:7px;flex-wrap:wrap}
.cibar button{border:1px solid var(--line2);background:var(--card);color:var(--ink);
  border-radius:8px;padding:7px 14px;font-size:13.5px;font-weight:600}
.cibar button.pri{background:var(--blue);color:var(--onblue);border-color:var(--blue)}
.cibar button.ghost{background:transparent;border-style:dashed;color:var(--sub);font-weight:400}
.cibar button[disabled]{opacity:.5}
.cibar button i{display:block;font-style:normal;font-size:10.5px;font-weight:400;opacity:.8}
/* 做完了收成一行细的 —— 一天里 99% 的时间它只该是一行字 */
.cibar.done{padding:5px 13px;font-size:12.5px;background:transparent}
.cibar.done .g{color:var(--sub)}
/* 请假中:压过一切。底色写死,文字也写死 */
.cibar.out{background:var(--amber2)}
.cibar.out .g,.cibar.out .g b{color:var(--amber-ink)}

/* 大屏三语标签(2026-08-14) —— 高棉文为主(看的人是他们)、中文次之、英文最小;
   数字始终最大,大屏的价值就在"一眼看到数字" */
/* ★★★ 2026-08-14 现场:三语标签把整页撑高,**底下那排批次和警告条被切掉**。
   ★ 收紧两处:①行距压到 1.18 ②**中文和英文并排一行**,不各占一行 ——
     三行变两行,卡片高度就回来了 */
.tvk3{line-height:1.18}
.tvk3 .km{display:block;font-size:.92em;font-weight:600;
  font-family:"Khmer OS","Khmer OS System","Noto Sans Khmer","Nokora",system-ui,sans-serif;
  letter-spacing:0}
.tvk3 .zh{font-size:.72em;opacity:.85}
.tvk3 .en{font-size:.58em;opacity:.5;margin-left:6px;letter-spacing:.02em}
.tvbt .tvk3 .km{font-size:.88em}
.tvbt .tvk3 .zh{font-size:.66em;margin-right:4px}
.tvbt .tvk3 .en{font-size:.56em}

/* 大屏上只给一语的小注解(2026-08-14) */
.tvs.km1{font-family:"Khmer OS","Khmer OS System","Noto Sans Khmer","Nokora",system-ui,sans-serif;
  letter-spacing:0;line-height:1.35}
.tvline.dim{opacity:.55}

/* 首页那块:签到 / 下班 / 请假(2026-08-14 用户画的布局) */
/* ══ 签到块的容器(2026-08-28)══
   ★★★★ 原来它长在「找货页」里,而全厂只有一个岗位的首页是找货 ——
     装柜组、叉车工、仓管、线长打开系统全都看不见它。
   ★★★ 现在它是 body 的直接子元素,**不属于任何一页**:
     · 还没签到 `.todo` → 摆在页面最上头,哪一页都看得见
     · 签完了   `.done` → 沉到底栏上方,只在他自己那一页留一行 */
/* ★★★ 2026-09-14 跟 v826 app.js 那次改是配套的:原来这儿是
   `#cibox.todo{padding-top:10px}` / `#cibox.done{padding-bottom:8px}` ——
   跟着「签完就整块换成一行」的老设计配的一对 padding,状态一变、
   padding 跟着变,卡片顶边跟着挪 10px,正是 Di 说的「卡片不变」
   要挑掉的那种「按状态打补丁,没按容器定规矩」(跟上面 08-28 那条
   限宽的教训是同一件事)。骨架不再按状态换之后,padding 也不该
   跟着状态换 —— 统一成一份固定值,不管点没点、点完没完,这块的
   上下边距都不动。 */
#cibox{padding:10px 14px 8px}
#cibox:empty{display:none}
#cibox .cib{margin-top:0}
/* ★★★ 签完了就是**一行细字**(2026-08-28 用户截图报「页面不对」)——
   两个大按钮杵一整天,违反他自己定的「做完了收成一行」。
   请假留一个小口子(中途要走的人点得到),别的全收掉。 */
.cbone{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:7px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);font-size:13px;color:var(--sub)}
.cbone i{font-style:normal;color:var(--green-ink);font-weight:700}
.cbone>b{color:var(--ink);font-weight:600;flex:none}
.cbone span{flex:1;min-width:120px}
.cbone .sh{font-style:normal;font-size:11.5px;opacity:.65;
  border:1px solid var(--line2);border-radius:99px;padding:1px 7px}
.cbone .lv{flex:none;color:var(--blue);font-weight:500;cursor:pointer;
  border-bottom:1px dashed currentColor}
/* ★★ 电脑端(2026-08-28 实测):按钮别横跨整个屏 ——
   手机上大是对的(拇指要够得着),2000px 的屏上一个「我到了」占半屏就过了。
   限宽 + **靠左**(跟页面内容左边线对齐),不居中 —— 居中会跟满屏的卡片脱节。 */
@media (min-width:900px){
  /* ★★★★★ 2026-08-28 用户又发了一张电脑端截图。上一版我只给 `.todo`
     (还没签到那个状态)限了宽,**`.done` 忘了** —— 签完之后
     「我下班了 / 请假」两个按钮**横跨 2000px 整屏**,比当初那句
     「一个我到了占半屏就过了」还夸张一倍;而上面内容区只有 820px,两截脱节。
     ★★★★ 根子是我**按状态打补丁,没按容器定规矩**:「这一块在电脑上该多宽」
       跟它处于什么状态无关。
     ★★★ 现在整块跟内容区 `.wrap` 用**同一个 820px + 居中**,
       左右边线自动对齐 —— 以后再加状态也不用记得补一条。 */
  #cibox{padding:0 16px}
  /* ★★★ 限宽挂在**按钮行**上,不挂在外层状态上。
     原来写的是 `#cibox.todo .cbk` —— 而「签了到、还没下班」那个状态
     外层是 `.done`,选择器不匹配,于是「我下班了 / 请假」横跨整屏。
     ★★ 按钮该多宽是按钮自己的事,跟外层处于什么状态无关。 */
  /* ★★★ 2026-09-14 Di 截图圈出来的:「我到了/请假」和「早会签到/替人请假」
     原来是两个各自独立的 .cbk(各自 display:flex,各占一行),电脑端限宽之后
     就挤成一小块 2×2,四个按钮宽窄还可能因为哪行按钮数不一样而对不齐,
     看着"跳来跳去"。改法:电脑端把 .cib 本身变成一行四列的网格,两个 .cbk
     用 display:contents"让位"——它们自己不再占一个盒子,里头的按钮直接
     变成 .cib 网格的格子,天然连成一排;状态行/提示行/小字这几个不是按钮的
     子元素用 grid-column:1/-1 撑满整行,单独占自己那一行,不会被拆进四列里。
     位置钉死在这个 820px 网格里,不再因为哪行按钮多按钮少而忽宽忽窄。
     ★★ 手机端(900px 以下)不套这条,.cbk 照旧是各自一行 flex,还是两行两个——
     这是 Di 明确要的:主管级以下在手机上、各部门首页上还按两行显示。 */
  #cibox .cib{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:stretch;max-width:820px}
  #cibox .cbk{display:contents}
  #cibox .cbst,#cibox .cbnote,#cibox .cbtip{grid-column:1/-1}
  #cibox .cbst,#cibox .cbnote{text-align:left}
  #cibox .cbnote{margin-left:0}
  /* 「白班」那个标签本来 float:right —— 在 2000px 的屏上它会跑到
     离它说明的内容一整屏远的地方。电脑端收回来跟在文字后面 */
  #cibox .cbst .sh{float:none;display:inline-block;margin-left:8px}
}
.cib{margin-top:14px}
.cbk{display:flex;gap:10px}
.ck{flex:1;min-height:72px;border:1px solid var(--line2);background:var(--card);
  border-radius:12px;color:var(--ink);font-size:16px;font-weight:600;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:10px 6px;line-height:1.3}
.ck i{font-style:normal;font-size:20px;opacity:.7;line-height:1}
.ck span{font-size:11.5px;font-weight:400;color:var(--sub)}
.ck.pri{background:var(--blue);border-color:var(--blue);color:var(--onblue)}
.ck.pri i,.ck.pri span{color:var(--onblue);opacity:.8}
/* 迟到了:主键转成琥珀 —— 底色写死,文字也写死 */
.ck.pri.warn{background:var(--amber);border-color:var(--amber);color:var(--onamber)}
.ck.pri.warn i,.ck.pri.warn span{color:var(--onamber);opacity:.9}
.ck.off{opacity:.55}
.cbst{margin-top:9px;font-size:12.5px;color:var(--sub);line-height:1.6}
.cbst b{color:var(--ink);font-weight:600}
.cbst .sh{float:right;font-size:11px;background:var(--blue-bg);color:var(--blue);
  border-radius:5px;padding:1px 7px}
/* 第三行:针对个人的提醒 */
.cbtip{margin-top:8px;background:var(--amber2);color:var(--amber-ink);border-radius:10px;
  padding:9px 11px;display:flex;align-items:center;gap:8px;font-size:13px}
.cbtip i{font-style:normal;font-weight:700;flex:none;width:18px;height:18px;line-height:18px;
  text-align:center;border-radius:50%;background:var(--amber);color:var(--amber-ink);font-size:12px}
.cbtip span{flex:1} .cbtip b{font-weight:700}
.cbtip em{font-style:normal;opacity:.6}
.cbnote{text-align:center;font-size:11px;color:var(--sub);margin-top:9px;opacity:.8}
/* 请假中 */
.cbout{background:var(--amber2);color:var(--amber-ink);border-radius:12px;padding:12px;
  display:flex;align-items:center;gap:10px}
.cbout .ci{font-style:normal;font-weight:700;width:24px;height:24px;line-height:24px;
  text-align:center;border-radius:50%;background:var(--amber);color:var(--amber-ink);flex:none}
.cbout .g{flex:1;line-height:1.5}
.cbout .g b{display:block;font-size:14.5px}
.cbout .g span{font-size:11.5px;opacity:.85}
.cbout button{border:1px solid #E08A1E;background:var(--card);color:var(--amber-ink);
  border-radius:8px;padding:7px 14px;font-size:13.5px;font-weight:600}

/* 三张管理看板(2026-08-14) */
.whsum{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
/* ★ 这五格现在能点了(点一下只看这一类,再点取消)。
   ★★ 选中的那格**描一圈 + 变底色**,不只靠颜色 —— 这一页在车间也会被打开,
   强光和色弱下颜色最先失效(跟派工卡那条同一个道理) */
.whsum>div{flex:1;min-width:64px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:9px 6px;text-align:center;cursor:pointer}
.whsum>div:active{opacity:.65}
.whsum>div.on{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);
  background:var(--blue-bg)}
.lnk{color:var(--blue);cursor:pointer;text-decoration:underline}
.whsum b{display:block;font-size:22px;font-weight:800;line-height:1.1}
.whsum span{display:block;font-size:11px;color:var(--sub);margin-top:2px}
.whsum .ok b{color:var(--green)} .whsum .bad b{color:var(--red)}
.whsum .amb b{color:var(--amber-ink)} .whsum .dim b{color:var(--sub)}
.wmr{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:6px}
.wmr .g{flex:1;min-width:0;font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wmr .g .muted{font-size:12px}
.wmr .r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;font-size:12.5px}
.wmr.bad{border-color:var(--red-line,#E8C4BE)}
.wmr.amb{border-color:var(--amber)}
.wmr.dim{opacity:.6}
.wmr .lt{color:var(--red);font-weight:700}
.wmr .sh{font-size:10.5px;background:var(--blue-bg);color:var(--blue);border-radius:5px;padding:1px 6px}
.wmr .tag{font-size:11px;border-radius:5px;padding:2px 8px;background:var(--card2);color:var(--sub)}
/* 底色写死了文字也写死 */
.wmr .tag.ok{background:var(--green2);color:var(--green-ink)}
.wmr .tag.bad{background:var(--red-bg);color:var(--red-ink)}
.wmr .tag.amb{background:var(--amber2);color:var(--amber-ink)}
.wmr .tag.dim{background:var(--card2);color:var(--sub)}

/* 这张单走到哪儿了(2026-08-15) */
.rnow{background:var(--navy);color:var(--onfill);border-radius:11px;padding:13px 15px;
  font-size:15.5px;line-height:1.65;margin-bottom:12px}
.rnow b{color:#FFD98A}
.rrow{cursor:pointer}
.rdet{border-top:1px dashed var(--line2);margin-top:8px}
.rline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 0;
  font-size:12.5px;border-bottom:1px solid var(--line2)}
.rline:last-child{border-bottom:0}
.rline.off{opacity:.45;text-decoration:line-through}
.rline .code{font-weight:700;color:var(--blue);min-width:62px}
.rline b{font-size:14px}

/* 通道堵没堵(2026-08-15) —— 一眼看清哪通哪堵 */
.alwrap{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.alseg{min-width:58px;border-radius:9px;padding:8px 6px;border:1px solid var(--line2);
  background:var(--card);color:var(--ink);text-align:center;line-height:1.3}
.alseg b{display:block;font-size:15px;font-weight:700}
.alseg span{display:block;font-size:10.5px;color:var(--sub);margin-top:1px}
/* 底色写死了文字也写死 */
.alseg.bad{background:var(--red-bg);border-color:var(--red-line)}
.alseg.bad b,.alseg.bad span{color:var(--red-ink)}
.alseg.ok{opacity:.6}

/* 人员管理:请假中(2026-08-15) —— 底色写死了文字也写死 */
.sclv{background:var(--amber2);color:var(--amber-ink);border-radius:8px;padding:6px 10px;
  font-size:12.5px;margin:6px 0 2px;font-weight:600}
.scbtn.amber{background:var(--amber2);border-color:var(--amber);color:var(--amber-ink)}

/* 出货计划 · 任务模式(2026-08-15) */
.spday{display:flex;align-items:baseline;gap:6px;margin-top:10px;padding:9px 12px;
  background:var(--amber2);border-radius:9px;font-size:13px;color:var(--amber-ink)}
.spday b{font-size:22px;font-weight:800;color:var(--amber-ink)}
.spday i{margin-left:auto;font-style:normal;font-size:11.5px;opacity:.85}
.spteam{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.spteam>div{flex:1;min-width:78px;border:1px solid var(--line);border-radius:9px;
  padding:7px 9px;font-size:12px;color:var(--sub)}
.spteam b{display:block;color:var(--ink);font-size:13px;margin-bottom:2px}
.spteam .n{font-size:20px;font-weight:700;color:var(--ink);margin-right:4px}
.sptk{background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;margin-bottom:7px}
.sptk .tt{font-size:16px;font-weight:700}
.sptk .cno{font-size:12px;font-weight:600;color:var(--blue);
  background:var(--blue-bg);border-radius:5px;padding:1px 7px;margin-left:6px}
.sptk .warn{font-size:11.5px;color:var(--amber-ink);background:var(--amber2);
  border-radius:5px;padding:1px 7px;margin-left:6px}
.sptk.take{border-color:var(--blue);background:var(--blue-bg)}
.sptk.done{opacity:.6}
.sptk .okmark{color:var(--green);font-size:20px;font-weight:700}
.ckline{border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:6px}
.ckline.diff{border-color:var(--amber);background:var(--amber2)}
.ckline.diff .muted{color:var(--amber-ink)}

/* 托的状态直接印在托上(2026-08-15) —— 底色写死了文字也写死 */
.pst{display:inline-block;border-radius:6px;padding:1px 8px;font-size:12.5px;font-weight:600}
.pst.held{background:var(--amber2);color:var(--amber-ink)}
.pst.take{background:var(--blue-soft);color:var(--blue-ink)}
.pst.ready{background:var(--green2);color:var(--green-ink)}
.pst.lock{background:var(--red-bg);color:var(--red-ink)}
.pst.wait{background:var(--card2);color:var(--sub)}
.pst.pend{background:var(--plum-bg);color:var(--plum)}
.pstloc{font-size:12px;color:var(--sub);margin-left:5px}

/* ══════════════════════════════════════════════════════════════════════════
   ★★★★★ TGH 2.37 · 10-01(Di:「这个页面给我改一下,太乱又难看」—— 出口柜「今天」看板）。
   查出来的根子:.stgbar / .stga / .sppaper / .sppst 这几个类名 JS 里一直在用,
   style.css 里压根没定义过 —— 等于一堆没上色的裸 div,「乱」不是审美问题,是真没样式。
   这次把缺的样式补上、顺手让层次更清楚（大数字唯一突出、箭头弱化、差额提醒收成一行、
   口径说明收成一行小字），新类名按规矩加 spb2 前缀,不跟旧类名共用名字。 */
.spb2-flow{display:flex;align-items:center;margin-top:14px}
.spb2-seg{text-align:center;flex:1}
.spb2-seg b{display:block;font-size:21px;font-weight:800;line-height:1.2}
.spb2-seg span{font-size:11px;color:var(--sub)}
.spb2-arrow{flex:0 0 68px;text-align:center;font-size:10.5px;color:var(--line2);position:relative;top:-7px}
.spb2-arrow i{font-style:normal;display:block;font-size:13px}
.spb2-arrow.hot{color:var(--amber-ink)}

.spb2-alert{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;border-radius:9px;
  background:var(--amber-bg);border:1px solid var(--amber-line);font-size:13px;margin-top:12px;color:var(--ink)}
.spb2-alert b{color:var(--amber-ink)}

.spb2-note{font-size:12px;color:var(--sub);margin-top:8px;display:flex;gap:6px;align-items:flex-start;line-height:1.6}
.spb2-note b{color:var(--ink)}

.spb2-paper-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:9px}
.spb2-paper{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.spb2-paper .hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.spb2-paper .hd b{font-size:14px}
.spb2-paper .hd .at{font-size:11.5px;color:var(--sub);white-space:nowrap}
.spb2-paper .st{margin-top:7px;font-size:12.5px;display:flex;align-items:center;gap:6px}
.spb2-dot{width:7px;height:7px;border-radius:50%;flex:none}
.spb2-dot.ok{background:var(--green)}
.spb2-dot.bad{background:var(--red)}
.spb2-dot.dim{background:var(--line2)}
.spb2-paper .actions{display:flex;gap:6px;margin-top:9px}
.spb2-paper .actions button{flex:1;padding:8px 2px;font-size:12.5px;white-space:nowrap}
.spb2-paper-foot{font-size:11.5px;color:var(--sub);margin-top:9px;line-height:1.7}

.spb2-log .row{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.spb2-log .row:last-child{border-bottom:0}
.spb2-log .t{color:var(--sub);white-space:nowrap;font-variant-numeric:tabular-nums}
.spb2-log .more{text-align:center;padding-top:8px;color:var(--blue);font-size:12.5px;cursor:pointer}

/* 主路由那一格做大(2026-08-15 用户:「放正中间,然后比其他的大」) */
#tabs button.big{flex:1.45;position:relative}
#tabs button.big .tic{transform:scale(1.28);display:inline-block}
#tabs button.big{font-weight:700}
#tabs button.big::before{content:"";position:absolute;left:6px;right:6px;top:3px;bottom:3px;
  background:var(--blue-bg);border-radius:12px;z-index:-1}
#tabs button.big.on::before{background:var(--blue-bg);opacity:1}

/* 出货计划:日期条(2026-08-15) */
.spdays{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;-webkit-overflow-scrolling:touch}
.spdays button{flex:none;min-width:58px;border:1px solid var(--line2);border-radius:9px;
  background:var(--card);color:var(--ink);padding:6px 8px;line-height:1.3}
.spdays button b{display:block;font-size:13.5px;font-weight:700}
.spdays button span{display:block;font-size:10.5px;color:var(--sub)}
.spdays button.on{background:var(--blue);border-color:var(--blue);color:var(--onblue)}
.spdays button.on span{color:var(--onblue);opacity:.85}

/* 柜卡片:照备料卡的密度(2026-08-15) */
.sptk .nocno{color:var(--sub);font-weight:500;font-size:14px}
.sptk .spd{text-align:center;min-width:52px}
.sptk .spd b{display:block;font-size:16px;font-weight:700;color:var(--blue)}
.sptk .spd span{font-size:10.5px;color:var(--sub)}
.sptk .spd.nod b{color:var(--sub)}
.spdet{margin-top:8px;border-top:1px dashed var(--line2);padding-top:6px}
.spline{display:flex;align-items:baseline;gap:8px;padding:3px 0;font-size:12.5px}
.spline .po{font-weight:700;color:var(--ink);min-width:88px;font-variant-numeric:tabular-nums}
.spline .im{flex:1;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spline b{font-size:14px;font-variant-numeric:tabular-nums}
.spline .u{font-size:11px;color:var(--sub)}
.spdet .more{font-size:11.5px;color:var(--sub);padding-top:3px}

/* 柜明细一行:PO + 箱数 + 两个型号(2026-08-15) */
.spline{flex-wrap:wrap}
.spline .ims{flex-basis:100%;display:flex;gap:8px;font-size:11.5px;color:var(--sub);
  padding-left:2px;margin-top:1px}
.spline .sku{background:var(--card2);border-radius:4px;padding:0 6px}
.spline .im{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ★★★★★ 2026-08-16 装柜任务页改版:细条 → 卡片。
   用户的话:「短粗胖比细条好看,还节省屏幕」。
   判据:一行里操作超过一个,就该是卡片。
   ★ 颜色一律走变量 —— 这一页写死过一版,深色主题下整片惨白,已改。 */
.sphead{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:10px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.sphead .n{font-size:34px;font-weight:800;line-height:1;letter-spacing:-1px;color:var(--blue)}
.sphead .t{font-size:15px;line-height:1.6;flex:1;color:var(--ink)}
.sphead .t b{font-size:17px}
.sphead .muted{font-size:12.5px;margin-top:2px;color:var(--sub)}
.spwarn{background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:12px;
  padding:10px 13px;margin-bottom:10px;font-size:13.5px;line-height:1.65;color:var(--amber-ink)}

.spfind{position:relative;margin-bottom:10px}
.spfind input{width:100%;height:50px;font-size:19px;letter-spacing:1.5px;
  padding:0 40px 0 14px;border-radius:12px}
.spfind .x{position:absolute;right:6px;top:9px;width:32px;height:32px;border:0;
  background:transparent;font-size:17px;color:var(--sub)}
.spfind .n{font-size:13px;color:var(--sub);margin:6px 3px 0}

/* 剩一个:大字 + 佐证 + 确定。★ 不自动跳 —— 不可撤销的操作必须慢一拍 */
.spone{background:var(--blue-bg);border:2px solid var(--blue);border-radius:14px;
  padding:16px 14px;margin-bottom:12px;text-align:center}
.spone .big{font-size:28px;font-weight:800;letter-spacing:2px;color:var(--blue);
  word-break:break-all;line-height:1.25}
.spone .sub{font-size:13.5px;color:var(--sub);margin-top:5px;line-height:1.6}
.spone .btn{margin-top:12px}
.spone .btn.sm{height:36px;font-size:13.5px;margin-top:7px}

.spc{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;margin-bottom:9px;box-shadow:var(--shadow)}
.spc.take.own{border-color:var(--blue);background:var(--blue-bg)}
.spc.done{opacity:.62}
.spc .spno{font-size:21px;font-weight:800;letter-spacing:1.2px;line-height:1.25;
  word-break:break-all;color:var(--ink)}
.spc .spno .nocno{font-size:19px;font-weight:700;color:var(--amber-ink);letter-spacing:.5px}
.spc .spsub{font-size:12.5px;color:var(--sub);margin-top:3px;line-height:1.55}
.spc .spsub2{font-size:12.5px;color:var(--sub);margin-top:5px;line-height:1.55}
.spc .spsub2 .ic{font-style:normal;margin-right:4px;opacity:.6}
.spc .splate{color:var(--red)}
.spc .spback{color:var(--amber-ink)}
.spc .spnext{color:var(--sub)}
.spc .spgo{margin-top:11px;height:46px;font-size:15.5px}
.spc .spwait{margin-top:10px;text-align:center;font-size:13px;color:var(--sub);
  padding:11px;background:var(--card2);border-radius:10px}

.spbg{display:inline-block;font-size:12px;padding:4px 10px;border-radius:8px;
  white-space:nowrap;font-weight:600}
.spbg.new{background:var(--card2);color:var(--sub);border:1px solid var(--line)}
.spbg.mine{background:var(--blue);color:var(--onblue)}
.spbg.oth{background:var(--card2);color:var(--plum);border:1px solid var(--line2)}
.spbg.done{background:var(--green-bg);color:var(--green-ink)}

/* ★ 三栏看板(未完成 / 正在装 / 已完成)。手机窄,三栏并排会挤成面条,
   所以做成三个标签页 —— **数字印在标签上,不点进去也知道活堆在哪一段**。
   数字比标签本身值钱:哪栏堆着就是哪儿堵了。 */
.spcols{display:flex;gap:7px;margin-bottom:10px}
.spcols button{flex:1;min-width:0;padding:9px 4px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);color:var(--sub);line-height:1.25}
.spcols button b{display:block;font-size:22px;font-weight:800;color:var(--ink)}
.spcols button span{display:block;font-size:12px;margin-top:2px}
.spcols button.on{background:var(--blue);border-color:var(--blue);color:var(--onblue)}
.spcols button.on b{color:var(--onblue)}

/* 正在装的那张卡才摊开 PO 明细 —— 干活的依据,不是浏览时的噪音 */
.spc .spdet{margin-top:9px;border-top:1px dashed var(--line);padding-top:8px}
.spc .spl{display:flex;align-items:baseline;gap:6px;font-size:13px;padding:3px 0;color:var(--ink)}
.spc .spl .po{font-weight:700;letter-spacing:.3px}
.spc .spl b{margin-left:auto;font-size:14px}
.spc .spl .u{font-size:11px;color:var(--sub)}
.spc .spl .im{flex-basis:100%;font-size:11.5px;color:var(--sub)}
.spc .spdet .more{font-size:12px;color:var(--sub);padding-top:4px}

/* ★ 看板最上面那两栏:本周 出口柜 / 进口柜,各自「完成 / 总数」。
   用户要的就四个字:简单明了。两边周期定义不同,所以起止日期各印各的。 */
.sptwo{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.sptwo .c{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:12px 13px;box-shadow:var(--shadow);min-width:0}
.sptwo .h{font-size:13px;color:var(--ink);font-weight:600;line-height:1.35}
.sptwo .h span{display:block;font-size:11px;color:var(--sub);font-weight:400;margin-top:1px}
.sptwo .v{margin-top:6px;line-height:1}
.sptwo .v b{font-size:30px;font-weight:800;color:var(--blue)}
.sptwo .v span{font-size:15px;color:var(--sub);margin-left:3px}
.sptwo .f{font-size:11.5px;color:var(--sub);margin-top:5px}

/* 装柜拍照那一片也用卡片,跟上面的看板统一 —— 同一页两套长相,人会分不清 */
.spc[data-sp]{cursor:pointer}
.spc[data-sp] .spno{font-size:18px}


/* ★★★★★ 2026-08-16 现场用的是超宽曲面屏,卡片一行一张、按钮拉满整行 ——
   **在宽屏上又变回长条了**。用户:「我记得 UI 我们设计好了啊,现在为啥还是这样」。
   ★★★ 原因是我照着手机画的稿子直接落地,没管电脑屏。
      **卡片的价值来自「一屏能并排看到几张」**,拉到 3440px 宽只放一张,
      那它就是个加了圆角的长条。
   ★ 按屏宽自动排:窄屏 1 列 / 宽屏 2 列 / 超宽 3 列。 */
.spwrap{display:grid;grid-template-columns:1fr;gap:9px;align-items:start}
@media (min-width: 900px)  { .spwrap{grid-template-columns:1fr 1fr} }
@media (min-width: 1500px) { .spwrap{grid-template-columns:1fr 1fr 1fr} }
.spwrap .spc{margin-bottom:0}
/* 按钮别拉满超宽屏 —— 一个按钮横跨一米看着就不像能点的 */
.spc .spgo{max-width:420px;margin-left:auto;margin-right:auto}

/* ★★★★★ 2026-08-16 出勤看板改版。用户的总纲:美观 · 简洁 · 信息全 ·
   不反人类(一个问题别让人跑几个地方)· 使用简单 · 看着高级。
   ★ 「看着高级」在这儿的具体做法:颜色只有三档且各只有一个含义
     (绿=按时 / 红=迟到 / 灰=没打卡),统一圆角留白,数字等宽对齐。
     **高级感来自克制和一致,不是来自加装饰。** */
.wcard{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:12px 13px;margin-bottom:8px;box-shadow:var(--shadow)}
.wcard.on{border-color:var(--blue)}
.wcard .h{display:flex;align-items:baseline;gap:7px;cursor:pointer}
.wcard .h b{font-size:15px}
.wcard .h .r{margin-left:auto;font-size:13px;white-space:nowrap}
.wcard .bar{display:flex;height:9px;border-radius:5px;overflow:hidden;
  background:var(--card2);margin-top:8px}
.wcard .bar span{display:block}
.wcard .f{display:flex;justify-content:space-between;gap:8px;
  font-size:12px;color:var(--sub);margin-top:6px;cursor:pointer}
.wcard .f .more{white-space:nowrap;color:var(--blue)}
.wcard .warn{font-size:12.5px;color:var(--amber-ink);line-height:1.65;margin-top:7px}
.wcard .wlist{margin-top:9px;border-top:1px dashed var(--line);padding-top:4px}
.wcard .wl{display:flex;align-items:baseline;gap:8px;padding:7px 2px;font-size:13.5px;
  border-bottom:1px solid var(--line2)}
.wcard .wl:last-child{border-bottom:0}
.wcard .wl .g{flex:1;min-width:0}
.wcard .wl .r{display:flex;gap:8px;align-items:baseline;white-space:nowrap;font-size:12.5px}
.lt{color:var(--red)}
.okc{color:var(--green)}
.whsum .cmp{display:block;font-style:normal;font-size:11px;opacity:.75;margin-top:1px}

/* 柜号两格输入:左字母右数字,员工不用切键盘。
   柜号错一位,照片就挂到不存在的柜上还没人发现 ——
   **拆格子是让他没机会错,比事后校验管用**。 */
.ctnin{display:flex;align-items:center;gap:0}
.ctnin input{height:52px;font-size:22px;letter-spacing:3px;text-align:center;
  border-radius:12px;min-width:0}
.ctnin input.a{flex:4;text-transform:uppercase}
.ctnin input.n{flex:7}
.ctnin .sep{width:10px;flex:none}
.spc .spman{color:var(--plum,#5a4478)}

/* 大屏轮转条:第几个 / 共几个、仓名(点一下直接跳过去)、还有几秒、进度条。
   **不告诉人还要等多久,轮转就变成了不可预期的跳屏**。 */
.tvloop{display:flex;align-items:center;gap:14px;padding:8px 0 10px;
  border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:12px;position:relative}
.tvloop .n{font-size:18px;opacity:.75;white-space:nowrap}
.tvloop .w{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.tvloop .w b{font-size:17px;font-weight:500;padding:3px 12px;border-radius:8px;
  background:rgba(255,255,255,.08);opacity:.6;cursor:pointer}
.tvloop .w b.on{background:rgba(255,255,255,.22);opacity:1}
.tvloop .t{font-size:16px;opacity:.7;white-space:nowrap}
.tvloop .bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:rgba(255,255,255,.12)}
.tvloop .bar i{display:block;height:100%;width:0;background:rgba(255,255,255,.55)}
/* 能点开明细的块给个手型 —— 大屏上大多数东西不能点,能点的要看得出来 */
.tvcard.go,.tvbox.go{cursor:pointer}
.tvcard.go:hover,.tvbox.go:hover{background:rgba(255,255,255,.06)}

/* ★★★★★ 2026-08-16 大屏按屏宽自适应。
   用户点破的现场事实:「**管理者轮换大屏不能用 32 寸曲面屏,那块是外协仓的,
   我们办公室的好像都是 19 或者 21**」。
   ★★★ 决定排版的**不是几寸、也不是分辨率,是浏览器实际拿到的 CSS 宽度** ——
      他那台 2560×1600 的笔记本开着缩放,网页拿到的其实只有 1280 上下。
      所以不按"几寸"分档,按**实际宽度**分:
        <1200 两列 · 1200–1700 三列 · >1700 四列(外协仓那台原样)。
      一份代码,笔记本 / 19 寸 / 32 寸全对,谁都不用改设置。
   ★★ 大屏本身用的是 vw 单位,字号会自己缩;真正会出事的是**固定 px 的东西**
      和**会换行的东西** —— 这一页是 overflow:hidden,
      **换行不出滚动条,底下的内容直接没了,人还不知道少看了东西**。 */
.tvloop{gap:1.2vw;padding:.6vw 0 .8vw;margin-bottom:1vw}
.tvloop .n{font-size:1.15vw}
/* ★★ 2026-08-20 实拍:十个仓一行放不下,最后一个「不良品仓」**被硬切成半个字**,
   看着像界面坏了。overflow:hidden 只保证不挤爆布局,**切口本身很难看**。
   ★ 改成右侧渐隐:切边变成「后面还有」,而不是「这里裂了」。
     仓还会再加,靠"数一数够不够宽"是治不住的 —— 要让**装不下这件事本身长得体面**。 */
.tvloop .w{gap:.5vw;overflow:hidden;flex-wrap:nowrap;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 3vw),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 3vw),transparent)}
.tvloop .w b{font-size:1.1vw;padding:.2vw .8vw;border-radius:.5vw;white-space:nowrap}
.tvloop .t{font-size:1.05vw}

/* 窄屏(19 寸那几台):四张卡片折成两行两张,仓名那排收起来只留「下一个是谁」 */
@media(min-width:901px) and (max-width:1200px){
  .tvrow{flex-wrap:wrap}
  .tvrow{gap:1.4vw}
  .tvcard{flex:1 1 46%;min-width:0}
  .tvloop .w{display:none}
  .tvloop .n{font-size:1.5vw}
  .tvloop .t{font-size:1.4vw}
  .tvv{font-size:4.6vw}
  .tvt{font-size:3vw}.tvtime{font-size:2vw}
  .tvk3 .km{font-size:.85em}
  .tvfoot{font-size:1.1vw}
}
/* 中等(1200–1700):一行三张,第四张自己掉到下一行占满 */
@media(min-width:1201px) and (max-width:1700px){
  .tvrow{flex-wrap:wrap}
  .tvcard{flex:1 1 30%;min-width:0}
  .tvloop .w b:not(.on){display:none}
  .tvv{font-size:4vw}
}

/* ★★★★★ 2026-08-17 出口柜「今天」看板(给主管自己看的,不是墙屏)。
   ★★ 跟大屏的区别:这页是**坐在电脑前一米之内看、而且能点**,
      所以信息可以密、字号正常;墙屏是十米外抬头扫,那是另一套。
   ★ 顺序照着「他最想三秒内知道什么」排:
     先给判断(今天要装几个)→ 再给要动手的(卡住的)→ 最后才是各组和进口柜。 */
.sdtop{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;margin-bottom:14px}
@media(max-width:700px){.sdtop{grid-template-columns:1fr}}
.sdtop .big{display:flex;align-items:center;gap:16px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.sdtop .big .n{font-size:52px;font-weight:800;line-height:1;letter-spacing:-2px;
  color:var(--blue);font-variant-numeric:tabular-nums}
.sdtop .big .t{font-size:16px;line-height:1.5}
.sdtop .big .muted{font-size:12.5px;margin-top:3px;line-height:1.6}
.sdtop .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sdtop .two .c{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;box-shadow:var(--shadow)}
.sdtop .two .k{font-size:12.5px;color:var(--sub)}
.sdtop .two .v{font-size:30px;font-weight:800;line-height:1.1;margin-top:3px;
  font-variant-numeric:tabular-nums}
.sdtop .two .v.ok{color:var(--green)} .sdtop .two .v.amb{color:var(--amber-ink)}

.sdgrp{font-size:13.5px;font-weight:600;margin:10px 2px 7px}
.sdgrp .muted{font-weight:400;font-size:12px;margin-left:6px}
.sdok{background:var(--green-bg);color:var(--green-ink);border-radius:12px;
  padding:13px 15px;font-size:14px;margin-bottom:12px}
.sdc{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:12px 13px;box-shadow:var(--shadow);cursor:pointer}
.sdc:hover{border-color:var(--blue)}
.sdc .no{font-size:18px;font-weight:800;letter-spacing:1px;word-break:break-all}
.sdc .sub{font-size:12.5px;color:var(--sub);margin-top:3px;line-height:1.55}
.sdc .red{color:var(--red)} .sdc .amb{color:var(--amber-ink)}
.sdc .chev{font-style:normal;font-size:20px;color:var(--sub);opacity:.5;padding-left:6px}

.sdteam{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px;
  margin-bottom:4px}
.sdteam .c{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:11px 13px;box-shadow:var(--shadow)}
.sdteam .k{font-size:12.5px;color:var(--sub)}
.sdteam .v{font-size:26px;font-weight:800;line-height:1.15;margin-top:2px;
  font-variant-numeric:tabular-nums}
.sdteam .s{font-size:11.5px;color:var(--sub);margin-top:1px}
/* 「手上压着 N 托」能点了 —— 能点的东西要看得出来能点 */
.jcs.go{cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* ★★★★★ 2026-08-18 仓库平面图。
   ★★ 颜色只有三档,每档只有一个含义(用户定的:看着高级 = 克制和一致):
      空=浅灰 / 有货=蓝 / 满=橙 / 压 60 天+=红。
      **通道反过来** —— 有货就是挡路,所以有货才上色。 */
.twbar{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;font-size:12.5px;color:var(--sub);flex-wrap:wrap;gap:8px}
.twbar .lg b{display:inline-block;width:10px;height:10px;border-radius:3px;
  margin:0 4px 0 10px;vertical-align:-1px}
.twbar .lg b.d1{background:var(--blue)} .twbar .lg b.d2{background:var(--amber)}
.twbar .lg b.d3{background:var(--red)}
.twmap{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:12px;box-shadow:var(--shadow);overflow-x:auto}
.tdoor{font-size:12px;color:var(--sub);text-align:center;padding:5px 0 9px;
  border-bottom:2px dashed var(--line);margin-bottom:12px}
.tcols{display:flex;flex-direction:column;gap:9px;min-width:520px}
.tpair{display:flex;flex-direction:column;gap:3px}
.tzone{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:7px 9px}
.tzone.warm{border-color:var(--amber)} .tzone.hot{border-color:var(--red)}
.tzone .th{display:flex;align-items:baseline;gap:9px;margin-bottom:5px;flex-wrap:wrap}
.tzone .th b{font-size:17px;font-weight:800}
.tzone .th .n{font-size:11.5px;color:var(--sub)}
.tzone .th .old{font-size:11px;color:var(--red)}
.tgrid{display:flex;flex-direction:column;gap:2px}
.trow{display:flex;gap:2px;align-items:center}
.trow .lvn{width:12px;font-size:9px;color:var(--sub);text-align:right;flex:none}
.tc{width:15px;height:11px;border-radius:2px;display:block;flex:none;cursor:pointer;
  background:var(--bg2)}
.tc.u{background:var(--blue)} .tc.f{background:var(--amber)}
.tc.old{background:var(--red)} .tc.none{background:transparent;cursor:default}
.tc:hover{outline:2px solid var(--ink);outline-offset:1px}
.trow.rn{margin-top:2px}
.rnn{width:15px;font-size:8px;color:var(--sub);text-align:center;flex:none}
.tbl{margin-top:5px;font-size:11.5px;color:var(--sub);cursor:pointer;
  background:var(--card);border:1px dashed var(--line);border-radius:6px;padding:3px 7px}
.tbl b{color:var(--ink)}
/* 通道:有货才上色,越多越显眼 */
.taisle{padding:4px 9px;border-radius:7px;background:var(--bg);border:1px solid transparent}
.taisle.on{background:var(--amber-bg);border-color:var(--amber)}
.tah{font-size:11.5px;color:var(--sub);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.tah .w{opacity:.7} .tah .ok{color:var(--green)} .tah .bad{color:var(--amber-ink)}
.tas{display:flex;gap:2px;margin:3px 0 0 12px}
.ta{width:15px;height:5px;border-radius:2px;background:var(--bg2);flex:none;cursor:pointer}
.ta.b{background:var(--amber)}
.tdead{font-size:11px;color:var(--red);margin:3px 0 2px 12px}
.tside{display:flex;gap:9px;margin-top:12px;padding-top:11px;
  border-top:2px dashed var(--line);flex-wrap:wrap}
.tpile{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:7px 9px}
.tps{display:flex;gap:2px;margin-top:4px}
.toff,.tnot{font-size:11.5px;color:var(--sub);background:var(--bg);
  border:1px dashed var(--line);border-radius:9px;padding:7px 11px;display:flex;align-items:center}
.tdock{display:flex;gap:5px;margin-top:12px;padding-top:11px;
  border-top:2px dashed var(--line);justify-content:center;flex-wrap:wrap}
.tdock .dk{font-size:12px;background:var(--bg);border:1px solid var(--line);
  border-radius:7px;padding:4px 10px;text-align:center;line-height:1.4}
.tdock .dk i{display:block;font-style:normal;font-size:9.5px;color:var(--sub)}
.tdock .dk.im{border-color:var(--blue);color:var(--blue)}

/* ★★★ 2026-08-19「分 N 笔进的」小标 —— 同料同位同托号在页面上合成一行,
   点这个能看合并前那几笔。**账要拆,眼睛要合**:
   内部几条是系统的事,不该变成员工站在货架前要算的题 */
.mgn{color:var(--blue);cursor:pointer;border-bottom:1px dotted var(--blue);padding-bottom:1px}
.mgn:active{opacity:.6}

/* ★★★ 2026-08-19 菜单三层化。一级那几行要比二级重 —— 
   **一天用八次的和一个月用一次的,不该长得一模一样**(渐进披露) */
.mtl1{margin-bottom:8px}
.mtl1 button{padding:15px 13px}
.mtl1 .mi{font-size:19px;width:30px;text-align:center;flex:none}
.mtl1 .gr{font-weight:600;font-size:15.5px}
.mtl1 .gr .sm{display:block;color:var(--sub);font-size:11.5px;font-weight:400;margin-top:1px}
/* 返回条:一直知道自己在哪一层 */
.mbk{display:flex;align-items:center;gap:12px;margin:2px 0 10px;font-size:15px}
.mbk #mlbk{color:var(--blue);cursor:pointer;font-size:13.5px}
.mbk b{font-weight:700}
/* 还没开通的:灰着,但看得见 */
.soonbtn{opacity:.55}
.soonbtn .tag{background:var(--amber-bg);color:var(--amber-ink)}

/* ★★★ 2026-08-19 仓别核对:十个仓全列出来,不再只给两个。
   「现在」= 档案里标的(禁用,不用重复点) · 「BOM」= 工程部写的(只作参考) */
.whpick{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.whpick .btn{width:auto;padding:0 11px;font-size:12.5px}
.whpick .wtag{font-style:normal;font-size:10px;margin-left:5px;padding:1px 5px;border-radius:6px;
  background:rgba(255,255,255,.18)}
.whpick .wtag.bom{background:var(--amber-bg);color:var(--amber-ink)}

/* ★★★ 2026-08-19 批量操作条:真浮在屏幕底部,不是 sticky。
   原来用 .fixbar(position:sticky;bottom:0)—— 它粘的是自己父容器的底部,
   而那个容器就在整页最末尾,几百条列表要滚到底才看得见,底部导航还盖在上面。
   **选了东西却看不见能干什么,等于这功能不存在** */
.selbar{position:fixed;left:0;right:0;bottom:56px;z-index:16;
  background:var(--card);border-top:1px solid var(--line2);
  box-shadow:0 -3px 14px rgba(0,0,0,.18);padding:9px 12px 10px}
.selbar .t{font-size:12.5px;color:var(--sub);margin-bottom:7px}
.selbar .t b{color:var(--ink);font-size:14px}
.selbar .chips{margin:0}
.selbar .chips button{font-size:12.5px}
@media(min-width:1000px){.selbar{bottom:0}}

/* 找货页:没货的料能直接删或并 —— 在哪儿发现的就在哪儿处理 */
.ifix{display:flex;gap:5px;margin-top:6px;justify-content:flex-end}
.ifix .btn{width:auto;padding:0 9px;font-size:11.5px;height:26px;line-height:24px}

/* ★★★★ 2026-08-19 全流程六段钟:录单→派工→等人接→备料→通知车间→车间来领。
   每格钉着责任人工号 —— **这一段慢了是谁的事一眼看得出来**,
   不写"系统慢了"这种没人认领的话 */
.ckbar{display:flex;gap:3px;margin:0 0 8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ckseg{flex:1 0 auto;min-width:58px;text-align:center;padding:5px 4px 4px;
  border-radius:8px;background:var(--card2);border:1px solid var(--line)}
.ckseg .ckn{font-size:10.5px;color:var(--sub);line-height:1.3}
.ckseg .ckt{font-size:13px;font-weight:700;line-height:1.35}
.ckseg .cko{font-size:10px;color:var(--dim);min-height:13px;line-height:1.3}
.ckseg .ckm{margin-left:2px;opacity:.75}
.ckseg.ok{opacity:.72}
.ckseg.wait{opacity:.42}
.ckseg.run{border-color:var(--blue);background:var(--blue-bg)}
.ckseg.run .ckt{color:var(--blue-ink)}
.ckseg.over{border-color:var(--red);background:var(--red-bg)}
.ckseg.over .ckt,.ckseg.over .ckn,.ckseg.over .cko{color:var(--red-ink)}
.ckseg.over .ckt::after{content:" ⚠"}
/* 一句话说清「现在卡在哪一步、多久了、在谁手上」—— 不让人自己看六格去猜 */
.cknow{font-size:12px;color:var(--sub);margin:0 0 6px;line-height:1.5}
.cknow.bad{color:var(--red-ink);font-weight:600}
.cktot{font-size:11px;margin:-3px 0 6px}

/* 派工卡上的来源:哪一批 · 哪张领料单 · 哪个车间 —— 在哪儿看见的就在哪儿说清楚 */
.pbisrc{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:4px 0 2px;
  font-size:11.5px;color:var(--dim)}
.pbisrc .pbij{color:var(--blue);cursor:pointer}
.pbisrc .pbij:active{opacity:.6}

/* 没指人的派工:不给「我接」按钮,写一句实话 —— 无主是配区漏了,不该让员工抢着补 */
.pkwait{flex:1;text-align:center;padding:9px;border-radius:9px;font-size:12.5px;
  background:var(--amber-bg);color:var(--amber-ink);line-height:1.5}

/* ★★★ 2026-08-20 自由安排那一排 —— 摆在「新录一批单」上面,她每天第一眼看的地方 */
.crewbar{display:flex;align-items:center;gap:12px;padding:10px 13px;margin-bottom:10px;
  border-radius:11px;background:var(--card2);border:1px solid var(--line)}
.crewbar.free{border-color:var(--amber);background:var(--amber-bg)}
.crewbar .cw1{flex:1;min-width:0;line-height:1.5}
.crewbar .cw1 b{display:block;font-size:14.5px}
.crewbar.free .cw1 b{color:var(--amber-ink)}
.crewbar .muted{font-size:12px}
/* 圈人:点亮 = 今天他备料;灰的是今天接不了活的 */
#_cwpick button.dim{opacity:.45}
#_cwpick .cwno{font-style:normal;font-size:10px;margin-left:5px;opacity:.8}

/* 改派窗:今天没被圈进备料名单的人 —— 标一句但不挡着选 */
.rs .offc{margin-left:6px;font-size:10.5px;padding:1px 6px;border-radius:8px;
  background:var(--amber-bg);color:var(--amber-ink)}
/* 勾了「忙不过来才派」的人:不灰,但标出来 —— 他排最后才顶上 */
#_cwpick .cwas{font-style:normal;font-size:10px;margin-left:5px;padding:1px 5px;
  border-radius:7px;background:var(--blue-bg);color:var(--blue-ink)}

/* ═══════════ 电脑端:左侧常驻导航 ═══════════
   ★★★★ 用户 08-19 定的:「电脑端应该是集展示 + 实际使用、手机功能补充集一体的」
      —— 它不是展示屏,是他真正干活的地方。
   ★★★ 08-20 定的三条:①打开就是「今天的活」,孪生收进导航
      ②常用的平铺,不做点开才展开的树 ③悬停展开只用在「更多」
   ★★ 实现上**一行页面代码没改**:左栏复用底部导航同一套跳转,底部那条用 CSS 收掉。
      **加一条路,不改二十个页面** */
/* ★★★★ 手机上一定不显示 —— **用媒体查询限定死,不靠先后顺序**。
   第一版写的是顶层 `#pcnav{display:none}`,可它落在文件 2360 行,
   而 760px 那条 media 在它后面 → **后面的覆盖前面的,手机上也被打开了**,
   员工手机会被压掉一条竖栏。**测试模拟各宽度当场抓到**。
   ★ 通则:**CSS 靠顺序生效的写法,在大文件里迟早被后面的盖掉** —— 用条件限定更稳。 */
/* ★★★★ 手机上一定不显示 —— **用媒体查询限定死,不靠先后顺序**(这条踩过一次) */
@media(max-width:759px){ #pcnav{display:none !important} }

/* ═══════════════════════════════════════════════════════════════
   ★★★★★ 2026-08-20 电脑端导航换成**底部一条弧形**(用户自己画的形状):
     中间圆＝数字孪生 → 贴着圆的两块数据(左各仓 / 右进出口柜) → 再往两边是一级菜单。
   ★★★ 平时 78px 只有图标,**鼠标移上去长到 190px**、图标出名字、两块数据展开。
     ★★ 为什么不做成「完全消失、扫到边缘才出来」:
        ①他 08-19 就报过这个 BUG(窄屏导航整条不见,截图问「没做导航栏吗?」),
          当时立的规矩是「**导航不能消失,只能变小**」
        ②全隐藏之后**当前在哪一页的高亮也没了**,走两步就丢方位
        ③屏幕边缘那条看不见的热区,鼠标从右往左甩会误触发
   ★★★ **一行页面代码都没改**:项目清单、权限闸、高亮、角标、跳转全是原来那套,
     变的只有摆在哪儿 —— 跟做左栏那次同一个办法。
   ═══════════════════════════════════════════════════════════════ */
@media(min-width:760px){
  /* ★★★★ 2026-08-28 用户:「**鼠标放到那里会上提一下,但是实用功能真不咋地,
     不如不要了**」。★★★ 他说得对,而且这条毛病是**鼠标路过就触发** ——
     不是他主动点的,是误触;上提之后又把页面底下的内容盖住。
     ★★ 但不能直接删 hover:**文字标签本来是藏在里面的**,只有悬停才露出来,
     删了底栏就剩一排图标。所以改成**固定在看得见字的高度**,
     取消"变形"这个行为 —— 多占二十几个像素,换掉一个天天误触的动作。 */
  #pcnav{display:block;position:fixed;left:0;right:0;bottom:0;height:112px;z-index:30;
    background:var(--navbg);border-top:1px solid var(--navline);
    border-radius:26px 26px 0 0}
  /* 内容给它让出位置;底部那条手机导航收起来 */
  body{padding-bottom:124px !important;padding-left:0}
  #tabs{display:none !important}
  #view{max-width:none}

  /* 中间那口凹槽 —— 用一个跟页面同色的大圆咬出弧度,圆才像从条里长出来 */
  #pcnav .pnotch{position:absolute;left:50%;top:-46px;transform:translateX(-50%);
    width:150px;height:150px;border-radius:50%;background:var(--bg);z-index:2}
  #pcnav .porb{position:absolute;left:50%;top:-30px;transform:translateX(-50%);
    width:116px;height:116px;border-radius:50%;cursor:pointer;z-index:4;
    background:radial-gradient(circle at 34% 28%,#5BE5FA 0%,#1E7BFF 56%,#123FA8 100%);
    box-shadow:0 0 0 5px rgba(51,214,255,.12),0 0 30px rgba(51,214,255,.35);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
  #pcnav .porb:hover{transform:translateX(-50%) scale(1.04)}
  #pcnav .porb i{font-style:normal;font-size:30px;line-height:1}
  /* 没有 3D 权限的:圆里放厂标,别留一个空洞。不给 cursor:pointer —— 它不可点 */
  #pcnav .porb.tgh{cursor:default}
  #pcnav .porb.tgh:hover{transform:translateX(-50%)}
  #pcnav .porb .tghw{font-size:27px;font-weight:800;letter-spacing:1.5px;
    color:#fff;line-height:1.05}
  #pcnav .porb b{font-size:12.5px;font-weight:800;color:#fff}
  #pcnav .porb s{text-decoration:none;font-size:10px;color:rgba(4,32,43,.72)}
  /* 外环:一圈灯管 —— 这一版只在这儿和「条」上发光,别处一律安静 */
  #pcnav .pring{position:absolute;left:50%;top:-40px;transform:translateX(-50%);
    width:136px;height:136px;border-radius:50%;z-index:3;pointer-events:none;
    background:conic-gradient(from 200deg,var(--navled) 0 82%,rgba(140,160,180,.18) 82% 100%);
    -webkit-mask:radial-gradient(circle,transparent 61px,#000 61px,#000 65px,transparent 65px);
    mask:radial-gradient(circle,transparent 61px,#000 61px,#000 65px,transparent 65px)}

  #pcnav .pnin{display:flex;align-items:flex-start;height:100%;padding:13px 24px 0}
  #pcnav .pnside{flex:1;display:flex;gap:7px;min-width:0}
  #pcnav .pnside.r{justify-content:flex-end}
  #pcnav .pnit{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
    padding:7px 9px;border-radius:14px;position:relative;min-width:50px;border:0;
    background:none;color:var(--navink)}
  #pcnav .pnit:hover{background:rgba(127,140,160,.16)}
  #pcnav .pnit.on{background:var(--navon)}
  #pcnav .pnit.on::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;
    height:2px;border-radius:99px;background:var(--navled);
    box-shadow:0 0 7px var(--navledg)}
  #pcnav .pnit i{font-style:normal;font-size:18px;line-height:1}
  #pcnav .pnit span{font-size:11px;white-space:nowrap;max-height:18px;opacity:1;
    overflow:hidden}
  /* 角标:收起时挤在图标右上角,展开后回到名字后面 */
  #pcnav .pnn{position:absolute;top:3px;right:5px;font-size:9.5px;font-weight:700;
    background:var(--amber);color:var(--onamber);border-radius:8px;padding:0 4px;
    min-width:15px;text-align:center}
  #pcnav .pndot{position:absolute;top:7px;right:8px;width:7px;height:7px;
    border-radius:50%;background:var(--red)}

  /* 贴着圆的那两块 */
  #pcnav .pndk{width:198px;flex:none;background:rgba(127,140,160,.12);
    border:1px solid var(--navline);border-radius:15px;padding:8px 13px;cursor:pointer}
  #pcnav .pndk.l{margin-right:92px} #pcnav .pndk.r{margin-left:92px}
  #pcnav .pndk:hover{background:rgba(127,140,160,.2)}
  #pcnav .pndk .dt{font-size:10.5px;color:var(--navsub);letter-spacing:1.2px;display:flex}
  #pcnav .pndk .dt s{text-decoration:none;margin-left:auto;color:var(--navled)}
  #pcnav .pndk .dv{font-size:12px;color:var(--navsub);margin-top:4px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* ══ 2026-08-27 这两块接上大屏的数了 ══
     ★ 数字要比说明字大、要挑出来 —— 这两块摆在那儿就是为了让人一眼扫到数 */
  #pcnav .pndk .dv b{font-weight:800;font-size:14px;color:var(--navink)}
  #pcnav .pndk .dv.bad b{color:#FF6B6B} #pcnav .pndk .dv.amb b{color:#FFB020}
  #pcnav .pndk .dv.ok{color:#3DDC84} #pcnav .pndk .dv.ok b{color:#3DDC84}
  #pcnav .pndk .dv s{text-decoration:none;opacity:.3;margin:0 3px}
  /* ★★ 「多久没人动自动跳过去」—— 平时淡着,鼠标移到卡片上才亮,
     **它是个开关不是标签**,得让人看出来能点 */
  #pcnav .pndk .dkid{display:block;font-size:10px;font-weight:400;margin-top:3px;
    color:var(--navled);opacity:.55;cursor:pointer}
  #pcnav .pndk:hover .dkid{opacity:1;text-decoration:underline}

  /* 「更多」悬停向上弹六个大类 */
  #pcnav .pnmore{position:relative}
  /* ★★★★ 2026-08-21 用户实拍:「更多」的六大类**浮在页面内容上**,
     看着像右边凭空多出一列菜单、跟内容重叠。
     ★★★ 面板本身的定位是对的(贴着「更多」往上弹),错在**它长得跟页面一个样**:
       半透明的深色 + 没有明显边界 → 眼睛分不出这是"浮在上面的一层"还是"页面的一部分"。
     ★★ 三件事让它"看起来是浮层":**不透明的底**(别让页面透上来)、
       **更重的投影**(浮层离页面越远,影子越重)、**一条描边**。
     ★ 顺带收窄一点、右边留出 12px —— 原来贴着屏幕最右,像是被截断的。 */
  #pcnav .pnfly{display:none;position:absolute;bottom:calc(100% + 14px);right:12px;z-index:40;
    background:var(--navpop);border:1px solid var(--navled);border-radius:16px;
    padding:9px;min-width:186px;
    box-shadow:0 24px 60px rgba(0,0,0,.72), 0 0 0 1px rgba(0,0,0,.35)}
  #pcnav .pnmore:hover .pnfly{display:block}
  #pcnav .pnfi{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:10px;
    font-size:13.5px;color:var(--navink);white-space:nowrap}
  #pcnav .pnfi:hover{background:rgba(127,140,160,.18)}
  #pcnav .pnfi i{font-style:normal;font-size:14px;width:18px;text-align:center}
  #pcnav .pnhint{display:none}   /* 不再上提,这句提示没意义了 */
}
/* ★ 窄电脑(760~1199):两块数据先收起来 —— 8 个图标 + 圆已经占满,再塞就挤成一团 */
@media(min-width:760px) and (max-width:1199px){
  #pcnav .pndk{display:none}
}
/* ★★★★ 2026-08-20 用户盖上 .12 之后报:「**下面的小图片太小了吧**」。
   ★★ 他那块屏是 2560 宽 —— **18px 的图标在上面就是一小点**,
     而整条 78px 高、两边还空着一大片,元素跟屏幕完全不成比例。
   ★★★ 根子:图标写的是**固定 px**,屏幕变宽它不跟着长。
     跟大屏看板那次同一个毛病(那次的解法是全部改 vw)。这里不用 vw ——
     导航条上的字太小会认不出、太大会挤,**分档比连续缩放稳**。
   ★ 三档跟着屏宽走;条也跟着长高一点,不然图标大了会顶着边。 */
@media(min-width:1440px){
  #pcnav{height:88px}
  #pcnav{height:118px}
  body{padding-bottom:96px !important}
  #pcnav .pnit{min-width:66px;padding:9px 11px;border-radius:16px}
  #pcnav .pnit i{font-size:24px}
  #pcnav .pnit span{font-size:12.5px}
  #pcnav .pnit span{max-height:20px}
  #pcnav .pnn{font-size:10.5px;padding:0 5px;min-width:17px}
  #pcnav .pndk{width:216px;padding:10px 15px}
  #pcnav .pndk .dt{font-size:11.5px}
  #pcnav .pndk .dv{font-size:13px}
  #pcnav .pnfi{font-size:14.5px;padding:9px 13px}
}
/* ★★★ 2026-08-20 第二次报「图标还是小」—— 他那块屏 2560。
   上一版最大档给到 27px 仍然偏小:**2400 以上再加一档**。
   ★ 到这个尺寸名字也该常显示了(不用等悬停)——**屏够宽就别藏字**,
     藏字是小屏才需要的妥协 */

@media(min-width:1900px){
  #pcnav{height:96px}
  #pcnav{height:124px}
  body{padding-bottom:104px !important}
  #pcnav .pnit{min-width:76px;padding:10px 13px}
  #pcnav .pnit i{font-size:27px}
  #pcnav .pnit span{font-size:13px}
  #pcnav .pnit span{max-height:22px}
  #pcnav .pndk{width:232px}
  #pcnav .porb{width:128px;height:128px;top:-34px}
  #pcnav .porb i{font-size:34px}
  #pcnav .porb b{font-size:13.5px}
  #pcnav .pring{width:150px;height:150px;top:-45px;
    -webkit-mask:radial-gradient(circle,transparent 67px,#000 67px,#000 72px,transparent 72px);
    mask:radial-gradient(circle,transparent 67px,#000 67px,#000 72px,transparent 72px)}
  #pcnav .pnotch{width:164px;height:164px;top:-51px}
}
@media(min-width:2400px){
  #pcnav{height:112px}
  #pcnav{height:132px}
  body{padding-bottom:120px !important}
  #pcnav .pnit{min-width:92px;padding:11px 15px;border-radius:18px}
  #pcnav .pnit i{font-size:34px}
  #pcnav .pnit span{font-size:14px;max-height:22px;opacity:1}
  #pcnav .pnn{font-size:12px;padding:0 6px;min-width:20px}
  #pcnav .porb{width:146px;height:146px;top:-40px}
  #pcnav .porb i{font-size:40px}
  #pcnav .porb b{font-size:15.5px}
  #pcnav .porb .tghw{font-size:34px}
  #pcnav .porb s{font-size:12px}
  #pcnav .pring{width:170px;height:170px;top:-52px;
    -webkit-mask:radial-gradient(circle,transparent 76px,#000 76px,#000 82px,transparent 82px);
    mask:radial-gradient(circle,transparent 76px,#000 76px,#000 82px,transparent 82px)}
  #pcnav .pnotch{width:186px;height:186px;top:-58px}
  #pcnav .pndk{width:262px;padding:12px 17px}
  #pcnav .pndk .dt{font-size:12.5px}
  #pcnav .pndk .dv{font-size:14px}
  #pcnav .pnfi{font-size:16px;padding:11px 15px}
}

/* ═══════════ 电脑端:一屏看更多 ═══════════
   ★★★ 用户 08-19 定的电脑端三件事之一:「一屏看更多 —— 手机上要滚三屏的表,这儿一屏看完」。
   ★★ 现成的分栏机制早就有(.stat/.bks/.zgrid 这些),只是**最宽到 620px 就不再加列**,
      宽屏上白白空着半边。这儿只是把档位往上加一级 ——
      **一行 CSS,所有用这些类的页面自动受益,不用改任何页面代码**。 */
@media(min-width:1000px){
  .stat{grid-template-columns:repeat(4,1fr)}
  .bks{grid-template-columns:repeat(7,1fr)}
  .zgrid{grid-template-columns:repeat(8,1fr)}
  /* 卡片列表:宽屏排两列,一屏看一倍的量 */
  .rows{columns:2;column-gap:12px}
  .rows > button{break-inside:avoid;margin-bottom:8px}
  /* 表格类的一页多塞点行:电脑上不用手机那套大间距 */
  .card{padding:12px 14px}
  .pkln,.iline{padding-top:7px;padding-bottom:7px}
}
/* 超宽屏(27 寸那种)再多一列 —— 你办公室那台和挂墙那块都吃得满 */
@media(min-width:1500px){
  .rows{columns:3}
  .bks{grid-template-columns:repeat(9,1fr)}
}

/* ══ 全仓总览的卡片(2026-08-21)══
   ★ 一行几个跟着屏宽走:手机 1、平板 2、电脑 3、超宽 4 */
.whcards{display:grid;grid-template-columns:1fr;gap:11px}
@media(min-width:700px){ .whcards{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1200px){ .whcards{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1800px){ .whcards{grid-template-columns:repeat(4,1fr)} }
.whc{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 15px;cursor:pointer;border-left:3px solid transparent}
.whc:hover{border-color:var(--blue,#2563eb)}
/* ★ 有事的仓左边一条竖杠 —— 一眼看出该不该管,不用读数 */
.whc.hot1{border-left-color:var(--amber)}
.whc.hot2{border-left-color:var(--red)}
.whh{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.whh b{font-size:16px;font-weight:800}
.whh s{text-decoration:none;font-size:11px;color:var(--blue);border:1px solid var(--blue);
  border-radius:4px;padding:0 5px}
.whh em{font-style:normal;font-size:10.5px;color:var(--sub);background:var(--card2);
  border-radius:4px;padding:1px 5px}
.whh i{font-style:normal;margin-left:auto;font-size:11px;color:var(--sub)}
.wh3{display:flex;gap:0}
.wh3>div{flex:1;padding-right:8px}
.wh3>div+div{border-left:1px solid var(--line2);padding-left:10px}
.wh3 .k{font-size:10.5px;color:var(--sub)}
.wh3 .v{font-size:22px;font-weight:800;line-height:1.2;margin-top:1px}
.wh3 .v em{font-style:normal;font-size:11px;color:var(--sub);font-weight:500;margin-left:2px}
.wh3 .v.amb{color:var(--amber-ink,#B45309)} .wh3 .v.bad{color:var(--red)}
.wh3 .v.ok{color:var(--green)}
.wh3 .s{font-size:10.5px;color:var(--sub);margin-top:2px}
.whg{height:5px;background:var(--card2);border-radius:3px;overflow:hidden;margin-top:10px}
.whg i{display:block;height:100%;background:var(--green)}
.whg i.amb{background:var(--amber)} .whg i.bad{background:var(--red)}
.whtd{margin-top:10px;padding-top:9px;border-top:1px solid var(--line2)}
.whti{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:3px 0}
.whti s{text-decoration:none;width:5px;height:5px;border-radius:50%;
  background:var(--amber);flex:none}
.whti s.r{background:var(--red)}
.whti b{margin-left:auto;font-weight:700;color:var(--amber-ink,#B45309)}
.whti b.r{color:var(--red)}
.whti em{font-style:normal;font-size:11px;color:var(--sub);flex:none}
/* ★ 没事也要说一句 —— 「今天没事」本身就是有用的信息 */
.whok{margin-top:10px;padding-top:9px;border-top:1px solid var(--line2);
  font-size:12.5px;color:var(--green)}
.whnone{margin-top:10px;padding-top:9px;border-top:1px solid var(--line2);
  font-size:12.5px;color:var(--sub)}

/* 卡上的单据一行:第几批 · 领料单号 · 车间(2026-08-21) */
.hdoc{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px;
  padding:7px 10px;background:var(--card2);border-radius:9px;font-size:12px}
.hdoc s{text-decoration:none;color:var(--blue);font-weight:700;cursor:pointer;white-space:nowrap}
.hdoc b{font-weight:700;font-variant-numeric:tabular-nums}
.hdoc i{font-style:normal;color:var(--sub);margin-left:auto;white-space:nowrap}
.hdoc u{text-decoration:none;color:var(--sub);flex:0 0 100%}
/* 跳过来时亮一下 —— 让他一眼看见是哪一张 */
.card.flash{animation:pkflash 2.2s ease}
@keyframes pkflash{
  0%,100%{box-shadow:none}
  10%,60%{box-shadow:0 0 0 3px var(--blue,#2563eb)}
}

/* 「不在派工池」那份名单(2026-08-21) */
.offrow{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;
  border-top:1px solid var(--line2)}
.offrow b{font-weight:700;flex:none}
.offrow span{color:var(--sub);text-align:right;margin-left:auto;line-height:1.5}

/* 圈人窗:能圈但要提醒一句的(2026-08-21)—— 跟"不能圈"要一眼分得开 */
.chips.wrap button.soft{border-style:dashed}
.chips.wrap button.soft .cwas{color:var(--amber-ink,#B45309)}

/* 上架日期跟真实收货时间对不上(2026-08-21) */
.plwarn{margin-top:8px;padding:9px 11px;border-radius:9px;font-size:12.5px;line-height:1.7;
  background:var(--amber-bg,#FFF8E8);color:var(--amber-ink);border:1px solid var(--amber-line,#F5D9A0)}
.plwarn b{color:var(--amber-ink)}

/* 收货页:上架日期填得离今天太远(2026-08-21) */
.datew{margin-top:6px;padding:8px 10px;border-radius:8px;font-size:12.5px;line-height:1.7;
  background:var(--amber-bg,#FFF8E8);color:var(--amber-ink);border:1px solid var(--amber-line,#F5D9A0)}
.datew b{color:var(--amber-ink)}
.datew.bad{background:var(--red-bg,#FDECEC);color:var(--red-ink);border-color:var(--red-line)}
.datew.bad b{color:var(--red-ink)}

/* 上架日期对不上的托(2026-08-21) */
.bdrow{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:8px}
.bdd{flex:none;text-align:right;font-size:12px;line-height:1.6;color:var(--sub)}
.bdd b{color:var(--ink);font-variant-numeric:tabular-nums}
.bdd b.ok{color:var(--green)}

/* ══ 大屏 · 十个仓一屏(2026-08-21)══
   ★ 挂墙上没人操作:一屏放得下、不许滚、30 秒自刷。
   ★★ 字号全用 vw —— 19 寸和 32 寸都对(写死 px 的话小屏撑爆、大屏小得像蚂蚁) */
.tvasum{display:flex;gap:1vw;padding:0 2vw 1.2vw}
.tvasum>div{flex:1;background:rgba(255,255,255,.045);border-radius:.9vw;padding:1vw 1.4vw}
.tvasum b{display:block;font-size:3.4vw;font-weight:800;line-height:1.1;
  font-variant-numeric:tabular-nums}
.tvasum b em{font-style:normal;font-size:1.6vw;opacity:.6;margin-left:.2vw}
.tvasum b.amb{color:#FFB020} .tvasum b.ok{color:#3DDC84} .tvasum b.bad{color:#FF5C5C}
.tvasum span{display:block;font-size:1vw;opacity:.5;margin-top:.3vw}

.tvacards{display:grid;grid-template-columns:repeat(5,1fr);gap:.9vw;padding:0 2vw}
@media(max-width:1400px){ .tvacards{grid-template-columns:repeat(4,1fr)} }
@media(max-width:1000px){ .tvacards{grid-template-columns:repeat(3,1fr)} }
.tvac{background:rgba(255,255,255,.045);border-radius:.9vw;padding:.9vw 1.1vw;
  border-left:.25vw solid transparent}
/* 有事的仓左边一条竖杠 —— 一眼看出该不该管,不用读数 */
.tvac.h1{border-left-color:#FFB020}
.tvac.h2{border-left-color:#FF5C5C}
.tvac .hd{display:flex;align-items:baseline;gap:.5vw;margin-bottom:.6vw}
.tvac .hd b{font-size:1.5vw;font-weight:800}
.tvac .hd s{text-decoration:none;font-size:.85vw;opacity:.45}
.tvac .n3{display:flex;gap:0}
.tvac .n3>div{flex:1}
.tvac .n3 i{font-style:normal;display:block;font-size:1.9vw;font-weight:800;line-height:1.15;
  font-variant-numeric:tabular-nums}
.tvac .n3 i.amb{color:#FFB020} .tvac .n3 i.bad{color:#FF5C5C} .tvac .n3 i.ok{color:#3DDC84}
.tvac .n3 span{display:block;font-size:.8vw;opacity:.45;margin-top:.15vw}
.tvac .g{height:.35vw;background:rgba(255,255,255,.1);border-radius:.2vw;
  overflow:hidden;margin-top:.7vw}
.tvac .g em{display:block;height:100%;background:#3DDC84}
.tvac .g em.amb{background:#FFB020} .tvac .g em.bad{background:#FF5C5C}
.tvac .td{margin-top:.7vw;padding-top:.6vw;border-top:1px solid rgba(255,255,255,.08)}
.tvac .td>div{display:flex;align-items:center;gap:.4vw;font-size:.9vw;padding:.15vw 0;opacity:.85}
.tvac .td s{text-decoration:none;width:.4vw;height:.4vw;border-radius:50%;
  background:#FFB020;flex:none}
.tvac .td s.r{background:#FF5C5C}
.tvac .td b{margin-left:auto;font-weight:700;color:#FFB020}
.tvac .ok2{margin-top:.7vw;padding-top:.6vw;border-top:1px solid rgba(255,255,255,.08);
  font-size:.9vw;color:#3DDC84}
.tvac .ok2.dim{color:rgba(255,255,255,.35)}
/* ══ 进出口柜换了一套指标(2026-08-27)—— 卡片的壳一个字不动,只加这几条 ══
   ★ 三个数的标签比别的仓长得多(「今天传的照片」对「托」),
     字号收一号、超了省略,**不许换行把数字挤下去** */
.tvac.tvck .n3 span{font-size:.72vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ★★ 「没有数据」和「数据是 0」是两句话 —— 这一条就是说第二句的地方 */
.tvnote{margin-top:.6vw;padding-top:.5vw;border-top:1px solid rgba(255,255,255,.08);
  font-size:.78vw;line-height:1.6;color:rgba(255,255,255,.6)}
.tvnote b{color:#FFD08A;font-weight:700}
/* 组名后面那个「4 人」、行尾那句小注 */
.tvline .tvmn{font-style:normal;font-size:.85vw;opacity:.55;margin-left:.4vw}
.tvline .tv7{flex:none;font-size:.9vw;opacity:.5;margin-left:.6vw;text-align:right}
.tvbf i.on{background:linear-gradient(90deg,#F59E0B,#FBBF24)}  /* 今天那根柱子挑出来 */
.tvbts{float:right;font-size:.9vw;font-weight:400;opacity:.5}
/* ══ 每组「接了 / 完成 / 未完成」三列(2026-08-28)══ */
.tvth{display:flex;align-items:baseline;gap:.6vw;padding:.3vw 0 .5vw;
  font-size:.85vw;opacity:.45;border-bottom:1px solid rgba(255,255,255,.1)}
.tvth span{flex:1}
.tvth b{width:4.6vw;text-align:right;font-weight:600}
.tv3{display:flex;align-items:baseline;gap:.6vw;padding:.55vw 0;flex:none;
  border-bottom:1px dashed rgba(255,255,255,.07);font-size:1.1vw}
.tv3:last-child{border-bottom:0}
.tv3 .n{flex:1;opacity:.75}
.tv3 b{width:4.6vw;text-align:right;font-size:1.7vw;font-weight:900;
  font-variant-numeric:tabular-nums}
.tv3 b.z{opacity:.3}                    /* 一直是 0 的那列,别抢眼 */
.tv3 b.ok{color:#4ADE80} .tv3 b.amb{color:#FFB020}
.tv3.good .n{opacity:1}
.tv3.dim{opacity:.5}
@media (max-width:1200px){
  .tvth{font-size:11px} .tvth b{width:52px}
  .tv3{font-size:13px} .tv3 b{width:52px;font-size:19px}
}
@media (max-width:1200px){ .tvbts{font-size:12px} }
/* ★★ 一个仓还没跑起来的时候,「为什么全是 0」这句话**占满整行当主角** ——
   缩在角落的小黄框里会被裁掉,而那是这一屏唯一值得看的东西 */
.tvbox.tvsay{flex:1;justify-content:center}
.tvsayb{font-size:1.9vw;line-height:1.9;margin:1vw 0 .8vw}
.tvsayb b{font-weight:900;color:#FFB020}
.tvsays{font-size:1.15vw;line-height:1.9;opacity:.6;max-width:56vw}
.tvsays b{color:#FFD08A;opacity:1}
@media (max-width:1200px){ .tvsayb{font-size:22px} .tvsays{font-size:14px;max-width:none} }
@media (max-width:1200px){
  .tvac.tvck .n3 span{font-size:11px}
  .tvnote{font-size:11px}
  .tvline .tvmn,.tvline .tv7{font-size:12px}
}

/* ══ 数据对比页(2026-08-21)══ */
.mnav{display:flex;align-items:center;gap:10px;margin:10px 0}
.mnav b{font-size:15px;font-weight:700}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;margin-bottom:10px}
.mh{display:flex;align-items:baseline;margin-bottom:4px}
.mh b{font-size:14px;font-weight:700}
.mdrill{margin-left:auto;color:var(--blue);font-size:12px;cursor:pointer}
.mv{display:flex;align-items:baseline;gap:4px}
.mv i{font-style:normal;font-size:30px;font-weight:800;line-height:1.15;
  font-variant-numeric:tabular-nums}
.mv em{font-style:normal;font-size:13px;color:var(--sub)}
.mv s{text-decoration:none;font-size:12px;color:var(--sub);margin-left:6px}
.mcmp{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;margin-top:5px}
/* ★ 涨了是好是坏,看指标本身 —— 收货量涨是好事,超期托涨是坏事。不能一律"涨=红" */
.mcmp .up{color:var(--green);font-weight:700}
.mcmp .dn{color:var(--red);font-weight:700}
.mrun{background:var(--amber-bg,#FFF8E8);color:var(--amber-ink);border-radius:5px;padding:1px 7px;
  font-size:11px}
.mrun.bad{background:var(--red-bg,#FDECEC);color:var(--red-ink)}
.spark{width:100%;height:34px;margin-top:9px;display:block}
.spark path{fill:none;stroke:var(--blue);stroke-width:1.4;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.spark circle{fill:var(--blue)}
/* 区间平均那条虚线 —— 有它才知道最后那个点是高是低 */
.spark .avg{stroke:var(--sub);stroke-width:.8;stroke-dasharray:3 3;opacity:.45;
  vector-effect:non-scaling-stroke}
.sparkx{display:flex;justify-content:space-between;font-size:10.5px;color:var(--sub);
  margin-top:2px}
.drtop{display:flex;align-items:baseline;gap:6px;margin-bottom:10px}
.drtop b{font-size:15px}
.drtop i{font-style:normal;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.drtop em{font-style:normal;font-size:12px;color:var(--sub)}
.drtop .muted{margin-left:auto;font-size:12px}

/* ★★★ 2026-08-21 用户:找货页「**完全就可以动刀改革**」。
   ★★ 这一页的本分只有一件:**搜东西**。可现在搜索框细细一条、
     底下铺了六张卡 —— 主次反了。
   ★ 宽屏上把搜索框做大:它是这一页唯一的正事。手机不动(那儿本来就够大) */
@media(min-width:1000px){
  .searchbox input{padding:20px 18px;font-size:18px}
  .searchbox button{padding:0 34px;font-size:16px}
  .searchbox{margin-bottom:16px}
}

/* ══ 八张卡(2026-08-21)══ 用户:「一张卡用数据说话,点开了是详细」
   ★ 只在电脑上出现 —— 他定的:「员工都是用手机,电脑登陆的是仓管和线长」 */
/* ★★★★ 2026-08-21 用户:「**电脑版换成一排,手机版两排,8个格子不显示**」。
   ★★★ 手机上**整块不出现**(他定的:员工都用手机,要看去电脑看)。
   ★★ 电脑上**一排八个** —— 一屏扫完,不用眼睛折行;
     代价是每张只有 200px 左右,所以卡里的字号、行数都得跟着瘦:
     **去掉那两行废话正好腾出地方**。
   ★ 1400 以下先排两行(四个一行),不然挤成一团。 */
/* ★★★★ 2026-08-21 用户看完一排八个:「**8张卡应该分两排,卡大一点**」
   ★★★ 一排八个每张只有 200px —— **字缩成一团、折线只有 22px 高,是装饰不是信息**。
     改成**两排四张**:卡宽一倍,折线画得开,底下还摆得下三行明细。
   ★★ 「762 托存超 60 天」那条横幅**收掉了** —— 它说的就是第一张卡那件事,
     摆两遍是重复;那些细节直接进第一张卡的明细行。 */
#fs8{display:none}
@media(min-width:1000px){
  #fs8{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
}
@media(min-width:1400px){ #fs8{grid-template-columns:repeat(4,1fr);gap:12px} }
.f8{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;cursor:pointer;border-left:3px solid transparent;
  display:flex;flex-direction:column;min-height:300px}
.f8:hover{border-color:var(--blue)}
/* ★ 有事的左边一条竖杠 —— 不靠换位置突出重点(位置变来变去费眼) */
.f8.hot{border-left-color:var(--amber)}
.f8t{font-size:13px;color:var(--sub);line-height:1.3;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;padding-right:56px}
.f8v{display:flex;align-items:baseline;gap:2px;margin-top:3px}
/* ★★ 一屏只让一个数最大 —— 这张卡就说这一件事 */
.f8v i{font-style:normal;font-size:44px;font-weight:800;line-height:1.05;
  font-variant-numeric:tabular-nums;letter-spacing:-1px}
.f8v em{font-style:normal;font-size:14px;color:var(--sub);margin-left:2px}
.f8s{font-size:12px;color:var(--sub);margin-top:4px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ★ 环比那行:没数时是空的,**不占高度** —— 原来写死 min-height,空着也留一条 */
.f8d{font-size:14px;margin-top:9px;white-space:nowrap;font-weight:700}
.f8d:empty{display:none}
.f8d .up{color:var(--green);font-weight:700}
.f8d .dn{color:var(--red);font-weight:700}
.f8d .muted{font-size:12px;font-weight:400;margin-left:3px}
/* 折线钉在卡片底部 —— 八张卡高矮不一时,线还在同一条水平线上,一眼能横着比 */
.f8g{margin-top:12px;padding-top:0}
.f8g:empty{display:none}
.f8g .spark{height:74px;margin-top:0}
.f8g .sparkx{display:flex;font-size:10px;opacity:.6;margin-top:2px}


/* ★★★★★ 2026-08-21 用户定死:「**我不管上升还是下降,反正红色是需要关注,
   绿色是好事儿**」—— 所以**整张卡的定性色**跟着好坏走,不跟涨跌走。
   ★ 折线也染同一个色:隔着屏幕扫一眼,红的那几张就是今天要管的。 */
.f8.r .spark path{stroke:var(--red)}
.f8.r .spark circle{fill:var(--red)}
.f8.r{border-left-color:var(--red)}
.f8.g .spark path{stroke:var(--green)}
.f8.g .spark circle{fill:var(--green)}
/* ★ 绿色那张**不描左边的杠** —— 杠是留给"要管的",好事不用占这个记号 */
/* 没有对比数据的:中性,别抢眼(留给真该管的) */
.f8 .spark path{stroke:#6E849E}
.f8 .spark circle{fill:#6E849E}
/* 还没有趋势的卡:下半截摆当下明细,八张卡高矮才齐 */
/* ★ 明细行钉在卡底,而且四张卡的分隔线在同一水平上 —— 横着扫一眼很整齐 */
.f8rows{margin-top:auto;padding-top:11px;border-top:1px solid var(--line2)}
.f8rw{display:flex;align-items:baseline;font-size:12px;color:var(--sub);
  padding:4px 0;line-height:1.35}
.f8rw b{margin-left:auto;font-size:13px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}

/* ══ 夜间领料分析(2026-08-21)══ */
.nsum{display:flex;gap:10px;margin:10px 0}
.nsum>div{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px}
.nsum i{font-style:normal;display:block;font-size:26px;font-weight:800;line-height:1.15;
  font-variant-numeric:tabular-nums}
.nsum.bad i,.nsum>div.bad i{color:var(--red)}
.nsum span{display:block;font-size:12px;color:var(--sub);margin-top:2px}
.nsum s{text-decoration:none;display:block;font-size:10.5px;color:var(--sub);margin-top:1px}
.nrow{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:6px}
/* ★ 「白天领过又来」的那几笔单独标出来 —— 这一页的重点就是它们 */
.nrow.again{border-color:var(--red);background:var(--red-bg,#FDECEC)}
.nrow.again b,.nrow.again .muted{color:var(--red-ink)}
.ntag{flex:none;font-size:11px;background:var(--red);color:var(--onfill);border-radius:5px;padding:2px 7px}
.hrs{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 13px}
.hr{display:flex;align-items:center;gap:9px;padding:3px 0}
.hh{font-size:11.5px;color:var(--sub);width:44px;flex:none}
.hb{flex:1;height:9px;background:var(--card2);border-radius:5px;overflow:hidden}
.hb i{display:block;height:100%;background:var(--blue);border-radius:5px}
.hn{font-size:12px;font-weight:700;width:34px;text-align:right;flex:none}

/* ══ 大屏:顶上换成「该管的事」(2026-08-21)══
   用户:「大屏显示的逻辑应该是提醒仓管级以上人员的提醒事项为主」
   ★ 家底(在库托/库位/收发)缩成底下一行小字 —— 那些不需要任何人做事 */
.tvtodo{margin:0 2vw 1vw;padding:1.2vw 2vw;border-radius:1vw;display:flex;
  align-items:center;gap:2.5vw;background:rgba(255,255,255,.05);
  border-left:.4vw solid #3DDC84}
.tvtodo.a{border-left-color:#FFB020;background:rgba(255,176,32,.09)}
.tvtodo.r{border-left-color:#FF5C5C;background:rgba(255,92,92,.10)}
.tvtodo .big{flex:none;display:flex;align-items:baseline;gap:.6vw}
.tvtodo .big b{font-size:5vw;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.tvtodo.a .big b{color:#FFB020} .tvtodo.r .big b{color:#FF5C5C}
.tvtodo.ok .big b{color:#3DDC84}
.tvtodo .big span{font-size:1.3vw;opacity:.6}
.tvtl{display:flex;flex-wrap:wrap;gap:.7vw}
.tvti{background:rgba(255,255,255,.07);border-radius:.6vw;padding:.5vw 1vw;font-size:1.15vw}
.tvti.r{background:rgba(255,92,92,.18)}
.tvti b{margin-left:.5vw;opacity:.6;font-weight:500}
.okmsg{font-size:1.4vw;color:#3DDC84}
/* 家底那一行:小字,不抢眼 */
.tvbase{display:flex;gap:2.5vw;padding:0 2vw 1vw;font-size:1.1vw;opacity:.55}
.tvbase b{font-weight:700;opacity:1}

/* ══ 厂区总览(2026-08-21)══ 四栋厂房按真实尺寸 · 仓储六片高亮 */
.plant{width:100%;max-width:1100px;display:block;margin:12px auto 4px;
  background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:6px}
.phall{fill:var(--card);stroke:var(--line);stroke-width:.6}
.pno{font-size:6px;font-weight:800;fill:var(--ink)}
.pdim{font-size:3.6px;fill:var(--sub)}
/* 非仓储的部分:照实写是什么,灰着不抢眼 */
.poth{fill:rgba(127,140,160,.07);stroke:rgba(127,140,160,.18);stroke-width:.3}
.pothT{font-size:3.8px;fill:var(--sub)}
/* 仓储六片 */
.parea rect{fill:rgba(51,214,255,.10);stroke:var(--blue);stroke-width:.7}
.parea .pnm{font-size:5.2px;font-weight:800;fill:var(--ink)}
.parea .psub{font-size:3.6px;fill:var(--sub)}
.parea .plive{font-size:3.4px;fill:var(--green)}
.parea[data-plw]{cursor:pointer}
.parea[data-plw]:hover rect{fill:rgba(51,214,255,.22)}
/* 在发烫的:琥珀 / 红 —— 跟别处一套颜色 */
.parea.a rect{fill:rgba(255,176,32,.13);stroke:var(--amber)}
.parea.r rect{fill:rgba(255,92,92,.14);stroke:var(--red)}
/* 还没开的:灰楼,看得见进不去 */
.parea.off rect{fill:rgba(127,140,160,.05);stroke:rgba(127,140,160,.28);
  stroke-dasharray:2 1.4}
.parea.off .pnm{fill:var(--sub)} .parea.off .psub{fill:var(--sub);opacity:.7}
.parea.nocan rect{opacity:.5}
/* ══ 格子里直接画分区(2026-08-22)══
   用户:「厂区图现在不就是一个格子吗?用图二替换图一」
   ★ 格子本身退成底板 —— 里头那些小块才是主角,底板再高亮就糊成一团 */
.parea.plan>rect{fill:rgba(127,140,160,.05);stroke:rgba(127,140,160,.30);stroke-width:.5}
.parea.plan[data-plplan]{cursor:pointer}
.parea.plan[data-plplan]:hover>rect{fill:rgba(51,214,255,.10);stroke:var(--blue)}
.parea .pnm2{font-size:4.4px;font-weight:800;fill:var(--ink)}
.parea .psub2{font-size:3.4px;fill:var(--sub)}
.mp{stroke-width:.25}
.mp.pz{fill:rgba(51,214,255,.24);stroke:var(--blue)}
.mp.pai,.mp.pwk{fill:rgba(127,140,160,.16);stroke:rgba(127,140,160,.35)}
.mp.pst,.mp.plf{fill:rgba(255,92,92,.22);stroke:var(--red)}
/* ══ 平面图大图 ══ */
.planwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.planv{width:100%;min-width:720px;display:block;margin:10px auto 4px;
  background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:6px}
.pnh{font-size:11px;fill:var(--sub)}
.pnt{font-size:11px;font-weight:800;fill:var(--ink)}
.pnv{font-size:8px;fill:var(--sub);opacity:.75}
.pg.pz rect{fill:rgba(51,214,255,.12);stroke:var(--blue);stroke-width:.8}
.pg.pz[data-pnz]{cursor:pointer}
.pg.pz[data-pnz]:hover rect{fill:rgba(51,214,255,.26)}
.pg.pai rect,.pg.pwk rect{fill:rgba(127,140,160,.10);
  stroke:rgba(127,140,160,.32);stroke-width:.6}
.pg.pst rect,.pg.plf rect{fill:rgba(255,92,92,.13);stroke:var(--red);stroke-width:.8}
/* 挂在楼外的:虚线框 —— 一眼看出它不占楼面 */
.pg.pout rect{stroke-dasharray:4 3;fill:rgba(255,176,32,.10);stroke:var(--amber)}
.pcl{fill:var(--sub);opacity:.55}
.plist{margin-top:4px}
.pli{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:7px}
.pli.off{opacity:.55}
.ptag{flex:none;font-size:11px;background:var(--card2);color:var(--sub);
  border-radius:5px;padding:2px 8px}
.ptag.live{background:var(--green-bg,#ECFDF3);color:var(--green-ink)}

/* ══ 待领卡:以单为主(2026-08-21)══
   用户:「给仓管看的单子回笼型态,应该是这一张领料单的完成进度」
        「让普通员工照做,谁都能做,不用脑子也能做」 */
.rqs{margin-top:10px}
.rqh{padding:8px 12px;border-radius:7px;font-size:13px;font-weight:700;margin-bottom:7px}
.rqh.ok{background:var(--green-bg,#ECFDF3);color:var(--green-ink)}
.rqh.bad{background:var(--amber-bg,#FFF8E8);color:var(--amber-ink)}
.rq{border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin-bottom:6px;
  background:var(--card)}
.rq.bad{border-color:var(--amber-line,#F5D9A0)}
.rqt{display:flex;align-items:center;gap:7px;font-size:13px}
.rqt i{font-style:normal;font-weight:800;flex:none}
.rq.ok .rqt i{color:var(--green)} .rq.bad .rqt i{color:var(--amber-ink)}
.rqt b{font-weight:700}
.rqt .muted{font-size:11.5px}
.rqt s{text-decoration:none;margin-left:auto;font-size:12px;font-weight:700;flex:none}
.rq.ok .rqt s{color:var(--green)} .rq.bad .rqt s{color:var(--amber-ink)}
/* 没齐的那张单,底下列出差哪几样 —— 照着去补 */
/* ★★★★★ 2026-08-28 用户实拍:**整个页面往左偏了,右边空出一大片** ——
   一行「要 8000 · 备了 0」的缺料明细横着冲出屏幕,把整页撑宽了。
   ★★★★ 经典的 flex 溢出,两个原因叠一起:
     ① 料号 `em` 和数量 `b` 都是 `flex:none`(不可压缩),
        料号 CT461809B-PC0618 这么长,两个硬块加起来就超过屏宽;
     ② **flex 子项默认 `min-width:auto`** —— 它不会缩到内容宽度以下,
        于是撑破父容器,整页跟着能横向滚。
   ★★★ 修法三件套:**容器允许换行 + 子项 min-width:0 + 料名太长省略号**。
     ★★ 料名用省略号不用换行:这一行是「差哪几样」,**扫一眼看的是数字**,
       名字看个开头就够;真要全名点开明细。 */
.rqi{margin-top:7px;padding-top:6px;border-top:1px solid var(--line2);min-width:0}
.rqi>div{display:flex;align-items:center;gap:6px;font-size:12px;padding:3px 0;
  flex-wrap:wrap;min-width:0}
.rqi>div.done{opacity:.5}
.rqi i{font-style:normal;flex:none;width:11px}
.rqi>div.done i{color:var(--green)}
.rqi span{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rqi em{font-style:normal;font-size:10.5px;background:var(--blue-bg,#EEF4FF);
  color:var(--blue);border-radius:4px;padding:1px 6px;flex:0 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rqi b{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.rqi>div:not(.done) b{color:var(--amber-ink,#B45309)}
.rqsh{margin-top:6px;font-size:11px;color:var(--blue)}
.rqmore{font-size:12px;color:var(--blue);padding:4px 2px 8px;cursor:pointer}
/* ══ 共用一托:新放行条件「共用的先发」══ */
.shbox{margin-top:10px;padding:11px 13px;border-radius:9px;
  background:var(--blue-bg,#EEF4FF);border:1px solid var(--blue-line,#BBD3FF)}
.sht{font-size:13.5px;font-weight:700;color:var(--blue);margin-bottom:7px}
.shl{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:3px 0}
.shl .code{font-weight:700;color:var(--blue)}
.shl .pal{font-size:11px;color:var(--sub)}
.shl b{margin-left:auto;font-variant-numeric:tabular-nums}
.shw{font-size:11.5px;color:var(--sub);margin-top:5px}
.shn{font-size:11.5px;color:var(--sub);margin-top:6px;line-height:1.6}

/* ══ 开一个新仓:六步照着走(2026-08-21)══
   用户:「让普通员工照做,谁都能做,不用脑子也能做」 */
.wsh{display:flex;align-items:baseline;gap:9px;margin-bottom:10px}
.wsh b{font-size:17px}
.wsh span{font-size:12.5px;color:var(--amber-ink,#B45309)}
.wsh span.ok{color:var(--green)}
.wst{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;
  border:1px solid var(--line);border-radius:10px;margin-bottom:7px;background:var(--card)}
.wst i{font-style:normal;flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--card2);color:var(--sub);font-size:12.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
/* 做完的:打勾变绿、整行灰下去 —— 一眼看出走到哪了 */
.wst.ok{opacity:.6}
.wst.ok i{background:var(--green-bg,#ECFDF3);color:var(--green-ink)}
/* 该做的那一步:描出来 —— 不用想「下一步干啥」 */
.wst.now{border-color:var(--blue);background:var(--blue-bg,#EEF4FF)}
.wst.now i{background:var(--blue);color:var(--onfill)}
.wst b{font-size:14px}
.wst .muted{font-size:11.5px;margin-left:7px}
.wsw{font-size:11.5px;color:var(--sub);margin-top:4px;line-height:1.6}

/* ══ 盘点派排(2026-08-21)══ 用户:「我直接分配员工哪一排货架」 */
/* 派给我的排:蓝框 —— 一眼看出哪几排是自己的 */
.tkrow.mine{border-color:var(--blue);border-width:2px}
.tkrow.other{opacity:.7}
.tkrow .who{display:block;font-size:9.5px;color:var(--sub);line-height:1.2;margin-top:1px}
/* 派排模式下选中的 */
.tkrow.sel{background:var(--blue);color:var(--onfill);border-color:var(--blue)}
.tkrow.sel .who{color:rgba(255,255,255,.75)}
/* 谁盘了几排 */
.tkmen{margin-bottom:12px}
.tkm{display:flex;align-items:center;gap:9px;font-size:12.5px;padding:5px 0}
.tkm b{flex:none;min-width:96px}
.tkm .muted{flex:none;font-size:11.5px}
.tkbar{flex:1;height:7px;background:var(--card2);border-radius:4px;overflow:hidden}
.tkbar i{display:block;height:100%;background:var(--green)}
.tkm s{text-decoration:none;flex:none;font-size:11.5px;font-weight:700;width:34px;text-align:right}

/* 「看明细 ›」——每张卡右上角(2026-08-21 用户:「这个卡都可以查询明细才对」) */
.f8t{position:relative}
.f8go{position:absolute;right:0;top:0;text-decoration:none;color:var(--blue);
  font-size:12px;font-weight:400}

/* 折线底下垫一层淡的同色面积 —— 趋势更"重"(2026-08-21) */
.spark .ar{fill:currentColor;opacity:.14;stroke:none}
.f8 .spark{color:var(--muted)}
.f8.r .spark{color:var(--red)} .f8.g .spark{color:var(--green)}
.spark .dot{fill:var(--card);stroke:currentColor;stroke-width:.8;
  vector-effect:non-scaling-stroke}
.f8.r .spark .dot,.f8.g .spark .dot{stroke:currentColor}

/* 电脑上收掉那条「N 托存超 60 天」—— 八张卡的第一张说的就是它,摆两遍是重复。
   ★ 手机上留着:那儿不显示八张卡,这条是唯一入口 */
@media(min-width:1000px){ .fs_hidepc{display:none} }

/* 挑人时挂职务(2026-08-21 用户:「我觉得应该挂仓别和职务」) */
.chips.wrap button .jb{font-style:normal;display:block;font-size:10.5px;
  color:var(--sub);line-height:1.3;margin-top:1px}

/* ══ 「我的任务」里的盘点卡(2026-08-21)══
   用户:「玉香要找到盘点得入口进来才能看得见,这个我觉得是不对得,我觉得应该是我的任务」 */
.tkcard{background:var(--blue-bg,#EEF4FF);border:2px solid var(--blue);
  border-radius:12px;padding:13px 15px;margin-bottom:12px;cursor:pointer}
.tkh{display:flex;align-items:baseline;gap:8px}
.tkh b{font-size:15px;color:var(--blue)}
.tkh s{text-decoration:none;margin-left:auto;font-size:12px;color:var(--sub)}
.tkbar2{height:7px;background:rgba(127,140,160,.2);border-radius:4px;overflow:hidden;margin-top:9px}
.tkbar2 i{display:block;height:100%;background:var(--blue)}
.tkr{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.tkr span{font-size:11.5px;background:var(--card);border:1px solid var(--line);
  border-radius:5px;padding:2px 8px;color:var(--sub)}
/* 下一排该盘哪个 —— 描出来,不用想 */
.tkr span.now{background:var(--blue);color:var(--onfill);border-color:var(--blue);font-weight:700}
.tkgo{margin-top:9px;font-size:13px;font-weight:700;color:var(--blue)}

/* ══ 药水区 · 低库存预警(2026-08-22)══
   用户:「因为碰见傻逼了,不会动脑子」—— 每一行把凭据全摆出来 */
.ysr{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:13px 15px;margin-bottom:10px}
.ysr.red{border-color:var(--red);border-width:2px;background:var(--red-bg,#221416)}
.ysr.amber{border-color:var(--amber);border-width:2px;background:var(--amber-bg2,#221B0E)}
.ysh{display:flex;align-items:center;gap:9px}
.ysh b{font-size:16px}
.ysh .num{font-size:11.5px}
.ystag{font-style:normal;font-size:11px;font-weight:700;border-radius:4px;
  padding:2px 8px;margin-left:8px;color:var(--onfill);background:var(--green)}
.ysr.red .ystag{background:var(--red);color:var(--onfill)}
.ysr.amber .ystag{background:var(--amber);color:var(--onfill)}
/* 四个数一排 */
.ysn{display:flex;flex-wrap:wrap;gap:18px;margin-top:10px}
.ysn>div{display:flex;flex-direction:column;gap:2px}
.ysn .muted{font-size:11px}
.ysn b{font-size:15px;font-variant-numeric:tabular-nums}
/* 进度条:满格=该下单线,红线在条上标一道 */
.ysbar{position:relative;height:9px;background:var(--card2);border-radius:5px;
  overflow:hidden;margin-top:11px}
.ysbar i{display:block;height:100%;background:var(--green);border-radius:5px}
.ysr.red .ysbar i{background:var(--red)} .ysr.amber .ysbar i{background:var(--amber)}
.ysbar s{position:absolute;top:-2px;width:2px;height:13px;background:var(--red);
  text-decoration:none}
.ysf{display:flex;align-items:center;gap:10px;margin-top:9px;font-size:11.5px;color:var(--sub)}
.ysf b{color:var(--ink);font-weight:700}
.ysf em{font-style:normal;margin-left:auto;font-size:12.5px;font-weight:700;
  padding:3px 10px;border-radius:5px;background:var(--card2)}
.ysr.red .ysf em{background:var(--red);color:var(--onfill)}
.ysr.amber .ysf em{background:var(--amber);color:var(--onfill)}

/* ══ 人员卡三行(2026-08-22)══
   用户:「名字第一行,第二行部门和工号,第三行级别」
   「我一般都是根据工号和级别找人;名字是最没用的,但必须得显示(关于尊重的话题)」 */
.scn2{display:flex;align-items:baseline;gap:7px;font-size:12px;color:var(--sub);margin-top:2px}
.scorg{font-weight:700;color:var(--blue);font-size:11.5px;
  background:var(--blue-bg,#EEF4FF);border-radius:4px;padding:1px 7px}
.scn2 .num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.scn3{font-size:11.5px;color:var(--sub);margin-top:3px;display:flex;gap:7px;align-items:baseline}
.scn3 .muted{font-size:10.5px;opacity:.7}

/* 药水区:三个按钮 + 真实日均参考(2026-08-22 改版) */
.ysbtn{display:flex;gap:8px;margin-top:11px}
.ysbtn .btn{width:auto;flex:1;padding:8px 0;font-size:13.5px}
.ysreal{font-size:11px;color:var(--blue);margin-left:9px}
/* 进出流水 */
.yslg{border-left:3px solid var(--line);padding:9px 0 9px 11px;margin-bottom:8px}
.yslg.grn{border-color:var(--green)} .yslg.blu{border-color:var(--blue)}
.yslg.amb{border-color:var(--amber)}
.yslg b{font-size:13.5px}
.yslg .num{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.yslg.grn .num{color:var(--green)} .yslg.blu .num{color:var(--blue)}
.yslg .muted{font-size:11px;line-height:1.5}

/* 收货页第三格「散装辅料」(2026-08-22) */
.iysr{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin-bottom:10px}
.iysr.red{border-color:var(--red);border-width:2px}
.iysr.amber{border-color:var(--amber);border-width:2px}
.iysr b{font-size:15.5px}
.iysq{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.iysq i{font-style:normal;font-size:12px;color:var(--sub);font-weight:400}
.iysb{display:flex;gap:8px;margin-top:10px}
.iysb .btn{width:auto;flex:1;padding:8px 0;font-size:13.5px}

/* 药水的五种状态(2026-08-22):够用/该下单/立即采购/还没录/不用了 */
.ysr.off{opacity:.5;border-style:dashed}
.ysr.off .ystag{background:var(--sub)}
.ysr.new .ystag{background:var(--card2);color:var(--sub)}
.ysoff{font-size:11.5px;color:var(--sub);margin-top:7px;padding-top:7px;
  border-top:1px dashed var(--line)}

/* 备份与恢复(2026-08-23)—— 顶上那条只说三件事:U 盘在不在、最近什么时候、验过没有 */
.bkbar{padding:9px 12px;border-radius:8px;font-size:14px;line-height:1.6}
.bkbar.ok{background:rgba(45,160,110,.14);color:var(--green)}
.bkbar.warn{background:rgba(210,150,30,.15);color:var(--amber-ink)}
.bkbar.bad{background:rgba(200,60,60,.15);color:var(--red)}
.bkrow{display:flex;align-items:center;gap:8px;padding:11px 12px;border-bottom:1px solid var(--line)}
.bkrow:last-child{border-bottom:none}
.bktag{font-size:11px;padding:2px 7px;border-radius:5px;margin-left:6px;vertical-align:1px}
.bktag.d{background:rgba(55,138,221,.16);color:var(--blue)}
.bktag.s{background:rgba(140,140,140,.16);color:var(--sub)}
.bktag.h{background:rgba(200,60,60,.18);color:var(--red)}
.lk{color:var(--blue);cursor:pointer;text-decoration:underline}

/* ★★★ 翻页按钮(2026-08-23)—— 跟「返回」区分开。
   ★★ 用户报「返回键有大有小」,查下来漏网的五处里有两类:**真返回**和**翻页**。
     8-21 那次统一只收了返回,翻页那几个各写各的 padding(5/6/7px 三种)。
   ★ 这两类**不该长一样**:返回是"退出这一页",翻页是"还在这一页、换一份数据"。
     所以给翻页单独一个类,尺寸自己统一,但跟返回明显不同。 */
.pgbtn{width:auto;padding:6px 13px;min-width:74px}
.pgbtn:disabled{opacity:.4}

/* 跨仓交接(2026-08-23)—— 两边各一个状态位,一眼看出卡在谁那儿 */
.horow{display:flex;align-items:center;gap:8px;padding:11px 12px;border-bottom:1px solid var(--line)}
.horow:last-child{border-bottom:none}
.hostate{display:flex;align-items:center;gap:5px;margin:4px 0;flex-wrap:wrap}
.hostate .hn{font-size:13px;font-weight:600}
.hostate i{font-style:normal;color:var(--sub);margin:0 2px}
.hs{font-size:11px;padding:2px 7px;border-radius:5px}
.hs.out{background:rgba(55,138,221,.16);color:var(--blue)}
.hs.wait{background:rgba(210,150,30,.18);color:var(--amber-ink)}

/* 全部仓连屏(2026-08-23)—— 每张卡只回答一句话:这个仓要不要我过去 */
/* ★ 2026-09-26:卡片下面加了一排「门」,卡片得比原来宽一点才放得下,
   150px 挤成两三个字就换行了——改成 230px,宽屏一行 3~4 个、窄屏自动收成
   1~2 个,不锁死「一行几个」(她自己认的:分辨率不一样,写死数字要么挤要么空) */
.wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:9px}
/* ★★ 2026-08-24:连屏这块原来也叫 `.wcard`,**跟「各仓卡片」那个重名** ——
   两边的圆角、边框、内边距全在打架。改成 .wcd。
   ★ 今天第四次撞重名了(pli / bkbar / whName / 这个)——
     **写一个新名字之前,先搜一下有没有人用过**。 */
.wcd{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:11px 12px;cursor:pointer;text-align:left}
.wcd.h1{border-color:var(--amber)} .wcd.h2{border-color:var(--red);border-width:2px}
.wcd.cur{box-shadow:0 0 0 2px var(--blue) inset}
.wcd.dim{opacity:.45}
.wtop{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.wtop b{font-size:15px}
.wcode{font-size:11px;color:var(--sub)}
.wown{font-size:11px;color:var(--sub);margin-left:auto;background:var(--blue-bg);
  padding:1px 7px;border-radius:5px}
.wtd{margin-top:7px;font-size:12px;line-height:1.9}
.wtd div{display:flex;align-items:center;gap:5px}
.wtd s{width:6px;height:6px;border-radius:50%;background:var(--amber);
  flex:0 0 auto;text-decoration:none}
.wtd s.r{background:var(--red)}
.wtd b{margin-left:auto;font-variant-numeric:tabular-nums}
/* 长期挂着(now:0):不展开、但不藏——压成一行小标签,红黄照旧上色 */
.wlong{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px}
.wlong span{font-size:11px;color:var(--amber);background:rgba(220,150,40,.12);
  border-radius:6px;padding:2px 6px;font-variant-numeric:tabular-nums}
.wlong span.r{color:var(--red);background:rgba(200,60,60,.12)}
.wlong span b{font-weight:600;margin-left:3px}
.wok{margin-top:7px;font-size:12px;color:var(--sub)}
.wbase{margin-top:8px;padding-top:7px;border-top:1px solid var(--line);
  font-size:11px;color:var(--sub)}

/* ★ 2026-09-26「门」—— Di 的比喻:「全部仓是我的办公室,通往各仓的门都有」。
   门跟卡片本身(点标题进首页)是两种点法,所以门单独一排、单独一套样式,
   不借用卡片的点击态(卡片 cursor:pointer 整块能点,门要能"看出来是按钮")。
   .doors 那层 pointer-events 不用特地关——门本身走 stopPropagation,
   点门不会连带把卡片的"进首页"也触发一遍 */
.doors{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;
  padding-top:8px;border-top:1px dashed var(--line2);cursor:default}
.doors a{font-size:11px;color:var(--ink);background:var(--card2);
  border:1px solid var(--line2);border-radius:7px;padding:4px 8px;
  text-decoration:none;cursor:pointer}
.doors a:hover{border-color:var(--blue);color:var(--blue-ink)}
.doors a.more{color:var(--sub)}

/* 仓别负责人一行(2026-08-23)—— 点着选,不打字 */
.wfown{display:flex;align-items:flex-start;gap:8px;margin-bottom:9px;flex-wrap:wrap}
.wfown .k{font-size:13px;color:var(--sub);padding-top:5px;flex:0 0 auto}
.wfown .none{font-size:12px;color:var(--red);padding-top:5px;flex:0 0 auto}
.wfown .chips button.clr{opacity:.6}
.wown.no{background:rgba(200,60,60,.16);color:var(--red)}

/* 大屏:这个仓的班子 + 退出(2026-08-23) */
.tvcrew{flex:1;display:flex;flex-direction:column;gap:.28vw;padding:0 1.4vw;min-width:0}
.tvcl{display:flex;align-items:baseline;gap:.5vw;flex-wrap:wrap;font-size:1.05vw;line-height:1.5}
.tvcl .t{color:var(--sub);font-size:.92vw;flex:0 0 auto}
.tvcl .num{font-variant-numeric:tabular-nums;letter-spacing:.02vw}
.tvcl .n{opacity:.9}
.tvcl .one{display:inline-flex;align-items:baseline;gap:.28vw;margin-right:.7vw}
.tvcl .one i{font-style:normal;color:var(--sub);font-size:.85vw}
.tvout{position:absolute;left:1.2vw;bottom:1.2vw;z-index:9;
  background:rgba(255,255,255,.08);color:var(--ink);border:1px solid var(--line2);
  border-radius:8px;padding:.5vw 1vw;font-size:.95vw;cursor:pointer;opacity:.55}
.tvout:hover{opacity:1}
.tvwrap{position:relative}
.lk.sm{font-size:12px}

/* 各仓阈值(2026-08-24) */
.wcrow{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.wcrow:last-child{border-bottom:none}

/* 长得像的料号(2026-08-24)—— 不同的那几位标出来,人眼分不出的让界面替他分 */
.larow{display:flex;align-items:center;gap:10px;padding:9px 2px;
  border-bottom:1px solid var(--line)}
.larow:last-child{border-bottom:none}


/* ══════════════════════════════════════════════════════════════
   进口柜在途物料 —— 卡片式(2026-08-26 用户定:「做成这种卡片式,
   一个物料一个卡片,也是一排四个,两排八个,放不下的下面放下一页」)
   ★ 宽屏一排四个;窄了自动降到两列、一列 —— 手机上四列谁也看不清
   ══════════════════════════════════════════════════════════════ */
.seagrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
@media(max-width:1100px){.seagrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.seagrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.seagrid{grid-template-columns:1fr}}
.seac{background:var(--card,#151d28);border:1px solid var(--line,#26303d);border-radius:12px;
  padding:12px 13px;cursor:pointer;position:relative;transition:border-color .15s}
.seac:hover{border-color:#4a6180}
.seac.late{border-color:var(--amber,#d99a2b)}
.seac .cd{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;font-weight:700;
  color:var(--line);word-break:break-all;line-height:1.35}
.seac .nm{color:var(--muted,#8b98a8);font-size:12px;margin-top:3px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.seac .big{font-size:26px;font-weight:800;margin-top:8px;line-height:1.1}
.seac .big i{font-size:12px;font-style:normal;font-weight:600;color:var(--muted,#8b98a8);margin-left:3px}
.seac .ft{display:flex;justify-content:space-between;align-items:baseline;margin-top:7px;
  font-size:12px;color:var(--muted,#8b98a8);gap:6px}
.seac .ft b{color:var(--blue-line);font-weight:600}
.seac .lt{color:var(--amber,#d99a2b);font-weight:700}
.seac .ctns{margin-top:9px;border-top:1px dashed var(--line,#26303d);padding-top:8px;
  font-size:11.5px;line-height:1.85;color:var(--muted,#8b98a8);
  font-family:ui-monospace,Menlo,Consolas,monospace}
.seapg{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px;font-size:13px}
.seapg button{background:var(--card,#151d28);color:var(--blue-line);border:1px solid var(--line,#26303d);
  border-radius:8px;padding:7px 14px;font-size:13px;cursor:pointer;width:auto}
.seapg button:disabled{opacity:.35;cursor:default}
/* 长得像的料号:能点了 */
.larow{cursor:pointer}
.larow:hover{background:rgba(255,255,255,.04)}


/* ══════════════════════════════════════════════════════════════
   申请借用:六块地做成卡片(2026-08-27 用户定「能点就别打字」)
   ★ 卡上直接写「现在几托 / 被谁借着」—— 点之前就看得见
   ══════════════════════════════════════════════════════════════ */
.lnspots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:420px){.lnspots{grid-template-columns:repeat(2,1fr)}}
.lnspot{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;
  background:var(--card,#151d28);border:1.5px solid var(--line,#26303d);border-radius:10px;
  padding:10px 12px;cursor:pointer;text-align:left;font-size:13px;color:var(--blue-line)}
.lnspot b{font-size:15px;font-family:ui-monospace,Menlo,Consolas,monospace}
.lnspot span{font-size:11.5px;color:var(--muted,#8b98a8)}
.lnspot:hover{border-color:#4a6180}
.lnspot.on{border-color:var(--blu,#4a90d9);background:rgba(74,144,217,.14)}
.lnspot.on b{color:var(--blu,#4a90d9)}
.lnspot.busy{opacity:.45;cursor:not-allowed}
.lnspot.busy:hover{border-color:var(--line,#26303d)}


/* ══════════════════════════════════════════════════════════════
   谁在这个仓干什么:人员卡片(2026-08-27 用户定的形状)
   ★ 不点开就能看出这个仓怎么分工的 —— 工号/级别/管哪几个区全在卡上
   ══════════════════════════════════════════════════════════════ */
.swgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:8px}
@media(max-width:1150px){.swgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.swgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.swgrid{grid-template-columns:1fr}}
.swcard{background:var(--card,#151d28);border:1.5px solid var(--line,#26303d);border-radius:11px;
  padding:11px 12px;cursor:pointer;transition:border-color .15s}
.swcard:hover{border-color:#4a6180}
.swcard.on{border-color:var(--blu,#4a90d9);background:rgba(74,144,217,.12)}
.swtop{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.swtop b{font-size:15px;color:var(--line)}
.swtop .num{font-size:11.5px;color:var(--muted,#8b98a8);
  font-family:ui-monospace,Menlo,Consolas,monospace}
.swlv{font-size:12px;color:var(--muted,#8b98a8);margin-top:2px}
.swzn{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.swzn i{font-style:normal;font-size:11px;background:rgba(74,144,217,.16);
  color:var(--blue-line);border-radius:5px;padding:2px 7px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.swtr{font-size:11.5px;color:var(--muted,#8b98a8);margin-top:5px}
/* ★ 2026-08-27 卡上的「能干什么」和「在不在派工池」——
   权限用灰底(是事实,不是警告),派工池那一条才上颜色:
   **不参与**要红,因为那正是「他总能接到派单」那个毛病的现场 */
.swpm{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.swpm em{font-style:normal;font-size:10.5px;background:rgba(139,152,168,.15);
  color:var(--dim);border-radius:4px;padding:2px 6px}
.swpm em.none{background:transparent;color:var(--muted,#8b98a8);padding:2px 0}
.swpm em.cst{background:rgba(186,120,220,.18);color:var(--plum)}
.swpk{margin-top:6px;font-size:11px;border-radius:5px;padding:3px 8px;display:inline-block}
.swpk.on{background:rgba(74,190,130,.16);color:#7fd6a6}
.swpk.slow{background:rgba(220,170,70,.16);color:#e6c078}
.swpk.off{background:rgba(224,90,90,.18);color:#f0a0a0}

/* ══════════════════════════════════════════════════════════════════════
   ★ 2026-08-27「我的任务」按车间分类的标签条(用户要的「选择查看」)。
   ★★ 横着滚,不换行 —— 手机上换行会把下面的活挤下去半屏;
     六个车间横滑一下就到头,比多占一行划算。
   ★★★★★ 第一版我把颜色**写死成深色主题的值**(#cfe6fb 这种),
     实测在浅色主题下**选中那一格的字直接看不见了** —— 浅底浅字。
     ★★★ 这个系统有两套主题,颜色一律走 `var(--...)`,
       照抄现成的 `.chips button.on`(背景 --blue、字 --card)——
       **两套主题里都是深底浅字或浅底深字,自己配一套必然翻车。**
     ★★ 通则:**别自己配色,用系统已经配好的那一套**;
       写死的颜色只在某一套主题下对,而你只会在其中一套里测。
   ══════════════════════════════════════════════════════════════════════ */
.ohdept{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.ohdept::-webkit-scrollbar{display:none}
.ohdept button{flex:0 0 auto;display:flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:8px 14px;
  font-size:14px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.ohdept button i{font-style:normal;font-size:11.5px;font-weight:700;
  background:var(--bg);color:var(--sub);border-radius:999px;
  padding:1px 7px;min-width:20px;text-align:center}
.ohdept button.on{background:var(--blue);color:var(--card);border-color:var(--blue)}
.ohdept button.on i{background:rgba(255,255,255,.28);color:var(--card)}
.ohdept button.none{color:var(--sub)}
/* ★ 筛着的时候一直提醒他"别的没消失" —— 筛着筛着忘了,会以为活凭空少了 */
.ohdtip{font-size:12.5px;color:var(--sub);line-height:1.7;
  background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:8px 11px;margin-bottom:11px}
.ohdtip b{color:var(--ink)}
.ohdtip .tap2{margin-left:6px;color:var(--blue);cursor:pointer;font-weight:600}

/* ══════════════════════════════════════════════════════════════════════
   ★ 2026-08-27「按规矩做了没有」体检页 —— 单仓的。
   ★★ 颜色一律走主题变量:昨天写死深色值,浅色主题下字直接看不见。 */
.rkcard{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:11px;padding:13px 15px;margin-bottom:12px}
.rkcard.bad{border-left-color:var(--red)}
.rkcard.warn{border-left-color:var(--amber)}
.rkcard.ok{border-left-color:var(--green,#3aa06a)}
.rkhd{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rkhd b{font-size:15.5px}
.rkn{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.rkcard.bad .rkn{color:var(--red)}
.rkcard.warn .rkn{color:var(--amber-ink)}
.rkcard.ok .rkn{color:var(--green,#3aa06a)}
.rkn i{font-style:normal;font-size:13px;font-weight:600;color:var(--sub)}
.rkwhy{font-size:12.5px;color:var(--sub);line-height:1.8;margin-top:7px}
.rkwhy b{color:var(--ink)}
.rkrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  font-size:12.5px;padding:7px 0;border-top:1px dashed var(--line)}
.rkrow:first-of-type{margin-top:9px}
.rkw{font-weight:700;color:var(--ink);min-width:6em}
.rkt{color:var(--sub);font-variant-numeric:tabular-nums;font-size:11.5px}
.rkl{color:var(--sub);flex:1 1 12em}
.rkl b{color:var(--ink)}
.rkl b.r{color:var(--red)}
.rkl em{font-style:normal;color:var(--muted,#8b98a8);font-size:11px;margin-left:3px}
.rkg{font-weight:700;color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════════
   ★★★★★ 2026-08-27 底栏上方一道渐变 —— 告诉人「**下面还有**」。
   ★★★★ 用户报「点又点不了」的真正原因不是按钮坏了,是
     **底栏把下面的内容截断了,看起来像页面到底了**,他就没再往下滚。
   ★★★ 一道渐变虚化是标准做法:内容被"淡出"而不是"切断",
     人一眼就知道下面还有东西。**比加一句提示管用** —— 提示要读,这个不用。
   ★★ pointer-events:none —— 它只是画上去的,不许挡住任何点击
     (要不然就成了第二个底栏)。 */
#pcnav::before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px;
  background:linear-gradient(to bottom, transparent, var(--bg));pointer-events:none}

/* ★★★ 「现在在配谁」—— 工号跟着人走(用户 2026-08-27:「每个员工任何界面都要有工号跟着」)。
   ★★ sticky:滚到哪儿都看得见现在在配谁 —— 高棉文名字长得像,
     不带工号根本分不清,配错了人还不知道。 */
.swwho{position:sticky;top:0;z-index:8;display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;margin:14px 0 12px}
.swwn{font-size:16px;font-weight:800;color:var(--ink)}
.swwc{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--blue);color:var(--card);border-radius:6px;padding:2px 9px}
.swwl{font-size:12.5px;color:var(--sub)}
.swwp{font-size:12px;border-radius:6px;padding:3px 9px;margin-left:auto;font-weight:600}
.swwp.on{background:rgba(74,190,130,.16);color:var(--green-ink)}
.swwp.off{background:rgba(224,90,90,.16);color:var(--red-ink)}

/* ★★★ 2026-08-27「派给我的」卡片上加单据行 —— 用户报「员工手里的单子跟电脑上不一致」,
   根因是**他手机上根本没有单号**。样式照抄下面那段「归在我名下」的 .hdoc,
   两段长一个样,人不用学两遍。 */
.pkdoc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);
  font-size:12.5px;color:var(--sub)}
.pkdoc b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--bg);border-radius:5px;padding:2px 8px}
.pkdoc i{font-style:normal;margin-left:auto;color:var(--sub)}
.pkdoc em{font-style:normal;color:var(--amber-ink)}
.pkjob{color:var(--blue);font-weight:600;cursor:pointer}

/* ★★★ 2026-08-27「对不上的派工」明细。颜色一律走主题变量(昨天写死深色栽过一次) */
.bplist{max-height:52vh;overflow:auto}
.bpr{border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:8px;
  background:var(--card)}
.bph{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.bpk{font-size:11.5px;font-weight:700;border-radius:5px;padding:2px 8px}
.bpk.bad{background:rgba(224,90,90,.18);color:var(--red-ink)}
.bpk.amb{background:rgba(220,170,70,.18);color:var(--amber-ink)}
.bpw{font-weight:700;color:var(--ink);font-size:13.5px}
.bpw i{font-style:normal;font-weight:600;font-size:11.5px;color:var(--sub);
  font-variant-numeric:tabular-nums}
.bpq{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.bpd{font-size:12px;color:var(--sub);margin-top:5px;line-height:1.7}
.bpd b{color:var(--ink)}
.bpx{font-size:12px;margin-top:4px;line-height:1.7;color:var(--red);
  background:rgba(224,90,90,.1);border-radius:6px;padding:5px 9px}
.bpx b{color:var(--red)}

/* ★★★ 2026-08-27「这托已经派给谁了」—— 用户:「这个上面应该可以看见派给谁了才对」。
   ★★ 两种颜色两个意思:蓝=这张单派的(意料之中) · 琥珀=别的批派走了(再挑会撞车)。
   ★ 颜色走主题变量,深浅两套都得看得见。 */
.jpwho{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;
  margin-top:5px;font-size:11.5px;border-radius:6px;padding:4px 9px;line-height:1.6}
.jpwho.mine{background:rgba(74,144,217,.14);color:var(--blue)}
.jpwho.other{background:rgba(220,170,70,.16);color:var(--amber-ink)}
.jpwho b{color:var(--ink);font-weight:700}
.jpwho i{font-style:normal;font-variant-numeric:tabular-nums;opacity:.75}
.jpwho span{margin-left:auto;opacity:.85}

/* ★★★ 2026-08-27 任务卡上的领料单号(用户:「这个页面没有领料单号」)。
   ★★ 「几张单」是计数,**单号才是身份** —— 车间报一个单号过来,
     你得在这一页当场认出是哪一批,而不是一张张点进去找。
   ★ 等宽数字:单号很长(LL007260900113),对齐了尾号一眼能分。 */
.jcreq{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:5px}
.jcreq b{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:5px;padding:2px 7px}
.jcreq.none{font-size:11.5px;color:var(--amber-ink)}
.jcreqm{font-size:11.5px;color:var(--blue);cursor:pointer;font-weight:600}
.jcreqall{display:flex;flex-wrap:wrap;gap:5px}
/* ★★★★ `hidden` 的默认样式是 display:none,可**它被上面这条 display:flex 盖掉了** ——
   实测那三张"折起来"的单号直接全露在外面。
   ★★★ 通则:**给元素写了 display,就得同时写 [hidden] 那一条** ——
     hidden 是属性,优先级斗不过类选择器。这类"藏不住"的 bug 不报错,
     只是东西一直在那儿摆着,而你以为它收起来了。 */
.jcreqall[hidden]{display:none}

/* ★★★ 2026-08-27 缺件预警一行(用户:「清晰明了,用量、料号这些基础信息还要有,
   直接传送(此物料收发明细)和归属仓(实际归属仓)」)。
   ★★ 整行可点 → 进这个料的收发明细。 */
.pl.shrow{display:flex;align-items:flex-start;gap:10px;cursor:pointer;position:relative;
  padding:9px 10px;border-radius:8px}
.pl.shrow:hover{background:var(--bg)}
.shl{flex:1 1 auto;min-width:0}
.shn{font-weight:600;font-size:13.5px;color:var(--ink);line-height:1.4}
.shc{font-size:11.5px;color:var(--sub);margin-top:2px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.shper{margin-left:8px;font-family:inherit;background:var(--bg);
  border-radius:4px;padding:1px 6px;color:var(--ink);font-weight:600}
/* ★ 「实际归属仓」= 货真在哪几个仓(按库位算),不是档案上那个标签 */
.shwh{font-size:11.5px;margin-top:3px;color:var(--amber-ink);line-height:1.6}
.shwh b{color:var(--amber-ink);font-weight:700}
.shwh.none{color:var(--red)}
.shr{flex:0 0 auto;text-align:right}
.shq{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.1}
.shk{font-size:10.5px;color:var(--sub);margin-top:1px}
.shcan{font-size:11.5px;color:var(--sub);margin-top:3px;font-variant-numeric:tabular-nums}
.shcan.z{color:var(--red);font-weight:700}
.shgo{position:absolute;right:10px;bottom:8px;font-size:11px;color:var(--blue);opacity:.75}

/* ══════════════════════════════════════════════════════════════════
   2026-08-27 「这个料已经派出去了」—— 备料弹窗锁定态。
   ★ 颜色一律走主题变量:上次写死深色值,浅色主题下字看不见(栽过一次) */
.lkbar{margin:10px 0 4px;padding:11px 12px;border-radius:11px;
  background:var(--blue-bg);border-left:3px solid var(--blue)}
.lkt{font-weight:700;font-size:13.5px;color:var(--blue)}
.lkw{font-size:12.5px;color:var(--ink);opacity:.9;line-height:1.75;margin-top:3px}
.lkbad{margin-top:9px;padding-top:8px;border-top:1px dashed var(--line2);
  font-size:12.5px;color:var(--red-ink)}
.lkbadr{margin-top:4px;font-size:12px;line-height:1.7;
  font-variant-numeric:tabular-nums;opacity:.95}
.lkbadh{margin-top:6px;font-size:11.5px;color:var(--sub);line-height:1.7}
.jpqlk{font-size:17px;font-weight:700;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--ink);opacity:.85;
  min-width:62px;padding:5px 2px}
/* 2026-08-27 派工那托挪过位置 / 那托坏了 —— 员工手机上必须说出来 */
.pkmoved{margin-top:6px;padding:7px 9px;border-radius:8px;font-size:12.5px;
  line-height:1.65;background:var(--amber-bg);color:var(--amber-ink)}
.pkbadpal{margin-top:6px;padding:7px 9px;border-radius:8px;font-size:12.5px;
  line-height:1.65;background:var(--red-bg);color:var(--red-ink);font-weight:600}
/* 2026-08-27 「更多」第一层把每个大类里的功能名摊出来当目录 —— 见 moreName() */
.mtl1 .gr .mtnm{display:block;color:var(--sub);font-size:11.5px;font-weight:400;
  line-height:1.8;margin-top:5px;opacity:.9;white-space:normal}
.mtl1 button{align-items:flex-start}
.mtl1 .mi{margin-top:2px}
.mtl1 .ar{align-self:center}

/* ══════════════════════════════════════════════════════════════════
   2026-08-27 「配套 · 缺件」融合页。
   ★ 颜色一律走主题变量 —— 写死深色值在浅色主题下会看不见(栽过) */
.ktier{display:inline-block;font-size:10.5px;padding:1px 7px;border-radius:20px;
  margin-left:6px;vertical-align:middle;font-weight:600}
.ktier.pin{background:var(--blue-bg);color:var(--blue)}
.ktier.doing{background:var(--green-bg);color:var(--green-ink)}
.ktier.maybe{background:var(--card2);color:var(--sub)}
.kwhy{font-size:11.5px;color:var(--sub);line-height:1.7;margin-top:3px}
.kevi{font-size:12px;color:var(--sub);line-height:1.85;padding:9px 11px;
  border-radius:9px;background:var(--card2);margin-bottom:10px}
.kevi b{color:var(--ink)}
.kitcard{margin-bottom:11px}
.ksum{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.kchip{font-size:11.5px;padding:2px 9px;border-radius:20px;
  background:var(--card2);color:var(--sub);font-variant-numeric:tabular-nums}
.kchip.mine{background:var(--blue-bg);color:var(--blue);font-weight:600}
.kchip.bad{background:var(--red-bg);color:var(--red-ink);font-weight:600}
.kchip.never{background:var(--amber-bg);color:var(--amber-ink)}
.kopen{margin-top:9px}
.kopen button{width:100%;padding:7px;border:1px dashed var(--line2);
  border-radius:9px;background:transparent;color:var(--blue);
  font-size:12.5px;font-family:inherit;cursor:pointer}
.kopen button:active{background:var(--card2)}
.kbad{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:20px;
  margin-left:6px;font-weight:600}
.kbad.zero{background:var(--red-bg);color:var(--red-ink)}
.kbad.never{background:var(--amber-bg);color:var(--amber-ink)}
.shloc{font-size:11px;color:var(--sub);margin-top:2px;opacity:.85}
.kgrp{margin-top:10px}
.kgrph{width:100%;padding:8px 10px;border:none;border-radius:9px;
  background:var(--card2);color:var(--sub);font-size:12.5px;
  font-family:inherit;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:6px}
.kgrph b{color:var(--ink)}
.kgrph .ar{margin-left:auto;color:var(--blue);font-size:11.5px}
.kgrpb{margin-top:6px;padding:2px 4px}
.kgline{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;
  padding:6px 8px;border-radius:8px;font-size:12.5px;margin-bottom:4px;
  background:var(--card2)}
.kgline.sister{border-left:3px solid var(--blue)}
.kgline.outside{border-left:3px solid var(--line2);opacity:.82}
.kgline.unknown{border-left:3px solid var(--amber)}
.kgk{font-size:10.5px;color:var(--sub);padding:1px 6px;border-radius:20px;
  background:var(--card);flex:none}
.kgn{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.kgtip{font-size:11.5px;color:var(--sub);line-height:1.8;padding:7px 9px;
  margin-top:5px;border-radius:8px;background:var(--card2)}

/* ★★★ 2026-08-27 实测截图抓到的:「收发明细 ›」是 position:absolute 贴右下角,
   跟右列的「够 N 台」**叠在一起**了 —— 两行字压在同一个位置,谁也读不清。
   ★★ 绝对定位的东西必须给它**留出位置**,不能指望别人不长到那儿去。
   改法:整行留出底部空档,右列自己也退开一点。 */
.pl.shrow{padding-bottom:22px!important}
.shr{padding-bottom:2px}
.shgo{right:12px;bottom:6px}
/* 2026-08-27 融合页「只看某一款」的返回条 */
.konebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:10px;padding:8px 10px;border-radius:10px;background:var(--card2)}
.konebar button{padding:4px 12px;border:none;border-radius:8px;
  background:var(--card);color:var(--blue);font-size:12.5px;
  font-family:inherit;cursor:pointer}
.konebar b{font-variant-numeric:tabular-nums}
.ktier.ask{background:var(--amber-bg);color:var(--amber-ink)}

/* ══════════════════════════════════════════════════════════════════
   2026-08-27 木桶:各仓各能配几台,谁最少整套就是几台。
   ★ 「还没录货」的仓画成灰的、不给条 —— **没有数据和数据是 0 是两句话** */
.wkbox{margin-top:10px;padding:10px 11px;border-radius:11px;background:var(--card2)}
.wkh{font-size:11.5px;color:var(--sub);margin-bottom:7px}
.wkrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:5px 0;font-size:12.5px;border-bottom:1px dashed var(--line2)}
.wkrow:last-of-type{border-bottom:none}
.wkn{flex:0 0 auto;min-width:66px;font-weight:600;color:var(--ink)}
.wkn i{font-style:normal;font-size:10px;margin-left:5px;padding:1px 5px;
  border-radius:20px;background:var(--blue-bg);color:var(--blue)}
.wkbt{font-size:10px;margin-left:5px;padding:1px 6px;border-radius:20px;
  background:var(--red-bg);color:var(--red-ink)}
.wkc{flex:0 0 auto;font-size:11px;color:var(--sub);
  font-variant-numeric:tabular-nums;min-width:38px}
.wkbar{flex:1 1 80px;height:7px;border-radius:20px;background:var(--line2);
  overflow:hidden;min-width:60px}
.wkbar i{display:block;height:100%;border-radius:20px;background:var(--blue)}
.wkrow.bot .wkbar i{background:var(--red)}
.wkv{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--ink);min-width:52px;text-align:right}
.wkv.z{color:var(--red)}
.wkv.off{font-weight:400;font-size:11px;color:var(--sub);min-width:auto}
.wkrow.dead{opacity:.6}
.wkrow.dead .wkn{color:var(--sub)}
.wkw{flex:1 1 100%;font-size:11px;color:var(--sub);padding-left:2px}
.wkw em{font-style:normal;opacity:.8;margin-left:6px}
.wkend{margin-top:8px;padding:8px 10px;border-radius:9px;
  font-size:12.5px;line-height:1.75}
.wkend.ok{background:var(--green-bg);color:var(--green-ink)}
.wkend.warn{background:var(--amber-bg);color:var(--amber-ink)}
.wke2{display:block;margin-top:4px;font-size:12px;opacity:.95}

/* 2026-08-27 货柜今天看板 */
.cdteam{margin-bottom:7px;opacity:.72}
.cdteam.on{opacity:1;border-color:var(--green)}
.cdtn{font-weight:700;font-size:15px;color:var(--ink)}
.cdmn{font-size:11px;font-weight:400;color:var(--sub);margin-left:7px}
.cdwho{font-size:11.5px;line-height:1.7;margin-top:2px}
.cdwho i{font-style:normal;font-size:10px;opacity:.6;margin-left:2px}
.cdctn{margin-bottom:8px;cursor:pointer}
.cdhalf{margin-top:7px;padding:7px 9px;border-radius:8px;font-size:12.5px;
  line-height:1.7;background:var(--amber-bg);color:var(--amber-ink)}
.cdhalf.red{background:var(--red-bg);color:var(--red-ink)}
.cdopen{display:flex;align-items:center;gap:9px;flex-wrap:wrap;cursor:pointer;
  padding:9px 11px;border-radius:9px;background:var(--card);margin-bottom:5px;
  border:1px solid var(--line2);font-size:12.5px}
.cdopen:active{background:var(--card2)}
.cdopen .code{font-weight:700;font-family:ui-monospace,Menlo,Consolas,monospace}
.cdd{font-size:11.5px;color:var(--amber-ink);background:var(--amber-bg);
  padding:1px 7px;border-radius:20px;font-variant-numeric:tabular-nums}
.cdp{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.cdopen .ar{color:var(--blue);font-size:12px}
.wcode{font-style:normal;font-size:10px;opacity:.6;margin-left:3px}

/* ══ 「我的任务」分组区(2026-08-28)══
   用户:「我应该干什么 = 我的任务」。按仓 × 级别聚合,一屏看全该干的事。 */
.mtwrap{display:flex;flex-direction:column;gap:9px;margin:10px 0 14px}
.mtg{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;cursor:pointer}
.mtg:active{background:var(--bg2,var(--card))}
.mtg.hot{border-color:var(--amber)}
.mth{display:flex;align-items:baseline;gap:7px;margin-bottom:5px}
.mth b{font-size:15px;font-weight:700;color:var(--ink)}
.mth i{font-style:normal;font-size:11.5px;color:var(--sub)}
.mth .mtn{margin-left:auto;font-size:19px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}
.mtg.hot .mth .mtn{color:var(--amber-ink,var(--amber))}
.mtr{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--sub);
  padding:3px 0;border-top:1px dashed var(--line)}
/* 车间标签(2026-08-29 员工要的「这是哪个车间领料的」)——
   ★ 摆最左、给底色,让他扫一眼就能把同一个车间的几条归到一起。
   ★ flex:none + white-space:nowrap:车间名两三个字,**绝不许它被挤掉或折行** */
.mtr .mtd{flex:none;white-space:nowrap;font-size:11.5px;font-weight:700;
  padding:1px 6px;border-radius:5px;background:var(--blue-soft);color:var(--blue-ink);
  border:1px solid var(--blue-line)}
.mtr .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink);opacity:.85}
.mtr .s{flex:none;font-variant-numeric:tabular-nums}
.mtr .w{flex:none;color:var(--amber-ink,var(--amber));font-weight:600}
.mtmore{font-size:12px;color:var(--blue);margin-top:5px}
/* 「你在等」—— 不是待办,所以摆在外头、淡着,一眼看得出不是一类东西 */
.mtwait{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--sub);
  padding:2px 2px 0}
.mtwait span{display:inline-flex;align-items:baseline;gap:5px;cursor:pointer;
  border-bottom:1px dashed var(--line2);padding-bottom:2px}
.mtwait i{font-style:normal;font-size:10.5px;opacity:.6;
  border:1px solid var(--line2);border-radius:99px;padding:0 6px}
.mtwait b{color:var(--ink);font-weight:600}
.mtwait em{font-style:normal;opacity:.6;font-size:11.5px}

/* ★ 大屏底栏:平时一行(只留"这块屏多宽 · 几列 · 版本" + 齿轮),点开才展开全部开关 */
.tvfoot{position:relative}
.tvfoot .tvgear{cursor:pointer;padding:.1vw .6vw;border-radius:.4vw;
  background:rgba(255,255,255,.1);margin-left:.6vw;font-weight:700}
.tvfoot .tvgear:hover{background:rgba(255,255,255,.22)}
.tvfoot.fold > span.tvidle{display:none}
/* 展开的时候把这一块单独限高 —— 内容区一个像素都不让 */
.tvfoot.open{max-height:34vh;overflow:auto;align-content:flex-start}

/* ★★★★★ 大屏出口柜:本期进度 + 年度总数(2026-08-28 用户要的)。
   ★★★ 摆在四张卡之前 —— 走过去扫一眼,先看见的该是「这一期干到哪了」,
     不是「今天装了几个」。年度那个数是给外人看的,字最大。 */
.tvper{display:flex;align-items:center;justify-content:space-between;gap:1.4vw;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  border-radius:.8vw;padding:.9vw 1.4vw;margin-bottom:1.2vw;flex:none;flex-wrap:wrap}
.tvpl,.tvpr{display:flex;align-items:baseline;gap:.7vw;flex-wrap:wrap}
.tvpk{font-size:1.05vw;opacity:.55}
.tvpv{font-size:2.2vw;font-weight:800;line-height:1}
.tvpv b{font-size:2.9vw;color:#FFD08A}
.tvpv2{font-size:2.4vw;font-weight:800;line-height:1}
.tvpv2.y{font-size:3.4vw;color:#6EE7A8}
.tvpu{font-size:1.05vw;opacity:.6}
@media(max-width:1200px){
  .tvper{padding:1.2vw}
  .tvpv{font-size:3vw}.tvpv b{font-size:3.8vw}
  .tvpv2{font-size:3vw}.tvpv2.y{font-size:4.4vw}
  .tvpk,.tvpu{font-size:1.5vw}
}
@media(max-width:900px){
  .tvper{flex-direction:column;align-items:flex-start}
  .tvpk,.tvpu{font-size:12px}.tvpv{font-size:24px}.tvpv b{font-size:30px}
  .tvpv2{font-size:24px}.tvpv2.y{font-size:32px}
}

/* ★★★★★ 2026-08-28:19 寸 1366×768 实测 —— 宽度够了,**高度不够**。
   ★★★★ 以前所有的档都是按 `max-width` 分的,但这次挤掉内容的是竖着那一维:
     768 高要塞下 标题 + 本期条 + 三张卡 + 三个大块 + 底栏。
     ★★★ 所以加一档**按高度**的:矮屏上把竖直方向的留白和字号一起收 ——
       横着的一个字不动(宽度本来就够)。
   ★★ 这一档只管 900px 以下的高度,2560×1305 那台一点不受影响。 */
@media (max-height: 900px) {
  .tvwrap{padding:1.1vw 1.6vw .8vw}
  .tvhd{padding-bottom:.6vw}
  .tvper{padding:.5vw 1.1vw;margin-bottom:.7vw;border-radius:.6vw}
  .tvper .tvpv{font-size:1.9vw}.tvper .tvpv b{font-size:2.4vw}
  .tvper .tvpv2{font-size:2vw}.tvper .tvpv2.y{font-size:2.8vw}
  .tvrow{gap:1vw;margin-bottom:.8vw}
  .tvrow2{gap:1vw}
  .tvcard{padding:.8vw 1vw}
  .tvv{font-size:3.2vw}
  .tvbox{padding:.8vw 1vw}
  .tvwarn{padding:.45vw .9vw;font-size:.92vw;line-height:1.35}
  .tvwarn b{font-size:1.1vw}
  .tvfoot{padding-top:.5vw}
}

/* ★ 「本年这个数还不完整」的主动提示 —— 一期都没补的时候顶出来,补过了退回小按钮 */
.spfix{display:flex;align-items:center;gap:10px;margin-top:10px;cursor:pointer;
  background:var(--amber2,#fff3de);border:1px solid #EBBE6E;border-radius:9px;
  padding:9px 12px;color:var(--amber-ink);font-size:12.5px;line-height:1.6}
.spfix b{color:var(--amber-ink)}
.spfix span{margin-left:auto;white-space:nowrap;font-weight:700}
.spfix:active{transform:scale(.995)}

/* ★★★★★ 2026-08-28 实测(四档分辨率):**越大的屏反而越挤**。
   ★★★★ 根子是这一整页的尺寸都用 `vw` —— 屏越宽,字号和留白按比例越大;
     可视口高度并不按同一比例涨。实测:
       1366×768  内容 768  ✓        1440×900  内容 900  ✓
       1920×1080 内容 1224 ★超 144   2560×1305 内容 1623 ★超 318
     ★★★ 以前看不出来,是因为 `overflow:hidden` **把超出的部分直接裁掉了** ——
       屏幕上不声不响少一块,人根本不知道下面还有东西。
       (这跟「没有数据 vs 数据是 0」是同一类病:**系统必须自己说出来**。)
   ★★ 所以宽屏这两档要**往回收竖直方向** —— 横着的不动,宽度本来就够。 */
@media (min-height: 901px) and (max-height: 1150px) {
  .tvwrap{padding:1.2vw 1.8vw .9vw}
  .tvhd{padding-bottom:.7vw}
  .tvper{padding:.55vw 1.2vw;margin-bottom:.8vw}
  .tvper .tvpv{font-size:1.7vw}.tvper .tvpv b{font-size:2.1vw}
  .tvper .tvpv2{font-size:1.8vw}.tvper .tvpv2.y{font-size:2.4vw}
  .tvper .tvpk,.tvper .tvpu{font-size:.85vw}
  .tvrow{gap:.9vw;margin-bottom:.8vw}.tvrow2{gap:.9vw}
  .tvcard{padding:.7vw .9vw}
  .tvv{font-size:2.8vw}
  .tvbox{padding:.7vw .9vw}
  .tvwarn{padding:.4vw .8vw;font-size:.8vw;line-height:1.35}
  .tvwarn b{font-size:.95vw}
  .tvfoot{padding-top:.5vw}
}
@media (min-height: 1151px) {
  .tvwrap{padding:1vw 1.6vw .8vw}
  .tvhd{padding-bottom:.6vw}
  .tvper{padding:.45vw 1vw;margin-bottom:.6vw}
  .tvper .tvpv{font-size:1.5vw}.tvper .tvpv b{font-size:1.85vw}
  .tvper .tvpv2{font-size:1.6vw}.tvper .tvpv2.y{font-size:2.1vw}
  .tvper .tvpk,.tvper .tvpu{font-size:.75vw}
  .tvrow{gap:.8vw;margin-bottom:.7vw}.tvrow2{gap:.8vw}
  .tvcard{padding:.6vw .8vw}
  .tvv{font-size:2.4vw}
  .tvbox{padding:.6vw .8vw}
  .tvwarn{padding:.35vw .7vw;font-size:.7vw;line-height:1.3}
  .tvwarn b{font-size:.85vw}
  .tvfoot{padding-top:.4vw}
}

/* ★ 柜号那一行是入口 —— 没填的显眼(橙)、填了的低调(可点改) */
.spno .nocno{color:var(--amber,#c77700);cursor:pointer;border-bottom:1px dashed currentColor}
.spno .cnoed{cursor:pointer;border-bottom:1px dashed rgba(0,0,0,.18)}
.spno .nocno:active,.spno .cnoed:active{opacity:.6}

/* ★ 这个仓不干上架发料时的那一条 —— 说出为什么,别画四个 0 骗人 */
.mebnio{display:flex;align-items:center;gap:10px;background:var(--bg2,#f4f6f9);
  border:1px solid var(--line,#e3e8ee);border-radius:10px;padding:11px 13px;
  font-size:12.5px;line-height:1.65;color:var(--sub,#6b7a8d)}
.mebnio span{margin-left:auto;white-space:nowrap;font-weight:700;
  color:var(--blue,#2563eb);cursor:pointer}

/* ★ 发料明细:一行能点开看全部 —— 不逼人跳去别的页面查 */
.reqrow{cursor:pointer}
.reqrow:active{background:var(--bg2,#f4f6f9)}
/* ★★★★★ 这一组原来也叫 .rqi —— 跟 3159 行备料卡片里的 .rqi 撞了名。
   后写的这条 display:flex 把备料卡片那个本该是竖排的容器变成了横排,
   几行物料一横排就把手机页面撑破(实拍:整页左偏、右边空一大块)。
   ★★★★ 教训:起类名之前先 grep 一遍这个名字在不在用。CSS 没有作用域,
     后写的永远赢 —— 而且赢在一个跟你八竿子打不着的页面上。 */
.rqinfo{display:flex;flex-direction:column;gap:1px}
.rqv{display:flex;align-items:baseline;gap:10px;padding:8px 2px;
  border-bottom:1px solid var(--line,#eef1f5);font-size:13px}
.rqv span{color:var(--sub,#6b7a8d);min-width:110px;flex:none}
.rqv b{word-break:break-all;min-width:0;flex:1 1 auto}

/* ★ 大屏进口柜:每一批的卸货进度(2026-08-28)。一个都没卸的批不画条 —— 
   「还在海上」和「完成 0%」是两句话 */
.tvbat{display:flex;gap:1vw;margin-bottom:1vw;flex:none;flex-wrap:wrap}
.tvbg{flex:1 1 0;min-width:0;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);border-radius:.7vw;padding:.7vw 1vw}
.tvbg.ok{border-color:rgba(110,231,168,.45);background:rgba(110,231,168,.08)}
.tvbg.dim{opacity:.45}
.tvbgt{font-size:1vw;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvbgv{font-size:1.5vw;font-weight:800;margin:.15vw 0}
.tvbgv b{font-size:2.1vw;color:#FFD08A}
.tvbg.ok .tvbgv b{color:#6EE7A8}
.tvbgb{height:.35vw;background:rgba(255,255,255,.10);border-radius:.2vw;overflow:hidden}
.tvbgb span{display:block;height:100%;background:#FFD08A}
.tvbg.ok .tvbgb span{background:#6EE7A8}
.tvbgs{font-size:.9vw;opacity:.55;margin-top:.3vw}
@media(max-height:900px){.tvbat{margin-bottom:.7vw}.tvbg{padding:.5vw .8vw}
  .tvbgv b{font-size:1.8vw}.tvbgt,.tvbgs{font-size:.85vw}}
@media(min-height:901px) and (max-height:1150px){.tvbgv b{font-size:1.7vw}}
@media(min-height:1151px){.tvbgv b{font-size:1.5vw}.tvbgt,.tvbgs{font-size:.75vw}}
@media(max-width:900px){.tvbat{flex-direction:column}
  .tvbgt,.tvbgs{font-size:12px}.tvbgv{font-size:18px}.tvbgv b{font-size:24px}}

/* ★ 这个仓一张卡都不该有时:说清楚为什么 + 给个去处,不画空卡 */
.f8none{display:flex;align-items:center;gap:10px;background:var(--bg2,#f4f6f9);
  border:1px solid var(--line,#e3e8ee);border-radius:10px;padding:12px 14px;
  font-size:13px;line-height:1.7;color:var(--sub,#6b7a8d)}
.f8none span{margin-left:auto;white-space:nowrap;font-weight:700;
  color:var(--blue,#2563eb);cursor:pointer}

/* ══════════════════════════════════════════════════════════════════════
   ★★★★★ 2026-08-28 第二轮:底栏**又被挤没了**(用户 19 寸实拍,整条都不见了)。
   ★★★★★ 上一版按高度分了三档往回收,可用户那台的宽高比又不在任何一档里 ——
     **只要尺寸还用 vw,就永远有一个宽高比能把它挤出去**。
     ★★★★ 一档一档补是补不完的:vw 跟着宽度涨,可用高度不跟着涨,
       这是个**结构问题**,不是参数问题。
   ★★★ 所以换根治的做法:**底栏钉死在屏幕底部** —— 它是设置区,
     本来就不该跟内容抢空间。内容区再高也压不掉它,展开时向上长。
   ★★ 内容区留出底栏那么高的余量,最后一块不会被盖住。 */
.tvfoot{position:fixed;left:0;right:0;bottom:0;z-index:6;
  background:rgba(10,16,25,.94);backdrop-filter:blur(6px);
  padding:.55vw 2vw;margin:0;opacity:.62}
.tvfoot:hover{opacity:1}
.tvwrap{padding-bottom:3.2vw}
@media(max-height:900px){.tvwrap{padding-bottom:3.8vw}}
@media(min-height:1151px){.tvwrap{padding-bottom:2.6vw}}
/* 退出按钮挪到底栏上面一点,别叠在一起 */
.tvout{bottom:3.6vw}
@media(max-width:900px){
  .tvfoot{position:static;background:none;backdrop-filter:none;padding-top:8px;opacity:.5}
  .tvwrap{padding-bottom:0}.tvout{bottom:auto}
}

/* ★★★★★ 宽而矮的屏(宽高比 ≥ 1.9)——vw 跟着宽度涨,可高度不跟着涨,
   于是屏越"扁"内容越挤。实测:2000×1019 超 60px、2560×1080 超 294px。
   ★★ 按宽高比再收一档,只收竖直方向 —— 横着的本来就宽,不动。 */
@media (min-aspect-ratio: 19/10) {
  .tvwrap{padding-top:.9vw}
  .tvhd{padding-bottom:.5vw}
  .tvper{padding:.4vw 1vw;margin-bottom:.6vw}
  .tvper .tvpv{font-size:1.5vw}.tvper .tvpv b{font-size:1.9vw}
  .tvper .tvpv2{font-size:1.6vw}.tvper .tvpv2.y{font-size:2.1vw}
  .tvrow{gap:.7vw;margin-bottom:.6vw}.tvrow2{gap:.7vw}
  .tvcard{padding:.5vw .8vw}.tvv{font-size:2.3vw}
  .tvbox{padding:.5vw .8vw}
  .tvwarn{padding:.3vw .7vw;font-size:.72vw;line-height:1.3}
  .tvwarn b{font-size:.86vw}
  .tvbat{margin-bottom:.6vw}.tvbg{padding:.45vw .8vw}
}
@media (min-aspect-ratio: 23/10) {
  .tvper .tvpv{font-size:1.2vw}.tvper .tvpv b{font-size:1.5vw}
  .tvper .tvpv2{font-size:1.25vw}.tvper .tvpv2.y{font-size:1.6vw}
  .tvper .tvpk,.tvper .tvpu{font-size:.62vw}
  .tvrow{gap:.55vw;margin-bottom:.5vw}.tvrow2{gap:.55vw}
  .tvcard{padding:.4vw .7vw}.tvv{font-size:1.8vw}
  .tvbox{padding:.4vw .7vw}
  .tvk,.tvk3{font-size:.7vw}.tvs,.tvu{font-size:.62vw}
  .tvwarn{padding:.25vw .6vw;font-size:.6vw}
  .tvwarn b{font-size:.72vw}
}
/* ★ 退出按钮压着左下角那条提示 —— 调淡,鼠标过去才亮(挂墙的屏平时没人碰它) */
/* ★★★★★ 2026-08-28 用户报「**返回没了**」——「退出大屏」这个按钮
   opacity 只有 .28,还正好压在成品仓那张卡的「还没收过货」上面,
   两行字叠在一块。★★★★ 我当初调淡的理由是「挂墙的屏平时没人碰它」——
   **可正因为挂墙上没人碰,鼠标悬停才亮的设计等于没有出口**。
   ★★★ 凡是把导航藏起来的全屏页面,它自己那个出口就是唯一的路,
     **唯一的路不能靠悬停才显形**。给它一个底、拉到看得清,
     仍然比内容淡一档,不抢戏。 */
.tvout{opacity:.72;transition:opacity .15s;background:rgba(10,16,25,.82);
  border:1px solid rgba(255,255,255,.16);border-radius:9px;
  padding:7px 13px;backdrop-filter:blur(4px)}
.tvout:hover{opacity:1}

/* ★ 卸完的柜 · 分仓结果(玉香问的) */
.cwwhs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cwwhs span{font-size:12px;padding:3px 9px;border-radius:6px;
  background:var(--bg2,#f4f6f9);border:1px solid var(--line,#e3e8ee)}
.cwwhs span.bad{background:var(--red-bg);border-color:var(--red-line);color:var(--red-ink)}
.cwwhs b{margin-left:3px}
.cwst{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;
  border-top:1px dashed var(--line,#eef1f5);padding-top:7px}
.cwst i{font-style:normal;font-size:11.5px;color:var(--sub,#8695a8)}
.cwst i.ok{color:var(--green,#2F7A4E)}
.cwst i.warn{color:var(--amber-ink,#8A5A00);font-weight:700}

/* ★★★★ 装柜卡:「装完了」主键 + 底下一行候补入口(2026-08-28 用户定的分工)。
   ★★★ 「等仓管上锁」是**状态条不是按钮** —— 这一步不归装柜工了,
     长得像按钮他会去点,点不动就以为坏了。 */
.splsub{margin-top:6px;text-align:center;font-size:12.5px}
.splsub span{color:var(--blue);cursor:pointer}
.spwaitlock{background:var(--amber2);border:1px solid var(--amber-line);
  border-radius:9px;padding:9px 12px;text-align:center;line-height:1.5}
.spwaitlock b{display:block;font-size:14px;color:var(--amber-ink)}
.spwaitlock span{font-size:12px;color:var(--sub)}

/* ══════════════════════════════════════════════════════════════════════════
   ★★★★★ 电脑端:签完到之后**不许沉到页面底下**(2026-08-28 用户画的箭头)。
   ★★★★★ 他圈着左下角那块问「放在这里不好吗?」,箭头指向上面那片空白 ——
     意思很清楚:**这块不该在页面最底下,得滑到底才看得见**。
   ★★★★ 我先试了钉在右上角(position:fixed),实测**压住了两个搜索框** ——
     他箭头指的那片空白只有 75px 高,是统计条右边那一条,
     用固定定位去占,滚动起来必然飘到内容上面。**看着空不等于能放东西**。
   ★★★ 改成:**电脑端签完了也留在顶部**(手机照旧沉底,手机屏小,
     沉底才符合「做完了收成一行」)。一进页面就在视线里,一寸内容也不压。
   ★★ 手机不动:那块沉在底栏上方本来就够得着,而且手机没有这片空白。
   ══════════════════════════════════════════════════════════════════════════ */


/* ★ 换口径的说明条:数字掉到 0 的时候把「为什么」摆在旁边 */
.bdnote{margin-top:9px;padding:8px 11px;border-radius:9px;
  background:var(--amber2);border:1px solid var(--amber-line);
  font-size:12px;line-height:1.7}
.bdnote b{display:block;color:var(--amber-ink);margin-bottom:3px}
.bdnote div{color:var(--sub)}
.bdnote .wl{font-weight:800;color:var(--amber-ink)}

/* ══════════════════════════════════════════════════════════════════════════
   ★★★★★ 签到块跟找货页那条统计条并排(2026-08-28 用户画框定的)。
   ★★★★ 手机:它是 #whsum 里的最后一格,自己换到统计条下面一行 —— 用户要的
     「这一行下面再起一行」。★★ 电脑:宽屏 #whsum 是 flex,自动并到右边。
   ★★★ 高度跟统计条对齐(align-items 由父容器管),两个按钮压扁成一行 ——
     那一行只有 90 来 px,大按钮塞不进去。 */
#cibox.inrow{padding:0;margin:0 0 12px;width:100%}
#cibox.inrow .cib{margin:0}
#cibox.inrow .cbk{max-width:none;gap:10px}
#cibox.inrow .ck{padding:9px 10px}
#cibox.inrow .ck i{font-size:15px}
#cibox.inrow .cbst,#cibox.inrow .cbnote{font-size:11px;margin-top:5px}
@media(min-width:1000px){
  #cibox.inrow{flex:0 0 auto;width:auto;min-width:420px;margin:0 0 12px auto}
  #cibox.inrow .cbk{gap:12px}
  #cibox.inrow .ck{min-width:196px}
}

/* ★★★★ 电脑端:统计条 + 签到块并排(用户画框定的)。
   ★★★ `#whsum` 宽屏原来是 block,子元素各占一行。这儿只让**这两个**并排:
     给容器开 flex,**所有直接子元素默认占满一行**,只有 .stat 和签到块例外。
   ★★ 这么写的道理:不动其它子元素的原有形态 —— 给容器加 flex,
     里面每个孩子都要想一遍(样式表里 .fsarch 那条注释already 踩过这个坑)。 */
@media(min-width:1200px){
  #whsum{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:12px}
  #whsum > *{flex:0 0 100%;min-width:0}
  #whsum > .stat{flex:1 1 auto}
  #whsum > #cibox.inrow{flex:0 0 456px;margin:0 0 12px}
}

/* ★★★★ 宽表格自己横滚,不撑破页面(2026-08-28 自检抓到:在途查询超 54px、
   工作量超 19px)。★★★ 判据:**宽的是表格,该滚的就是表格,不是整个页面** ——
   页面被撑破的后果不是横滚条,是浏览器把整页缩小,内容左偏、右边空一块。 */
.tsc{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tsc table{min-width:100%}


/* ★★★ 选中态是蓝底,里面的次要文字还是灰的 —— 深色下 1.15:1,基本看不见
   (自检在看库位页抓到)。**底色变了,压在上面的字也得跟着变**。 */
.on .muted,.on .sub,.sel .muted{color:var(--onfill);opacity:.78}


/* ★★★ 琥珀底上的字一律用 --onamber(深字) —— 白字压不住琥珀(自检:2.68:1)。
   这几个是小徽章,字小,更要够。 */
.segn,.badge.amber,.spbg.amber,.tag.amber{color:var(--onamber)}

/* ★★★ 强制放行的明细(2026-08-29):违了什么规 · 谁放的 · 他填的理由。
   ★★ 三行分开摆,不再挤成「强制放行:POPEN」一句 —— 那一句里
     只有人填的理由,系统自己知道的那半边看不见。 */
.fcbox{margin-top:7px;background:var(--red-bg);border:1px solid var(--red-line);
  border-radius:9px;padding:9px 11px;font-size:12.5px;line-height:1.7}
.fcbox .fh{font-weight:800;color:var(--red-ink);margin-bottom:4px}
.fcbox .fr{display:flex;gap:8px}
.fcbox .fr span{color:var(--sub);flex:none;min-width:76px}
.fcbox .fr b{font-weight:600;min-width:0}
.fcbox .fr.old b{font-weight:400;color:var(--sub);font-style:italic}

/* ★★★★★ 2026-10-02 周期切换器(.spnav/.spnums/.spdup/.sphist/.spnext2,
   08-29 那版定的图)一直就没补过样式——`.mid` 底下 `.d`(日期)和 `.w`
   (本期/上一期+第几周)是两个裸 div,浏览器默认 div 间距是 0,
   字挨着字看着就像长在一行里。Di 截图抓到:「为什么连在一起了呢?
   一期就是一期」——不是数错了,是这块从头就没给过行距和卡片感。
   补齐这一块的样式,`.d`/`.w` 之间留出呼吸的间距,翻到上一期/下一期
   时按 08-29 定的「整块变色」上色(past=琥珀、next=蓝),其余几个
   数字条/提示条也一并按全站卡片风格补上,不再是裸文字堆一起。 */
.spnav{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.spnav .nv{flex:none;padding:9px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--card2);font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.spnav .nv:disabled{opacity:.35}
.spnav .mid{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;gap:4px}
.spnav .mid .d{font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.spnav .mid .w{font-size:12.5px;color:var(--sub);line-height:1.5}
.spnav .mid .w b{color:var(--ink)}
.spnav.next{border-color:var(--blue);background:var(--blue-bg)}
.spnav.next .mid .w b{color:var(--blue)}
.spnav.past{border-color:var(--amber-line);background:var(--amber-bg)}
.spnav.past .mid .w b{color:var(--amber-ink)}

.spnums{display:flex;gap:8px;margin-bottom:10px}
.spnums>div{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:11px 8px;text-align:center}
.spnums b{display:block;font-size:21px;font-weight:800;color:var(--blue);
  font-variant-numeric:tabular-nums}
.spnums i{font-style:normal;display:block;font-size:11.5px;color:var(--sub);margin-top:2px}

.spdup{background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:10px;
  padding:9px 12px;font-size:12.5px;color:var(--amber-ink);margin-bottom:10px;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.spdup .lnk{color:var(--blue);cursor:pointer;margin-left:auto}

.sphist{background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-bottom:10px;font-size:12.5px;line-height:1.7;color:var(--sub)}
.sphist b{display:block;color:var(--ink);font-weight:700;margin-bottom:3px}

.spnext2{background:var(--blue-bg);border:1px solid var(--blue);border-radius:10px;
  padding:11px 13px;margin-bottom:10px;font-size:12.5px;line-height:1.7;color:var(--sub)}
.spnext2 b{color:var(--ink)}

/* ══════════════════════════════════════════════════════════════════════
   2026-10-02 装柜任务卡打印:卡片上的勾选+打印状态条,跟批量打印那条浮条。
   跟接单状态(我来接/我们组接)是两块互不相干的区域——只给 can(4)(办公室/
   仓管)看,装柜工看不见这一块。 */
.spprint{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:7px 11px;margin:8px 0;flex-wrap:wrap}
.spprintchk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink);
  cursor:pointer}
.spprintchk input{width:16px;height:16px;cursor:pointer}
.spprintst{font-size:11.5px;font-weight:600;white-space:nowrap}
.spprintst.un{color:var(--sub)}
.spprintst.ok{color:var(--green-ink)}

/* ★ 2026-10-02 她说「勾选之后不明显」——光变个checked状态肉眼扫不出来,
   整块给个实色高亮+文案也跟着换成「✓ 已勾选」,一眼能扫出这柜是不是已经
   勾上了,不用凑近看那个小方框 */
.spprint.sel{background:var(--blue-bg);border-color:var(--blue)}
.spprint.sel .spprintchk{color:var(--blue);font-weight:700}

.spprintbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;
  justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;margin-bottom:10px;font-size:12.5px;color:var(--sub)}
.spprintbar.on{border-color:var(--blue);background:var(--blue-bg);color:var(--ink)}
.spprintbar b{color:var(--blue);font-weight:800}
.spprintbtns{display:flex;gap:7px;flex-wrap:wrap}

/* 2026-10-06 手机上部门地图/二级/三级的卡片格一行放两个(Di:「换成一行二的显示」)。
   原来的列宽(190~250px)在手机 ~360px 的内容宽度里只放得下一列,右边空一大片。
   格子的列宽是写在 JS 的行内样式里的,所以这里要 !important 才压得住;
   只在 <1000px 生效,电脑端那套 auto-fit/auto-fill 不动。minmax(0,1fr) 防止长字撑破两列 */
@media(max-width:999px){
  .dmgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}
}

/* TGH 2.78 顶栏中间的系统名;手机放不下就藏起来 */
#top .tbrand{flex:1;text-align:center;font-size:14px;font-weight:600;letter-spacing:.14em;opacity:.88;white-space:nowrap;padding:0 12px}
@media (max-width:760px){#top .tbrand{display:none}}
#top .mtx b{display:block;font-size:13.5px}

/* TGH 2.83 柜卡:主按钮 + 打印本柜任务卡并排 */
.sprow{display:flex;gap:8px;align-items:stretch;margin-top:8px}
.sprow .spgo{flex:1;margin:0;max-width:none}
.sprow .spp1{flex:0 0 auto;white-space:nowrap;padding:0 14px;height:46px;margin:0}

.spnav .nv.amber{background:var(--amber);color:var(--onamber);border-color:var(--amber);font-weight:700;white-space:nowrap}
.spc .sprow .spgo{flex:1 1 0;width:auto;min-width:0;max-width:none;margin:0}
.spc .sprow .spp1{flex:0 0 auto;width:auto;white-space:nowrap;padding:0 14px;height:46px;margin:0}
.spc .sprow{min-width:0}

/* TGH 2.87 请假数据管理 */
.wlv{margin-top:6px;padding:5px 8px;border-radius:8px;background:rgba(230,192,53,.2);color:var(--amber-ink,#7A5210);font-weight:600;font-size:12.5px}
.lqt{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.lqt table{border-collapse:collapse;min-width:980px;width:100%}
.lqt th,.lqt td{border:1px solid var(--line);text-align:center;height:26px;padding:0;font-size:11.5px}
.lqt th{background:var(--card2,#122033);color:var(--sub);font-weight:500}
.lqt td.lqnm,.lqt th.lqnm{text-align:left;padding:0 8px;white-space:nowrap;position:sticky;left:0;background:var(--card);min-width:150px;z-index:1;cursor:pointer}
.lqt td.lqc{font-weight:700;width:46px;cursor:pointer}
.lqt .lqsun{background:rgba(0,0,0,.18)}
.lqt td.lqs{background:#e6c035}.lqt td.lqp{background:#3fb97c}.lqt td.lqa{background:#e5604f}
.lqt td.lqw{outline:2px dashed #e6c035;outline-offset:-3px}
.lqt td.lqn{background:rgba(160,170,190,.28)}
.lqt td.lqs,.lqt td.lqp,.lqt td.lqa{cursor:pointer}
.lqt td[data-lvc]{cursor:pointer;position:relative}
.lqt td.lql:after{content:"";position:absolute;right:1px;top:1px;border:4px solid transparent;border-top-color:#f08a3a;border-right-color:#f08a3a}
.lqleg{font-size:12px;color:var(--sub);margin:4px 0 8px}
.lqleg i{display:inline-block;width:12px;height:12px;border-radius:3px;margin:0 4px -1px 10px}
.lqleg i:first-child{margin-left:0}
.lqleg .lqs{background:#e6c035}.lqleg .lqp{background:#3fb97c}.lqleg .lqa{background:#e5604f}
.lqleg .lql{background:#f08a3a;clip-path:polygon(0 0,100% 0,100% 100%)}
.lqleg .lqw{outline:2px dashed #e6c035;outline-offset:-2px}.lqleg .lqn{background:rgba(160,170,190,.5)}
.lqdot{display:inline-block;width:12px;height:12px;border-radius:3px}
.lqdot.lqs{background:#e6c035}.lqdot.lqp{background:#3fb97c}.lqdot.lqa{background:#e5604f}
.lqt table{min-width:0}.lqt td.lqc{width:44px;min-width:44px}.lqt td[data-lqc],.lqt th{min-width:19px}
.lqt td.lqnm,.lqt th.lqnm{min-width:130px}

/* 请假页 中柬对照:柬文在上、中文小一号在下 */
.lqk{display:block;line-height:1.35}
.lqz{display:block;font-size:.78em;opacity:.7;line-height:1.3}
.btn.sm.lqbt{width:auto;height:auto;min-height:36px;padding:5px 16px;line-height:1.2}
.btn.lqgo{height:auto;min-height:48px;padding:8px 12px;line-height:1.25}
.badge.lqb{display:inline-block;text-align:center;line-height:1.25}
.lqdl{margin-top:4px;font-size:13px;color:var(--ink2,#6B7385)}