*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Microsoft YaHei',-apple-system,sans-serif;background:#f0f4f8;color:#2d3748;font-size:14px}
h1{font-size:18px;font-weight:700}
h2{font-size:16px;font-weight:700;color:#1e3a5f;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid #e2e8f0}
h2 .sub{font-size:12px;font-weight:400;color:#718096;margin-left:8px}

/* ===== 顶部抬头：品牌蓝 + logo + 公司名（参考丰益捷风格） ===== */
.topbar{background:linear-gradient(100deg,#0f9cd8 0%,#23b4e9 55%,#3ec9f6 100%);color:#fff;padding:11px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;box-shadow:0 2px 10px rgba(12,110,160,.20);position:relative;z-index:50}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.logo{flex:0 0 50px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.brand-mark,.brand-logo{display:block;width:50px;height:50px;border-radius:14px}
.brand-mark svg{display:block;width:50px;height:50px}
.brand-logo{object-fit:contain;background:#fff;padding:2px;box-sizing:border-box}
.logo.wide{flex:0 0 auto;width:auto;max-width:150px}
.brand-logo.wide{width:auto;max-width:150px;height:42px;padding:0;border-radius:8px;object-fit:contain;background:transparent}
.logo-prev{display:flex;align-items:center;gap:10px;font-size:13px;color:#4a5568}
.logo-prev img{width:50px;height:50px;border-radius:12px;background:#fff;border:1px solid #e2e8f0;object-fit:contain;padding:2px;box-sizing:border-box}
.brand-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.brand-txt .company{font-size:20px;font-weight:700;letter-spacing:2px;line-height:1.2;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.14)}
.brand-txt .sysline{font-size:12px;color:rgba(255,255,255,.92);letter-spacing:.5px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.brand-txt .wms{font-size:10px;font-weight:700;letter-spacing:1.2px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);border-radius:4px;padding:0 4px;line-height:1.55}
.sync{font-size:12px;color:#eafff3;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);padding:3px 10px 3px 9px;border-radius:12px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.sync::before{content:'';width:7px;height:7px;border-radius:50%;background:#5df2a0;box-shadow:0 0 0 3px rgba(93,242,160,.22)}
.sync.off::before{background:#ff8a8a;box-shadow:0 0 0 3px rgba(255,138,138,.22)}
.sync.off{color:#fff2f2;background:rgba(229,62,62,.55);border-color:rgba(255,255,255,.35)}
.hd-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hd-btns{display:flex;gap:7px;flex-wrap:wrap}
.hd-btns .btn{padding:6px 13px;font-size:12.5px;border-radius:16px;font-weight:600}
.user-chip{display:flex;align-items:center;gap:8px;padding:3px 13px 3px 3px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:24px}
.user-chip .avatar{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center}
.user-chip .avatar svg{width:18px;height:18px;fill:#1587bb}
.user-meta{display:flex;flex-direction:column;line-height:1.2;max-width:150px}
.user-meta b{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-meta i{font-size:11px;font-style:normal;color:rgba(255,255,255,.84)}
.op{font-size:12px;display:flex;align-items:center;gap:6px;opacity:.95;white-space:nowrap}
.op input{width:130px;padding:6px 10px;border:none;border-radius:5px;font-size:13px;outline:none}
.op-fixed{display:inline-block;padding:6px 12px;background:rgba(255,255,255,.16);border:1px dashed rgba(255,255,255,.45);border-radius:5px;font-size:13px;color:#fff;font-weight:600;letter-spacing:.5px}
.upd{font-size:11.5px;color:rgba(255,255,255,.78);white-space:nowrap}
@media(max-width:1320px){.upd{display:none}}
@media(max-width:1120px){.brand-txt .company{font-size:16px;letter-spacing:1px}.hd-btns .btn{padding:5px 10px;font-size:12px}}
@media(max-width:900px){.brand-txt .sysline{display:none}.user-meta{max-width:96px}}

.btn{background:#1888c4;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;transition:.15s}
.btn:hover{filter:brightness(1.12)}
.btn-green{background:#38a169}
.btn-orange{background:#dd6b20}
.btn-red{background:#e53e3e}
.btn-ghost{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3)}
.topbar .btn-ghost{color:#fff}
.card .btn-ghost{background:#edf2f7;color:#4a5568;border:none}
.btn-sm{padding:5px 10px;font-size:12px}

/* 导航并入头部，与顶栏同色系 */
.tabs{display:flex;background:#0e8ec4;padding:0 18px;overflow-x:auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px rgba(12,110,160,.14);scrollbar-width:none}
.tabs::-webkit-scrollbar{height:0}
.tab{padding:11px 18px;cursor:pointer;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.80);border-bottom:3px solid transparent;white-space:nowrap;transition:.15s}
.tab:hover{color:#fff;background:rgba(255,255,255,.13)}
.tab.active{color:#fff;background:#2bb8e9;border-bottom-color:#fff}

.pane{display:none;padding:20px 24px;max-width:1600px;margin:0 auto}
.pane.active{display:block}

.card{background:#fff;border-radius:10px;padding:20px;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.form-card{border-left:4px solid #38a169}

.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.field{display:flex;flex-direction:column;gap:5px}
.field.wide{grid-column:span 4}
.field label{font-size:12px;color:#4a5568;font-weight:600}
.field input,.field select{padding:9px 11px;border:1px solid #cbd5e0;border-radius:6px;font-size:13px;outline:none;transition:.15s;font-family:inherit}
.field input:focus,.field select:focus{border-color:#2c5282;box-shadow:0 0 0 3px rgba(44,82,130,.12)}
.field input.readonly{background:#f7fafc;color:#4a5568}
.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:18px;padding-top:14px;border-top:1px solid #edf2f7}
.tip{font-size:13px;color:#718096;margin-right:auto}
.tip.ok{color:#38a169;font-weight:600}
.tip.bad{color:#e53e3e;font-weight:600}

.filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filter-bar select,.filter-bar input{padding:7px 11px;border:1px solid #cbd5e0;border-radius:6px;font-size:13px;outline:none;font-family:inherit}
.filter-bar input[type=text]{min-width:200px}
.dash{color:#a0aec0;font-size:13px}
.grow{flex:1}
.stat{font-size:13px;color:#4a5568;font-weight:600}

.inline-add{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.inline-add input{padding:8px 11px;border:1px solid #cbd5e0;border-radius:6px;font-size:13px;outline:none;flex:1;min-width:140px;font-family:inherit}

.table-wrap{overflow-x:auto;border:1px solid #e2e8f0;border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
th{background:#f7fafc;padding:10px 12px;text-align:left;font-weight:600;color:#4a5568;border-bottom:2px solid #e2e8f0;white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid #f0f0f0;white-space:nowrap}
tr:hover td{background:#f7fafc}
tr.voided td{color:#a0aec0;text-decoration:line-through}
.tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700}
.tag.in{background:#c6f6d5;color:#22543d}
.tag.out{background:#fed7d7;color:#742a2a}
.tag.s-normal{background:#c6f6d5;color:#22543d}
.tag.s-low{background:#fefcbf;color:#744210}
.tag.s-out{background:#fed7d7;color:#742a2a}
.tag.s-empty{background:#edf2f7;color:#a0aec0}
.empty-row{text-align:center;color:#a0aec0;padding:30px}
/* 对账页入库明细里的送货单缩略图（点一下放大看原图） */
.note-thumb{width:52px;height:52px;object-fit:cover;border-radius:8px;border:1px solid #e2e8f0;
  margin:2px 6px 2px 0;cursor:pointer;vertical-align:middle;background:#f7fafc}
.note-thumb:hover{border-color:#3182ce;box-shadow:0 2px 6px rgba(49,130,206,.25)}

.legend{display:flex;gap:16px;padding:10px 24px;background:#fff;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;align-items:center}
.legend-item{display:flex;align-items:center;gap:6px;font-size:13px}
.lg{width:18px;height:18px;border-radius:3px;border:1px solid rgba(0,0,0,.1)}
.lg.normal{background:linear-gradient(135deg,#48bb78,#38a169)}
.lg.low{background:linear-gradient(135deg,#ecc94b,#d69e2e)}
.lg.out{background:linear-gradient(135deg,#fc8181,#e53e3e)}
.lg.empty{background:#edf2f7;border:1px dashed #cbd5e0}
.hint{margin-left:auto;font-size:12px;color:#718096}
.search-box{display:flex;border:1px solid #cbd5e0;border-radius:6px;overflow:hidden;margin-left:8px}
.search-box input{border:none;outline:none;padding:6px 11px;font-size:13px;width:220px;font-family:inherit}
.search-box button{background:#2c5282;color:#fff;border:none;padding:6px 14px;cursor:pointer;font-size:13px}

.result{position:fixed;top:120px;right:24px;background:#fff;border-radius:8px;padding:12px 16px;box-shadow:0 4px 16px rgba(0,0,0,.15);z-index:200;display:none;font-size:13px;max-width:280px}
.result.show{display:block}
.result .ok{color:#38a169;font-weight:600}
.result .no{color:#e53e3e;font-weight:600}
.result .loc div{padding:3px 0;color:#555}

.container{padding:0}
.area{background:#fff;border-radius:10px;padding:20px;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.area-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #e2e8f0;flex-wrap:wrap;gap:10px}
.area-title{font-size:17px;font-weight:700;color:#1e3a5f}
.area-stats{font-size:13px;color:#666}
.area-stats span{margin-left:14px}
.area-stats b{color:#2c5282}
.mini-btn{margin-left:12px;padding:2px 10px;font-size:12px;border:1px solid #3182ce;background:#ebf8ff;color:#2b6cb0;border-radius:4px;cursor:pointer;font-weight:600}
.mini-btn:hover{background:#3182ce;color:#fff}
.shelf-name,.pallet-name{display:flex;align-items:center;justify-content:space-between;gap:4px}
.shelf-ops{display:flex;gap:3px}
.shelf-ops button{padding:1px 6px;font-size:11px;border:1px solid #cbd5e0;background:#fff;color:#4a5568;border-radius:3px;cursor:pointer;line-height:1.5}
.shelf-ops button:hover{border-color:#3182ce;color:#2b6cb0;background:#ebf8ff}
.shelf-ops button.danger:hover{border-color:#e53e3e;color:#e53e3e;background:#fff5f5}
.shelves{display:flex;gap:20px;flex-wrap:wrap}
.shelf{background:#f7fafc;border:2px solid #cbd5e0;border-radius:8px;padding:10px;min-width:200px;flex:1;max-width:300px}
.shelf-name{text-align:center;font-weight:700;font-size:14px;margin-bottom:8px;padding:4px;background:#e2e8f0;border-radius:4px}
.level{display:flex;gap:4px;margin-bottom:4px}
.lv-label{width:26px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#718096;font-weight:600;background:#edf2f7;border-radius:3px}
.lv-cells{display:flex;gap:3px;flex:1}
.cell{flex:1;min-height:40px;border-radius:4px;border:1px solid rgba(0,0,0,.1);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;font-weight:600;transition:all .2s;overflow:hidden}
.cell:hover{transform:scale(1.08);z-index:10;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.cell.empty{background:#edf2f7;color:#a0aec0;border:1px dashed #cbd5e0}
.cell.normal{background:linear-gradient(135deg,#48bb78,#38a169)}
.cell.low{background:linear-gradient(135deg,#ecc94b,#d69e2e)}
.cell.out{background:linear-gradient(135deg,#fc8181,#e53e3e)}
.cell.hl,.p-item.hl{animation:pulse 1s infinite;box-shadow:0 0 0 3px #3182ce;z-index:20}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.cell .qty{font-size:11px;font-weight:700}
.cell .nm{font-size:9px;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.pallet-area{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px dashed #cbd5e0}
.pallet{background:#fef5e7;border:2px solid #d69e2e;border-radius:8px;padding:10px;min-width:170px;flex:1;max-width:250px}
.pallet-name{text-align:center;font-weight:700;font-size:13px;color:#744210;margin-bottom:8px;padding:4px;background:#f6e05e;border-radius:4px}
.p-item{display:flex;justify-content:space-between;padding:5px 8px;border-radius:4px;font-size:12px;cursor:pointer;margin-bottom:4px;transition:all .2s}
.p-item:hover{transform:translateX(3px);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.p-item.normal{background:#c6f6d5;color:#22543d}
.p-item.low{background:#fefcbf;color:#744210}
.p-item.out{background:#fed7d7;color:#742a2a}
.outdoor{background:#fffff0;border:1px solid #ecc94b}
.outdoor .area-title{color:#744210}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:20px}
.stat-card{background:#fff;border-radius:10px;padding:18px 20px;box-shadow:0 1px 4px rgba(0,0,0,.06);border-left:4px solid #2c5282}
.stat-card.green{border-left-color:#38a169}
.stat-card.amber{border-left-color:#dd6b20}
.stat-card.red{border-left-color:#e53e3e}
.stat-card.purple{border-left-color:#805ad5}
.stat-card .label{font-size:12px;color:#718096;margin-bottom:6px}
.stat-card .value{font-size:26px;font-weight:700;color:#1e3a5f;line-height:1.2}
.stat-card .value small{font-size:13px;font-weight:600;color:#718096;margin-left:4px}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:1100px){.chart-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:repeat(2,1fr)}.field.wide{grid-column:span 2}}
.chart-box{background:#fff;border-radius:10px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.chart-box h3{font-size:14px;font-weight:600;color:#1e3a5f;margin-bottom:14px}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:13px}
.bar-row .nm{width:110px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4a5568}
.bar-row .track{flex:1;background:#edf2f7;border-radius:4px;height:20px;overflow:hidden}
.bar-row .bar{height:100%;border-radius:4px;background:#2c5282}
.bar-row .bar.green{background:#38a169}
.bar-row .bar.amber{background:#dd6b20}
.bar-row .vl{width:90px;text-align:right;flex-shrink:0;font-weight:600;color:#2d3748;font-size:12px}

.loading{text-align:center;padding:50px;color:#718096}
.loading .spin{display:inline-block;width:30px;height:30px;border:3px solid #e2e8f0;border-top-color:#2c5282;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:10px}
@keyframes spin{to{transform:rotate(360deg)}}
.error{text-align:center;padding:40px;color:#e53e3e}

.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center}
.modal.show{display:flex}
.modal-box{background:#fff;border-radius:12px;padding:24px;width:460px;max-width:92%;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-box h3{font-size:17px;margin-bottom:14px;color:#1e3a5f;padding-bottom:10px;border-bottom:2px solid #e2e8f0}
/* 送货单大图查看器：全屏，可缩放/平移/旋转 */
#photoViewer{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:1500;flex-direction:column}
#photoViewer.show{display:flex}
.pv-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:rgba(0,0,0,.45);color:#fff;font-size:14px;flex-shrink:0;flex-wrap:wrap}
.pv-bar .pv-title{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}
.pv-bar button{background:rgba(255,255,255,.16);color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:13px}
.pv-bar button:hover{background:rgba(255,255,255,.32)}
.pv-bar button.pv-save{background:#2b6cb0}
.pv-bar button.pv-close{background:rgba(229,62,62,.82)}
.pv-stage{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:grab;position:relative}
.pv-stage.grabbing{cursor:grabbing}
#pvImg{max-width:none;max-height:none;transform-origin:center center;transition:transform .12s ease;will-change:transform;user-select:none}
.pv-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.75);font-size:12px;background:rgba(0,0,0,.45);padding:6px 12px;border-radius:6px;pointer-events:none}
.m-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #f0f0f0;font-size:14px;gap:12px}
.m-row .l{color:#718096;flex-shrink:0}
.m-row .v{color:#2d3748;font-weight:600;text-align:right}
.m-row .v.sn{color:#38a169}.m-row .v.sl{color:#d69e2e}.m-row .v.so{color:#e53e3e}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.modal-foot #mfExtra{display:flex;gap:10px}
.m-form{margin-top:6px}
.m-form .field{margin-bottom:12px}

.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:#2d3748;color:#fff;padding:12px 22px;border-radius:8px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:2000;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:min(760px,92vw);white-space:pre-line;line-height:1.55;text-align:left;word-break:break-word}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{background:#38a169}
.toast.bad{background:#e53e3e}

/* ---------- 月度盘点 / 对账 / 经营分析 ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.diff-plus{color:#38a169;font-weight:700}
.diff-minus{color:#e53e3e;font-weight:700}
.ok-text{color:#38a169}
.nowrap{white-space:nowrap}
.real-input{width:100px;padding:5px 8px;border:1px solid #cbd5e0;border-radius:6px;font-size:13px;text-align:right}

/* ---------- 登录与身份（2026-09-09 新增） ---------- */
.who{font-size:12px;padding:5px 11px;border-radius:5px;background:rgba(255,255,255,.16);
     white-space:nowrap;font-weight:600}
.who.admin{color:#9ae6b4}
.lf{margin-bottom:14px}
.lf label{display:block;font-size:12px;color:#4a5568;font-weight:600;margin-bottom:5px}
.lf input,.lf select{width:100%;padding:9px 11px;border:1px solid #cbd5e0;border-radius:6px;
     font-size:13px;outline:none;transition:.15s;font-family:inherit}
.lf input:focus,.lf select:focus{border-color:#2c5282;box-shadow:0 0 0 3px rgba(44,82,130,.12)}
.lf input[readonly]{background:#f7fafc;color:#4a5568}
#userTable table{width:100%}
#userTable select{padding:5px 8px;border:1px solid #cbd5e0;border-radius:5px;font-size:13px}
.real-input:focus{outline:none;border-color:#2b6cb0}
.pill{display:inline-block;padding:3px 9px;border-radius:11px;font-size:12px;font-weight:600;line-height:1.5}
.pill-green{background:#c6f6d5;color:#22543d}
.pill-grey{background:#edf2f7;color:#718096}
.pill-blue{background:#bee3f8;color:#2a4365}
.pill-amber{background:#feebc8;color:#7b341e}
.pill-red{background:#fed7d7;color:#822727}
.form-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.form-row label{width:130px;font-size:13px;color:#4a5568;flex-shrink:0}
.form-row label .req{color:#e53e3e;margin-left:2px}
.form-row input{flex:1;padding:7px 10px;border:1px solid #cbd5e0;border-radius:6px;font-size:14px}
.form-row input:focus{outline:none;border-color:#2b6cb0}
.scan-box{margin-top:16px;padding:14px;background:#f7fafc;border:1px dashed #cbd5e0;border-radius:8px}
.scan-title{font-size:13px;font-weight:700;color:#2d3748;margin-bottom:8px}
.scan-tip{font-size:12px;color:#718096;margin-top:6px}
.scan-box textarea{width:100%;padding:8px;border:1px solid #cbd5e0;border-radius:6px;font-size:13px;font-family:inherit;resize:vertical}
.scan-box textarea:focus{outline:none;border-color:#2b6cb0}
.rep-h3{margin:20px 0 10px;font-size:15px;color:#2d3748;border-left:3px solid #2b6cb0;padding-left:8px}
.rep-h3 .sub{font-weight:400;color:#718096;font-size:12px}
.sub-line{display:flex;align-items:center;gap:8px;font-size:12px;padding:2px 0}
.sl-name{flex:1;color:#2d3748;min-width:110px}
.sl-qty{width:70px;text-align:right;color:#4a5568}
.sl-amt{width:86px;text-align:right;color:#2d3748;font-weight:600}
.sl-bar{width:70px;height:6px;background:#edf2f7;border-radius:3px;overflow:hidden}
.sl-bar i{display:block;height:100%;background:#2b6cb0}
.sl-pct{width:44px;text-align:right;color:#718096}
.mini-bar{display:flex;align-items:center;gap:6px}
.mb-track{width:66px;height:6px;background:#edf2f7;border-radius:3px;overflow:hidden}
.mb-track i{display:block;height:100%;background:#38a169}
.mini-bar span{font-size:12px;color:#4a5568}
.donut-wrap{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.donut-svg{flex-shrink:0}
.donut-legend{flex:1;min-width:240px}
.lg-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px}
.lg-row i{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.lg-nm{flex:1;color:#2d3748}
.lg-vl{color:#718096;font-size:12px}

/* ---------------- 模块权限矩阵 ---------------- */
.perm-box{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;margin:10px 0 4px}
.perm-hint{font-size:12px;color:#718096;margin-bottom:10px;line-height:1.6}
.perm-hint b{color:#2c5282}
.perm-row{display:flex;align-items:center;gap:14px;padding:6px 0;border-bottom:1px dashed #edf2f7}
.perm-row:last-child{border-bottom:none}
.perm-name{width:130px;font-weight:600;color:#2d3748;flex-shrink:0}
.perm-opts{display:flex;gap:6px;flex-wrap:wrap}
.perm-opts label{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border:1px solid #cbd5e0;border-radius:16px;cursor:pointer;font-size:13px;background:#fff;transition:.12s;user-select:none}
.perm-opts label:hover{border-color:#2c5282}
.perm-opts input{display:none}
.perm-opts input:checked + span{font-weight:700}
.perm-opts label:has(input[value="none"]:checked){background:#fff5f5;border-color:#fc8181;color:#c53030}
.perm-opts label:has(input[value="view"]:checked){background:#fffff0;border-color:#ecc94b;color:#975a16}
.perm-opts label:has(input[value="edit"]:checked){background:#f0fff4;border-color:#48bb78;color:#276749}

/* 仅查看模块的只读横幅 */
.readonly-banner{background:#fffaf0;border:1px solid #f6e05e;color:#975a16;padding:8px 14px;border-radius:6px;font-size:13px;font-weight:600;margin-bottom:12px}

/* 不可见模块在顶栏隐藏 */
.tab.hidden{display:none !important}
/* 仅查看模块的标签角标 */
.tab .ro-badge{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;color:#975a16;background:#fefcbf;border:1px solid #ecc94b;border-radius:8px;padding:0 6px;vertical-align:middle}

/* 采购员点选面板（不依赖浏览器 datalist，桌面/手持一致） */
.buyer-field{position:relative}
.buyer-pick{display:none;position:absolute;z-index:320;top:100%;left:0;right:0;margin-top:4px;
  background:#fff;border:1px solid #cbd5e0;border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.16);
  max-height:240px;overflow:auto}
.buyer-pick.show{display:block}
.buyer-pick .bp-item{padding:9px 12px;font-size:14px;color:#2d3748;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #f0f4f8}
.buyer-pick .bp-item:last-child{border-bottom:none}
.buyer-pick .bp-item:hover{background:#ebf8ff}
.buyer-pick .bp-item .bp-sub{color:#a0aec0;font-size:12px}
.buyer-pick .bp-empty{padding:10px 12px;color:#a0aec0;font-size:13px;line-height:1.7}