:root{
  --bg:#f4f5f7; --panel:#fff; --ink:#1d2330; --muted:#6b7385; --line:#e3e6ec; --side:#1f2a3a; --side-ink:#c9d1de;
  --accent:#1a6fd6; --accent-soft:#e8f1fd; --red:#c8372d; --red-soft:#fdecea; --amber:#b86e00; --amber-soft:#fff4e0;
  --green:#1f8a4c; --green-soft:#e6f5ec; --grey-soft:#eef0f3; --purple:#6b45b8; --purple-soft:#f1ecfb;
  --font: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font:13px/1.45 var(--font);color:var(--ink);background:var(--bg)}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.side{position:fixed;inset:0 auto 0 0;width:196px;background:var(--side);color:var(--side-ink);overflow-y:auto;z-index:20}
.brand{display:flex;gap:10px;align-items:center;padding:16px 14px;border-bottom:1px solid #2c3a4f}
.brand b{display:block;color:#fff;letter-spacing:.04em} .brand small{color:#8fa0b8;font-size:11px}
.logo{width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700}
.side nav{padding:6px 0 30px}
.side .grp{padding:12px 16px 4px;color:#7f8ea6;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.side a{display:block;padding:6px 16px 6px 22px;color:var(--side-ink)} .side a:hover{background:#28364a;text-decoration:none;color:#fff}
.side a.on{background:var(--accent);color:#fff}
.top{position:fixed;left:196px;right:0;top:0;height:48px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 16px;z-index:10}
.top .scan{flex:1} .top .scan input{width:min(320px,100%);padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.who{display:flex;gap:12px;align-items:center;color:var(--muted)}
.pill{border:1px solid var(--line);border-radius:99px;padding:2px 10px}
.burger{display:none;border:0;background:none;font-size:20px}
.main{margin:48px 0 0 196px;padding:18px 20px 60px} .bare{padding:0}
h1{font-size:19px;margin:2px 0 4px} h2{font-size:15px;margin:22px 0 8px}
.sub{color:var(--muted);margin:0 0 14px}
.flash{padding:8px 12px;border-radius:6px;margin-bottom:10px;background:var(--green-soft);color:var(--green)}
.flash.error{background:var(--red-soft);color:var(--red)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:10px 0 16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.card .k{color:var(--muted);font-size:12px} .card .v{font-size:22px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.card .v small{font-size:12px;color:var(--muted);font-weight:400}
.card.red .v{color:var(--red)} .card.amber .v{color:var(--amber)} .card.green .v{color:var(--green)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:14px}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 10px}
.bar input,.bar select,input.in,select.in,textarea.in{padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;font:inherit}
.btn{display:inline-block;padding:5px 12px;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;font:inherit}
.btn:hover{text-decoration:none;filter:brightness(1.05)} .btn.ghost{background:#fff;color:var(--accent)} .btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.sm{padding:2px 8px;font-size:12px}
.tbl-wrap{overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px;max-height:calc(100vh - 230px)}
table{border-collapse:collapse;width:100%}
th,td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;vertical-align:top}
th{position:sticky;top:0;background:#f8f9fb;font-weight:600;color:#444c5c;z-index:1;cursor:pointer;user-select:none}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
tr:hover td{background:#fafbfd}
td.wrap{white-space:normal;min-width:160px}
.tag{display:inline-block;padding:1px 7px;border-radius:99px;font-size:11px;background:var(--grey-soft);color:#555}
.tag.stockout,.tag.loss,.tag.below_cost,.tag.expired{background:var(--red-soft);color:var(--red)}
.tag.reorder,.tag.low,.tag.expiry,.tag.stockout_soon{background:var(--amber-soft);color:var(--amber)}
.tag.ok,.tag.received{background:var(--green-soft);color:var(--green)}
.tag.overstock,.tag.dead,.tag.stop,.tag.reduce{background:var(--purple-soft);color:var(--purple)}
.tag.shipped,.tag.ordered,.tag.arrived{background:var(--accent-soft);color:var(--accent)}
.tag.est{background:#fff3cd;color:#8a6200} .tag.erp{background:var(--grey-soft)} .tag.manual,.tag.web{background:var(--green-soft);color:var(--green)}
.abc{font-weight:700} .abc.A{color:var(--red)} .abc.B{color:var(--amber)} .abc.C{color:var(--muted)}
.muted{color:var(--muted)} .red{color:var(--red)} .green{color:var(--green)} .amber{color:var(--amber)}
input.qty{width:74px;text-align:right;padding:3px 6px;border:1px solid var(--line);border-radius:4px}
input.qty.changed{background:#fff8d6;border-color:#e0b400}
.meter{height:8px;background:var(--grey-soft);border-radius:99px;overflow:hidden;min-width:110px}
.meter i{display:block;height:100%;background:var(--accent)} .meter i.full{background:var(--green)} .meter i.over{background:var(--red)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0} dl.kv dt{color:var(--muted)} dl.kv dd{margin:0}
.note{background:var(--accent-soft);border-left:3px solid var(--accent);padding:8px 12px;border-radius:4px;margin:8px 0 12px;color:#284a75}
.chart svg{width:100%;height:auto;display:block}
.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#1f2a3a,#2f4a6d)}
.login form{background:#fff;padding:28px;border-radius:12px;width:min(360px,92vw);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.login label{display:block;margin:12px 0 4px;color:var(--muted)} .login input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px}
.login .btn{width:100%;margin-top:18px;padding:8px}
.week{display:grid;grid-template-columns:120px 1fr 90px;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);align-items:center}
.week .barv{height:14px;background:var(--accent);border-radius:3px;min-width:2px}
@media (max-width: 900px){
  .side{transform:translateX(-100%);transition:.2s} body.menu .side{transform:none}
  .top{left:0} .main{margin-left:0;padding:14px 12px 60px} .burger{display:block}
  .grid2,.grid3{grid-template-columns:1fr} .who span{display:none}
}
@media print{ .side,.top,.bar,.btn{display:none!important} .main{margin:0} .tbl-wrap{max-height:none;border:0} }

/* phase 2 */
.steps{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 12px;padding:0;list-style:none}
.steps li{padding:4px 12px;border-radius:99px;background:var(--grey-soft);color:var(--muted);font-size:12px}
.steps li.done{background:var(--green-soft);color:var(--green)} .steps li.now{background:var(--accent);color:#fff}
.tag.pending,.tag.unpaid,.tag.requested{background:var(--amber-soft);color:var(--amber)}
.tag.confirmed,.tag.picking,.tag.picked{background:var(--accent-soft);color:var(--accent)}
.tag.approved,.tag.invoiced,.tag.paid{background:var(--green-soft);color:var(--green)}
.tag.cancelled,.tag.rejected,.tag.overdue{background:var(--red-soft);color:var(--red)}
.tag.free{background:var(--green-soft);color:var(--green)}
.warn{padding:8px 12px;border-radius:6px;background:var(--amber-soft);color:var(--amber);margin:8px 0}
.warn.red{background:var(--red-soft);color:var(--red)}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.actions form{display:inline}
input.num{width:80px;text-align:right}
td.alloc{font-size:11px;color:var(--muted)}
tr.short td{background:#fff8f7} tr.free td{background:#f4fbf6}
textarea.in{width:100%}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 14px}
.form-grid label{display:flex;flex-direction:column;gap:3px;color:var(--muted);font-size:12px}
.form-grid label.wide{grid-column:1/-1}
img.thumb{width:44px;height:44px;object-fit:contain;border-radius:4px;background:#fff}

.tag.slow{background:var(--amber-soft);color:var(--amber)} .tag.promote{background:var(--red-soft);color:var(--red)}
/* barcode scanning (2026-10-26) */
.scan-panel{border:2px solid var(--line)}
.scan-panel.scan-flash{border-color:#c8372d;background:#fdecea}
.scan-msg{font-size:18px;margin:6px 0;min-height:24px}
.scan-msg.ok{color:#1f8a4c}.scan-msg.bad{color:#c8372d;font-weight:bold}
.scan-log{margin:4px 0 0 18px;padding:0;font-size:13px;max-height:160px;overflow:auto}
.scan-log li{margin:2px 0}
tr.scan-ok td{background:#e6f5ec}
tr.scan-part td{background:#fff8d6}
tr.scan-over td{background:#fdecea}
/* PDA handheld pages (2026-10-26) */
body.pda{background:var(--bg,#f5f6f8);font-size:17px;margin:0}
.pda-top{position:sticky;top:0;z-index:5;display:flex;gap:10px;align-items:center;padding:8px 12px;background:#1F4E8C;color:#fff}
.pda-top a{color:#fff;font-weight:bold;text-decoration:none}
.pda-top .muted{color:#cfdcef;font-size:13px}
.pda-title{flex:1;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pda-main{padding:10px 10px 90px}
.pda-main h2{font-size:18px;margin:16px 0 6px}
.pda-doc{display:flex;gap:6px}.pda-doc input{flex:1;font-size:18px;padding:10px;border:2px solid #1F4E8C;border-radius:6px}
.pda-item{display:block;background:#fff;border:1px solid var(--line,#dde);border-radius:8px;padding:10px 12px;margin:6px 0;color:inherit;text-decoration:none}
.pda-item.done{opacity:.7}
.pda-scan{position:sticky;top:44px;z-index:4;background:#fff;padding:8px;border-radius:8px;margin-bottom:8px}
.pda-scan .scan-code,.pda-scan .scan-qty{width:100%;box-sizing:border-box;font-size:20px;padding:10px;border:2px solid #1F4E8C;border-radius:6px;margin-bottom:6px}
.pda-modes{display:flex;gap:14px;font-size:15px}
.pda-scan .scan-msg{font-size:17px}
.pl{background:#fff;border:1px solid var(--line,#dde);border-left:6px solid #ccc;border-radius:8px;padding:8px 10px;margin:6px 0}
.pl.scan-ok{border-left-color:#1f8a4c;background:#e6f5ec}.pl.scan-part{border-left-color:#e0b400;background:#fff8d6}.pl.scan-over{border-left-color:#c8372d;background:#fdecea}
.pl-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.pl-row input.qty.big{width:80px;font-size:22px;padding:4px 6px}
.pl-row .need{font-size:20px;font-weight:bold}
.pda-submit{display:block;width:100%;font-size:20px;padding:14px;margin-top:12px}
.pl-row input[type=date]{width:150px;font-size:15px}.pl-row input.qty{width:60px}
.pda-lang a{color:#cfdcef;font-weight:normal;margin-left:6px;padding:2px 6px;border:1px solid #4d74a8;border-radius:10px;font-size:13px}
.pda-lang a.on{color:#fff;background:#4d74a8;font-weight:bold}
/* 企禾云-style sales screens (2026-10-26) */
.qh-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line,#dde);margin-bottom:10px}
.qh-tabs a{padding:8px 16px;color:#555;text-decoration:none;border:1px solid transparent;border-bottom:0;border-radius:4px 4px 0 0}
.qh-tabs a.on{color:#1f78d1;border-color:var(--line,#dde);background:#fff;margin-bottom:-1px}
.qh-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.qh-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border:1px solid #dcdfe6;background:#fff;border-radius:4px;color:#606266;cursor:pointer;font-size:14px;text-decoration:none;line-height:1.3}
.qh-btn.blue{background:#409eff;border-color:#409eff;color:#fff}.qh-btn.red{background:#fef0f0;border-color:#fbc4c4;color:#f56c6c}
.qh-btn.amber{background:#fdf6ec;border-color:#f5dab1;color:#e6a23c}.qh-btn.orange{background:#e6a23c;border-color:#e6a23c;color:#fff}
.qh-btn.sky{background:#a0cfff;border-color:#a0cfff;color:#fff}.qh-btn.grey{background:#909399;border-color:#909399;color:#fff}
.qh-btn.green{background:#67c23a;border-color:#67c23a;color:#fff}
.qh-search{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto;align-items:center}
.qh-search input,.qh-search select{padding:6px 8px;border:1px solid #dcdfe6;border-radius:4px;font-size:13px;width:150px}
.qh-table th{background:#f5f7fa;color:#606266;font-weight:600;text-align:center}
.qh-table td{text-align:center}
.qh-table td.wrap{text-align:left}
.qh-tag{display:inline-block;padding:1px 8px;border-radius:3px;font-size:12px;border:1px solid}
.qh-tag.red{color:#f56c6c;background:#fef0f0;border-color:#fde2e2}.qh-tag.green{color:#67c23a;background:#f0f9eb;border-color:#e1f3d8}
.qh-tag.amber{color:#e6a23c;background:#fdf6ec;border-color:#faecd8}.qh-tag.grey{color:#909399;background:#f4f4f5;border-color:#e9e9eb}
.qh-tag.blue{color:#409eff;background:#ecf5ff;border-color:#d9ecff}
.qh-ops a{margin:0 3px;color:#409eff;text-decoration:none;white-space:nowrap}.qh-ops a.red{color:#f56c6c}.qh-ops a.amber{color:#e6a23c}.qh-ops a.green{color:#67c23a}
.qh-pager{display:flex;gap:6px;align-items:center;margin:10px 0;font-size:13px;color:#606266}
.qh-pager a{min-width:26px;text-align:center;padding:3px 6px;background:#f4f4f5;border-radius:3px;color:#606266;text-decoration:none}
.qh-pager a.on{background:#409eff;color:#fff}
.qh-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line,#dde);padding-bottom:10px;margin-bottom:12px}
.qh-head h1{margin:0;font-size:20px}
.qh-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px 24px;margin-bottom:12px}
.qh-form label{display:flex;align-items:center;gap:8px;font-size:14px;color:#606266}
.qh-form label>span{min-width:72px;text-align:right}
.qh-form input,.qh-form select,.qh-form textarea{flex:1;padding:6px 8px;border:1px solid #dcdfe6;border-radius:4px;font-size:14px}
.qh-form input[readonly]{background:#f5f7fa}
.qh-req::before{content:"* ";color:#f56c6c}
.qh-grid{max-height:none}
.qh-grid td input{width:64px;padding:3px 4px;border:1px solid #dcdfe6;border-radius:3px;text-align:right}
.qh-grid td input.note{width:110px;text-align:left}
.qh-grid td select{padding:3px;border:1px solid #dcdfe6;border-radius:3px}
.qh-grid tr.free td{background:#f0f9eb}
.qh-grid tr.short td.qtycell{background:#fdecea}
.qh-grid img{width:34px;height:34px;object-fit:contain}
.qh-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:flex;align-items:center;justify-content:center}
.qh-modal[hidden]{display:none}
.qh-dialog{background:#fff;width:min(1300px,94vw);max-height:90vh;border-radius:4px;display:flex;flex-direction:column}
.qh-dialog.small{width:min(560px,94vw)}
.qh-dialog header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:17px;font-weight:600}
.qh-dialog .body{padding:0 16px 12px;overflow:auto;display:flex;gap:12px}
.qh-dialog footer{padding:10px 16px;text-align:right;border-top:1px solid #eee}
.qh-cats{min-width:160px;border-right:1px solid #eee;padding-right:8px}
.qh-cats a{display:block;padding:7px 10px;color:#606266;text-decoration:none;border-radius:3px;cursor:pointer}
.qh-cats a.on{background:#ecf5ff;color:#409eff}
.qh-switch{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;color:#606266}
.qh-sum td{font-weight:bold;background:#fafafa}
.bar[hidden],.panel[hidden]{display:none!important}
.qh-ops{white-space:normal!important;min-width:130px;max-width:190px}.qh-table td.wrap{white-space:normal;min-width:120px}
.qh-table tr.qh-orange td{background:#ffe7b3}.qh-table tr.qh-red td{background:#ffd6d3}
.form-grid [hidden],label[hidden]{display:none!important}
.qh-dl{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:#606266;border:1px solid #e4e7ed;border-radius:4px;padding:2px 2px 2px 8px}.qh-dl .qh-btn{padding:4px 10px}
a.card{text-decoration:none;color:inherit}a.card.on{outline:2px solid #409eff}table.mini td{padding:3px 6px}
td .barv{height:10px;background:#409eff;border-radius:3px;min-width:1px}
.seg{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0}
.seg-k{min-width:120px;color:#909399;font-size:13px}
.seg-b{padding:4px 12px;border:1px solid #dcdfe6;border-radius:14px;color:#606266;text-decoration:none;font-size:13px;background:#fff}
.seg-b b{color:#303133;margin-left:2px}
.seg-b:hover{border-color:#409eff;color:#409eff}
.seg-b.on{background:#409eff;border-color:#409eff;color:#fff}.seg-b.on b{color:#fff}
.seg-b.green{border-color:#c2e7b0}.seg-b.amber{border-color:#f5dab1}.seg-b.red{border-color:#fbc4c4}.seg-b.blue{border-color:#b3d8ff}