/* 报价台(2026-10-05 按设计稿改版): 来源五格 + 款列表 + 右侧明细抽屉 + 上浮浮层 + 手机卡片。
   选择器全挂在 #qdRoot 下(抽屉/浮层也在它里面), 不污染全站; 状态徽章的绿/黄/红/橙是语义色, 允许字面量。
   10-16 同风格改版: 页头 / 搜索 / 磁贴 / 芯片 / 表格 / 客户芯片 / 手机卡片容器的视觉在共用件 desk-ui.css(.du-*), 这里只留布局与报价台独有。 */
#qdRoot { display: flex; flex-direction: column; gap: 14px; padding: 12px 16px 24px; box-sizing: border-box; color: var(--ink, #25211D); }
#qdRoot .qd-bar { margin: -12px -16px 0; }   /* 白条页头(du-head)顶满 #qdRoot 的内边距, 同画板 B */
#qdRoot .qd-sort { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted, #7A736B); }
#qdRoot #qdSort { height: 34px; border: 1px solid var(--line, #E4DFD8); border-radius: 8px; background: var(--surface, #fff); font: inherit; font-size: 13px; padding: 0 8px; }
#qdRoot #qdCnt { font-size: 12.5px; color: var(--muted, #7A736B); margin-left: auto; }

#qdRoot .qd-mk-pct { font-size: 11px; color: var(--muted, #7A736B); }
#qdRoot .qd-mk-btn { border-style: dashed; color: var(--cta-hover, #B45A0F); }
#qdRoot .qd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#qdRoot .qd-chips-l { font-size: 12px; color: var(--muted-2, #9A938A); margin-right: 4px; }
#qdRoot .qd-sub { display: block; font-size: 11.5px; color: var(--muted-2, #9A938A); margin-top: 2px; white-space: normal; }
#qdRoot .qd-err { color: var(--bad, #C93A2E); padding: 24px; text-align: center; }
#qdRoot .qd-empty { color: var(--muted, #7A736B); padding: 24px; text-align: center; }

/* 来源五格 */
#qdRoot #qdTiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
#qdRoot .qd-tile-l { display: flex; align-items: center; gap: 6px; }
#qdRoot .qd-tile-l i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
#qdRoot .qd-tile-n small { font-size: 12px; font-weight: 400; color: var(--muted-2, #9A938A); }

/* 列表 */
#qdRoot #qdGrid.qd-list { display: block; }
#qdRoot #qdGrid.qd-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
#qdRoot .qd-list-scroll { overflow-x: auto; background: var(--surface, #fff); border: 1px solid var(--line, #E4DFD8); border-radius: 10px; }
#qdRoot .qd-list-table .qd-row { cursor: pointer; }
#qdRoot .qd-list-table .qd-row:hover td, #qdRoot .qd-list-table .qd-row:focus td { background: var(--soft, #F3F1EE); }
#qdRoot .qd-list-table .qd-row[data-sel] td { background: var(--primary-50, #FDF1E6); }
#qdRoot .c-spec b { font-weight: 600; }
#qdRoot .qd-ln { line-height: 22px; }
#qdRoot .qd-lbl { display: none; }
#qdRoot .c-cost { color: var(--muted, #7A736B); }
#qdRoot .c-q, #qdRoot .qd-q { font-size: 14px; }
#qdRoot .qd-q { font-weight: 700; color: var(--cta-hover, #C2600F); }   /* 图片卡不在 du-table 里, 价钱色自己给 */
#qdRoot .c-q small, #qdRoot .qd-q small { font-size: 11px; font-weight: 400; color: var(--muted-2, #9A938A); }
#qdRoot .qd-fb { margin-left: 6px; font-size: 10.5px; font-weight: 400; color: var(--warn, #7A4A06); }
#qdRoot .c-sold { color: var(--muted, #7A736B); }

/* 徽章(语义色) */
#qdRoot .qd-badge { display: inline-block; font-size: 11px; border-radius: 6px; padding: 2px 7px; line-height: 16px; background: var(--soft, #F3F1EE); color: var(--muted, #7A736B); }
#qdRoot .qd-b-cost { background: var(--good-soft, #E7F3EC); color: var(--good, #1F6B3F); }
#qdRoot .qd-b-last { background: #FEF3C7; color: #7A4A06; }
#qdRoot .qd-b-none { background: var(--bad-soft, #FDE4E2); color: var(--bad, #9B1C1C); }
#qdRoot .qd-b-gap { background: var(--primary, #E2761B); color: #fff; }
#qdRoot .qd-bad { font-size: 10.5px; color: var(--primary, #E2761B); margin-left: 4px; }

/* 图片模式卡片 */
#qdRoot .qd-card:not(tr) { cursor: pointer; border: 1px solid var(--line, #E4DFD8); border-radius: 10px; padding: 8px; background: var(--surface, #fff); display: flex; flex-direction: column; gap: 4px; }
#qdRoot .qd-card[data-sel]:not(tr) { border-color: var(--primary, #E2761B); background: var(--primary-50, #FDF1E6); }
#qdRoot .qd-card:not(tr) .qd-lbl { display: inline; }
#qdRoot .qd-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--soft, #F3F1EE); }
#qdRoot .qd-noimg { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--soft, #F3F1EE); color: var(--muted-2, #9A938A); font-size: 20px; border-radius: 8px; }
#qdRoot .qd-sku { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qdRoot .qd-name { font-size: 11.5px; color: var(--muted-2, #9A938A); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qdRoot #qdMore { align-self: center; border: 1px solid var(--line, #E4DFD8); background: var(--surface, #fff); border-radius: 9px; padding: 8px 22px; cursor: pointer; font: inherit; font-size: 13px; }

/* 右侧明细抽屉: 无遮罩, 列表仍可见可点 */
#qdRoot #qdDetails[hidden], #qdRoot #qdMkPanel[hidden] { display: none; }
#qdRoot #qdDetails { position: fixed; top: 0; right: 0; bottom: 0; width: min(600px, 100vw); z-index: 1500; background: var(--surface, #fff); border-left: 1px solid var(--line, #E4DFD8); box-shadow: -8px 0 24px rgba(42, 37, 32, .08); }
#qdRoot .qd-detail-panel { height: 100%; box-sizing: border-box; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
#qdRoot .qd-d-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#qdRoot .qd-d-head h2 { margin: 4px 0 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
#qdRoot .qd-close, #qdRoot .qd-mk-x:not(.qd-chip) { flex: none; width: 36px; height: 36px; border: 1px solid var(--line, #E4DFD8); border-radius: 8px; background: var(--surface, #fff); color: var(--ink, #25211D); cursor: pointer; display: flex; align-items: center; justify-content: center; }
#qdRoot .qd-d-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#qdRoot .qd-d-tiles > div { background: var(--soft, #F3F1EE); border-radius: 8px; padding: 10px 12px; }
#qdRoot .qd-d-tiles > .qd-d-q { background: var(--primary-50, #FDF1E6); }
#qdRoot .qd-d-tiles span { display: block; font-size: 11.5px; color: var(--muted, #7A736B); }
#qdRoot .qd-d-tiles b { display: block; font-size: 17px; margin-top: 2px; }
#qdRoot .qd-d-tiles .qd-d-q b { color: var(--cta-hover, #C2600F); }
#qdRoot .qd-d-tiles small { font-size: 11px; color: var(--muted-2, #9A938A); }
#qdRoot .qd-d-ys { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-height: 96px; overflow-y: auto; }
#qdRoot .qd-d-ys .qd-sub { display: inline; margin: 0 2px 0 0; }
#qdRoot .qd-detail-scroll { flex: 1; min-height: 120px; overflow: auto; border: 1px solid var(--line, #E4DFD8); border-radius: 8px; }
#qdRoot .qd-detail-panel table { font-size: 12.5px; white-space: nowrap; }
#qdRoot .qd-detail-panel th { position: sticky; top: 0; padding: 8px 10px; }
#qdRoot .qd-detail-panel td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft, #F1EDE7); text-align: left; }
#qdRoot .qd-warn { background: var(--warn-soft, #FFF8EC); border: 1px solid #F3D9A8; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--warn, #6A4710); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#qdRoot .qd-warn a { white-space: nowrap; font-weight: 600; color: var(--cta-hover, #B45A0F); }
#qdRoot .qd-d-foot { display: flex; gap: 8px; justify-content: flex-end; }
#qdRoot .qd-d-foot .qd-chip { height: 34px; border-radius: 8px; }
#qdRoot .qd-primary { height: 34px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--primary, #E2761B); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
#qdRoot .qd-primary:disabled { opacity: .45; cursor: not-allowed; }

/* 抽屉只有 ~470px: 上浮列永远收起(顶部三格已有), 单位列只在多单位款(.qd-mu)才出; 列仍在 DOM 里, 列序不变 */
#qdRoot .qd-detail-panel :is(th, td):nth-child(7), #qdRoot .qd-detail-panel table:not(.qd-mu) :is(th, td):nth-child(5) { display: none; }
#qdRoot .qd-detail-panel td:first-child { white-space: nowrap; min-width: 150px; max-width: 190px; }
#qdRoot .qd-detail-panel .qd-sku { display: block; max-width: 176px; }
#qdRoot .qd-detail-panel .qd-sub { white-space: nowrap; }   /* 「他上次价」格 62px 宽, 基础 .qd-sub 是 block+normal 会把「09-18 · 1 次」折成两行把整行撑到 75px; 表本身横滑, 列宽让它撑 */   /* a.qd-sku 是 inline, 不变 block 省略号不生效; 176 = 190 - 左右 7px padding */
#qdRoot .qd-detail-panel :is(th, td) { padding-left: 7px; padding-right: 7px; }
#qdRoot .qd-detail-panel td:nth-child(8) { font-weight: 700; color: var(--cta-hover, #C2600F); }

/* 上浮浮层 */
#qdRoot #qdMkPanel { position: fixed; inset: 0; z-index: 1600; background: rgba(42, 37, 32, .35); display: flex; align-items: center; justify-content: center; padding: 20px; }
#qdRoot .qd-mk-dlg { background: var(--surface, #fff); border-radius: 12px; box-shadow: 0 12px 32px rgba(42, 37, 32, .16); padding: 22px 24px; width: 520px; max-width: 100%; max-height: 90vh; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
#qdRoot .qd-mk-dlg h2 { margin: 0; font-size: 18px; }
#qdRoot .qd-mbody { overflow-y: auto; min-height: 0; }
#qdRoot .qd-mrow { display: grid; grid-template-columns: 72px minmax(0, 1fr) 92px 64px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft, #F1EDE7); font-size: 13px; }
#qdRoot .qd-mrow.chg { background: var(--primary-50, #FDF1E6); margin: 0 -8px; padding: 8px; }
#qdRoot .qd-mhead { color: var(--muted-2, #9A938A); font-size: 12px; padding-top: 0; }
#qdRoot .qd-mhead .num { text-align: right; }
#qdRoot .qd-mex { color: var(--muted, #7A736B); }
#qdRoot .qd-mex b { color: var(--cta-hover, #C2600F); }
#qdRoot .qd-pct { display: flex; align-items: center; height: 32px; border: 1px solid var(--line, #E4DFD8); border-radius: 8px; padding: 0 8px; background: var(--surface, #fff); }
#qdRoot .qd-pct input { width: 100%; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 13.5px; text-align: right; background: transparent; }
#qdRoot .qd-pct i { font-style: normal; color: var(--muted-2, #9A938A); margin-left: 2px; }
#qdRoot .qd-mtag { font-size: 11.5px; color: var(--cta-hover, #C2600F); }
#qdRoot .qd-sr { position: absolute; left: -9999px; }

/* 客户维度(第 2 期): 选客户 / 芯片 / 第 6 格 / 两列; 没选客户时这些节点根本不渲染 */
#qdRoot #qdCust { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; }
#qdRoot .qd-cpick { position: relative; display: flex; }
#qdRoot #qdCustIn { width: 200px; height: 34px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--line, #E4DFD8); border-radius: 8px; background: var(--surface, #fff); font: inherit; font-size: 13px; color: var(--ink, #25211D); }
#qdRoot #qdCustList { position: absolute; top: 38px; left: 0; z-index: 1400; min-width: 100%; max-height: 300px; overflow-y: auto; background: var(--surface, #fff); border: 1px solid var(--line, #E4DFD8); border-radius: 8px; box-shadow: 0 8px 20px rgba(42, 37, 32, .12); }
#qdRoot #qdCustList[hidden] { display: none; }
#qdRoot .qd-copt { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--ink, #25211D); }
#qdRoot .qd-copt:hover, #qdRoot .qd-copt:focus { background: var(--soft, #F3F1EE); }
#qdRoot .qd-copt small { color: var(--muted-2, #9A938A); }
#qdRoot .qd-copt-none { padding: 8px 10px; font-size: 12.5px; color: var(--muted, #7A736B); }
#qdRoot .qd-cchip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qdRoot .qd-clink { font-size: 12.5px; color: var(--cta-hover, #B45A0F); white-space: nowrap; text-decoration: none; }
#qdRoot #qdTiles.qd-t6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#qdRoot .qd-list-table th small { font-weight: 400; font-size: 10.5px; }
#qdRoot :is(.qd-vs-up, .qd-vs-down) { font-weight: 600; }
#qdRoot .qd-list-table .qd-dim td { color: var(--muted-2, #9A938A); }
#qdRoot .qd-list-table .qd-dim td.c-q { opacity: .6; }

/* 手机(10-16 精简版, 画板 C2): 搜索+排序一行 / 客户芯片+链接一行 / 磁贴与系列各一条 26px 横滑 / 一款三行(1px 分隔线) / 抽屉与浮层全宽 */
@media (max-width: 768px) {
  #qdRoot { gap: 8px; padding: 10px 12px 20px; }
  #qdRoot .qd-bar { margin: 0; }
  #qdRoot .qd-bar .du-title { flex-basis: 100%; } #qdRoot .qd-bar .du-sub { display: none; } #qdRoot #qdNewQuote { order: 2; height: 30px; font-size: 12px; }   /* 10-18 同风格 2 期: 标题独占一行(主站顶栏已不放), 口径手机不出, 开报价单跟刷新一行; 搜索+排序仍一行 */
  #qdRoot #qdKw { font-size: 13px; height: 28px; }
  #qdRoot .qd-sort { flex: none; gap: 4px; font-size: 12px; }
  #qdRoot #qdSort { height: 30px; font-size: 12.5px; padding: 0 4px; }
  #qdRoot #qdCust { order: 1; flex-basis: 100%; flex-wrap: nowrap; min-width: 0; }
  #qdRoot #qdCnt { order: 2; flex: 1 1 0; margin-left: 0; font-size: 11.5px; }
  #qdRoot #qdRefresh, #qdRoot #qdModes { order: 2; }
  #qdRoot #qdRefresh { height: 30px; font-size: 12px; }
  #qdRoot #qdTiles { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  #qdRoot .qd-tile-l { gap: 4px; }
  #qdRoot .qd-tile-n small { display: none; }
  #qdRoot .qd-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #qdRoot .qd-d-ys .qd-chip { flex: none; height: 44px; }
  #qdRoot .qd-chips-l { display: none; }
  #qdRoot #qdGrid.qd-images { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  #qdRoot .qd-list-scroll { overflow: hidden; }
  #qdRoot .qd-list-table, #qdRoot .qd-list-table tbody { display: block; }
  #qdRoot .qd-list-table thead { display: none; }
  /* 手机卡片网格(一款三行): 与 cust-price.css .cp-row 手机卡片值同步维护(内边距 7px 12px / 分隔线 line-soft / 底色 surface) */
  #qdRoot .qd-list-table .qd-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "spec spec spec q" "xl dw src src" "sold sold sold cost"; gap: 2px 6px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--line-soft, #F1EDE7); background: var(--surface, #fff); min-height: 44px; box-sizing: border-box; font-size: 11.5px; }
  #qdRoot .qd-list-table .qd-row[data-sel] { background: var(--primary-50, #FDF1E6); }
  #qdRoot .qd-list-table .qd-row td { display: block; padding: 0; border: 0; min-width: 0; white-space: nowrap; background: transparent !important; line-height: 15px; }
  #qdRoot .qd-list-table .qd-row .qd-ln { line-height: 15px; }
  #qdRoot .qd-list-table td.c-spec { grid-area: spec; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; line-height: 18px; }
  #qdRoot .qd-list-table td.c-spec .qd-sub { display: none; }
  #qdRoot .qd-list-table td.c-q { grid-area: q; text-align: right; font-size: 15px; }
  #qdRoot .qd-list-table td.c-q .qd-ln { line-height: 18px; }
  #qdRoot .qd-list-table .qd-row :is(small, .qd-fb, .qd-sub, .qd-badge) { line-height: 1; }
  #qdRoot .qd-list-table .qd-row .qd-badge { font-size: 10.5px; padding: 1px 5px; border-radius: 4px; }
  #qdRoot .qd-list-table td.c-xl { grid-area: xl; font-size: 11px; color: var(--muted-2, #9A938A); }
  #qdRoot .qd-list-table td.c-dw { grid-area: dw; font-size: 11px; color: var(--muted-2, #9A938A); }
  #qdRoot .qd-list-table td.c-src { grid-area: src; overflow: hidden; text-overflow: ellipsis; }
  #qdRoot .qd-list-table td.c-src .qd-sub { display: inline; margin: 0 0 0 4px; font-size: 11px; }
  #qdRoot .qd-list-table td.c-sold { grid-area: sold; font-size: 11px; text-align: left; }
  #qdRoot .qd-list-table td.c-sold::before { content: "近180天 "; }
  #qdRoot .qd-list-table td.c-cost { grid-area: cost; text-align: right; font-size: 11px; }
  #qdRoot .qd-list-table td.c-mk { display: none; }
  #qdRoot .qd-list-table .qd-lbl { display: inline; }
  #qdRoot .qd-list-table td.c-cv .qd-lbl { display: none; }
  #qdRoot .qd-list-table td.c-cl .qd-sub { display: inline; margin: 0 0 0 4px; font-size: 10.5px; white-space: nowrap; }   /* 基础 .qd-sub 是 block + normal, 不钉 nowrap 会在格子被挤窄时折成第二行 */
  #qdRoot #qdCust .qd-cpick, #qdRoot #qdCustIn { width: 100%; flex: 1 1 100%; }
  #qdRoot #qdCustIn { height: 30px; }
  #qdRoot .qd-clink { flex: none; font-size: 12px; }
  /* 有客户(10-16 运哥选 A): 来源格隐藏、第二行 系列·单位·他上次·vs, 仍三行。之前五格同行时「他上次 ¥0.77 ~ 1」+ 报价列把来源挤成 0 宽, 内容竖着堆 90~240px 撑高整行(一屏只剩 1~4 款) */
  /* 右列(报价/vs/成本)最多占一半, 「他上次」那格至少留 120px 把价钱放下, 挤不下的是它自己的小字(日期·几款)与报价列的兜底标 */
  #qdRoot .qd-list-table.qd-hascust .qd-row { grid-template-columns: auto auto minmax(0, 1fr) fit-content(50%); grid-template-areas: "spec spec spec q" "xl dw cl cv" "sold sold sold cost"; }
  #qdRoot .qd-list-table.qd-hascust td.c-src { display: none; }
  #qdRoot .qd-list-table.qd-hascust :is(td.c-q, td.c-cv, td.c-cost) { overflow: hidden; text-overflow: ellipsis; }
  #qdRoot .qd-list-table td.c-cl { grid-area: cl; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; text-align: right; }
  #qdRoot .qd-list-table td.c-cv { grid-area: cv; font-size: 11.5px; text-align: right; }
  #qdRoot #qdMore { min-height: 44px; }
  #qdRoot #qdDetails { width: 100vw; }
  #qdRoot .qd-detail-panel { padding: 16px; }
  #qdRoot .qd-d-foot .qd-chip, #qdRoot .qd-primary { height: 44px; }
  #qdRoot #qdMkPanel { padding: 0; align-items: stretch; }
  #qdRoot .qd-mk-dlg { width: 100%; max-height: none; border-radius: 0; }
  #qdRoot .qd-mrow { grid-template-columns: 56px minmax(0, 1fr) 84px; }
  #qdRoot .qd-mrow .qd-mtag { grid-column: 1 / -1; }
  #qdRoot .qd-pct { height: 44px; }
}
