.growth-chart-card { padding: 16px; background: #f9fcfe; }
.growth-chart-head { display: flex; justify-content: space-between; color: #31556c; font-size: 13px; }
.growth-chart-head span { color: #8292a0; font-size: 11px; }
.growth-chart-legend { display: flex; gap: 15px; margin: 12px 0; color: #708499; font-size: 11px; }
.growth-chart-legend span::before { display: inline-block; width: 16px; height: 3px; margin-right: 5px; border-radius: 2px; background: #a9bfd3; content: ""; vertical-align: middle; }
.growth-chart-legend .actual::before { width: 8px; height: 8px; border-radius: 50%; background: #247f86; }
.growth-chart-legend .median::before { background: #5c93bf; }
.growth-chart-svg { display: block; width: 100%; height: auto; }
.growth-chart-svg .chart-grid line { stroke: #e4edf3; stroke-width: 1; }
.growth-chart-svg .chart-grid text,
.growth-chart-svg .age-label { fill: #7d8f9c; font-size: 10px; text-anchor: end; }
.growth-chart-svg .age-label { text-anchor: start; }
.growth-chart-svg .age-label.end { text-anchor: end; }
.growth-chart-svg .curve-boundary { fill: none; stroke: #a9bfd3; stroke-width: 1.5; stroke-dasharray: 5 5; }
.growth-chart-svg .curve-median { fill: none; stroke: #5c93bf; stroke-width: 2.5; }
.growth-chart-svg .actual-halo { fill: #fff; }
.growth-chart-svg .actual-point { fill: #247f86; }
.growth-chart-svg .actual-label { fill: #176c73; font-size: 11px; font-weight: 700; }
.growth-chart-empty { margin: 8px 0 0; text-align: center; font-size: 12px; }