/* ============================================================
   报价工具共享样式（data/quote.css）
   index.html（报价工作台）与 products.html（产品库）共用
   ============================================================ */
  :root{
    --brand:#0d8f8f; --brand-d:#0a6f6f; --brand-l:#e6f5f5; --brand-2:#50c0c0;
    --ink:#16232e; --ink-2:#3b4c5a; --muted:#78899a; --line:#e2e9ef; --line-2:#eef3f7;
    --bg:#f4f7f9; --amber:#c2760a; --amber-bg:#fff6e6; --red:#c0392b;
    --radius:10px; --shadow:0 1px 2px rgba(22,35,46,.05), 0 4px 14px rgba(22,35,46,.05);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
    color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
  }
  button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
  a{color:var(--brand);text-decoration:none}
  a:hover{text-decoration:underline}

  /* ---------- 顶栏 ---------- */
  .topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
  .topbar-in{max-width:1560px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;white-space:nowrap}
  /* 官方 ECOWATER 完整标识（data/img/logo.png，透明底，含 ECOWATER 字标/螺旋/SINCE 1925/怡口净水） */
  .brand .logo{height:32px;width:auto;display:block;flex:0 0 auto;object-fit:contain}
  .brand small{display:block;font-weight:400;font-size:11px;color:var(--muted);letter-spacing:.3px}
  .toolbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:var(--tbh,51px);z-index:40}
  .toolbar-in{max-width:1560px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .spacer{flex:1}
  .search{position:relative}
  .search input{border:1px solid var(--line);border-radius:7px;padding:6px 10px 6px 30px;width:210px;outline:none;background:#fbfdfe}
  .search input:focus{border-color:var(--brand);background:#fff}
  .search::before{content:"⌕";position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px}
  .btn{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 12px;cursor:pointer;color:var(--ink-2);transition:.15s;white-space:nowrap}
  .btn:hover{border-color:var(--brand-2);color:var(--brand);background:var(--brand-l)}
  .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
  .btn.primary:hover{background:var(--brand-d);color:#fff}
  .btn.danger:hover{border-color:#e3b3ae;color:var(--red);background:#fdf1ef}
  /* 置灰：未登录时不可用的控件 */
  .btn:disabled,.btn[disabled]{opacity:.42;cursor:not-allowed;background:#f7f9fa;color:#a9b6c1;border-color:var(--line)}
  .btn:disabled:hover,.btn[disabled]:hover{border-color:var(--line);color:#a9b6c1;background:#f7f9fa}
  .btn.primary:disabled,.btn.primary[disabled]{background:var(--brand);border-color:var(--brand);color:#fff;opacity:.4}
  .seg button:disabled{opacity:.42;cursor:not-allowed}
  .seg button:disabled.on{background:var(--brand-l);color:var(--brand)}
  select:disabled,input:disabled{opacity:.5;cursor:not-allowed}
  .seg{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
  .seg button{border:0;background:#fff;padding:6px 12px;cursor:pointer;color:var(--ink-2);font-size:13px}
  .seg button.on{background:var(--brand-l);color:var(--brand);font-weight:600}
  /* ---------- 布局 ---------- */
  .mobar{display:none}
  .mobar-info{flex:1;min-width:0}
  .mobar-info b{font-size:17px;color:var(--brand);font-variant-numeric:tabular-nums}
  .mobar-info span{display:block;font-size:11.5px;color:var(--muted)}
  .wrap{max-width:1560px;margin:0 auto;padding:16px 20px 60px;display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:18px;align-items:start}
  /* 单列（没有右侧栏时用）：否则 grid 会留一条 372px 的空列，右边空一块 */
  .wrap.one{grid-template-columns:minmax(0,1fr)}
  /* 移动端样式必须限定 screen —— 打印时版面宽度会按纸张算，媒体查询会在打印里生效，
     body{padding-bottom:66px} 之类会把内容顶高，PDF 末尾多出空白页 */
  @media screen and (max-width:1080px){
    .wrap{grid-template-columns:1fr}
    /* 窄屏不再吸顶，面板按内容高度自然展开，清单区不内部滚动。
       这段媒体查询在样式表里排在 .summary 基础规则之前，同等特异度下基础规则会赢，
       所以覆盖项必须带 !important。 */
    .summary{position:static !important;top:auto;max-height:none !important;display:block !important}
    .summary .sum-body{max-height:none !important;overflow:visible !important;min-height:0 !important;flex:none !important}
    .mobar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);
      padding:9px 16px calc(9px + env(safe-area-inset-bottom));align-items:center;gap:12px;box-shadow:0 -2px 12px rgba(22,35,46,.09)}
    body{padding-bottom:66px}
  }
  @media screen and (max-width:720px){
    .topbar-in{padding:10px 14px;gap:10px}
    .toolbar-in{padding:8px 14px;gap:8px}
    .tabs{flex:1 1 100%}
    .search{flex:1 1 130px}
    .search input{width:100%}
    .field input,.field select{min-width:0;flex:1}
    .field{flex:1 1 44%}
    .wrap{padding:12px 14px 40px}
    .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  }
  /* ---------- 报价清单 ----------
     面板是 position:sticky，钉在 top:var(--sticky)。如果面板总高超过视口，
     底部的「预览 / 打印」按钮会被挤出视口 —— 窗口一矮就点不到（sticky 元素
     钉住后不再随页面滚动，按钮永远在屏幕外）。
     做法：面板整体 max-height 锁在视口内，用 flex 让中间的清单区自适应伸缩、
     内部滚动，头尾（含主按钮）永远可见。 */
  .summary{position:sticky;top:var(--sticky,110px);background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto;
    max-height:calc(100vh - var(--sticky,110px) - 14px);display:flex;flex-direction:column}
  .sum-h{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;background:#fbfdfe;flex:0 0 auto}
  .sum-h h3{margin:0;font-size:14px;font-weight:700}
  .sum-h .cnt{background:var(--brand);color:#fff;border-radius:999px;font-size:11px;padding:1px 8px;font-weight:600}
  .sum-body{flex:1 1 auto;min-height:40px;overflow:auto}
  .sum-empty{padding:30px 16px;text-align:center;color:var(--muted);font-size:13px}
  .sum-empty .big{font-size:26px;opacity:.35;display:block;margin-bottom:6px}
  .qitem{padding:10px 14px;border-bottom:1px solid var(--line-2)}
  .qitem .r1{display:flex;align-items:flex-start;gap:8px}
  .qitem .grip{flex:0 0 auto;cursor:grab;color:#a8b8c6;font-size:14px;line-height:1.3;
    padding:1px 3px 1px 0;user-select:none;letter-spacing:-1px}
  .qitem .grip:hover{color:var(--brand)}
  .qitem .grip:active{cursor:grabbing}
  .qitem.dragging{opacity:.45;background:var(--brand-pale)}
  .qitem.drop-before{box-shadow:inset 0 2px 0 var(--brand)}
  .qitem.drop-after{box-shadow:inset 0 -2px 0 var(--brand)}
  .qitem .nm{flex:1;min-width:0;font-weight:600;font-size:13px;line-height:1.35}
  .qitem .nm small{display:block;font-weight:400;color:var(--muted);font-family:ui-monospace,Menlo,monospace;font-size:11px}
  .qitem .rm{border:0;background:none;color:#c3ced8;cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
  .qitem .rm:hover{color:var(--red)}
  .qitem .r2{display:flex;align-items:center;gap:6px;margin-top:7px}
  .qitem input[type=number]{width:78px;border:1px solid var(--line);border-radius:6px;padding:4px 7px;outline:none;text-align:right}
  .qitem input[type=number]:focus{border-color:var(--brand)}
  .qitem input.pp{flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;padding:4px 7px;outline:none;text-align:right}
  .qitem input.pp:focus{border-color:var(--brand)}
  .qitem .sub{margin-left:auto;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums;white-space:nowrap}
  .qitem .st{font-size:11px;color:var(--amber);background:var(--amber-bg);border-radius:4px;padding:0 5px}
  /* 安装位置输入行 */
  .qitem .r3{display:flex;align-items:center;gap:7px;margin-top:7px}
  .qitem .r3 .lb{font-size:11.5px;color:var(--muted);flex:0 0 auto}
  .qitem .r3 input{flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;padding:5px 8px;
    font-size:12px;outline:none;background:#fbfdfe}
  .qitem .r3 input:focus{border-color:var(--brand);background:#fff}

  /* ---------- 分页控件（报价清单 / 选品弹窗共用） ---------- */
  /* ---------- 账号：登录 / 注册 / 账号管理 ---------- */
  .authbox{display:flex;align-items:center;gap:8px}
  /* 顶栏右侧的账号区：贴着最右边，按钮比工具条里的小一号 */
  .topbar .authbox{margin-left:auto;flex:0 0 auto}
  .topbar .authbox .btn{padding:5px 13px;font-size:12.5px}
  .topbar .authbox .btn.primary{font-weight:600;box-shadow:0 1px 3px rgba(13,143,143,.25)}
  .whoami{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
  .whoami b{color:var(--brand);font-weight:600}
  .whoami .role{font-size:10.5px;background:var(--brand-pale);color:var(--brand-d);
    border-radius:4px;padding:1px 6px}
  .amodal{position:fixed;inset:0;background:rgba(18,32,44,.55);display:none;place-items:center;z-index:132;padding:20px}
  .amodal.show{display:grid}
  .amodal .abox{background:#fff;border-radius:12px;padding:20px 22px;width:440px;max-width:100%;
    max-height:90vh;overflow:auto;box-shadow:0 18px 50px rgba(0,0,0,.3)}
  .amodal h3{margin:0 0 4px;font-size:16px}
  .amodal .ah{color:var(--muted);font-size:12.5px;margin:0 0 14px}
  .amodal .af{margin-bottom:10px}
  .amodal .af label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
  .amodal .af input,.amodal .af select{width:100%;border:1px solid var(--line);border-radius:7px;
    padding:7px 9px;font-size:13.5px;outline:none;font-family:inherit}
  .amodal .af input:focus,.amodal .af select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(13,143,143,.12)}
  .amodal .aerr{color:var(--red);font-size:12.5px;min-height:17px;margin:2px 0 8px}
  .amodal .aok{color:var(--brand);font-size:12.5px;min-height:17px;margin:2px 0 8px}
  .amodal .arow{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
  .amodal .arow .btn{padding:7px 14px}
  .amodal .sect{border-top:1px solid var(--line);margin:16px 0 12px;padding-top:12px}
  .amodal .sect h4{margin:0 0 8px;font-size:13.5px}
  .amodal .ulist{border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:12.5px}
  .amodal .ulist .u{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line-2)}
  .amodal .ulist .u:last-child{border-bottom:0}
  .amodal .ulist .u b{font-weight:600}
  .amodal .ulist .u .sp{flex:1}
  .amodal .ulist .u .tag{font-size:10.5px;background:var(--brand-pale);color:var(--brand-d);
    border-radius:4px;padding:1px 6px}
  .amodal .ulist .u .tag.adm{background:#fff3e0;color:#a8650a}
  .amodal .code{font-family:ui-monospace,Menlo,monospace;background:#f4f7f9;border:1px solid var(--line);
    border-radius:6px;padding:7px 9px;font-size:13px;letter-spacing:1px;user-select:all}
  .amodal .hintline{font-size:11.5px;color:var(--muted);margin:6px 0 0}
  .amodal .danger{color:var(--red);border-color:#e3b3ae;background:#fff}
  .amodal .danger:hover{background:#fdf1ef;color:var(--red)}

  /* 数字输入框：去掉 Chrome 的上下箭头 ——
     窄列里箭头会占掉输入区，把数字整个挡住（用户反馈"都看不到数量数字了"）。
     数量直接键盘输入，滚轮/箭头不再干扰。 */
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  input[type=number]{-moz-appearance:textfield;appearance:textfield}

  .pager{display:flex;align-items:center;gap:4px;justify-content:center;padding:10px 0 4px;font-size:12px;color:var(--muted)}
  .pager button{min-width:27px;height:25px;border:1px solid var(--line);background:#fff;border-radius:6px;
    cursor:pointer;font-size:12px;padding:0 7px;color:var(--ink-2);font-family:inherit}
  .pager button:hover:not(:disabled):not(.on){border-color:var(--brand);color:var(--brand)}
  .pager button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
  .pager button:disabled{opacity:.38;cursor:default}
  .pager .ell{padding:0 1px;color:#aab6bf}

  /* ---------- 选品弹窗 ---------- */
  .picker{position:fixed;inset:0;background:rgba(18,32,44,.55);display:none;flex-direction:column;z-index:125}
  .picker.show{display:flex}
  .picker-bar{background:#fff;padding:11px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    box-shadow:0 2px 10px rgba(0,0,0,.14)}
  .picker-bar b{font-size:15px;white-space:nowrap}
  .picker-bar .search{position:relative}
  .picker-bar .search input{width:250px;padding-left:30px}
  .picker-bar select{border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-size:13px;
    background:#fbfdfe;outline:none;font-family:inherit;color:var(--ink)}
  .picker-body{flex:1;overflow:auto;padding:18px 20px;background:#f4f8f9}
  .picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:12px}
  .pk{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px}
  .pk.added{border-color:var(--brand-l);background:#f5fbfb}
  /* 图片区：position:relative + 图片 width/height:100% + object-fit:contain
     坑：不能用 max-height:100% —— grid item 上的百分比 max-height 在 Chrome 不生效，
     图片会按宽度撑高再被 overflow:hidden 从中间裁掉（只显示半截图）。 */
  .pk .thumb{height:108px;background:linear-gradient(160deg,#f7fbfc,#eef5f7);border-radius:8px;
    position:relative;overflow:hidden}
  .pk .thumb img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);
    object-fit:contain;object-position:center}
  .pk .thumb .ph{position:absolute;inset:0;display:grid;place-items:center;color:#c3ced8;font-size:24px}
  .pk .nm{font-size:13px;font-weight:600;line-height:1.35;margin-top:2px}
  .pk .md{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--brand-d);
    align-self:flex-start;background:var(--brand-pale);border-radius:4px;padding:0 5px;margin-top:1px}
  .pk .sp{font-size:11px;color:var(--muted);line-height:1.55;max-height:3.4em;overflow:hidden}
  .pk .foot{display:flex;align-items:center;gap:6px;margin-top:auto}
  .pk .foot .price{flex:1;min-width:0}
  .pk .foot .price input{width:100%}
  .pk .addbtn{padding:5px 10px;font-size:12px;white-space:nowrap}
  .picker-foot{background:#fff;padding:4px 16px 10px;border-top:1px solid var(--line)}
  .sum-f{padding:12px 14px;border-top:1px solid var(--line);background:#fbfdfe;flex:0 0 auto}
  .sum-f .row{display:flex;justify-content:space-between;align-items:baseline;padding:2px 0;font-size:13px;color:var(--ink-2)}
  .sum-f .row.total{border-top:1px dashed var(--line);margin-top:7px;padding-top:8px;font-size:16px;font-weight:700;color:var(--ink)}
  .sum-f .row.total .amt{color:var(--brand);font-variant-numeric:tabular-nums}
  .sum-f .row .amt{font-variant-numeric:tabular-nums}
  .sum-f .acts{display:flex;gap:6px;margin-top:10px}
  .sum-f .acts .btn{flex:1;text-align:center}
  .sum-f .sum-links{display:flex;gap:12px;margin-top:9px;justify-content:center;flex-wrap:wrap;font-size:11.5px}
  .sum-f .sum-links a{color:var(--muted);text-decoration:none;cursor:pointer}
  .sum-f .sum-links a:hover{color:var(--brand);text-decoration:underline}
  .warn{background:var(--amber-bg);color:var(--amber);font-size:12px;padding:6px 14px;border-bottom:1px solid #f5e3c4}
  #sum-warn{flex:0 0 auto}

  .empty{padding:44px 20px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:var(--radius)}
  .foot{max-width:1560px;margin:0 auto;padding:0 20px 30px;color:var(--muted);font-size:12px}

  /* ---------- 打印 / 预览 ----------
     报价单按 A4 横版排：297×210mm（1122×794px @96dpi）。
     @page margin 用 0，页边距由 .qpage 的 45px(=12mm) 内边距承担，
     这样屏幕预览的纸面尺寸 = 打印出来的纸面尺寸，所见即所得。 */
  #printSheet{display:none}
  .sheet{color:var(--ink)}
  .sheet table{width:100%;border-collapse:collapse;font-size:11.5px}
  .sheet th,.sheet td{border:1px solid #cfd8de;padding:3mm 2.5mm;text-align:left;vertical-align:top}
  /* 全局表格样式里有 th{position:sticky}，打印稿的表头必须重置成 static ——
     sticky 元素在分页布局里会多顶出一个空白页 */
  .sheet th{background:#f2f8f9;font-weight:700;white-space:nowrap;position:static}
  .p-h{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid var(--brand);padding-bottom:8px;margin-bottom:12px}
  .p-h h1{font-size:20px;margin:0 0 3px}
  .p-h .co{text-align:right;font-size:12px;color:#445}
  .p-info{width:100%;font-size:12px;margin-bottom:10px;border-collapse:collapse}
  .p-info td{border:0;padding:2px 0}
  .p-note{margin-top:10px;font-size:11px;color:#556}
  /* 一个物理页（= 一张 A4 横版纸，尺寸直接用 mm，和 @page 完全对齐） */
  .qpage{background:#fff;width:297mm;min-height:210mm;box-sizing:border-box;padding:45px;
    margin:0 auto 18px;box-shadow:0 10px 34px rgba(0,0,0,.18)}

  /* 屏幕预览弹层 */
  .pvm{position:fixed;inset:0;background:rgba(18,32,44,.55);display:none;flex-direction:column;z-index:120}
  .pvm.show{display:flex}
  .pvm-bar{background:#fff;padding:10px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    box-shadow:0 2px 10px rgba(0,0,0,.14)}
  .pvm-bar b{font-size:15px}
  .pvm-body{flex:1;overflow:auto;padding:22px;display:flex;justify-content:flex-start;align-items:flex-start}
  .pvm-sheet{width:297mm;min-width:297mm;margin:0 auto}
  /* 量高度用的离屏容器（量完再决定怎么分页）—— 宽度必须和 .qpage 一致，量出来的高度才准 */
  #qmeasure{position:fixed;left:-10000px;top:0;width:297mm;visibility:hidden;pointer-events:none}
  #qmeasure .qpage{margin:0;min-height:0;box-shadow:none}
  /* @page 必须写在 @media print 外面（和 catalog.html 一致），
     写在 @media print 里时 Chrome 分页会多出一个空白尾页 */
  @page{size:A4 landscape;margin:0}
  @media print{
    /* Chrome 默认不输出背景色/背景图（打印对话框要手动勾「背景图形」）。
       print-color-adjust:exact 让表头底色等背景无条件打印。 */
    html,body,.sheet,.sheet *{
      -webkit-print-color-adjust:exact !important;
      print-color-adjust:exact !important;
    }
    body{background:#fff}
    /* 打印时把这些全部隐藏。注意 #qmeasure 不能 display:none ——
       它是分页量高度的容器，beforeprint 时会在 print 媒体下重新算分页，
       量不到高度就会把整张表塞进一页。改成 visibility:hidden（out of flow，不占版面）。 */
    .topbar,.toolbar,.infobar,.wrap,.foot,.sum-h .acts,.pvm,.picker,.mobar,.modal,.toast{display:none !important}
    #qmeasure{visibility:hidden !important}
    #printSheet{display:block !important}
    /* 每块正好一张 A4 横版纸，分页写法与 catalog.html 一致 */
    .qpage{width:297mm;height:210mm;margin:0 !important;box-shadow:none !important;
      break-after:page;page-break-after:always}
    .qpage:last-child{break-after:auto;page-break-after:auto}
  }
  .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);background:#16232e;color:#fff;
    padding:9px 18px;border-radius:8px;font-size:13px;opacity:0;pointer-events:none;transition:.22s;z-index:140;box-shadow:0 6px 20px rgba(0,0,0,.2)}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  /* 弹层与提示要盖在预览层(.pvm z-index:120)上面 —— 导出 PDF 的报错框/提示就是从预览层里弹的 */
  .modal{position:fixed;inset:0;background:rgba(16,28,38,.45);display:none;place-items:center;z-index:130;padding:20px}
  .modal.show{display:grid}
  .modal .box{background:#fff;border-radius:12px;padding:18px;max-width:520px;width:100%}
  .modal h3{margin:0 0 10px;font-size:15px}
  .modal textarea{width:100%;height:170px;border:1px solid var(--line);border-radius:8px;padding:9px;font-family:ui-monospace,Menlo,monospace;font-size:12px;outline:none}
  .modal .row{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}