/* 客户成交价专页(2026-10-15): 头部 + 四格 + 工具栏 + 每款一行表(行内迷你折线) + 展开明细 + 手机卡片 + 打印。
   选择器全挂 #cpRoot 下, 不污染全站; 涨跌红绿是语义色, 走 --bad / --good 令牌。
   10-16 同风格改版: 按钮 / 四格 / 芯片 / 页签 / 表头与价钱色 / 客户栏项 / 手机底栏的视觉在共用件 desk-ui.css(.du-*), 这里只留布局与本页独有。 */
/* 第 3 期(10-16): 外壳两栏 = 左 aside#cpRail 客户栏 312px + 右 #cpMain(原专页全部内容); 窄于两栏之和时主区折到栏下面 */
#cpRoot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 12px 16px 24px; box-sizing: border-box; color: var(--ink, #25211D); }
#cpMain { display: flex; flex-direction: column; gap: 12px; flex: 999 1 560px; min-width: 0; }
#cpRoot .jump-back { margin: 0; }
#cpRoot .cp-head { justify-content: space-between; gap: 12px; }
#cpRoot .cp-name { margin: 0; font-size: 16px; font-weight: 700; }
#cpRoot .cp-meta { margin-top: 3px; font-size: 12px; color: var(--muted, #7A736B); }
#cpRoot .cp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* 客户栏(第 3 期 §十八, 本体 cust360-rail.js): 类名 cr-*, 不与主区 .cp-* 选择器相撞; 高度封顶一屏, 列表自己滚(不吸顶: 主站顶栏高度随内容变, 吸顶会被它盖) */
#cpRail { flex: 0 0 312px; width: 312px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 136px); padding: 10px; background: var(--surface, #fff); border: 1px solid var(--line, #E4DFD8); border-radius: 10px; }
#cpRail .cr-top { display: flex; gap: 6px; }
#cpRail #crQ { flex: 1; min-width: 0; }
#cpRail .cr-fold { flex: none; width: 34px; height: 34px; border: 1px solid var(--line, #E4DFD8); border-radius: 8px; background: var(--surface, #fff); font: inherit; color: var(--muted, #7A736B); cursor: pointer; }
#cpRail .cr-segs { display: flex; flex-wrap: wrap; gap: 4px; }
#cpRail .cr-n { margin-left: 4px; font-size: 11px; font-variant-numeric: tabular-nums; opacity: .75; }
#cpRail .cr-note[hidden] { display: none; }
#cpRail .cr-note { font-size: 11.5px; color: var(--muted, #7A736B); }
#cpRail .cr-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -10px -10px; padding: 0 4px; border-top: 1px solid var(--line-soft, #F1EDE7); }
#cpRail .cr-mc { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; }
#cpRail .cr-kh, #cpRail .cr-ow { flex: none; font-size: 11.5px; color: var(--muted-2, #9A938A); white-space: nowrap; }
#cpRail .cr-ow { margin-left: auto; }
#cpRail .cr-pin .cr-l2 { color: var(--muted-2, #9A938A); }
#cpRail .cr-tip, #cpRail .cr-err { padding: 16px 12px; font-size: 12.5px; color: var(--muted, #7A736B); text-align: center; }
#cpRail .cr-err { color: var(--bad, #C0341A); }
#cpRail .cr-more { display: block; width: 100%; height: 32px; border: 0; background: transparent; font: inherit; font-size: 12.5px; color: var(--primary, #E2761B); cursor: pointer; }
#cpRoot .cp-tolist, #cpRoot .cp-railon { display: none; height: 28px; padding: 0 10px; border: 1px solid var(--line, #E4DFD8); border-radius: 8px; background: var(--surface, #fff); font: inherit; font-size: 12.5px; color: var(--ink, #25211D); cursor: pointer; }
@media (min-width: 769px) {
  #cpRoot.cp-railoff #cpRail { display: none; }   /* 桌面收起(cp.railOff 记住); 手机列表页不受它影响 */
  #cpRoot.cp-railoff .cp-railon { display: inline-flex; align-items: center; align-self: flex-start; }
  #cpRoot .cp-head { padding: 14px 16px; border: 1px solid var(--line, #E4DFD8); border-radius: 10px; }   /* 桌面客户头是卡片(画板 C); 手机 du-head 自己回到无底无边 */
}

#cpRoot .cp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#cpRoot .cp-stats:empty { display: none; }

#cpRoot .cp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#cpRoot #cpKw { flex: 1 1 260px; max-width: 420px; }
#cpRoot .cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }

#cpRoot .cp-scroll { overflow-x: auto; background: var(--surface, #fff); border: 1px solid var(--line, #E4DFD8); border-radius: 10px; }
#cpRoot .cp-row { cursor: pointer; }
#cpRoot .cp-row:hover td, #cpRoot .cp-row:focus td { background: var(--soft, #F3F1EE); }
#cpRoot .cp-row.open td { background: var(--primary-50, #FEF3E5); }
#cpRoot .cp-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted-2, #9A938A); white-space: normal; }
#cpRoot .cp-last { font-size: 14px; }
#cpRoot .cp-table td { padding: 8px 10px; }   /* 主区只剩 ~870px(主站侧栏 + 客户栏), du-table 的 10px 12px 会把小字挤成两行 */
#cpRoot .cp-table .cp-sub { white-space: nowrap; }   /* 表在 .cp-scroll 里横滑, 宁可撑宽列也不折行 */
#cpRoot .cp-chg { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
#cpRoot .cp-flat, #cpRoot .cp-first { color: var(--muted, #7A736B); font-weight: 400; }
#cpRoot .cp-spark { display: block; }

#cpRoot .cp-drow > td { padding: 0; background: var(--panel, #FBFAF8); white-space: normal; }
#cpRoot .cp-detail { padding: 12px 16px 16px; }
#cpRoot .cp-detail-t { font-size: 12.5px; color: var(--muted, #7A736B); margin-bottom: 8px; }
#cpRoot .cp-chart { display: block; width: 100%; max-width: 720px; height: auto; margin-bottom: 10px; background: var(--surface, #fff); border: 1px solid var(--line-soft, #F1EDE7); border-radius: 8px; }
#cpRoot .cp-chart .cp-grid { stroke: var(--line, #E4DFD8); stroke-dasharray: 3 3; }
#cpRoot .cp-chart .cp-axis { font-size: 12px; fill: var(--muted-2, #9A938A); }
#cpRoot .cp-chart-empty { font-size: 12px; color: var(--muted-2, #9A938A); margin-bottom: 8px; }
#cpRoot .cp-dtable td { padding: 6px 12px; border-bottom: 1px solid var(--line-soft, #F1EDE7); white-space: nowrap; }
#cpRoot .cp-dtable tr.cp-gray td { color: var(--muted-2, #9A938A); background: var(--soft, #F3F1EE); }
#cpRoot .cp-empty { padding: 32px; text-align: center; color: var(--muted, #7A736B); background: var(--surface, #fff); border: 1px solid var(--line, #E4DFD8); border-radius: 10px; }
#cpRoot .cp-err { padding: 24px; text-align: center; color: var(--bad, #C0341A); }
#cpRoot .cp-foot { font-size: 11.5px; color: var(--muted-2, #9A938A); }
#cpRoot .cp-rq-td { display: none; }   /* 最近成交日期: 桌面在「最近成交价」小字里, 这格只给手机第二行用 */
#custPriceLink[hidden] { display: none; }
/* 客户 360 页签(页面关联第 1 期 2026-10-16): 页签条 + 时间线 + 订单; 非成交价页签时工具条 / 系列芯片 / 口径脚注用 hidden 收起 */
#cpRoot .cp-bar[hidden], #cpRoot .cp-chips[hidden], #cpRoot .cp-foot[hidden] { display: none; }
#cpRoot .cp-p360 { margin-right: 8px; }
#cpRoot .c36-kinds { align-items: center; margin-bottom: 10px; }
#cpRoot .c36-cnt { font-size: 12px; color: var(--muted-2, #9A938A); margin-left: 4px; }
#cpRoot .c36-tl { background: var(--surface, #fff); border: 1px solid var(--line, #E4DFD8); border-radius: 10px; padding: 4px 14px 10px; }
#cpRoot .c36-day { margin: 10px 0 2px; font-size: 12.5px; font-weight: 700; color: var(--muted, #7A736B); }
#cpRoot .c36-ev { display: grid; grid-template-columns: 74px 150px minmax(0, 1fr) auto; grid-template-areas: "k no note amt"; align-items: baseline; column-gap: 10px; padding: 4px 0 4px 12px; border-left: 2px solid color-mix(in srgb, var(--k) 25%, transparent); font-size: 13px; }
#cpRoot .c36-k { grid-area: k; color: var(--k); font-weight: 600; white-space: nowrap; }
#cpRoot .c36-no { grid-area: no; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
#cpRoot .c36-note { grid-area: note; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted, #7A736B); }
#cpRoot .c36-amt { grid-area: amt; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 768px) {
  /* 精简版(10-16 画板 D2): 一款两行、统计一行、工具条横滑、明细一笔一行; 行内布局用 flex 换行 + order, 第二行由 tr::after 断行 */
  #cpRoot { display: block; padding: 10px 12px calc(64px + 78px); }   /* 底栏 + 主站底部页签 .mobile-tabs(58px, 离底 10px) 都要让位 */
  #cpMain { gap: 6px; }
  /* 列表页 / 详情页二选一(第 3 期): #cpRoot.cp-list = 只出客户栏; 否则只出主区, 左上「← 客户列表」回去 */
  #cpRoot.cp-list { padding-bottom: 90px; }
  #cpRoot.cp-list #cpMain, #cpRoot:not(.cp-list) #cpRail { display: none; }
  #cpRail { width: auto; max-height: none; padding: 0; border: 0; background: none; gap: 6px; }
  #cpRail .cr-fold { display: none; }
  #cpRail .cr-segs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #cpRail .cr-list { margin: 0; padding: 0; overflow: visible; border: 1px solid var(--line, #E4DFD8); border-radius: 10px; background: var(--surface, #fff); }
  #cpRoot .cp-tolist { display: inline-flex; align-items: center; align-self: flex-start; }
  #cpRoot .cp-head { gap: 4px; }
  #cpRoot .cp-name { font-size: 15px; line-height: 20px; }
  #cpRoot .cp-meta { margin-top: 0; font-size: 11.5px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #cpRoot #cpWho { min-width: 0; max-width: 100%; }
  #cpRoot .cp-acts { display: none; }   /* 手机动作全在底栏; 原「换客户」框撤了(第 3 期改走列表页) */

  #cpRoot .cp-stats { display: flex; gap: 10px; overflow-x: auto; font-size: 11px; line-height: 16px; white-space: nowrap; }
  #cpRoot .cp-stat { flex: none; flex-direction: row; align-items: baseline; gap: 3px; height: auto; padding: 0; background: none; border: 0; border-radius: 0; }
  #cpRoot .cp-stat-l { display: none; }
  #cpRoot .cp-stat::before { content: attr(data-s); font-size: 11px; color: var(--muted, #7A736B); }
  #cpRoot .cp-stat-n { font-size: 12px; font-weight: 700; color: var(--ink, #25211D); }

  #cpRoot .cp-bar, #cpRoot .cp-chips { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  #cpRoot #cpKw { flex: 1 1 0; }

  #cpRoot .cp-scroll { overflow: hidden; }
  #cpRoot .cp-table thead, #cpRoot .cp-dtable thead { display: none; }
  #cpRoot .cp-table, #cpRoot .cp-table tbody, #cpRoot .cp-table tr, #cpRoot .cp-table td { display: block; width: auto; }
  #cpRoot .cp-table tr.cp-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; padding: 7px 12px; border-bottom: 1px solid var(--line-soft, #F1EDE7); background: var(--surface, #fff); }
  #cpRoot .cp-row::after { content: ""; order: 4; flex: 0 0 100%; height: 0; }
  #cpRoot .cp-row td, #cpRoot .cp-row:is(:hover, :focus, .open) td { padding: 0; border: 0; background: transparent; white-space: nowrap; text-align: right; font-size: 11.5px; line-height: 16px; color: var(--muted-2, #9A938A); }
  #cpRoot .cp-row:hover, #cpRoot .cp-row:focus { background: var(--soft, #F3F1EE); }
  #cpRoot .cp-row.open { background: var(--primary-50, #FEF3E5); }
  #cpRoot .cp-row .cp-sub { display: none; }
  #cpRoot .cp-row td[data-label="上次"], #cpRoot .cp-row td[data-label="走势"] { display: none; }
  #cpRoot .cp-row td[data-label="货号"] { order: 1; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; font-size: 13.5px; line-height: 20px; color: var(--ink, #25211D); }
  #cpRoot .cp-row td[data-label="最近成交价"] { order: 2; line-height: 20px; }
  #cpRoot .cp-last { font-size: 15px; }
  #cpRoot .cp-row td[data-label="涨跌"] { order: 3; line-height: 20px; }
  #cpRoot .cp-row .cp-chg { font-size: 10.5px; }
  #cpRoot .cp-row td[data-label="名称"] { order: 5; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  #cpRoot .cp-row .cp-mc { display: none; }
  #cpRoot .cp-row td[data-label="名称"] .cp-sub { display: inline; margin: 0; font-size: inherit; }
  #cpRoot .cp-row td[data-label="单位"] { order: 6; margin-right: 6px; }
  #cpRoot .cp-row td.cp-rq-td { display: block; order: 7; }
  #cpRoot .cp-row td[data-label="次数"] { order: 8; }
  #cpRoot .cp-row td[data-label="区间"] { order: 9; }
  #cpRoot .cp-row td.cp-rq-td::after { content: " ·"; }
  #cpRoot .cp-row td[data-label="次数"]::after { content: " 次 ·"; }

  #cpRoot .cp-drow > td { border-bottom: 1px solid var(--line-soft, #F1EDE7); }
  #cpRoot .cp-detail { padding: 8px 12px 10px; }
  #cpRoot .cp-detail-t { font-size: 11.5px; margin-bottom: 6px; }
  #cpRoot .cp-dtable, #cpRoot .cp-dtable tbody { display: block; }
  #cpRoot .cp-dtable tr { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; column-gap: 8px; border-bottom: 1px solid var(--line-soft, #F1EDE7); }
  #cpRoot .cp-dtable tr.cp-gray { background: var(--soft, #F3F1EE); }
  #cpRoot .cp-dtable td { display: block; padding: 4px 0; border: 0; font-size: 11.5px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #cpRoot .cp-dtable tr.cp-gray td { background: transparent; }
  #cpRoot .cp-dtable td:is([data-label="来源"], [data-label="单位"], [data-label="金额"], [data-label="状态"], [data-label="备注"]) { display: none; }
  #cpRoot .cp-all { margin-top: 8px; }

  body.rail-off #cpRoot { padding-bottom: 64px; }
  body.rail-off #cpRoot.cp-list { padding-bottom: 12px; }   /* 无侧栏角色没有底部页签(styles.css body.rail-off .mobile-tabs) */
  body.rail-off #cpRoot .cp-mbar { bottom: 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }

  #cpRoot .c36-tl { padding: 2px 10px 8px; }
  #cpRoot .c36-ev { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k no amt" "note note note"; row-gap: 1px; padding: 3px 0 3px 8px; font-size: 12.5px; }
  #cpRoot .c36-note { font-size: 11.5px; line-height: 16px; }
  #cpRoot .c36-otable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line-soft, #F1EDE7); }
  #cpRoot .c36-otable td { padding: 0; border: 0; font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #cpRoot .c36-otable td:is([data-label="已交"], [data-label="单价"], [data-label="备注"]) { display: none; }
  #cpRoot .c36-otable .cp-sub { display: none; }
}

@media print {
  body.cp-printing * { visibility: hidden; }
  body.cp-printing #cpRoot, body.cp-printing #cpRoot * { visibility: visible; }
  body.cp-printing #cpRoot { position: absolute; left: 0; top: 0; width: 100%; padding: 0; display: block; }
  body.cp-printing #cpRoot .cp-noprint, body.cp-printing #cpRoot .cp-acts, body.cp-printing #cpRoot .cp-mbar { display: none !important; }   /* 含 #cpRail(客户栏不打, 只打主区) */
  body.cp-printing #cpRoot .cp-scroll { overflow: visible; border: 0; }
  body.cp-printing #cpRoot .cp-table th, body.cp-printing #cpRoot .cp-table td { padding: 4px 6px; font-size: 11px; }
  body.cp-printing #cpRoot .cp-row:hover td, body.cp-printing #cpRoot .cp-row.open td { background: transparent; }
}