/* 图表区布局与序列色板（与 app.js 的 distributionChart 颜色一一对应） */

.chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr);
  gap: 14px;
}

.chart-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  background: var(--field-bg);
}
.chart-card .section-heading { margin-bottom: 10px; }

.chart-frame { min-height: 350px; }
.chart-frame svg { display: block; width: 100%; height: 350px; overflow: visible; }
.chart-empty { display: grid; min-height: 240px; place-items: center; color: var(--muted); font-size: 13px; }

.donut-layout {
  display: grid;
  grid-template-columns: minmax(140px, .9fr) minmax(140px, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 240px;
}
.donut-layout svg { height: 190px; }
.chart-legend { display: grid; gap: 8px; }
.chart-legend-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.chart-legend-row strong { font-variant-numeric: tabular-nums; }
.chart-swatch { width: 10px; height: 10px; border-radius: 3px; }
.chart-swatch.series-0 { background: #5b47d6; }
.chart-swatch.series-1 { background: #8b79e8; }
.chart-swatch.series-2 { background: #a8d10b; }
.chart-swatch.series-3 { background: #d59c37; }
.chart-swatch.series-4 { background: #c96c8b; }
.chart-swatch.series-5 { background: #6f6b7a; }

@media (max-width: 960px) {
  .chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .donut-layout { grid-template-columns: 1fr; }
}