.chart-card { background: var(--bg-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-card); }
.chart-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
.chart-card__title { font-size: 15px; font-weight: 600; }
.chart-card__legend { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; }
.chart-card__body { position: relative; min-height: 280px; }
.chart-card__body canvas { width: 100% !important; }
.chart-card--sm .chart-card__body { min-height: 200px; }
.chart-card--doughnut .chart-card__body { min-height: 240px; max-width: 320px; margin: 0 auto; }
.heatmap { display: flex; flex-direction: column; gap: 3px; }
.heatmap-row { display: flex; gap: 3px; align-items: center; }
.heatmap-label { width: 36px; font-size: 11px; color: var(--text-muted); text-align: right; padding-right: 6px; flex-shrink: 0; }
.heatmap-cell { flex: 1; aspect-ratio: 1; border-radius: 3px; min-width: 14px; background: color-mix(in srgb, var(--accent) calc(var(--intensity, 0) * 100%), var(--bg-tertiary)); transition: transform 0.15s; cursor: default; position: relative; }
.heatmap-cell:hover { transform: scale(1.3); z-index: 1; outline: 2px solid var(--accent); }
.heatmap-cell--header { background: none !important; font-size: 10px; color: var(--text-muted); text-align: center; }
.heatmap-row--header .heatmap-cell { aspect-ratio: auto; }
.geo-bar { display: flex; align-items: center; gap: var(--space-md); padding: 8px 0; }
.geo-flag { font-size: 20px; flex-shrink: 0; }
.geo-name { width: 120px; font-size: 13px; color: var(--text-secondary); flex-shrink: 0; }
.geo-bar-track { flex: 1; height: 20px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; }
.geo-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.6s ease; }
.geo-pct { width: 50px; text-align: right; font-size: 13px; font-weight: 600; font-family: var(--font-mono); color: var(--text-primary); }