/* Add to your style.css - Counter fixes for no vibration */

/* ===== COUNTER FIXES - No Vibration ===== */
.stat-number {
    font-size: 3rem;
    font-weight: 800;
    background: var(--teal-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 80px;
    text-align: center;
    letter-spacing: 1px;
}

.stat-number .suffix {
    -webkit-text-fill-color: var(--teal);
    font-size: 1.8rem;
}

.stat-number .placeholder {
    visibility: hidden;
    display: inline-block;
    width: 0;
}

/* Also fix for the initial loading state */
.stat-number:not([data-target]) {
    min-width: 80px;
}

/* Ensure the container doesn't shift */
.stats-grid > div {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stat-label {
    color: var(--gray-400);
    font-weight: 500;
    margin-top: 0.25rem;
    font-size: 0.95rem;
    min-height: 1.5rem;
}