/* ═══════════════════════════════════════════════════════════════
   共享样式层。设计 Token 与 prototype/index.html 严格一致。
   依据：.kiro/knowledge/产品设计原则.md「设计 Token」节。

   核心取向：高级感来自留白、对齐、字重层次，不来自装饰。
   禁用渐变、重阴影、圆润卡通感、彩色大按钮。

   页面专属样式留在各自 Blade 的 @section('style') 里，
   这里只放**两个以上页面用到**的东西 —— 否则这个文件会变成垃圾堆。
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#F7F8FA; --card:#FFF; --hover:#F7F8FA;
  --t1:#1D2129; --t2:#4E5969; --t3:#86909C; --t4:#C9CDD4;
  --bd:#E5E6EB; --line:#F2F3F5;
  /* 语义色仅三档 + 一个「运行中」点色。完成态一律灰字无底色 ——
     原系统「已出库」用绿色药丸，铺满列表后视觉噪音极大，反而看不出哪条要处理。 */
  --act:#FF7D00; --act-bg:#FFF7E8; --risk:#F53F3F; --risk-bg:#FFECE8;
  --run:#00B42A; --link:#1677FF;
  --ok-bd:#BEE7C4; --warn-bd:#FFD8A8; --warn-tx:#C25100;
  --r:6px; --rc:10px; --sh:0 1px 2px rgba(0,0,0,.04);

  /* ── 数据可视化色阶 ────────────────────────────────────
     近黑 --t1 只用于**前景**：文字、主按钮、激活态。
     **大面积数据填充不用近黑**，原因三条：
       1. 视觉重量与信息量不成比例 —— 一根黑柱的分量远超它承载的一个数，
          会把注意力从旁边真正要读的数字上拽走。ERP 行密，墨水预算紧。
       2. 纯黑在明度标尺的尽头，没有余量再往深走 ——
          于是所有条读起来一样重，明度这个可用维度被浪费了。
       3. 与语义色体系打架：近黑的语义是「主要」，
          但「租金最高的平台」并不比别的更需要动手。

     故数据区改用中性灰蓝阶，靠明度差编码大小。不引入彩色，界面不会变花。 */
  --d1:#3E4C63;  --d2:#5B6B84;  --d3:#7A89A0;
  --d4:#9AA6B8;  --d5:#BCC4D0;  --d-bg:#EDEFF3;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font:400 14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--t1);background:var(--bg);-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--line);border-radius:4px;padding:1px 5px;color:var(--t2)}

/* ── 框架 ────────────────────────────────────────────────── */
.app{display:flex;height:100%}
.side{width:208px;flex:0 0 208px;background:var(--card);border-right:1px solid var(--bd);
  display:flex;flex-direction:column}
.brand{height:60px;display:flex;align-items:center;gap:9px;padding:0 20px;
  border-bottom:1px solid var(--line)}
.brand i{width:26px;height:26px;border-radius:7px;background:var(--t1);display:grid;
  place-items:center;color:#fff;font-size:13px;font-weight:600;font-style:normal}
.brand b{font-size:15px;font-weight:600;letter-spacing:.2px}
.nav{padding:10px 8px;overflow:auto;flex:1}
.nav>a{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;
  border-radius:var(--r);color:var(--t2);font-size:14px}
.nav>a:hover{background:var(--hover);color:var(--t1)}
.nav>a.on{background:var(--line);color:var(--t1);font-weight:600}
.nav>a .dot{width:5px;height:5px;border-radius:50%;background:var(--t4);flex:0 0 5px}
.nav>a.on .dot{background:var(--t1)}
.nav>a u{margin-left:auto;text-decoration:none;font-size:11px;color:#fff;background:var(--act);
  border-radius:8px;padding:0 6px;line-height:16px;font-weight:600}
.nav .sub{padding:2px 0 8px 34px}
.nav .sub a{display:flex;align-items:center;height:32px;color:var(--t3);font-size:13px}
.nav .sub a:hover{color:var(--t1)}
.nav .sub a.on{color:var(--t1);font-weight:600}
.nav .sub a u{margin-left:auto;text-decoration:none;font-size:11px;color:var(--t3);
  background:var(--line);border-radius:8px;padding:0 6px;line-height:16px}
/* 侧边栏徽标：待发货用需要行动档的橙，逾期用风险档的红 ——
   逾期是已经出问题了，待发货只是待处理。同色会让「有多少活」与「出了多少事」
   分不出轻重。为 0 时整个徽标不渲染（见 layout.blade.php）。 */
.nav .sub a u.act{color:#fff;background:var(--act)}
.nav .sub a u.rk{color:#fff;background:var(--risk)}
.side .me{border-top:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;gap:10px}
.side .me u{width:28px;height:28px;border-radius:50%;background:#EAECEF;display:grid;
  place-items:center;font-size:12px;color:var(--t2);text-decoration:none;font-weight:600;flex:0 0 28px}
.side .me div{font-size:13px;line-height:1.35}
.side .me small{color:var(--t3);font-size:12px}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.top{height:60px;flex:0 0 60px;background:var(--card);border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px}
.top h1{font-size:20px;font-weight:600;letter-spacing:-.2px;white-space:nowrap}
.top .sub{font-size:13px;color:var(--t3);margin-left:10px;font-weight:400}
.body{flex:1;overflow:auto;padding:24px 32px 48px}
.screen{max-width:1560px;margin:0 auto}

/* ── 动作出口 ──────────────────────────────────────────
   做完一件事之后「下一步在哪」。持久、带累计、不自动跳。
   ⚠ 不用成功绿：它不是「报喜」而是「路标」，绿色底会把注意力锁在已完成的事上。
     用最浅的中性卡片 + 近黑主按钮，与全站按钮体系一致。
   空的时候不占高度 —— #exit 常驻在每一页，有内容才有间距。 */
#exit:empty{display:none}
#exit{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.exitbar{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--bd);border-left:3px solid var(--t1);
  border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh)}
.exitbar b{font-size:14px;font-weight:600;display:block}
.exitbar b u{text-decoration:none;font-variant-numeric:tabular-nums}
.exitbar small{display:block;font-size:12px;color:var(--t3);margin-top:2px;line-height:1.5}
/* 没权限那一档：左边的强调条降成灰 —— 它是告知不是入口，不该看起来可点 */
.exitbar.tell{border-left-color:var(--t4)}
.exitbar .tellk{font-size:13px;color:var(--t3)}

/* ── 结果锚点 ──────────────────────────────────────────
   「刚才操作的是哪几单」。用需要行动档的浅橙 + 虚线框 ——
   虚线是因为它是**临时的**：这一轮看完就该消失，不是页面的固定构件。 */
.recent{border:1px dashed var(--warn-bd);background:var(--act-bg);
  border-radius:var(--rc);padding:12px 14px;margin-bottom:14px}
.recent h5{font-size:13px;font-weight:600;color:var(--warn-tx);
  display:flex;align-items:center;gap:7px}
.recent .rr{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 0}
.recent .rr b{font-weight:600;font-variant-numeric:tabular-nums}
.recent .rr .k{color:var(--t3);font-size:12px}
.recent .rr .sp{margin-left:auto}
/* 被点名的那几行。复用选中态那个浅蓝，不新造颜色 */
tbody tr.focus td{background:#F5F8FF}

/* ── 控件 ────────────────────────────────────────────────── */
/* 主按钮用近黑，不用彩色 —— ERP 元素密集，彩色主按钮一多即显廉价 */
.btn{height:34px;padding:0 15px;border-radius:var(--r);border:1px solid var(--bd);
  background:var(--card);font-size:14px;display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn.pri{background:var(--t1);border-color:var(--t1);color:#fff}
.btn.pri:hover{background:#000}
.btn.pri:disabled,.btn:disabled{background:#E5E6EB;border-color:#E5E6EB;color:var(--t4);
  cursor:not-allowed}
.btn.sm{height:28px;padding:0 11px;font-size:13px}
.btn.txt{border-color:transparent;background:none;color:var(--t2);padding:0 8px}
.btn.txt:hover{color:var(--t1);background:var(--hover)}
.btn.rk{color:var(--risk);border-color:#FFCDC7}
.btn.rk:hover{background:var(--risk-bg)}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--rc);box-shadow:var(--sh)}
.tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:5px;
  font-size:13px;line-height:1;white-space:nowrap}
.tag.act{background:var(--act-bg);color:var(--act)}
.tag.risk{background:var(--risk-bg);color:var(--risk)}
.tag.run{color:var(--t1)}
.tag.run:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--run)}
.tag.done{color:var(--t3)}
.sel{height:34px;border:1px solid var(--bd);border-radius:var(--r);background:var(--card);
  padding:0 11px;font-size:14px;color:var(--t2);display:inline-flex;align-items:center;gap:7px;
  cursor:pointer;white-space:nowrap}
.sel:hover{border-color:var(--t3);color:var(--t1)}
.sel s{text-decoration:none;color:var(--t4);font-size:11px}
.sel.on{border-color:var(--t1);color:var(--t1);font-weight:600}
.fld{display:flex;flex-direction:column;gap:7px}
.fld label{font-size:13px;color:var(--t2);display:flex;align-items:center;gap:8px}
.fld label em{font-style:normal;font-size:12px;color:var(--t4)}
/* 窄输入（天数、金额）。`.fval .inp.w-s` 只作用于整页表单，抽屉里要这一条 */
.fld .inp.w-s{max-width:150px}

/* 真复选框 + 同行文字。
   ⚠ 不要拿 `.ck` 凑 —— 那是待发货页的清单组件（纵向 ul/li），
     套上去复选框和文字会分成两行。`.chk` 也不行，那是表格里 JS 切换的假复选框（span）。
   整个标签可点（`<label>` 包住 input），触达面积够大 —— 只点 15px 的方框太苛刻。 */
.cbx{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t2);
  cursor:pointer;user-select:none}
.cbx input{width:15px;height:15px;margin:0;flex:0 0 15px;accent-color:var(--t1);cursor:pointer}
.cbx em{font-style:normal;font-size:12px;color:var(--t4)}

/* 可选的分组块（新增型号里的价格档位）。
   ⚠ 用 `--d-bg` 灰蓝底 + 无边框，与必填字段区分开 —— 加边框会让它看起来
   跟上面的必填项同等重要，而它是可以整块跳过的。 */
.tierbox{background:var(--d-bg);border-radius:var(--r);padding:13px 15px;
  display:flex;flex-direction:column;gap:9px}
.tierbox>b{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.tierbox>b em{font-style:normal;font-size:12px;font-weight:400;color:var(--t4)}
.tierbox>p{margin:-3px 0 2px}
.tierbox .btn{align-self:flex-start}
/* 一档一行：起租天 – 至天 – 日租金 – 删。三个数字框等宽，对齐成一列好扫视 */
.tier{display:flex;align-items:center;gap:7px}
.tier .inp{height:33px;font-size:13px;padding:0 9px;flex:1;min-width:0}
.tier s{text-decoration:none;color:var(--t4);font-size:12px}
.inp{height:38px;border:1px solid var(--bd);border-radius:var(--r);padding:0 12px;font:inherit;
  color:var(--t1);background:var(--card);outline:none;width:100%}
.inp:focus{border-color:var(--t1)}
textarea.inp{height:auto;padding:9px 12px;line-height:1.6;resize:vertical}

.err{padding:20px;background:var(--risk-bg);border:1px solid #FFCDC7;border-radius:var(--rc);
  color:var(--risk);font-size:13px;line-height:1.7;white-space:pre-wrap;
  font-family:ui-monospace,monospace;max-height:340px;overflow:auto}
.load{padding:60px;text-align:center;color:var(--t3)}
/* 页尾说明：默认收起。
   这些文字是给「第一次看这一页的人」与设计评审用的，老用户每天看同一段话
   就是噪音。折叠后只占一行，需要时点开。 */
.hint{font-size:13px;color:var(--t3);padding:16px 2px 0;line-height:1.75;max-width:1080px}
details.hint summary{cursor:pointer;color:var(--t4);font-size:12px;list-style:none;
  display:inline-flex;align-items:center;gap:5px;user-select:none}
details.hint summary::-webkit-details-marker{display:none}
details.hint summary:before{content:"?";width:15px;height:15px;border-radius:50%;
  border:1px solid var(--t4);display:grid;place-items:center;font-size:10px;flex:0 0 15px}
details.hint summary:hover{color:var(--t2)}
details.hint[open] summary{margin-bottom:8px;color:var(--t3)}
details.hint > div{padding-left:20px;border-left:2px solid var(--line)}

/* 空状态须给引导 —— 「暂无数据」是敷衍 */
.empty{padding:64px 24px;text-align:center}
.empty b{display:block;font-size:15px;font-weight:600;margin-bottom:6px}
.empty p{font-size:13px;color:var(--t3);line-height:1.7;max-width:420px;margin:0 auto 18px}

/* ── tab / 工具条 ────────────────────────────────────────── */
/* tab 显示 0 也有价值 —— 说明这类没有积压 */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.tabs button{height:40px;padding:0 14px;font-size:14px;color:var(--t2);position:relative;
  display:flex;align-items:center;gap:7px}
.tabs button:hover{color:var(--t1)}
.tabs button.on{color:var(--t1);font-weight:600}
.tabs button.on:after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;
  background:var(--t1)}
.tabs button u{text-decoration:none;font-size:12px;color:var(--t3);background:var(--line);
  border-radius:9px;padding:1px 7px;line-height:1.5}
.tabs button.on u{background:var(--t1);color:#fff}
.tabs button.ok u{background:#E8FFEA;color:#009A29}
.tabs button.ok.on u{background:var(--run);color:#fff}
.tabs button.rk u{background:var(--risk-bg);color:var(--risk)}
.tabs button.rk.on u{background:var(--risk);color:#fff}

.bar{display:flex;align-items:center;gap:10px;padding:14px 0;flex-wrap:wrap}
.bar .sp{flex:1}
/* 单一搜索框覆盖多字段 —— 商家记得的是「那个姓王的」或「那个 pocket3」 */
.srch{flex:1;min-width:260px;height:36px;border:1px solid var(--bd);border-radius:var(--r);
  background:var(--card);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--t4)}
.srch:focus-within{border-color:var(--t1)}
.srch input{flex:1;border:none;outline:none;font:inherit;color:var(--t1);background:none}
.vsw{display:inline-flex;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.vsw button{height:34px;padding:0 13px;font-size:13px;color:var(--t2);background:var(--card)}
.vsw button.on{background:var(--t1);color:#fff;font-weight:600}

/* ── 表格 ────────────────────────────────────────────────── */
/* 行高 54px：仓库光线差，密排小字不可用。默认列数 6，其余入列设置。
   ⚠ 一度以为「看着挤」要靠加行高解决，调到 62 试过 —— 方向错了：
     反馈说的是**横向**挤（右边几列挨在一起），而那是 tbl() 把多余宽度
     全倒进唯一的 flex 列造成的，见 app.js 里 colgroup 那段。行高与它无关。 */
/* 窄屏横向滚动，而不是把列挤变形。列宽由 tbl() 的 colgroup 定死。 */
.tb{background:var(--card);border:1px solid var(--bd);border-radius:var(--rc);
  box-shadow:var(--sh);overflow-x:auto}
table{width:100%;border-collapse:collapse;background:var(--card);table-layout:fixed}
thead th{height:44px;text-align:left;font-size:13px;font-weight:400;color:var(--t3);
  padding:0 14px;border-bottom:1px solid var(--bd);white-space:nowrap;background:var(--card)}
thead th.r,tbody td.r{text-align:right}
tbody td{height:54px;padding:0 14px;border-bottom:1px solid var(--line);font-size:14px;
  vertical-align:middle;overflow:hidden}
/* table-layout:fixed 下超宽内容默认会硬撑，给单行文本兜一个省略号 */
td.ell{text-overflow:ellipsis;white-space:nowrap}
tbody tr:hover td{background:var(--hover)}
tbody tr:last-child td{border-bottom:none}
tbody tr.sel td{background:#F5F8FF}
td.g{color:var(--t3)}
td .n2{display:flex;flex-direction:column;gap:1px;line-height:1.35;min-width:0}
td .n2 small{font-size:12px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 主值 + 标记同一行。tag 是 24px 高的 inline-flex，
   塞进纵向 flex 的文本流里会整块换行 —— 必须显式给一个横向行 */
td .n2 .hd1{display:flex;align-items:center;gap:6px;min-width:0}
td .n2 .hd1>em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 操作列**常显**。
   ⚠ 原先是悬停才显形，理由是「每行按钮同时亮着会把表格变成按钮墙」——
     这条推翻了。实测各页每行只有 1-2 个按钮（看排期 / 详情 / 入库 + 详情），
     谈不上墙；而藏起来的代价是实的：
       · 不悬停就不知道有这些功能 —— 自助开通的 SaaS 付不起这个上手成本；
       · 看不出哪些行需要动手（逾期行的红「催还」本身就是信息）；
       · 触摸设备没有悬停，移动端一上来这些动作直接不可达。
     按钮多到成墙时，该做的是减少按钮或让它们更安静（`.btn.txt` 无边框灰字），
     而不是把它们藏起来。
   ⚠ `justify-content:flex-end` 是必须的：操作列靠 td 上的 `text-align:right`
     对齐，而 **text-align 管不了 flex 子元素**（默认 flex-start）。
     于是按钮会贴在操作列的左边缘 —— 列窄时几乎填满看不出来，
     列一宽就变成「一个按钮浮在一片空白里」。实测在订单页暴露。 */
td .ops{display:flex;gap:4px;justify-content:flex-end}
.chk{width:16px;height:16px;border:1px solid var(--t4);border-radius:4px;display:inline-block;
  vertical-align:-3px;cursor:pointer;background:var(--card)}
.chk.on{background:var(--t1);border-color:var(--t1);position:relative}
.chk.on:after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;
  border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.bar2{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#F5F8FF;
  border-bottom:1px solid #DEE5FF;font-size:13px}

/* 「还缺什么」四位色条 —— 一眼看出缺几项，不必读文字。
   这里保留近黑：4×16px 的小色块不构成大面积填充，且「已就绪」本就该是最实的那档。 */
.miss{display:flex;align-items:center;gap:7px}
.miss .pips{display:flex;gap:3px}
.miss .pips s{width:16px;height:4px;border-radius:2px;background:var(--line);
  text-decoration:none;display:block}
.miss .pips s.y{background:var(--t1)}
.miss .pips s.n{background:var(--warn-bd)}
.miss em{font-style:normal;font-size:13px;color:var(--act)}
.miss em.ok{color:var(--run)}

/* ── 分页 ────────────────────────────────────────────────── */
.pg{display:flex;align-items:center;gap:10px;padding:16px 2px 0;font-size:13px;color:var(--t3)}
.pg .sp{flex:1}

/* ── 指标卡 ──────────────────────────────────────────────── */
/* 卡片第二行比主数字更有用：「17 待发货」是死数，「其中 3 单可发」才是行动依据 */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px}
.kpi{background:var(--card);border:1px solid var(--bd);border-radius:var(--rc);
  box-shadow:var(--sh);padding:16px 18px;display:block;cursor:pointer}
.kpi:hover{border-color:var(--t3)}
.kpi h4{font-size:13px;font-weight:400;color:var(--t3);display:flex;align-items:center;gap:5px;
  margin-bottom:6px}
.kpi h4 s{text-decoration:none;color:var(--t4);font-size:11px;margin-left:auto}
.kpi b{font-size:32px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;
  display:block}
.kpi small{display:block;font-size:12px;color:var(--t3);margin-top:5px;line-height:1.5}
.kpi small.act{color:var(--act)}
.kpi small.rk{color:var(--risk)}
.kpi small.ok{color:var(--run)}
.kpi.rk b{color:var(--risk)}
.kpi.act b{color:var(--act)}

/* ── 区块标题 ────────────────────────────────────────────── */
.sec{display:flex;align-items:baseline;gap:10px;padding:26px 2px 12px}
.sec h3{font-size:15px;font-weight:600}
.sec small{font-size:13px;color:var(--t3)}
.sec .sp{flex:1}

/* ── 订单卡片（待发货、工作台共用）───────────────────────── */
.cards{display:grid;gap:12px}
.oc{background:var(--card);border:1px solid var(--bd);border-radius:var(--rc);box-shadow:var(--sh);
  padding:16px 18px;display:grid;grid-template-columns:1fr 268px;gap:18px}
@media(max-width:1100px){ .oc{grid-template-columns:1fr} }
/* 边框承载状态：绿=可发、橙=需人介入。比卡内加状态标签更快 */
.oc.ready{border-color:var(--ok-bd)}
.oc.alert{border-color:var(--warn-bd)}
/* 结果锚点点名的卡片。⚠ 用外发光而不是改边框色 —— 边框色已经在表达就绪状态，
   抢了它就分不清「这单可发」和「这单是刚建的」 */
.oc.focus{box-shadow:0 0 0 2px #C9DCFF}
.oc.risk{border-color:#FFCDC7}
.oc .hd2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.oc .hd2 b{font-size:15px;font-weight:600}
.oc .hd2 .dotc{width:7px;height:7px;border-radius:50%;background:var(--act);flex:0 0 7px}
.oc .hd2 .dotc.ok{background:var(--run)}
.chip{font-size:12px;height:22px;padding:0 8px;border-radius:4px;display:inline-flex;
  align-items:center;gap:4px;background:var(--line);color:var(--t2);white-space:nowrap}
.chip.grp{background:#EEF2FF;color:#3A57C8;cursor:pointer}
.chip.plat{background:#FFF4E6;color:#B25E00}
.oc .goods{display:flex;gap:12px;align-items:flex-start}
.oc .thumb{width:52px;height:52px;flex:0 0 52px;border-radius:8px;background:#F2F3F5;
  display:grid;place-items:center;font-size:17px;color:var(--t4);font-weight:600}
.oc .kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:13px;margin-top:10px}
.oc .kv dt{color:var(--t3)}
.oc .kv dd{color:var(--t1);display:flex;align-items:center;gap:6px}
.oc .kv .mny{font-weight:600}
.cp{cursor:pointer;color:var(--t4);font-size:12px;text-decoration:none}
.cp:hover{color:var(--t1)}
.oc .addr{margin-top:10px;font-size:13px;color:var(--t2);background:var(--bg);
  border-radius:var(--r);padding:8px 11px;line-height:1.5}
.oc .side2{border-left:1px solid var(--line);padding-left:18px;display:flex;flex-direction:column}
@media(max-width:1100px){ .oc .side2{border-left:none;border-top:1px solid var(--line);
  padding:14px 0 0} }
/* 就绪清单竖排：缺的项自己跳出来，不用横着比对四列 */
.ck{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.ck li{list-style:none;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t2)}
.ck li i{font-style:normal;width:16px;height:16px;border-radius:5px;flex:0 0 16px;display:grid;
  place-items:center;font-size:10px;font-weight:700}
.ck li i.y{background:var(--t1);color:#fff}
.ck li i.n{background:#FFEDD4;color:var(--warn-tx)}
.ck li.done{color:var(--t3)}
.oc .acts{margin-top:auto;display:flex;gap:7px;flex-wrap:wrap}

/* ── 抽屉：详情、编辑、绑定设备一律用它，保留列表上下文 ──── */
.mask{position:fixed;inset:0;background:rgba(29,33,41,.45);z-index:50;display:none}
.mask.on{display:block}
.drawer{position:absolute;top:0;right:0;bottom:0;width:460px;max-width:92vw;background:var(--card);
  box-shadow:-8px 0 32px rgba(0,0,0,.16);display:flex;flex-direction:column;
  animation:sl .18s cubic-bezier(.2,.8,.3,1)}
.drawer.wide{width:660px}
@keyframes sl{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.drawer h4{font-size:16px;font-weight:600;padding:18px 22px 14px;display:flex;
  justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:12px}
.drawer h4 button{color:var(--t4);font-size:18px;line-height:1}
.drawer h4 button:hover{color:var(--t1)}
.dbody{padding:18px 22px 24px;overflow:auto;display:flex;flex-direction:column;gap:16px;flex:1}
.dfoot{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:9px;
  justify-content:flex-end}
.ordinfo{background:var(--bg);border-radius:var(--r);padding:11px 13px;font-size:13px;
  color:var(--t2);line-height:1.65}
.ordinfo b{color:var(--t1)}
.dl{display:grid;grid-template-columns:96px 1fr;gap:9px 14px;font-size:13px}
.dl dt{color:var(--t3)}
.dl dd{color:var(--t1)}

/* 二次确认才用弹窗 */
.dlg{position:absolute;left:50%;top:80px;transform:translateX(-50%);width:520px;max-width:92vw;
  background:var(--card);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.18);
  display:flex;flex-direction:column;max-height:calc(100% - 160px)}
.dlg h4{font-size:16px;font-weight:600;padding:18px 22px 14px;display:flex;
  justify-content:space-between;align-items:center}
.dlg .dbody{padding:0 22px 4px}
.dlg .dfoot{border-top:none;padding:16px 22px 20px}
.lead{font-size:13px;color:var(--t2);line-height:1.7}
.lead b{color:var(--t1)}

/* ── 消息条：失败必须给可读原因与出路 ───────────────────── */
.msg{border-radius:var(--r);padding:10px 12px;font-size:13px;line-height:1.6}
.msg.bad{background:var(--risk-bg);color:var(--risk);border:1px solid #FFCDC7}
.msg.good{background:#E8FFEA;color:#009A29;border:1px solid var(--ok-bd)}
.msg.warn{background:var(--act-bg);color:var(--warn-tx);border:1px solid var(--warn-bd)}
.msg.info{background:#F5F7FF;color:#3A57C8;border:1px solid #DEE5FF}
.msg b{font-weight:600}

/* 候选列表（扫码兜底、选择器共用）*/
.cands{border:1px solid var(--bd);border-radius:var(--r);max-height:250px;overflow:auto}
.cands .c{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-bottom:1px solid var(--line);font-size:13px}
.cands .c:last-child{border-bottom:none}
.cands .c:hover{background:var(--hover)}
.cands .c .sp{flex:1}
.cands .c b{font-weight:600;font-variant-numeric:tabular-nums}
.cands .c small{color:var(--t3);font-size:12px}
.cands .none{padding:18px;text-align:center;color:var(--t3);font-size:13px;line-height:1.7}

.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:80;
  background:var(--t1);color:#fff;font-size:13px;padding:10px 16px;border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.2);max-width:70vw}

/* ── 进度条（空置率、ROI 回本进度共用）────────────────────
   默认走中性灰蓝，不用近黑。带语义的（已回本 / 空置过高）才上语义色 ——
   有颜色的即需留意，这与「完成态一律灰字无底色」是同一条规则。 */
.bara{height:6px;border-radius:3px;background:var(--d-bg);overflow:hidden;min-width:60px}
.bara i{display:block;height:100%;background:var(--d2);border-radius:3px}
.bara i.act{background:var(--act)}
.bara i.rk{background:var(--risk)}
.bara i.ok{background:var(--run)}

/* ── 归还三跳 ─────────────────────────────────────────────
   归还是租赁中 → 回程在途 → 质检中 → 已完结三跳，每跳对应物理上
   一个不同时刻。进度条让员工知道现在在哪一步、还剩几步，
   而不是每次点开都要先猜这单走到哪了。 */
.steps{display:flex;align-items:center;gap:0;margin-bottom:15px}
.steps i{flex:1;height:1px;background:var(--bd);margin:0 8px}
.stp{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--t4);
  white-space:nowrap}
.stp s{width:19px;height:19px;border-radius:50%;border:1px solid var(--bd);
  display:grid;place-items:center;font-size:11px;text-decoration:none;
  font-variant-numeric:tabular-nums}
.stp.on{color:var(--t1);font-weight:600}
.stp.on s{background:var(--t1);border-color:var(--t1);color:#fff}
.stp.ok{color:var(--t3)}
.stp.ok s{background:var(--run);border-color:var(--run);color:#fff}

/* 逐台定级卡。一台一张，因为分级是逐台的事实 ——
   做成一个下拉批量套用会让员工图省事全选「正常」。 */
.insp{border:1px solid var(--bd);border-radius:var(--r);padding:12px 13px;
  margin-bottom:9px}
.insp.no{background:var(--bg);border-style:dashed}
.insp.no small{color:var(--t3);font-size:12px;line-height:1.65;display:block;margin-top:5px}
.ihd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.ihd b{font-weight:600;font-variant-numeric:tabular-nums}
.ihd .g{color:var(--t3);font-size:13px}
.ihd small{color:var(--t4);font-size:12px}

/* 五档分级平铺，不用下拉 —— 五个选项全露出来比点开再选快，
   而且每档的后果不同，藏起来会让人随手选第一个 */
.gsw{display:flex;flex-wrap:wrap;gap:6px}
.gsw button{height:31px;padding:0 12px;font-size:13px;color:var(--t2);
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r)}
.gsw button:hover{border-color:var(--d4)}
.gsw button.on{background:var(--t1);border-color:var(--t1);color:#fff;font-weight:600}

/* 选完当场显示后果：设备去哪 / 开不开维修单 / 索不索赔。
   等提交后才发现开了维修单就太晚了 */
.gres{font-size:12px;color:var(--t3);line-height:1.6;margin-top:9px}
.gres b{color:var(--t2);font-weight:600}
.gmoney{display:flex;gap:11px;flex-wrap:wrap;margin-top:9px}
.gmoney label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--t3)}
.inp.sm{height:31px;width:108px;font-size:13px;padding:0 9px}

/* ── 催还 ─────────────────────────────────────────────────
   ⚠ 系统不发消息，只生成话术 + 留痕（平台无 API）。所以这里没有
   「发送」按钮，只有「复制话术」，旁边写清去哪发。 */
.vsw.wrap{flex-wrap:wrap;border:none;gap:6px;overflow:visible}
.vsw.wrap button{border:1px solid var(--bd);border-radius:var(--r)}
.sec h3 em{font-style:normal;font-weight:400;font-size:12px;color:var(--t4);margin-left:6px}

/* 催还历史。催过几次要看得见 —— 不知道催过几次就会重复骚扰，
   或者该拉黑时拿不出依据 */
.urow{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;
  margin-bottom:8px;background:var(--bg)}
.uhd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.uhd .g{color:var(--t3);font-size:12px}
.uhd small{color:var(--t4);font-size:12px}
.ucon{font-size:12px;color:var(--t2);line-height:1.7;white-space:pre-wrap;
  max-height:88px;overflow:auto}
.urow > small{display:block;margin-top:6px;color:var(--t4);font-size:12px}

/* 复制按钮与「去哪发」说明并排 —— 这句说明是硬约束的体现，不能藏 */
.urow2{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:-4px}
.urow2 .g{font-size:12px;color:var(--t3);line-height:1.6;flex:1;min-width:200px}
.urow2 .g b{color:var(--t2);font-weight:600}

/* 档期条窄屏塌成两列 —— 仓管有时用平板录单 */
@media (max-width:820px){.sched{grid-template-columns:repeat(2,1fr)}}

/* ══ 整页表单 ══════════════════════════════════════════════
   ⚠ **整页表单不要用 `.fld`。** `.fld` 是纵向 label+input，为**抽屉**写的 ——
     抽屉宽 400-600px，纵向堆叠合适。整页宽 1000px+ 时它会让每个输入框
     铺满一整行，满屏巨宽空框、没有对齐线可循。实际踩过（手工建单首版）。

   整页表单用**行式**：左标签定宽 + 右输入限宽 + 行间分隔线。
   标签列形成一条竖直对齐线，输入列形成第二条 —— 两条线就是 ERP 表单
   「看起来有设计」的全部来源，不靠装饰。 */
.fm{background:var(--card);border:1px solid var(--bd);border-radius:var(--rc);
  box-shadow:var(--sh);padding:2px 20px 10px;margin-bottom:12px}
.fm > h3{font-size:15px;font-weight:600;padding:16px 2px 6px;
  display:flex;align-items:baseline;gap:9px}
.fm > h3 em{font-style:normal;font-weight:400;font-size:12px;color:var(--t4)}
.fm > h3 .sp{flex:1}

/* 表单行。`.frow` 同时用于录单的逐字段复核（带置信度标与原文出处），
   两处共用一套对齐关系，看起来才是同一个系统。 */
.frow{display:flex;gap:16px;align-items:flex-start;padding:11px 2px;
  border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:none}
/* 字段四态。
   ⚠ **「未识别」不等于「有问题」。** 首版把所有未识别一律染橙，
     押金/保险/备注里的号这些「可选且本来就没有」的字段铺了半屏橙色，
     真正要核的两项被淹掉 —— 天天报假警等于没有警。
   只有「缺必填」与「要核一下」染色，可选空缺一律中性。 */
.frow.s-miss{background:var(--risk-bg);margin:0 -20px;padding:11px 20px;
  box-shadow:inset 2px 0 0 var(--risk)}
.frow.s-warn,.frow.s-pick{background:var(--act-bg);margin:0 -20px;padding:11px 20px;
  box-shadow:inset 2px 0 0 var(--act)}
/* 可选空缺：不高亮，标签压灰 —— 它不需要任何动作 */
.frow.s-opt .flab{color:var(--t4)}
.frow.s-opt .inp{background:var(--bg);border-color:var(--line)}
/* 兼容旧类名 */
.frow.rv{background:var(--act-bg);margin:0 -20px;padding:11px 20px;
  box-shadow:inset 2px 0 0 var(--act)}
.flab{width:104px;flex-shrink:0;font-size:13px;color:var(--t2);padding-top:7px;
  display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.flab .req{color:var(--risk)}
.fval{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
/* 限宽是关键 —— 不限宽就回到「巨宽空框」那个问题 */
.fval .inp{width:100%;max-width:430px}
.fval .inp.w-s{max-width:150px}
.fval textarea.inp{max-width:640px}
/* 一行放两三个窄输入（省市区、日期+天数）*/
.fval .grp{display:flex;gap:9px;flex-wrap:wrap}
.fval .grp .inp{max-width:none;flex:1;min-width:104px}
.ev{color:var(--t4);font-size:12px;line-height:1.6;word-break:break-all}
.ev b{color:var(--t3);font-weight:400}
@media(max-width:760px){
  .frow{flex-direction:column;gap:6px}
  .flab{width:auto;padding-top:0}
  .fval .inp{max-width:none}
}

/* ══ 粘贴识别区 ════════════════════════════════════════════
   录单是这一页唯一要做的动作，必须是**视觉焦点**。首版只是个白框加一个
   黑色小按钮，整屏没有重心，员工不知道该往哪儿看。

   焦点靠三样做出来，不靠颜色：灰蓝底把它从白色页面里托起来、
   虚线边框暗示「往这里放东西」、主按钮占满整行宽度。
   ⚠ 不用渐变、不用彩色按钮 —— 那会跟另外 6 个页面的视觉语言打架。 */
.reco{background:var(--d-bg);border:1px dashed var(--d4);border-radius:var(--rc);
  padding:15px 16px 16px}
.reco .rh{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.reco .rh b{font-size:14px;font-weight:600}
.reco .rh .sp{flex:1}
.reco .rh small{font-size:12px;color:var(--t3)}
.reco textarea{width:100%;height:172px;background:var(--card);
  border:1px solid var(--bd);border-radius:var(--r);padding:11px 13px;
  font:inherit;line-height:1.7;resize:vertical;color:var(--t1)}
.reco textarea:focus{outline:none;border-color:var(--d3)}
.reco textarea::placeholder{color:var(--t4);line-height:1.9}
.reco .rf{display:flex;align-items:center;gap:12px;margin-top:11px}
.reco .rf .btn{height:38px;padding:0 24px;font-size:14px}
.reco .rf small{color:var(--t3);font-size:12px;line-height:1.6;flex:1}

/* 识别前的引导。一片空白会让人以为页面没加载完 */
.guide{border:1px solid var(--bd);border-radius:var(--rc);background:var(--card);
  padding:20px;margin-top:12px}
.guide h4{font-size:14px;font-weight:600;margin-bottom:10px}
.guide ol{margin:0;padding-left:20px;color:var(--t2);font-size:13px;line-height:2}
.guide ol b{color:var(--t1)}

/* 客户搜索结果。先搜再建 —— 直接新建会让同一个人攒出多条档案，
   逾期史随之碎掉，而那是档期确信度分层的判据 */
.cust{border:1px solid var(--bd);border-radius:var(--r);max-height:216px;overflow:auto;
  max-width:430px;background:var(--card)}
.cust .c{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:13px;
  border-bottom:1px solid var(--line);cursor:pointer}
.cust .c:last-child{border-bottom:none}
.cust .c:hover{background:var(--hover)}
.cust .c .sp{flex:1;min-width:0}
.cust .c small{color:var(--t3);font-size:12px}

/* 租期区间。这是**跟客户沟通时说的那句话**（「您这单 10.2 到 10.8」），
   底下那排 发货/到货/应还/入仓 是系统内部口径。
   ⚠ 计费自**收货次日**起算，所以起租日 = 到货日 + 1 —— 三笔真实样本印证：
     支付宝把区间直接打在页面上（10.9 收货 → 租期 10.10 至 10.12「3天1期」），
     两笔淘宝单的买家备注写「10.2-10.8」与「28号拿到，29号用」。
   做成整块而非一行小字：员工对客户报的就是这个区间，标错一天就要吵架。 */
.rentwin{background:var(--card);border:1px solid var(--bd);border-radius:var(--rc);
  padding:14px 16px;margin-bottom:12px;box-shadow:var(--sh)}
.rentwin .big{font-size:15px;color:var(--t2);display:flex;align-items:baseline;
  gap:8px;flex-wrap:wrap}
.rentwin .big b{font-size:19px;font-weight:600;color:var(--t1);
  font-variant-numeric:tabular-nums}
.rentwin .big em{font-style:normal;font-size:13px;color:var(--t3);
  background:var(--d-bg);border-radius:4px;padding:2px 8px}
.rentwin .note{font-size:12px;color:var(--t3);line-height:1.8;margin-top:8px;
  padding-top:8px;border-top:1px solid var(--line)}
.rentwin .note b{color:var(--t2);font-weight:600}

/* 退出登录：挂在侧边栏身份块右侧。平时压到很淡，hover 才显出来 ——
   它是低频且不可逆的动作，不该跟高频导航争注意力 */
.side .me a{margin-left:auto;text-decoration:none;color:var(--d5);font-size:15px;
  line-height:1;padding:4px 2px;flex:0 0 auto;overflow:hidden}
.side .me a:hover{color:var(--risk)}

/* 采购明细行：型号 / 台数 / 单价 / 成色 / 删。四个输入等宽对齐成列好扫视。
   ⚠ 类名 `.pl` `.devbox` `.dev` 都是新的（加之前 grep 过）—— 在共享层复用
     已有类名前必须查一遍语义，否则会像 `.ck`（清单组件）被当复选框那样错位。 */
.pl{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.pl .inp{height:33px;font-size:13px;padding:0 9px;flex:1;min-width:0}
.pl .inp[data-f="qty"],.pl .inp[data-f="price"]{flex:0 0 84px}
.pl .btn{flex:0 0 auto}

/* 入库时逐台填的编号 / SN / 仓位。默认收起 —— 一次入 20 台展开会糊一屏 */
.devbox{display:flex;flex-direction:column;gap:6px;margin-top:6px;
  padding:9px;background:var(--d-bg);border-radius:var(--r)}
.devbox .dev .inp{height:31px;font-size:13px;padding:0 9px}

/* 批量复核：一单一块，左边关键字段只读、右边每台货一个型号下拉。
   一屏要能扫 20 单，所以块之间只用细线分隔，不用卡片阴影堆叠 ——
   20 张卡片会让人看不出「哪些还要动手」。状态标靠右对齐成一列扫视。 */
.brow{border:1px solid var(--bd);border-radius:var(--r);margin-bottom:10px;background:var(--card)}
.brow-h{display:flex;align-items:center;gap:10px;padding:9px 13px;
  border-bottom:1px solid var(--line);font-size:13px}
.brow-h b{font-size:14px;font-weight:600}
.brow-h .brow-st{margin-left:auto;flex:0 0 auto}
.brow-b{display:flex;gap:16px;padding:11px 13px;align-items:flex-start}
/* 左列：只读字段，两列网格。缺的用红字标出来，不用图标 —— 一屏 20 单，图标会糊成一片 */
.brow-f{flex:0 0 274px;display:grid;grid-template-columns:1fr;gap:5px;font-size:13px}
.brow-f>div{display:flex;gap:7px;color:var(--t1)}
.brow-f s{text-decoration:none;color:var(--t3);flex:0 0 34px}
.brow-f i{font-style:normal;color:var(--risk)}
/* 右列：每台货一行 —— 标题 + 型号下拉 + 新建 */
.brow-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.brow-d{display:flex;align-items:center;gap:9px}
.brow-t{flex:1;min-width:0;font-size:13px;line-height:1.4}
.brow-t small{display:block;color:var(--t3);font-size:12px}
.brow-d .inp{flex:0 0 262px;height:33px;font-size:13px;padding:0 9px}
.brow-d a{flex:0 0 auto;text-decoration:none}
/* 建完的置灰、没建成的左侧红条 —— 不刷新整屏，员工要看得出哪几单没成 */
.brow-ok{opacity:.55}
.brow-bad{border-left:3px solid var(--risk)}

/* ── 扫码就绪指示 ──────────────────────────────────────────
   不显示状态的话，仓管不知道「现在扫了到底有没有用」——
   而扫码失焦是静默失败，他只能靠扫第二次才发现。
   scan-hit 是扫中时的一次短闪，给一个「收到了」的即时反馈 */
[data-scan-hint]{
  display:none; align-items:center; gap:7px; font-size:12px; color:var(--t2);
  border:1px solid var(--bd); border-radius:var(--r); padding:7px 11px;
}
[data-scan-hint].scan-on{display:inline-flex; border-color:var(--ok-bd); background:#F1FCF3}
[data-scan-hint].scan-on:before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--run); flex:0 0 7px;
}
[data-scan-hint].scan-hit{background:#D9F7DF; border-color:var(--run)}

/* ── 工位（扫码枪 + 摄像头的固定工位）──────────────────────
   与手机端是两种作业模式：工位靠扫码枪连扫做批量，手机做单笔移动作业。
   扫码枪 0.2 秒一个码，手机相机约 2 秒 —— 批量只可能在工位上。 */
.kbd{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;font-size:11px;color:var(--t3)}
.kbd kbd{
  font:inherit; border:1px solid var(--bd); border-bottom-width:2px; border-radius:4px;
  padding:0 5px; color:var(--t2); background:var(--card); margin-right:4px;
}
/* 工位主区：左清单 + 右计数/摄像头。右栏定宽，清单不因计数变化而抖 */
.stn{display:flex;gap:16px;align-items:flex-start}
.stn>.stn-l{flex:1;min-width:0}
.stn>.stn-r{width:172px;flex:0 0 172px}
.stn-r .cam{
  border:1px solid var(--bd); border-radius:var(--r); background:var(--d-bg);
  height:96px; display:grid; place-items:center; color:var(--t3); font-size:11px; text-align:center;
}
/* 歧义行：要人按一下数字键才能定，必须比其他行显眼 */
.stn-pick{display:flex;gap:5px;flex-wrap:wrap}
.stn-pick s{
  text-decoration:none; font-size:12px; border:1px solid var(--bd); border-radius:4px;
  padding:2px 8px; color:var(--t2); background:var(--card); cursor:pointer; white-space:nowrap;
}
.stn-pick s:hover{border-color:var(--t2)}
.stn-pick s.on{border-color:var(--t1);color:var(--t1);font-weight:600}
tr.stn-need{background:var(--act-bg)}
tr.stn-bad{background:var(--risk-bg)}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}