.cgp-counters {
    display: grid;
    grid-template-columns: repeat(var(--cgp-columns, 3), minmax(180px, 1fr));
    gap: 28px;
    align-items: stretch;
    width: 100%;
}

.cgp-counter {
    position: relative;
    text-align: center;
    padding: 22px 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
    box-shadow: 0 14px 36px rgba(15, 23, 42, .10);
    overflow: hidden;
}

.cgp-svg { width: 100%; height: auto; overflow: visible; }
.cgp-value, .cgp-card-number { color: #111827; font-weight: 800; letter-spacing: -0.04em; }
.cgp-title { color: #334155; font-size: 16px; line-height: 1.3; font-weight: 700; }

/* 1. Tachimetro */
.cgp-counter-gauge { padding-top: 18px; }
.cgp-gauge-svg { max-width: 270px; }
.cgp-arc { fill: none; stroke-linecap: round; stroke-width: var(--cgp-stroke, 12); }
.cgp-arc-base { stroke: var(--cgp-base-color, #e5e7eb); }
.cgp-arc-fill { stroke: var(--cgp-fill-color, #0ea5e9); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.22, 1, .36, 1); }
.cgp-is-visible .cgp-arc-fill { stroke-dashoffset: calc(100 - var(--cgp-value, 0)); }
.cgp-tick { stroke: #64748b; stroke-width: 2; stroke-linecap: round; opacity: .72; }
.cgp-tick-major { stroke-width: 3; opacity: .95; }
.cgp-needle-wrap { transform-box: fill-box; transform-origin: 120px 120px; transform: rotate(-90deg); transition: transform 1.6s cubic-bezier(.22, 1, .36, 1); }
.cgp-needle { stroke: var(--cgp-fill-color, #0ea5e9); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 3px 4px rgba(15, 23, 42, .25)); }
.cgp-needle-center { fill: #111827; stroke: #ffffff; stroke-width: 3; }
.cgp-counter-gauge .cgp-value { margin-top: -30px; font-size: clamp(28px, 3vw, 42px); line-height: 1; }
.cgp-counter-gauge .cgp-title { margin-top: 10px; }

/* 2. Istogramma */
.cgp-counter-histogram { display: flex; min-height: 270px; flex-direction: column; justify-content: flex-end; }
.cgp-histogram-box { display: flex; align-items: flex-end; justify-content: center; height: 155px; margin-bottom: 16px; }
.cgp-bar-vertical { width: 62px; height: 150px; border-radius: 999px 999px 16px 16px; background: var(--cgp-base-color, #e5e7eb); padding: 6px; display: flex; align-items: flex-end; box-shadow: inset 0 0 0 1px rgba(15,23,42,.05); }
.cgp-bar-vertical span { display: block; width: 100%; height: 0; border-radius: 999px 999px 12px 12px; background: linear-gradient(180deg, var(--cgp-fill-color, #0ea5e9), color-mix(in srgb, var(--cgp-fill-color, #0ea5e9) 70%, #111827)); transition: height 1.6s cubic-bezier(.22, 1, .36, 1); }
.cgp-is-visible .cgp-bar-vertical span { height: calc(var(--cgp-value, 0) * 1%); }
.cgp-counter-histogram .cgp-value { font-size: 36px; line-height: 1; margin-bottom: 8px; }

/* 3. Cerchio progressivo */
.cgp-counter-circle { display: flex; flex-direction: column; align-items: center; }
.cgp-circle-svg { max-width: 180px; transform: rotate(-90deg); }
.cgp-circle-base, .cgp-circle-fill { fill: none; stroke-width: var(--cgp-stroke, 12); stroke-linecap: round; }
.cgp-circle-base { stroke: var(--cgp-base-color, #e5e7eb); }
.cgp-circle-fill { stroke: var(--cgp-fill-color, #0ea5e9); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.22, 1, .36, 1); }
.cgp-is-visible .cgp-circle-fill { stroke-dashoffset: calc(100 - var(--cgp-value, 0)); }
.cgp-value-center { position: absolute; top: 82px; left: 50%; transform: translateX(-50%); font-size: 34px; line-height: 1; }
.cgp-counter-circle .cgp-title { margin-top: 8px; }

/* 4. Barra orizzontale */
.cgp-counter-bar { text-align: left; display: flex; flex-direction: column; justify-content: center; min-height: 150px; }
.cgp-bar-head { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.cgp-counter-bar .cgp-value { font-size: 30px; white-space: nowrap; }
.cgp-bar-horizontal { width: 100%; height: max(12px, calc(var(--cgp-stroke, 12) * 1px)); border-radius: 999px; background: var(--cgp-base-color, #e5e7eb); overflow: hidden; }
.cgp-bar-horizontal span { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--cgp-fill-color, #0ea5e9); transition: width 1.6s cubic-bezier(.22, 1, .36, 1); }
.cgp-is-visible .cgp-bar-horizontal span { width: calc(var(--cgp-value, 0) * 1%); }

/* 5. Card numerica moderna */
.cgp-counter-card { min-height: 170px; display: flex; flex-direction: column; justify-content: center; }
.cgp-counter-card:before { content: ''; position: absolute; inset: -40% -30% auto auto; width: 150px; height: 150px; border-radius: 50%; background: color-mix(in srgb, var(--cgp-fill-color, #0ea5e9) 16%, transparent); }
.cgp-card-number { position: relative; font-size: clamp(42px, 5vw, 62px); line-height: .95; }
.cgp-card-line { position: relative; height: max(8px, calc(var(--cgp-stroke, 12) * .65px)); width: 74%; margin: 18px auto 14px; border-radius: 999px; background: var(--cgp-base-color, #e5e7eb); overflow: hidden; }
.cgp-card-line span { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--cgp-fill-color, #0ea5e9); transition: width 1.6s cubic-bezier(.22, 1, .36, 1); }
.cgp-is-visible .cgp-card-line span { width: calc(var(--cgp-value, 0) * 1%); }
.cgp-counter-card .cgp-title { position: relative; }

@media (max-width: 900px) { .cgp-counters { grid-template-columns: repeat(2, minmax(170px, 1fr)); } }
@media (max-width: 520px) { .cgp-counters { grid-template-columns: 1fr; } }