:root {
  --ink: #172238; --muted: #78859b; --line: #e7ebf2; --accent: #4f46e5;
  --teal: #0ea5a4; --surface: #fff; --bg: #f4f6fa; --shadow: 0 16px 42px rgba(28, 43, 78, .06);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--bg); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 3; width: 244px; padding: 30px 18px 16px; display: flex; flex-direction: column; overflow: hidden; color: #dfe6ff; background: #111a2e; }
.brand { padding: 0 14px 42px; color: #fff; font-size: 20px; font-weight: 750; letter-spacing: .03em; } .brand span { color: #94a3ff; }
nav { display: grid; gap: 6px; } nav a { padding: 12px 14px; border-radius: 10px; color: #aab7d2; text-decoration: none; font-size: 14px; transition: .18s ease; } nav a:hover, nav a:focus { color: #fff; background: #222e4c; outline: none; }
.content { min-height: 100vh; margin-left: 244px; } header { height: 72px; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; color: #526078; background: rgba(255,255,255,.86); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 650; backdrop-filter: blur(14px); } header .muted { color: #9aa5b8; font-weight: 450; }
.report-hero { max-width: 1220px; margin: 0 auto; padding: 48px 48px 28px; display: flex; align-items: center; justify-content: space-between; } .report-hero h1 { margin: 6px 0 10px; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; letter-spacing: -.04em; } .report-hero p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 15px; } .eyebrow { margin: 0; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .16em; } .hero-mark { width: 62px; height: 62px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #7269ef, #3c36b8); border-radius: 18px; box-shadow: 0 12px 24px rgba(79,70,229,.25); font-size: 28px; transform: rotate(-8deg); }
.filter-panel, .kpi-grid, .chart-grid, .detail-panel { max-width: 1220px; margin-left: auto; margin-right: auto; padding-left: 48px; padding-right: 48px; } .filter-panel { padding-bottom: 18px; } .filter-panel form { padding: 16px 18px; display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); } .filter-field { display: grid; gap: 6px; min-width: 160px; } .filter-field label { color: var(--muted); font-size: 11px; font-weight: 700; } input, select { height: 38px; padding: 0 11px; color: var(--ink); background: #fbfcfe; border: 1px solid #dfe4ed; border-radius: 8px; font: inherit; font-size: 13px; outline: none; } input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,.12); } .filter-button { height: 38px; padding: 0 18px; color: #fff; background: var(--accent); border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; } .filter-button:hover { background: #4038c9; } .reset-link { height: 38px; display: inline-flex; align-items: center; color: var(--muted); font-size: 13px; text-decoration: none; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-bottom: 18px; } .kpi-card { min-height: 132px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); } .kpi-card span { color: var(--muted); font-size: 12px; font-weight: 650; } .kpi-card strong { display: block; margin: 12px 0 6px; color: var(--ink); font-size: 28px; letter-spacing: -.04em; } .kpi-card small { color: #a0a9b8; font-size: 11px; } .kpi-primary { color: #fff; background: linear-gradient(145deg, #5951e9, #4038be); border: 0; } .kpi-primary span, .kpi-primary strong, .kpi-primary small { color: #fff; } .kpi-primary small { opacity: .7; }
.kpi-grid.kpi-grid-bank { position: relative; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-group-drag-handle {
  position: absolute;
  top: -13px;
  right: 48px;
  z-index: 2;
  width: 34px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #8f96aa;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 5px 14px rgba(28, 43, 78, .08);
  cursor: grab;
  opacity: .72;
}
.kpi-group-drag-handle:hover,
.kpi-group-drag-handle:focus-visible { color: var(--accent); border-color: #b8b4f2; opacity: 1; outline: none; }
.kpi-group-drag-handle:active { cursor: grabbing; }
.kpi-group-drag-handle[hidden] { display: none; }
.kpi-group-drag-handle::before {
  width: 12px;
  height: 8px;
  content: "";
  background:
    radial-gradient(circle, currentColor 1.4px, transparent 1.8px) 0 0 / 6px 4px;
}
@media (max-width: 1180px) { .kpi-grid.kpi-grid-bank { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .kpi-grid.kpi-grid-bank { grid-template-columns: minmax(0, 1fr); } }
.operation-section { position: relative; max-width: 1220px; margin: 0 auto; padding: 0 48px 18px; transition: opacity .18s ease; }
.operation-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 0 2px; }
.operation-heading[draggable="true"] { cursor: grab; user-select: none; }
.operation-heading[draggable="true"]:active { cursor: grabbing; }
.operation-heading h2 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.02em; }
.operation-heading p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.operation-group { margin-top: 14px; }
.operation-group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.operation-group-head h3 { margin: 0; font-size: 14px; }
.operation-group-head span { color: var(--muted); font-size: 11px; }
.operation-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kpi-grid-bank > .kpi-card, .operation-kpi-grid > .kpi-card { position: relative; }
.kpi-grid-bank > .kpi-card[draggable="true"], .operation-kpi-grid > .kpi-card[draggable="true"] { cursor: grab; user-select: none; }
.kpi-grid-bank > .kpi-card[draggable="true"]:active, .operation-kpi-grid > .kpi-card[draggable="true"]:active { cursor: grabbing; }
.operation-section.is-dashboard-dragging, .kpi-grid-bank.is-dashboard-dragging, .kpi-card.is-dashboard-dragging { opacity: .42; }
.operation-section.dashboard-drop-before::before,
.operation-section.dashboard-drop-after::after,
.kpi-grid-bank.dashboard-drop-before::before,
.kpi-grid-bank.dashboard-drop-after::after {
  position: absolute;
  right: 48px;
  left: 48px;
  z-index: 2;
  height: 3px;
  content: "";
  background: #8e88ff;
  border-radius: 99px;
  box-shadow: 0 0 0 4px rgba(142, 136, 255, .14);
}
.operation-section.dashboard-drop-before::before,
.kpi-grid-bank.dashboard-drop-before::before { top: 0; }
.operation-section.dashboard-drop-after::after,
.kpi-grid-bank.dashboard-drop-after::after { bottom: 0; }
.kpi-card.dashboard-card-drop-before { box-shadow: inset 0 3px #8e88ff, var(--shadow); }
.kpi-card.dashboard-card-drop-after { box-shadow: inset 0 -3px #8e88ff, var(--shadow); }
/* 网格里的可点击卡片统一按纵向 flex 排布：浏览器默认会把按钮内容在卡片内垂直居中，
   同一行卡片高度不同时就会和 <article> 卡片对不齐。 */
.operation-kpi-grid > .kpi-card-clickable {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.wealth-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi-card-clickable {
  position: relative;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.kpi-card-clickable:hover,
.kpi-card-clickable:focus-visible {
  border-color: #9b96f1;
  box-shadow: 0 18px 42px rgba(79, 70, 229, .13);
  outline: none;
  transform: translateY(-1px);
}
.kpi-card-clickable.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .10), var(--shadow);
}
.kpi-drill-mark {
  position: absolute;
  top: 16px;
  right: 17px;
  color: #8f96aa;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}
.kpi-card-clickable.is-active .kpi-drill-mark {
  color: var(--accent);
  transform: rotate(90deg);
}
/* 经营现金收入卡片：卡片主体是合计口径，下方下级指标分别下钻现金与转出承兑。 */
.kpi-card-composite {
  padding: 0;
  overflow: hidden;
}
.kpi-composite-head {
  display: block;
  padding: 20px 20px 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.kpi-composite-head:hover,
.kpi-composite-head:focus-visible {
  box-shadow: inset 0 0 0 1px #9b96f1;
  transform: none;
}
.kpi-composite-head.is-active {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.kpi-submetrics {
  display: grid;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px dashed var(--line);
}
.kpi-submetric {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 9px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: #f7f8fc;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.kpi-submetric:hover,
.kpi-submetric:focus-visible {
  border-color: #9b96f1;
  box-shadow: 0 4px 12px rgba(79, 70, 229, .10);
  transform: none;
}
.kpi-submetric.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, .12);
}
.kpi-submetric-static,
.kpi-submetric-static:hover,
.kpi-submetric-static:focus-visible {
  border-color: var(--line);
  box-shadow: none;
  transform: none;
  cursor: default;
}
.kpi-card .kpi-submetric-label { flex: 1; color: var(--muted); font-size: 11px; font-weight: 650; }
.kpi-card .kpi-submetric-value { color: var(--ink); font-size: 13px; font-weight: 700; }
.kpi-card .kpi-submetric-count { color: #a0a9b8; font-size: 11px; font-weight: 500; }
.operation-detail-panel {
  margin-top: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.operation-detail-panel[hidden] {
  display: none;
}
.operation-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.operation-detail-head h3 {
  margin: 5px 0 0;
  font-size: 16px;
}
.operation-detail-head p:not(.eyebrow) {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.operation-detail-close {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #7c879d;
  background: #f3f5f9;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}
.operation-detail-close:hover,
.operation-detail-close:focus-visible {
  color: #fff;
  background: var(--accent);
  outline: none;
}
.operation-detail-state {
  margin-top: 14px;
  padding: 24px;
  color: var(--muted);
  background: #fafbfc;
  border: 1px dashed #dfe4ed;
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
}
.operation-detail-state.error {
  color: #a13e48;
  background: #fff4f4;
  border-color: #f0c9cc;
}
.other-income-activity-detail,
.financial-asset-detail {
  margin-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.operation-detail-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.operation-detail-subhead h4 {
  margin: 0;
  font-size: 14px;
}
.operation-detail-subhead p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.operation-detail-table-wrap {
  max-height: 560px;
  overflow: auto;
}
.operation-detail-table {
  min-width: 1480px;
}
.operation-detail-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
/* 列宽可拖拽：固定布局下用省略号截断超长文本，摘要列放开 .note-cell 的 280px 上限，拖多宽显示多宽。 */
.operation-detail-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}
.operation-detail-table td.note-cell {
  max-width: none;
}
.operation-detail-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 1;
  color: var(--ink);
  background: #f4f6fa;
  border-top: 1px solid var(--line);
  font-weight: 700;
}
.operation-detail-table tfoot td.amount {
  color: var(--accent);
}
.filter-button.secondary {
  color: #526078;
  background: #eef1f6;
}
.filter-button.secondary:hover {
  color: #fff;
  background: #596374;
}
.filter-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.transfer-section, .employee-section, .other-income-section, .wealth-section, .loan-section, .fx-section, .related-party-section, .zhu-section { padding-top: 4px; border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .kpi-group-drag-handle { display: none; }
  .operation-section { padding-left: 20px; padding-right: 20px; }
  .operation-section.dashboard-drop-before::before,
  .operation-section.dashboard-drop-after::after,
  .kpi-grid-bank.dashboard-drop-before::before,
  .kpi-grid-bank.dashboard-drop-after::after { right: 20px; left: 20px; }
  .operation-kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .operation-detail-panel { padding: 14px; }
  .operation-detail-subhead { align-items: flex-start; flex-direction: column; gap: 4px; }
  .other-income-activity-detail .table-wrap,
  .financial-asset-detail .table-wrap { max-height: 360px; }
}
.chart-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 14px; padding-bottom: 14px; } .panel { min-width: 0; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); } .chart-wide { grid-row: span 2; } .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .panel-head h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; } .panel-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; } .panel-tag { color: #a0a9b8; font-size: 10px; font-weight: 800; letter-spacing: .12em; } .chart { height: 300px; margin-top: 8px; } .chart-donut { height: 300px; }
.balance-structure-total {
  display: inline-flex;
  margin-left: 4px;
  padding: 2px 7px;
  color: #0f766e;
  background: #e8f8f3;
  border: 1px solid #bde9df;
  border-radius: 6px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.detail-panel { padding-bottom: 44px; } .freshness { padding: 6px 9px; color: #16806f; background: #e9f8f4; border-radius: 99px; font-size: 11px; font-weight: 700; } .freshness.empty { color: #93620c; background: #fff7df; } .freshness.unavailable { color: #b43f49; background: #fff0f0; } .table-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; } table { width: 100%; min-width: 620px; border-collapse: collapse; } th, td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; font-size: 13px; } th { color: var(--muted); background: #fafbfc; font-size: 11px; font-weight: 750; } tr:last-child td { border-bottom: 0; } td.amount { font-weight: 700; } .category-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--accent); border-radius: 50%; } .empty-cell { padding: 38px; color: var(--muted); text-align: center; } .chart-empty { height: 300px; display: grid; place-items: center; color: var(--muted); font-size: 13px; } .state-card { max-width: 1220px; margin: 0 auto; padding: 38px 48px; color: var(--muted); }
.hero, .empty-card { max-width: 1100px; margin: 0 auto; padding: 52px 42px 20px; } .empty-card { margin-top: 16px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); } .hero h1 { margin: 4px 0 12px; font-size: 34px; } .hero p:not(.eyebrow), .empty-card p { color: var(--muted); }
@media (max-width: 980px) { .sidebar { width: 76px; padding: 24px 8px; } .brand { padding: 8px 6px 36px; font-size: 0; } .brand span { font-size: 18px; } nav a { overflow: hidden; padding: 12px 4px; text-align: center; font-size: 0; } nav a::first-letter { font-size: 18px; } .content { margin-left: 76px; } .chart-grid { grid-template-columns: 1fr; } .chart-wide { grid-row: auto; } }
@media (max-width: 720px) { header { padding: 0 20px; } .report-hero, .filter-panel, .kpi-grid, .chart-grid, .detail-panel { padding-left: 20px; padding-right: 20px; } .report-hero { padding-top: 34px; } .hero-mark { display: none; } .filter-panel form { align-items: stretch; flex-wrap: wrap; } .filter-field { flex: 1 1 140px; } .filter-button, .reset-link { margin-top: 2px; } .kpi-grid { grid-template-columns: repeat(2, 1fr); } .kpi-card strong { font-size: 22px; } }

/* 报表内容统一基线：每个区块都以同一条左右内边距对齐。 */
/* 整行面板（维度切换、钻取、预测、矩阵、结论）自己就是那张白底卡片，没有外层容器，
   所以不能像 .chart-grid 那样用「容器内边距」，只能把同一段留白写成自身外边距：
   宽屏时卡片宽度不超过 1124px（= 1220px 内容宽度减两侧 48px）并居中，窄屏时留白收窄到
   20px，这样卡片外沿才和图表卡片、筛选卡片在同一条竖线上，不会左右各凸出 48px。 */
:root { --content-gutter: max(48px, calc((100% - 1124px) / 2)); }
@media (max-width: 720px) { :root { --content-gutter: 20px; } .state-card { padding-left: 20px; padding-right: 20px; } }
.report-hero, .filter-panel, .kpi-grid, .chart-grid, .detail-panel { width: 100%; }
/* 顶栏背景仍然通栏，但面包屑文字跟卡片左边界对齐，宽屏下不会独自停在窗口左侧。 */
header { padding-left: var(--content-gutter); padding-right: var(--content-gutter); }
/* 详情面板是透明容器，本身要盖掉 .panel 的 20px 内边距，横向才和图表卡片对齐；
   窄屏覆盖必须紧跟其后，否则又一次和图表卡片各自错 28px。 */
.detail-panel { padding: 20px 48px 44px; background: transparent; border: 0; box-shadow: none; }
@media (max-width: 720px) { .detail-panel { padding-left: 20px; padding-right: 20px; } }
.detail-panel .table-wrap { background: var(--surface); box-shadow: var(--shadow); }
.dimension-switch-panel, .drill-panel, .receipt-panel, .forecast-panel, .matrix-panel, .stale-panel, .analysis-panel, .balance-panel {
  width: auto;
  max-width: none;
  margin-left: var(--content-gutter);
  margin-right: var(--content-gutter);
  margin-bottom: 14px;
}
/* 科目余额表不再使用透明详情容器，改成与筛选卡、结构卡一致的独立面板，
   避免双侧 48px 内边距把表格视觉边界向内推。 */
.balance-panel {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.balance-panel .balance-table-wrap {
  box-shadow: none;
}
.nav-group { margin-bottom: 24px; }
.nav-label { margin: 0 12px 8px; color: #687795; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 10px 12px; color: #aab7d2; border-radius: 10px; text-decoration: none; font-size: 13px; transition: .18s ease; }
.nav-item:hover, .nav-item.active { color: #fff; background: #222e4c; }
.nav-item.active { box-shadow: inset 3px 0 #8e88ff; }
.nav-item[draggable="true"] { cursor: grab; user-select: none; }
.nav-item[draggable="true"]:active { cursor: grabbing; }
.nav-item.is-dragging { opacity: .42; }
.nav-item.drop-before::before, .nav-item.drop-after::after { position: absolute; right: 8px; left: 8px; height: 2px; content: ""; background: #8e88ff; border-radius: 99px; box-shadow: 0 0 0 3px rgba(142,136,255,.14); }
.nav-item.drop-before::before { top: -2px; }
.nav-item.drop-after::after { bottom: -2px; }
.nav-icon { width: 20px; color: #8290b1; font-size: 18px; line-height: 1; text-align: center; }
.nav-item.active .nav-icon { color: #b7b2ff; }
.nav-soon { margin-left: auto; color: #62708e; font-size: 10px; }
.sidebar-scroll { flex: 1 1 auto; min-height: 0; padding-right: 4px; overflow-y: auto; scrollbar-gutter: stable; }
.sidebar-scroll::-webkit-scrollbar { width: 5px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: #2d3a58; border-radius: 99px; }
.sidebar-footer { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 14px 4px 2px; color: #6f7c99; border-top: 1px solid #27334f; font-size: 11px; }
.status-dot { width: 7px; height: 7px; background: #3dd6a3; border-radius: 50%; box-shadow: 0 0 0 4px rgba(61,214,163,.12); }
.breadcrumb { color: #526078; } .breadcrumb span { margin: 0 8px; color: #b3bccb; } .header-meta { display: flex; align-items: center; gap: 12px; color: #9aa5b8; font-weight: 450; } .avatar { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: #4f46e5; border-radius: 50%; font-size: 12px; font-weight: 750; }
.quick-panel { padding-bottom: 12px; } .quick-link { display: flex; align-items: center; gap: 11px; padding: 12px 0; color: var(--ink); border-bottom: 1px solid var(--line); text-decoration: none; } .quick-link:last-child { border-bottom: 0; } .quick-link:hover strong { color: var(--accent); } .quick-link > span:nth-child(2) { display: grid; gap: 4px; flex: 1; } .quick-link strong { font-size: 13px; } .quick-link small { color: var(--muted); font-size: 11px; } .quick-link b { color: #a6afbd; font-size: 17px; font-weight: 400; } .quick-icon { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: #4f46e5; border-radius: 9px; font-size: 17px; } .quick-icon.price { background: #0ea5a4; } .overview-note { margin-top: 0; }
@media (max-width: 980px) { .nav-label, .nav-item span:not(.nav-icon), .nav-soon, .sidebar-footer { display: none; } .nav-item { justify-content: center; padding: 12px 4px; } }
.date-value { font-size: 19px !important; letter-spacing: -.02em !important; }
.insight-block { padding: 14px 0; border-bottom: 1px solid var(--line); }
.insight-block:last-child { border-bottom: 0; }
.insight-block strong { display: block; margin-bottom: 7px; font-size: 13px; }
.insight-block p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.note-cell { max-width: 280px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; }
.table-link { color: var(--accent); font-size: 12px; font-weight: 700; text-decoration: none; }
.table-link:hover { text-decoration: underline; }
.report-link { display: block; margin-bottom: 4px; }
.muted-text { color: var(--muted); font-size: 12px; }
.status-pill { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: capitalize; }
.status-pill.success { color: #147a67; background: #e8f8f3; } .status-pill.failed { color: #b43f49; background: #fff0f0; } .status-pill.running { color: #93620c; background: #fff7df; }

/* 销售订单报表：状态条、分析结论、分页和图表空状态。 */
.data-status-strip { max-width: 1220px; margin: 0 auto 18px; padding: 0 48px; }
.data-status-strip .data-status-main { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 13px 16px; color: #526078; background: #edf8f5; border: 1px solid #d4eee6; border-radius: 10px; font-size: 12px; }
.data-status-strip.warning .data-status-main { background: #fff8e8; border-color: #f2dfb5; }
.data-status-strip.unavailable .data-status-main { background: #fff1f1; border-color: #f2d1d1; }
.data-status-strip p { margin: 8px 4px 0; color: #a1640b; font-size: 12px; }
.data-status-main .status-dot { flex: 0 0 auto; }
.analysis-panel { margin-bottom: 14px; }
.analysis-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 14px; }
.analysis-list p { margin: 0; padding: 13px 0; color: #526078; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.65; }
.chart-empty { height: 300px; margin-top: 8px; display: grid; place-items: center; color: var(--muted); background: #fafbfc; border: 1px dashed #dfe4ed; border-radius: 10px; font-size: 13px; }

/* 数据集页面：同一面板内按数据集分节展示完整字段。 */
.preview-title { margin: 22px 0 0; color: var(--ink); font-size: 13px; font-weight: 750; }
.preview-title code { margin-left: 6px; padding: 2px 7px; color: var(--accent); background: #eef0ff; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; }
.chart-empty[hidden] { display: none; }
.detail-table { min-width: 1080px; }
/* 字段清单明细表：把 66 个星空原始字段和 2 个余额派生列全部摊开，必须横向滚动才读得出来，
   否则每一列都会被压成放不下字段名的窄条，反而看不清任何一个值。
   这里的 min-width 只是下限，实际宽度由单元格内容决定（本数据集约 6200px）。
   取值统一禁止换行，长文本（摘要、分录 JSON）用省略号截断，完整内容由单元格 title 给出。 */
.field-catalogue-table { min-width: 3720px; }
.field-catalogue-table thead th { white-space: nowrap; }
.field-catalogue-table tbody td { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 分组表头单独一行，用来在横向滚动时定位当前列属于哪一组字段。 */
.field-catalogue-group th { color: var(--muted); background: #f4f6fa; font-size: 11px; letter-spacing: .04em; text-align: center; }
/* 数值列右对齐、布尔列居中，和金额类报表的阅读习惯保持一致。 */
.field-catalogue-table td.kind-amount, .field-catalogue-table td.kind-integer { text-align: right; }
.field-catalogue-table td.kind-bool { text-align: center; }
/* 全空字段整列置灰：这些列在当前数据里没有任何信息，灰掉比留白更能说明问题。 */
.field-catalogue-table .blank-column { color: #b3bccb; }

/* 科目余额表：完整复现金蝶两行表头与科目 / 核算维度层级，金额列保持右对齐和等宽数字。 */
.balance-table-warning {
  margin: 12px 0 0;
  padding: 10px 12px;
  color: #93620c;
  background: #fff8e8;
  border: 1px solid #f2dfb5;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
}
.balance-table-wrap {
  max-height: 640px;
  overflow: auto;
}
.balance-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.balance-table th,
.balance-table td {
  padding: 7px 6px;
  border-right: 1px solid var(--line);
}
.balance-table th:last-child,
.balance-table td:last-child {
  border-right: 0;
}
.balance-table th.resizable-header {
  padding-right: 11px;
}
.column-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  z-index: 5;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}
.column-resizer::after {
  position: absolute;
  top: 7px;
  right: 3px;
  bottom: 7px;
  width: 2px;
  background: transparent;
  border-radius: 2px;
  content: "";
}
.column-resizer:hover::after,
.is-column-resizing .column-resizer::after {
  background: var(--accent);
}
.is-column-resizing {
  cursor: col-resize;
  user-select: none;
}
.balance-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: inset 0 -1px 0 var(--line);
  text-align: center;
  line-height: 1.35;
}
.balance-table thead tr:nth-child(2) th {
  top: 31px;
  z-index: 2;
}
.balance-table tbody td {
  color: #3e4b63;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.balance-table .balance-row-subject td {
  color: var(--ink);
  background: #f7f9fc;
  font-weight: 750;
}
.balance-table .balance-row-dimension td {
  background: #fff;
}
.balance-table .balance-row-total td {
  color: var(--ink);
  background: #eef3fa;
  border-top: 2px solid #cfd8e6;
  font-weight: 800;
}
.balance-table .balance-row-grand-total td {
  color: var(--ink);
  background: #e8efff;
  border-top: 3px solid #aebce0;
  font-weight: 850;
}
.balance-table .balance-row-grand-total .balance-amount {
  color: #283891;
}
.balance-table .balance-amount {
  padding-right: 2px;
  padding-left: 2px;
  font-family: "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.balance-table .balance-company {
  font-size: 10px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.balance-table .balance-dimension-cell {
  white-space: normal;
  overflow-wrap: anywhere;
}
.balance-table .balance-dimension-label {
  display: inline;
  color: var(--accent);
}
.balance-table .balance-subject-name {
  white-space: normal;
  overflow-wrap: anywhere;
}
.balance-table .balance-serial,
.balance-table .balance-subject-code {
  color: #7c879a;
  text-align: right;
}
.balance-table .balance-row-highlight td {
  background: #eaf8f4;
  box-shadow: inset 0 1px rgba(14, 165, 164, .08), inset 0 -1px rgba(14, 165, 164, .08);
}
.balance-table .balance-row-highlight .balance-dimension-label {
  color: #0f766e;
  font-weight: 750;
}
.bill-number { color: var(--accent); font-weight: 700; }
/* 星空单据状态编码统一配色：A 暂存 / B 已提交 / C 已审核 / D 已关闭，销售与采购明细表共用。 */
.bill-status-A { color: #93620c; background: #fff7df; }
.bill-status-B { color: #315d9e; background: #eaf2ff; }
.bill-status-C { color: #147a67; background: #e8f8f3; }
.bill-status-D { color: #6b7280; background: #f1f3f6; }
/* 采购明细的交付进度标记：逾期最醒目，其次在途，再到已入库与未开始。 */
.delivery-status-overdue { color: #b43f49; background: #fff0f0; }
.delivery-status-transit { color: #93620c; background: #fff7df; }
.delivery-status-warehoused { color: #147a67; background: #e8f8f3; }
.delivery-status-pending { color: #6b7280; background: #f1f3f6; }
/* 供应商评级标记：A 级正常、B 级中性、C 级交期风险，配色与交付逾期保持同一语义。 */
.grade-a { color: #147a67; background: #e8f8f3; }
.grade-b { color: #4b5a72; background: #eef1f6; }
.grade-c { color: #b43f49; background: #fff0f0; }
/* 风险预警等级标记：红=高、琥珀=中、灰蓝=低、紫=需核价（数据质量问题，不是严重度）。 */
.risk-level-high { color: #b43f49; background: #fff0f0; }
.risk-level-medium { color: #93620c; background: #fff7df; }
.risk-level-low { color: #4b5a72; background: #eef1f6; }
.risk-level-review { color: #6d28d9; background: #f3f0ff; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 16px; color: var(--muted); font-size: 12px; }
.pagination a { padding: 8px 11px; color: var(--accent); background: #f3f2ff; border-radius: 7px; font-weight: 700; text-decoration: none; }
.pagination span { padding: 8px 11px; color: #b3bccb; }
.pagination strong { color: var(--ink); }
body.is-loading .filter-panel { opacity: .72; }
@media (max-width: 720px) {
  .data-status-strip { padding-left: 20px; padding-right: 20px; }
  .data-status-strip .data-status-main { align-items: flex-start; flex-direction: column; gap: 6px; }
  .analysis-list { grid-template-columns: 1fr; }
}

@media (max-width: 720px) { .header-meta { gap: 0; } .header-user { display: none; } .user-menu-trigger { padding: 0; } }

/* 销售筛选栏按维度分行：时间 / 组织级别 / 组织内级别 / 产品类 / 其他类，行首写明类别，
   十几个筛选器不再平铺成一行；组织类再拆成法人主体与部门/销售组/业务员两级，
   避免把「销售组织」和「业务员」混在同一行里看不出口径差别。 */
.filter-row { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: end; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.filter-row:first-of-type { padding-top: 0; border-top: 0; }
.filter-row-label { padding-bottom: 11px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.filter-row-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filter-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 2px; }
/* 起止日期成组换行并保持等宽，避免窄屏时后一个日期框被挤到单独一行后拉满整行。 */
/* 不参与收缩，宁可整体换到下一行，也不要两个日期框各自被压窄后在组内互相换行。 */
.filter-date-range { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filter-date-range .filter-field { flex: 0 0 168px; }
/* 筛选字段等宽排列、不随行末剩余空间拉伸：换行后仍然对齐，不会出现一个字段独占整行的怪尺寸。 */
.filter-field { flex: 0 1 200px; }
.filter-field-wide { flex: 0 1 220px; }
.filter-button, .reset-link { flex: 0 0 auto; white-space: nowrap; }

/* 下拉与输入框跟随字段宽度，长选项不再把卡片撑出容器。 */
.filter-field { min-width: 0; }
.filter-field input, .filter-field select { width: 100%; min-width: 0; }

/* 金额筛选：关系选择与金额输入同排，关系框固定窄宽、金额框占满剩余宽度。 */
.filter-amount-group { display: flex; gap: 6px; }
.filter-amount-group select { flex: 0 0 76px; }
.filter-amount-group input { flex: 1 1 auto; }

/* 联动筛选的说明文案（例如「该对方单位未登记开户行」）：占满整行换到字段下方，
   与字段同处一个筛选行，不额外占用一个筛选行的高度。 */
.filter-hint { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* 图表区改为“趋势通栏 + 两张并排”，避免趋势面板跨行后留下大片空白。 */
.chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chart-wide { grid-column: 1 / -1; grid-row: auto; }
@media (max-width: 980px) { .chart-wide { grid-column: auto; } }

/* 快捷时间范围与起止日期同处“时间”一行：起止日期在前（左）、快捷区间在后（右），
   区间按长度从短到长排列（今天 → 最近一周 → 本月 → 季度 → 半年 → 今年 → 最近一年），
   默认命中“本月”。flex-basis 取 0 才肯收缩，min-width 保证剩余空间太窄时整组换到
   下一行、按整行宽度铺开，而不是被压成一条竖排的窄列。 */
.quick-ranges { flex: 1 1 0; min-width: 340px; display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 1px; }
.quick-range { padding: 7px 12px; color: #526078; background: #f4f6fa; border: 1px solid #e2e7f0; border-radius: 99px; font-size: 12px; font-weight: 650; text-decoration: none; transition: .18s ease; }
.quick-range:hover { color: var(--accent); background: #f1f0ff; border-color: #cec9fd; }
.quick-range.active { color: #fff; background: var(--accent); border-color: var(--accent); }

/* 指标卡允许收缩；窄屏改为单列，避免长金额数字把卡片顶出屏幕。 */
.kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .kpi-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 980px) { .chart-grid { grid-template-columns: minmax(0, 1fr); } }

/* 工资分析顶部固定为两行：第一行看总成本和三项专项归属，第二行看公司口径与工资成本构成。 */
.kpi-grid.kpi-grid-payroll-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 14px; }
.kpi-grid.kpi-grid-payroll-detail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chart-department-trend { height: 360px; }
.trend-change-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.trend-change-summary[hidden] { display: none; }
.trend-change-title { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .04em; }
.payroll-person-chart-grid { display: block; margin-top: 14px; }
.payroll-person-chart-grid > div { min-width: 0; }
.payroll-person-chart-grid h3 { margin: 0; color: var(--ink); font-size: 12px; font-weight: 750; }
.payroll-person-chart-grid .chart,
.payroll-person-chart-grid .chart-empty { height: 420px; margin-top: 8px; }
.employee-change-table td.change-up { color: #147a67; }
.employee-change-table td.change-down { color: #b43f49; }
@media (max-width: 1180px) {
  .kpi-grid.kpi-grid-payroll-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid.kpi-grid-payroll-detail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .kpi-grid.kpi-grid-payroll-summary,
  .kpi-grid.kpi-grid-payroll-detail { grid-template-columns: minmax(0, 1fr); }
  .chart-department-trend { height: 300px; }
  .payroll-person-chart-grid .chart,
  .payroll-person-chart-grid .chart-empty { height: 300px; }
}

/* 单据明细列较多：限定高度并让表头吸附，横向滚动时仍能看清字段名。 */
.detail-panel .table-wrap { max-height: 620px; overflow: auto; }
.detail-panel .detail-table thead th { position: sticky; top: 0; z-index: 2; background: #fafbfc; box-shadow: inset 0 -1px 0 var(--line); }
.detail-panel .detail-total-row td { color: var(--ink); background: #f7f8fc; font-weight: 750; }

/* 窄屏筛选栏：类别标签移到行首之上，字段改为两列网格，避免十一个维度竖排把表格推到屏幕外。 */
@media (max-width: 720px) {
  .filter-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .filter-row-label { padding-bottom: 0; }
  .filter-row-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  /* 窄屏改成整行网格后不再需要最小宽度，否则会撑出横向滚动条。 */
  .quick-ranges { grid-column: 1 / -1; min-width: 0; }
  .filter-date-range { grid-column: 1 / -1; }
  /* 联动提示在窄屏是网格容器，flex 的 100% 只能占一格；必须显式跨列，否则整句提示被挤成窄条竖排。 */
  .filter-hint { grid-column: 1 / -1; }
  .filter-date-range .filter-field { flex: 1 1 0; min-width: 0; }
  .filter-field, .filter-field-wide { flex: none; }
  .filter-actions { justify-content: flex-start; }
  .filter-button, .reset-link { align-self: end; }
}

/* 筛选维度可搜索下拉框：隐藏原生 select，用输入框加选项列表代替。 */
.search-select { position: relative; }
.search-select-native { display: none; }
.search-select-control { display: flex; align-items: center; gap: 4px; }
.search-select-input { flex: 1 1 auto; min-width: 0; }
.search-select-toggle, .search-select-clear { height: 38px; padding: 0 6px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; font-size: 13px; cursor: pointer; }
.search-select-toggle:hover, .search-select-clear:hover { color: var(--accent); background: #f1f0ff; }
.search-select-clear { visibility: hidden; }
.search-select[data-filled="true"] .search-select-clear { visibility: visible; }
.search-select[data-filled="true"] .search-select-input { font-weight: 650; }
.search-select-list { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; left: 0; max-height: 280px; margin: 0; padding: 6px; overflow: auto; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.search-select-option { padding: 8px 10px; color: var(--ink); border-radius: 8px; font-size: 13px; cursor: pointer; }
.search-select-option[data-active="true"] { color: var(--accent); background: #f1f0ff; }
.search-select-option[aria-selected="true"] { font-weight: 700; }
.search-select[data-multiple="true"] .search-select-option[aria-selected="true"] { color: var(--accent); background: #f1f0ff; }
.search-select[data-multiple="true"] .search-select-option[aria-selected="true"]::after { content: "\2713"; float: right; margin-left: 12px; color: var(--accent); }
.search-select-option mark { padding: 0 1px; color: inherit; background: #fff2b8; border-radius: 3px; }
.search-select-empty { padding: 10px; color: var(--muted); font-size: 12px; }

/* 窄屏筛选框只有 150px 宽，隐藏展开箭头把宽度留给关键词本身。 */
@media (max-width: 720px) { .search-select-toggle { display: none; } }

/* 销售总览：KPI 环比标记，涨跌用颜色区分，同时保留上一期区间文案。 */
.kpi-trend { display: block; color: #147a67; font-size: 11px; font-weight: 700; }
.kpi-trend.down { color: #b43f49; }
.kpi-primary .kpi-trend { color: #fff; opacity: .85; }

/* 销售总览：组织排行标签较长，给左侧留出更宽的类目区域。 */
#overview-org { height: 320px; }

/* 业绩拆解：维度切换标签、环比标记、钻取面包屑和拆解表格。 */
.dimension-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dimension-tab { padding: 7px 15px; color: #526078; background: #f4f6fa; border: 1px solid #e2e7f0; border-radius: 99px; font-size: 12px; font-weight: 650; text-decoration: none; transition: .18s ease; }
.dimension-tab:hover { color: var(--accent); background: #f1f0ff; border-color: #cec9fd; }
.dimension-tab.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.chart-tall { height: 360px; }
.growth-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.growth-badge.up { color: #147a67; background: #e8f8f3; }
.growth-badge.down { color: #b43f49; background: #fff0f0; }
.growth-badge.flat { color: #78859b; background: #f1f3f6; font-weight: 500; }
.row-unknown td { color: #93620c; background: #fffdf5; }
.row-other td { color: var(--muted); background: #fafbfc; }
.drill-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 14px; background: #f7f8fc; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.drill-root { color: var(--muted); font-weight: 650; }
.drill-root a { color: inherit; text-decoration: none; }
.drill-root a:hover { color: var(--accent); }
.drill-sep { color: #b3bccb; }
.drill-current { color: var(--ink); font-weight: 700; }
.drill-remove { width: 18px; height: 18px; display: grid; place-items: center; color: #98a2b6; background: #eef1f6; border-radius: 50%; font-size: 12px; text-decoration: none; }
.drill-remove:hover { color: #fff; background: var(--accent); }
.drill-hint { margin: 12px 2px 0; color: var(--muted); font-size: 12px; }
.breakdown-table { min-width: 720px; }
.breakdown-table td.amount { font-weight: 700; }
.breakdown-detail .table-wrap { max-height: 640px; }
.breakdown-detail .breakdown-table thead th { position: sticky; top: 0; z-index: 2; background: #fafbfc; box-shadow: inset 0 -1px 0 var(--line); }

@media (max-width: 720px) {
  .chart-tall { height: 300px; }
  .dimension-tab { padding: 6px 12px; font-size: 11px; }
}

/* 客户价值分析：回款汇总条、分层标签和客户明细表。 */
.receipt-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.receipt-summary > div { padding: 12px 14px; background: #f7f8fc; border: 1px solid var(--line); border-radius: 10px; }
.receipt-summary span { display: block; color: var(--muted); font-size: 11px; font-weight: 650; }
.receipt-summary strong { display: block; margin-top: 6px; font-size: 15px; letter-spacing: -.02em; }
.layer-pill { display: inline-grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 750; }
.layer-pill.layer-A { color: #fff; background: #4f46e5; }
.layer-pill.layer-B { color: #0f6d6c; background: #d7f4f3; }
.layer-pill.layer-C { color: #93620c; background: #fff3d6; }
.layer-pill.layer-D { color: #6b7280; background: #eef1f6; }
.customer-table { min-width: 1180px; }
@media (max-width: 980px) { .receipt-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .receipt-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 过程指标条与风险标签：预测与风险预警页复用。 */
.process-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.process-summary > div { padding: 12px 14px; background: #f7f8fc; border: 1px solid var(--line); border-radius: 10px; }
.process-summary span { display: block; color: var(--muted); font-size: 11px; font-weight: 650; }
.process-summary strong { display: block; margin-top: 6px; font-size: 15px; letter-spacing: -.02em; }
.risk-badge { display: inline-flex; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.risk-badge.high { color: #b43f49; background: #fff0f0; }
.risk-badge.mid { color: #93620c; background: #fff7df; }
.risk-badge.low { color: #147a67; background: #e8f8f3; }

/* 销售预测与风险预警：预测明细表与预警清单需要更宽的列。 */
.alert-table { min-width: 1120px; }
#forecast-series { height: 360px; }
#forecast-concentration { height: 360px; }
@media (max-width: 980px) { .process-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .process-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 产品型号排行 Top 50：图表按条数撑高，超出部分在面板内滚动，避免 50 条柱形被压扁。 */
.chart-scroll { max-height: 560px; margin-top: 8px; overflow-y: auto; }
.chart-scroll .chart { margin-top: 0; }
@media (max-width: 720px) { .chart-scroll { max-height: 420px; } }
@media (max-width: 720px) { .column-resizer { display: none; } }

/* 客户价值分析：客户 × 月份销售矩阵，左侧客户列与表头固定，单元格按金额深浅着色。 */
/* 矩阵要能一次看完全部客户行：纵向不再限高（由页面滚动），只保留横向滚动；
   纵向用 clip 而不是 auto，否则容器会变成纵向滚动容器，表头无法吸顶。 */
.matrix-wrap { overflow-x: auto; overflow-y: clip; }
/* 矩阵面板头右侧放行数档位切换和渠道标记：胶囊按钮在表头里不额外占上边距。 */
.panel-actions { display: flex; align-items: center; gap: 10px; }
.panel-actions .dimension-tabs { margin-top: 0; }
.month-matrix { min-width: 1080px; }
/* 产品分析矩阵的产品列与规格型号列支持拖拽改宽：两列宽度写在 CSS 变量里，列宽合计加上
   月份列最小宽度决定表格最小宽度，因此改用固定表格布局——有宽度的列保持宽度，没有宽度的
   月份列平均分掉剩余空间，超出宽度的单元格省略显示而不是把列撑开。 */
.matrix-resizable {
  --matrix-name-width: 88px;
  --matrix-model-width: 150px;
  --matrix-month-min: 72px;
  --matrix-fixed-width: 468px;
  width: 100%;
  min-width: calc(var(--matrix-fixed-width) + var(--matrix-month-min) * var(--matrix-month-count, 12));
  table-layout: fixed;
}
.matrix-resizable col.matrix-col-name { width: var(--matrix-name-width); }
.matrix-resizable col.matrix-col-model { width: var(--matrix-model-width); }
.matrix-resizable col.matrix-col-layer { width: 56px; }
.matrix-resizable col.matrix-col-status { width: 78px; }
.matrix-resizable col.matrix-col-total { width: 96px; }
/* 可调列不受 .note-cell 的 280px 上限约束，拖多宽就显示多宽。 */
.matrix-resizable .matrix-sticky, .matrix-resizable .matrix-model { min-width: 0; max-width: none; }
.matrix-resizable tfoot .matrix-sticky { overflow: hidden; text-overflow: ellipsis; }
/* 月份列与合计列在窄表宽下只能截断，避免数字溢出到相邻单元格。 */
.matrix-resizable .matrix-month, .matrix-resizable td.matrix-cell { overflow: hidden; text-overflow: ellipsis; }
/* 列宽拖拽手柄：贴在可调列右边界，横向拖动改宽；拖动期间整页锁定为列宽调整光标。 */
.matrix-resizable .col-resizer { position: absolute; top: 0; right: -5px; z-index: 6; width: 11px; height: 100%; cursor: col-resize; touch-action: none; }
.matrix-resizable .col-resizer::after { content: ""; position: absolute; top: 5px; right: 5px; bottom: 5px; width: 1px; background: #cbd3e0; }
.matrix-resizable .col-resizer:hover::after, .matrix-resizable .col-resizer.is-active::after { background: var(--accent); }
body.is-col-resizing, body.is-col-resizing * { cursor: col-resize !important; user-select: none; }
.month-matrix th, .month-matrix td { padding: 9px 10px; }
.month-matrix thead th { position: sticky; top: 0; z-index: 3; background: #fafbfc; box-shadow: inset 0 -1px 0 var(--line); }
.month-matrix .matrix-sticky { position: sticky; left: 0; z-index: 2; background: #fafbfc; box-shadow: inset -1px 0 0 var(--line); }
.month-matrix thead .matrix-sticky { z-index: 4; }
.month-matrix tbody .matrix-sticky { color: var(--ink); background: var(--surface); font-size: 13px; font-weight: 650; }
.month-matrix .matrix-month { text-align: right; }
.month-matrix td.matrix-cell { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.month-matrix td.heat-1 { background: rgba(79,70,229,.08); }
.month-matrix td.heat-2 { background: rgba(79,70,229,.18); }
.month-matrix td.heat-3 { background: rgba(79,70,229,.32); }
.month-matrix td.heat-4 { color: #fff; background: rgba(79,70,229,.52); }
.month-matrix td.heat-empty { color: #c3cad6; }
.month-matrix td.matrix-summary, .month-matrix td.matrix-foot { background: #f7f8fc; }
.month-matrix .matrix-total { background: #f4f6fb; font-weight: 750; }
.month-matrix tfoot .matrix-sticky, .month-matrix tfoot td { color: var(--ink); background: #f7f8fc; font-weight: 750; }
/* 客户名称后的分层列：只放 A/B/C/D 胶囊，窄列宽避免挤压月份列。 */
.month-matrix .matrix-layer { width: 56px; text-align: center; white-space: nowrap; }
.month-matrix .matrix-model { min-width: 150px; max-width: 190px; color: var(--muted); white-space: nowrap; }
/* 只让数据行截断：表头不能设 overflow，否则会裁掉贴在右边界上的列宽拖拽手柄。 */
.month-matrix tbody .matrix-model, .month-matrix tfoot .matrix-model { overflow: hidden; text-overflow: ellipsis; }
.matrix-note { margin: 10px 2px 0; color: var(--muted); font-size: 12px; }
/* 重点客户风险清单：按 RFM 挑出的重点客户，风险用左侧色条与文字标签区分。 */
.matrix-focus { margin-top: 14px; padding: 12px 14px; background: #fafbff; border: 1px solid var(--line); border-radius: 12px; }
.matrix-focus-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.matrix-focus-head strong { color: var(--ink); font-size: 13px; }
.matrix-focus-head span { flex: 1 1 320px; color: var(--muted); font-size: 11px; }
.matrix-focus-note { margin: 6px 0 0; color: #9aa4b6; font-size: 11px; line-height: 1.5; }
.matrix-focus-list { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.matrix-focus-item { display: grid; grid-template-columns: 22px minmax(120px, 1.1fr) minmax(220px, 2.4fr) minmax(140px, 1fr); align-items: center; gap: 10px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid #cbd5e5; border-radius: 8px; }
.matrix-focus-item.risk-high { border-left-color: #e05656; }
.matrix-focus-item.risk-mid { border-left-color: #e0a53c; }
.matrix-focus-item.risk-low { border-left-color: #35a08a; }
.matrix-focus-item .focus-name { color: var(--ink); font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matrix-focus-item .focus-meta { color: var(--muted); font-size: 12px; }
.matrix-focus-item .focus-risk { color: var(--ink); font-size: 12px; font-weight: 650; }
.matrix-focus-item.risk-high .focus-risk { color: #c02f2f; }
.matrix-focus-item.risk-mid .focus-risk { color: #9a6a10; }
.matrix-focus-item.risk-low .focus-risk { color: #1f7f6c; }
@media (max-width: 720px) { .matrix-focus-item { grid-template-columns: 22px 1fr; } .matrix-focus-item .focus-meta, .matrix-focus-item .focus-risk { grid-column: 2; } }

/* 面板说明里的核心金额：主色加粗配浅底，让「含税金额」这类关键数字一眼可见；
   数字使用等宽字形并对齐，多个面板纵向比较时不跳动。 */
.amount-highlight {
  display: inline-block;
  margin: 0 1px;
  padding: 1px 7px;
  color: var(--accent);
  background: #eef0ff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 产品分析：滞销清单摘要、矩阵状态列与产品/滞销明细表。 */
.stale-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.stale-summary-text { flex: 1 1 320px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.month-matrix .matrix-status { width: 78px; text-align: center; white-space: nowrap; }
.product-table { min-width: 1180px; }
.stale-table { min-width: 900px; }

.header-user { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu { position: relative; }
.user-menu-trigger { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 10px; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 999px; font: inherit; cursor: pointer; }
.user-menu-trigger:hover, .user-menu-trigger:focus-visible, .user-menu-trigger[aria-expanded="true"] { background: #f3f4fa; border-color: #dfe2ee; outline: 0; }
.user-menu-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 100; width: 220px; padding: 8px; background: #fff; border: 1px solid #dfe3ec; border-radius: 8px; box-shadow: 0 16px 40px rgba(28, 35, 51, .16); }
.user-menu-panel[hidden] { display: none; }
.user-menu-identity { display: grid; gap: 3px; margin-bottom: 6px; padding: 10px 10px 12px; border-bottom: 1px solid #eceef4; }
.user-menu-identity strong { overflow: hidden; color: #172033; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-identity span { overflow: hidden; color: #8a94a6; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.logout-form { margin: 0; }
.user-menu-logout { width: 100%; padding: 10px; color: #b42318; background: transparent; border: 0; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 750; text-align: left; cursor: pointer; }
.user-menu-logout:hover, .user-menu-logout:focus-visible { background: #fff1f0; outline: 0; }
.user-menu-logout:disabled { color: #9ca3af; cursor: wait; }

@media (max-width: 720px) { .header-user { display: none; } }