/* B2C 仪表盘。颜色只用 tokens.css 变量（UI 门禁）。结论和口径文字由 /api/ecom-board 给（app/b2c_board.py）。 */
[hidden] { display: none !important; }
body { background: var(--canvas); color: var(--text-primary); margin: 0; }
.bb-app { margin: 0 auto; padding: 20px 16px 48px; max-width: 1400px; display: flex; flex-direction: column; gap: 12px; }
.bb-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.bb-head h1 { margin: 0 0 4px; font-size: 22px; }
.bb-head p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; max-width: 900px; }
/* 10-17 页顶「接着去」一行：去 B2C 全部订单 / 库存 / 平台投入产出 / 找品（打不开的那条由 data-api 藏掉） */
.bb-head p.bb-goto { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; padding: 2px 0; }
.bb-goto a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bb-goto a:hover { text-decoration: underline; }
.bb-btn { border: 1px solid var(--border-control); background: var(--surface); color: var(--text-secondary); border-radius: 8px;
  padding: 5px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.bb-btn:hover { background: var(--surface-hover); }
.bb-btn:disabled { color: var(--text-disabled); cursor: default; }
.bb-fresh { font-size: 12px; }
.bb-note { margin: 0; color: var(--text-muted); font-size: 12px; }
.bb-empty { color: var(--text-muted); padding: 24px; text-align: center; }

.bb-sec { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.bb-sec-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bb-sec-h h2 { margin: 0; font-size: 16px; }
.bb-sec-h span { color: var(--text-muted); font-size: 12px; }

/* 结论 */
.bb-cons { display: flex; flex-direction: column; gap: 8px; }
.bb-con { border: 1px solid var(--border-subtle); border-left: 4px solid var(--border-strong); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px; }
.bb-con.bad { border-left-color: var(--danger-solid); }
.bb-con.good { border-left-color: var(--chart-positive); }
.bb-con h3 { margin: 0; font-size: 15px; line-height: 1.5; }
.bb-con ul { margin: 0; padding-left: 18px; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.bb-con .act { font-size: 13px; line-height: 1.6; color: var(--text-primary); background: var(--surface-sunken); border-radius: 8px; padding: 6px 10px; }
.bb-con .act b { color: var(--accent-soft-fg); }
.bb-con a { color: var(--accent-soft-fg); font-size: 12px; text-decoration: none; align-self: flex-start; }

/* 走势 */
.bb-trend { width: 100%; height: 220px; display: block; }
.bb-trend text { fill: var(--text-muted); font-size: 11px; }
.bb-trend line.axis { stroke: var(--chart-axis); }
.bb-trend circle.ly { fill: var(--surface); stroke: var(--text-secondary); stroke-width: 1.5; }
.bb-trend rect.hit { fill: transparent; }
.bb-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.bb-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.bb-legend i.ly { border-radius: 50%; border: 1.5px solid var(--text-secondary); background: var(--surface); }
.c1 { fill: var(--chart-1); background: var(--chart-1); } .c2 { fill: var(--chart-2); background: var(--chart-2); }
.c3 { fill: var(--chart-3); background: var(--chart-3); } .c4 { fill: var(--chart-4); background: var(--chart-4); }
.c5 { fill: var(--chart-5); background: var(--chart-5); } .c6 { fill: var(--chart-6); background: var(--chart-6); }
.c7 { fill: var(--chart-7); background: var(--chart-7); } .c8 { fill: var(--chart-8); background: var(--chart-8); }

/* 表 */
.bb-scroll { overflow-x: auto; }
.bb-table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.bb-table th, .bb-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); text-align: right; white-space: nowrap; }
.bb-table th:first-child, .bb-table td:first-child { text-align: left; }
.bb-table th { color: var(--text-secondary); font-weight: 500; font-size: 12px; }
.bb-table td.l { text-align: left; white-space: normal; min-width: 180px; }
.up { color: var(--success-fg); } .down { color: var(--danger-fg); } .mut { color: var(--text-muted); }
.bb-prod { display: flex; gap: 8px; align-items: center; }
.bb-prod img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-subtle); background: var(--surface-sunken); }
.bb-prod .ph { width: 36px; height: 36px; border-radius: 6px; background: var(--surface-sunken); flex: none; }
.bb-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); }
.bb-tag.bad { color: var(--danger-fg); border-color: var(--danger-fg); }
.bb-tag.good { color: var(--success-fg); border-color: var(--success-fg); }
.bb-tag.warn { color: var(--warning-fg); border-color: var(--warning-fg); }
.bb-rules { margin: 8px 0 0; padding-left: 18px; color: var(--text-muted); font-size: 12px; line-height: 1.7; }

@media (max-width: 640px) {
  .bb-head { flex-direction: column; }
}

/* 2026-10-04 老板：可视化——数字卡、状态牌、表格里的占比条、小标题图标（SquViz） */
#bb-main > .sqv-kpis { margin: 0 0 12px; }
.bb-sec-h h2.sqv-h { margin: 0; font-size: 16px; align-self: center; }
.bb-con h3 .sqv-pill { margin-left: 4px; vertical-align: 2px; }
.bb-prod .sqv-pill { margin-left: 4px; height: 20px; }
.bb-amt { display: flex; justify-content: flex-end; }
.bb-amt .sqv-meter { min-width: 150px; max-width: 220px; flex-direction: row-reverse; }
.bb-amt .sqv-meter-v { min-width: 56px; text-align: right; color: var(--text-primary); font-size: 13px; }
.bb-amt .sqv-meter-t { min-width: 60px; height: 6px; }
@media (max-width: 640px) { .bb-amt .sqv-meter { min-width: 110px; } .bb-amt .sqv-meter-t { min-width: 36px; } }