.usersstats {

    --base-size: 12px;

    /* --- СВЕТАЯ ТЕМА: Палитра --- */
    --color-bg: #f8fafc;       /* Очень светлый серо-голубой фон */
    --color-surface: #ffffff;  /* Чистый белый для карточек */
    --color-surface-hover: #f1f5f9;

    --color-text: #0f172a;     /* Темный текст (почти черный) */
    --color-text-secondary: #64748b; /* Серый текст для подписей */

    /* Акцентные цвета (можно оставить те же, они универсальны) */
    --color-purple: #8b5cf6;
    --color-green: #22c55e;
    --color-blue: #3b82f6;
    --color-orange: #f59e0b;
    --color-pink: #f18ab5;
    --color-burgundy: #cd2149;

    /* Границы теперь серые */
    --color-border: #e2e8f0;

    --text-xs: calc(var(--base-size) * 0.9);
    --text-sm: calc(var(--base-size) * 1);
    --text-sm2: calc(var(--base-size) * 1.25);
    --text-md: calc(var(--base-size) * 1.4);
    --text-lg: calc(var(--base-size) * 1.75);
    --text-xl: calc(var(--base-size) * 2.5);
    --text-xl2: calc(var(--base-size) * 3);
    --text-xxl: calc(var(--base-size) * 4);

    --radius: calc(var(--base-size) * 1.5);
    --radius-md: calc(var(--base-size) * 1);

    /* Тень для светлой темы (стандартная мягкая тень) */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    padding: calc(var(--base-size) * 3);
    margin: 0 auto;
    background-color: var(--color-bg);
    color: var(--color-text);
    border-radius: var(--radius);
}

.usersstats a{
    /* Делаем ссылки чуть темнее фона, но не черными */
    color: color-mix(in oklch, var(--color-text), #ffffff 20%);
    text-decoration: none;
}

.usersstats a:hover{
    color: var(--color-text);
}

/* Page Title Row */
.usersstats__page-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--base-size) * 2);
}

.usersstats__title-group {
    display: flex;
    align-items: center;
    gap: calc(var(--base-size) * 1.5);
}

.usersstats__title-icon {
    font-size: 4rem;
    color: var(--color-purple);
}

.usersstats__title-texts {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 0.5);
}

.usersstats__page-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: 0;
}

.usersstats__page-subtitle {
    font-size: var(--text-md);
    color: var(--color-text-secondary);
}

.usersstats__live-badge {
    display: flex;
    align-items: center;
    gap: calc(var(--base-size));
    padding: calc(var(--base-size)) calc(var(--base-size) * 2.5);
    background-color: var(--color-surface);
    border-radius: var(--radius);
    font-size: var(--text-md);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow); /* Добавили тень бейджу */
}

.usersstats__live-dot {
    width: calc(var(--base-size) * 1.2);
    height: calc(var(--base-size) * 1.2);
    background-color: var(--color-green);
    border-radius: 50%;
    display: inline-block;
}

/* Row 1: Stat Cards */
.usersstats__overview {
    display: grid;
    gap: calc(var(--base-size) * 2);
    margin-bottom: calc(var(--base-size) * 3);
}

.usersstats__overview.columns_1{grid-template-columns: repeat(1, 1fr);}
.usersstats__overview.columns_2{grid-template-columns: repeat(2, 1fr);}
.usersstats__overview.columns_3{grid-template-columns: repeat(3, 1fr);}
.usersstats__overview.columns_4{grid-template-columns: repeat(4, 1fr);}

.usersstats__stat-card {
    background-color: var(--color-surface);
    padding: calc(var(--base-size) * 2.5);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 1.5);
    border: 1px solid var(--color-border); /* Явная граница */
}

/* В светлой теме внутреннее свечение (box-shadow inset) часто смотрится грязно.
   Лучше использовать цветную полоску сверху или оставить просто фон.
   Здесь я убрал эффект свечения, оставив чистый вид. */
.usersstats__stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    pointer-events: none;
    /* Убраны box-shadow для ::before */
}

/* Нижняя градиентная линия (оставляем, она добавляет стиля) */
.usersstats__stat-card::after {
    content: '';
    position: absolute;
    bottom: 0; /* Довели до низа */
    left: 0;
    right: 0;
    height: 3px; /* Фиксированная высота выглядит аккуратнее */
    border-radius: 0 0 var(--radius) var(--radius);
}

.usersstats__stat-card--purple::after {
    background: linear-gradient(90deg, transparent, var(--color-purple), transparent);
}
.usersstats__stat-card--green::after {
    background: linear-gradient(90deg, transparent, var(--color-green), transparent);
}
.usersstats__stat-card--blue::after {
    background: linear-gradient(90deg, transparent, var(--color-blue), transparent);
}
.usersstats__stat-card--orange::after {
    background: linear-gradient(90deg, transparent, var(--color-orange), transparent);
}

.usersstats__card-icon {
    width: calc(var(--text-xl2) * 1.5);
    height: calc(var(--text-xl2) * 1.5);
    font-size: var(--text-xl2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    /* Граница иконки */
    border: 1px solid color-mix(in oklch, var(--color-border), transparent 50%);
}

/* Фон иконок делаем пастельным (светлым) */
.usersstats__stat-card--purple .usersstats__card-icon {
    background-color: color-mix(in oklch, var(--color-purple), #ffffff 90%); /* Светлый фон */
    color: var(--color-purple); /* Яркий цвет иконки */
}
.usersstats__stat-card--green .usersstats__card-icon {
    background-color: color-mix(in oklch, var(--color-green), #ffffff 90%);
    color: var(--color-green);
}
.usersstats__stat-card--blue .usersstats__card-icon {
    background-color: color-mix(in oklch, var(--color-blue), #ffffff 90%);
    color: var(--color-blue);
}
.usersstats__stat-card--orange .usersstats__card-icon {
    background-color: color-mix(in oklch, var(--color-orange), #ffffff 90%);
    color: var(--color-orange);
}

.usersstats__card-content {
    display: flex;
    gap: calc(var(--base-size) * 1);
}

.usersstats__card-value {
    font-size: var(--text-xl);
    font-weight: bold;
}

.usersstats__card-label {
    font-size: var(--text-md);
    color:var(--color-text-secondary);
}

.usersstats__card-label span{
    display: block;
}

/* Цвета текста в лейблах */
.usersstats__stat-card--purple .usersstats__card-label span { color: var(--color-purple); }
.usersstats__stat-card--green .usersstats__card-label span { color: var(--color-green); }
.usersstats__stat-card--blue .usersstats__card-label span { color: var(--color-blue); }
.usersstats__stat-card--orange .usersstats__card-label span { color: var(--color-orange); }

/* Row 2 */
.usersstats__info-blocks {
    display: grid;
    gap: calc(var(--base-size) * 2);
    margin-bottom: calc(var(--base-size) * 3);
}
.usersstats__info-blocks.columns_1{grid-template-columns: repeat(1, 1fr);}
.usersstats__info-blocks.columns_2{grid-template-columns: repeat(2, 1fr);}
.usersstats__info-blocks.columns_3{grid-template-columns: repeat(3, 1fr);}

.usersstats__block {
    background-color: var(--color-surface);
    padding: calc(var(--base-size) * 1.5);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
}

.usersstats__block-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--base-size) * 2);
}

.usersstats__block-title {
    font-size: var(--text-sm2);
    display: flex;
    align-items: center;
    gap: calc(var(--base-size));
    margin: 0;
    text-transform: uppercase; /* Часто хорошо смотрится в светлых темах */
    letter-spacing: 0.05em;
}

.usersstats__online-count-badge {
    background-color: color-mix(in oklch, var(--color-green), #ffffff 85%);
    color: var(--color-green); /* Или темный зеленый для контраста */
    padding: calc(var(--base-size) * 0.5) calc(var(--base-size) * 2);
    border-radius: var(--radius-md);
    font-weight: bold;
}

.usersstats__block-subtitle {
    font-size: var(--text-sm2);
    color: var(--color-text-secondary);
    margin-bottom: calc(var(--base-size) * 2);
}

/* User List */
.usersstats__user-list {
    list-style: none;
    padding: 0;
}
.columns_1 .usersstats__user-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--base-size) * 1);
}

.usersstats__user-item {
    display: flex;
    align-items: center;
    gap: calc(var(--base-size));
    padding: calc(var(--base-size)) 0;
    border-bottom: 1px solid var(--color-border);
}

.columns_1 .usersstats__user-item {
    border: none;
}

.usersstats__user-item:last-child {
    border-bottom: none;
}

.usersstats__user-avatar, .hero__inlist {
    width: calc(var(--base-size) * 3.5);
    height: calc(var(--base-size) * 3.5);
    border-radius: 50%;
    object-fit: cover;
}

.usersstats__user-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usersstats__online-dot {
    width: calc(var(--base-size) * 0.75);
    height: calc(var(--base-size) * 0.75);
    background-color: var(--color-green);
    border-radius: 50%;
    margin-left: auto;
}

.usersstats__more-users {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--base-size));
    padding: calc(var(--base-size)) calc(var(--base-size) * 1.5);
    margin-top: calc(var(--base-size) * 2);
    background-color: rgba(0,0,0,0.03); /* Очень легкий серый */
    border-radius: var(--radius);
    font-size: var(--text-sm2);
    color: var(--color-text-secondary);
}

/* Reg Block */
.usersstats__reg-section + .usersstats__reg-section {
    margin-top: calc(var(--base-size) * 3);
}

.usersstats__reg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--base-size));
    font-weight: bold;
}

.usersstats__reg-header span{
    color: var(--color-purple);
}

.usersstats__reg-count-badge {
    background-color: color-mix(in oklch, var(--color-purple), #ffffff 85%);
    color: var(--color-purple) !important;
    padding: calc(var(--base-size) * 0.3) calc(var(--base-size) * 1.5);
    border-radius: var(--radius-md);
}

.usersstats__user-icon{
    color: var(--color-purple) !important;
}

.usersstats__user-list--compact .usersstats__user-item {
    padding: calc(var(--base-size) * 0.1) 0;
    border: none;
}

.usersstats__more-users--inline {
    margin-top: calc(var(--base-size));
    text-align: center;
    background-color: rgba(0,0,0,0.03);
    border-radius: var(--radius-md);
    padding: calc(var(--base-size)) 0;
}

/* Birthday Block */
.usersstats__block-title--with-icon {
    justify-content: space-between;
}

.usersstats__gift-icon {
    font-size: calc(var(--base-size) * 2.2);
    color: var(--color-orange);
}

.usersstats__birthday-count-badge {
    background-color: color-mix(in oklch, var(--color-orange), #ffffff 85%);
    color: var(--color-orange);
    padding: calc(var(--base-size) * 0.3) calc(var(--base-size) * 1.5);
    border-radius: var(--radius-md);
    font-weight: bold;
}

.usersstats__birthday-list {
    list-style: none;
    padding: 0;
}

.usersstats__birthday-item {
    display: flex;
    align-items: center;
    gap: calc(var(--base-size));
    padding: calc(var(--base-size)) 0;
    border-bottom: 1px solid var(--color-border);
}

.usersstats__birthday-item:last-child {
    border-bottom: none;
}

.usersstats__age {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    margin-left: auto;
}

.usersstats__balloons {
    font-size: var(--text-sm);
}

.usersstats__birthday-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-top: calc(var(--base-size) * 2);
    padding: calc(var(--base-size));
    background-color: color-mix(in oklch, var(--color-orange), #ffffff 90%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-orange) !important;
    font-size: var(--text-sm2);
    cursor: pointer;
}

.usersstats__birthday-btn-icon{
    font-size: var(--text-lg);

}

.usersstats__arrow-icon {
    margin-left: auto;
}

/* Bottom Row */
.usersstats__bottom {
    display: flex;
    gap: calc(var(--base-size) * 2);
}

.usersstats__record {
    background-color: var(--color-surface);
    padding: calc(var(--base-size) * 3);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
    display: flex;
    gap: calc(var(--base-size) * 3);
    flex-grow: 1;
}

.usersstats__trophy-icon {
    font-size: var(--text-xxl);
    flex-shrink: 0;
    color: var(--color-burgundy); /* Убрали фильтр свечения для чистоты */
}

.usersstats__record-content {
    display: flex;
    align-items: center;
    gap: calc(var(--base-size) * 3);
    flex: 1;
}

.usersstats__record-info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 0.5);
}

.usersstats__record-title {
    font-size: var(--text-md);
    margin-bottom: 1rem;
}

.usersstats__record-value {
    font-size: var(--text-lg);
    color:var(--color-burgundy);
    font-weight: 600;
}

.usersstats__record-value span {
    font-size: var(--text-xl);
    font-weight: bold;
}

.usersstats__record-date {
    display: flex;
    align-items: center;
    gap: calc(var(--base-size) * 0.5);
    font-size: var(--text-sm2);
    color: var(--color-text-secondary);
}

.usersstats__thanks {
    background-color: var(--color-surface);
    padding: calc(var(--base-size) * 3);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: calc(var(--base-size) * 2.5);
    min-width: 40%;
    max-width: 50%;
}

.usersstats__heart-box {
    width: calc(var(--base-size) * 7);
    height: calc(var(--base-size) * 7);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    border: 2px solid var(--color-border);
    background-color: color-mix(in oklch, var(--color-burgundy), #ffffff 90%); /* Пастельный фон */
}

.usersstats__heart-icon-large {
    font-size: var(--text-xxl);
    color: var(--color-pink); /* Яркий цвет иконки */
}

.usersstats__thanks-text {
    font-size: var(--text-md);
}

/* modal */
#usersstats .overdid {
    display: none;
}
.modal .usersstats{
    border-radius: 0;
}
.modal .ajax-modal, .modal .ajax-ready{
    display: none;
}
.modal-body:has(.usersstats){
    padding: 0;
}

/* media */
@media (max-width: 992px) {
    .usersstats__overview.columns_2, .usersstats__overview.columns_4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .usersstats__page-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--base-size) * 0.5);
    }
    .usersstats__info-blocks {
        grid-template-columns: 1fr  !important;
    }
    .usersstats__bottom {
        flex-direction: column;
    }
    .usersstats__thanks{
        max-width: none;
    }
}

@media (max-width: 768px) {
    .usersstats__overview.columns_3 {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 576px) {
    .usersstats__overview {
        grid-template-columns: repeat(1, 1fr)  !important;
    }
    .usersstats {
        padding: calc(var(--base-size) * 1.5);
    }
    .usersstats__card-label span {
        display: inline-block;
    }
}