/* 库存 · 备货建议 · 出货统计。颜色只用 tokens.css 变量（UI 门禁）。口径文字由后端给（app/tongtool_stock.py / stock_plan.py / stock_ship.py RULES）。 */
[hidden] { display: none !important; }
body { background: var(--canvas); color: var(--text-primary); margin: 0; }
.st-app { margin: 0 auto; padding: 20px 16px 48px; max-width: 1400px; display: flex; flex-direction: column; gap: 12px; }
.st-head h1 { margin: 0 0 4px; font-size: 22px; }
.st-head p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.st-empty { color: var(--text-muted); padding: 24px; text-align: center; }
.st-view { display: flex; flex-direction: column; gap: 12px; }

/* 三个标签：库存 / 备货建议 / 出货统计 */
.st-views { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.st-views button { border: 0; background: none; font: inherit; font-size: 14px; color: var(--text-secondary); padding: 8px 14px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.st-views button:hover { color: var(--text-primary); }
.st-views button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.st-views .n { margin-left: 6px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 0 7px; background: var(--danger-bg); color: var(--danger-fg); }
.st-views .n:empty { display: none; }
/* 2026-10-01 吸顶条里的小切换（上面那排滚出去才出，stock.js miniSync；同到货看板 av-mini） */
.st-mini { flex: 0 0 auto; display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-full); overflow: hidden; background: var(--surface); }
.st-mini button { border: 0; background: none; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.st-mini button + button { border-left: 1px solid var(--border-strong); }
.st-mini button.on { background: var(--accent); color: var(--text-on-accent); }
.st-mini button:hover:not(.on) { background: var(--surface-hover); }
/* 出货统计：小切换 + 跳段标签一条吸顶；标签条自己的底线、内边距收掉，画在整条上 */
.sh-ctx { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0;
  background: var(--canvas); border-bottom: 1px solid var(--border); }
.st-app .sh-ctx .sq-sectabs { flex: 1 1 360px; min-width: 0; padding: 0; border-bottom: 0; }
/* 10-24 各仓库存顶上同一种吸顶条；10-26 右边从跳段改成切换（各仓明细 · 已下单、还没到货 · 库存走势，一次只出一块，stock.js setPart）。
   看不到走势的人只剩「各仓明细」一块，整条不出，筛选条照旧贴顶 */
.st-ctx:not(:has(.st-parts > button:not([data-part="table"]):not([hidden]))) { display: none; }
.st-parts { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.st-parts button { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-secondary); padding: 6px 14px;
  border-radius: var(--radius-full); cursor: pointer; white-space: nowrap; }
.st-parts button:hover:not(.on) { background: var(--surface-hover); color: var(--text-primary); }
.st-parts button.on { background: var(--accent); color: var(--text-on-accent); }
.st-parts .n { margin-left: 6px; font-size: 12px; border-radius: 999px; padding: 0 7px; background: var(--danger-bg); color: var(--danger-fg); }
.st-parts .n.mut { background: var(--surface-sunken); color: var(--text-muted); }
.st-parts button.on .n { background: var(--surface); color: var(--accent); }
.st-parts .n:empty { display: none; }
#v-stock[data-part="table"] > [data-part]:not([data-part="table"]),
#v-stock[data-part="onway"] > [data-part]:not([data-part="onway"]),
#v-stock[data-part="trend"] > [data-part]:not([data-part="trend"]) { display: none; }

/* 10-26 Edmond「第一个是总库存，第二个是各个仓需要处理的风险，第三个是已下单还没到货的……第一屏把重要的先显示出来」：各仓库存顶上三张卡 */
.ss-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.2fr); gap: 12px; align-items: stretch; }
.ss-c { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; }
.st-card.ss-c h2 { margin: 0; flex-wrap: wrap; row-gap: 2px; }
.ss-sub { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.ss-big { font-size: 28px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.ss-big small { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.ss-line { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.ss-line .mut { font-size: 12px; }
.ss-line .st-link { font-size: 13px; }
.ss-cmp { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--text-secondary); }
.ss-cmp b.up { color: var(--warning-fg); }
.ss-cmp b.down { color: var(--success-fg); }
.ss-spark { display: block; width: 100%; height: auto; max-height: 64px; margin-top: 2px; }
.ss-sp-l { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; }
.ss-sp-a { fill: color-mix(in srgb, var(--chart-1) 12%, transparent); stroke: none; }
.ss-sp-d { fill: var(--chart-1); }
.ss-sp-top { fill: var(--warning-fg); }
.ss-sp-k { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--text-muted); }
.ss-go { margin-top: auto; align-self: flex-start; font-size: 13px; padding-top: 4px; }
.ss-foot { margin: 0; font-size: 12px; }
/* ② 各仓要处理的：一个仓一行，点数字下面「各仓明细」筛好这个仓、这一类 */
.ss-wh { width: 100%; border-collapse: collapse; font-size: 13px; }
.ss-wh th { font-size: 12px; font-weight: 500; color: var(--text-muted); text-align: center; padding: 0 4px 4px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ss-wh td { text-align: center; padding: 2px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ss-wh th.l, .ss-wh td.l { text-align: left; }
.ss-wh tr.on td { background: var(--accent-soft-bg); }
.ss-n { border: 0; background: none; font: inherit; color: var(--text-primary); cursor: pointer; padding: 3px 6px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 2px 4px; flex-wrap: wrap; text-align: left; }
.ss-n:hover { background: var(--surface-hover); }
.ss-n.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ss-n.wh { flex-direction: column; align-items: flex-start; gap: 0; }
.ss-n small { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ss-n .sw { margin-right: 0; }
.ss-n b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ss-n.wh b { font-size: 13px; max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-n.bad b { color: var(--danger-fg); }
.ss-n.warn b { color: var(--warning-fg); }
.ss-quiet { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.7; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.ss-quiet .st-link { color: var(--text-secondary); }
/* ③ 已下单、还没到货：一条按到货情况分段的横条（按钱，看不到钱的按件）+ 要催的前三张 */
.ss-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--chart-grid); }
.ss-bar i { display: block; height: 100%; }
.ss-bar i + i { box-shadow: inset 2px 0 0 var(--surface); }
.ss-bar .bad, .ss-leg i.bad { background: var(--danger-fg); }
.ss-bar .warn, .ss-leg i.warn { background: var(--amber); }
.ss-bar .info, .ss-leg i.info { background: var(--chart-1); }
.ss-bar .ok, .ss-leg i.ok { background: var(--success-fg); }
.ss-bar .mut, .ss-leg i.mut { background: var(--border-strong); }
.ss-leg { display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 12px; color: var(--text-secondary); }
.ss-leg span { white-space: nowrap; }
.ss-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.ss-lab { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
.ss-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ss-list button { width: 100%; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text-primary); display: flex; align-items: center; gap: 8px;
  padding: 3px 4px; border-radius: 6px; cursor: pointer; text-align: left; }
.ss-list button:hover { background: var(--surface-hover); }
.ss-g { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-list b { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 「已下单、还没到货」自己一块（原来是走势卡下面的折叠） */
.ow-card h2 { flex-wrap: wrap; }
.ow-h { font-weight: 400; font-size: 13px; color: var(--text-secondary); margin-left: 6px; }
.ow-sub { margin: 0 0 4px; font-size: 12px; }
@media (max-width: 1080px) { .ss-sum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #ss-onway { grid-column: 1 / -1; } }
@media (max-width: 640px) { .ss-sum { grid-template-columns: minmax(0, 1fr); gap: 8px; } .ss-big { font-size: 24px; } .st-parts button { padding: 5px 10px; font-size: 13px; } }

.st-wh { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.st-whc { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; text-align: left;
  font: inherit; color: inherit; display: flex; flex-direction: column; gap: 2px; }
.st-whc:hover { background: var(--surface-hover); }
.st-whc.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.st-whc .n { font-size: 13px; color: var(--text-secondary); }
.st-whc .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* 全部仓库合计（2026-10-02）：绿边和别的仓分开；升标琥珀（压的钱多了）、降标绿 */
.st-whc.st-total { border-color: var(--accent); background: var(--accent-soft-bg); }
.st-whc.st-total .s b { font-weight: 600; }
.st-whc.st-total .s b.up { color: var(--warning-fg); }
.st-whc.st-total .s b.down { color: var(--success-fg); }
.st-whc .v.bad { color: var(--danger-fg); } .st-whc .v.warn { color: var(--warning-fg); } .st-whc .v.ok { color: var(--success-fg); }
.st-whc .s { font-size: 12px; color: var(--text-muted); }
.st-whc .lead { margin-top: 4px; font-size: 12px; color: var(--text-secondary); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.st-whc .lead input { width: 56px; height: 24px; font: inherit; font-size: 13px; border: 1px solid var(--border-control); border-radius: 6px; padding: 0 4px; }
.st-link { border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }

.st-bar { position: sticky; top: 0; z-index: 5; background: var(--canvas); padding: 8px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sh-bar { position: static; }
.st-bar input, .st-bar select { height: var(--ctl-h); border: 1px solid var(--border-control); border-radius: var(--control-radius);
  background: var(--surface); color: var(--text-primary); font: inherit; font-size: 13px; padding: 0 8px; }
.st-bar input { min-width: 220px; }
.st-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.st-chips button { border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); border-radius: 999px;
  padding: 4px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.st-chips button.on { background: var(--accent-soft-bg); color: var(--accent-soft-fg); border-color: var(--accent-soft-border); }
.st-chips button small { color: var(--text-muted); font-size: 11px; margin-left: 4px; }
/* 10-26 Edmond「这几个你帮我明确标识一下或者那个字体颜色不一样」：标签按钮一个标签一个颜色（要补货 / 有次品 橙、可能变坏账 红、压货 蓝），选中整颗填满 */
.st-chips button.t-bad { color: var(--danger-fg); } .st-chips button.t-warn { color: var(--warning-fg); } .st-chips button.t-info { color: var(--info-fg); }
.st-chips button.on.t-bad { background: var(--danger-fg); border-color: var(--danger-fg); color: var(--text-on-accent); font-weight: 600; }
.st-chips button.on.t-warn { background: var(--warning-fg); border-color: var(--warning-fg); color: var(--text-on-accent); font-weight: 600; }
.st-chips button.on.t-info { background: var(--info-fg); border-color: var(--info-fg); color: var(--text-on-accent); font-weight: 600; }
.st-sync { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.st-fresh { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--text-muted); font-size: 12px; }
.st-btn { border: 1px solid var(--border-control); background: var(--surface); color: var(--text-secondary); border-radius: 8px; padding: 3px 10px;
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.st-btn:hover { background: var(--surface-hover); }
.st-btn[disabled] { opacity: .6; cursor: progress; }

.st-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.st-card h2 { margin: 2px 0 8px; font-size: 15px; display: flex; align-items: center; gap: 4px; }
.st-scroll { overflow-x: auto; }
.st-scroll.fits { overflow: visible; }
.st-scroll.boxed { max-height: calc(100vh - 120px); overflow: auto; }
.st-table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.st-table th, .st-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); text-align: right; white-space: nowrap; vertical-align: top; }
.st-table th:first-child, .st-table td:first-child { text-align: left; }
.st-table th { color: var(--text-secondary); font-weight: 500; font-size: 12px; position: sticky; top: 0; z-index: 2; background: var(--surface); }
.st-table td.l, .st-table th.l { text-align: left; }
.st-table td.l { white-space: normal; min-width: 200px; max-width: 300px; }
.st-table tbody tr[data-sku] { cursor: pointer; }
.st-table tbody tr[data-sku]:hover td { background: var(--surface-hover); }
.st-table tbody tr.cur td { background: var(--accent-soft-bg); }
.st-prod { display: flex; gap: 8px; align-items: flex-start; }
.st-prod img, .st-prod .ph { width: 36px; height: 36px; border-radius: 6px; object-fit: contain; flex: none; background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); }
.st-prod small { display: block; color: var(--text-muted); }
.st-prod .nm { font-weight: 500; }
.st-tag { display: inline-block; font-size: 11px; border-radius: 6px; padding: 0 6px; margin-left: 4px; border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; }
.st-tag.bad { color: var(--danger-fg); border-color: var(--danger-fg); }
.st-tag.warn { color: var(--warning-fg); border-color: var(--warning-fg); }
.st-tag.info { color: var(--text-muted); }
.st-how { display: inline-block; font-size: 11px; border-radius: 6px; padding: 0 6px; margin-left: 4px; background: var(--surface-sunken); color: var(--text-secondary); white-space: nowrap; }
.st-how.weak { background: none; border: 1px dashed var(--border-strong); color: var(--text-muted); }
.st-how.none { background: none; border: 1px dashed var(--warning-fg); color: var(--warning-fg); }
/* 10-26 谁卖得多：一行写不下的「…」，悬停看全部 */
.st-table td.st-who { text-align: left; }
.st-who-in { display: inline-block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; font-size: 12px; }
.st-who-in b { font-weight: 600; }
.st-whs { font-size: 12px; color: var(--text-muted); white-space: normal; text-align: left !important; min-width: 140px; max-width: 260px; }
.down { color: var(--danger-fg); } .mut { color: var(--text-muted); } .up { color: var(--success-fg); }
.st-note { margin: 8px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.7; }

/* 备货建议 */
.pl-st { display: inline-block; min-width: 52px; text-align: center; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 1px 6px; }
.pl-st.bad { background: var(--danger-bg); color: var(--danger-fg); }
.pl-st.warn { background: var(--warning-bg); color: var(--warning-fg); }
.pl-st.info { background: var(--surface-sunken); color: var(--text-secondary); }
.pl-st.ok { background: var(--success-bg); color: var(--success-fg); }
.pl-new { display: inline-block; margin-left: 4px; font-size: 10px; color: var(--danger-fg); border: 1px solid var(--danger-fg); border-radius: 4px; padding: 0 3px; }
.pl-table td.why { white-space: normal; text-align: left; min-width: 220px; max-width: 340px; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.pl-table td.why .r { color: var(--text-primary); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-table td.l { min-width: 0; }
.pl-table td.l .st-prod { min-width: 190px; max-width: 250px; }
.pl-table td.why .nt { color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-table td.act { text-align: left; }
.pl-table td.ob { white-space: nowrap; }
.pl-push .pl-daily { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.pl-table td.act b { color: var(--text-primary); }
.pl-table td.act .tr { color: var(--info-fg); font-size: 12px; }
.pl-table td.wh { text-align: left; color: var(--text-secondary); font-size: 12px; max-width: 84px; overflow: hidden; text-overflow: ellipsis; }

/* 出货统计 */
.sh-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sh-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.sh-kpi .k { font-size: 12px; color: var(--text-secondary); }
.sh-kpi .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-kpi .s { font-size: 12px; color: var(--text-muted); }
.sh-sec { scroll-margin-top: 52px; }
.sh-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin: 0 0 6px; }
.sh-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.sh-c1 { fill: var(--chart-1); background: var(--chart-1); }
.sh-c2 { fill: var(--chart-2); background: var(--chart-2); }
.sh-c3 { fill: var(--chart-8); background: var(--chart-8); }
.sh-svg { display: block; width: 100%; height: 220px; }
.sh-svg .seg { stroke: var(--surface); stroke-width: 1; }
.sh-svg .grid { stroke: var(--chart-grid); stroke-width: 1; }
.sh-svg .axis { stroke: var(--chart-axis); stroke-width: 1; }
.sh-svg text { fill: var(--text-muted); font-size: 11px; font-family: var(--font-sans); }
.sh-svg .hit { fill: transparent; cursor: default; }
.sh-svg .hit:hover { fill: var(--chart-grid); opacity: .5; }
.sh-tip { position: fixed; z-index: 30; pointer-events: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: var(--shadow-2); padding: 6px 10px; font-size: 12px; color: var(--text-primary); line-height: 1.6; white-space: nowrap; }
.sh-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.sh-bl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 8px; }
.sh-bl > div { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 6px 10px; font-size: 12px; color: var(--text-secondary); }
.sh-bl b { display: block; font-size: 16px; color: var(--text-primary); }
.sh-sub { margin: 10px 0 4px; font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.sh-chipline { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.sh-chipline span { border: 1px solid var(--border-subtle); border-radius: 6px; padding: 1px 6px; color: var(--text-secondary); cursor: pointer; }
.sh-chipline span:hover { background: var(--surface-hover); }

/* 右侧详情 */
.st-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); z-index: 20; background: var(--surface);
  border-left: 1px solid var(--border-strong); box-shadow: var(--shadow-3); overflow-y: auto; }
.st-panel-top { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.sp-hd { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.sp-hd img, .sp-hd .ph { width: 64px; height: 64px; border-radius: 8px; object-fit: contain; flex: none; background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
.sp-hd b { display: block; font-size: 15px; color: var(--text-primary); line-height: 1.4; }
.sp-hd small { display: block; color: var(--text-muted); font-size: 12px; word-break: break-all; }
.st-x { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 4px; }
.st-x:hover { color: var(--text-primary); }
.st-panel-body { padding: 12px 14px 24px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.st-panel-body h3 { margin: 16px 0 6px; font-size: 13px; color: var(--text-muted); font-weight: 600; }
.sp-box { border-radius: 10px; padding: 8px 12px; background: var(--surface-sunken); border-left: 4px solid var(--border-strong); margin-bottom: 6px; }
.sp-box.bad { background: var(--danger-bg); border-left-color: var(--danger-fg); }
.sp-box.warn { background: var(--warning-bg); border-left-color: var(--warning-fg); }
.sp-box.info { background: var(--info-bg); border-left-color: var(--info-fg); }
.sp-box b { color: var(--text-primary); }
.sp-box ul { margin: 4px 0 0; padding-left: 18px; }
.sp-links { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-links a { border: 1px solid var(--border-control); border-radius: 8px; padding: 3px 10px; font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.sp-links a:hover { background: var(--surface-hover); }
.sp-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 12px; }
.sp-facts dt { color: var(--text-muted); } .sp-facts dd { margin: 0; color: var(--text-primary); }
.sp-mini-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
.sp-t { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.sp-t th, .sp-t td { padding: 3px 6px; border-bottom: 1px solid var(--border-subtle); text-align: right; white-space: nowrap; }
.sp-t th:first-child, .sp-t td:first-child { text-align: left; white-space: normal; }
.sp-t th { color: var(--text-muted); font-weight: 500; }
.sp-t tr.me td { font-weight: 600; color: var(--text-primary); }
.sp-hot { border: 1px solid var(--warning-border); background: var(--warning-bg); border-radius: 10px; padding: 8px 12px; }
.sp-hot b { color: var(--warning-fg); }

/* 单品面板「卖得怎么样 · 出货进货月历 · 最近动静」（10-12 老板：上下别重叠、月历出货绿进货红、单店还是多店）。
   颜色只用 tokens.css；月历深浅 4 档 = 同一个图表色按比例 color-mix 到底色。手机 375px 宽不横向溢出（网格都是 minmax(0, …)）。 */
.st-panel-body h3 .sqv-ico { vertical-align: -2px; margin-right: 2px; }
.sp-sub { margin: 10px 0 4px; font-size: 12px; color: var(--text-muted); }
.sp-spread { display: flex; gap: 8px; align-items: flex-start; border-radius: 10px; padding: 8px 12px; margin-bottom: 4px;
  background: var(--surface-sunken); border-left: 4px solid var(--border-strong); color: var(--text-secondary); }
.sp-spread > .sqv-ico { margin-top: 3px; color: var(--text-muted); }
.sp-spread b { color: var(--text-primary); margin-right: 6px; }
.sp-spread.bad { background: var(--danger-bg); border-left-color: var(--danger-fg); }
.sp-spread.bad > .sqv-ico, .sp-spread.bad b { color: var(--danger-fg); }
.sp-spread.warn { background: var(--warning-bg); border-left-color: var(--warning-fg); }
.sp-spread.warn > .sqv-ico, .sp-spread.warn b { color: var(--warning-fg); }
.sp-spread.good { background: var(--success-bg); border-left-color: var(--success-fg); }
.sp-spread.good > .sqv-ico, .sp-spread.good b { color: var(--success-fg); }
.sp-spread small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }   /* 按什么算的（款 / 这件货） */
.sp-cs { display: flex; gap: 6px; align-items: flex-start; margin: 2px 0; font-size: 12px; color: var(--text-secondary); }
.sp-cs > .sqv-ico { margin-top: 3px; color: var(--text-muted); }
.sp-cs.mut { color: var(--text-muted); }   /* 顶上判的是款时，下面那行「这个货号自己几个店」 */
/* 谁在卖：店名 · 横条 · 件数和占比 */
.sp-who { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(48px, 1fr) max-content; gap: 6px 8px; align-items: center; font-size: 12px; }
.sp-who .l { display: flex; gap: 6px; align-items: center; min-width: 0; }
.sp-who .l > i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.sp-who .l > span { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.sp-who .l b, .sp-who .l small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-who .l b { color: var(--text-primary); font-weight: 600; }
.sp-who .l small { color: var(--text-muted); font-size: 12px; }
.sp-who .t { display: block; height: 12px; background: var(--chart-grid); border-radius: 0 4px 4px 0; cursor: default; }
.sp-who .f { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; }
.sp-who .v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-secondary); }
/* 近 26 周每周件数，按店堆叠（最新在左） */
.sp-wk { display: flex; align-items: stretch; gap: 2px; height: 72px; margin: 4px 0 2px; border-bottom: 1px solid var(--chart-axis); }
.sp-wk .c { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; border-radius: 2px 2px 0 0; cursor: default; }
.sp-wk .c:hover { background: var(--surface-hover); }
.sp-wk .b { width: 100%; display: flex; flex-direction: column-reverse; border-radius: 2px 2px 0 0; overflow: hidden; }
.sp-wk .b > i { display: block; flex: 1 1 0; min-height: 1px; }
.sp-wk .b > i + i { border-bottom: 1px solid var(--surface); }
.sp-wk .b.z { height: 2px; background: var(--chart-grid); }
.sp-wk + .sp-mini-x + .sqv-legend { margin: 4px 0 10px; }
/* 出货进货月历 */
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; margin: 16px 0 6px; }
.st-panel-body .sp-row h3 { margin: 0; }
.sp-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-full); overflow: hidden; background: var(--surface); }
.sp-seg button { border: 0; background: none; padding: 2px 10px; font: inherit; font-size: 12px; line-height: 20px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.sp-seg button + button { border-left: 1px solid var(--border-strong); }
.sp-seg button.on { background: var(--accent); color: var(--text-on-accent); font-weight: 600; }
.sp-seg button:hover:not(.on) { background: var(--surface-hover); }
.sp-seg button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.sp-cals { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px 12px; }
.sp-cals.one { grid-template-columns: minmax(0, 300px); }
.sp-cal { min-width: 0; }
.sp-cal-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.sp-cal-h b { color: var(--text-primary); font-size: 13px; white-space: nowrap; }
.sp-cal-h small { color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.sp-cal-g .w { text-align: center; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.sp-cal-g .d { position: relative; display: flex; aspect-ratio: 1 / 1; min-width: 0; border-radius: 3px; overflow: hidden; background: var(--surface-sunken); cursor: default; }
.sp-cal-g .d > i { display: block; flex: 1 1 0; }
.sp-cal-g .d > b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 400;
  line-height: 1; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sp-cal-g .d.dk > b { color: var(--text-on-accent); }
.sp-cal-g .d.e { background: none; }
.sp-cal-g .d.fu { background: none; box-shadow: inset 0 0 0 1px var(--border-subtle); }
.sp-cal-g .d.na { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.sp-cal-g .d.fu > b, .sp-cal-g .d.na > b { color: var(--text-disabled); }
.sp-cal-g .d.now::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--text-primary); border-radius: 3px; }
.sp-cal-g .d:hover::before { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid var(--text-muted); border-radius: 3px; }
/* 深浅 4 档：出货 = 图表正色（绿），进货 = 图表负色（红） */
.sp-cal-g .o1, .sp-cal-lg .o1 { background: color-mix(in srgb, var(--chart-positive) 32%, var(--surface)); }
.sp-cal-g .o2, .sp-cal-lg .o2 { background: color-mix(in srgb, var(--chart-positive) 55%, var(--surface)); }
.sp-cal-g .o3, .sp-cal-lg .o3 { background: color-mix(in srgb, var(--chart-positive) 78%, var(--surface)); }
.sp-cal-g .o4, .sp-cal-lg .o4 { background: var(--chart-positive); }
.sp-cal-g .n1, .sp-cal-lg .n1 { background: color-mix(in srgb, var(--chart-negative) 32%, var(--surface)); }
.sp-cal-g .n2, .sp-cal-lg .n2 { background: color-mix(in srgb, var(--chart-negative) 55%, var(--surface)); }
.sp-cal-g .n3, .sp-cal-lg .n3 { background: color-mix(in srgb, var(--chart-negative) 78%, var(--surface)); }
.sp-cal-g .n4, .sp-cal-lg .n4 { background: var(--chart-negative); }
.sp-cal-lg { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--text-secondary); }
.sp-cals + .sp-cal-lg { margin-top: 8px; }
.sp-cal-lg > span { display: inline-flex; align-items: center; white-space: nowrap; }
.sp-cal-k { color: var(--text-muted); }
.sp-sw { display: inline-block; flex: none; width: 12px; height: 12px; margin-right: 4px; border-radius: 3px; background: var(--surface-sunken); }
.sp-sw.both { display: inline-flex; overflow: hidden; }
.sp-sw.both > i { display: block; flex: 1 1 0; }
.sp-sw.na { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.sp-sw.now { box-shadow: inset 0 0 0 2px var(--text-primary); }
.sp-note { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
/* 最近动静：出货绿标、进货红标、调拨 / 盘点灰标 */
.sp-tl { list-style: none; margin: 0; padding: 0; }
.sp-tl-i { display: grid; grid-template-columns: 44px max-content minmax(0, 1fr); gap: 2px 8px; align-items: start; padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle); font-size: 12px; line-height: 1.45; }
.sp-tl-d { display: flex; flex-direction: column; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-tl-d small { color: var(--text-muted); font-size: 12px; }
.sp-tl-k { border-radius: var(--radius-sm); padding: 0 6px; line-height: 20px; white-space: nowrap; font-weight: 600;
  border: 1px solid var(--neutral-border); background: var(--neutral-bg); color: var(--neutral-fg); }
.sp-tl-i.out .sp-tl-k { border-color: var(--success-border); background: var(--success-bg); color: var(--success-fg); }
.sp-tl-i.in .sp-tl-k { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-fg); }
.sp-tl-m { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-tl-1 { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; color: var(--text-secondary); }
.sp-tl-1 b { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.sp-tl-1 .sqv-pill { height: 20px; padding: 0 7px; font-size: 12px; }
.sp-tl-s { color: var(--text-muted); }
.sp-tl-2 { color: var(--text-muted); overflow-wrap: anywhere; }
.sp-tl-ref { font-family: var(--font-mono); word-break: break-all; }
@media (min-width: 1750px) { body.panel-open { padding-right: 480px; } }

@media (max-width: 640px) {
  .st-wh { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .st-whc { padding: 8px 10px; }
  .st-whc .v { font-size: 17px; }
  .sh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-bar input { min-width: 0; flex: 1; font-size: 16px; }
  .st-bar select { font-size: 16px; }
  .st-views button { padding: 8px 10px; }
  .st-sync { margin-left: 0; }
}

/* 每天推飞书群（只有管理员看得到） */
.pl-push select { font: inherit; font-size: 12px; padding: 2px 6px; border: 1px solid var(--border-control); border-radius: 8px; background: var(--surface); color: var(--text-secondary); max-width: 220px; }
.pl-push details { flex-basis: 100%; }
.pl-push summary { cursor: pointer; color: var(--accent); }
/* 预览里每条第一行下面的产品小图（飞书里也是这样，200px 方图；页面上小一点） */
.pl-push .st-pv-img { display: block; width: 96px; height: 96px; object-fit: contain; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; margin: 4px 0 2px 18px; }
.pl-push pre { white-space: pre-wrap; font: inherit; font-size: 12px; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 6px 0 0; max-height: 360px; overflow: auto; }

/* B2B 出库建议（stock-b2b.js，2026-10-02） */
.b2-group { margin: 10px 0; padding: 10px 12px; }
.b2-gh { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.b2-gh b { color: var(--text-primary, var(--ink)); }
.b2-line { display: flex; gap: 10px; padding: 8px 6px; border-top: 1px solid var(--border); border-left: 3px solid transparent; }
.b2-line.warn { border-left-color: var(--warning-fg); background: var(--warning-bg); }
.b2-line.bad { border-left-color: var(--danger-fg); background: var(--danger-bg); }
.b2-line.mut { opacity: .75; }
.b2-line > img, .b2-line > .ph { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px; object-fit: contain; border: 1px solid var(--border); background: var(--surface); }
.b2-main { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.55; }
.b2-h b { margin: 0 4px; }
.b2-w, .b2-why { font-size: 12px; color: var(--text-muted); }
.b2-s { font-size: 12.5px; }
.b2-why .dup { color: var(--warning-fg); font-weight: 600; }
.b2-warn { font-size: 12px; color: var(--warning-fg); font-weight: 600; }
.mono { font-family: var(--font-mono); }
.b2-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.b2-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 10px; border: 1px solid var(--border-control); border-radius: 8px;
  background: var(--surface); color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.b2-opt:hover { border-color: var(--accent); }
.b2-opt small { color: var(--text-muted); }
.b2-opt em { font-style: normal; color: var(--accent); font-weight: 600; }

/* 出入库流水（stock-moves.js，2026-10-02）：上面一排按类别的卡片点了就只看那一类；数量格「+2 → 7」= 变了多少 → 变完剩多少 */
.mv-kpi { font: inherit; text-align: left; cursor: pointer; color: inherit; }
.mv-kpi:hover { background: var(--surface-hover); }
.mv-kpi.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mv-table td.l { min-width: 0; max-width: 260px; }
.mv-table td.mono { white-space: nowrap; }
.mv-table td.mv-wh { color: var(--text-secondary); font-size: 12px; max-width: 120px; }
.mv-table td.mv-doc .st-tag { margin-left: 0; }
.mv-table td small { font-size: 11px; }
.mv-more { padding: 8px 0 0; text-align: center; font-size: 12px; }
.mv-recon { flex-basis: 100%; }
.mv-recon summary { cursor: pointer; }
.mv-recon .st-table { margin-top: 6px; max-width: 760px; }
/* 老板 10-22：可用从不是 0 变成 0 的那笔整行浅红 + 左边红条 + 「清零」小牌子；悬停时深一点，别被普通悬停色盖掉 */
.mv-table tbody tr.mv-zero td { background: var(--danger-bg); }
.mv-table tbody tr.mv-zero td:first-child { box-shadow: inset 3px 0 0 var(--danger-fg); }
.st-table.mv-table tbody tr.mv-zero[data-sku]:hover td { background: color-mix(in srgb, var(--danger-bg) 80%, var(--danger-fg)); }
.mv-table tbody tr.mv-zero.cur td { background: var(--accent-soft-bg); }   /* 点开右边详情的那行照旧显示选中色，左边红条留着 */
.mv-zero-tag { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; font-size: 11px; line-height: 16px; font-weight: 600;
  color: var(--text-on-accent); background: var(--danger-solid); white-space: nowrap; }
@media (max-width: 640px) {
  .st-views { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }   /* 五个标签手机上放不下：标签条自己左右滑，别把整页撑宽 */
  #v-moves .st-bar input { flex-basis: 100%; }
  #v-moves .st-bar select { flex: 1 1 0; min-width: 0; }
}

/* 采购收货对账（stock-po.js，2026-10-02）：点一张 PO 展开每一行；通途货号点了右边出详情 */
.po-table tbody tr.po-row { cursor: pointer; }
.po-table tbody tr.po-row:hover td { background: var(--surface-hover); }
.po-table tbody tr.po-row.cur td { background: var(--accent-soft-bg); }
.po-table td.l { min-width: 0; max-width: 220px; }
.po-table tr.po-detail > td { background: var(--surface-sunken); text-align: left; white-space: normal; }
.po-lines { margin: 2px 0 4px; }
.po-sku { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
#po-extra:empty { display: none; }
/* 简道云 PO 草稿 · 试跑（stock-po.js renderDrafts） */
#po-drafts:empty { display: none; }
.pd-sub { font-size: 12px; font-weight: 400; margin-left: 8px; }
.pd-sum { font-size: 13px; margin: 4px 0 8px; line-height: 1.6; }
.pd-table td.l { min-width: 0; max-width: 260px; white-space: normal; }

/* 2026-10-04 老板：可视化——标签 / 判定换成全站同一套状态牌、出货统计每段标题带图标、空表写一句大白话（shared/viz.css） */
.st-prod .sqv-pill { margin-left: 4px; height: 20px; padding: 0 7px; }
.pl-table td .sqv-pill { min-width: 52px; justify-content: center; }
.sh-sec > h2 .sqv-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 4px; border-radius: 8px;
  background: var(--accent-soft-bg); color: var(--accent); }
.st-table td.st-none { padding: 0; text-align: center; }

/* 要关注（10-04 老板：库存不用每天看，先看能多卖的、要防的）：左右两栏，每段前几条，点一行右边出详情 */
#fc-kpis .sqv-kpis { margin: 0; }
.fc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.fc-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fc-side { margin: 0; font-size: 15px; padding: 4px 10px; border-radius: 8px; }
.fc-side.good { background: var(--success-bg); color: var(--success-fg); }
.fc-side.warn { background: var(--warning-bg); color: var(--warning-fg); }
.fc-sec { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px 12px 10px; scroll-margin-top: 12px; }
.fc-sec.zero { padding-bottom: 4px; opacity: .7; }
.fc-sec .sqv-h { margin: 6px 0 2px; font-size: 15px; }
.fc-hint { margin: 0 0 6px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.fc-list { list-style: none; margin: 0; padding: 0; }
.fc-list li { display: flex; gap: 10px; align-items: center; padding: 6px 4px; border-top: 1px solid var(--border-subtle); cursor: pointer; border-radius: 6px; }
.fc-list li:hover, .fc-list li.cur { background: var(--surface-hover); }
.fc-list img, .fc-list .ph { flex: none; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--surface-sunken); }
.fc-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fc-m b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-m small { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-why { font-size: 12px; color: var(--text-secondary); }
.fc-fig { flex: none; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-sec.bad .fc-fig { color: var(--danger-fg); }
.fc-sec.good .fc-fig { color: var(--success-fg); }
.fc-sec.warn .fc-fig { color: var(--warning-fg); }
.fc-more { display: inline-block; margin-top: 6px; font-size: 12px; }
@media (max-width: 900px) { .fc-cols { grid-template-columns: minmax(0, 1fr); } }
/* 10-26 Edmond「压着的货……放在顶头那里，专门一个位置」「现在有多少件？够卖多少天？这个突出一下」：两栏上面整行一块（stock.js fcDead） */
.fc-dead { padding: 6px 14px 12px; border-left: 4px solid var(--info-fg); }
.fc-dead .sqv-h { font-size: 16px; }
.fc-dlv { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 10px; }
.fc-dbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--chart-grid); }
.fc-dbar i { display: block; height: 100%; }
.fc-dbar i + i { box-shadow: inset 2px 0 0 var(--surface); }
.fc-dbar .risk3 { background: var(--danger-fg); }
.fc-dbar .risk2 { background: color-mix(in srgb, var(--danger-fg) 45%, var(--surface)); }
.fc-dbar .risk1 { background: var(--border-strong); }
.fc-dbar .risk0 { background: var(--border); }
.fc-dleg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 13px; color: var(--text-secondary); }
.fc-dleg > span { white-space: nowrap; }
.fc-dleg .sw { margin-right: 4px; }
.fc-dead .sw.risk0 { color: var(--text-muted); border: 1px dashed var(--border); }
.fc-dleg .st-link { font-size: 12px; margin-left: auto; }
.fc-dgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.fc-dgrid li { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--surface); }
.fc-dgrid li:hover, .fc-dgrid li.cur { background: var(--surface-hover); border-color: var(--border-strong); }
.fc-dtop { display: flex; gap: 10px; align-items: center; min-width: 0; }
.fc-dtop img, .fc-dtop .ph { flex: none; width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: var(--surface-sunken); }
.fc-dtop .sw { flex: none; align-self: flex-start; margin-right: 0; }
.fc-dnum { display: flex; gap: 6px; }
.fc-dnum .k { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 2px; padding: 6px 8px; border-radius: 8px;
  background: var(--surface-sunken); font-size: 12px; color: var(--text-secondary); }
.fc-dnum .k b { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fc-dnum .k small { flex-basis: 100%; font-size: 11px; line-height: 1.4; color: var(--text-muted); }
.fc-dnum .k.bad { background: var(--danger-bg); }
.fc-dnum .k.bad b, .fc-dnum .k.bad { color: var(--danger-fg); }
.fc-dnum .k.warn { background: var(--warning-bg); }
.fc-dnum .k.warn b, .fc-dnum .k.warn { color: var(--warning-fg); }
.fc-dgrid .fc-why { color: var(--text-muted); }
@media (max-width: 640px) { .fc-dgrid { grid-template-columns: minmax(0, 1fr); } .fc-dnum .k b { font-size: 19px; } .fc-dleg .st-link { margin-left: 0; } }

/* 各仓库存的仓库卡缩小（10-04 老板嫌占地方）：名字 + 金额一行，件数小字 */
.st-wh.st-wh-sm { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.st-wh-sm .st-whc { padding: 6px 10px; border-radius: 10px; }
.st-wh-sm .st-whc .n { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-wh-sm .st-whc .v { font-size: 16px; }
.st-wh-sm .st-whc .s { font-size: 11px; line-height: 1.4; }

/* 备货建议 · 按类看（2026-10-11 老板「不要一长串……一个是图片，另一个是怎么分类」）：成品 / 消耗配件 / 售后件分段配图小卡 */
.pl-mode { margin-top: 2px; }
.pl-mode button.on { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); font-weight: 600; }
.pl-board { display: flex; flex-direction: column; gap: 12px; }
.pl-board .sqv-kpis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pl-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; border-radius: 6px; padding: 0 6px; border: 1px solid var(--border);
  color: var(--text-secondary); background: var(--surface); white-space: nowrap; }
.pl-tag.good { color: var(--success-fg); border-color: var(--success-border); background: var(--success-bg); }
.pl-tag.info { color: var(--info-fg); border-color: var(--info-border); background: var(--info-bg); }
.pl-cls { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.pl-seg { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; scroll-margin-top: 8px; }
.pl-seg > summary { list-style: none; cursor: pointer; padding: 10px 12px; display: flex; align-items: flex-start; gap: 8px; }
.pl-seg > summary::-webkit-details-marker { display: none; }
.pl-seg > summary::before { content: "▸"; color: var(--text-muted); font-size: 12px; flex: none; margin-top: 7px; }
.pl-seg[open] > summary::before { content: "▾"; }
.pl-seg > summary:hover { background: var(--surface-hover); border-radius: 12px; }
.pl-seg > summary .sqv-h { margin: 0; flex-wrap: wrap; }
.pl-segb { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.pl-hint { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
/* 2026-10-16 老板截图「再看 59 款」下面那行「催到货」：「这个能不能显眼一点呢？顶上最好有那个子类目」——
   每小块开头一条色带标题（今天要下单 红 / 催到货 黄 / 7 天内要下单 蓝），顶上吸顶标签条里段里的小类前面带「›」、字小一号 */
.pl-subsec { display: flex; flex-direction: column; gap: 8px; }
.pl-subh { margin: 10px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--border); border-left: 5px solid var(--border-strong); background: var(--surface-sunken);
  font-size: 16px; font-weight: 700; color: var(--text-primary); }
.pl-subh .n { font-size: 13px; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: var(--surface); white-space: nowrap; }
.pl-subh small { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.pl-subsec.bad .pl-subh { background: var(--danger-bg); border-color: var(--danger-border); border-left-color: var(--danger-fg); }
.pl-subsec.bad .pl-subh .n { color: var(--danger-fg); }
.pl-subsec.warn .pl-subh { background: var(--warning-bg); border-color: var(--warning-border); border-left-color: var(--warning-fg); }
.pl-subsec.warn .pl-subh .n { color: var(--warning-fg); }
.pl-subsec.info .pl-subh { background: var(--info-bg); border-color: var(--info-border); border-left-color: var(--info-fg); }
.pl-subsec.info .pl-subh .n { color: var(--info-fg); }
.pl-subsec.muted .pl-subh .n { color: var(--text-secondary); }
/* 每块开头的跳转锚点：不占地方，段抬头钉住时 stock.js fitAnchors 把它往上挪「抬头高」 */
.pl-anchor { display: block; height: 0; position: relative; pointer-events: none; }
/* 10-16 第二轮老板「滚下去的时候，你不要不见了。你上面这里还是要抬头」：展开的段往下滚，段抬头钉在子类目条下面
   （top 由 section-tabs.js 按吸顶条的高度写：pl-ctx 上 data-sec-th）；手机屏小不钉 */
@media (min-width: 641px) {
  .pl-seg[open] > summary { position: sticky; z-index: 6; background: var(--surface); border-radius: 12px 12px 0 0; box-shadow: 0 1px 0 var(--border); }
}
/* 段一打开先是「总的备货建议」：三层一层一行（① 紧急 红 / ② 建议备 黄 / ③ 可备可不备 灰），点一行跳到那层的卡 */
.pl-plan { border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pl-plan-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--text-secondary); }
.pl-plan-h > b { font-size: 17px; color: var(--text-primary); }
.pl-tiers { display: flex; flex-direction: column; gap: 6px; }
.pl-tier { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; text-align: left; font: inherit; color: var(--text-primary); cursor: pointer;
  padding: 8px 10px; border: 1px solid var(--border); border-left: 5px solid var(--border-strong); border-radius: 10px; background: var(--surface-sunken); }
.pl-tier:hover:not(.off) { box-shadow: var(--shadow-1); }
.pl-tier.off { cursor: default; opacity: .6; }
.pl-tier.bad { background: var(--danger-bg); border-color: var(--danger-border); border-left-color: var(--danger-fg); }
.pl-tier.warn { background: var(--warning-bg); border-color: var(--warning-border); border-left-color: var(--warning-fg); }
.pl-tk { flex: none; width: 26px; text-align: center; font-size: 22px; font-weight: 700; color: var(--text-muted); }
.pl-tier.bad .pl-tk { color: var(--danger-fg); }
.pl-tier.warn .pl-tk { color: var(--warning-fg); }
.pl-tm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-tl { display: flex; align-items: center; gap: 8px; font-size: 15px; white-space: nowrap; }
.pl-tw { font-size: 12px; color: var(--text-secondary); }
.pl-tn { font-size: 13px; }
.pl-tn b { font-size: 15px; }
.pl-tm small { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.pl-tp { flex: none; display: flex; align-items: center; gap: 4px; }
.pl-tpi img, .pl-tpi .ph { width: 40px; height: 40px; border-radius: 6px; object-fit: contain; background: var(--surface); border: 1px solid var(--border-subtle);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.pl-tpm { font-size: 12px; color: var(--text-secondary); padding: 0 4px; white-space: nowrap; }
.pl-plan-f { margin: 0; font-size: 12px; color: var(--text-secondary); }
@media (max-width: 900px) { .pl-tpi:nth-child(n+4) { display: none; } }
@media (max-width: 640px) { .pl-tp { display: none; } }
.st-app .sq-sectab[data-sec^="pl-sub-"] { font-size: 12px; padding: 0 8px 0 4px; }
.st-app .sq-sectab[data-sec^="pl-sub-"]::before { content: "›"; color: var(--text-muted); font-weight: 700; }
.st-app .sq-sectab[data-sec^="pl-sub-"].on::before { color: var(--text-on-accent); }
/* 备货建议的吸顶条一律一行（下面还钉着段抬头，别再叠高）：左边「要关注 / 各仓库存…」小切换出来后放不下就横着滑，亮着的那个自动挪进来；留白收紧一点 */
.st-app .pl-ctx .sq-sectabs-in { flex-wrap: nowrap; overflow-x: auto; }
.st-app .pl-ctx .sq-sectab { padding: 0 7px; }
.st-app .pl-ctx .sq-sectab[data-sec^="pl-sub-"] { padding: 0 7px 0 3px; }
.pl-ctx .st-mini button { padding: 5px 9px; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.pl-card { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: 10px; padding: 8px 10px; background: var(--surface); cursor: pointer; min-width: 0; }
.pl-card:hover { background: var(--surface-hover); }
.pl-card.cur { background: var(--accent-soft-bg); border-color: var(--accent-soft-border); }
.pl-card.bad { border-left-color: var(--danger-fg); }
.pl-card.warn { border-left-color: var(--warning-fg); }
.pl-card.ok { border-left-color: var(--info-fg); }
.pl-card.good { border-left-color: var(--success-fg); cursor: default; }
.pl-card.info { border-left-color: var(--border-strong); }
.pl-card > img, .pl-card > .ph { width: 64px; height: 64px; border-radius: 8px; object-fit: contain; flex: none; background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.pl-cm { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.pl-ct { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pl-ct b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-cs { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-cb { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pl-ca { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--text-primary); }
.pl-ca b { font-size: 14px; }
.pl-cw2 { color: var(--text-primary); line-height: 1.5; }
.pl-src { color: var(--text-muted); line-height: 1.5; }
/* 「还有 N 款没显示」整行按钮（10-16 原来一行小链接，老板截图圈了说要显眼） */
.pl-more { align-self: stretch; padding: 9px 12px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface);
  color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; white-space: nowrap; }
.pl-more:hover { background: var(--surface-hover); border-style: solid; }
.pl-more b { font-size: 15px; }
.pl-mach { border: 1px solid var(--danger-border); background: var(--danger-bg); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.pl-mach h4 { margin: 0; font-size: 13px; color: var(--danger-fg); display: flex; align-items: center; gap: 4px; }
.pl-mrow { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; }
.pl-mrow > img, .pl-mrow > .ph { width: 48px; height: 48px; border-radius: 8px; object-fit: contain; flex: none; background: var(--surface); border: 1px solid var(--border-subtle);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.pl-mrow ul { margin: 2px 0 4px; padding-left: 16px; }
.pl-mrow li[data-sku] { cursor: pointer; }
.pl-mrow a { color: var(--accent); font-size: 12px; }
.pl-tips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-tips li { display: flex; gap: 4px; align-items: flex-start; color: var(--text-secondary); line-height: 1.45; }
.pl-tips li svg { flex: none; margin-top: 2px; color: var(--info-fg); }
.pl-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-ask { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.5; }
.pl-ask li { border-bottom: 1px solid var(--border-subtle); padding-bottom: 6px; }
.pl-ask img.sm, .pl-ask .ph.sm { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; vertical-align: middle; margin-right: 6px;
  background: var(--surface-sunken); display: inline-flex; align-items: center; justify-content: center; }
.pl-money { display: flex; flex-direction: column; gap: 8px; }
.pl-mh { display: flex; align-items: center; gap: 4px; }
.pl-money .sqv-h { margin: 0; display: inline-flex; }
.pl-say { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-secondary); }
.pl-say mark { padding: 0 3px; border-radius: 4px; }
.pl-say mark.warn { background: var(--warning-bg); color: var(--chart-5); }
.pl-say mark.bad { background: var(--danger-bg); color: var(--danger-fg); }
.pl-whs > summary { cursor: pointer; font-size: 12px; color: var(--accent); }
.pl-whs .st-table td.l { min-width: 220px; }
.pl-whs .sqv-stack { min-width: 200px; }
/* 10-11 下午：插头 / 电压小牌子；明细表「为什么」挪到每行下面一整行（老板：「右边好像看不到了，是要往右拉？」）；卡上「怎么算」「多买便宜不便宜」；同一款几个插头并一张卡 */
.st-how.spec { background: var(--info-bg); color: var(--info-fg); font-weight: 600; }
.pl-table tr.pl-main td { border-bottom: 0; padding-bottom: 2px; }
.pl-table tr.pl-whyrow td { padding-top: 0; }
.pl-table tr.pl-whyrow td.why { white-space: normal; text-align: left; max-width: none; min-width: 0; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.pl-table tr.pl-whyrow td.why .wr > span + span::before, .pl-table tr.pl-whyrow td.why .wq > span + span::before { content: "　·　"; color: var(--text-muted); font-weight: 400; }
.pl-table tr.pl-whyrow td.why .r { color: var(--text-primary); display: inline; -webkit-line-clamp: unset; overflow: visible; }
.pl-table tr.pl-whyrow td.why .nt { color: var(--text-muted); display: inline; -webkit-line-clamp: unset; overflow: visible; }
.pl-table tbody tr.pl-main:has(+ tr.pl-whyrow:hover) td { background: var(--surface-hover); }
.pl-table tbody tr.pl-main:hover + tr.pl-whyrow td { background: var(--surface-hover); }
.qw b { font-weight: 600; color: var(--text-primary); margin-right: 4px; }
.pl-grid { align-items: start; }
.pl-group.wide { grid-column: span 2; }
.pl-specs { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.pl-group.wide .pl-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-sf.qw { color: var(--text-secondary); }
.pl-specs li { border: 1px solid var(--border); border-radius: 8px; padding: 3px 6px; cursor: pointer; border-left: 3px solid var(--border-strong); }
.pl-specs li.bad { border-left-color: var(--danger-fg); }
.pl-specs li.warn { border-left-color: var(--warning-fg); }
.pl-specs li:hover, .pl-specs li.cur { background: var(--accent-soft-bg); }
.pl-sl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.pl-sl b { font-size: 13px; }
.pl-sl .pl-spec { color: var(--info-fg); min-width: 2.5em; }
.pl-sf { color: var(--text-muted); font-size: 11px; line-height: 1.5; }
/* 10-11 晚：B2B 单顺带补 B2C（一张 B2B 合同一块，下面每款一行：追加几件、按哪个插头、为什么） */
.pl-ride { border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.pl-ride.add { border-left-color: var(--success-fg); }
.pl-whs .pl-ride { margin-top: 6px; }
.pl-rh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.pl-rh .pl-ra { margin-left: auto; color: var(--success-fg); }
.pl-rl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-ri { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; border-top: 1px solid var(--border-subtle); padding-top: 6px; }
.pl-ri[data-sku] { cursor: pointer; }
.pl-ri[data-sku]:hover { background: var(--surface-hover); }
.pl-ri > img.sm, .pl-ri > .ph.sm { width: 44px; height: 44px; border-radius: 6px; object-fit: contain; flex: none; background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.pl-rm { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pl-rs { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-rs .pl-tag b { color: var(--text-primary); }
.pl-src svg { vertical-align: -2px; margin-right: 3px; }
/* 10-12 卡片固定三行（stock.js card3；老板「这个感觉有点乱……过去卖得怎样 / 不补多久卖完 / 参考哪个数据决定补」）：
   卡头（图 · 名字 · 补几件 · 哪天下）→ 几个插头各一小行 → 卖得怎样 / 不补能撑 / 凭什么补 N 件。同一排的卡一样高，标签一列对齐，数字等宽 */
.pl-c3 { flex-direction: column; align-items: stretch; align-self: stretch; gap: 6px; }
.pl-grid:has(> .pl-c3) { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }   /* 三行字多，卡比原来宽一点，少折行 */
.pl-chd { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.pl-chd > img, .pl-chd > .ph { width: 52px; height: 52px; border-radius: 8px; object-fit: contain; flex: none; background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.pl-c3 .pl-ca { min-height: 22px; }
.pl-nt { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: 11px; color: var(--text-muted); cursor: help; white-space: nowrap; }
.pl-3 { display: flex; flex-direction: column; border-top: 1px solid var(--border-subtle); margin-top: 2px; }
.pl-l { display: grid; grid-template-columns: 7.4em minmax(0, 1fr); gap: 8px; padding: 5px 0 4px; font-size: 12px; line-height: 1.55; }
.pl-l + .pl-l { border-top: 1px dashed var(--border-subtle); }
.pl-l .k { color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.pl-l .v { min-width: 0; color: var(--text-primary); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pl-n { font-weight: 600; }
.pl-b2b { color: var(--text-muted); font-size: 11px; }
.pl-st { color: var(--text-secondary); }
.pl-wk { display: inline-flex; align-items: stretch; gap: 2px; height: 18px; width: 91px; flex: none; border-bottom: 1px solid var(--chart-axis); }
.pl-wk .c { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; border-radius: 1px 1px 0 0; }
.pl-wk .c:hover { background: var(--surface-hover); }
.pl-wk .b { display: block; width: 100%; background: var(--chart-1); border-radius: 1px 1px 0 0; }
.pl-wk .b.z { height: 1px; background: var(--chart-grid); }
.pl-bs, .pl-bs2 { display: block; flex-basis: 100%; color: var(--text-secondary); }
.pl-bs2 i { font-style: normal; color: var(--text-muted); margin: 0 5px; }
.pl-calc { display: block; flex-basis: 100%; margin-top: 3px; padding: 3px 7px; border-radius: 6px; background: var(--surface-sunken); color: var(--text-primary); }
.pl-c3 .pl-specs li { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 8px; font-size: 12px; padding: 3px 8px; font-variant-numeric: tabular-nums; }
.pl-c3 .pl-specs .pl-spec { min-width: 3.2em; color: var(--info-fg); }
.pl-c3 .pl-specs .pl-sn { min-width: 4.6em; color: var(--text-primary); }
.pl-c3 .pl-specs .pl-pf { flex-basis: 100%; color: var(--text-muted); font-size: 11px; }
@media (max-width: 640px) {
  .pl-grid:has(> .pl-c3) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .pl-l { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .pl-chd > img, .pl-chd > .ph { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
  .pl-grid { grid-template-columns: 1fr; }
  .pl-group.wide { grid-column: auto; }
  .pl-group.wide .pl-specs { grid-template-columns: minmax(0, 1fr); }
  .pl-card > img, .pl-card > .ph { width: 48px; height: 48px; }
  .pl-board .sqv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-whs .st-table td.l { min-width: 120px; }
}

/* 压着的货按款合卡（10-12）：卡里逐仓一行；「怎么进来的」折叠，点开看近两年进货的单 */
.pl-cl { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.pl-cl li { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; color: var(--text-primary); cursor: pointer; border-radius: 6px; padding: 1px 4px; margin: 0 -4px; }
.pl-cl li:hover { background: var(--surface-hover); }
.pl-cl-w { color: var(--text-secondary); min-width: 64px; }
.pl-buys { margin-top: 4px; font-size: 12px; color: var(--text-secondary); }
.pl-buys > summary { cursor: pointer; color: var(--accent); display: inline-flex; gap: 4px; align-items: center; }
.pl-buys p { margin: 4px 0; line-height: 1.55; }
.pl-buys ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* 10-12 老板「采购价*数量=总金额」：补货的钱写成等式（stock.js buyEq）；表里那格窄，等式自己折行 */
.pl-eq { color: var(--text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-eq b { color: var(--text-primary); font-weight: 600; }
.pl-ca .pl-eq b { font-size: 13px; }
.pl-table td.act .pl-eq { display: inline-block; white-space: normal; max-width: 170px; }
.pl-specs .pl-sn .pl-eq { margin-left: 6px; }
@media (max-width: 520px) { .pl-ca .pl-eq { white-space: normal; min-width: 0; } }

/* 库存走势（stock-trend.js，2026-10-15） */
.tr-card { margin-bottom: 10px; }
.tr-card h2 { flex-wrap: wrap; }
.tr-range { margin-left: auto; }
.tr-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 6px; }
.tr-big { font-size: 24px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.tr-parts { color: var(--text-secondary); font-size: 13px; }
.tr-cmp { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--text-secondary); }
.tr-c { white-space: nowrap; }
/* 10-26 和顶上「总库存」卡一样：库存多了橙、少了绿（2026-10-02 那张合计卡就是这样；原来走势这里套了全站的涨绿跌红，同一个数两处两个颜色） */
.tr-card b.up { color: var(--warning-fg); }
.tr-card b.down { color: var(--success-fg); }
.tr-svg { width: 100%; height: auto; display: block; }
.tr-grid { stroke: var(--chart-grid); stroke-width: 1; }
.tr-ax { fill: var(--text-muted); font-size: 11px; }
.tr-hist { fill: none; stroke: var(--chart-8); stroke-width: 1.6; stroke-dasharray: 4 3; }
.tr-sys { fill: none; stroke: var(--chart-1); stroke-width: 2.4; }
.tr-hd { fill: var(--chart-8); }
.tr-sd { fill: var(--chart-1); }
.tr-legend { margin: 4px 0 2px; font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tr-k { display: inline-block; width: 18px; height: 0; border-top: 2.4px solid var(--chart-1); margin: 0 2px 0 8px; }
.tr-k.hist { border-top: 1.6px dashed var(--chart-8); }
.tr-rows summary { cursor: pointer; font-size: 13px; color: var(--accent); margin-top: 4px; }
.tr-scroll { max-height: 360px; overflow: auto; margin-top: 6px; }
.tr-scroll th { position: sticky; top: 0; z-index: 1; }
@media (max-width: 640px) { .tr-big { font-size: 20px; } .tr-range { margin-left: 0; } }
.tr-li { white-space: nowrap; display: inline-flex; align-items: center; }
/* 库存走势下「已下单、还没到货」（10-24，stock-trend.js onway） */
.tr-ow-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.tr-ow-link:hover { color: var(--accent); }
.tr-ow-alert { margin: 8px 0 4px; padding: 6px 10px; border-left: 3px solid var(--danger-fg); background: var(--danger-bg); color: var(--danger-fg); font-size: 13px; border-radius: 4px; }
.tr-ow-table td { vertical-align: top; }
.tr-ow-table td:nth-child(3) { min-width: 220px; }
.tr-ow-g + .tr-ow-g { margin-top: 2px; }
.tr-ow-c { font-size: 11px; color: var(--text-muted); }
.tr-ow-s { font-size: 11px; }
.tr-ow-st { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 1px 6px; white-space: nowrap; background: var(--info-bg); color: var(--info-fg); }
.tr-ow-st.bad { background: var(--danger-bg); color: var(--danger-fg); }
.tr-ow-st.warn { background: var(--warning-bg); color: var(--warning-fg); }
.tr-ow-st.ok { background: var(--success-bg); color: var(--success-fg); }
.tr-ow-st.mut { background: none; color: var(--text-muted); font-weight: 400; padding: 0; }
.tr-ow-late td { background: var(--danger-bg); }
.tr-ow-late td:first-child { box-shadow: inset 3px 0 0 var(--danger-fg); }
.tr-ow-none td { color: var(--text-secondary); }
.tr-ow-v { white-space: nowrap; }
.tr-ow-bar { display: block; height: 3px; margin-top: 3px; background: var(--chart-grid); border-radius: 2px; min-width: 60px; }
.tr-ow-bar i { display: block; height: 100%; background: var(--chart-1); border-radius: 2px; }
.tr-ow-late .tr-ow-bar i { background: var(--danger-fg); }
/* 框架单（分批提货）：不算在途，放最后、虚线隔开、字淡一点 */
.tr-ow-bulk td { color: var(--text-secondary); border-top: 1px dashed var(--border-strong); }

/* 集采几台怎么配（10-16 老板调教群 #45：「20 台里面去做怎样的一个配置……你备的那些型号里面是不是都能出」；app/stock_bulk.py） */
.sp-box.good { background: var(--success-bg); border-left-color: var(--success-fg); }
.sp-bulk { margin-top: 14px; border: 1px solid var(--accent-soft-border); border-radius: 12px; padding: 4px 12px 10px; background: var(--surface); }
.sp-bulk > h3 { margin-top: 8px; color: var(--text-primary); }
.bk-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.bk-ask label { white-space: nowrap; color: var(--text-primary); }
.bk-ask input { width: 64px; padding: 3px 6px; border: 1px solid var(--border-control); border-radius: 6px; font: inherit; font-size: 14px; text-align: right; }
.bk-go { border: 1px solid var(--accent); background: var(--accent); color: var(--text-on-accent); border-radius: 8px; padding: 3px 12px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.bk-go:hover { background: var(--accent-hover); }
.bk-quick { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.bk-quick button { border: 1px solid var(--border-control); background: var(--surface); border-radius: 999px; padding: 1px 9px; font: inherit; font-size: 12px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.bk-quick button:hover { background: var(--surface-hover); }
.bk-quick button.on { border-color: var(--accent); color: var(--accent); font-weight: 600; background: var(--accent-soft-bg); }
.bk-verdict { margin-top: 4px; }
.bk-money { margin: 4px 0; color: var(--text-primary); }
.bk-money .sqv-ico, .bk-sp .sqv-ico { vertical-align: -2px; margin-right: 2px; color: var(--text-muted); }
.bk-t td:nth-child(n+2), .bk-opt td:nth-child(n+2) { white-space: nowrap; }
.bk-t tr.on td:first-child { color: var(--text-primary); font-weight: 600; }
.bk-t tr.have td { color: var(--text-muted); }
.bk-t small { font-weight: 400; margin-left: 2px; }
.bk-t .good, .bk-opt .good { color: var(--success-fg); font-weight: 600; }
.bk-t .warn, .bk-opt .warn { color: var(--warning-fg); font-weight: 600; }
.bk-t .bad, .bk-opt .bad { color: var(--danger-fg); font-weight: 600; }
.bk-opt tr.me td { background: var(--accent-soft-bg); }
.bk-skip, .bk-why { margin: 6px 0; }
.bk-skip summary, .bk-why summary { cursor: pointer; color: var(--text-secondary); }
.bk-why ul { margin: 4px 0; padding-left: 18px; }
.bk-mo { display: grid; gap: 3px; }
.bk-m { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.bk-m .l { color: var(--text-muted); white-space: nowrap; }
.bk-m .bar { height: 10px; border-radius: 5px; background: var(--surface-sunken); overflow: hidden; }
.bk-m .bar i { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.bk-m .v { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-m .v b { color: var(--text-primary); }
.bk-m90 { margin: 4px 0 0; font-size: 12px; }
.bk-sp { margin: 8px 0 4px; }
.pl-bulk { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--accent-soft-border); background: var(--accent-soft-bg); color: var(--accent-soft-fg);
  border-radius: 999px; padding: 0 8px; font: inherit; font-size: 12px; line-height: 20px; cursor: pointer; white-space: nowrap; }
.pl-bulk:hover { border-color: var(--accent); }
@media (max-width: 640px) { .bk-ask input { font-size: 16px; } }

/* 10-16 老板「文字好多，把销量的数量做成像库存这种，直接写数字……分析的部分要点进去详情看」：
   明细表每行只放数（近 30 天 / 前 60 天 / 几个店 / 备多少 × 单价 = 钱 / 多久卖完）+ 最右一句理由，没有下面那整行了；卡片三行字换成一排数 */
.pl-table tr.pl-main td { border-bottom: 1px solid var(--border-subtle); padding-bottom: 6px; vertical-align: middle; }
.pl-table td.why { white-space: normal; min-width: 160px; max-width: 250px; color: var(--text-primary); font-size: 12px; line-height: 1.45; text-align: left; }
.pl-table td.why > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-table td.why.warn { color: var(--warning-fg); }
.pl-table td.up { color: var(--success-fg); font-weight: 600; }
.pl-table td .good, .sp-nums .good, .pl-nums .good { color: var(--success-fg); font-weight: 600; }
.pl-table td .warn, .sp-nums .warn, .pl-nums .warn { color: var(--warning-fg); font-weight: 600; }
.pl-table td .bad, .sp-nums .bad, .pl-nums .bad { color: var(--danger-fg); font-weight: 600; }
.pl-one { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.pl-one small { font-size: 11px; font-weight: 600; }
.pl-one.warn { color: var(--warning-fg); }
.pl-one.warn small { background: var(--warning-bg); border-radius: 4px; padding: 0 4px; }
.pl-buy { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.pl-buy b { color: var(--text-primary); }
.pl-buy b.m { font-size: 13px; }
.pl-nocost { margin-left: 6px; font-size: 11px; }
/* 卡片：一排数 + 一句理由 */
.pl-nums { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 14px; border-top: 1px solid var(--border-subtle); margin-top: 2px; padding-top: 6px; font-variant-numeric: tabular-nums; }
.pl-nums > span { display: inline-flex; flex-direction: column; min-width: 3.4em; }
.pl-nums small { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.pl-nums b { font-size: 14px; color: var(--text-primary); white-space: nowrap; }
.pl-nums b.up { color: var(--success-fg); }
.pl-nums .pl-wk { align-self: flex-end; margin-left: auto; }
.pl-why1 { font-size: 12px; color: var(--text-secondary); line-height: 1.5; padding-top: 4px; }
.pl-why1.warn { color: var(--warning-fg); }
/* 右边详情：先一排数，再整段分析 */
.sp-plan { margin-bottom: 8px; }
.sp-brief { display: block; margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
.sp-brief.warn { color: var(--warning-fg); font-weight: 600; }
.sp-nums { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.sp-nums > div { display: flex; flex-direction: column; }
.sp-nums > div > span { font-size: 11px; color: var(--text-muted); }
.sp-nums > div > b { font-size: 14px; }
.sp-whyd > summary { cursor: pointer; font-size: 12px; color: var(--accent); margin: 2px 0 4px; }
.sp-why { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.sp-why li + li { margin-top: 2px; }
.sp-why b { color: var(--text-primary); margin-right: 6px; }
/* 「库存的钱压在哪」三行（10-16 老板「合计 ¥68.5万 是能慢慢变回现金的……这个是什么的不知道」） */
ul.pl-say { list-style: none; padding: 0; }
ul.pl-say li { position: relative; padding-left: 14px; }
ul.pl-say li::before { content: "·"; position: absolute; left: 3px; color: var(--text-muted); font-weight: 700; }
ul.pl-say li.mut { font-size: 12px; }
/* 10-16 下午老板截图「这里你最好正对」「你金额那里看是要对齐还是怎么样的，小数点就不用了」：
   数字列表头和数字都居中；表头带小问号的（cq）左边多垫 19px（问号 15 + 间距 4），字的正中落在数字正上方；
   「备多少 × 单价 = 钱」拆成三格：件数居中，单价、金额右对齐，× 和 = 贴左边，一列列上下对得齐 */
.pl-table th.c, .pl-table td.c { text-align: center; }
.pl-table th.cq { padding-left: 27px; }
.pl-table td.c, .pl-table td.pl-u, .pl-table td.pl-m { font-variant-numeric: tabular-nums; }
.pl-table td.pl-u, .pl-table td.pl-m { text-align: right; color: var(--text-secondary); }
.pl-table td.pl-q b, .pl-table td.pl-m b { color: var(--text-primary); }
.pl-table td.pl-m b { font-size: 13px; }
.pl-table td.pl-rest { color: var(--text-muted); font-size: 12px; }
.pl-x { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pl-x i { font-style: normal; color: var(--text-muted); }
/* 10-16 老板「估计多久能卖完？没写哦」：三层总建议每层「一般约 N 天卖完」 */
.pl-tsell { white-space: nowrap; }
.pl-tsell b { margin: 0 2px; color: var(--text-primary); }
/* 10-16 第三轮：把握（绿，越深越有把握、可以备足）/ 坏账风险（红，越深问题越大）；颜色只用 tokens 变量 */
.sw { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.6; border-radius: 6px; padding: 0 6px; margin-right: 6px; white-space: nowrap; }
.sw.sure3, .pl-table td.sure3 { background: var(--accent); color: var(--text-on-accent); }
.sw.sure2, .pl-table td.sure2 { background: var(--accent-soft-bg); color: var(--accent-soft-fg); }
.sw.sure1 { color: var(--text-secondary); border: 1px dashed var(--border-strong); }
.sw.risk3, .pl-table td.why.risk3 { background: var(--danger-fg); color: var(--text-on-accent); }
.sw.risk2, .pl-table td.why.risk2 { background: var(--danger-bg); color: var(--danger-fg); }
.sw.risk1 { color: var(--text-secondary); border: 1px dashed var(--border-strong); }
.pl-table td.sure3 b, .pl-table td.sure3 .pl-x i, .pl-table td.sure3 .tr { color: inherit; }
.pl-table td.sure2 b { color: var(--accent-soft-fg); }
.pl-table td.sure3.sl, .pl-table td.sure2.sl { border-radius: 8px 0 0 8px; }
.pl-table td.sure3.sr, .pl-table td.sure2.sr { border-radius: 0 8px 8px 0; }
.pl-table td.why.risk3, .pl-table td.why.risk2 { font-weight: 600; border-radius: 8px; }
.pl-legend { caption-side: top; text-align: left; font-size: 12px; color: var(--text-muted); padding: 2px 0 8px; white-space: nowrap; }
.pl-legend .sw { margin-left: 2px; }
.pl-sure { border-radius: 6px; padding: 1px 6px; }
.pl-sure.sure3 { background: var(--accent); color: var(--text-on-accent); }
.pl-sure.sure3 b { color: inherit; }
.pl-sure.sure2 { background: var(--accent-soft-bg); color: var(--accent-soft-fg); }
/* 压着的货：卡片按坏账风险上红 */
.pl-card.risk3 { border-left-color: var(--danger-fg); border-left-width: 5px; background: var(--danger-bg); }
.pl-card.risk2 { border-left-color: var(--danger-fg); }
.pl-ca .sw { margin-right: 8px; }
.pl-risks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; margin: 4px 0 10px; font-size: 13px; }
.pl-risks .sw { font-size: 12px; padding: 1px 8px; }
ul.pl-say li .sw { margin-left: 4px; }
ul.pl-say li .st-link { margin-left: 4px; }
/* 带侧栏的窗口（1100–1240 宽）一屏放下最右的「理由」：明细表格子左右留白收窄、产品列再窄一点 */
.pl-table th, .pl-table td { padding-left: 6px; padding-right: 6px; }
.pl-table th.cq { padding-left: 25px; }
.pl-table td.l .st-prod { min-width: 160px; max-width: 196px; }
.pl-table td.why { min-width: 140px; max-width: 200px; }
@media (max-width: 1160px) {
  .pl-table th.cq { padding-left: 6px; }
  .pl-table td.l .st-prod { min-width: 150px; max-width: 176px; }
  .pl-table td.why { min-width: 120px; }
}
/* 10-16 老板「你这里没必要太多东西了，要么就收起来」：明细表上面各仓只一行小牌子（要动手的仓 + 几条），卡片收进「各仓明细」 */
.pl-wh { display: flex; flex-direction: column; gap: 6px; }
.pl-whrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.pl-whl { color: var(--text-muted); font-size: 12px; margin-right: 2px; }
.pl-whchip { display: inline-flex; align-items: baseline; gap: 4px; font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; background: var(--surface); color: var(--text-primary); }
.pl-whchip b { font-variant-numeric: tabular-nums; }
.pl-whchip.bad b { color: var(--danger-fg); }
.pl-whchip.warn b { color: var(--warning-fg); }
.pl-whchip.ok b { color: var(--success-fg); font-weight: 600; font-size: 12px; }
.pl-whchip:hover { background: var(--surface-hover); }
.pl-whchip.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft-bg); }
.pl-whcalm { color: var(--text-muted); font-size: 12px; }
.pl-whmore > summary { cursor: pointer; font-size: 12px; color: var(--accent); width: max-content; }
.pl-whmore[open] > summary { margin-bottom: 6px; }
/* 10-16 第四轮：表头点了排序（箭头不占位，不影响数字和表头正对）；数字列和「备多少 × 单价 = 钱」三格只占内容宽，宽屏多的宽度给「理由」 */
.pl-table th[data-sort] { cursor: pointer; user-select: none; }
.pl-table th[data-sort]:hover { color: var(--text-primary); }
.pl-table th[data-sort]::after { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--text-muted); }
.pl-table th[data-sort]:hover::after { content: "↕"; }
.pl-table th[aria-sort="ascending"]::after { content: "↑"; color: var(--accent); font-weight: 700; }
.pl-table th[aria-sort="descending"]::after { content: "↓"; color: var(--accent); font-weight: 700; }
.pl-table th.c, .pl-table td.c, .pl-table th.tight, .pl-table td.pl-u, .pl-table td.pl-m, .pl-table td:first-child { width: 1%; }
@media (min-width: 1300px) {
  .pl-table td.l .st-prod { max-width: 250px; }
}
/* 10-16 各仓库存多了「多久没卖」「坏账风险」两列：「在哪个仓」允许折行，带侧栏的窗口（约 1240 宽）一屏放得下 */
#st-table td.st-whs { white-space: normal; min-width: 110px; max-width: 190px; }
/* 10-21 备货建议「准不准」：一行可展开，逐条按 没下断了 / 漏报 / 报多 / 下了 / 没下没断 / 零星断了 分块 */
.pl-check { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; margin: 6px 0; font-size: 13px; }
.pl-check > summary { cursor: pointer; list-style: none; line-height: 1.7; }
.pl-check > summary::-webkit-details-marker { display: none; }
.pl-ckl { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 0 6px; margin-right: 4px; background: var(--accent-soft-bg); color: var(--accent); }
.pl-ckw { font-weight: 600; }
.pl-ckmore { margin-left: 8px; color: var(--accent); font-size: 12px; white-space: nowrap; }
.ck-good { color: var(--success-fg); } .ck-bad { color: var(--danger-fg); } .ck-warn { color: var(--warning-fg); }
.pl-ckbody { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.pl-ckweeks { align-items: center; flex-wrap: wrap; }
.pl-ckfresh { font-size: 12px; margin-left: 6px; }
.pl-ckall { display: block; margin: 4px 0 2px; font-size: 12px; }
.pl-cksec { border-top: 1px solid var(--border); padding-top: 6px; }
.pl-cksec > summary { cursor: pointer; width: max-content; max-width: 100%; }
.pl-cksec.bad > summary b { color: var(--danger-fg); } .pl-cksec.warn > summary b { color: var(--warning-fg); } .pl-cksec.good > summary b { color: var(--success-fg); }
.pl-ckn { display: inline-block; min-width: 18px; text-align: center; font-size: 12px; border-radius: 999px; padding: 0 6px; background: var(--surface-sunken); color: var(--text-secondary); }
.pl-cktab { margin-top: 4px; }
.pl-cktab td, .pl-cktab th { white-space: nowrap; font-size: 12px; }
.pl-cktab td.c, .pl-cktab th.c { text-align: center; }
.pl-ckp { display: flex; align-items: center; gap: 8px; min-width: 200px; max-width: 300px; }
.pl-ckp img, .pl-ckp .pl-ckimg { width: 32px; height: 32px; flex: none; object-fit: contain; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); }
.pl-ckp div { min-width: 0; display: flex; flex-direction: column; }
.pl-ckp b, .pl-ckp small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-ckp small { color: var(--text-muted); }
@media (max-width: 640px) { .pl-check { font-size: 12px; } .pl-ckp { min-width: 150px; } }

/* 10-21 老板截图「1. 很有把握的 2. 普通的 3. 暂时把握不大的」：明细表按把握分三块，每块开头一条色带，颜色和把握那一列同一套 */
.pl-table tr.pl-grp td { padding: 8px 12px; font-size: 13px; text-align: left; white-space: nowrap; border-left: 3px solid var(--border-strong);
  background: var(--surface-sunken); color: var(--text-primary); }
.pl-table tr.pl-grp td span { margin-left: 10px; font-size: 12px; color: var(--text-secondary); }
.pl-table tr.pl-grp.g3 td { background: var(--accent-soft-bg); border-left-color: var(--accent); }
.pl-table tr.pl-grp.g2 td { border-left-color: var(--accent-soft-fg); }
.pl-table tr.pl-grp.g0 td { color: var(--text-secondary); }
.pl-table td small { font-size: 11px; color: var(--text-muted); margin-right: 2px; font-weight: 400; }
.pl-table td .sw.pl-sw { margin-left: 4px; font-size: 11px; padding: 0 6px; white-space: nowrap; }
/* 10-21 晚 备货建议单独一页（?only=plan）+「看哪边」B2C / B2B：备多少下面一行拆两边，B2B 那份标「看客户」 */
[data-only="plan"] #st-views { display: none; }
.pl-ch { align-items: center; }
.pl-chl { color: var(--text-muted); font-size: 12px; margin-right: 2px; white-space: nowrap; }
.pl-ch button b { font-variant-numeric: tabular-nums; }
.pl-q .pl-sp { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); white-space: nowrap; line-height: 1.3; }
.pl-sp .b2b { color: var(--warning-fg); }
.pl-table td.sure3 .pl-sp, .pl-table td.sure3 .pl-sp .b2b { color: inherit; opacity: .85; }   /* 深绿底（很有把握）上小字跟格子走白字 */
.pl-table td.sure3 .pl-sp .b2b { opacity: 1; text-decoration: underline dotted; }
.pl-chnote { margin: 4px 0 6px; padding: 6px 10px; border-radius: 8px; font-size: 12px; }
.pl-chnote.b2b { background: var(--warning-bg); color: var(--warning-fg); }
.pl-chnote.b2c { background: var(--success-bg); color: var(--success-fg); }

/* 10-21 晚老板「如果有 3 个款要赶紧备货发货，或者快断货了，这个仓库稍微用荧光色来显示一下」：仓那一块的抬头、上面「各仓」那个牌子上荧光 */
.pl-table tr.pl-grp.gcn td { border-left-color: var(--accent); }
.pl-table tr.pl-grp.hot td { background: color-mix(in srgb, var(--amber) 45%, var(--surface)); border-left-color: var(--amber); }
.pl-table tr.pl-grp.hot td span { color: var(--text-primary); font-weight: 600; }
.pl-whchip.lit { background: color-mix(in srgb, var(--amber) 55%, var(--surface)); }
.pl-legend mark.pl-hotmark { background: color-mix(in srgb, var(--amber) 60%, transparent); color: inherit; padding: 0 3px; border-radius: 3px; }
/* 10-21 晚老板截图「鼠标放这里就看不到了」：行悬停底色（.st-table tbody tr[data-sku]:hover td）盖掉了把握 / 坏账风险格子自己的底色，
   深绿 / 深红底上的白字落在浅灰上就看不见了——这几格悬停时保住自己的底色（只加深一点表示指着这一行） */
.st-table.pl-table tbody tr[data-sku]:hover td.sure3 { background: color-mix(in srgb, var(--accent) 88%, var(--text-primary)); color: var(--text-on-accent); }
.st-table.pl-table tbody tr[data-sku]:hover td.sure2 { background: color-mix(in srgb, var(--accent-soft-bg) 85%, var(--accent)); color: var(--accent-soft-fg); }
.st-table.pl-table tbody tr[data-sku]:hover td.why.risk3 { background: color-mix(in srgb, var(--danger-fg) 88%, var(--text-primary)); color: var(--text-on-accent); }
.st-table.pl-table tbody tr[data-sku]:hover td.why.risk2 { background: color-mix(in srgb, var(--danger-bg) 85%, var(--danger-fg)); color: var(--danger-fg); }

/* 10-21 夜老板「大类应该就是需要下单给工厂的，还有一个需要出海外仓的」：大类一条粗抬头，下面「很有把握 / 普通 / 不确定」三档缩进的小抬头 */
.pl-table tr.pl-grp.big td { font-size: 14px; padding: 10px 12px; background: var(--surface-raised); border-left: 4px solid var(--text-primary); }
.pl-table tr.pl-grp.big.g-ov td { border-left-color: var(--accent); }
.pl-table tr.pl-grp.big mark.pl-hotmark { margin-left: 8px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--amber) 60%, transparent); padding: 1px 6px; border-radius: 4px; }
.pl-table tr.pl-grp.sub td { padding: 6px 12px 6px 28px; font-size: 12.5px; }
.pl-table tr.pl-grp.sub.g1 td { border-left-style: dashed; }
/* 10-26 选了标签：这个标签要看的几列（stock.js TAG_FOCUS）挪到产品右边，标题同色字 + 淡底、格子淡底、数字加粗，最后一列右边一道色线把这几列框成一块；
   表上面一行 #st-focus 说先看哪几列。「多久没卖」「还能卖」的红 / 橙字原来没写样式（10-16 说 3 个月以上黄、半年以上红，一直是黑字），这里补上 */
#st-table td.bad, #st-table td > span.bad:not(.sqv-pill) { color: var(--danger-fg); } #st-table td.warn, #st-table td > span.warn:not(.sqv-pill) { color: var(--warning-fg); }
#st-table td.bad, #st-table td.warn { font-weight: 600; }
#st-table th.fx { font-weight: 700; }
#st-table th.fx-bad { background: var(--danger-bg); color: var(--danger-fg); }
#st-table th.fx-warn { background: var(--warning-bg); color: var(--warning-fg); }
#st-table th.fx-info { background: var(--info-bg); color: var(--info-fg); }
#st-table td.fx { font-weight: 700; font-size: 14px; }
#st-table td.fx-bad { background: color-mix(in srgb, var(--danger-bg) 55%, var(--surface)); }
#st-table td.fx-warn { background: color-mix(in srgb, var(--warning-bg) 55%, var(--surface)); }
#st-table td.fx-info { background: color-mix(in srgb, var(--info-bg) 55%, var(--surface)); }
#st-table tbody tr[data-sku]:hover td.fx-bad { background: var(--danger-bg); }
#st-table tbody tr[data-sku]:hover td.fx-warn { background: var(--warning-bg); }
#st-table tbody tr[data-sku]:hover td.fx-info { background: var(--info-bg); }
#st-table tbody tr.cur td.fx { background: var(--accent-soft-bg); }
#st-table .fx-end.fx-bad { border-right: 2px solid var(--danger-border); }
#st-table .fx-end.fx-warn { border-right: 2px solid var(--warning-border); }
#st-table .fx-end.fx-info { border-right: 2px solid var(--info-border); }
.st-focus { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; border-left: 3px solid var(--border); background: var(--canvas); font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.st-focus b { color: var(--text-primary); }
.st-focus.fx-bad { background: var(--danger-bg); border-left-color: var(--danger-fg); } .st-focus.fx-bad b { color: var(--danger-fg); }
.st-focus.fx-warn { background: var(--warning-bg); border-left-color: var(--warning-fg); } .st-focus.fx-warn b { color: var(--warning-fg); }
.st-focus.fx-info { background: var(--info-bg); border-left-color: var(--info-fg); } .st-focus.fx-info b { color: var(--info-fg); }
/* 手机上产品列收窄一点：选了标签挪到产品旁边的「可用」「还能卖」不用横着滑就看得到 */
@media (max-width: 640px) {
  #st-table td.l { min-width: 140px; width: 150px; max-width: 150px; }
  #st-table td.l .st-prod > div { min-width: 0; overflow-wrap: anywhere; } #st-table td.l .st-how { white-space: normal; }
}