.chart-placeholder {
  display: grid;
  place-items: center;
  min-height: 220px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fbfcfa;
}

.chart-card {
  display: grid;
  gap: 8px;
  padding: 16px 18px 14px;
}

.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.chart-head h3 {
  color: var(--ink);
  font-size: 15px;
}

.chart-head span {
  color: var(--muted);
  font-size: 11px;
}

.summary-chart {
  display: block;
  width: 100%;
  min-height: 240px;
}

.chart-axis {
  stroke: #d9dce8;
  stroke-width: 1.5;
}

.chart-guide {
  stroke: #cfd3df;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.chart-guide-label,
.chart-label,
.chart-legend text {
  fill: var(--muted);
  font-size: 11px;
}

.chart-risk-label {
  fill: var(--danger);
  font-size: 11px;
  font-weight: 800;
}

.line-fill {
  fill: rgba(29, 39, 131, 0.08);
}

.line-path {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
}

.line-dot {
  stroke: #ffffff;
  stroke-width: 2;
}

.line-dot.primary {
  fill: var(--color-primary);
}

.line-dot.warn {
  fill: var(--warn);
}

.line-dot.danger {
  fill: var(--danger);
}

.bar {
  rx: 3;
}

.bar.sales {
  fill: var(--color-primary);
}

.bar.supply {
  fill: var(--color-accent);
}

.bar.supply-risk {
  fill: var(--danger);
}