:root{
  --bg:#0f1419; --panel:#182029; --panel2:#1f2935; --line:#2b3745;
  --fg:#e8eef5; --muted:#93a3b4; --accent:#e0a458; --accent2:#4ea1d3;
  --ok:#5ec08b; --danger:#d97070;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:15px/1.55 -apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
h1,h2{margin:0}
.muted{color:var(--muted);font-weight:400;font-size:12.5px}
button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--line);
  background:var(--panel2);color:var(--fg);padding:9px 14px}
button.primary{background:linear-gradient(180deg,#e8b168,#d2924a);border-color:#c98a44;color:#20160a;font-weight:600}
button.ghost:hover{background:#26323f}
button.danger{color:var(--danger);border-color:#5a3636}
select,input{font:inherit;background:var(--panel2);color:var(--fg);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;width:100%}
select:focus,input:focus{outline:2px solid #3b5168}

/* ---------- header ---------- */
.top{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;
  padding:16px 20px;background:linear-gradient(180deg,#1b242e,#141b22);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;font-weight:700;
  background:linear-gradient(145deg,#e8b168,#b9793a);color:#20160a;letter-spacing:1px}
.top h1{font-size:17px;letter-spacing:.5px}
.top .sub{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:5px;min-width:150px}
.field>span{font-size:12px;color:var(--muted)}
.readout b{font-size:15px;color:var(--accent)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:6px;padding:12px 20px 0;flex-wrap:wrap}
.tab{background:transparent;border:1px solid transparent;border-bottom:2px solid transparent;color:var(--muted)}
.tab.active{color:var(--fg);border-bottom-color:var(--accent);background:var(--panel)}
main{padding:16px 20px 60px;max-width:1280px;margin:0 auto}
.tabpane{display:none}
.tabpane.active{display:block}

/* ---------- cards ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.card h2{font-size:15px;margin-bottom:12px;color:#f3f6fa}
.grid{display:grid;gap:16px;grid-template-columns:minmax(300px,420px) 1fr}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:10px}
.row>*{flex:1 1 150px}
.row>button{flex:0 0 auto;align-self:flex-end}

/* ---------- tables ---------- */
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{background:#1c2530;color:#c6d2df;font-weight:600;position:sticky;top:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:#1d2732}
table.pt{min-width:0}
table.pt caption{caption-side:top;text-align:left;padding:9px 10px;font-weight:600;
  background:#1c2530;color:#e9eff6;border-bottom:1px solid var(--line);font-size:13.5px}
table.pt th{position:static}

.preview{margin-top:10px;background:var(--panel2);border:1px dashed #3a4a5c;border-radius:10px;
  padding:12px;font-size:13.5px;display:none}
.preview.on{display:block}
.preview .big{font-size:22px;color:var(--accent);font-weight:700}
.preview code{color:#cfe3f5;background:#131a21;padding:1px 5px;border-radius:5px}

.totals{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0 10px}
.totals>div{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 14px;min-width:130px}
.totals span{display:block;font-size:12px;color:var(--muted)}
.totals b{font-size:17px}
.totals .grand b{color:var(--ok)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.note{color:var(--muted);font-size:12.5px;margin:10px 0 0}
.rules{margin:0;padding-left:20px}
.rules li{margin-bottom:8px}
.rules i{color:#cfe3f5;font-style:normal}
footer{padding:0 20px 30px;color:var(--muted);font-size:12px;max-width:1280px;margin:0 auto}
.sectiontitle{margin:18px 0 8px;font-size:14px;color:#cbd7e3;letter-spacing:.5px}
.printonly{display:none}

/* ---------- 参数设置 ---------- */
.card.hl{border-color:#7a5a2e;box-shadow:0 0 0 1px #7a5a2e44}
.card.adv{padding-top:12px}
.card.adv>summary{cursor:pointer;user-select:none}
.card.adv>summary::marker{color:var(--accent)}
.card.adv[open]{padding-bottom:16px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 12px}
.chips[hidden]{display:none}
.chips-t{font-size:12px;color:var(--muted);align-self:center}
.chip{border-radius:20px;padding:5px 12px;font-size:12.5px;background:var(--panel2)}
.chip b{color:var(--accent);margin-left:4px}
.chip:hover{background:#26323f}
.cellin{width:74px;padding:4px 6px;font-size:13px;text-align:right;background:transparent;
  border:1px solid transparent;border-radius:6px;color:var(--fg)}
.cellin:hover,.cellin:focus{border-color:var(--line);background:var(--panel2)}
input[data-ov]{color:var(--accent);font-weight:600}
.totals input{width:80px;padding:5px 8px}
#discNote{color:var(--accent2)}
.searchlist{position:absolute;z-index:60;top:100%;left:0;right:0;margin-top:4px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.45);
  max-height:320px;overflow:auto;min-width:280px}
#psearch{position:relative}
label.field{position:relative}
.sr{display:flex;justify-content:space-between;gap:12px;width:100%;border:none;border-radius:0;
  background:transparent;padding:8px 12px;text-align:left;align-items:center}
.sr:hover{background:var(--panel2)}
.sr b{color:var(--accent);font-variant-numeric:tabular-nums}
.sr span{font-size:13px}

.setbar{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.setbar p{margin:6px 0 0;max-width:760px;font-size:12.5px}
.setactions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.grid2 .wide{grid-column:1/-1}
textarea{font:inherit;background:var(--panel2);color:var(--fg);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;width:100%;resize:vertical}
h3.sub{font-size:12.5px;color:var(--muted);font-weight:600;margin:16px 0 8px}
table.vars{min-width:0;font-size:13px}
table.vars input{width:110px;padding:5px 8px}
.cust{margin-bottom:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel2)}
.cust summary{cursor:pointer;color:var(--muted);font-size:13px}
.cust[open] summary{margin-bottom:10px}
button:disabled{opacity:.45;cursor:not-allowed}

/* ---------- 报价单弹窗 ---------- */
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:100;background:rgba(8,11,15,.86);display:flex;flex-direction:column}
.modal[hidden]{display:none}
.modal-bar{display:flex;gap:10px;align-items:center;padding:12px 18px;background:#141b22;
  border-bottom:1px solid var(--line);color:var(--fg)}
.modal-bar .spacer{flex:1}
.modal-body{flex:1;overflow:auto;padding:22px;display:flex;justify-content:center;align-items:flex-start}

/* ---------- A4 报价单 ---------- */
.docpage{
  width:210mm;min-height:297mm;box-sizing:border-box;padding:13mm 15mm 12mm;
  background:#fff;color:#20262e;flex:0 0 auto;
  font:10.5pt/1.62 "Noto Sans CJK SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  box-shadow:0 12px 44px rgba(0,0,0,.5);position:relative;
}
.docpage.capturing{box-shadow:none}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8mm}
.doc-brand{display:flex;gap:4mm;align-items:center}
.doc-mark{width:15mm;height:15mm;border-radius:2.2mm;display:grid;place-items:center;
  background:linear-gradient(145deg,#dca860,#a9702f);color:#231708;font-weight:700;font-size:11.5pt;letter-spacing:1px}
.doc-name h1{margin:0;font-size:16.5pt;letter-spacing:.6px;color:#16202b;
  font-family:"Noto Serif CJK SC","Songti SC",serif}
.doc-name p{margin:1.2mm 0 0;font-size:8.4pt;color:#6b7784;letter-spacing:.5px}
.doc-title{text-align:right;line-height:1.15}
.doc-title .en{font-size:7.6pt;letter-spacing:3.2px;color:#a9702f}
.doc-title .zh{font-size:19pt;font-weight:700;letter-spacing:5px;color:#16202b;
  font-family:"Noto Serif CJK SC","Songti SC",serif;margin-top:1mm}
.doc-rule{height:1.1mm;margin:3.4mm 0 2.2mm;
  background:linear-gradient(90deg,#a9702f 0 26%,#dca860 26% 38%,#e7e2d8 38% 100%)}
.doc-infobar{display:flex;flex-wrap:wrap;gap:2mm 7mm;font-size:8.2pt;color:#6b7784;padding-bottom:2.4mm}
.doc-meta{width:100%;border-collapse:collapse;font-size:9pt;margin:0 0 4mm}
.doc-meta th,.doc-meta td{border:.25mm solid #dde2e8;padding:1.8mm 2.6mm;white-space:normal}
.doc-meta th{background:#f4f6f8;color:#3d4a57;font-weight:600;width:16%;text-align:left}
.doc-meta td{color:#1f2733}
.doc-meta td.mono{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.2px}
.doc-intro{background:#faf8f4;border-left:1mm solid #dca860;padding:2.6mm 3.4mm;margin:0 0 4mm}
.doc-intro h3{margin:0 0 1.2mm;font-size:9pt;color:#a9702f;letter-spacing:1px}
.doc-intro p{margin:0;font-size:8.6pt;line-height:1.75;color:#48535e;text-align:justify}
.doc-sec{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 2mm}
.doc-sec h3{margin:0;font-size:10.5pt;color:#16202b;letter-spacing:1px;
  border-left:1mm solid #a9702f;padding-left:2.4mm}
.doc-sec .pricebase{font-size:7.8pt;color:#6b7784}
.doc-table{width:100%;border-collapse:collapse;font-size:8.8pt;min-width:0}
.doc-table th{background:#1f2b3a;color:#fff;font-weight:600;padding:2mm 1.8mm;text-align:left;
  border:.2mm solid #1f2b3a;position:static;white-space:normal}
.doc-table td{border-bottom:.2mm solid #e3e7ec;padding:1.9mm 1.8mm;color:#242c36;vertical-align:top}
.doc-table tbody tr:nth-child(even){background:#f7f8fa}
.doc-table .c{text-align:center}
.doc-table .r{text-align:right;font-variant-numeric:tabular-nums}
.doc-table .sm{font-size:7.4pt;color:#7c8794;margin-top:.4mm}
.doc-sum{margin:3mm 0 0;padding-top:2mm;border-top:.35mm solid #d7dce2;
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2mm 8mm;font-size:9pt}
.doc-sum .sum-line span{color:#6b7784;margin-right:2.4mm}
.doc-sum .grand b{font-size:12.5pt;color:#a9702f}
.doc-sum .sum-cn{width:100%;text-align:right;font-size:9pt;color:#3d4a57;letter-spacing:.5px}
.doc-terms{margin:4.5mm 0 0}
.doc-terms h3{margin:0 0 1.6mm;font-size:9.2pt;color:#16202b;letter-spacing:1px}
.doc-terms ol{margin:0;padding-left:5.2mm;font-size:8.2pt;color:#525d68;line-height:1.7}
.doc-sign{display:flex;gap:8mm;margin:7mm 0 0}
.doc-sign .sign-box{flex:1;font-size:8.6pt;color:#3d4a57}
.doc-sign .sign-box>span{display:block;margin-bottom:9mm}
.doc-sign .sign-line{border-bottom:.3mm solid #9aa4ae;margin-bottom:1.6mm}
.doc-sign em{font-style:normal;font-size:8.2pt;color:#6b7784;display:block;min-height:4mm}
.doc-sign .sign-date{font-size:8pt;color:#7c8794;margin-top:2mm}
.doc-foot{position:absolute;left:15mm;right:15mm;bottom:7mm;display:flex;justify-content:space-between;
  gap:4mm;font-size:7.4pt;color:#98a2ac;border-top:.2mm dotted #c9d0d8;padding-top:1.6mm}
#printRoot{display:none}

/* ---------- print ---------- */
@media print{
  @page{size:A4;margin:0}
  body{background:#fff;color:#000}
  body>*{display:none !important}
  #printRoot{display:block !important}
  #printRoot .docpage{box-shadow:none;margin:0;min-height:auto;page-break-after:auto}
  #printRoot .doc-table tr,#printRoot .doc-sign,#printRoot .doc-sum{page-break-inside:avoid}
}
/* ---------- 顶部铜价条 ---------- */
.cubar-wrap{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;padding:10px 20px;
  background:linear-gradient(180deg,#101820,#0d141a);border-bottom:1px solid var(--line)}
.cu-title{font-size:12px;letter-spacing:2px;color:var(--accent);white-space:nowrap;padding-top:8px}
.cubar{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:8px;flex:1;min-width:0}
.cu-skel{font-size:12.5px;color:var(--muted)}
.cuchip{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n b" "q e";
  align-items:center;gap:1px 8px;padding:6px 12px;border-radius:9px;min-width:0;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);white-space:nowrap;text-align:left}
.cuchip:hover{background:#26323f;border-color:#4a5b6e}
.cuchip.active{border-color:var(--accent);background:#2a2114;box-shadow:0 0 0 1px var(--accent) inset}
.cuchip.off{opacity:.55;cursor:not-allowed}
.cu-n{grid-area:n;font-size:12.5px;color:#cdd8e3;overflow:hidden;text-overflow:ellipsis}
.cu-q{grid-area:q;font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.cuchip b{grid-area:b;font-size:15px;color:var(--accent);font-variant-numeric:tabular-nums;text-align:right}
.cuchip em{grid-area:e;font-size:10px;color:var(--muted);font-style:normal;text-align:right;max-width:104px;overflow:hidden;text-overflow:ellipsis}
.cu-side{display:flex;align-items:center;gap:10px;margin-left:auto;padding-top:4px}
.cu-up{font-size:11.5px;color:var(--muted)}
.cu-refresh{padding:5px 10px;font-size:12px}
.cu-refresh.spin{opacity:.5}
.cu-toast{position:fixed;left:50%;transform:translate(-50%,20px);bottom:28px;z-index:200;
  background:#1f2b3a;border:1px solid var(--accent);color:#f0f4f8;padding:10px 16px;border-radius:10px;
  font-size:13px;opacity:0;pointer-events:none;transition:.2s}
.cu-toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:640px){.cubar-wrap{padding:8px 12px;gap:8px}.cu-up{display:none}}
.cu-up.stale{color:#e0a458}
.cu-stale{color:#e07a5f;font-weight:600}
.cuchip.ref{border-style:dashed;opacity:.85}
.cuchip.ref b{color:#9fc2dd}
.sr{display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.sr span{flex:1;overflow:hidden;text-overflow:ellipsis}
.sr b{font-size:12.5px;color:var(--muted);background:#1c242e;border:1px solid var(--line);border-radius:6px;padding:2px 8px;cursor:pointer}
.sr b:hover{border-color:var(--accent);color:var(--accent)}
.sr b.cur{color:var(--accent);border-color:var(--accent)}
.othereat{display:block;width:100%;margin-top:8px;padding:8px 12px;text-align:left;cursor:pointer;
  background:#182029;border:1px dashed #4a5b6e;border-radius:8px;color:#c8d4e0;font-size:12.5px}
.othereat:hover{border-color:var(--accent);color:var(--accent)}
.othereat b{color:var(--accent)}

/* ================= 产品列表（平铺 + 逐行加入） ================= */
.pickarea{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.pick{background:var(--panel2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pick header{display:flex;align-items:baseline;gap:10px;padding:10px 12px;background:#1a2330;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.pick header b{font-size:14px}
.phead,.prow{display:grid;grid-template-columns:1.15fr .75fr 1.05fr 1.45fr;gap:8px;align-items:center;padding:8px 12px}
.phead{font-size:11.5px;color:var(--muted);background:#161d26;border-bottom:1px solid var(--line)}
.prow{border-bottom:1px solid #202b36}
.prow:last-child{border-bottom:0}
.prow:hover{background:#1c2530}
.pm{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pm b{font-size:13.5px}
.pm span{font-size:11.5px;color:var(--muted)}
.pm em{font-size:11px;font-style:normal;color:#9fc2dd;border:1px solid #33506a;border-radius:5px;padding:0 5px}
.pw{font-size:12px;color:#b9c8d6}
.pw small{color:var(--muted);margin-left:2px;font-size:10.5px}
.pp{font-size:15px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.pp small{display:block;font-size:10.5px;color:var(--muted);font-weight:400;margin-top:1px}
.pa{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.qin{width:62px;padding:7px 8px;border-radius:8px;border:1px solid var(--line);background:#0f151c;
  color:#e8eef5;font-size:14px;text-align:center}
.add{padding:8px 12px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);
  color:#1b1408;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.add:hover{filter:brightness(1.08)}

/* ================= 移动端适配 ================= */
@media(max-width:760px){
  body{font-size:14px}
  header .bar{gap:8px;padding:8px 12px}
  .bar .field{flex:1 1 46%}
  .bar input,.bar select{width:100%}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;padding:10px 16px;font-size:14px}
  main{padding:10px 12px 28px}
  .row{flex-direction:column;gap:8px}
  .row .field,.row button{width:100%}
  input,select{font-size:16px}           /* 防 iOS 聚焦自动放大 */
  .card{padding:12px}
  .card h2{font-size:15px}
  /* 产品行：两栏折叠 */
  .phead{display:none}
  .prow{grid-template-columns:1fr auto;grid-template-areas:"m p" "w a";row-gap:4px;padding:10px 12px}
  .pm{grid-area:m}.pp{grid-area:p;text-align:right}.pw{grid-area:w}.pa{grid-area:a}
  .pa{width:100%;justify-content:flex-end}
  .qin{width:56px}
  .add{padding:9px 14px}
  /* 报价单表格横向滚动，不压缩 */
  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #cart{min-width:680px}
  .totals{grid-template-columns:1fr 1fr}
  .actions{flex-direction:column}
  .actions button{width:100%}
  .pickarea{gap:10px}
}
@media print{ .pickarea{display:none} }

/* 移动端：行情条改为单行横向滑动，别把报价区顶到屏幕外 */
@media(max-width:760px){
  .cubar-wrap{flex-wrap:nowrap;align-items:center;padding:8px 12px;gap:8px}
  .cu-title{display:none}
  .cubar{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .cubar::-webkit-scrollbar{display:none}
  .cuchip{flex:0 0 auto;min-width:146px}
  .cu-side{flex:0 0 auto;font-size:11px}
  .cu-side .cu-up{font-size:10.5px}
}

/* 防止 grid 子项被表格 min-width 撑破视口 */
.grid,.grid>*,.card{min-width:0}
.tablewrap{max-width:100%;overflow-x:auto}

/* 分类卡片（选项少时取代下拉） */
.kcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:10px 0 4px}
.kcard{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:10px 12px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--line);cursor:pointer;text-align:left}
.kcard b{font-size:14px;color:#e8eef5}
.kcard span{font-size:11.5px;color:var(--muted)}
.kcard:hover{border-color:#4a5b6e}
.kcard.on{border-color:var(--accent);background:#2a2114;box-shadow:0 0 0 1px var(--accent) inset}
.kcard.on b{color:var(--accent)}
.hide{display:none}
.mcards{display:flex;gap:6px}
.mcard{padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);
  color:#cdd8e3;font-size:13.5px;font-weight:600;cursor:pointer}
.mcard.on{border-color:var(--accent);background:#2a2114;color:var(--accent)}

/* 规格变体：有销 / 无销 二选一 */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-left:2px}
.seg button{background:transparent;border:0;color:var(--muted);font-size:11.5px;padding:3px 8px;cursor:pointer}
.seg button.on{background:var(--accent);color:#1b1408;font-weight:700}
.pnseg{margin-left:6px}
.pick header em{font-size:11px;font-style:normal;color:#9fc2dd;border:1px solid #33506a;border-radius:5px;padding:1px 6px}

/* 产品/规格新建表单 */
.formbox{margin-top:10px;padding:12px;border:1px dashed #3a4a5c;border-radius:10px;background:#161d26}
.ckbox{display:flex;gap:14px;padding:8px 0}
.ckbox label{display:flex;align-items:center;gap:6px;font-size:13px;color:#cdd8e3}
.customlist{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.crow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;
  background:#161d26;border:1px solid var(--line);border-radius:8px;font-size:13px}