:root{
  --primary:#1f6fb2; --primary-dark:#185a92; --danger:#c0392b; --warn:#d48806;
  --success:#2e7d32; --bg:#f4f6f9; --card:#ffffff; --border:#e3e8ee;
  --text:#2c3e50; --text-light:#7f8c9b;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{font-family:"Microsoft YaHei","PingFang SC",sans-serif;background:var(--bg);color:var(--text);font-size:14px;}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}
.topbar{display:flex;align-items:center;height:52px;padding:0 20px;background:var(--primary);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.12);position:sticky;top:0;z-index:30;}
.topbar .brand{font-size:17px;font-weight:bold;margin-right:28px;white-space:nowrap;}
.topbar a{color:#dcebf7;padding:0 13px;line-height:52px;white-space:nowrap;}
.topbar a:hover{color:#fff;background:rgba(255,255,255,.1);text-decoration:none;}
.topbar a.on{color:#fff;font-weight:bold;background:rgba(255,255,255,.16);}
.topbar .right{margin-left:auto;display:flex;gap:12px;align-items:center;color:#dcebf7;font-size:12px;white-space:nowrap;}
.page{padding:0 16px;max-width:1280px;margin:18px auto;}
.card{background:var(--card);border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);padding:18px;margin-bottom:16px;}
h2{font-size:16px;margin:0 0 14px;}
.card h2{color:var(--primary-dark);border-left:4px solid var(--primary);padding-left:10px;}
h3{font-size:15px;margin:0 0 10px;}
table{width:100%;border-collapse:collapse;}
th,td{border-bottom:1px solid var(--border);padding:7px 8px;text-align:left;vertical-align:middle;}
th{background:#f0f4f8;color:#4a5a6a;font-weight:600;white-space:nowrap;}
tbody tr:hover td{background:#f7fafd;}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
input,select,textarea{font:inherit;padding:6px 8px;border:1px solid #c9d2db;border-radius:4px;background:#fff;color:var(--text);}
input:focus,select:focus,textarea:focus{outline:2px solid #9cc5e8;border-color:var(--primary);}
button,.btn{font:inherit;padding:7px 13px;border:1px solid #c9d2db;border-radius:4px;background:#fff;color:var(--text);cursor:pointer;display:inline-block;}
button:hover,.btn:hover{background:#eef3f8;text-decoration:none;}
button,.btn{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:5px;}
button:hover,.btn:hover{background:var(--primary-dark);}
button.primary{background:var(--primary);border-color:var(--primary);color:#fff;}
button.primary:hover{background:var(--primary-dark);}
button.secondary{background:#eef2f6;color:var(--text);border-color:var(--border);}
button.secondary:hover{background:#e0e8ef;}
button.success{background:var(--success);border-color:var(--success);}
button.success:hover{background:#25672a;}
button.danger{background:var(--danger);border-color:var(--danger);}
button.danger:hover{background:#96281b;}
button.small{padding:4px 10px;font-size:12px;}
button:disabled{opacity:.5;cursor:default;}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.grow{flex:1;}
.muted{color:var(--text-light);}
.warn{color:var(--warn);}
.danger-text{color:var(--danger);}
.ok-text{color:var(--success);}
.tag{display:inline-block;padding:1px 7px;border-radius:9px;background:#e8f0f8;color:var(--primary-dark);font-size:12px;}
.tag.usd{background:#e6f4ea;color:var(--success);}
.tag.red{background:#fbe9e7;color:var(--danger);}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 14px;}
.form-grid label{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--text-light);}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px;}
.stat{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:10px 13px;}
.stat .k{color:var(--text-light);font-size:13px;}
.stat .v{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px;}
.pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:10px;}
.modal-mask{position:fixed;inset:0;background:rgba(20,30,40,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:16px;}
.modal-mask.show{display:flex;}
.modal{background:#fff;border-radius:7px;padding:16px;width:640px;max-width:100%;max-height:90vh;overflow:auto;}
.modal.wide{width:900px;}
#toast{position:fixed;left:50%;top:56px;transform:translateX(-50%);padding:9px 18px;border-radius:5px;color:#fff;background:#2c3e50;z-index:100;display:none;max-width:80%;}
#toast.err{background:var(--danger);}
#toast.good{background:var(--success);}
.center-box{max-width:380px;margin:9vh auto;}
.center-box label{display:block;margin-bottom:10px;}
.center-box input{width:100%;margin-top:3px;}

/* 开单页：布局和美金系统一致，同事换系统不用重新学 */
.card h2 .muted{font-size:12px;font-weight:400;}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.tool-group{display:inline-flex;align-items:center;gap:4px;font-size:13px;}
.form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px;}
.form-item{display:flex;flex-direction:column;gap:4px;}
.form-item label{font-size:12px;color:var(--text-light);}
.order-head{background:#f2f7fc;padding:12px;border-radius:6px;}
.bill-tab{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:16px;cursor:pointer;font-size:13px;background:#eef2f7;}
.bill-tab.on{background:#185FA5;color:#fff;font-weight:bold;}
.bill-tab b{opacity:.6;font-weight:normal;}
.type-switch{display:inline-flex;}
.type-switch button{padding:6px 16px;border-radius:0;}
.type-switch button:first-child{border-radius:4px 0 0 4px;}
.type-switch button:last-child{border-radius:0 4px 4px 0;margin-left:-1px;}
.type-switch button.on{background:var(--primary);border-color:var(--primary);color:#fff;}
.table-wrap{overflow-x:auto;}
#grid{table-layout:fixed;}
#grid th{padding:4px;}
#grid td{padding:1px 3px;}
#grid input,#grid select{padding:2px 4px;font-size:13px;height:26px;}
#grid td input{width:100%;min-width:0;}
#grid input.num{text-align:right;}
#grid input[readonly]{background:#f4f6f8;color:#555;}
#grid .qty-cell{white-space:nowrap;display:flex;gap:2px;}
#grid .f-unit{width:44px;flex:none;padding:1px;}
#grid .by-piece{background:#fff8e1;}
#grid .f-amount{font-weight:bold;}
#grid .f-qty,#grid .f-amount{font-size:12.5px;}
#grid .f-es{font-size:11px;color:#7a8a99;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#grid .del{color:var(--danger);}
.quick-bar{display:flex;gap:10px;align-items:center;margin:10px 0 0;padding:10px 14px;position:sticky;bottom:8px;z-index:30;box-shadow:0 -2px 12px rgba(0,0,0,.10);border-left:4px solid var(--primary);}
.quick-bar label{font-size:14px;font-weight:bold;white-space:nowrap;}
.quick-bar input{flex:1;font-size:15px;padding:9px;min-width:0;}
.quick-bar .muted{white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis;}
.total-bar{background:#eef5fb;border:1px solid #cfe2f3;border-radius:6px;padding:10px 14px;margin:12px 0;}
.total-bar b{color:var(--primary-dark);}
.pay-row input{width:120px;text-align:right;}
.pay-row #remark{text-align:left;}
.pay-total{min-width:130px;text-align:right;}
.pay-total b{font-size:20px;font-variant-numeric:tabular-nums;line-height:32px;}
.keep-row{display:inline-flex;align-items:center;gap:5px;margin-bottom:10px;}
.suggest{position:fixed;display:none;z-index:40;max-height:300px;overflow:auto;background:#fff;border:1px solid #cfd8e3;border-radius:6px;box-shadow:0 -4px 14px rgba(0,0,0,.15);}
.suggest div{padding:7px 10px;cursor:pointer;border-bottom:1px solid #eef1f4;}
.suggest div span{float:right;}
.suggest div:hover,.suggest div.on{background:#e3f2fd;}
.search-results{max-height:400px;overflow:auto;margin-top:10px;}
.search-results th{position:sticky;top:0;z-index:1;}
.cust-box{position:relative;}
.cust-list{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--border);box-shadow:0 3px 9px rgba(0,0,0,.14);z-index:40;max-height:240px;overflow:auto;display:none;}
.cust-list div{padding:7px 9px;cursor:pointer;display:flex;justify-content:space-between;}
.cust-list div:hover,.cust-list div.on{background:#eaf2fa;}
.pick-row{cursor:pointer;}
.pick-row:hover td,.pick-row.on td{background:#e3f2fd;}
.ask-mask{z-index:90;}
.update-bar{background:#fff3cd;border-bottom:1px solid #ffe08a;color:#8a6d1a;padding:7px 18px;font-size:13px;}
.update-notes{white-space:pre-line;background:#f6f9fc;border-radius:6px;padding:10px 12px;margin:8px 0;max-height:240px;overflow:auto;}
.ask-text{white-space:pre-line;margin:0 0 8px;}
.ask-input{width:100%;}

@media (max-width:980px){
  .topbar{overflow-x:auto;white-space:nowrap;}
}
@media print{
  .topbar,.no-print{display:none!important;}
  body{background:#fff;}
  .page{padding:0;max-width:none;}
  .card,.stat{border:none;padding:0;}
}