.chart {
    width: 100%;
    height: auto;
    overflow: visible;
}

.chart__grid line {
    stroke: var(--border-soft);
    stroke-width: 1;
}

.chart__axis text {
    fill: var(--text-subtle);
    font-size: 10px;
    font-family: var(--font-sans);
}

.chart__line {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--role-accent, var(--color-accent-500));
}

.chart__line--2 { stroke: var(--color-teal-500); }
.chart__line--3 { stroke: var(--color-amber-500); }
.chart__line--dashed { stroke-dasharray: 5 5; stroke: var(--text-subtle); stroke-width: 1.5; }

.chart__area { fill: url(#areaGradient); opacity: .9; }
.chart__area--2 { fill: url(#areaGradient2); opacity: .7; }

.chart__point {
    fill: var(--surface-raised);
    stroke: var(--role-accent, var(--color-accent-500));
    stroke-width: 2.5;
}

.chart__bar {
    fill: var(--role-accent, var(--color-accent-500));
    rx: 4;
    transition: opacity var(--duration) var(--ease);
}

.chart__bar--muted { fill: var(--border-default); }
.chart__bar--success { fill: var(--color-emerald-500); }
.chart__bar--warning { fill: var(--color-amber-500); }
.chart__bar--danger { fill: var(--color-rose-500); }
.chart__bar:hover { opacity: .78; }

.chart__label {
    fill: var(--text-muted);
    font-size: 10px;
    font-family: var(--font-sans);
    font-weight: 600;
}

.chart__value {
    fill: var(--text-strong);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-sans);
}

.sparkline {
    width: 100%;
    height: 40px;
    overflow: visible;
}

.sparkline path {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke: var(--role-accent, var(--color-accent-500));
}

.sparkline .sparkline__fill {
    stroke: none;
    fill: var(--role-accent, var(--color-accent-500));
    opacity: .12;
}

.sparkline--success path { stroke: var(--color-emerald-500); }
.sparkline--success .sparkline__fill { fill: var(--color-emerald-500); }
.sparkline--danger path { stroke: var(--color-rose-500); }
.sparkline--danger .sparkline__fill { fill: var(--color-rose-500); }

/* ---------- Donut / ring ---------- */

.ring { display: grid; place-items: center; position: relative; }
.ring svg { transform: rotate(-90deg); }

.ring__track { fill: none; stroke: var(--surface-sunken); }

.ring__value {
    fill: none;
    stroke: var(--role-accent, var(--color-accent-500));
    stroke-linecap: round;
    transition: stroke-dashoffset 600ms var(--ease);
}

.ring__value--success { stroke: var(--color-emerald-500); }
.ring__value--warning { stroke: var(--color-amber-500); }
.ring__value--danger { stroke: var(--color-rose-500); }

.ring__center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1.15;
}

.ring__number { font-size: var(--text-lg); font-weight: 700; color: var(--text-strong); }
.ring__caption { font-size: var(--text-xs); color: var(--text-muted); }

.ring-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }

/* ---------- Legend for multi series ---------- */

.chart-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-muted); }
.chart-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend__key { width: 14px; height: 3px; border-radius: 2px; background: var(--role-accent, var(--color-accent-500)); }
.chart-legend__key--2 { background: var(--color-teal-500); }
.chart-legend__key--3 { background: var(--color-amber-500); }
.chart-legend__key--muted { background: var(--text-subtle); }

/* ---------- Bubble cluster ---------- */

.bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
    padding: var(--space-4) 0;
}

.bubble {
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 650;
    line-height: 1.15;
    padding: var(--space-2);
    background: linear-gradient(135deg, var(--color-accent-500), var(--color-violet-500));
    box-shadow: var(--shadow-sm);
}

.bubble small { display: block; font-size: 10px; font-weight: 500; opacity: .85; }
.bubble--b { background: linear-gradient(135deg, var(--color-teal-500), var(--color-emerald-400)); }
.bubble--c { background: linear-gradient(135deg, var(--color-amber-500), var(--color-rose-400)); }
.bubble--d { background: linear-gradient(135deg, var(--color-sky-400), var(--color-accent-500)); }
.bubble--e { background: linear-gradient(135deg, var(--color-rose-500), var(--color-violet-500)); }