.nx-site-counter {
    --counter-card-bg: var(--nx-color-card-bg, var(--bs-body-bg, #fff));
    --counter-surface: var(--nx-color-surface, #f6f7f9);
    --counter-border: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color, #d9dee7)));
    --counter-text: var(--nx-color-text, var(--bs-body-color, #172033));
    --counter-muted: var(--nx-color-muted, var(--bs-secondary-color, #667085));
    --counter-primary: var(--nx-color-primary, #ed7615);
    display: grid;
    gap: 1.4rem;
}

.nx-site-counter .counter-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.nx-site-counter .counter-card,
.nx-site-counter .counter-month-panel {
    overflow: hidden;
    border: 1px solid var(--counter-border);
    border-radius: var(--nx-theme-radius-lg, 14px);
    background: var(--counter-card-bg);
    box-shadow: var(--nx-theme-shadow-sm, 0 8px 24px rgba(23, 32, 51, .06));
}

.nx-site-counter .counter-card__header,
.nx-site-counter .counter-month-panel__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 4.35rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--counter-border);
    background: linear-gradient(110deg,
        color-mix(in srgb, var(--counter-primary) 6%, var(--counter-card-bg)),
        var(--counter-card-bg) 60%);
}

.nx-site-counter .counter-card--online .counter-card__header {
    background: linear-gradient(110deg,
        color-mix(in srgb, var(--bs-success, #198754) 6%, var(--counter-card-bg)),
        var(--counter-card-bg) 60%);
}

.nx-site-counter .counter-card--users .counter-card__header {
    background: linear-gradient(110deg,
        color-mix(in srgb, var(--bs-warning, #ffc107) 7%, var(--counter-card-bg)),
        var(--counter-card-bg) 60%);
}

.nx-site-counter .counter-card__header h3,
.nx-site-counter .counter-month-panel__header h3 {
    margin: 0;
    color: var(--counter-text);
    font-size: 1.04rem;
    font-weight: 650;
}

.nx-site-counter .counter-card__icon,
.nx-site-counter .counter-month-panel__icon {
    display: inline-grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 2.35rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--counter-primary) 25%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--counter-primary) 9%, transparent);
    color: var(--counter-primary);
}

.nx-site-counter .counter-card--online .counter-card__icon {
    border-color: color-mix(in srgb, var(--bs-success, #198754) 25%, transparent);
    background: color-mix(in srgb, var(--bs-success, #198754) 9%, transparent);
    color: var(--bs-success, #198754);
}

.nx-site-counter .counter-card--users .counter-card__icon {
    border-color: color-mix(in srgb, var(--bs-warning, #ffc107) 34%, transparent);
    background: color-mix(in srgb, var(--bs-warning, #ffc107) 12%, transparent);
    color: var(--nx-template-badge-warning-text, #9a6700);
}

.nx-site-counter .counter-stat-list {
    padding: .35rem .9rem;
}

.nx-site-counter .counter-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.8rem;
    padding: .55rem .2rem;
    border-bottom: 1px solid color-mix(in srgb, var(--counter-border) 72%, transparent);
    color: var(--counter-text);
}

.nx-site-counter .counter-stat-row:last-child {
    border-bottom: 0;
}

.nx-site-counter .counter-stat-row > span {
    color: var(--counter-muted);
    font-size: .9rem;
}

.nx-site-counter .badge {
    min-width: 2.2rem;
    padding: .38rem .55rem;
    border-radius: var(--nx-theme-radius-sm, 8px);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.nx-site-counter .counter-month-panel__header {
    background: linear-gradient(110deg,
        color-mix(in srgb, var(--counter-muted) 5%, var(--counter-card-bg)),
        var(--counter-card-bg) 60%);
}

.nx-site-counter .counter-month-list {
    margin: 0;
    padding: .35rem .9rem;
    list-style: none;
}

.nx-site-counter .counter-month-row {
    display: grid;
    grid-template-columns: minmax(160px, .7fr) minmax(260px, 2.8fr) 3.2rem;
    gap: 1.2rem;
    align-items: center;
    min-height: 3.25rem;
    padding: .55rem .2rem;
    border-bottom: 1px solid color-mix(in srgb, var(--counter-border) 72%, transparent);
}

.nx-site-counter .counter-month-row:last-child {
    border-bottom: 0;
}

.nx-site-counter .counter-month-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    color: var(--counter-text);
    font-size: .86rem;
}

.nx-site-counter .counter-month-progress {
    min-width: 0;
}

.nx-site-counter .progress {
    width: 100%;
    height: .42rem;
    margin: 0;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--counter-muted) 15%, transparent);
}

.nx-site-counter .progress-bar {
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
        var(--counter-primary),
        color-mix(in srgb, var(--counter-primary) 72%, #ffb15f));
    transition: width .85s cubic-bezier(.22, 1, .36, 1);
}

.nx-site-counter .counter-month-percent {
    color: var(--counter-muted);
    font-size: .82rem;
    font-weight: 650;
    text-align: right;
}

/* Template-controlled soft badges. */
.nx-site-counter .nx-badge--primary,
.nx-site-counter .badge.bg-primary {
    background-color: var(--nx-template-badge-primary-bg, color-mix(in srgb, var(--nx-color-primary, #ed7615) 10%, transparent)) !important;
    border: 1px solid var(--nx-template-badge-primary-border, color-mix(in srgb, var(--nx-color-primary, #ed7615) 26%, transparent)) !important;
    color: var(--nx-template-badge-primary-text, var(--nx-color-primary, #d96308)) !important;
}

.nx-site-counter .nx-badge--secondary,
.nx-site-counter .badge.bg-secondary {
    background-color: var(--nx-template-badge-secondary-bg, color-mix(in srgb, var(--nx-color-muted, #667085) 9%, transparent)) !important;
    border: 1px solid var(--nx-template-badge-secondary-border, color-mix(in srgb, var(--nx-color-muted, #667085) 22%, transparent)) !important;
    color: var(--nx-template-badge-secondary-text, var(--nx-color-muted, #667085)) !important;
}

.nx-site-counter .nx-badge--success,
.nx-site-counter .badge.bg-success {
    background-color: var(--nx-template-badge-success-bg, color-mix(in srgb, var(--bs-success, #198754) 9%, transparent)) !important;
    border: 1px solid var(--nx-template-badge-success-border, color-mix(in srgb, var(--bs-success, #198754) 24%, transparent)) !important;
    color: var(--nx-template-badge-success-text, var(--bs-success, #198754)) !important;
}

.nx-site-counter .nx-badge--warning,
.nx-site-counter .badge.bg-warning {
    background-color: var(--nx-template-badge-warning-bg, color-mix(in srgb, var(--bs-warning, #ffc107) 13%, transparent)) !important;
    border: 1px solid var(--nx-template-badge-warning-border, color-mix(in srgb, var(--bs-warning, #ffc107) 30%, transparent)) !important;
    color: var(--nx-template-badge-warning-text, #9a6700) !important;
}

.nx-site-counter .nx-badge--danger,
.nx-site-counter .badge.bg-danger {
    background-color: var(--nx-template-badge-danger-bg, color-mix(in srgb, var(--bs-danger, #dc3545) 9%, transparent)) !important;
    border: 1px solid var(--nx-template-badge-danger-border, color-mix(in srgb, var(--bs-danger, #dc3545) 24%, transparent)) !important;
    color: var(--nx-template-badge-danger-text, var(--bs-danger, #dc3545)) !important;
}

@media (max-width: 991.98px) {
    .nx-site-counter .counter-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nx-site-counter .counter-card--users {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .nx-site-counter .counter-month-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .55rem 1rem;
        padding: .75rem .2rem;
    }

    .nx-site-counter .counter-month-progress {
        grid-column: 1;
    }

    .nx-site-counter .counter-month-percent {
        grid-column: 2;
    }
}

@media (max-width: 575.98px) {
    .nx-site-counter .counter-overview {
        grid-template-columns: 1fr;
    }

    .nx-site-counter .counter-card--users {
        grid-column: auto;
    }

    .nx-site-counter .counter-month-row {
        grid-template-columns: 1fr auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nx-site-counter .progress-bar {
        transition: none;
    }
}