.vz-chart-card { min-height: 320px; display: grid; gap: 12px; }
.vz-chart-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.vz-chart-title { margin: 0; font-size: var(--vz-fs-lg); }
.vz-chart-stage { position: relative; min-height: 230px; }
.vz-chart-stage canvas { width: 100% !important; max-height: 260px; }
.vz-chart-state {
  min-height: 220px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed rgba(154,163,178,.28);
  border-radius: var(--vz-r-lg);
  background: rgba(255,255,255,.025);
  color: var(--vz-muted);
}
.vz-chart-skeleton {
  min-height: 220px;
  border-radius: var(--vz-r-lg);
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(255,255,255,.05) 42px 43px),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.05) 38px 39px);
  background-size: 220px 100%, auto, auto;
  animation: vz-shimmer 1.6s infinite;
}
.vz-stat-card { display: grid; gap: 12px; min-height: 154px; }
.vz-stat-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.vz-stat-value { font-size: clamp(28px, 4vw, 40px); line-height: 1; font-weight: 820; letter-spacing: 0; }
.vz-delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--vz-fs-xs); font-weight: 760; }
.vz-delta-up { color: #86efac; }
.vz-delta-down { color: #fca5a5; }
.vz-mini-bars { display: grid; gap: 8px; }
.vz-mini-bars span { display: grid; grid-template-columns: 120px 1fr 44px; gap: 8px; align-items: center; color: var(--vz-muted); font-size: var(--vz-fs-xs); }
.vz-mini-bars i { height: 8px; border-radius: var(--vz-r-pill); background: linear-gradient(90deg, var(--vz-accent), #22d3ee); width: calc(var(--val, 0) * 1%); }
.vz-heatmap { display: grid; grid-template-columns: repeat(8, minmax(20px, 1fr)); gap: 5px; }
.vz-heatmap i { aspect-ratio: 1; border-radius: 5px; background: color-mix(in srgb, var(--vz-accent) calc(var(--v, 0) * 1%), rgba(255,255,255,.07)); border: 1px solid rgba(255,255,255,.04); }
.vz-funnel { display: grid; gap: 8px; }
.vz-funnel i { display: block; height: 32px; width: calc(var(--val) * 1%); min-width: 28%; border-radius: 10px; background: linear-gradient(90deg, var(--vz-accent), #22d3ee); }
@media print {
  .vz-chart-card { break-inside: avoid; }
}
