.chart-wrap { width: 100%; }
.chart { width: 100%; height: 220px; display: block; }
.chart__grid { stroke: var(--line); stroke-width: 1; }
.chart__tick { fill: var(--text-faint); font-size: 11px; font-family: var(--font-body); }
.chart__ref { stroke: var(--gold); stroke-width: 1; stroke-dasharray: 5 5; opacity: .7; }
.chart__line { fill: none; stroke: var(--radiant); stroke-width: 2.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(220, 181, 104, .5)); }
.chart__area { fill: rgba(220, 181, 104, .10); stroke: none; }
.chart__dot { fill: var(--bg-0); stroke: var(--radiant); stroke-width: 1.5; }
.chart__dot:hover { fill: var(--radiant); }
.chart__bar.is-win { fill: rgba(77, 224, 160, .85); }
.chart__bar.is-loss { fill: rgba(255, 59, 92, .85); }
.chart__bar:hover { filter: brightness(1.3); }
.wl-strip { display: flex; gap: 3px; flex-wrap: wrap; }
.wl-strip__cell { width: 14px; height: 14px; border-radius: 3px; }
.wl-strip__cell.is-win { background: var(--ok); }
.wl-strip__cell.is-loss { background: var(--dire); }