/* 报价台 × 客户 360 共用件(2026-10-16, 方案 docs/DESK-UI-PLAN.md §二, 画板 A~F)。
   只认 .du-* 类(模板里追加在原类名后面), 不挂 #qdRoot / #cpRoot; 色字圆角全走 styles.css 令牌。
   子元素规则同时认设计稿短名(.n/.l/.h/.l1/.l2)与两页现有子类名(.qd-tile-n / .cp-stat-n / .cr-l1 …): 不改 DOM 也能共用。
   本文件在 quote-desk.css / cust-price.css 之前加载: 页面表里 #qdRoot / #cpRoot 起头的布局规则天然压过这里。 */

/* 页头白条 */
.du-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--line); box-sizing: border-box; }
/* 页头标题 / 口径: 下一期报价台补 DOM 时用 */
.du-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 26px; }
.du-sub { font-size: 13px; color: var(--muted-2); }

/* 搜索框: label 外壳(放大镜 + input) 与裸 input 两种都认 */
.du-search { display: inline-flex; align-items: center; gap: 8px; height: 34px; width: 260px; max-width: 100%; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted-2); font: inherit; font-size: 13.5px; }
.du-search svg { flex: none; }
.du-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; padding: 0; font: inherit; color: var(--ink); background: transparent; }
input.du-search { color: var(--ink); }   /* 裸 input: 外壳的 muted-2 是给放大镜的, 输入的字仍是正文色; 不去 outline, 全站没有 input:focus 兜底 */
.du-search:focus-within, input.du-search:focus { border-color: var(--primary-2); }

/* 客户芯片 */
.du-cchip { display: inline-flex; align-items: center; gap: 8px; height: 34px; max-width: 100%; box-sizing: border-box; padding: 0 6px 0 12px; border-radius: 17px; background: var(--primary-50); border: 1px solid var(--primary-2); color: var(--warn); font-size: 13px; font-weight: 600; white-space: nowrap; }   /* 「客户」是裸文本节点, 不钉 nowrap 会成独立 flex item 被挤成两行 */
.du-cchip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.du-cchip small { font-weight: 400; }
.du-cchip > button { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: var(--surface); color: var(--warn); font-size: 14px; line-height: 22px; cursor: pointer; }

/* 磁贴: 计数 / 名 / 一句口径; 现有模板是 名在前, 用 order 把数字提到第一行 */
.du-tile { flex: 1 1 150px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; text-align: left; font: inherit; color: var(--ink); }
button.du-tile { cursor: pointer; }
.du-tile.on { border-color: var(--primary-2); background: var(--primary-50); }
.du-tile :is(.n, .qd-tile-n, .cp-stat-n) { order: -1; font-size: 22px; font-weight: 700; line-height: 26px; font-variant-numeric: tabular-nums; }
.du-tile :is(.l, .qd-tile-l, .cp-stat-l) { font-size: 12px; color: var(--muted); }
.du-tile :is(.h, .qd-tile-h, .cp-stat-h) { max-width: 100%; font-size: 11px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 系列 / 段芯片 */
.du-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.du-chip.on { background: var(--primary-50); border-color: var(--primary-2); color: var(--warn); font-weight: 600; }
.du-chip small { font-size: 11px; color: var(--muted-2); }

/* 按钮 */
.du-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.du-btn:hover { border-color: var(--muted); }
.du-btn.primary { background: var(--primary); border-color: var(--primary); color: var(--surface); font-weight: 600; }   /* 橙底白字: 白 = --surface */
.du-btn.primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); }

/* 两段切换(列表 / 图片) */
.du-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.du-seg button { height: 32px; padding: 0 12px; border: 0; border-radius: 0; background: var(--surface); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.du-seg button.on { background: var(--primary-50); color: var(--warn); font-weight: 600; }

/* 表格: styles.css 全局 table 有 min-width:960px、th 有大写字距与 2px 底线, 这里压回设计稿 */
.du-table { width: 100%; min-width: 0; border-collapse: collapse; }
.du-table th { background: var(--thead); color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; text-transform: none; letter-spacing: 0; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.du-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13px; vertical-align: top; white-space: nowrap; }
.du-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.du-table .sub { font-size: 11px; color: var(--muted); font-weight: 400; }
.du-table :is(.price, .c-q, .cp-last) { color: var(--cta-hover); font-weight: 700; }
.du-table :is(.up, .qd-vs-up, .cp-up) { color: var(--bad); }
.du-table :is(.down, .qd-vs-down, .cp-down) { color: var(--good); }
.du-table tr.on td { background: var(--primary-50); }

/* 页签条 */
.du-tabs { display: flex; gap: 14px; padding: 0 4px; border-bottom: 1px solid var(--line); }
.du-tab { flex: none; height: 38px; padding: 0 4px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.du-tab.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--primary); }

/* 客户栏项(桌面左栏 / 手机列表共用) */
.du-ritem { display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.du-ritem:hover { background: var(--panel); }
.du-ritem.on { background: var(--primary-50); border-color: var(--primary-2); }
.du-ritem :is(.l1, .cr-l1) { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 13.5px; line-height: 18px; }
.du-ritem :is(.l2, .cr-l2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 手机固定底栏: 桌面不出 */
.du-mbar { display: none; }

@media (max-width: 768px) {
  .du-head { gap: 6px; padding: 0; background: none; border: 0; }   /* 手机稿页头不是白条, 直接坐在页底色上 */
  .du-title { font-size: 18px; line-height: 24px; }
  .du-sub { font-size: 12px; }
  .du-search { flex: 1 1 0; width: 100%; min-width: 0; height: 30px; padding: 0 8px; gap: 6px; font-size: 13px; }
  .du-cchip { flex: 1 1 auto; min-width: 0; justify-content: space-between; gap: 6px; height: 28px; padding: 0 2px 0 10px; border-radius: 14px; font-size: 12.5px; }
  .du-cchip > button { width: 28px; height: 28px; border-radius: 14px; background: transparent; font-size: 16px; line-height: 28px; }
  /* 磁贴 → 26px 胶囊横滑: 名在前、计数小字在后, 口径隐藏 */
  .du-tile { flex: none; flex-direction: row; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; white-space: nowrap; }
  .du-tile :is(.n, .qd-tile-n, .cp-stat-n) { order: 0; font-size: 11px; font-weight: 400; line-height: normal; color: var(--muted-2); }
  .du-tile :is(.l, .qd-tile-l, .cp-stat-l) { font-size: 12px; color: var(--ink); }
  .du-tile.on :is(.l, .qd-tile-l, .cp-stat-l) { color: var(--warn); font-weight: 600; }
  .du-tile :is(.h, .qd-tile-h, .cp-stat-h) { display: none; }
  .du-chip { flex: none; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; }
  .du-seg button { height: 30px; padding: 0 10px; font-size: 12px; }
  .du-tabs { gap: 16px; padding: 0 2px; overflow-x: auto; scrollbar-width: none; }
  .du-tab { height: 36px; padding: 0 2px; }
  .du-ritem { min-height: 44px; padding: 6px 12px; gap: 1px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; }   /* 列表行 ≤48px(UI 用例守): 6+18+1+15+6+1 */
  .du-ritem.on { background: var(--primary-50); }
  .du-ritem :is(.l2, .cr-l2) { font-size: 11px; line-height: 15px; }
  .du-mbar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); z-index: 30; padding: 8px 12px; background: var(--surface); border-top: 1px solid var(--line); }   /* 坐在主站底部页签 .mobile-tabs(z-index 90, 58px 高离底 10px)上方 */
  .du-mbar .du-btn { flex: 1 1 0; height: 44px; padding: 0 8px; border-radius: 10px; font-size: 14px; font-weight: 600; }
}