/* 中金印刷 · 外发协同系统 —— 公共样式 */
:root{
  --bg:#f2f4f7; --panel:#ffffff; --line:#e2e6ee; --text:#1b2430; --sub:#6d7887;
  --pri:#1f5fd6; --pri-soft:#edf3fe; --pri-dark:#17439a;
  --red:#d43d3d; --red-soft:#fdeeee;
  --orange:#dd7b12; --orange-soft:#fdf3e6;
  --green:#178a51; --green-soft:#e9f7f0;
  --gray:#8b94a3; --gray-soft:#f0f2f5;
  --purple:#6b4fd8; --purple-soft:#f1eefd;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
h1,h2,h3,h4{margin:0;font-weight:650}
a{color:var(--pri);text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:14px}
.hide{display:none !important}

/* ============ 顶栏 ============ */
.topbar{
  background:#fff;border-bottom:1px solid var(--line);padding:10px 18px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:60;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;white-space:nowrap}
.brand .dot{width:22px;height:22px;border-radius:6px;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.topbar .who{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--sub);font-size:13px;white-space:nowrap}
.pill{background:var(--pri-soft);color:var(--pri);border-radius:99px;padding:2px 10px;font-size:12px;font-weight:600}
.pill.gray{background:var(--gray-soft);color:var(--sub)}
.pill.red{background:var(--red-soft);color:var(--red)}
.pill.green{background:var(--green-soft);color:var(--green)}
.pill.orange{background:var(--orange-soft);color:var(--orange)}
.pill.purple{background:var(--purple-soft);color:var(--purple)}

/* ============ 页签 ============ */
.tabs{display:flex;gap:4px;padding:10px 18px 0;overflow-x:auto;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:44px;z-index:55}
.tabs button{
  border:0;background:transparent;padding:9px 14px;border-radius:8px 8px 0 0;cursor:pointer;
  color:var(--sub);font-weight:600;white-space:nowrap;
}
.tabs button.on{background:var(--pri-soft);color:var(--pri);box-shadow:inset 0 -2px 0 var(--pri)}
.wrap{padding:16px 18px 60px;max-width:1500px;margin:0 auto}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden}
.card > .hd{padding:11px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card > .hd h3{font-size:14px}
.card > .hd .sp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.card > .bd{padding:0}
.card > .bd.pad{padding:14px}
.hint{color:var(--sub);font-size:12.5px}

/* ============ 表格 ============ */
table.grid{width:100%;border-collapse:collapse;font-size:13.5px}
table.grid th{
  background:#fafbfd;color:var(--sub);font-weight:600;text-align:left;padding:5px 9px;
  border-bottom:1px solid var(--line);white-space:nowrap;font-size:12px;
}
table.grid td{padding:5px 9px;border-bottom:1px solid #eef1f6;vertical-align:middle}
/* v98 定单要素横表（供应商端 / 单套一行的工序）：一张表看完，不再逐行「键：值」 */
table.grid.one{font-size:13.5px;border:1px solid #d8cfc0;border-radius:8px;overflow:hidden;margin:10px 0}
table.grid.one th{background:#F5F1E8;color:#5C4A32;font-size:12.5px;padding:7px 10px;border-bottom:1px solid #d8cfc0;white-space:nowrap}
table.grid.one td{padding:8px 10px;font-size:14px;border-bottom:1px solid #efe9df}
table.grid.one tbody tr:last-child td{border-bottom:none}
table.grid.one td.dim{color:#c8cedb}
table.grid.one td.k{color:var(--sub);white-space:nowrap;width:1%}
table.grid tbody tr:hover{background:#fbfcfe}
table.grid tr.warnrow{background:#fffafa}
table.grid tr.warnrow:hover{background:#fff4f4}
table.grid tr.stockrow{background:#fafafa}
table.grid tr.stockrow td{color:#9aa3b2}
table.grid tr.stockrow:hover{background:#f5f5f5}
table.grid tr.subrow > td{padding:0 !important}
table.grid tr.subrow table.grid{border:1px solid var(--line);border-radius:8px;overflow:hidden}
table.grid tr.sel{background:var(--pri-soft)}
table.grid tr.expandrow td{background:#f8fafd;border-bottom:2px solid var(--line);padding:10px 12px}
/* 详情页紧凑两列参数表 */
table.specs2{width:100%;border-collapse:collapse;font-size:12.5px;margin:6px 0 2px}
table.specs2 td{padding:3.5px 8px;border-bottom:1px dashed #edf0f5;vertical-align:top;line-height:1.45}
table.specs2 td.k{color:var(--sub);white-space:nowrap;width:64px;background:#fafbfd;font-weight:600;border-bottom:1px solid #f0f2f7}
table.specs2 td.v{word-break:break-all}
/* v97 空值占位：蚂蚁源没填的项，浅灰短横，与「漏搬」区分开 */
table.specs2 td.v .na{color:#c8cedb;letter-spacing:0}
/* 多套版：紧凑小卡片，左右各一套；每套版配图缩略 */
.verwrap{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.vercard{
  flex:1 1 calc(33.333% - 4px);min-width:200px;
  border:1px solid var(--line);border-radius:8px;padding:3px 5px 2px;
  background:#fdfefe;box-sizing:border-box;
}
.vercard .vhead{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  font-size:11px;font-weight:700;color:#3d4b5e;
  padding-bottom:2px;margin-bottom:1px;border-bottom:1px solid #eef1f6;
}
.vercard .vhead .vno{color:var(--pri);font-variant-numeric:tabular-nums}
.vercard .vhead .vname{font-weight:600;color:var(--text);font-size:11px}
.vercard .vbody{display:flex;gap:6px;align-items:flex-start}
.vercard .vspec{flex:1 1 auto;min-width:0}
.vercard .vimg{flex:0 0 56px;display:flex;flex-direction:column;gap:2px}
.vercard .vimg img{
  width:56px;height:56px;object-fit:cover;border:1px solid var(--line);
  border-radius:6px;cursor:zoom-in;background:#fff;
}
.vercard .vimg .imgnone{
  width:56px;height:56px;border:1px dashed #d8dee8;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;color:#b3bcc9;text-align:center;line-height:1.25;background:#fcfdfe;
}
.vercard .vimg .imgmore{font-size:9.5px;color:var(--pri);text-align:center;cursor:pointer}
/* 列表内直接勾工艺转外发 */
.qchip{
  display:inline-block;border:1px solid var(--line);border-radius:99px;padding:1px 7px;
  font-size:10.5px;cursor:pointer;background:#fff;color:#3d4b5e;user-select:none;line-height:1.5;
}
.qchip:hover{border-color:var(--pri);color:var(--pri);background:#f5f9ff}
.qchip.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}
/* 套版进度行 */
.vercard .vsteps{margin-top:3px;padding-top:3px;border-top:1px dotted #eef1f6;font-size:10px;line-height:1.55}
.vercard .vsteps .vsrow{display:flex;align-items:center;gap:4px;flex-wrap:wrap;white-space:nowrap}
.vercard .vsteps .vsrow .st{color:#5b6779;font-weight:600}
.vercard .vsteps .vsrow .vd{color:#b3bcc9}
/* 卡片内参数表更紧凑：字号再降一档 */
table.specs2.tiny{font-size:10.5px;margin:0}
table.specs2.tiny td{padding:0 4px;line-height:1.18;border-bottom:1px dotted #eef1f6}
table.specs2.tiny td.k{width:auto;min-width:48px;background:transparent;font-weight:600;color:#7d8798;padding-right:3px}
table.specs2.tiny td.v{color:#2f3a48}
table.specs2.tiny tr:last-child td{border-bottom:none}
/* 窄屏（手机/平板）：一套版一行 */
@media (max-width:760px){ .vercard{flex:1 1 100%} }
.expandrow .detailbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.expandrow .detailbar .meta{margin-left:auto;font-size:12px;color:var(--sub)}
table.grid td.r,table.grid th.r{text-align:right}
table.grid td.c,table.grid th.c{text-align:center}
.num{font-variant-numeric:tabular-nums}
.red{color:var(--red);font-weight:600}
.green{color:var(--green);font-weight:600}
.orange{color:var(--orange);font-weight:600}
.sub{color:var(--sub)}
strong.big{font-size:15px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}

/* 进度条 */
.bar{width:88px;height:7px;background:#e9edf3;border-radius:99px;overflow:hidden;display:inline-block;vertical-align:middle}
.bar > i{display:block;height:100%;background:var(--pri);border-radius:99px}
.bar > i.low{background:var(--orange)}
.bar > i.done{background:var(--green)}

/* ============ 按钮 ============ */
.btn{
  border:1px solid var(--line);background:#fff;color:var(--text);border-radius:8px;
  padding:6px 12px;cursor:pointer;font-weight:600;transition:.12s;
}
.btn:hover{border-color:#c9d2e0;background:#fafbfd}
.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.pri:hover{background:var(--pri-dark);border-color:var(--pri-dark)}
.btn.green{background:var(--green);border-color:var(--green);color:#fff}
.btn.green:hover{filter:brightness(.94)}
.btn.red{background:#fff;border-color:#f0c4c4;color:var(--red)}
.btn.red:hover{background:var(--red-soft)}
.btn.sm{padding:4px 9px;font-size:12.5px;border-radius:7px}
.btn.lg{padding:11px 20px;font-size:15px;border-radius:10px}
.btn.xl{padding:16px 22px;font-size:17px;border-radius:12px;min-width:104px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;border-color:transparent;color:var(--pri)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}

/* ============ 表单 ============ */
.frow{margin-bottom:11px}
.frow > label{display:block;font-size:12.5px;color:var(--sub);margin-bottom:5px;font-weight:600}
input[type=text],input[type=number],input[type=password],input[type=date],input[type=tel],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;outline:none;color:var(--text);
}
input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(31,95,214,.1)}
textarea{resize:vertical;min-height:70px;line-height:1.5}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.chk{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:5px 12px;cursor:pointer;font-size:13px;background:#fff;user-select:none}
.chk.on{border-color:var(--pri);background:var(--pri-soft);color:var(--pri);font-weight:600}
.chk input{display:none}

/* ============ 抽屉 / 模态 ============ */
.mask{position:fixed;inset:0;background:rgba(18,26,38,.42);z-index:200;display:none}
.mask.on{display:block}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:560px;max-width:96vw;background:#fff;z-index:210;
  transform:translateX(102%);transition:.22s;display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.14);
}
.drawer.on{transform:none}
.drawer .dh{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.drawer .dh h3{font-size:15px;flex:1}
.drawer .db{padding:16px;overflow:auto;flex:1}
.drawer .df{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:#fafbfd}
.modal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:14px;z-index:210;
  width:620px;max-width:94vw;max-height:88vh;display:none;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.2)
}
.modal.on{display:flex}

/* 步骤条 */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.steps span{font-size:12.5px;padding:5px 11px;border-radius:99px;background:var(--gray-soft);color:var(--sub);font-weight:600}
.steps span.now{background:var(--pri);color:#fff}
.steps span.done{background:var(--green-soft);color:var(--green)}

/* 消息预览 */
.preview{
  background:#f7f9fc;border:1px dashed #ccd6e6;border-radius:10px;padding:12px 13px;
  white-space:pre-wrap;font-size:12.8px;line-height:1.7;color:#33404f;max-height:280px;overflow:auto;
}

/* toast */
#wbToast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:900;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.wb-toast{background:#25303f;color:#fff;padding:10px 18px;border-radius:99px;font-size:13.5px;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:.28s;opacity:1}
.wb-toast.ok{background:#178a51}
.wb-toast.err{background:#c93b3b}
.wb-toast.out{opacity:0;transform:translateY(8px)}

/* 统计条 */
.stats{display:flex;gap:10px;flex-wrap:wrap;padding:12px 14px;background:#fafbfd;border-bottom:1px solid var(--line)}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 14px;min-width:118px}
.stat b{display:block;font-size:19px;font-variant-numeric:tabular-nums}
.stat span{color:var(--sub);font-size:12px}

/* 空态 */
.empty{padding:38px 16px;text-align:center;color:var(--sub)}
.empty .em{font-size:28px;display:block;margin-bottom:8px;opacity:.5}

/* 照片缩略 */
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.thumbs img{width:78px;height:78px;object-fit:cover;border-radius:9px;border:1px solid var(--line);cursor:pointer;background:#f2f4f7}
.thumbs.sm{margin-top:0}
.thumbs.sm img{width:46px;height:46px;border-radius:7px}
/* 工序看板小卡：图横排不换行、不撑破卡片 */
#boardBody .bdthumbs{flex-wrap:nowrap;overflow:hidden;align-items:flex-start;min-height:52px}
#boardBody .bdthumbs .imgwrap{margin-right:3px;flex:0 0 auto}
#boardBody .bdthumbs .imgwrap img{width:52px;height:52px;object-fit:cover;border-radius:6px}
#boardBody .bdthumbs .hint{font-size:10.5px}
.imgwrap{position:relative;display:inline-block;line-height:0}
.imgwrap img{width:110px;height:110px;object-fit:cover;border-radius:9px;border:1px solid var(--line);cursor:zoom-in;background:#f2f4f7}
.imgdel{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:#e24b4a;color:#fff;
  font-style:normal;font-size:13px;line-height:19px;text-align:center;cursor:pointer;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.imgdel:hover{background:#c03030}
.uploader{border:1.5px dashed #c8d3e4;border-radius:10px;padding:14px;text-align:center;color:var(--sub);cursor:pointer;background:#fbfcfe}
.uploader:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-soft)}

/* 登录页 */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(1200px 500px at 12% -10%,#e8f0fe 0,transparent 60%),var(--bg)}
.login-card{width:420px;max-width:94vw;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 18px 50px rgba(24,40,70,.09)}
.login-card h1{font-size:20px;margin-bottom:4px}
.login-card .sub2{color:var(--sub);font-size:13px;margin-bottom:20px}
.login-card .brand{margin-bottom:18px;font-size:16px}
.tabline{display:flex;gap:6px;margin-bottom:16px;background:var(--gray-soft);padding:4px;border-radius:10px}
.tabline button{flex:1;border:0;background:transparent;padding:8px;border-radius:8px;cursor:pointer;color:var(--sub);font-weight:600}
.tabline button.on{background:#fff;color:var(--pri);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.wxbtn{width:100%;padding:11px;border-radius:10px;border:1px solid #cfe6d8;background:#f4fbf6;color:#178a51;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.divider{display:flex;align-items:center;gap:10px;color:var(--sub);font-size:12px;margin:16px 0}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}
.err{color:var(--red);font-size:12.5px;margin-top:8px;min-height:18px}

/* 手机壳（供应商端预览用） */
.phone-frame{
  width:100%;max-width:420px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;box-shadow:0 12px 34px rgba(24,40,70,.1)
}
.phone-frame .ph{padding:12px 15px;background:var(--pri);color:#fff;font-weight:700;display:flex;align-items:center;gap:8px}
.phone-frame .pb{padding:12px 13px 22px}

/* 移动适配 */
@media (max-width:760px){
  .wrap{padding:12px 10px 70px}
  .topbar{padding:9px 12px}
  .tabs{padding:8px 12px 0;top:42px}
  table.grid{font-size:12.5px}
  table.grid th,table.grid td{padding:8px 7px}
  .f2,.f3{grid-template-columns:1fr}
  .drawer{width:100%}
}