.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.stat-box__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-box__label {
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(18, 51, 63, 0.63);
}

.stat-box__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-petrol);
    box-shadow: 0 0 0 3px rgba(18, 51, 63, 0.12);
    display: block;
}

.stat-box__dot--moss { background: var(--color-moss); box-shadow: 0 0 0 3px rgba(79, 123, 92, 0.15); }
.stat-box__dot--lilac { background: var(--color-lilac); box-shadow: 0 0 0 3px rgba(139, 131, 173, 0.15); }
.stat-box__dot--brass { background: var(--color-brass); box-shadow: 0 0 0 3px rgba(185, 147, 51, 0.15); }
.stat-box__dot--teal { background: var(--color-teal); box-shadow: 0 0 0 3px rgba(95, 138, 134, 0.15); }
.stat-box__dot--danger { background: var(--color-danger); box-shadow: 0 0 0 3px rgba(162, 59, 44, 0.15); }

.stat-box__value-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.stat-box__value {
    font-family: var(--font-heading);
    font-size: 29px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1;
}

.stat-box__delta {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
}

.stat-box__delta.is-positive {
    color: #3d6b4f;
}

.stat-box__delta.is-negative {
    color: var(--color-danger);
}

.stat-box__spark {
    margin-top: 16px;
    height: 34px;
}

.stat-box__bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 100%;
}

.stat-box__bar {
    flex: 1;
    min-width: 3px;
    border-radius: 2px 2px 0 0;
}

.stat-box__comparison {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(18, 51, 63, 0.08);
    font-size: 11.5px;
    color: rgba(18, 51, 63, 0.66);
    font-weight: 500;
}

/* La card e' un <a> quando ha 'href' (vedi stat-box.js): reset dei default
   del link (colore/sottolineatura/display inline) + un feedback al hover
   visibile ma discreto, coerente con "e' un contatore su cui si clicca"
   invece di un semplice numero statico. */
.stat-box--clickable {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.stat-box--clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(18, 51, 63, 0.1);
    border-color: rgba(18, 51, 63, 0.16);
}

/* Bordo intero color d'accento (non piu' una striscia solo in alto - la
   striscia era stata scelta in risposta a un tint pieno giudicato troppo
   tenue, ma confrontata con un riferimento esterno preciso risultava
   comunque sbagliata: l'utente l'ha corretta chiedendo esplicitamente un
   "bordo unico tutto intorno", vedi sessione Clienti) + sfondo con velo
   diagonale bianco sopra il tint colorato, stessa ricetta degli avatar
   (gloss). Il VALORE numerico non viene piu' tinto del colore hero: nel
   riferimento resta sempre scuro pieno (--color-petrol) a prescindere
   dalla card - l'accento vive nel bordo/sfondo/pallino, non nel numero
   (un numero colorato leggeva "meno nero" di quanto l'utente si
   aspettasse). */
.stat-box--hero {
    position: relative;
    border: 1px solid var(--stat-hero-border, rgba(18, 51, 63, 0.3));
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.15) 60%),
        var(--stat-hero-bg, var(--color-panel));
}

.stat-box--hero-petrol { --stat-hero-border: rgba(18, 51, 63, 0.3); --stat-hero-bg: #e4e8ea; }
.stat-box--hero-moss { --stat-hero-border: rgba(79, 123, 92, 0.3); --stat-hero-bg: #eaf1ea; }
.stat-box--hero-lilac { --stat-hero-border: rgba(139, 131, 173, 0.3); --stat-hero-bg: #eeecf3; }
.stat-box--hero-brass { --stat-hero-border: rgba(185, 147, 51, 0.3); --stat-hero-bg: #f6f0df; }
.stat-box--hero-teal { --stat-hero-border: rgba(95, 138, 134, 0.3); --stat-hero-bg: #e9f0ef; }
.stat-box--hero-danger { --stat-hero-border: rgba(162, 59, 44, 0.3); --stat-hero-bg: #f6e6e2; }