.prof-chart  { width: 100%; height: 280px;
               display: flex; flex-direction: column; }
.chart-area  { position: relative; width: 100%; flex: 1; min-height: 120px;
               touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.chart-area::before {
               content: ''; position: absolute;
               top: 0; left: 0; right: 40px; bottom: 0;
               background-image: radial-gradient(circle, var(--color-chart-grid) 0.75px, transparent 1px);
               background-size: 16px 16px;
               pointer-events: none; }
.chart-area::after {
               content: ''; position: absolute;
               left: 0; right: 40px; bottom: 0;
               height: 1px; background: #999;
               pointer-events: none; }
.chart-svg   { position: absolute; top: 0; left: 0; width: calc(100% - 40px); height: 100%; display: block; }
.chart-header { position: absolute; top: 0; left: 0; z-index: 2;
                padding: 0 48px 32px 8px; pointer-events: none;
                background: radial-gradient(ellipse 80% 100% at top left,
                                            var(--color-background) 0%,
                                            var(--color-background) 35%,
                                            transparent 75%); }
.chart-value { font-size: 24px; font-weight: 600; color: var(--color-foreground); line-height: 1.2; }
.chart-title { font-size: 14px; color: var(--color-muted-foreground); margin-top: 4px; }

.chart-x-axis { position: relative; height: 24px; flex-shrink: 0; }
.x-label, .y-label { position: absolute;
                     font-family: 'Outfit', system-ui, sans-serif;
                     font-size: 12px; line-height: 1;
                     color: var(--color-muted-foreground);
                     pointer-events: none; white-space: nowrap; }
.x-first { left: 0;                top: 8px; }
.x-last  { right: 40px;            top: 8px; }
.y-label { left: calc(100% - 32px); transform: translateY(-50%); }

.chart-indicator { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% - 40px); pointer-events: none; z-index: 1; }
.indicator-line  { position: absolute;
                   top: 0; bottom: 0; width: 1px;
                   background: repeating-linear-gradient(to bottom, #999 0 2px, transparent 2px 6px);
                   transform: translateX(-50%); }
.indicator-dot   { position: absolute;
                   width: 9px; height: 9px;
                   border-radius: 50%;
                   background: var(--color-primary);
                   border: 1.5px solid #FFFFFF;
                   box-sizing: border-box;
                   transform: translate(-50%, -50%); }