.chart-container{display:flex;flex-direction:column;gap:16px;font-family:var(--font-family-base)}.chart-wrapper{position:relative;width:100%;background-color:var(--color-white);border:1px solid var(--color-border);border-radius:var(--border-radius-md);padding:16px}.chart-legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}.legend-item{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:var(--border-radius-sm);cursor:pointer;transition:background-color .2s ease}.legend-item:hover {background-color:var(--color-hover)}.legend-item.hidden{opacity:.5}.legend-color{width:12px;height:12px;border-radius:var(--border-radius-xs)}.legend-label{font-size:.875rem;color:var(--color-text-secondary)}.chart-error,.chart-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:32px;background-color:var(--color-white);border:1px solid var(--color-border);border-radius:var(--border-radius-md);color:var(--color-text-muted)}.chart-error{color:var(--color-error)}.loading-spinner{width:24px;height:24px;animation:spin 1s linear infinite}.spinner-path{stroke-dasharray:60;stroke-dashoffset:60;animation:dash 1.5s ease-in-out infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dashoffset:60}50%{stroke-dashoffset:30}100%{stroke-dashoffset:60}}.chart-tooltip{position:absolute;background-color:var(--color-tooltip-bg);color:var(--color-tooltip-text);padding:8px 12px;border-radius:var(--border-radius-sm);font-size:.75rem;pointer-events:none;z-index:10}.chart-widget{display:flex;flex-direction:column;gap:6px}.chart-wrap{width:100%;overflow:hidden}.chart-svg{width:100%;height:auto;overflow:visible;font-family:var(--font-family-base,system-ui,sans-serif)}.chart-axis-text{font-size:11px;fill:var(--color-text-secondary,#6b7280);font-family:inherit}.chart-bar-value{font-size:10px;fill:var(--color-text-secondary,#6b7280);font-family:inherit}.chart-title{font-size:13px;font-weight:600;fill:var(--color-text-primary,#111827);font-family:inherit}.chart-legend-text{font-size:11px;fill:var(--color-text-secondary,#6b7280);font-family:inherit}.chart-empty,.chart-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:32px 16px;color:var(--color-text-muted,#9ca3af);font-size:.875rem}.chart-placeholder .material-symbols-outlined{font-size:2rem;opacity:.4}.chart-loading{display:flex;align-items:center;justify-content:center;padding:24px;color:var(--color-text-muted,#9ca3af)}