* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* hidden 属性必须是「真的看不见」。
   否则像 .u-inline { display:flex } 这种规则会盖掉 [hidden] 自带的 display:none —— 踩过。 */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: #f5f6f8;
  color: #222;
  -webkit-text-size-adjust: 100%;
}

/* 顶栏 */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 48px;
  background: #f57c00;
  color: #fff;
}
.topbar .left { display: flex; align-items: center; gap: 10px; }
.topbar .brand { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #fff; text-decoration: none; }
.topbar .brand img { width: 26px; height: 26px; border-radius: 6px; }
.topbar .home-btn {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.18);
  touch-action: manipulation;
}
.topbar .home-btn:active { background: rgba(255,255,255,.32); }
.topbar .user-info {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,.22);
  white-space: nowrap;
  cursor: pointer;           /* 现在可点了，给个手型提示 */
}
.topbar nav { display: flex; gap: 4px; }
.topbar nav a {
  color: #fff;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 15px;
  touch-action: manipulation;
}
.topbar nav a:hover { background: rgba(255,255,255,.15); }

main { max-width: 1000px; margin: 0 auto; padding: 16px 12px 40px; }

/* 电脑端（≥900px）全屏宽度展示，手机端保持原样 */
@media (min-width: 900px) {
  main { max-width: none; padding: 16px 24px 40px; }
}
h1 { font-size: 20px; margin: 8px 0 12px; }
.hint { color: #666; font-size: 14px; }
.hint-bold { font-weight: 700; color: #333; }   /* 加粗版提示（成品技术要求 搜索框上方） */

/* 表单 */
input, button, select {
  font-size: 16px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
input, select { background: #fff; }
input { width: 100%; }
input, button, select { min-height: 44px; }
button { touch-action: manipulation; }
button {
  background: #f57c00;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}
button.danger { background: #d33; }
button.unlock { background: #388e3c; }
input[type="checkbox"] { width: auto; }

/* 搜索栏 */
.search { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.search input { flex: 1 1 200px; }
.search select { max-width: 130px; }

/* 合并规格勾选（油漆库） */
.merge-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.merge-check.on { color: #f57c00; }
.merge-check input { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; }

/* 登录框 */
.login-box {
  max-width: 360px;
  margin: 12vh auto 0;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  text-align: center;
}
.login-box h1 { margin-bottom: 4px; }
.login-box .logo { width: 72px; height: 72px; border-radius: 16px; display: block; margin: 0 auto 10px; }
.login-box form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.reg-btn {
  width: 100%;
  margin-top: 12px;
  background: #fff;
  color: #f57c00;
  border: 1px solid #f57c00;
}
.reg-btn:active { background: #fff3e0; }

/* 注册弹窗 */
.reg-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.reg-modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.reg-modal-box img { width: 100%; border-radius: 8px; display: block; }
.reg-modal-box p { margin: 14px 0; font-size: 15px; color: #333; font-weight: 600; text-align: center; }
.reg-modal-box button { width: 100%; }

/* 网站公告弹窗：顶部做成「一键分享」那种橙色横幅（圆角 logo + 返航 U9 + 标题）。
   整张卡固定 3:4（用户要求）：橙区 + 正文 + 按钮三段，只有正文区滚。 */
.notice-box {
  position: relative;             /* 倒计时标签要绝对定位到右上角 */
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 3 / 4;            /* 整张卡 3:4：宽 380 -> 高 507 */
  max-height: 86vh;               /* 屏幕特别矮时别顶出可视区（此时比例会让位） */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.24);
  text-align: left;
}

/* ============ 配了图的公告：**不套卡片框**，直接把图放大 ============
   用户反馈：3:4 的卡片框会把图挤小 / 显示不全，配了图就干脆不要框。
   下面每条都比 .notice-box 那条更具体（多一个 .has-img），所以能盖掉它，
   包括 @supports 里那句 height: 507px 的兜底。 */
.notice-box.has-img {
  aspect-ratio: auto;
  height: auto;
  width: auto;
  max-width: 94vw;
  max-height: 92vh;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  gap: 12px;
  align-items: center;
}
.notice-box.has-img .notice-head { display: none; }   /* 橙色横幅也去掉，只留图 */
.notice-box.has-img .notice-body {
  padding: 0;
  background: transparent;
  overflow: visible;
  flex: 0 1 auto;
}
.notice-box.has-img .notice-img {
  width: auto;
  max-width: 94vw;
  max-height: 76vh;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
/* 图下面的文字（如果有）做成一张可以自己滚的小白卡 */
.notice-box.has-img .notice-text {
  margin-top: 12px;
  padding: 12px 14px;
  max-height: 22vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
}
.notice-box.has-img .notice-foot { padding: 0; }
.notice-box.has-img .notice-foot button { width: auto; min-width: 140px; }

/* 倒计时：飘在**右上角**（有图时才出现） */
.notice-count {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.notice-count[hidden] { display: none; }
/* 老浏览器（不支持 aspect-ratio 的 WebView）兜底：直接给个同高的固定值 */
@supports not (aspect-ratio: 3 / 4) {
  .notice-box { height: 507px; }
}
.notice-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #f57c00;            /* 和分享图横幅同一个橙 */
  color: #fff;
  flex: none;                     /* 三段固定：头尾不动，中间滚 */
}
.notice-logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex: none;
  background: #fff;
}
.notice-brand { font-size: 18px; font-weight: 700; line-height: 1.2; }
.notice-title { font-size: 13px; margin-top: 3px; opacity: .92; }
.notice-body {
  padding: 18px;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  /* ⚠️ 这里**不能**是 pre-wrap：这一层现在同时装图片和文字，
     源码里那几个换行会被当成真的换行，渲出一串空行。
     pre-wrap 挪到下面 .notice-text（只包文字）那一层。 */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  flex: 1 1 auto;
  min-height: 0;                  /* 不写这个，flex 子项撑不开也滚不动 */
  overflow-y: auto;
}
.notice-text {
  white-space: pre-wrap;          /* 管理员怎么写换行，这里就怎么显示 */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.notice-foot { padding: 0 18px 18px; flex: none; }
.notice-foot button { width: 100%; }

/* 公告设置页的按钮：保存 / 预览弹窗，两个并排 */
.notice-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.notice-actions button { flex: 1 1 0; }

/* 公告设置页的历史公告列表 */
.notice-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #eee;
}
.notice-item-main { flex: 1; min-width: 0; }
.notice-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notice-now {
  font-size: 12px;
  font-weight: 700;
  color: #c65102;
  background: #fff3e0;
  border-radius: 20px;
  padding: 1px 8px;
}
/* 已撤回：灰掉，但仍然留在记录里 */
.notice-off {
  font-size: 12px;
  font-weight: 700;
  color: #898781;
  background: #f0f0f0;
  border-radius: 20px;
  padding: 1px 8px;
}
.notice-item-off .notice-item-main { opacity: .55; }
.notice-item-body {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 66px;               /* 列表里只露个头，看全文点预览 */
  overflow: hidden;
}

/* 上传 */
.upload { display: flex; flex-direction: column; gap: 12px; }
.upload input[type="file"] { padding: 8px; }
.form-block { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.inline { display: inline; margin-right: 6px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #444; }
.days-form { display: inline-flex; gap: 4px; align-items: center; }
.days-form .days-input { width: 110px; }
.log-link {
  font-size: 14px;
  color: #f57c00;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.log-link:hover { text-decoration: underline; }
.locked { color: #c0392b; font-weight: 600; }
.online-yes { color: #1e7e34; font-weight: 600; }
.online-no { color: #999; }

/* 二维码生成 */
textarea {
  font-size: 16px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  width: 100%;
  resize: vertical;
  font-family: inherit;
}
.qr-status { margin-top: 12px; font-size: 13px; color: #666; min-height: 18px; }
.qr-result { margin-top: 16px; text-align: center; }
.qr-result img {
  width: 280px; max-width: 100%;
  border: 1px solid #eee; border-radius: 8px;
  padding: 8px; background: #fff;
}
.qr-tip { color: #888; font-size: 12px; margin: 8px 0; }
.qr-save-btn { min-width: 160px; }

/* 成品二维码生成（2026-10-22）：按批号查库存 + 二次确认 */
.qr-content-line { font-size: 13px; color: #555; margin: 0 0 10px; text-align: center; }
.qr-content {
  font-family: Consolas, Menlo, monospace;
  font-weight: 700;
  color: #c65102;
  word-break: break-all;      /* 一长串 代码/批号/小批号/数量，窄屏上必须能折 */
}
/* 结果卡片（2026-10-23 用户要求：表格一行太长，手机不方便 → 一条明细一张卡）。
   桌面上按 280px 自动分多列；手机上自动变一列。 */
.qr-cards {
  display: grid;
  /* 260px：320px 宽的小手机（减去页面左右边距）也能放下一列，不会横向溢出 */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.qr-card {
  min-width: 0;
  background: #fff;
  border: 1px solid #e2e4e8;
  border-left: 4px solid #f57c00;   /* 左边颜色条：可用绿 / 不可用红 */
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.qr-card.qr-card-ok { border-left-color: #2e7d32; }
.qr-card.qr-card-no { border-left-color: #c62828; background: #fdf6f6; }
.qr-card-head { display: flex; align-items: flex-start; gap: 8px; }
.qr-card-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 16px; font-weight: 700; color: #333; line-height: 1.4;
  word-break: break-all;
}
.qr-badge {
  flex: none; white-space: nowrap;
  font-size: 12px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}
.qr-badge.ok { background: #e8f5e9; color: #1e7e34; }
.qr-badge.no { background: #fdecea; color: #b71c1c; }
.qr-badge.na { background: #eee; color: #888; }
.qr-card-spec { font-size: 13px; color: #666; margin-top: 4px; word-break: break-all; }
.qr-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin-top: 12px;
}
.qr-card-grid > div { min-width: 0; }
/* 批号占满一整行：13 位批号在窄卡片里不该被折成两截 */
.qr-card-grid > .qr-span2 { grid-column: 1 / -1; }
.qr-k { display: block; font-size: 11px; color: #999; margin-bottom: 2px; }
.qr-v { display: block; font-size: 14px; color: #333; word-break: break-all; }
/* 批号 / 数量：等会儿要在确认弹窗里再输一遍，卡片上最显眼 */
.qr-v.qr-strong { font-size: 15px; font-weight: 700; color: #c65102; }
/* 卡片底部整行按钮：手机上大一点好点 */
.qr-make-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 12px;
  font-size: 15px;
  border-radius: 8px;
}

/* 二次确认弹窗 */
.reg-modal-box.qr-confirm-box { max-width: 420px; text-align: left; }
.qr-confirm-title {
  font-size: 17px; font-weight: 700; color: #333;
  text-align: center; margin-bottom: 8px;
}
/* 确认弹窗的红色警告：红字 + 红色感叹号（红底白！的圆点）
   （用户 2026-10-22 要求：「红色字体，加上红色感叹号提醒」，并且感叹号放在**文字末尾**） */
.qr-warn {
  margin: 0 0 14px;
  color: #c62828;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
}
/* 用 inline-flex（不是块级）：跟着文字走，文字换行时它也跟在最后一个字后面 */
.qr-warn-excl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  vertical-align: -3px;         /* 和文字基线对齐，不会把行高撑高 */
  border-radius: 50%;
  background: #c62828;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
/* 二次确认的两个字段名（2026-10-23 用户要求）：加粗 + 红色 + 感叹号 */
.field .qr-field-label {
  font-size: 14px;
  font-weight: 800;
  color: #c62828;
  line-height: 1.5;
}
/* 标签里的感叹号比提示语里的稍小一点，别把标签行撑高 */
.qr-field-label .qr-warn-excl {
  width: 16px;
  height: 16px;
  font-size: 12px;
  vertical-align: -3px;
}
.qr-confirm-err { color: #c62828; font-size: 13px; min-height: 18px; margin-top: 4px; }
.qr-confirm-actions { display: flex; gap: 10px; margin-top: 10px; }
/* 两个按钮平分一行；.reg-modal-box button 的 width:100% 要盖掉，不然会挤出去 */
.qr-confirm-actions button { flex: 1 1 0; width: auto; }

/* 底部联系作者 */
.site-footer {
  text-align: center;
  padding: 20px 12px 28px;
}
.site-footer a {
  color: #999;
  font-size: 14px;
  text-decoration: underline;
}
.site-footer a:hover { text-decoration: underline; color: #f57c00; }

/* 提示 */
.flash { padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; }
.flash.ok { background: #e6f4ea; color: #1e7e34; }
.flash.error { background: #fdecea; color: #c0392b; }
.meta { color: #c0392b; font-size: 13px; margin-bottom: 8px; }
.result-note { color: #555; font-size: 13px; margin-bottom: 6px; }
.empty { padding: 40px 0; text-align: center; color: #999; }

/* 仓库卡片（不同颜色按钮） */
.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: #f57c00;
  border: 1px solid #f57c00;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 10px;
  touch-action: manipulation;
}
.back .arr { font-size: 16px; line-height: 1; }
.back:active { background: #e65100; }
.warehouse-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 8px;
}
@media (min-width: 600px) {
  .warehouse-grid { grid-template-columns: repeat(3, 1fr); }
}
.wh-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 67px;                /* 84 → 67，降低五分之一 */
  padding: 16px 10px;
  border-radius: 14px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0,0,0,.14);
  touch-action: manipulation;
}
.wh-card:active { filter: brightness(.9); }
.wh-card:nth-child(1) { background: #f57c00; }  /* 基材库 橙 */
.wh-card:nth-child(2) { background: #1976d2; }  /* 半成品库 蓝 */
.wh-card:nth-child(3) { background: #388e3c; }  /* 成品库 绿 */
.wh-card:nth-child(4) { background: #7b1fa2; }  /* VCM膜库 紫 */
.wh-card:nth-child(5) { background: #00838f; }  /* PE膜库 青 */
.wh-card:nth-child(6) { background: #c62828; }  /* 油漆库 红 */

/* 实时库存查询卡片：**通栏**，深蓝灰底，和上面 6 个彩色格子区分开 ——
   它读的是 ERP 实时数据，不是上传的 Excel 快照，是另一种东西。
   ⚠️ 它是 .warehouse-grid **外面**的一个 <a>（不是 grid 子项）：
   上面 6 个格子的颜色靠 :nth-child(1~6) 定，塞第 7 个进去会拿不到背景色。
   字号比普通格子小一点：名字长（6 个字）又带 emoji，17px 在窄屏会挤。 */
/* 实时库存查询 / 实时发货记录：两张卡片**并排**（2026-10-09 加发货记录时改的）。
   ⚠️ 被 .rt-cards 包住之后，这两张卡片自己就成了 .rt-cards 的 :nth-child(1)/(2)，
      而上面那 6 条 .wh-card:nth-child(1~6) 的配色**同样能选中它们**
      （那 6 条写的是全站的 .wh-card:nth-child，不是 .warehouse-grid 后代）。
      好在 .rt-cards .rt-card 优先级更高（0,3,0 > 0,2,0）且这里明确写了背景色。
      🔴 别把 background 从下面这条里删掉 —— 删了左边那张会变成橙色。 */
.rt-cards {
  display: flex;
  gap: 12px;
  /* 和上面那 6 个仓库格子之间加一道分割线（用户 2026-10-09 要求：上面是传的 Excel 快照，
     下面是实时数据，本来就不是一类东西，划开更清楚）。
     ★ 2026-10-09 用户又要求：**橙色 + 加粗**（原来是 1px 浅灰，太不起眼）。
       用和主色同一个橙 #f57c00，和 .back 按钮、仓库卡片是同一套色。
     用 border-top 而不是另加一个 <hr> —— 少一个元素，线宽自动和两张卡片对齐。 */
  margin-top: 20px;
  padding-top: 18px;
  border-top: 3px solid #f57c00;
}
.wh-card.rt-card {
  display: flex;
  flex: 1 1 0;
  min-width: 0;                /* 不加这句：长文字会把卡片撑破，flex 子项默认不肯缩 */
  margin-top: 0;               /* 间距改由 .rt-cards 的 margin-top 管 */
  background: #263238;
  font-size: 15px;
  letter-spacing: 0;
  padding: 16px 8px;
}

/* 表格 */
.table-wrap {
  /* 只做横向滚动，不设 max-height —— 否则页面里会再套一个小窗口 + 自己的纵向滚动条，
     看着跟网页是两块。纵向跟着整页一起滚（用户 2026-09-19 要求） */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
/* 和网页完全一体：不要卡片底、不要圆角阴影（成品发货明细用） */
.table-wrap.plain {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin-top: 4px;
}
table { border-collapse: collapse; width: max-content; min-width: 600px; --fs: 14px; }
th, td {
  text-align: center;
  padding: 10px 12px;
  border: 1px solid #e2e4e8;
  font-size: var(--fs);
  white-space: nowrap;
}
th { background: #f2f3f5; color: #555; position: sticky; top: 0; }
tr.danger td { background: #ffcccc; }
tfoot td { background: #f2f3f5; font-weight: 700; }

/* 工具箱 */
.toolbox { margin-top: 28px; }
.toolbox-title { font-size: 20px; color: #555; font-weight: 600; margin-bottom: 10px; }
.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 600px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } }
/* 工具箱按钮：统一字号、固定高度 —— 每个格子一样大
   （原来用 min-height，两行文字的名字会把格子撑高，看着不齐） */
.tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 4px 8px;
  border-radius: 11px;
  background: #fb8c00;             /* 分析表：橙色 */
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;               /* 名字折两行也放得下 */
  text-align: center;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0,0,0,.14);
  touch-action: manipulation;
  overflow: hidden;
}
.tool-btn:active { filter: brightness(.9); }
/* 第二个板块（工具箱）换一种颜色，跟「分析表」区分开 */
.tool-btn-alt { background: #00838f; }
@media (max-width: 599px) {
  .tool-btn { font-size: 13px; padding: 3px 6px; }
}

/* 成品批号核对 */
.batch-form {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.batch-label { font-size: 14px; color: #555; font-weight: 600; }
.batch-submit {
  background: #f57c00;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
}
.batch-result { margin-top: 4px; }
/* min-width:0 让它在和分享按钮同一行时能收缩换行，不会把整行撑破 */
.batch-note { color: #666; font-size: 13px; margin-bottom: 10px; min-width: 0; }
.batch-ok {
  padding: 16px;
  background: #e6f4ea;
  color: #1e7e34;
  border-radius: 8px;
  font-weight: 600;
}
.batch-error-title {
  font-size: 15px;
  font-weight: 600;
  color: #c0392b;
  margin-bottom: 10px;
}

/* 成品呆滞分析表 */
.slow-form {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  padding: 16px;
  margin-bottom: 16px;
}
/* 周期按钮：等宽等高的网格，五个一排 */
.slow-periods {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
/* 实时库存查询：仓库改成**点选按钮**（用户要求「就像成品未发明细里面的按钮一样」）。
   ⚠️ 下面 .rt-wh 和 .slow-period 是**同一份声明**（逗号选择器），
      所以两边的外观永远一致，改一处两边都变，不会走偏。 */
.rt-whs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
@media (min-width: 600px) { .rt-whs { grid-template-columns: repeat(6, 1fr); } }

/* 周期按钮：实心样式（跟主页按钮一致），高度 46 → 35px（降 1/4） */
.rt-wh,
.slow-period {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;       /* 没有圆点了，文字居中 */
  height: 35px;
  padding: 0 6px;
  border: 2px solid #fb8c00;    /* 橙色边框 */
  border-radius: 8px;
  background: #fff;             /* 未选中：白底 + 橙框 + 橙字 */
  color: #e65100;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.rt-wh.on,
.slow-period.on {               /* 选中：橙色实底 + 白字 */
  background: #fb8c00;
  border-color: #fb8c00;
  color: #fff;
  box-shadow: 0 2px 6px rgba(251, 140, 0, .45);
}
/* 隐藏原生单选圆点（点标签照样能选中，键盘也还能操作） */
.rt-wh input,
.slow-period input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.rt-wh:has(input:focus-visible),
.slow-period:has(input:focus-visible) {
  outline: 2px solid #6d3b00;
  outline-offset: 2px;
}

/* 去除不良勾选 */
.slow-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  touch-action: manipulation;
}
.slow-check input { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; }

.slow-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.slow-btn { flex: 1 1 0; min-height: 48px; }
/* 手机上五个周期按钮排成两行，仍然等宽等高 */
@media (max-width: 599px) {
  .slow-periods { grid-template-columns: repeat(3, 1fr); }
  .slow-period { font-size: 13px; height: 33px; }   /* 44 → 33px（降 1/4） */
  .rt-wh { font-size: 13px; height: 33px; }
}
.slow-btn-alt { background: #607d8b; }
.slow-note { color: #555; font-size: 13px; margin-bottom: 14px; }
.slow-note b { color: #c65102; }
.slow-export { margin-bottom: 12px; }

/* 明细表搜索框（只在「明细表」视图出现） */
.slow-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.slow-search input[type="search"] { flex: 1 1 260px; }
.slow-search .det-count {
  font-size: 13px;
  font-weight: 600;
  color: #c65102;
  white-space: nowrap;
}

/* 呆滞分析图表：横向条形图，长度编码吨位，单色（单系列无需图例） */
.chart-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  padding: 16px;
  margin-bottom: 20px;
}
.chart-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* 分享按钮紧跟在标题（前 N 名）右边 */
  gap: 10px;
  flex-wrap: nowrap;             /* 手机上也不换行 */
  margin-bottom: 6px;
}
.chart-title { font-size: 16px; font-weight: 600; color: #333; min-width: 0; }
.share-btn {
  flex: none;
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1;
  border-radius: 6px;
}
@media (max-width: 599px) {
  .chart-title { font-size: 15px; }
  .share-btn { height: 28px; min-height: 28px; padding: 0 10px; font-size: 12px; }
}
/* 分享图预览弹窗 */
.share-box { max-width: 440px; max-height: 86vh; overflow: auto; }
/* 长按图片不做任何动画/放大，避免干扰系统弹出的「保存图片 / 转发朋友」菜单 */
.share-box img {
  width: 100%;
  margin-bottom: 14px;
  -webkit-touch-callout: default;
}
/* 提示文字：橙色加粗居中，醒目一点 */
.share-box .share-tip {
  font-size: 17px;
  font-weight: 700;
  color: #f57c00;
  text-align: center;
  line-height: 1.55;
  margin: 2px 0 16px;
}
.share-box button { width: 100%; margin-bottom: 8px; }
.share-box .share-cancel { background: #fff; color: #f57c00; border: 1px solid #f57c00; }
.chart-sub { font-size: 13px; color: #898781; margin: 4px 0 14px; }
.chart-bars { /* 不设高度限制：图表完整展开，不在小窗口里单独滑动 */ }
.bar-row {
  display: grid;
  grid-template-columns: 150px 1fr 72px;
  align-items: center;
  gap: 10px;
  padding: 3px 0;                /* 相邻条形之间留出表面间隙，靠留白分隔而不是描边 */
  font-size: 13px;
}
.bar-name { color: #52514e; text-align: right; line-height: 1.25; }
.bar-track {
  position: relative;
  height: 18px;                  /* 条形不超过 24px，留出留白 */
  border-radius: 4px;
  background-color: #f4f4f5;
  /* recessive 网格线：每 25% 一根 1px 实线，位于 0/25/50/75% */
  background-image: linear-gradient(to right, #e1e0d9 1px, transparent 1px);
  background-size: 25% 100%;
}
.bar-fill {
  height: 100%;
  min-width: 2px;                /* 极小值也保证可见 */
  background: #9e9e9e;           /* 默认灰色：第 4 名及以后 */
  border-radius: 0 4px 4px 0;    /* 基线端方，数据端 4px 圆角 */
}
/* 前三名按名次上色（鲜红 → 浅橙 → 淡粉） */
.bar-r1 { background: #d32f2f; } /* 第一名 鲜红 */
.bar-r2 { background: #ffa726; } /* 第二名 浅橙 */
.bar-r3 { background: #f48fb1; } /* 第三名 淡粉 */
.bar-row:hover .bar-fill { filter: brightness(.9); }
.bar-val { color: #52514e; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 599px) {
  .bar-row {
    grid-template-columns: 1fr 64px;
    grid-template-areas: "name name" "bar val";
    row-gap: 4px;
    padding: 6px 0;
  }
  .bar-name { grid-area: name; text-align: left; }
  .bar-track { grid-area: bar; }
  .bar-val { grid-area: val; }
}

/* 成品技术要求 */
.spec-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.spec-item {
  background: #fff;
  border: 2px solid #e2e4e8;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  touch-action: manipulation;
}
.spec-item:active { background: #fafafa; }
.spec-item.sel { border-color: #f57c00; background: #fff8f0; }
.spec-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #f0efec;
}
.spec-code { font-weight: 700; font-size: 15px; color: #0b0b0b; word-break: break-all; }
.spec-abbr {
  font-size: 13px; color: #555;
  background: #f2f3f5; padding: 2px 9px; border-radius: 20px;
}
.spec-pick { margin-left: auto; font-size: 12px; font-weight: 600; color: #f57c00; white-space: nowrap; }
.spec-item.sel .spec-pick { display: none; }
.spec-item.sel .spec-item-head::after {
  content: '✔ 已选中';
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: #f57c00;
}
.spec-row { display: flex; gap: 10px; font-size: 13px; line-height: 1.6; padding: 2px 0; }
.spec-label { flex: none; width: 110px; color: #898781; }
.spec-val { color: #222; word-break: break-word; }
@media (max-width: 599px) {
  .spec-row { flex-direction: column; gap: 0; }
  .spec-label { width: auto; font-size: 12px; }
}

/* 销售发货量 */
.ship-filter {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.ship-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ship-row:last-child { margin-bottom: 0; }
.ship-label { font-size: 14px; font-weight: 600; color: #555; white-space: nowrap; }
.ship-row select { flex: 1 1 160px; max-width: 240px; }
.ship-row .batch-submit { flex: 1 1 140px; }
/* 成品发货明细：上面选日期、下面搜索框 */
/* 日期框窄一点。注意：框里显示「2026/09/01」是浏览器自己画的，CSS 改不了，
   只能靠收窄内边距 + 挤掉日历图标的留白，在「不把日期挤断行」的前提下尽量窄 */
.ship-row input[type="date"] {
  flex: 0 1 130px;
  padding-left: 8px;
  padding-right: 2px;
}
.ship-row input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: 2px;
  padding: 0;
}
.ship-row .detail-q { flex: 1 1 260px; }
.ship-tip { font-size: 12px; color: #898781; margin-top: 10px; }

/* 可折叠的客户筛选区（默认收起） */
.cust-picker {
  border: 1px solid #e2e4e8;
  border-radius: 10px;
  padding: 0 12px;
  margin-bottom: 12px;
}
.cust-picker > summary {
  cursor: pointer;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  list-style: none;
}
.cust-picker > summary::-webkit-details-marker { display: none; }
.cust-picker > summary::before { content: '▸ '; color: #f57c00; }
.cust-picker[open] > summary::before { content: '▾ '; }
.cust-count { color: #f57c00; font-weight: 700; }
.cust-actions { display: flex; gap: 8px; padding-bottom: 8px; }
.cust-actions button { padding: 6px 14px; min-height: 0; font-size: 13px; border-radius: 6px; }

/* 客户多选按钮：跟周期按钮同款（白底橙框 / 选中实橙），每行 4 个
   minmax(0,1fr) 是关键：单纯写 1fr 时，长名字会把那一列撑宽，导致格子大小不一 */
.cust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 2px 12px;
}
.cust-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 8px;
  border: 2px solid #fb8c00;
  border-radius: 8px;
  background: #fff;
  color: #e65100;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}
.cust-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-btn.on { background: #fb8c00; border-color: #fb8c00; color: #fff; }
.cust-btn input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
/* 手机上也保持每行 4 个（最长客户名 5 个字，375px 屏每格约 75px，放得下） */
@media (max-width: 599px) {
  .cust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .cust-btn { height: 34px; font-size: 12px; padding: 0 4px; }
}
/* 超窄屏（320px 那种）退回每行 3 个，免得名字被截断 */
@media (max-width: 360px) {
  .cust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 发货数据的上传日志 / 可恢复版本 */
.ver-picker { margin-top: 14px; }
.ver-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.ver-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  background: #fafafa;
  border: 1px solid #e2e4e8;
  border-radius: 8px;
}
.ver-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; min-width: 0; }
.ver-info b { color: #0b0b0b; }
.ver-rows { color: #f57c00; font-weight: 700; }
.ver-note { color: #898781; font-size: 12px; word-break: break-all; }
.ver-btn {
  flex: none;
  padding: 6px 16px;
  min-height: 0;
  font-size: 13px;
  border-radius: 6px;
  background: #fff;
  color: #f57c00;
  border: 1px solid #f57c00;
  font-weight: 600;
}

/* 「我的信息」（所有用户可见，只读） */
.profile-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.profile-row { display: flex; gap: 12px; font-size: 14px; }
.profile-label { flex: none; width: 76px; color: #898781; }

/* 日志分页 */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pager .pager-info { font-size: 14px; color: #555; font-weight: 600; }
.pager .pager-off { opacity: .35; pointer-events: none; }

/* 部门管理 */
.dept-add { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.dept-add input { flex: 1 1 200px; }
.dept-add button { flex: none; min-width: 110px; }
.dept-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dept-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  background: #fff3e0;
  border: 1px solid #fb8c00;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #e65100;
}
.dept-chip .dept-n {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #fb8c00;
  padding: 1px 8px;
  border-radius: 20px;
}
.dept-chip form { display: inline-flex; margin: 0; }
.dept-del {
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  line-height: 1;
  font-size: 15px;
  border-radius: 50%;
  background: #fdecea;
  color: #c0392b;
  border: none;
}

/* 账号 / 权限设置 */
.panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  padding: 16px;
  margin-bottom: 20px;
}
.panel h2 { font-size: 16px; margin: 0 0 12px; color: #333; }
.panel h2 .h2-sub { font-size: 13px; font-weight: normal; color: #898781; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font-size: 13px; color: #555; font-weight: 600; }
.field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.field-row .field { flex: 1 1 150px; }

.perm-box { border: 1px solid #e2e4e8; border-radius: 8px; padding: 12px; }
.perm-section { margin-bottom: 10px; }
.perm-section:last-child { margin-bottom: 0; }
.perm-section-head { font-weight: 600; color: #f57c00; margin-bottom: 6px; }
.perm-items { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-left: 8px; }
.perm-item-label { font-weight: normal; }

.perm-actions { margin-top: 14px; display: flex; gap: 10px; align-items: center; }

/* 编辑权限页里那块「实时发货记录 · 客户范围」（2026-10-10 加） */
.sc-box { margin-top: 14px; border: 1px solid #e2e4e8; border-radius: 8px; padding: 12px; }
.sc-box h2 { margin-top: 0; }
.sc-box .hint { line-height: 1.7; margin: 0 0 10px; }
.sc-text {
  width: 100%; box-sizing: border-box; font-size: 14px; line-height: 1.6;
  padding: 8px; border: 1px solid #ccc; border-radius: 6px;
  font-family: inherit; resize: vertical;
}
.sc-bar { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sc-stat { font-size: 13px; font-weight: 600; color: #2e7d32; }
.sc-stat.bad { color: #c0392b; }
/* 只命中一个页面（关键词只沾得上"实时"或只沾得上"明细"，另一边会什么都看不到）*/
.sc-stat.warn { color: #b26a00; }
.sc-allhint { margin-top: 10px; font-size: 12px; color: #898781; line-height: 1.7; }
/* 客户名清单分两组：实时发货记录 / 成品发货明细（同一家客户两边叫法不一样）*/
.sc-group { margin-top: 10px; }
.sc-glabel { font-size: 12px; color: #898781; }
/* 客户名清单：点一下加进上面的文本框。名字里带括号和工厂后缀，所以允许换行排。 */
.sc-all {
  margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 190px; overflow: auto; padding: 2px;
}
.sc-chip {
  font: inherit; font-size: 12px; color: #555; background: #f4f5f7;
  border: 1px solid #e2e4e8; border-radius: 12px; padding: 3px 10px;
  cursor: pointer; text-align: left;
}
.sc-chip:hover { border-color: #f57c00; color: #f57c00; }
.sc-chip.hit { background: #fff3e0; border-color: #f57c00; color: #e65100; font-weight: 600; }
.sc-chip .sc-n { color: #999; font-weight: normal; }
.sc-chip.hit .sc-n { color: #e65100; }
.sc-empty { margin-top: 10px; font-size: 12px; color: #898781; }

/* 用户列表改版（2026-10-01）：表格只留一眼要看的列，8 个操作搬进「用户详情」弹窗 */
.user-row { cursor: pointer; touch-action: manipulation; }
.user-row:active { background: #fafafa; }
.user-row td { vertical-align: top; }

/* 列表里直接改的三格（有效期 / 设备上限 / 同时在线） */
.u-col-num { white-space: nowrap; }
/* 三列数字格：比默认的 td 收紧一点，输入框也做小 —— 列表一共 7 列，别再撑开 */
.u-cell-num { text-align: center; padding: 6px 4px; }
.u-input {
  width: 56px;
  min-height: 34px;
  padding: 4px 6px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #d8dade;
  border-radius: 8px;
}
/* 数字框上下那两个小箭头占掉 ~16px，格子做小之后就别要它了（手机上本来也没有） */
.u-input::-webkit-outer-spin-button,
.u-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.u-input { -moz-appearance: textfield; appearance: textfield; }
.u-cell-num input:focus { border-color: #f57c00; outline: none; }
.u-cell-num input:disabled { background: #f5f5f5; color: #aaa; }
/* 改动过的那格给个底色，一眼看出「有东西没保存」 */
.u-input[data-orig]:not([disabled]) { background: #fff; }
.u-input.changed { background: #fff8f0; border-color: #f57c00; }

.rows-save {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 10px;
}
.rows-save-hint { font-size: 13px; color: #898781; }
.rows-save-hint.on { color: #c65102; font-weight: 700; }
.rows-save button { min-height: 44px; padding: 0 22px; }

/* 顶部提示条（保存结果；几秒后自己消失） */
.acct-toast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;              /* 盖在小旭弹窗（1000）上面 */
  padding: 12px 16px;
  background: #1e7e34;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  white-space: pre-line;      /* 提示里有换行时照原样显示 */
  transform: translateY(-110%);
  transition: transform .22s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  pointer-events: none;
}
.acct-toast.on { transform: translateY(0); }
.acct-toast.err { background: #c0392b; }
.user-state { font-size: 14px; }
.u-sub { margin-top: 2px; font-size: 12px; color: #898781; }
/* 用户名下面那行「最后登录 10-09 19:40」—— 用户列表就是按它排的（2026-10-10 加）。
   比上面那行「姓名 · 部门」再淡一点，免得两行看着一样厚。 */
.u-login { margin-top: 1px; color: #a9a49b; }
.perm-cell { color: #898781; }

.u-summary {
  margin: 6px 0 12px;
  font-size: 13px;
  color: #333;
  font-weight: 600;
  word-break: break-all;
}
.u-block {
  border-top: 1px solid #f0efec;
  padding: 12px 0;
}
.u-block:first-of-type { border-top: none; padding-top: 0; }
.u-block-title {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  margin-bottom: 8px;
}
.u-block-title .hint { font-weight: normal; font-size: 12px; }
.u-grid2 { display: flex; gap: 10px; flex-wrap: wrap; }
.u-field { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.u-field > span { font-size: 12px; color: #898781; }
.u-field input, .u-field select { min-height: 40px; padding: 8px 10px; font-size: 15px; }
.u-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.u-inline:first-of-type { margin-top: 0; }
.u-inline input { flex: 1 1 140px; min-width: 0; min-height: 40px; padding: 8px 10px; font-size: 15px; }
.u-inline button { min-height: 40px; padding: 0 16px; font-size: 15px; }
.u-actions { margin-top: 10px; }
.u-actions button { min-height: 42px; }
.u-note { margin-top: 6px; font-size: 12px; color: #898781; }
.u-level-radios { display: flex; gap: 16px; flex-wrap: wrap; }
.u-radio { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #444; }
.u-radio input { width: auto; min-height: 0; }
#user-modal .perm-link, #user-modal .log-link { display: inline-block; margin-bottom: 8px; }

/* 用户列表：勾选 + 批量设置权限 */
.pick-col { width: 34px; text-align: center; }
.pick-col input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; margin: 0; }
.pick-col input[type="checkbox"]:disabled { opacity: .3; }
.batch-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.batch-bar .hint { flex: 1 1 240px; min-width: 0; font-size: 13px; }
.batch-bar button { min-height: 38px; padding: 0 14px; font-size: 14px; }
.batch-bar .btn-secondary { min-height: 38px; padding: 0 14px; font-size: 14px; }
.batch-count b { color: #f57c00; font-size: 16px; }
/* 批量设置天数：就一个输入框，不用太宽；内容左对齐 */
.reg-modal-box.days-box { max-width: 420px; text-align: left; }

/* 批量设置权限的弹窗：权限项多，得比普通弹窗宽、而且要左对齐 */
.reg-modal-box.wide {
  max-width: 560px;
  max-height: 86vh;
  overflow-y: auto;
  text-align: left;
}
.batch-summary {
  margin: 6px 0 10px;
  font-size: 13px;
  color: #333;
  font-weight: 600;
  word-break: break-all;
}
.batch-warn {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #fff8f0;
  border-left: 3px solid #f57c00;
  font-size: 13px;
  color: #8a5a1a;
  line-height: 1.6;
}
.batch-perm-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.batch-perm-bar button { min-height: 34px; padding: 0 12px; font-size: 13px; }
#batch-perms .perm-box { max-height: 46vh; overflow-y: auto; }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 16px; min-height: 44px; border-radius: 8px;
  background: #fff; color: #f57c00; border: 1px solid #f57c00;
  font-weight: 600; text-decoration: none; font-size: 16px;
}

.user-table td { vertical-align: top; }
.perm-link { font-size: 13px; color: #f57c00; text-decoration: none; font-weight: 600; }
.perm-link:hover { text-decoration: underline; }
/* 旧版用户列表「操作」列那套 (row-actions / mini-input) 已随改版删掉 —— 2026-10-01 */
.level-radios { display: flex; gap: 16px; flex-wrap: wrap; }
.level-radios input[type="radio"] { width: auto; margin: 0; }

.badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.vip-badge { background: #fff; color: #e65100; }
.svip-badge { background: #1f1f2e; color: #ffd700; border: 1px solid #ffd700; }
.expired-badge { background: #757575; color: #fff; cursor: default; }

/* 账号已到期：提示 + 付款码（home.html 两个弹窗共用 _expire_box.html） */
.reg-modal-box.expire-box { max-width: 360px; }
/* 三行大字，**三行同字号同字重**（用户要求中间那行跟上下一样大）：
     1「已到期」红 #d32f2f  →  2「叫苦」紫 #7b1fa2  →  3「续费价」橙 #f57c00
   顺序和 _expire_box.html 里的 .expire-line1/2/3 一一对应，别调换。
   ⚠️ 字号钉死在 19px 是**算过的**：第二行有 12 个汉字 + 2 个表情，
   360px 宽的手机上弹窗正文只有 280px，19px 刚好放得下（约 278px）；
   调到 20px 就会折成两行，折出来是「…喘不过 / 气😭」那种很难看的断法。
   要改字号的话，先把这一行的字改短，或者把 .expire-box 的 max-width 一起调大。 */
.expire-line1 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
  color: #d32f2f;
  margin: 2px 0 6px;
  letter-spacing: .5px;
}
.expire-line2 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
  color: #7b1fa2;
  margin: 0 0 6px;
  /* 这行最挤，**不能加 letter-spacing**，加了在窄屏就会折行 */
}
.expire-line3 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
  color: #f57c00;
  margin: 0 0 14px;
  letter-spacing: .5px;
}
.expire-qr {
  display: block;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  border-radius: 10px;
  border: 1px solid #e2e4e8;
  background: #fff;
}
.expire-tip {
  margin: 10px 0 14px;
  font-size: 13px;
  color: #898781;
}

/* 「会员已续期」弹窗（管理员加了天数后，用户下次打开页面弹一次） */
.reg-modal-box.renew-box { max-width: 320px; }
.renew-title {
  font-size: 19px;
  font-weight: 800;
  color: #1e7e34;
  margin-bottom: 10px;
}
.renew-line1 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #333; }
.renew-line2 { margin: 0 0 16px; font-size: 22px; font-weight: 800; color: #f57c00; }
.renew-box button { width: 100%; }

/* 小旭提示弹窗 */
.xiaoxu-title { font-size: 16px; font-weight: 700; color: #f57c00; margin-bottom: 4px; }
.xiaoxu-actions { display: flex; gap: 10px; margin-top: 14px; }
.xiaoxu-actions button { width: auto; flex: 1; min-height: 44px; }
.xiaoxu-cancel-btn { background: #fff; color: #f57c00; border: 1px solid #f57c00; }

/* 成品重量计算 */
.weight-head, .weight-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 30px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.weight-head { color: #555; font-size: 13px; font-weight: 600; text-align: center; }
.weight-del {
  border: none; background: #fdecea; color: #c0392b;
  border-radius: 6px; cursor: pointer; min-height: 34px; font-size: 16px;
  padding: 0; line-height: 1;
}
.weight-actions { display: flex; gap: 10px; margin-top: 12px; }
.weight-actions #calc-btn { flex: 1.4; }
.weight-actions .btn-secondary { flex: 1; }
.weight-result { margin-top: 16px; text-align: center; font-size: 15px; }
.weight-result b { color: #f57c00; font-size: 22px; }

/* 按功能分配权限 */
.assign-hint { color: #666; font-size: 13px; margin-bottom: 12px; }
.assign-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.assign-bar-label { font-size: 14px; color: #555; font-weight: 600; margin-right: 4px; }
.assign-list { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.assign-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid #e2e4e8; border-radius: 8px;
  font-size: 14px; cursor: pointer;
}
.assign-item:hover { border-color: #f57c00; }
.assign-item .assign-level {
  font-size: 12px; font-weight: 700; color: #e65100;
  background: #fff3e0; padding: 1px 7px; border-radius: 10px; line-height: 1.4;
}
.assign-item.locked-row { opacity: .6; cursor: default; }
.assign-item.locked-row .assign-level { color: #ffd700; background: #1f1f2e; }
.assign-save { margin-top: 18px; }

/* 上传页：历史版本 + 回滚 */
.ver-box {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e2e4e8;
}
.ver-title { font-size: 13px; color: #666; margin-bottom: 8px; }
.ver-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; font-size: 13px; color: #555;
  border-bottom: 1px solid #f2f3f5;
}
.ver-row:last-child { border-bottom: none; }
.ver-row .ver-time { flex: none; font-weight: 600; color: #333; }
.ver-row .ver-note {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ver-row form { flex: none; margin: 0; }
.ver-btn {
  min-height: 30px; padding: 0 14px;
  font-size: 13px; border-radius: 6px; cursor: pointer;
  background: #fff; color: #f57c00; border: 1px solid #f57c00;
}
.ver-btn:hover { background: #fff3e0; }

/* 中午吃什么（午餐分享） */
.lunch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.lunch-date { font-size: 17px; font-weight: 700; color: #333; }
.lunch-count { margin-left: 6px; font-size: 13px; font-weight: normal; color: #898781; }
.lunch-today-tag {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 20px;
  background: #f57c00;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.lunch-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.lunch-nav .btn-secondary { min-height: 38px; padding: 0 12px; font-size: 14px; }

.lunch-form { display: flex; flex-direction: column; gap: 10px; }
.lunch-inputs { display: flex; flex-direction: column; gap: 8px; }
.lunch-field { display: flex; align-items: center; gap: 8px; }
.lunch-label { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: #555; white-space: nowrap; }
@media (min-width: 560px) {
  .lunch-inputs { flex-direction: row; }
  .lunch-field { flex: 1 1 0; }
}

/* 传照片：file 输入藏起来，用 label 里的 span 当按钮（点整块都能选） */
.lunch-anon { font-size: 14px; color: #555; }

/* 分享列表 */
.lunch-list-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 6px;
}
.lunch-list-head .chart-title { flex: 1 1 auto; }
/* 可点击选中再分享：默认透明边框，选中变橙，避免尺寸跳动 */
.lunch-card {
  padding: 14px 16px;
  border: 2px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.lunch-card:active { background: #fafafa; }
.lunch-card.sel { border-color: #f57c00; background: #fff8f0; }
.lunch-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lunch-card-head form { margin: 0 0 0 auto; }
.lunch-card.sel .lunch-card-head::before {
  content: '✔ 已选中';
  font-size: 12px;
  font-weight: 700;
  color: #f57c00;
}
.lunch-who { font-size: 14px; font-weight: 700; color: #f57c00; }
.lunch-time { font-size: 12px; color: #aaa; }
.lunch-dish { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.lunch-dish-name { font-size: 16px; font-weight: 600; color: #222; word-break: break-all; }
/* 荤菜 / 素菜 的分类标签：写清楚是哪种，不光靠 emoji */
.lunch-tag {
  flex: none;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.lunch-tag-meat { background: #ffe9d1; color: #c65102; }
.lunch-tag-veg { background: #e4f3e4; color: #2e7d32; }
.lunch-tag-photo { background: #eef0f3; color: #666; }
.lunch-taste { margin-top: 8px; font-size: 13px; color: #888; }
.lunch-photo-link { display: block; margin-top: 10px; }
.lunch-photo {
  display: block;
  width: 100%;
  max-width: 420px;
  border: 1px solid #eee;
  border-radius: 10px;
}

/* 「选一张图」控件（午餐分享 / 公告配图 共用）
   ⚠️ 这里以前叫 .lunch-photo-*，和列表里那张图的 .lunch-photo 撞了名 ——
   后定义的规则会把前面那条盖掉，结果表单里那行变成了带边框的块。
   所以抽成通用类，两边都用这一份。 */
.imgpick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.imgpick-pick { cursor: pointer; }
.imgpick-pick input { display: none; }
.imgpick-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #f57c00;
  border-radius: 8px;
  background: #fff;
  color: #f57c00;
  font-size: 16px;
  font-weight: 600;
}
.imgpreview { display: flex; align-items: center; gap: 12px; }
.imgpreview[hidden] { display: none; }
.imgpreview img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #eee;
}

/* 公告弹窗里的配图（排在正文上面） */
.notice-img {
  display: block;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 12px;
}
.notice-img[hidden] { display: none; }
/* 公告设置页里的缩略图 + 「含图片」标记 */
.notice-item-thumb { display: inline-block; margin: 6px 0; }
.notice-item-thumb img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #eee;
}
.notice-hasimg {
  font-size: 12px;
  font-weight: 700;
  color: #c65102;
  background: #fff3e0;
  border-radius: 20px;
  padding: 1px 8px;
}
.lunch-del {
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  line-height: 1;
  font-size: 16px;
  border: none;
  border-radius: 50%;
  background: #fdecea;
  color: #c0392b;
}

.lunch-days { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.lunch-days-label { font-size: 13px; color: #888; }
.lunch-day-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid #e2e4e8;
  border-radius: 20px;
  background: #fff;
  color: #555;
  font-size: 13px;
  text-decoration: none;
}
.lunch-day-chip i { font-style: normal; color: #aaa; font-size: 12px; }
.lunch-day-chip.on { border-color: #f57c00; color: #e65100; font-weight: 700; }

/* ------------------------- 实时库存查询（tool_stock_rt.html） ------------------------- */
/* 管理员的「ERP 连接设置」面板 */
.rt-cfg { margin-bottom: 18px; }
.rt-cfg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 12px;
  margin-bottom: 12px;
}
@media (min-width: 600px) { .rt-cfg-grid { grid-template-columns: repeat(3, 1fr); } }
.rt-cfg-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #666;
}
.rt-cfg-grid input { min-height: 38px; font-size: 15px; }
.rt-cfg-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rt-cfg-actions button { flex: 0 0 auto; min-width: 120px; }

/* 测试连接的结果（一行一步，✅ / ❌） */
.rt-msg {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;
}
.rt-msg.ok  { background: #e8f5e9; color: #1e7e34; }
.rt-msg.bad { background: #fdecea; color: #c0392b; }

/* 面板里出现的文件名 / 代码 */
.hint code {
  background: #f2f3f5;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13px;
}

/* 实时库存查询：物料资料准备中（后台正在拉 7 万条）时的等待提示 */
.rt-wait { color: #e65100; font-weight: 600; }
/* 测试连接：前面都通了、只是还在后台拉物料 —— 中性提示，别用红的吓人 */
.rt-msg.warn { background: #fff3e0; color: #e65100; }

/* 实时库存查询：ERP 登录状态一行 + 退出/重新登录 */
.rt-sess {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e2e4e8;
}
.rt-sess-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}
.rt-sess-line b { font-size: 14px; }
.rt-sess-line b.on { color: #1e7e34; }
.rt-sess-line b.paused { color: #e65100; }
.rt-sess-line b.off { color: #999; font-weight: 600; }
.rt-sess .hint { margin: 10px 0 0; }

/* 实时库存查询：登录状态下面的「有没有 token」「上次失败原因」 */
.rt-sess-sub { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 8px; }
.rt-sess-sub b { color: #333; }
.rt-sess-err {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fdecea;
  color: #c0392b;
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
}

/* 实时库存查询：测试连接旁边那个「试查用物料代码」输入框 */
.rt-probe {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  font-size: 13px;
  color: #666;
}
.rt-probe input { min-height: 38px; font-size: 15px; }

/* 实时库存查询：物料资料那一行 + 小按钮 */
.rt-idxline { margin-bottom: 4px; }
.rt-idxline b { color: #333; }
.btn-tiny {
  font-size: 12px;
  padding: 3px 10px;
  min-height: 0;
  line-height: 1.4;
  width: auto;
}
.rt-idxhint { font-size: 12px; color: #777; margin: 0 0 10px; }

/* 实时库存查询：查不到时把「本次查过的物料」列出来 */
.rt-mlist {
  margin-top: 14px;
  text-align: left;
  border-top: 1px dashed #e2e4e8;
  padding-top: 10px;
}
.rt-mlist-t { font-size: 13px; color: #666; margin-bottom: 6px; font-weight: 600; }
.rt-mrow {
  font-size: 13px;
  color: #333;
  line-height: 1.75;
  border-bottom: 1px solid #f0f1f3;
  word-break: break-all;
}
.rt-mrow:last-child { border-bottom: none; }

/* 实时库存查询：本仓库没库存的那些行，浅色显示（数量 0） */
.table-wrap tr.nostock td { color: #9aa0a6; background: #fafbfc; }
.rt-muted { color: #6b6b6b; }

/* 实时库存查询：库存状态警示（数量是全部库存，不是可用量） */
.rt-warn { color: #c65102; }

/* 实时库存查询：可用性那一列
   ★「不可用」的**整条**填充红色（用户 2026-10-05 要求）★
   用浅红底 + 深红字：一眼能扫出哪些不能用，同时批号/数量这些还看得清。
   如果嫌不够醒目就告诉我，我把底色加深。 */
.table-wrap td.ok { color: #1e7e34; font-weight: 700; }
.table-wrap tr.okrow td { background: #f2fbf4; }
.table-wrap tr.norow td { background: #fdecea; color: #b71c1c; }
.table-wrap tr.norow td.no { color: #b71c1c; font-weight: 700; }
.table-wrap tr.norow:hover td { background: #fbdbd6; }

/* 实时库存查询：「只看可用」勾选框（在查询按钮左边） */
.rt-onlyavail {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 14px;
  color: #444;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.rt-onlyavail input { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; }

/* 实时库存查询：「刷新库存」那一行（2026-10-06 加）
   按钮 + 一句话状态（快照几分新 / 上次刷了多久 / 现在刷到第几个仓库）。
   强调色跟 .rt-warn 一致（刷新中用橙色），刷完转绿。 */
.rt-snapline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  font-size: 13px;
  color: #6b6b6b;
}
.rt-snapline button { flex: none; }
.rt-snapline .snap-run { color: #c65102; }
.rt-snapline .snap-ok { color: #1e7e34; }

/* ==================== 实时发货记录（2026-10-09 新增）====================
   PDA 回传的发货单：列表 + 点进去按物料汇总的明细。
   ⚠️ 列表条目是 <button>，而全站 button 是**橙底白字** —— 这里必须把
      底色/文字色/圆角全部改回来，不然一条条全是大橙按钮。 */

/* 红字提醒（列表页一条、明细页一条）。用色和页头那句 .meta 红字一致。 */
.srt-warn { color: #c0392b; font-size: 13px; line-height: 1.6; margin: 0 0 10px; }
/* 「本账号只能看这些客户」那条（2026-10-10）。
   ★ 单独一个橙色框，故意不跟上面那句红字一个样式 ★
     红字那句是"数据仅供参考"（每页都有、看惯了），这条是**这个账号特有的**，
     混成一样的样式＝没人看第二眼；这个框是"给用的人看的通知"，要一眼看见。
   ★ 名字不带 srt/ 前缀：**实时发货记录和成品发货明细两个页面共用**同一个框
     （那段 HTML 两个模板里各写了一份），哪天第三个页面也要用，照抄那一段就行。 */
.cust-scope {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 8px;
  background: #fff4e5; border: 1px solid #ffcc80;
  color: #bf4d00; font-size: 13px; line-height: 1.75;
}
.cust-scope b { color: #e65100; }

.srt-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

/* 一行 = 卡片 + （管理员才有的）删除按钮。
   ⚠️ 删除按钮必须是卡片的**兄弟**，不能塞进卡片里 —— <button> 套 <button> 是非法 HTML。 */
.srt-row { display: flex; align-items: stretch; gap: 8px; }
.srt-row .srt-item { flex: 1 1 auto; min-width: 0; }
.srt-del {
  flex: none;
  width: 54px;
  min-height: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #c0392b;
  background: #fff;
  border: 1px solid #e3b0ab;
  border-radius: 10px;
  cursor: pointer;
}
.srt-del:active { background: #fdecea; }
.srt-del:disabled { color: #bbb; border-color: #e6e6e6; }

/* 翻页条（每页 30 条）。⚠️ display:flex 会盖掉 [hidden]，所以下面那条不能删。 */
.srt-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 13px;
  color: #6b6b6b;
}
.srt-pager[hidden] { display: none; }
.srt-pager button { flex: none; }
.srt-pager button:disabled { opacity: .45; }
/* 🔴 这一条**不能删**：上面那句 display:flex 会盖掉浏览器默认的 [hidden]{display:none}
   （作者样式的 display 优先级高于 UA 的 [hidden]）。不写的话 list.hidden = true
   根本藏不住 —— 列表该藏的时候没藏、该显示的时候"看着正常"，全是巧合。
   2026-10-09 用户报「点返回列表还要再点一次查询」就是这么来的：
   两个毛病互相掩盖（藏不住 → 看着没事；真藏住了 → 没人把它放回来，见 backToList）。 */
.srt-list[hidden] { display: none; }

.srt-item {
  display: block;
  width: 100%;
  min-height: 0;               /* 全局 button 有 min-height:44px，条目本身够高了 */
  padding: 12px 14px;
  text-align: left;
  white-space: normal;
  background: #fff;
  color: #263238;
  border: 1px solid #e2e4e8;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  cursor: pointer;
  touch-action: manipulation;
}
.srt-item:active { background: #f2f3f5; }
/* 列表条目**只显示 客户 + 发货时间**（用户 2026-10-09 要求去掉 JSL 单号）。
   客户名可能很长，一行放不下就省略号，别把卡片撑爆。 */
.srt-cust {
  display: block;
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.srt-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 400;
  color: #6b6b6b;
}
.srt-tm { color: #8a8a8a; }
.srt-arrow { flex: none; color: #b0b6bb; font-size: 16px; line-height: 1; }

/* 「预览」那一行（2026-10-09 从「一键分享给好友」改名而来）。
   按钮样式直接复用 .share-btn（成品批号核对那套），这里只管摆位 —— 红字提醒下面、表格上面。 */
.srt-shareline { margin: 0 0 10px; }

/* 明细页头（客户 / 发货时间）。★ 单号、仓库、扫码人 都去掉了（用户 2026-10-09）。 */
.srt-dhead { margin-bottom: 8px; }
.srt-dtitle { font-size: 17px; font-weight: 700; margin: 8px 0 4px; word-break: break-all; }
.srt-dline { font-size: 14px; color: #555; margin-top: 2px; }
.srt-dline b { color: #263238; }

/* 合并的「合计」列：一眼看出是"这一段物料的总数"（同一物料只写一格，纵向居中） */
#srt-dtbl .srt-sum {
  background: #fff7e6;
  font-weight: 700;
  color: #c65102;
  vertical-align: middle;
}
/* 每个物料的**第一行**加一道粗上边框 —— 不然段与段之间没有分界，看着像一坨 */
#srt-dtbl tr.srt-grp td { border-top: 2px solid #d5d8dd; }

/* 最左边那列「客户」（= 物料名称第一段，用户 2026-10-10 要的）。
   ★ 一个客户一格、跨他名下所有物料行，**横向纵向都居中** ★（用户原话「合并居中」）
     写在这儿的只有这一块的第一行，其余行不生成这个 <td>（rowspan 撑起来的）。 */
#srt-dtbl .srt-custcell {
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  color: #37474f;
  background: #f7f8fa;
  white-space: normal;      /* 客户名可能带括号很长，宁可折行也别把表格撑歪 */
  word-break: break-all;
}
/* 底部「汇总件数」那一行。tfoot td 全局已经有灰底 + 加粗（见文件上面），
   这里只把总量那格染成和合计列一个色，好认。 */
#srt-dtbl tfoot td { font-size: 15px; }
#srt-dtbl tfoot .srt-total { color: #c65102; }
/* 表尾多出来的那行「按客户 N 件 · … 」（用户 2026-10-10）。
   只在客户 ≥2 个时才出现 —— 只有一个客户时它和「合计」是同一个数，纯属重复。
   故意做成白底 + 正常字重的**小字**：它是说明，不是总数，别和「合计」抢眼。 */
#srt-dtbl tfoot tr.srt-csrow td {
  background: #fff; text-align: left; font-weight: normal;
  font-size: 13px; color: #555; padding: 6px 10px; line-height: 2;
}
.srt-csum-label { color: #898781; margin-right: 8px; }
.srt-csum-item { white-space: nowrap; margin-right: 14px; display: inline-block; }
.srt-csum-item b { color: #c65102; font-size: 14px; }