/* ============================================================================
   FINOVAI · Data viz (Phase 4d). Counters · Progress · Pie. Token-driven.
   ============================================================================ */

/* ---- Counters ------------------------------------------------------------ */
.fv-counters { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 1.4rem; }
.fv-counter { padding: 2rem 1.6rem; border: 1px solid var(--fv-border); border-radius: var(--fv-radius); background: linear-gradient(180deg, var(--fv-surface), transparent); position: relative; overflow: hidden; }
.fv-counter::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: linear-gradient(90deg, var(--fv-accent), transparent); }
.fv-counter__num { font-family: var(--fv-font-mono); font-weight: 700; font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1; color: var(--fv-gold); font-variant-numeric: tabular-nums; }
.fv-counter__label { color: var(--fv-fg-soft); margin-top: .9rem; font-size: .95rem; }
@media (max-width: 900px) { .fv-counters { grid-template-columns: 1fr 1fr; } }

/* ---- Progress bars ------------------------------------------------------- */
.fv-progress__item { margin-bottom: 1.6rem; }
.fv-progress__item:last-child { margin-bottom: 0; }
.fv-progress__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; }
.fv-progress__label { font-family: var(--fv-font-display); font-weight: 600; font-size: .98rem; }
.fv-progress__val { font-family: var(--fv-font-mono); font-size: .85rem; color: var(--fv-accent); font-variant-numeric: tabular-nums; }
.fv-progress__track { height: 8px; background: var(--fv-surface); border: 1px solid var(--fv-border); border-radius: var(--fv-radius-pill); overflow: hidden; }
.fv-progress__fill { height: 100%; width: 0; border-radius: var(--fv-radius-pill); background: linear-gradient(90deg, var(--fv-accent), var(--fv-gold)); transition: width 1.2s var(--fv-ease); }

/* ---- Pie / Donut --------------------------------------------------------- */
.fv-pies { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1.6rem; justify-items: center; }
.fv-pie { text-align: center; }
.fv-pie__ring { position: relative; width: 150px; height: 150px; margin-inline: auto; }
.fv-pie__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fv-pie__bg { fill: none; stroke: var(--fv-surface); stroke-width: 10; }
.fv-pie__bar { fill: none; stroke: url(#fv-pie-grad); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 339.292; stroke-dashoffset: 339.292; transition: stroke-dashoffset 1.3s var(--fv-ease); }
.fv-pie__val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fv-font-mono); font-weight: 700; font-size: 1.7rem; color: var(--fv-fg); font-variant-numeric: tabular-nums; }
.fv-pie__label { margin-top: 1rem; color: var(--fv-fg-soft); font-family: var(--fv-font-display); font-weight: 600; }
@media (max-width: 700px) { .fv-pies { grid-template-columns: 1fr 1fr; } }