/* 工装CRM 第一版原型 · 全站公共样式（7 个页面共用一份） */
:root{
  /* 主色 = 励销云橙 #FB6326；#D44515 为深一档、#FFF3EA 为浅底 */
  --bg:#FBF8F5; --card:#FFFFFF; --line:#EADFD6; --line-soft:#F3EAE3;
  --text:#2E2722; --text-2:#5C5249; --text-3:#6F6258;
  --main:#FB6326; --main-ink:#B9430F; --main-deep:#D44515;
  --main-soft:#FFF3EA; --main-line:#FFD9C2; --main-mid:#FF874F;
  --ok:#2F6B54; --ok-soft:#E8F3EE; --warn:#8A5A20; --warn-soft:#FBF1E2;
  /* 说明类文字：全站唯一一套灰色，与主色橙完全脱开，与正式文案的深色正文区分 */
  --expl-bg:#F5F5F5; --expl-line:#E6E6E6; --expl-text:#7A7A7A; --expl-strong:#616161;
  /* 侧栏 / 输入底色 */
  --side:#FFFFFF; --input:#FFFFFF; --danger:#E5484D; --danger-soft:#FDECEC; --danger-line:#F0A8AA;
}
*{box-sizing:border-box}
/* 细滚动条：覆盖浏览器原生默认粗滚动条（左菜单 + 右侧内容区 等纵向滚动条统一收敛） */
*::-webkit-scrollbar{width:5px;height:5px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(100,116,139,.24);border-radius:6px}
*::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,.42)}
*::-webkit-scrollbar-corner{background:transparent}
*{scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.28) transparent}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",Arial,sans-serif;
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
header{background:var(--card);border-bottom:1px solid var(--line);padding:13px 34px;
  display:flex;align-items:center;gap:18px;min-height:60px}
header .brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
header .logo{width:30px;height:30px;border-radius:7px;background:var(--main);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
header .brand b{font-size:16px;font-weight:700;color:var(--text);letter-spacing:.3px}
header .brand .ver{font-size:12px;color:var(--text-3);border-left:1px solid var(--line);
  padding-left:10px;margin-left:2px}
header .hdrtools{margin-left:auto;display:flex;align-items:center;gap:8px;position:relative}
button.hbtn{font-family:inherit;font-size:12.5px;padding:7px 12px;border-radius:4px;
  border:1px solid var(--line);background:var(--card);color:var(--text-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
button.hbtn:hover{border-color:var(--main-line);color:var(--main-ink);background:var(--tint)}
button.hbtn .dot{width:11px;height:11px;border-radius:50%;background:var(--main);display:inline-block}
.hpop{position:absolute;right:0;top:calc(100% + 8px);background:var(--card);
  border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.14);
  padding:12px;display:none;z-index:50}
.hpop.on{display:block}
.hpop .ttl{font-size:11px;color:var(--text-3);margin-bottom:9px}
.swatches{display:flex;gap:9px}
.swatch{width:34px;border:0;background:transparent;cursor:pointer;padding:0;font-family:inherit}
.swatch i{display:block;width:34px;height:26px;border-radius:4px;border:2px solid transparent}
.swatch.on i{border-color:var(--text)}
.swatch span{display:block;font-size:11px;color:var(--text-3);margin-top:4px;text-align:center}
.layout{display:flex;align-items:flex-start;min-height:calc(100vh - 66px)}
nav{width:246px;flex:none;background:var(--card);border-right:1px solid var(--line);
  padding:22px 0;position:sticky;top:0;min-height:calc(100vh - 66px)}
nav .label{font-size:11px;color:var(--text-3);letter-spacing:1px;padding:0 24px 12px}
nav button{display:block;width:100%;text-align:left;border:0;background:transparent;
  padding:13px 24px;cursor:pointer;border-left:3px solid transparent;color:var(--text-2);
  font-family:inherit;font-size:14px;transition:background .15s}
nav button:hover{background:var(--bg)}
nav button.on{background:var(--main-soft);border-left-color:var(--main);color:var(--main-ink);font-weight:700}
nav button .n{display:inline-block;width:22px;color:var(--text-3);font-size:12px;font-weight:400}
nav button.on .n{color:var(--main-ink)}
main{flex:1;padding:30px 38px 70px;max-width:1160px;min-width:0}
section{display:none}
section.on{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
h2{font-size:21px;margin:0 0 18px;font-weight:700}
.lead{color:var(--text-2);margin:0 0 22px;font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:20px 22px;margin-bottom:18px}
.card>h3{font-size:14px;margin:0 0 14px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.card>h3 .tag{font-weight:400;font-size:11px;color:var(--text-3);
  border:1px solid var(--line);padding:1px 7px;border-radius:3px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* KPI 汇总：4 个字段恒定一行 4 列，不折行（全站规则） */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1180px){.grid4{gap:10px}}
@media(max-width:980px){.grid4{gap:8px}.grid4 .stat{padding:10px 11px}.grid4 .stat .t{font-size:11.5px}.grid4 .stat .v{font-size:17px}}
@media(max-width:980px){.grid2,.grid3{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{background:var(--tint-2);color:var(--text-2);font-weight:600;text-align:left;
  padding:7px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:7px 9px;border-bottom:1px solid var(--line-soft);color:var(--text);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--tint)}
tr.sel{background:var(--main-soft)}
tr.sel td{color:var(--main-ink);font-weight:600}
.num{text-align:right;font-variant-numeric:tabular-nums}
.muted{color:var(--text-3)}
.toolbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
button.act{font-family:inherit;font-size:12.5px;padding:7px 14px;border-radius:4px;
  border:1px solid var(--main-line);background:var(--main-soft);color:var(--main-ink);
  cursor:pointer;transition:.15s}
button.act:hover{background:var(--tint-hover)}
button.act.primary{background:var(--main);border-color:var(--main);color:#fff;font-weight:600}
button.act.primary:hover{background:var(--main-deep)}
button.ghost{background:var(--card);border-color:var(--line);color:var(--text-2)}
button.ghost:hover{background:var(--bg)}
.pill{display:inline-block;font-size:11px;padding:1px 7px;border-radius:3px;white-space:nowrap;
  border:1px solid var(--line);color:var(--text-2);background:var(--tint)}
.pill.g{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.pill.y{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.pill.b{background:var(--main-soft);border-color:var(--main-line);color:var(--main-ink)}
.pill.r{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger)}
/* 状态平铺筛选（全站统一：不用下拉，一排胶囊平铺，点选即筛） */
.steptagwrap{display:flex;align-items:center;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.steptagwrap .flab{font-size:12px;color:var(--text-3);flex:0 0 auto}
.steptag{display:flex;flex-wrap:wrap;gap:6px}
.steptag button{border:1px solid var(--line);background:var(--card);color:var(--text-2);font-family:inherit;
  font-size:12.5px;line-height:1;padding:6px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s}
.steptag button:hover{border-color:var(--main-line);color:var(--main-ink);background:var(--main-soft)}
/* 选中态：底色与列表状态标签（.pill）完全同一套语义色，仅把描边加深、字加粗来区分「选中」。
   语义映射由各页渲染时写入 data-tone（g/b/y/r/n），见 STATUS_TONE / statePill / stageChip / RCV_TONE。 */
.steptag button.on{background-color:var(--main-soft);border-color:var(--main);color:var(--main-ink);font-weight:700}
.steptag button.on[data-tone="g"]{background-color:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.steptag button.on[data-tone="b"]{background-color:var(--main-soft);border-color:var(--main);color:var(--main-ink)}
.steptag button.on[data-tone="y"]{background-color:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.steptag button.on[data-tone="r"]{background-color:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.steptag button.on[data-tone="n"]{background-color:var(--tint);border-color:var(--text-3);color:var(--text-2)}
.note{background:var(--tint);border:1px solid var(--line-soft);border-left:3px solid var(--main-line);
  padding:13px 16px;border-radius:0 4px 4px 0;color:var(--text-2);font-size:13px;margin-top:16px}
.note b{color:var(--text)}
.note.ok{background:var(--ok-soft);border-left-color:var(--ok-line)}
.impl{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px 22px}
.impl h3{font-size:13px;margin:0 0 10px;color:var(--main-ink);font-weight:700}
.impl ul{margin:0;padding-left:19px;color:var(--text-2);font-size:13px}
.impl li{margin:5px 0}
.impl code{background:var(--main-soft);padding:1px 5px;border-radius:3px;font-size:12px;
  color:var(--main-ink);font-family:Consolas,Monaco,monospace}
.flowbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;
  color:var(--text-3);margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.flowbar span{background:var(--tint-2);border:1px solid var(--line);padding:3px 9px;border-radius:3px}
.flowbar span.here{background:var(--main-soft);border-color:var(--main-line);color:var(--main-ink);font-weight:700}
.flowbar i{font-style:normal;color:var(--text-3)}
.kv{display:grid;grid-template-columns:96px 1fr;gap:7px 12px;font-size:13px}
.kv dt{color:var(--text-3)}
.kv dd{margin:0;color:var(--text)}
.stat{background:var(--tint);border:1px solid var(--line-soft);border-radius:5px;padding:13px 15px}
.stat .t{font-size:12px;color:var(--text-3)}
.stat .v{font-size:20px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.stat .v small{font-size:12px;font-weight:400;color:var(--text-3)}
.bar{height:9px;background:var(--bar-bg);border-radius:5px;overflow:hidden;margin:5px 0 0}
.bar>i{display:block;height:100%;background:var(--main);border-radius:5px;width:0}
input[type=number],input[type=text],select{font-family:inherit;font-size:13px;color:var(--text);
  border:1px solid var(--line);border-radius:4px;padding:7px 10px;background:var(--card);outline:none}
input:focus,select:focus{border-color:var(--main);box-shadow:0 0 0 2px var(--main-soft)}
label.ck{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line-soft);
  font-size:13px;color:var(--text-2);cursor:pointer}
label.ck:last-child{border-bottom:0}
label.ck input{accent-color:var(--main);width:15px;height:15px}
label.ck .p{margin-left:auto;color:var(--text);font-weight:600}
.total{background:var(--main-soft);border:1px solid var(--main-line);border-radius:5px;
  padding:16px 18px;margin-top:14px}
.total .row{display:flex;justify-content:space-between;font-size:13px;color:var(--text-2);padding:3px 0}
.total .row b{color:var(--text);font-variant-numeric:tabular-nums}
.total .sum{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:10px;padding-top:11px;border-top:1px solid var(--main-line);font-weight:700}
.total .sum .money{font-size:25px;color:var(--main-ink);font-variant-numeric:tabular-nums}
.steps{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:4px 0 10px}
.steps span{font-size:11.5px;padding:5px 10px;border:1px solid var(--line);border-radius:3px;
  background:var(--card);color:var(--text-3)}
.steps span.done{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.steps span.now{background:var(--main);border-color:var(--main);color:#fff;font-weight:700}
.steps i{font-style:normal;color:var(--text-3);font-size:11px}
.wo{border:1px solid var(--line);border-radius:5px;overflow:hidden}
.wo .hd{background:var(--tint-2);padding:13px 16px;display:flex;gap:20px;flex-wrap:wrap;
  align-items:center;border-bottom:1px solid var(--line)}
.wo .hd .no{font-size:15px;font-weight:700;color:var(--main-ink)}
.wo .blk{padding:15px 18px;border-bottom:1px solid var(--line-soft)}
.wo .blk:last-child{border-bottom:0}
.wo .blk h4{margin:0 0 10px;font-size:12.5px;color:var(--text-3);font-weight:600;letter-spacing:.5px}
.wo .from{font-size:11px;color:var(--main-ink);background:var(--main-soft);
  border:1px solid var(--main-line);padding:1px 6px;border-radius:3px;margin-left:8px}
.qtytable input{width:82px;padding:5px 8px;font-size:12.5px;text-align:right;
  font-variant-numeric:tabular-nums}
.qtytable th.c,.qtytable td.c{text-align:center}
.qtytable tfoot td{background:var(--tint-2);font-weight:700;border-top:1px solid var(--line)}
/* 01 样衣用料表与成本核对 */
.bomtable td,.bomtable th{padding:7px 9px;vertical-align:middle}
.bomtable .thumb{width:46px;height:36px;border:1px solid var(--line);border-radius:3px;
  background:var(--tint);display:block}
.bomtable code{font-size:12px;color:var(--main-ink)}
.bomtable input[type=number]{width:68px;padding:5px 7px;text-align:right;
  font-variant-numeric:tabular-nums}
.bomtable .price{color:var(--text-3);font-variant-numeric:tabular-nums}
.bomtable .sub{font-weight:700;font-variant-numeric:tabular-nums}
.bomtable .del{border:0;background:transparent;color:var(--text-3);cursor:pointer;
  font-size:16px;line-height:1;padding:2px 6px}
.bomtable .del:hover{color:#B4443A}
.bomtable tfoot td{background:var(--tint-2);font-weight:700;border-top:1px solid var(--line)}
.costbar{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch;margin-top:16px}
.costbar>div{flex:1;min-width:150px;background:var(--tint);border:1px solid var(--line-soft);
  border-radius:5px;padding:12px 15px}
.costbar .t{font-size:12px;color:var(--text-3)}
.costbar .v{font-size:19px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;margin-top:2px}
.costbar .v.ok{color:var(--ok);font-size:15px}
.costbar .v.warn{color:var(--warn);font-size:15px}
.costbar .st{display:flex;align-items:center;justify-content:center;flex:none;min-width:106px;
  font-size:13px;font-weight:700;color:var(--text-3);border:1px dashed var(--line)}
.costbar .st.done{color:var(--ok);background:var(--ok-soft);border:1px solid var(--ok-line)}
.mini{background:var(--tint);border:1px solid var(--line-soft);border-radius:4px;
  padding:12px 15px;font-size:12.5px;color:var(--text-2);margin-top:14px}
.mini b{color:var(--text)}
/* 分区小标题 */
.depshead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:26px 0 12px;padding-left:10px;border-left:3px solid var(--main);
  font-size:14px;font-weight:700;color:var(--main-ink)}
.depshead .muted{font-size:12px;font-weight:400}
/* 来源关系条 */
.srcline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--main-soft);border:1px solid var(--main-line)}
.srcline .node{background:var(--card);border:1px solid var(--main-line);border-radius:5px;
  padding:11px 16px;min-width:210px}
.srcline .node .t{font-size:11px;color:var(--text-3);letter-spacing:.5px}
.srcline .node .v{font-size:15px;font-weight:700;color:var(--main-ink)}
.srcline .node .d{font-size:11.5px;color:var(--text-2)}
.srcline .arrow{font-size:20px;color:var(--main-ink);font-weight:700}
.srcline .tail{margin-left:auto;font-size:12px;color:var(--text-2)}
/* 样衣图片 */
.samplewrap{display:grid;grid-template-columns:1.12fr .88fr;gap:22px}
@media(max-width:980px){.samplewrap{grid-template-columns:1fr}}
.samplepics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.samplepics figure{margin:0;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--card)}
.samplepics .ph{height:190px;background:var(--tint);border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center}
.samplepics .ph svg{height:158px;width:auto}
.samplepics figcaption{font-size:11.5px;color:var(--text-3);padding:7px 8px;text-align:center;background:var(--card)}
/* 样衣图片档案 */
.subh{font-size:13px;margin:20px 0 10px;color:var(--main-ink);font-weight:700;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.subh .muted{font-weight:400;font-size:11.5px}
.picgrid,.deliverypics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.picgrid figure,.deliverypics figure{margin:0;border:1px solid var(--line);
  border-radius:5px;overflow:hidden;background:var(--card)}
.picgrid .ph,.deliverypics .ph{background:var(--tint);border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center}
.picgrid .ph{height:104px}
.picgrid .ph svg{height:76px;width:auto}
.deliverypics .ph{height:146px}
.deliverypics .ph svg{height:120px;width:auto}
.picgrid figcaption,.deliverypics figcaption{font-size:11.5px;color:var(--text-2);
  padding:7px 9px;background:var(--card)}
.picgrid figcaption b,.deliverypics figcaption b{color:var(--text);font-weight:600}
.picgrid figcaption span,.deliverypics figcaption span{display:block;
  color:var(--text-3);font-size:11px;line-height:1.4}
@media(max-width:980px){.picgrid,.deliverypics{grid-template-columns:repeat(2,1fr)}}
#toast{position:fixed;right:26px;bottom:26px;background:var(--toast-bg);color:var(--toast-fg);
  padding:11px 17px;border-radius:5px;font-size:13px;opacity:0;pointer-events:none;
  transition:opacity .25s;box-shadow:0 6px 20px rgba(30,41,59,.18);max-width:400px}
#toast.show{opacity:1}
.hint{font-size:12px;color:var(--text-3);margin:8px 0 0}
/* 基础资料库：分组导航 / 列表 / 详情 */
nav .navsep{margin:18px 24px 8px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;color:var(--text-3);letter-spacing:1px}
/* 3 轨网格：左列表卡 | 5px 拖拽条 | 右详情卡；JS 拖拽时写内联 3 轨，窄屏回退单栏 */
.libwrap{display:grid;grid-template-columns:minmax(0,1.12fr) 5px minmax(0,.88fr);gap:0 18px;align-items:start}
.libwrap>.card{min-width:0}
.vsplitter{flex:0 0 auto;width:5px;cursor:col-resize;background:transparent;position:relative;align-self:stretch}
.vsplitter::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:2px;height:34px;border-radius:2px;background:var(--line);transition:.15s}
.vsplitter:hover::after{background:var(--main);height:54px}
/* 跨在列表↔详情分割线上的折叠/展开箭头按钮（与外壳 #sideToggle 同款） */
.vsplit-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 4px rgba(30,41,59,.12);z-index:10;transition:.15s;padding:0}
.vsplit-toggle:hover{color:var(--main-ink);border-color:var(--main);background:var(--main-soft)}
.vsplit-toggle svg{display:block;width:12px;height:12px;transition:transform .2s}
/* 折叠态：详情卡收为 0，仅留箭头按钮，列表占满 */
.libwrap.detail-collapsed>*:last-child{overflow:hidden;opacity:0;pointer-events:none}
@media(max-width:1120px){.libwrap{grid-template-columns:1fr}.vsplitter{display:none}}
.libtable td,.libtable th{padding:7px 9px}
.libtable tbody tr{cursor:pointer}
.libtable .thumb{width:44px;height:34px}
.libtable code{font-size:12px;color:var(--main-ink)}
.libtable .price{font-variant-numeric:tabular-nums}
.bigpic{background:var(--tint);border:1px solid var(--line-soft);border-radius:5px;
  height:184px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.bigpic svg{height:142px;width:auto}
.attr{display:grid;grid-template-columns:82px 1fr;gap:6px 10px;font-size:12.5px}
/* 兼容 <dl class="attr"><div><dt>…</dt><dd>…</dd></div></dl> 的写法（16 / 18 这样写）：
   内层 div 用 display:contents 不参与布局，dt/dd 才能直接落在 82px + 1fr 两列上；
   不加这条，每个 div 会占满第一列、标签和值竖排挤成窄条。 */
.attr>div{display:contents}
.attr dt{color:var(--text-3)}
.attr dd{margin:0;color:var(--text)}
/* 多联系人编辑器 */
.crow{display:grid;grid-template-columns:1.1fr 1.1fr 1.1fr .8fr auto;gap:8px 10px;align-items:end;
  padding:8px 0;border-bottom:1px dashed var(--line-soft)}
.crow label{display:block;font-size:12px;color:var(--text-3)}
.crow label input,.crow label select{display:block;width:100%;margin-top:3px}
.crow .opbtn{height:32px;align-self:end}
.conthead{font-size:12.5px;font-weight:700;color:var(--main-ink);margin:14px 0 6px;
  display:flex;align-items:center;gap:8px}
.conthead .muted{font-weight:400;font-size:11.5px}
.contactlist{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.contactlist .ci{display:flex;align-items:center;gap:8px;font-size:12.5px;flex-wrap:wrap}
.contactlist .ci b{color:var(--text)}
.contactlist .ci .cg{font-size:11px;padding:1px 7px;border-radius:3px;border:1px solid var(--line);
  color:var(--text-2);background:var(--tint)}
/* 历史调价记录 */
.histlist{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.histlist .hi{display:flex;align-items:center;gap:10px;font-size:12px;flex-wrap:wrap;
  background:var(--tint);border:1px solid var(--line-soft);border-radius:4px;padding:6px 10px}
.histlist .hi .hd{color:var(--text-3)}
.histlist .hi .hp{font-weight:700;color:var(--main-ink);font-variant-numeric:tabular-nums}
.histlist .hi .ho{margin-left:auto;color:var(--text-3)}
.desc{background:var(--tint);border:1px solid var(--line-soft);border-radius:4px;
  padding:11px 13px;font-size:12.5px;color:var(--text-2);margin-top:14px;line-height:1.75}
.desc b{color:var(--text)}
.libflow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;
  color:var(--text-3);margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.libflow span{background:var(--tint-2);border:1px solid var(--line);padding:3px 9px;border-radius:3px}
.libflow span.here{background:var(--main-soft);border-color:var(--main-line);
  color:var(--main-ink);font-weight:700}
.libflow i{font-style:normal;color:var(--text-3)}

/* ============ 说明类文字：全站统一「灰色描述」============
   描述性说明（页面导语 / 备注 / 提示 / 实现要点 / 详情描述 / 临时备注）
     一律纯灰小字，无底色、无边框、无橙色竖线，与主色橙完全脱开；
   行内说明（表内注释 / 卡片标签 / 菜单副标题 / 分区注释）
     同一组灰色与字号，不加框，避免版面变碎；
   正式文案（标题、表格、字段值、金额、状态、按钮）仍是深色，二者一眼可分。 */
.lead,.note,.note.ok,.hint,.impl,.desc,.memo{
  background:transparent;
  border:0;border-radius:0;
  color:var(--expl-text);
  font-size:12.5px;
  line-height:1.75;
  padding:2px 0;
  margin:12px 0 0;
}
.lead{margin:0 0 22px}
.desc{line-height:1.8}
.memo{font-size:12px}
.impl ul{margin:0;padding-left:19px}
.lead b,.note b,.note.ok b,.hint b,.impl b,.desc b,.memo b{
  color:var(--expl-strong);font-weight:600}
.impl h3{color:var(--expl-strong);font-size:12.5px;margin:0 0 8px}
.impl ul,.impl li{color:var(--expl-text);font-size:12.5px}
.impl code,.note code,.lead code,.hint code,.desc code,.memo code{
  background:var(--expl-bg);color:var(--expl-strong);border-radius:2px;
  padding:0 4px;font-size:12px;font-family:Consolas,Monaco,monospace}
/* 行内说明：同一组灰色，不加框（字段标签、表格值仍是正式文案） */
.muted,.subh .muted,.depshead .muted,.srcline .tail,nav .label,nav .navsep,
.flowbar,.libflow,.flowbar i,.libflow i{color:var(--expl-text)}
.flowbar span,.libflow span{color:var(--text-2)}
.card>h3 .tag,.tag{
  background:var(--expl-bg);border:1px solid var(--expl-line);
  color:var(--expl-text);font-size:11px;font-weight:400}
/* 结果卡（核对结果 / 生成结果）属正式数据，保持深色 */
.mini{background:var(--tint);border:1px solid var(--line-soft)}
/* ============ 全站统一：行内操作列 ============
   列表「操作」列一律：表头 th.c 居中、单元格 td.op 居中不换行、按钮间距 2px；
   行内操作用 .opbtn（无边框文字按钮，hover 才出浅底），页面级按钮用 .act（带框）。 */
.opbtn{font-family:inherit;font-size:12px;line-height:1;padding:4px 6px;border-radius:4px;
  border:1px solid transparent;background:transparent;color:var(--main-ink);
  cursor:pointer;white-space:nowrap}
.opbtn:hover{background:var(--main-soft);border-color:var(--main-line)}
.opbtn.danger{color:#B4443C}
.opbtn.danger:hover{background:#FDECEC;border-color:#F3C7C7}
th.c,td.op{text-align:center;white-space:nowrap}
.sotable th.c,.sotable td.c{text-align:center;white-space:nowrap}
.tbl td .opbtn + .opbtn{margin-left:2px}
.sotable th.ck,.sotable td.ck{width:34px;text-align:center}
.sock,#soAll{accent-color:var(--main);cursor:pointer;width:14px;height:14px;vertical-align:middle}
.sotable tbody tr{cursor:pointer}
.batchbar{background:var(--expl-bg);border:1px solid var(--line);border-radius:5px;padding:12px 16px;margin:10px 0 0}
.batchbar h4{margin:0 0 10px;font-size:13px;color:var(--text)}
.batchbar .toolbar{margin:0}
.batchbar .memo{margin-top:8px}
/* ===== 批量处理下拉：按钮与面板连成一体（全站统一，与 16 报销管理一致）===== */
.ddwrap{position:relative;display:inline-flex}
.ddwrap .cr{display:inline-block;margin-left:2px;transition:transform .18s}
.ddwrap.open>.act{background-color:var(--main);border-color:var(--main);color:#fff}
.ddwrap.open .cr{transform:rotate(180deg)}
.ddpanel{position:fixed;left:0;top:0;min-width:186px;display:none;
  background:var(--card);border:1px solid var(--line);border-radius:6px;padding:5px;z-index:900;
  box-shadow:0 12px 30px rgba(30,41,59,.18);text-align:left}
.ddwrap.open .ddpanel{display:block}
.ddpanel::before{content:'';position:absolute;top:-5px;left:20px;width:8px;height:8px;
  background-color:var(--card);border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg)}
/* 按钮靠右时面板改为右对齐，避免溢出卡片 */
.ddwrap.rt .ddpanel::before{left:auto;right:20px}
/* 下方空间不够被翻转向上时，小三角改到底部 */
.ddpanel.up::before{top:auto;bottom:-5px;transform:rotate(225deg)}
.ddhead{font-size:11.5px;color:var(--text-3);padding:5px 9px 7px;border-bottom:1px solid var(--line-soft);margin-bottom:4px;
  display:flex;align-items:baseline;gap:5px}
.ddhead b{color:var(--main-ink);font-size:12.5px;font-variant-numeric:tabular-nums}
.ddhead .muted{margin-left:auto;font-size:11px;color:var(--text-3)}
.dditem{display:flex;align-items:center;width:100%;font-family:inherit;font-size:12.5px;
  color:var(--text);background:transparent;border:0;border-radius:4px;padding:8px 9px;
  cursor:pointer;text-align:left;white-space:nowrap}
.dditem:hover{background-color:var(--main-soft);color:var(--main-ink)}
.dditem .kbd{margin-left:auto;font-size:11px;color:var(--text-3)}
.dditem.danger{color:#B4443C}
.dditem.danger:hover{background:#FDECEC;color:#B4443C}
.ddline{height:1px;background:var(--line-soft);margin:4px 2px}
.sodetail{background:var(--tint);border:1px solid var(--main-line);
  border-left:3px solid var(--main);border-radius:0 5px 5px 0;
  padding:14px 18px;margin-top:14px}
.sodetail .dh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sodetail .dh b{font-size:13.5px;color:var(--main-ink)}
.sodetail .dh .opbtn:first-of-type{margin-left:auto}
.sodetail .dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 20px;font-size:12.5px}
.sodetail .dgrid>div{border-bottom:1px dashed var(--line-soft);padding-bottom:6px}
.sodetail .dgrid span{color:var(--text-3);margin-right:9px}
.sodetail .dgrid b{color:var(--text);font-weight:600}
@media(max-width:980px){.sodetail .dgrid{grid-template-columns:1fr 1fr}}
/* 06 辅料库：新增 / 编辑表单 + 勾选列 */
.matform{background:var(--tint);border:1px solid var(--main-line);
  border-radius:5px;padding:14px 16px;margin-bottom:14px}
.matform h4{margin:0 0 12px;font-size:13px;color:var(--main-ink)}
.mfgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 14px}
.mfgrid label{display:block;font-size:12px;color:var(--text-3)}
.mfgrid input,.mfgrid select,.mfgrid textarea{display:block;width:100%;margin-top:4px}
.mfgrid input:disabled{background:var(--expl-bg);color:var(--expl-text)}
.libtable th.c,.libtable td.c{text-align:center;width:34px}
.libtable input[type=checkbox]{accent-color:var(--main);width:14px;height:14px;cursor:pointer}
@media(max-width:1120px){.mfgrid{grid-template-columns:1fr 1fr}}
/* ============ 全站统一规范：工具栏 / 按钮 / 表格 ============
   列表页（01 台账 / 06 辅料档案 / 07 产品档案）共用同一套区域结构：
     单行工具栏 = 查询控件 → 分隔线 → 增删改 → 「批量处理 ▾」→ 批量面板
   表格统一 tbl 基类：数字列右对齐、操作/勾选列居中、复选框主橙。 */
.toolbar .sep{width:1px;height:20px;background:var(--line);margin:0 3px;flex:none}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.tbl th.num{text-align:right}
table.tbl th.c,table.tbl td.c{text-align:center;white-space:nowrap}
table.tbl th.ck,table.tbl td.ck,
.suptable th.ck,.suptable td.ck{width:34px;text-align:center;padding-left:6px;padding-right:6px}
table.tbl input[type=checkbox],.suptable input[type=checkbox]{accent-color:var(--main);
  width:14px;height:14px;cursor:pointer;vertical-align:middle}
/* 面板里带输入框时（如 18 批量审批意见）稍加宽 */
.ddwrap.wide .ddpanel{min-width:236px}
.ddwrap .ddpanel .ddinput{width:100%;box-sizing:border-box;margin:2px 0 6px;font-family:inherit;
  font-size:12.5px;padding:6px 8px;border:1px solid var(--line);border-radius:4px;
  background:var(--card);color:var(--text)}
.libtable code,.libtable td b,.libtable td:nth-child(5){white-space:nowrap}
button.chip{font-family:inherit;font-size:12px;padding:5px 12px;border-radius:14px;
  border:1px solid var(--line);background:var(--expl-bg);color:var(--text-2);cursor:pointer}
button.chip:hover{border-color:var(--main-line);color:var(--main-ink)}

/* ============ 全站表格分页栏 ============ */
.pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:13px;
  font-size:12.5px;color:var(--text-2)}
.pager .pinfo{color:var(--text-3)}
.pager .psep{width:1px;height:18px;background:var(--line);margin:0 2px;flex:none}
.pager .psz{display:inline-flex;align-items:center;gap:5px;color:var(--text-3)}
.pager select.pagersize{font-family:inherit;font-size:12.5px;padding:4px 7px;border-radius:4px;
  border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer}
.pager .pbtn{font-family:inherit;font-size:12.5px;padding:5px 12px;border-radius:4px;
  border:1px solid var(--line);background:var(--card);color:var(--text-2);cursor:pointer;white-space:nowrap}
.pager .pbtn:hover:not(:disabled){border-color:var(--main-line);color:var(--main-ink);background:var(--main-soft)}
.pager .pbtn:disabled{opacity:.45;cursor:not-allowed}
.pager .pjump{display:inline-flex;align-items:center;gap:6px;color:var(--text-3)}
.pager .pjumpin{width:56px;font-family:inherit;font-size:12.5px;padding:4px 7px;border-radius:4px;
  border:1px solid var(--line);background:var(--card);color:var(--text);text-align:center}
.pager .pjumpin:focus{border-color:var(--main);box-shadow:0 0 0 2px var(--main-soft)}

/* ============ 主题色 / 深浅模式（header 工具按钮切换） ============ */
:root{
  --tint:#FFF9F5; --tint-2:#FBF3EC; --tint-hover:#FFE4D3; --tint-line:#F3D3BC;
  --bar-bg:#F2EAE3; --toast-bg:#1E293B; --toast-fg:#FFFFFF;
  --ok-line:#C9E2D5; --warn-line:#EBD8B6;
}
html[data-accent="blue"]{
  --main:#2F6BED;--main-ink:#1D4FA8;--main-deep:#2557C7;--main-soft:#EEF4FF;--main-line:#CFDFFF;--main-mid:#6C96F5;
  --tint:#F5F8FF;--tint-2:#EDF3FF;--tint-hover:#DDE9FF;--tint-line:#D3E0FA;--bar-bg:#E6EDFA;
  --line:#DCE4F2;--line-soft:#EDF1F8;--bg:#F8FAFD;
}
html[data-accent="teal"]{
  --main:#0E9AA7;--main-ink:#0A6E78;--main-deep:#0A7F8B;--main-soft:#E9F7F8;--main-line:#BEE6E9;--main-mid:#4FC2CC;
  --tint:#F3FAFA;--tint-2:#E8F4F5;--tint-hover:#D5EDEF;--tint-line:#C5E6E9;--bar-bg:#DDEEEE;
  --line:#D8E6E7;--line-soft:#EBF3F4;--bg:#F7FBFA;
}
html[data-accent="green"]{
  --main:#2E9E6B;--main-ink:#1C7049;--main-deep:#248357;--main-soft:#EAF7F0;--main-line:#C5E7D5;--main-mid:#67C49A;
  --tint:#F4FAF7;--tint-2:#EAF5EE;--tint-hover:#D8EEDF;--tint-line:#CAE9D9;--bar-bg:#DDEEE5;
  --line:#D9E8DF;--line-soft:#ECF4EF;--bg:#F8FBF9;
}
html[data-accent="purple"]{
  --main:#7C5CD6;--main-ink:#5939AC;--main-deep:#6848BC;--main-soft:#F2EDFF;--main-line:#DCD0FA;--main-mid:#A58AE8;
  --tint:#F9F6FF;--tint-2:#F1EBFD;--tint-hover:#E7DEFA;--tint-line:#DED1F7;--bar-bg:#E9E2F6;
  --line:#E3DBF1;--line-soft:#F1ECF9;--bg:#FAF8FD;
}
html[data-mode="dark"]{
  --bg:#151A22;--card:#1E2530;--line:#33404F;--line-soft:#2A3542;
  --text:#E8EDF4;--text-2:#B9C5D2;--text-3:#8C9AAB;
  --tint:#222B36;--tint-2:#26313D;--tint-hover:#33404F;--tint-line:#3A4757;--bar-bg:#2A3542;
  --expl-bg:#26313D;--expl-line:#3A4757;--expl-text:#9AA8B8;--expl-strong:#C3CEDA;
  --ok:#67C7A0;--ok-soft:#1F3A31;--ok-line:#2F5547;
  --warn:#E3B36A;--warn-soft:#3A2E1B;--warn-line:#5C4728;
  --toast-bg:#E8EDF4;--toast-fg:#151A22;
  --side:#1A212B;--input:#222B36;
  --main-soft:#2B3542;--main-soft:color-mix(in srgb,var(--main) 20%,var(--card));
  --main-line:#3E4C5E;--main-line:color-mix(in srgb,var(--main) 42%,var(--card));
  --main-ink:#FFB08A;--main-ink:color-mix(in srgb,var(--main) 58%,#FFFFFF);
  --danger:#F1646A;--danger-soft:#3A2326;--danger-line:#7A3A3E;
}
html[data-mode="dark"] .samplepics .ph,
html[data-mode="dark"] .picgrid .ph,
html[data-mode="dark"] .deliverypics .ph,
html[data-mode="dark"] .bigpic{background:#2E3540}
html[data-mode="dark"] .samplepics .ph svg,
html[data-mode="dark"] .picgrid .ph svg,
html[data-mode="dark"] .deliverypics .ph svg,
html[data-mode="dark"] .bigpic svg{filter:brightness(.84) saturate(.88)}
html[data-mode="dark"] svg.thumb{filter:brightness(.8) saturate(.85)}

/* ============ 当前租户切换 / 组织权限 / 租户统计 ============ */
header .htag{font-size:11px;color:var(--text-3);white-space:nowrap}
header .hsep{width:1px;height:18px;background:var(--line);margin:0 2px;flex:none}
select.hbtn.tsel{font-family:inherit;font-size:12.5px;padding:7px 10px;border-radius:4px;
  border:1px solid var(--line);background:var(--card);color:var(--text-2);cursor:pointer;max-width:180px}
select.hbtn.tsel option{background:var(--card);color:var(--text)}
.orgtable td,.orgtable th{white-space:nowrap}
.permhead{font-size:12px;color:var(--text-3);margin:14px 0 4px}
.permtable{width:100%;max-width:760px;border-collapse:collapse;font-size:12px;margin-top:6px}
.permtable th,.permtable td{padding:6px 10px;border-bottom:1px solid var(--line-soft)}
.permtable th{background:var(--tint);color:var(--text-2);font-weight:600}
.permtable th.c,.permtable td.c{text-align:center}
.permtable input[type=checkbox]{accent-color:var(--main);width:14px;height:14px;cursor:pointer}

/* ============ 样衣图片：台账缩略图 / 可点图卡 / 预览灯箱 ============ */
.sothumb{width:40px;height:40px;padding:2px;border:1px solid var(--line-soft);border-radius:4px;
  background:var(--card);cursor:zoom-in;display:inline-flex;align-items:center;justify-content:center}
svg.thumb{cursor:zoom-in}
svg.thumb:hover{opacity:.82}
.sothumb:hover{border-color:var(--main-line);background:var(--main-soft)}
.sothumb svg{width:100%;height:100%}
.nopic{color:var(--text-3)}
.picgrid figure.pvcard,.deliverypics figure.pvcard{cursor:zoom-in}
.picgrid figure.pvcard:hover,.deliverypics figure.pvcard:hover{
  border-color:var(--main-line);box-shadow:0 2px 8px rgba(30,41,59,.08)}
#picPreview{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center}
/* 通用弹层容器：openPreview 之外的弹窗（用料核对 / 新建编辑）复用同一套 .pv 视觉 */
.pv{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center}
.pv-box.form{width:min(560px,94vw);max-height:calc(100% - 32px);display:flex;flex-direction:column}
.pv-box.wide{width:min(880px,95vw)}
.pv-body{padding:16px 18px;overflow:auto;flex:1;min-height:0}
.pv-footbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:1px solid var(--line-soft)}
.pv-mask{position:absolute;inset:0;background:rgba(15,23,42,.62)}
.pv-box{position:relative;background:var(--card);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 18px 50px rgba(15,23,42,.28);width:min(680px,92vw);overflow:hidden;
  max-height:calc(100% - 32px);display:flex;flex-direction:column}
.pv-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.pv-head b{font-size:14px;color:var(--text)}
.pv-x{margin-left:auto;border:0;background:transparent;color:var(--text-2);font-size:22px;
  line-height:1;cursor:pointer;padding:0 4px}
.pv-x:hover{color:var(--main-ink)}
.pv-img{height:min(60vh,460px);min-height:0;flex:0 1 auto;background:var(--tint);display:flex;
  align-items:center;justify-content:center;padding:16px}
.pv-img svg{height:100%;width:auto;max-width:100%}
.pv-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px;border-top:1px solid var(--line-soft)}
.pv-foot span{font-size:12px;color:var(--text-3);text-align:center;flex:1}
html[data-mode="dark"] .sothumb svg,
html[data-mode="dark"] .pv-img svg{filter:brightness(.84) saturate(.88)}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 12px;margin-top:12px;font-size:12px}
.statgrid div{border-bottom:1px dashed var(--line-soft);padding-bottom:5px}
.statgrid span{color:var(--text-3);margin-right:6px}
.statgrid b{color:var(--text)}
@media(max-width:980px){.statgrid{grid-template-columns:1fr 1fr}}

/* ============ 左侧导航：可折叠分组（accordion） ============ */
.navgrp{margin:2px 0}
.navgh{display:flex;align-items:center;justify-content:space-between;width:100%;
  border:0;background:transparent;cursor:pointer;font-family:inherit;
  padding:11px 22px;font-size:12px;font-weight:700;color:var(--text-3);letter-spacing:.5px}
.navgh:hover{color:var(--main-ink);background:var(--tint)}
.navgh .navarr{width:7px;height:7px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);
  transform:rotate(45deg);transition:transform .18s;opacity:.7;flex:none;margin-right:4px}
.navgrp.collapsed .navarr{transform:rotate(-45deg)}
.navitems{overflow:hidden}
.navgrp.collapsed .navitems{display:none}
.navitems button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;
  padding:10px 22px 10px 30px;cursor:pointer;border-left:3px solid transparent;
  color:var(--text-2);font-family:inherit;font-size:13.5px;transition:background .15s}
.navitems button:hover{background:var(--bg)}
.navitems button:hover .mi{color:var(--main-ink)}
.navitems button.on{background:var(--main-soft);border-left-color:var(--main);
  color:var(--main-ink);font-weight:700}
.navitems button .mi{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;color:var(--text-2);transition:color .15s}
.navitems button .mi svg{display:block}
.navitems button.on .mi{color:var(--main-ink)}
.navitems button .ml{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 折叠态专用：2 字缩写标签（展开态隐藏） */
.navitems button .ml-abbr{display:none}
/* 外壳侧栏内的导航：去掉独立宽度与 sticky，跟随侧栏容器 */
#sidebar .nav{width:auto;padding:8px 0;border:0;position:static;min-height:0;background:transparent;
  flex:1;display:flex;flex-direction:column}
#sidebar .navgrp{margin:1px 0}
#sidebar .navgh{padding:10px 18px}
#sidebar .navitems button{padding:9px 18px 9px 26px}
/* 整栏收起开关（底部） */
/* ============ 整栏收起（rail）：只显示图标 ============ */
.sb-collapsed .navgh,.sb-collapsed .navarr{display:none}
.sb-collapsed .navgrp.collapsed .navitems{display:block !important}
.sb-collapsed .navitems button{position:relative;display:block;text-align:center;padding:8px 4px 18px}
.sb-collapsed .navitems button .mi{display:block;text-align:center;margin:0;height:22px}
.sb-collapsed .navitems button .ml{display:none}
.sb-collapsed .navitems button .ml-abbr{display:block;position:absolute;left:2px;right:2px;top:30px;text-align:center;font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-collapsed .navitems button.on{background:var(--main-soft)}
.sb-collapsed .navitems button{position:relative}
.sb-collapsed .navitems button.on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--main);border-radius:0 3px 3px 0}
/* 整栏完全收起：外壳 #sidebar 与模块页 #crmNav 均整块隐藏，仅留分割线箭头 / 浮层按钮可再展开（与表格↔详情折叠一致） */
html.sb-collapsed #sidebar,#sidebar.sb-collapsed,
html.sb-collapsed nav#crmNav,nav#crmNav.sb-collapsed{display:none !important}
/* 收起态浮层「展开菜单」按钮：仅模块页（无外壳分割线箭头时）使用 */
.navreopen{position:fixed;top:11px;left:11px;z-index:60;width:32px;height:32px;border-radius:9px;
  border:1px solid var(--line);background:var(--card);color:var(--main-ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(30,41,59,.16);padding:0}
.navreopen:hover{border-color:var(--main);background:var(--main-soft)}
.navreopen svg{width:17px;height:17px;display:block}
/* 折叠态保留分割线箭头按钮用于一键展开；拖拽已在 JS 侧禁用 */
.sb-collapsed .navgrp+.navgrp{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}

/* ============ 顶栏多标签页 ============ */
#tabbar .tab{font-family:inherit;font-size:12.5px;height:27px;padding:0 10px 0 12px;
  border:1px solid var(--line);background:var(--card);color:var(--text-2);cursor:pointer;
  border-radius:5px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:none}
#tabbar .tab:hover{border-color:var(--main-line);color:var(--main-ink)}
#tabbar .tab.on{background:var(--main-soft);border-color:var(--main-line);color:var(--main-ink);
  font-weight:600}
#tabbar .tab .tx{max-width:160px;overflow:hidden;text-overflow:ellipsis}
#tabbar .tab .tc{font-style:normal;font-size:14px;line-height:1;color:var(--text-3);
  width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
#tabbar .tab .tc:hover{background:var(--danger-soft);color:var(--danger)}
#tabbar .tabtool{margin-left:auto;font-size:14px;color:var(--text-3);cursor:pointer;
  padding:3px 7px;border-radius:5px;flex:none}
#tabbar .tabtool:hover{background:var(--tint);color:var(--danger)}

/* ============ 独立页（被直接打开、非外壳 iframe）顶部标签栏 ============
   铺满右侧内容区顶部，与外壳 #tabbar 共用同一套 .tab / .tabtool 样式；
   用负 margin 抵消 main 的 padding 实现左右通栏，top:0 吸顶。 */
#tabbar.modtab{flex:none;display:flex;align-items:center;gap:2px;height:40px;
  margin:-30px -38px 18px;padding:0 38px;background:var(--card);
  border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;
  position:sticky;top:0;z-index:20}
#tabbar.modtab .tabtool{margin-left:auto}

/* ============ iframe 内（被外壳加载）：隐藏自身 header / 侧栏，仅留内容 ============ */
body.in-frame{overflow:visible}
body.in-frame>header{display:none}
/* layout 外壳在 iframe 内直接“消失”（display:contents），内容区不再被多套一层布局包裹，铺满整个右侧区域 */
body.in-frame .layout{display:contents}
body.in-frame #crmNav{display:none}
body.in-frame main{width:100%;max-width:none;margin:0;flex:1 1 auto;padding:16px 18px 40px}
body.in-frame section.on>h2:first-child{display:none}
body.in-frame{background:var(--bg)}

/* ============ 高风险按钮：删除 / 批量删除 红色警示 ============ */
button.act.danger{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger);font-weight:600}
button.act.danger:hover{background:var(--danger-line);border-color:var(--danger)}
.opbtn.danger{color:var(--danger);border-color:var(--danger-line);background:var(--card)}
.opbtn.danger:hover{background:var(--danger-soft);border-color:var(--danger)}

/* ============ 整体细节美化 ============ */
.card{border-radius:10px;box-shadow:0 1px 3px rgba(30,41,59,.05);padding:20px 22px}
.toolbar button.act,.toolbar button.act.primary,.toolbar button.act.ghost,
.batchbar button.act{border-radius:5px}
.hbtn.icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0}
.hbtn.icon svg{display:block}
.hbtn.icon:hover{background:var(--tint)}
.hbtn.icon.on{background:var(--main-soft);border-color:var(--main-line);color:var(--main-ink)}
/* 顶栏「主题色」按钮：左侧小圆点实时显示当前选中的主题色 */
#accentBtn{width:auto;padding:0 12px;gap:7px}
#accentBtn .adot{width:10px;height:10px;border-radius:50%;background:var(--main);
  display:inline-block;flex:0 0 auto;box-shadow:0 0 0 2px var(--main-soft)}
th:first-child,td:first-child{padding-left:12px}
th:last-child,td:last-child{padding-right:12px}

/* ===== 类别树（产品档案 07 / 辅料档案 06 共用）=====
   一级 → 子类两层的可维护字典：标题「+」建一级，节点 hover 浮出 加子类/改名/删除，
   树内滚动；卡片高度由各页 JS 与右侧列表同步。 */
.catcard{padding:14px 12px 12px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.catcard>h3{margin:0 0 9px;padding:0 4px;font-size:13px;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.catq{flex:0 0 auto;margin:0 0 8px}
.catq input{width:100%;font-size:12.5px;padding:5px 8px}
.cattree{font-size:13px;-webkit-user-select:none;user-select:none;
  flex:1 1 auto;min-height:0;overflow:auto;margin:0 -2px;padding:0 2px}
/* 标题右侧「+ 一级类别」 */
.ctadd{margin-left:auto;width:22px;height:22px;flex:0 0 22px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--text-2);
  cursor:pointer;font-size:15px;line-height:1;padding:0;font-family:inherit;transition:.15s}
.ctadd:hover{color:var(--main-ink);border-color:var(--main);background:var(--main-soft)}
/* 节点右侧悬浮操作：新增子类 / 重命名 / 删除 */
.ctops{display:none;margin-left:auto;align-items:center;gap:1px}
.ctnode.hasops:hover .ctops,.ctnode.hasops.on .ctops{display:flex}
.ctnode.hasops:hover .ctn,.ctnode.hasops.on .ctn{display:none}
.ctops button{width:19px;height:19px;flex:0 0 19px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;border-radius:3px;cursor:pointer;color:var(--text-3);padding:0}
.ctops button:hover{background:rgba(120,130,145,.16);color:var(--text)}
.ctops button.del:hover{background:var(--danger-soft);color:var(--danger)}
.ctops svg{width:11px;height:11px;display:block}
.ctempty{font-size:12px;color:var(--text-3);padding:8px 6px;line-height:1.7}
.ctnode{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:5px;
  cursor:pointer;color:var(--text-2);line-height:1.35}
.ctnode:hover{background:var(--tint)}
.ctnode.on{background:var(--main-soft);color:var(--main-ink);font-weight:600}
.ctnode.on .ctn{color:var(--main-ink)}
.ctnode.all{padding-left:22px}
.ctnode.kid{padding-left:26px}
.ctarw{width:14px;height:14px;flex:0 0 14px;border:0;background:transparent;padding:0;
  cursor:pointer;position:relative}
.ctarw::before{content:'';position:absolute;left:4px;top:5px;width:0;height:0;
  border:4px solid transparent;border-left-color:var(--text-3);border-right:0;
  transition:transform .15s}
.ctarw.open::before{transform:rotate(90deg);transform-origin:2px 4px}
.ctkids.closed{display:none}
.ctn{margin-left:auto;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.catnow{font-size:12px;font-weight:400;color:var(--text-3)}
.detops{margin-left:auto;display:flex;align-items:center;gap:6px}