.charts { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-4); }
.chart-panel { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }
.chart-panel figcaption { margin-bottom: var(--space-3); }
.chart { position: relative; }
.chart--h360 { height: 360px; } .chart--h320 { height: 320px; } .chart--h280 { height: 280px; }
@media (max-width: 899px) { .chart--h360 { height: 320px; } }
.chart svg { width: 100%; height: 100%; display: block; }
.chart__skeleton { position: absolute; inset: 0; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-subtle), var(--surface-strong), var(--surface-subtle)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.chart.is-ready .chart__skeleton { display: none; }
@keyframes shimmer { to { background-position: -200% 0; } }
.chart--empty { display: flex; align-items: center; justify-content: center; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-6); }
.chart-summary { font-size: 14px; color: var(--text-muted); margin: var(--space-3) 0 0; }
.chart text { font-family: var(--font); font-size: 12px; fill: var(--chart-axis); font-variant-numeric: tabular-nums; }
.chart .grid line { stroke: var(--chart-grid); }
.chart .axis line, .chart .axis path { stroke: var(--chart-axis); }
.chart .bar { fill: var(--chart-primary); }
.chart .bar:hover, .chart .bar:focus { fill: var(--accent-hover); outline: none; }
.chart .line { fill: none; stroke: var(--chart-primary); stroke-width: 2; }
.chart .point { fill: var(--surface); stroke: var(--chart-primary); stroke-width: 2; }
.chart .marker line { stroke: var(--chart-marker); stroke-dasharray: 3 3; }
.chart .marker text { fill: var(--chart-marker); font-weight: 600; }
.chart-tip { position: absolute; pointer-events: none; background: var(--text); color: var(--bg); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 13px; white-space: nowrap; transform: translate(-50%, -110%); display: none; }
.chart-tip.is-visible { display: block; }
@media (max-width: 1199px) { .charts { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .chart-panel { padding: var(--space-4); } .chart--h360, .chart--h320 { height: 280px; } }