:root {
  --md3-chart-primary: var(--mdui-color-primary, #6750a4);
  --md3-chart-secondary: var(--mdui-color-secondary, #625b71);
  --md3-chart-tertiary: var(--mdui-color-tertiary, #7d5260);
  --md3-chart-surface: var(--mdui-color-surface, #fffbfe);
  --md3-chart-surface-variant: var(--mdui-color-surface-variant, #e7e0ec);
  --md3-chart-on-surface: var(--mdui-color-on-surface, #1c1b1f);
  --md3-chart-on-surface-variant: var(--mdui-color-on-surface-variant, #49454f);
  --md3-chart-radius: 12px;
}

.md3-chart-container {
  background: var(--md3-chart-surface);
  border-radius: var(--md3-chart-radius);
  padding: 20px;
  margin-bottom: 16px;
}

.md3-chart-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--md3-chart-on-surface);
  margin-bottom: 4px;
}

.md3-chart-subtitle {
  font-size: 0.875rem;
  color: var(--md3-chart-on-surface-variant);
  margin-bottom: 16px;
}

.md3-chart-svg {
  width: 100%;
  display: block;
}

.md3-stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.md3-stat-card {
  background: var(--md3-chart-surface-variant);
  border-radius: var(--md3-chart-radius);
  padding: 14px 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.md3-stat-card.md3-animate-in {
  opacity: 1;
  transform: translateY(0);
}

.md3-stat-card-label {
  font-size: 0.75rem;
  color: var(--md3-chart-on-surface-variant);
  margin-bottom: 6px;
}

.md3-stat-card-value {
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--md3-chart-on-surface);
  font-variant-numeric: tabular-nums;
}

.md3-stat-card-sub {
  font-size: 0.72rem;
  color: var(--md3-chart-on-surface-variant);
  margin-top: 4px;
  line-height: 1.4;
}

.md3-stat-card-icon {
  font-size: 1.25rem;
  margin-bottom: 4px;
}