/* /Components/PortalContent.razor.rz.scp.css */
/* /Components/TelegramAuthButton.razor.rz.scp.css */
/* Стили для кнопки Telegram */
.btn-telegram[b-p8pue4t11o] {
    background-color: #0088cc;
    color: white;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 136, 204, 0.25);
}

.btn-telegram i[b-p8pue4t11o] {
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

.btn-telegram:hover[b-p8pue4t11o],
.btn-telegram:focus[b-p8pue4t11o] {
    background-color: #0077b5;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 136, 204, 0.4);
}

/* Стиль для блокировки скролла при открытом модальном окне */
:global(.modal-open)[b-p8pue4t11o] {
    overflow: hidden;
    padding-right: 17px; /* Компенсация для скроллбара, чтобы избежать смещения контента */
}

@media (max-width: 576px) {
    .btn-telegram[b-p8pue4t11o] {
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
    }
}
/* /Components/TelegramModal.razor.rz.scp.css */
.modal-overlay[b-a2lnkz8gc2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-a2lnkz8gc2 0.3s ease;

    /* Важные стили для предотвращения проблем с позиционированием */
    transform: translateZ(0);
    will-change: opacity;
}


.modal-dialog[b-a2lnkz8gc2] {
    width: 90%;
    max-width: 420px;
    margin: 0 auto;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    animation: slideIn-b-a2lnkz8gc2 0.3s ease;
    pointer-events: auto;
}

.modal-content[b-a2lnkz8gc2] {
    background-color: #fff;
    border-radius: 16px;
    border: none;
    overflow: hidden;
}

/* Заголовок */
.modal-header[b-a2lnkz8gc2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background-color: #0088cc;
    color: white;
    border-bottom: none;
}

.modal-title[b-a2lnkz8gc2] {
    margin: 0;
    flex-grow: 1;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
}

.btn-close[b-a2lnkz8gc2] {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 0.8;
    padding: 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    border: none;
}

.btn-close:hover[b-a2lnkz8gc2] {
    opacity: 1;
}

/* Тело модального окна */
.modal-body[b-a2lnkz8gc2] {
    padding: 1.75rem;
    background-color: white;
}

/* Информация о Telegram */
.telegram-info h4[b-a2lnkz8gc2] {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
}

.telegram-info p[b-a2lnkz8gc2] {
    color: #6c757d;
    margin-bottom: 0;
}

/* Лого Telegram */
.telegram-logo-container[b-a2lnkz8gc2] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    background-color: #0088cc;
    border-radius: 50%;
    margin: 0 auto;
}

.telegram-logo-icon[b-a2lnkz8gc2] {
    font-size: 2.5rem;
    color: white;
}

/* QR-код */
.qr-container[b-a2lnkz8gc2] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    min-height: 230px;
}

#qrcode[b-a2lnkz8gc2] {
    display: flex;
    justify-content: center;
}

#qrcode img[b-a2lnkz8gc2] {
    margin: 0 auto;
}

/* Блок статуса */
.telegram-status-container[b-a2lnkz8gc2] {
    padding: 1rem;
    margin-top: 1.25rem;
    background-color: #e9f6fd;
    border-radius: 12px;
    border: 1px solid #b8e3f8;
    color: #0d6efd;
    font-weight: 500;
}

/* Спиннер */
.telegram-spinner .spinner-border[b-a2lnkz8gc2] {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: text-bottom;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-a2lnkz8gc2 0.75s linear infinite;
}

/* Кнопка в модальном окне */
.btn-primary[b-a2lnkz8gc2] {
    background-color: #0088cc;
    border-color: #0088cc;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover[b-a2lnkz8gc2] {
    background-color: #0077b5;
    border-color: #0077b5;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 136, 204, 0.3);
}

/* Сообщение об ошибке */
.alert-danger[b-a2lnkz8gc2] {
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
}

/* Анимации для модального окна */
@keyframes fadeIn-b-a2lnkz8gc2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-b-a2lnkz8gc2 {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Анимация для спиннера */
@keyframes spinner-border-b-a2lnkz8gc2 {
    to { transform: rotate(360deg); }
}

/* Адаптивность */
@media (max-width: 576px) {
    .modal-body[b-a2lnkz8gc2] {
        padding: 1.25rem;
    }

    .qr-container[b-a2lnkz8gc2] {
        padding: 1rem;
    }

    .telegram-info h4[b-a2lnkz8gc2] {
        font-size: 1.2rem;
    }

    .telegram-info p[b-a2lnkz8gc2] {
        font-size: 0.9rem;
    }
}
/* /Layout/LoginDisplay.razor.rz.scp.css */
/* Основные стили для навбара */
.navbar[b-y2rlhqdxva] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to right, #392273, #2d1b5a) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 0.75rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Стили для dropdown-header */
.dropdown-header[b-y2rlhqdxva] {
    color: white !important;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.navbar-content[b-y2rlhqdxva] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 1.5rem;
}

/* Стили для логотипа */
.navbar-brand[b-y2rlhqdxva] {
    display: flex;
    align-items: center;
    padding: 0;
    flex-shrink: 0;
}

.logo-icon[b-y2rlhqdxva] {
    font-size: 1.8rem;
    background: linear-gradient(135deg, #ff69b4, #6a11cb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 8px;
}

.logo-text[b-y2rlhqdxva] {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
}

.logo-accent[b-y2rlhqdxva] {
    background: linear-gradient(135deg, #ff69b4, #6a11cb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* Стили для кнопки переключения */
.navbar-toggler[b-y2rlhqdxva] {
    display: none;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
}

.navbar-toggler:hover[b-y2rlhqdxva] {
    background: rgba(255, 255, 255, 0.1);
}

.navbar-toggler-icon[b-y2rlhqdxva] {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* Стили для меню */
.collapse-menu[b-y2rlhqdxva] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    margin-left: 2rem;
    background-color: transparent;
}

.navbar-nav[b-y2rlhqdxva] {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1rem;
}

/* Стили для мобильного меню авторизованного пользователя */
.mobile-user-nav[b-y2rlhqdxva] {
    display: none;
}

.nav-link[b-y2rlhqdxva] {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    border-radius: 4px;
    position: relative;
}

.nav-link:hover[b-y2rlhqdxva],
.nav-link.active[b-y2rlhqdxva] {
    color: white;
}

.nav-link[b-y2rlhqdxva]:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.75rem;
    right: 0.75rem;
    height: 2px;
    background: linear-gradient(90deg, #ff69b4, #6a11cb);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    border-radius: 2px;
}

.nav-link:hover[b-y2rlhqdxva]:before,
.nav-link.active[b-y2rlhqdxva]:before {
    transform: scaleX(1);
}

/* Кнопка выхода стилизованная как ссылка */
.logout-link[b-y2rlhqdxva] {
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

/* Блок авторизации */
.auth-container[b-y2rlhqdxva] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* Стили кнопок */
.auth-button[b-y2rlhqdxva] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    border: none;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}

.login-button[b-y2rlhqdxva] {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.login-button:hover[b-y2rlhqdxva] {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.register-button[b-y2rlhqdxva] {
    background: linear-gradient(90deg, #ff69b4, #6a11cb);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
}

.register-button:hover[b-y2rlhqdxva] {
    box-shadow: 0 6px 18px rgba(255, 105, 180, 0.4);
    transform: translateY(-2px);
}

.connect-button[b-y2rlhqdxva] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    margin-left: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
}

.connect-button:hover[b-y2rlhqdxva] {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
    transform: translateY(-2px);
}

/* Выпадающее меню пользователя */
.user-dropdown[b-y2rlhqdxva] {
    position: relative;
    width: 100%;
}

.user-dropdown-btn[b-y2rlhqdxva] {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.user-dropdown-btn:hover[b-y2rlhqdxva] {
    background-color: rgba(255, 255, 255, 0.2);
}

.user-dropdown-menu[b-y2rlhqdxva] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 250px;
    max-height: 500px;
    overflow-y: auto;
    background: linear-gradient(to bottom, #392273, #2d1b5a);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transform-origin: top right;
    transform: scale(0.95);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1001;
    padding: 0.5rem 0;
}

/* Показывать меню по клику вместо hover для поддержки тач-устройств */
.user-dropdown-menu.show-menu[b-y2rlhqdxva] {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

/* Сохраняем hover-поведение для десктопов */
@media (min-width: 992px) {
    .user-dropdown:hover .user-dropdown-menu[b-y2rlhqdxva] {
        transform: scale(1);
        opacity: 1;
        visibility: visible;
    }
}

.dropdown-item[b-y2rlhqdxva] {
    display: flex;
    align-items: center;
    color: white;
    padding: 0.6rem 1rem;
    text-decoration: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-size: 0.9rem;
    white-space: nowrap;
}

.dropdown-item:hover[b-y2rlhqdxva] {
    background-color: rgba(255, 255, 255, 0.1);
}

.dropdown-item i[b-y2rlhqdxva] {
    color: #ff69b4;
    width: 20px;
    text-align: center;
}

.dropdown-divider[b-y2rlhqdxva] {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 0.5rem 0;
}

/* Прокрутка для выпадающего меню */
.user-dropdown-menu[b-y2rlhqdxva]::-webkit-scrollbar {
    width: 5px;
}

.user-dropdown-menu[b-y2rlhqdxva]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.user-dropdown-menu[b-y2rlhqdxva]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

/* Адаптивные стили */
@media (max-width: 991.98px) {
    .navbar-toggler[b-y2rlhqdxva] {
        display: block;
    }

    .collapse-menu[b-y2rlhqdxva] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: linear-gradient(to bottom, #392273, #2d1b5a);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        max-height: 80vh;
        overflow-y: auto;
        margin-left: 0;
    }

    .collapse-menu.show[b-y2rlhqdxva] {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    /* Скрываем десктопные элементы на мобильных устройствах */
    .desktop-nav[b-y2rlhqdxva], .desktop-auth[b-y2rlhqdxva] {
        display: none !important;
    }

    /* Показываем мобильное меню пользователя */
    .mobile-user-nav[b-y2rlhqdxva] {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 1rem;
    }

    .navbar-nav[b-y2rlhqdxva] {
        flex-direction: column;
        width: 100%;
        margin-bottom: 1rem;
    }

    .nav-item[b-y2rlhqdxva] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .mobile-user-nav .nav-item i[b-y2rlhqdxva] {
        color: #ff69b4;
        width: 20px;
        text-align: center;
    }

    .nav-link[b-y2rlhqdxva] {
        width: 100%;
        padding: 0.75rem 1rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 6px;
    }

    .nav-link:hover[b-y2rlhqdxva],
    .nav-link.active[b-y2rlhqdxva] {
        background: rgba(255, 255, 255, 0.1);
    }

    .auth-container[b-y2rlhqdxva] {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        margin-top: 1rem;
    }

    .auth-button[b-y2rlhqdxva],
    .connect-button[b-y2rlhqdxva],
    .user-dropdown-btn[b-y2rlhqdxva] {
        width: 100%;
        justify-content: center;
        padding: 0.6rem 1rem; /* Увеличиваем площадь нажатия для сенсорных экранов */
    }

    /* Выпадающее меню пользователя в мобильном виде теперь не нужно */
    .user-dropdown-menu[b-y2rlhqdxva] {
        display: none;
    }
}

@media (max-width: 480px) {
    .navbar-content[b-y2rlhqdxva] {
        padding: 0 1rem;
    }

    .logo-text[b-y2rlhqdxva] {
        font-size: 1.2rem;
    }

    .logo-icon[b-y2rlhqdxva] {
        font-size: 1.6rem;
    }

    .greeting-text[b-y2rlhqdxva] {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Увеличиваем размер шрифта для лучшей читаемости */
    .dropdown-item[b-y2rlhqdxva], .nav-link[b-y2rlhqdxva] {
        font-size: 1rem;
        padding: 0.8rem 1rem;
    }

    /* Увеличиваем площадь нажатия для мобильных */
    .nav-link[b-y2rlhqdxva],
    .auth-button[b-y2rlhqdxva],
    .user-dropdown-btn[b-y2rlhqdxva] {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
}

@keyframes fadeInDown-b-y2rlhqdxva {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Админские стили для навигации */
.admin-badge[b-y2rlhqdxva] {
    color: #ffc107;
    margin-left: 5px;
    font-size: 0.8rem;
    animation: pulse-b-y2rlhqdxva 2s infinite;
}

@keyframes pulse-b-y2rlhqdxva {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* Стили для админской секции в мобильном меню */
.admin-section-mobile[b-y2rlhqdxva] {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 193, 7, 0.3);
}

.admin-divider-mobile[b-y2rlhqdxva] {
    margin-bottom: 10px;
}

.admin-label[b-y2rlhqdxva] {
    color: #ffc107;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    padding: 0 0.75rem;
}

.admin-nav-link[b-y2rlhqdxva] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
    border-left: 3px solid #ffc107;
    margin: 5px 0;
    border-radius: 0 4px 4px 0;
    color: #ffc107 !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.admin-nav-link:hover[b-y2rlhqdxva] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 193, 7, 0.1) 100%);
    transform: translateX(3px);
    color: #ffca2c !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.admin-nav-link i[b-y2rlhqdxva] {
    color: #ffc107;
}

/* Стили для десктопного выпадающего меню */
.admin-divider[b-y2rlhqdxva] {
    border-color: rgba(255, 193, 7, 0.4) !important;
    margin: 8px 0 !important;
}

.admin-header[b-y2rlhqdxva] {
    color: #ffc107 !important;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
    border-radius: 4px;
    margin: 4px 0;
}

.admin-dropdown-item[b-y2rlhqdxva] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.05) 0%, rgba(255, 193, 7, 0.1) 100%);
    border-left: 3px solid #ffc107;
    margin: 2px 0;
    border-radius: 0 4px 4px 0;
    color: #ffc107 !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.admin-dropdown-item:hover[b-y2rlhqdxva] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.25) 100%);
    transform: translateX(2px);
    color: #ffca2c !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.admin-dropdown-item i[b-y2rlhqdxva] {
    color: #ffc107 !important;
}

/* Адаптивные стили */
@media (max-width: 991px) {
    .admin-section-mobile[b-y2rlhqdxva] {
        border-top: 1px solid rgba(255, 193, 7, 0.3);
    }

    .admin-nav-link[b-y2rlhqdxva] {
        margin: 5px 10px;
    }
}

/* Дополнительные эффекты для админских элементов */
.admin-nav-link[b-y2rlhqdxva],
.admin-dropdown-item[b-y2rlhqdxva] {
    position: relative;
    overflow: hidden;
}

.admin-nav-link[b-y2rlhqdxva]::before,
.admin-dropdown-item[b-y2rlhqdxva]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.2), transparent);
    transition: left 0.5s;
}

.admin-nav-link:hover[b-y2rlhqdxva]::before,
.admin-dropdown-item:hover[b-y2rlhqdxva]::before {
    left: 100%;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-zxwblwjwfq] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-zxwblwjwfq] {
    flex: 1;
    padding-top: 70px; /* Добавляем отступ под фиксированный навбар */
}

/* Customize scrollbar */
[b-zxwblwjwfq]::-webkit-scrollbar {
    width: 10px;
}

[b-zxwblwjwfq]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

[b-zxwblwjwfq]::-webkit-scrollbar-thumb {
    background: rgba(255, 105, 180, 0.5);
    border-radius: 5px;
}

[b-zxwblwjwfq]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 105, 180, 0.8);
}

/* Customize selection */
[b-zxwblwjwfq]::selection {
    background-color: rgba(255, 105, 180, 0.3);
    color: #333;
}
/* /Pages/Admin/PromoCodes/AdminPromoCodes.razor.rz.scp.css */
.admin-promo-codes[b-jzpewvmt8w] {
    padding: 16px;
}

.page-header[b-jzpewvmt8w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.breadcrumb[b-jzpewvmt8w] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6c757d;
}
.breadcrumb-item i[b-jzpewvmt8w] { margin-right: 6px; }
.breadcrumb-current[b-jzpewvmt8w] { font-weight: 600; }

.cards-grid[b-jzpewvmt8w] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.card[b-jzpewvmt8w] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 10px;
    overflow: hidden;
}
.card-header[b-jzpewvmt8w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.card-header h5[b-jzpewvmt8w] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-body[b-jzpewvmt8w] {
    padding: 16px;
}

.form-grid[b-jzpewvmt8w] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.form-group[b-jzpewvmt8w] { display: flex; flex-direction: column; gap: 6px; }
.form-group label[b-jzpewvmt8w] { font-size: .9rem; color: #555; }

.form-actions[b-jzpewvmt8w] {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.sort-controls[b-jzpewvmt8w] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sort-controls label[b-jzpewvmt8w] { color: #555; }

.table-responsive[b-jzpewvmt8w] { overflow-x: auto; }
.table thead th.sortable[b-jzpewvmt8w] { cursor: pointer; white-space: nowrap; }
.table thead th .sort-icon[b-jzpewvmt8w] { margin-left: 6px; color: #6c757d; }
.promo-table code[b-jzpewvmt8w] { background: rgba(0,0,0,.04); padding: 2px 6px; border-radius: 6px; }
.promo-table tr.invalid[b-jzpewvmt8w] { opacity: .7; }

.status-badge[b-jzpewvmt8w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .85rem;
}
.status-badge.ok[b-jzpewvmt8w] { background: rgba(25,135,84,.1); color: #198754; }
.status-badge.bad[b-jzpewvmt8w] { background: rgba(220,53,69,.1); color: #dc3545; }

.actions[b-jzpewvmt8w] { white-space: nowrap; }

.copy-button[b-jzpewvmt8w] {
    margin-left: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6c757d;
}
.copy-button:hover[b-jzpewvmt8w] { color: #0d6efd; }

.notification[b-jzpewvmt8w] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.notification--error[b-jzpewvmt8w] { background: rgba(220,53,69,.1); color: #842029; border: 1px solid rgba(220,53,69,.2); }
.notification--success[b-jzpewvmt8w] { background: rgba(25,135,84,.1); color: #0f5132; border: 1px solid rgba(25,135,84,.2); }
.notification-title[b-jzpewvmt8w] { font-weight: 600; margin-bottom: 2px; }
.notification-close[b-jzpewvmt8w] {
    margin-left: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.loading-container[b-jzpewvmt8w] {
    display: grid;
    place-items: center;
    padding: 24px 0;
    color: #6c757d;
}
.loading-spinner[b-jzpewvmt8w] {
    width: 24px; height: 24px;
    border: 3px solid rgba(0,0,0,.1);
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: spin-b-jzpewvmt8w 1s linear infinite;
    margin-bottom: 8px;
}
@keyframes spin-b-jzpewvmt8w { to { transform: rotate(360deg); } }

.empty-state[b-jzpewvmt8w] {
    display: grid;
    place-items: center;
    padding: 24px 0;
    color: #6c757d;
    gap: 8px;
}

.action-button[b-jzpewvmt8w] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}
.action-button--primary[b-jzpewvmt8w] { background: #0d6efd; color: white; }
.action-button--secondary[b-jzpewvmt8w] { background: #6c757d; color: white; }
.action-button--warning[b-jzpewvmt8w] { background: #ffc107; color: #000; }
.action-button--info[b-jzpewvmt8w] { background: #0dcaf0; color: #000; }
.action-button--small[b-jzpewvmt8w] { padding: 6px 10px; font-size: .85rem; }

.modal-backdrop[b-jzpewvmt8w] {
    position: fixed; inset: 0; background: rgba(0,0,0,.4);
}
.modal[b-jzpewvmt8w] {
    position: fixed; left: 50%; top: 10%;
    transform: translateX(-50%);
    width: min(720px, 92vw);
    background: var(--bs-body-bg, #fff);
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.1);
    overflow: hidden;
    z-index: 1000;
}
.modal-header[b-jzpewvmt8w] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,.08);
}
.modal-body[b-jzpewvmt8w] { padding: 14px; }
.modal-close[b-jzpewvmt8w] { border: none; background: transparent; cursor: pointer; }
/* /Pages/Admin/Servers/AdminServer.razor.rz.scp.css */

/* AdminServer.razor.css - Современный дизайн страницы детального просмотра сервера */

/* Основные переменные */
:root[b-63or9skkzg] {
    --primary-color: #0066cc;
    --primary-light: #e6f3ff;
    --success-color: #00b894;
    --danger-color: #e17055;
    --warning-color: #fdcb6e;
    --info-color: #00cec9;
    --secondary-color: #636e72;
    --light-color: #f8f9fa;
    --dark-color: #2d3436;
    --border-color: #dee2e6;
    --border-radius: 12px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --transition: all 0.3s ease;
}

/* Основной контейнер */
.admin-server-details-container[b-63or9skkzg] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 2rem;
}

/* Заголовок страницы */
.page-header[b-63or9skkzg] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}

.header-navigation[b-63or9skkzg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.navigation-left[b-63or9skkzg] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.back-button[b-63or9skkzg] {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.back-button:hover[b-63or9skkzg] {
    background: #0052a3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.breadcrumb-path[b-63or9skkzg] {
    display: flex;
    align-items: center;
    font-size: 1rem;
    gap: 0.5rem;
}

.breadcrumb-item[b-63or9skkzg] {
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.breadcrumb-current[b-63or9skkzg] {
    color: var(--dark-color);
    font-weight: 600;
}

.breadcrumb-separator[b-63or9skkzg] {
    color: var(--secondary-color);
    margin: 0 0.5rem;
}

.header-actions[b-63or9skkzg] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Обзорная карточка сервера */
.server-overview[b-63or9skkzg] {
    margin-bottom: 2rem;
}

.server-status-card[b-63or9skkzg] {
    background: white;
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--primary-color);
    overflow: hidden;
}

.status-header[b-63or9skkzg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    gap: 2rem;
}

.server-title-section[b-63or9skkzg] {
    flex: 1;
}

.server-title[b-63or9skkzg] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.server-type-icon[b-63or9skkzg] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), #0052a3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.server-name-group[b-63or9skkzg] {
    flex: 1;
}

.server-name-group h2[b-63or9skkzg] {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-color);
}

.server-subtitle[b-63or9skkzg] {
    color: var(--secondary-color);
    font-size: 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.server-status-section[b-63or9skkzg] {
    text-align: right;
    flex-shrink: 0;
}

.server-status-badge[b-63or9skkzg] {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.server-status-badge.online[b-63or9skkzg] {
    background: var(--success-color);
    color: white;
}

.server-status-badge.offline[b-63or9skkzg] {
    background: var(--danger-color);
    color: white;
}

.last-update[b-63or9skkzg] {
    color: var(--secondary-color);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
}

.status-indicators[b-63or9skkzg] {
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
}

.indicator-group[b-63or9skkzg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.indicator[b-63or9skkzg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 10px;
    transition: var(--transition);
    border: 2px solid transparent;
}

.indicator.active[b-63or9skkzg] {
    background: linear-gradient(135deg, rgba(0, 184, 148, 0.1), rgba(0, 184, 148, 0.05));
    border-color: rgba(0, 184, 148, 0.3);
}

.indicator.inactive[b-63or9skkzg] {
    background: rgba(108, 117, 125, 0.05);
    border-color: rgba(108, 117, 125, 0.2);
}

.indicator-icon[b-63or9skkzg] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.indicator.active .indicator-icon[b-63or9skkzg] {
    background: var(--success-color);
    color: white;
}

.indicator.inactive .indicator-icon[b-63or9skkzg] {
    background: var(--secondary-color);
    color: white;
}

.indicator-text[b-63or9skkzg] {
    flex: 1;
}

.indicator-label[b-63or9skkzg] {
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 0.25rem;
}

.indicator-status[b-63or9skkzg] {
    font-size: 0.9rem;
    color: var(--secondary-color);
}

/* Сетка деталей */
.server-details-grid[b-63or9skkzg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.details-card[b-63or9skkzg] {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition);
    border-left: 4px solid var(--border-color);
}

.details-card:hover[b-63or9skkzg] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.details-card--primary[b-63or9skkzg] {
    border-left-color: var(--primary-color);
}

.details-card--success[b-63or9skkzg] {
    border-left-color: var(--success-color);
}

.details-card--warning[b-63or9skkzg] {
    border-left-color: var(--warning-color);
}

.details-card--info[b-63or9skkzg] {
    border-left-color: var(--info-color);
}

.details-card--danger[b-63or9skkzg] {
    border-left-color: var(--danger-color);
}

.card-header[b-63or9skkzg] {
    background: var(--light-color);
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.card-header h5[b-63or9skkzg] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-header i[b-63or9skkzg] {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.card-body[b-63or9skkzg] {
    padding: 1.5rem;
}

/* Строки деталей */
.detail-row[b-63or9skkzg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    gap: 1rem;
}

.detail-row:last-child[b-63or9skkzg] {
    border-bottom: none;
}

.detail-label[b-63or9skkzg] {
    font-weight: 600;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.detail-label i[b-63or9skkzg] {
    color: var(--primary-color);
    width: 20px;
    text-align: center;
}

.detail-value[b-63or9skkzg] {
    font-weight: 500;
    color: var(--dark-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: flex-end;
}

.detail-value code[b-63or9skkzg] {
    background: rgba(0, 102, 204, 0.1);
    color: var(--primary-color);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: 500;
}

.copy-button[b-63or9skkzg] {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: var(--transition);
    color: var(--secondary-color);
}

.copy-button:hover[b-63or9skkzg] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.server-type-badge[b-63or9skkzg] {
    background: var(--primary-color);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Метрики производительности */
.performance-metrics[b-63or9skkzg] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.metric[b-63or9skkzg] {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    padding: 1.5rem;
    transition: var(--transition);
}

.metric:hover[b-63or9skkzg] {
    background: rgba(0, 0, 0, 0.04);
}

.metric-header[b-63or9skkzg] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.metric-icon[b-63or9skkzg] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.metric-icon.cpu[b-63or9skkzg] {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.metric-icon.memory[b-63or9skkzg] {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}

.metric-icon.connections[b-63or9skkzg] {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.metric-info[b-63or9skkzg] {
    flex: 1;
}

.metric-label[b-63or9skkzg] {
    font-size: 0.9rem;
    color: var(--secondary-color);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.metric-value[b-63or9skkzg] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-color);
}

/* Офлайн состояние */
.offline-card[b-63or9skkzg] {
    border-left-color: var(--danger-color);
}

.offline-card .card-header[b-63or9skkzg] {
    background: rgba(225, 112, 85, 0.1);
    border-bottom-color: rgba(225, 112, 85, 0.2);
}

.offline-card .card-header h5[b-63or9skkzg] {
    color: var(--danger-color);
}

.offline-message[b-63or9skkzg] {
    color: var(--secondary-color);
    margin-bottom: 1rem;
    text-align: center;
    font-style: italic;
}

.error-details[b-63or9skkzg] {
    background: rgba(225, 112, 85, 0.05);
    border: 1px solid rgba(225, 112, 85, 0.2);
    border-radius: 8px;
    padding: 1rem;
}

.error-title[b-63or9skkzg] {
    font-weight: 600;
    color: var(--danger-color);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-message[b-63or9skkzg] {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: var(--danger-color);
    background: rgba(225, 112, 85, 0.1);
    padding: 0.75rem;
    border-radius: 4px;
    word-break: break-word;
}

/* Переадресация */
.forward-info .detail-row[b-63or9skkzg] {
    align-items: flex-start;
}

.forward-connection[b-63or9skkzg] {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.1), rgba(0, 184, 148, 0.05));
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    border-left: 4px solid var(--info-color);
}

.connection-flow[b-63or9skkzg] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
    color: var(--dark-color);
}

.connection-arrow[b-63or9skkzg] {
    color: var(--info-color);
    font-size: 1.2rem;
}

/* Кнопки действий */
.action-buttons[b-63or9skkzg] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.action-button[b-63or9skkzg] {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-weight: 500;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    text-decoration: none;
    font-size: 0.95rem;
}

.action-button:disabled[b-63or9skkzg] {
    opacity: 0.6;
    cursor: not-allowed;
}

.action-button--primary[b-63or9skkzg] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.action-button--primary:hover:not(:disabled)[b-63or9skkzg] {
    background: #0052a3;
    border-color: #0052a3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.action-button--warning[b-63or9skkzg] {
    background: var(--warning-color);
    color: var(--dark-color);
    border-color: var(--warning-color);
}

.action-button--warning:hover:not(:disabled)[b-63or9skkzg] {
    background: #e6b800;
    transform: translateY(-1px);
}

.action-button--info[b-63or9skkzg] {
    background: var(--info-color);
    color: white;
    border-color: var(--info-color);
}

.action-button--info:hover:not(:disabled)[b-63or9skkzg] {
    background: #00a085;
    transform: translateY(-1px);
}

.action-button--danger[b-63or9skkzg] {
    background: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

.action-button--danger:hover:not(:disabled)[b-63or9skkzg] {
    background: #d63031;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(225, 112, 85, 0.3);
}

/* Загрузка и ошибки */
.loading-container[b-63or9skkzg] {
    background: white;
    border-radius: var(--border-radius);
    padding: 4rem 2rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.loading-content[b-63or9skkzg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.loading-spinner[b-63or9skkzg] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--light-color);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-63or9skkzg 1s linear infinite;
}

@keyframes spin-b-63or9skkzg {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text[b-63or9skkzg] {
    color: var(--secondary-color);
    font-size: 1rem;
    margin: 0;
}

.error-state[b-63or9skkzg] {
    background: white;
    border-radius: var(--border-radius);
    padding: 4rem 2rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.error-icon[b-63or9skkzg] {
    font-size: 4rem;
    color: var(--danger-color);
    opacity: 0.7;
    margin-bottom: 2rem;
}

.error-title[b-63or9skkzg] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 1rem;
}

.error-description[b-63or9skkzg] {
    font-size: 1rem;
    color: var(--secondary-color);
    margin-bottom: 2rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Уведомления */
.notification[b-63or9skkzg] {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 1060;
    max-width: 400px;
    background: white;
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-left: 4px solid;
    animation: slideInRight-b-63or9skkzg 0.3s ease;
}

@keyframes slideInRight-b-63or9skkzg {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.notification--success[b-63or9skkzg] {
    border-left-color: var(--success-color);
}

.notification--error[b-63or9skkzg] {
    border-left-color: var(--danger-color);
}

.notification--success i[b-63or9skkzg] {
    color: var(--success-color);
}

.notification--error i[b-63or9skkzg] {
    color: var(--danger-color);
}

.notification-content[b-63or9skkzg] {
    flex: 1;
}

.notification-title[b-63or9skkzg] {
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 0.25rem;
}

.notification-message[b-63or9skkzg] {
    color: var(--secondary-color);
    margin: 0;
}

.notification-close[b-63or9skkzg] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--secondary-color);
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: var(--transition);
}

.notification-close:hover[b-63or9skkzg] {
    background: var(--light-color);
    color: var(--dark-color);
}

/* Адаптивность */
@media (max-width: 1200px) {
    .server-details-grid[b-63or9skkzg] {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
}

@media (max-width: 768px) {
    .admin-server-details-container[b-63or9skkzg] {
        padding: 1rem;
    }

    .page-header[b-63or9skkzg] {
        padding: 1.5rem;
    }

    .header-navigation[b-63or9skkzg] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .navigation-left[b-63or9skkzg] {
        justify-content: flex-start;
    }

    .header-actions[b-63or9skkzg] {
        justify-content: center;
    }

    .breadcrumb-path[b-63or9skkzg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .breadcrumb-separator[b-63or9skkzg] {
        display: none;
    }

    .server-details-grid[b-63or9skkzg] {
        grid-template-columns: 1fr;
    }

    .status-header[b-63or9skkzg] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .server-status-section[b-63or9skkzg] {
        text-align: left;
    }

    .server-title[b-63or9skkzg] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    .server-name-group h2[b-63or9skkzg] {
        font-size: 1.5rem;
    }

    .indicator-group[b-63or9skkzg] {
        grid-template-columns: 1fr;
    }

    .detail-row[b-63or9skkzg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .detail-value[b-63or9skkzg] {
        justify-content: flex-start;
    }

    .performance-metrics[b-63or9skkzg] {
        gap: 1rem;
    }

    .metric[b-63or9skkzg] {
        padding: 1rem;
    }

    .metric-header[b-63or9skkzg] {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .notification[b-63or9skkzg] {
        top: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: none;
    }
}

@media (max-width: 576px) {
    .admin-server-details-container[b-63or9skkzg] {
        padding: 0.5rem;
    }

    .page-header[b-63or9skkzg] {
        padding: 1rem;
    }

    .server-status-card[b-63or9skkzg] {
        padding: 1.5rem;
    }

    .back-button[b-63or9skkzg] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .server-type-icon[b-63or9skkzg] {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .server-status-badge[b-63or9skkzg] {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }

    .card-header[b-63or9skkzg],
    .card-body[b-63or9skkzg] {
        padding: 1rem;
    }

    .detail-row[b-63or9skkzg] {
        padding: 0.75rem 0;
    }

    .metric-icon[b-63or9skkzg] {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .indicator-icon[b-63or9skkzg] {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

/* Анимации */
.details-card[b-63or9skkzg] {
    animation: fadeInUp-b-63or9skkzg 0.5s ease forwards;
    opacity: 0;
}

.details-card:nth-child(1)[b-63or9skkzg] { animation-delay: 0.1s; }
.details-card:nth-child(2)[b-63or9skkzg] { animation-delay: 0.2s; }
.details-card:nth-child(3)[b-63or9skkzg] { animation-delay: 0.3s; }
.details-card:nth-child(4)[b-63or9skkzg] { animation-delay: 0.4s; }

@keyframes fadeInUp-b-63or9skkzg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.server-status-card[b-63or9skkzg] {
    animation: slideInDown-b-63or9skkzg 0.6s ease;
}

@keyframes slideInDown-b-63or9skkzg {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Дополнительные утилиты */
.text-monospace[b-63or9skkzg] {
    font-family: 'Courier New', monospace !important;
}

.spinner-border-sm[b-63or9skkzg] {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

/* Улучшенные состояния при наведении */
.copy-button:hover[b-63or9skkzg],
.action-button:hover:not(:disabled)[b-63or9skkzg] {
    transform: translateY(-1px);
}

/* Пульсирующая анимация для онлайн статуса */
.server-status-badge.online[b-63or9skkzg]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--success-color);
    border-radius: inherit;
    opacity: 0.3;
    animation: pulse-b-63or9skkzg 2s infinite;
}

@keyframes pulse-b-63or9skkzg {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.1;
    }
    100% {
        transform: scale(1);
        opacity: 0.3;
    }
}

.server-status-badge[b-63or9skkzg] {
    position: relative;
}
/* /Pages/Admin/Servers/AdminServers.razor.rz.scp.css */
:root[b-kw8pv5d5i0] {
    --card-bg: #fff;
    --muted: #6c757d;
    --border: #e9ecef;
    --shadow: 0 6px 20px rgba(0,0,0,.08);
}

.admin-servers[b-kw8pv5d5i0] { padding: 1.5rem; }

/* Head */
.admin-servers__head[b-kw8pv5d5i0] { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.admin-servers__title[b-kw8pv5d5i0] { font-size:1.5rem; font-weight:700; display:flex; align-items:center; }

/* Toolbar */
.admin-servers__toolbar[b-kw8pv5d5i0] {
    display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between; align-items:center;
    background:var(--card-bg); border:1px solid var(--border); border-radius:.75rem; padding:.75rem; box-shadow:var(--shadow); margin-bottom:.75rem;
}
.toolbar-left[b-kw8pv5d5i0], .toolbar-right[b-kw8pv5d5i0] { display:flex; align-items:center; gap:.75rem; }
.sort-group .form-select[b-kw8pv5d5i0] { min-width: 220px; }

/* Stats */
.admin-servers__stats[b-kw8pv5d5i0] { display:grid; grid-template-columns:repeat(4, minmax(120px,1fr)); gap:.75rem; margin-bottom:.75rem; }
.stat[b-kw8pv5d5i0] { background:var(--card-bg); border:1px solid var(--border); border-radius:.75rem; padding:.6rem .9rem; box-shadow:var(--shadow); }
.stat__value[b-kw8pv5d5i0] { font-weight:700; font-size:1.1rem; }
.stat__label[b-kw8pv5d5i0] { color:var(--muted); font-size:.85rem; margin-top:.15rem; }

/* Table */
.table > :not(caption) > * > *[b-kw8pv5d5i0] { padding:.6rem .6rem; }
.sticky-head[b-kw8pv5d5i0] { position:sticky; top:0; z-index:1; }
.w-status[b-kw8pv5d5i0] { width: 120px; }
.w-traffic[b-kw8pv5d5i0] { width: 120px; }
.w-num[b-kw8pv5d5i0] { width: 90px; text-align: right; }
.w-metric[b-kw8pv5d5i0] { width: 140px; }
.w-upd[b-kw8pv5d5i0] { width: 140px; }
.w-actions[b-kw8pv5d5i0] { width: 140px; }

/* Row highlighting for pairs — very subtle */
.pair-row[b-kw8pv5d5i0] { background: #fbfdff; }
.pair-row.pair-source[b-kw8pv5d5i0] { box-shadow: inset 2px 0 0 #cfe2ff; }
.pair-row.pair-target[b-kw8pv5d5i0] { box-shadow: inset 2px 0 0 #ffe8a1; }

/* Cells */
.nowrap[b-kw8pv5d5i0] { white-space: nowrap; }
.mono[b-kw8pv5d5i0] { font-variant-numeric: tabular-nums; }
.muted[b-kw8pv5d5i0] { color: var(--muted); }
.name-line[b-kw8pv5d5i0] { display:flex; align-items:center; gap:.4rem; }
.name[b-kw8pv5d5i0] { font-weight:600; }
.sub[b-kw8pv5d5i0] { font-size:.85rem; margin-top:.2rem; }

.chip[b-kw8pv5d5i0] {
    display:inline-block; padding:.05rem .35rem; font-size:.7rem; border:1px solid #cbd5e1; border-radius:.35rem; color:#475569; background:#f8fafc;
}

.tag[b-kw8pv5d5i0] {
    display:inline-block; padding:.15rem .5rem; border-radius:.5rem; font-size:.75rem; border:1px solid #cbd5e1; color:#334155; background:#f8fafc;
}
.tag-source[b-kw8pv5d5i0] { border-color:#cfe2ff; background:#f5f9ff; }
.tag-target[b-kw8pv5d5i0] { border-color:#ffe8a1; background:#fff9e6; }

.link-cell .pair-line[b-kw8pv5d5i0] { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; }
.link-cell .arrow[b-kw8pv5d5i0] { color:#64748b; }
.link-cell .target[b-kw8pv5d5i0], .link-cell .sources[b-kw8pv5d5i0], .link-cell .src[b-kw8pv5d5i0] { font-weight:500; }

/* Traffic */
.traffic-cell[b-kw8pv5d5i0] { font-variant-numeric: tabular-nums; color:#334155; }

/* Metrics */
.metric-cell .metric[b-kw8pv5d5i0] { display:flex; align-items:center; gap:.5rem; }
.metric .bar[b-kw8pv5d5i0] { flex:1; height:6px; background:#f1f3f5; border-radius:4px; overflow:hidden; }
.metric .bar > span[b-kw8pv5d5i0] { display:block; height:100%; background:#a5b4fc; }
.metric .val[b-kw8pv5d5i0] { width:52px; text-align:right; font-size:.85rem; color:#334155; }

/* Status dot */
.status-dot[b-kw8pv5d5i0] { width:.5rem; height:.5rem; border-radius:50%; display:inline-block; margin-right:.4rem; background:#cbd5e1; vertical-align:middle; }
.status-dot.on[b-kw8pv5d5i0] { background:#20c997; }
.status-dot.off[b-kw8pv5d5i0] { background:#e35d6a; }

/* Empty */
.empty[b-kw8pv5d5i0] { text-align:center; background:var(--card-bg); border:1px solid var(--border); border-radius:.75rem; box-shadow:var(--shadow); padding:2rem 1rem; }
.empty__title[b-kw8pv5d5i0] { font-weight:700; font-size:1.1rem; }
.empty__desc[b-kw8pv5d5i0] { color:var(--muted); margin-top:.25rem; }

/* Skeleton */
.table-skeleton[b-kw8pv5d5i0] { background:var(--card-bg); border:1px solid var(--border); border-radius:.75rem; box-shadow:var(--shadow); padding:.75rem; }
.skeleton-row[b-kw8pv5d5i0] {
    height:14px; background:linear-gradient(90deg,#f0f2f5 25%,#e6e9ef 37%,#f0f2f5 63%);
    background-size:400% 100%; border-radius:6px; margin:.55rem 0; animation:shimmer-b-kw8pv5d5i0 1.4s infinite;
}
@keyframes shimmer-b-kw8pv5d5i0 { 0% { background-position:100% 0; } 100% { background-position:0 0; } }

/* Toasts */
.toast-wrap[b-kw8pv5d5i0] { position:fixed; top:1rem; right:1rem; z-index:1080; }

/* Responsive */
@media (max-width: 992px) {
    .admin-servers__stats[b-kw8pv5d5i0] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .w-cipher[b-kw8pv5d5i0] { display:none; }
    .w-actions[b-kw8pv5d5i0] { width: 120px; }
}
@media (max-width: 576px) {
    .admin-servers[b-kw8pv5d5i0] { padding:1rem; }
    .admin-servers__toolbar[b-kw8pv5d5i0] { flex-direction:column; align-items:stretch; }
    .toolbar-left[b-kw8pv5d5i0], .toolbar-right[b-kw8pv5d5i0] { width:100%; justify-content:space-between; }
    .admin-servers__stats[b-kw8pv5d5i0] { grid-template-columns:1fr 1fr; }
}
/* /Pages/Admin/Servers/AdminServersNew.razor.rz.scp.css */

/* AdminServersNew.razor.css - Современный дизайн формы создания/добавления сервера */

/* Основные переменные */
:root[b-eeapdv2wyc] {
    --primary-color: #0066cc;
    --primary-light: #e6f3ff;
    --success-color: #00b894;
    --danger-color: #e17055;
    --warning-color: #fdcb6e;
    --info-color: #00cec9;
    --secondary-color: #636e72;
    --light-color: #f8f9fa;
    --dark-color: #2d3436;
    --border-color: #ddd;
    --border-radius: 12px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --transition: all 0.3s ease;
}

/* Основной контейнер */
.new-server-container[b-eeapdv2wyc] {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

/* Заголовок страницы */
.page-header[b-eeapdv2wyc] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius);
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}

.header-content[b-eeapdv2wyc] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.back-button[b-eeapdv2wyc] {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1.2rem;
}

.back-button:hover[b-eeapdv2wyc] {
    background: #0052a3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.page-title[b-eeapdv2wyc] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dark-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-title i[b-eeapdv2wyc] {
    color: var(--primary-color);
}

/* Основная форма */
.form-container[b-eeapdv2wyc] {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.form-header[b-eeapdv2wyc] {
    background: linear-gradient(135deg, var(--primary-color), #0052a3);
    color: white;
    padding: 1.5rem 2rem;
    text-align: center;
}

.form-header h5[b-eeapdv2wyc] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.form-body[b-eeapdv2wyc] {
    padding: 2rem;
}

/* Группы полей */
.form-section[b-eeapdv2wyc] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--light-color);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.section-title[b-eeapdv2wyc] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title i[b-eeapdv2wyc] {
    color: var(--primary-color);
}

/* Поля формы */
.form-group[b-eeapdv2wyc] {
    margin-bottom: 1.5rem;
}

.form-label[b-eeapdv2wyc] {
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.form-label i[b-eeapdv2wyc] {
    color: var(--primary-color);
    font-size: 0.9rem;
}

.form-label .required[b-eeapdv2wyc] {
    color: var(--danger-color);
}

.form-control[b-eeapdv2wyc], .form-select[b-eeapdv2wyc] {
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: var(--transition);
    background: white;
}

.form-control:focus[b-eeapdv2wyc], .form-select:focus[b-eeapdv2wyc] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
    outline: none;
}

.form-control:hover[b-eeapdv2wyc], .form-select:hover[b-eeapdv2wyc] {
    border-color: #999;
}

/* Спецальное поле для выбора целевого сервера */
.forward-target-section[b-eeapdv2wyc] {
    background: var(--info-color);
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.1), rgba(0, 184, 148, 0.1));
    border-left-color: var(--info-color);
    border: 1px solid rgba(0, 206, 201, 0.3);
}

.forward-help[b-eeapdv2wyc] {
    background: rgba(0, 206, 201, 0.1);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #00695c;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.forward-help i[b-eeapdv2wyc] {
    margin-top: 2px;
    flex-shrink: 0;
}

/* Сетка полей */
.fields-grid[b-eeapdv2wyc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.fields-grid-2[b-eeapdv2wyc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.fields-grid-3[b-eeapdv2wyc] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
}

/* Алерты */
.alert[b-eeapdv2wyc] {
    border-radius: 8px;
    border: none;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
}

.alert-danger[b-eeapdv2wyc] {
    background: rgba(225, 112, 85, 0.1);
    color: #c0392b;
    border-left: 4px solid var(--danger-color);
}

.alert-info[b-eeapdv2wyc] {
    background: rgba(0, 206, 201, 0.1);
    color: #00695c;
    border-left: 4px solid var(--info-color);
}

.alert i[b-eeapdv2wyc] {
    font-size: 1.1rem;
    margin-top: 1px;
    flex-shrink: 0;
}

/* Состояния загрузки */
.loading-state[b-eeapdv2wyc] {
    text-align: center;
    padding: 3rem;
    color: var(--secondary-color);
}

.loading-spinner[b-eeapdv2wyc] {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

/* Кнопки действий */
.form-actions[b-eeapdv2wyc] {
    display: flex;
    gap: 1rem;
    padding: 2rem;
    background: var(--light-color);
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
}

.btn[b-eeapdv2wyc] {
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-size: 0.95rem;
}

.btn:disabled[b-eeapdv2wyc] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-light[b-eeapdv2wyc] {
    background: white;
    color: var(--secondary-color);
    border-color: var(--border-color);
}

.btn-light:hover:not(:disabled)[b-eeapdv2wyc] {
    background: var(--light-color);
    border-color: #999;
}

.btn-primary[b-eeapdv2wyc] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-primary:hover:not(:disabled)[b-eeapdv2wyc] {
    background: #0052a3;
    border-color: #0052a3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

/* Спиннер в кнопке */
.spinner-border-sm[b-eeapdv2wyc] {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

/* Валидация */
.validation-message[b-eeapdv2wyc] {
    color: var(--danger-color);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.field-invalid .form-control[b-eeapdv2wyc],
.field-invalid .form-select[b-eeapdv2wyc] {
    border-color: var(--danger-color);
}

/* Типы серверов - визуальные индикаторы */
.server-type-indicator[b-eeapdv2wyc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.server-type-any[b-eeapdv2wyc] {
    background: rgba(108, 117, 125, 0.1);
    color: var(--secondary-color);
}

.server-type-russia-local[b-eeapdv2wyc] {
    background: rgba(0, 123, 255, 0.1);
    color: #0066cc;
}

.server-type-russia-forward[b-eeapdv2wyc] {
    background: rgba(0, 206, 201, 0.1);
    color: var(--info-color);
}

.server-type-germany[b-eeapdv2wyc] {
    background: rgba(255, 193, 7, 0.1);
    color: #d39e00;
}

.server-type-finland[b-eeapdv2wyc] {
    background: rgba(0, 184, 148, 0.1);
    color: var(--success-color);
}

/* Адаптивность */
@media (max-width: 768px) {
    .new-server-container[b-eeapdv2wyc] {
        padding: 1rem;
    }

    .header-content[b-eeapdv2wyc] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .fields-grid[b-eeapdv2wyc],
    .fields-grid-2[b-eeapdv2wyc],
    .fields-grid-3[b-eeapdv2wyc] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-eeapdv2wyc] {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

    .btn[b-eeapdv2wyc] {
        justify-content: center;
    }

    .page-title[b-eeapdv2wyc] {
        font-size: 1.5rem;
    }

    .form-body[b-eeapdv2wyc],
    .form-actions[b-eeapdv2wyc] {
        padding: 1.5rem;
    }
}

@media (max-width: 576px) {
    .new-server-container[b-eeapdv2wyc] {
        padding: 0.5rem;
    }

    .page-header[b-eeapdv2wyc] {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .form-section[b-eeapdv2wyc] {
        padding: 1rem;
    }

    .back-button[b-eeapdv2wyc] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* Дополнительные эффекты */
.form-container[b-eeapdv2wyc] {
    animation: slideInUp-b-eeapdv2wyc 0.5s ease;
}

@keyframes slideInUp-b-eeapdv2wyc {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Тултипы для полей */
.form-tooltip[b-eeapdv2wyc] {
    position: relative;
    cursor: help;
}

.form-tooltip .tooltip-text[b-eeapdv2wyc] {
    visibility: hidden;
    width: 200px;
    background-color: var(--dark-color);
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.3s;
}

.form-tooltip:hover .tooltip-text[b-eeapdv2wyc] {
    visibility: visible;
    opacity: 1;
}

/* Улучшенные фокус состояния */
.form-control:focus-within[b-eeapdv2wyc],
.form-select:focus-within[b-eeapdv2wyc] {
    transform: translateY(-1px);
}

/* Прогресс бар для этапов */
.form-progress[b-eeapdv2wyc] {
    background: var(--light-color);
    height: 4px;
    border-radius: 2px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.form-progress-bar[b-eeapdv2wyc] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--info-color));
    width: 100%;
    border-radius: 2px;
    animation: progressSlide-b-eeapdv2wyc 0.5s ease;
}

@keyframes progressSlide-b-eeapdv2wyc {
    from { width: 0%; }
    to { width: 100%; }
}
/* /Pages/Admin/Stats/DataQualityAndAudit.razor.rz.scp.css */
/* Data Quality & Audit Dashboard Styles */

.data-quality-container[b-91teg2b45s] {
    padding: 2rem;
    background-color: #f8f9fa;
    min-height: 100vh;
}

.dashboard-header[b-91teg2b45s] {
    margin-bottom: 2rem;
    text-align: center;
}

.dashboard-title[b-91teg2b45s] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.dashboard-subtitle[b-91teg2b45s] {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 0;
}

/* Filters Section */
.filters-section[b-91teg2b45s] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filters-row[b-91teg2b45s] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.filter-group[b-91teg2b45s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label[b-91teg2b45s] {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.filter-input[b-91teg2b45s],
.filter-select[b-91teg2b45s] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.filter-input:focus[b-91teg2b45s],
.filter-select:focus[b-91teg2b45s] {
    outline: none;
    border-color: #6a11cb;
    box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.1);
}

.btn-apply[b-91teg2b45s] {
    background: linear-gradient(135deg, #6a11cb, #8d5cf4);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-apply:hover:not(:disabled)[b-91teg2b45s] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}

.btn-apply:disabled[b-91teg2b45s] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading State */
.loading[b-91teg2b45s] {
    text-align: center;
    padding: 3rem;
    color: #666;
    font-size: 1.1rem;
}

.loading i[b-91teg2b45s] {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    animation: spin-b-91teg2b45s 1s linear infinite;
}

@keyframes spin-b-91teg2b45s {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Error State */
.alert[b-91teg2b45s] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-danger[b-91teg2b45s] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* KPI Section */
.kpi-section[b-91teg2b45s] {
    margin-bottom: 2rem;
}

.kpi-section h4[b-91teg2b45s] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kpi-row[b-91teg2b45s] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.kpi-card[b-91teg2b45s] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.kpi-card:hover[b-91teg2b45s] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.kpi-header[b-91teg2b45s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.kpi-header i[b-91teg2b45s] {
    font-size: 1.25rem;
    color: #6a11cb;
}

.kpi-header span[b-91teg2b45s] {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.kpi-value[b-91teg2b45s] {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.kpi-details[b-91teg2b45s] {
    color: #666;
    font-size: 0.85rem;
}

/* Tables Section */
.tables-section[b-91teg2b45s] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.table-container[b-91teg2b45s] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.table-container h4[b-91teg2b45s] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-container h4 i[b-91teg2b45s] {
    color: #6a11cb;
    margin-right: 0.5rem;
}

.btn-export[b-91teg2b45s] {
    background: #28a745;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-export:hover[b-91teg2b45s] {
    background: #218838;
    transform: translateY(-1px);
}

.table[b-91teg2b45s] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.table th[b-91teg2b45s],
.table td[b-91teg2b45s] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.table th[b-91teg2b45s] {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.table td[b-91teg2b45s] {
    color: #666;
    font-size: 0.9rem;
}

.table tbody tr:hover[b-91teg2b45s] {
    background-color: #f8f9fa;
}

/* Empty State */
.empty-state[b-91teg2b45s] {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

/* Empty State Container */
.empty-state-container[b-91teg2b45s] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.empty-icon[b-91teg2b45s] {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 1rem;
}

.empty-state-container h4[b-91teg2b45s] {
    color: #333;
    margin-bottom: 0.5rem;
}

.empty-state-container p[b-91teg2b45s] {
    color: #666;
    margin-bottom: 1.5rem;
}

/* Date List Styles */
.date-list[b-91teg2b45s] {
    max-width: 200px;
    overflow: hidden;
}

.date-list .d-block[b-91teg2b45s] {
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.date-list .text-muted[b-91teg2b45s] {
    font-size: 0.75rem;
    color: #999;
    font-style: italic;
}

/* Badge Styles */
.badge[b-91teg2b45s] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
}

.bg-warning[b-91teg2b45s] {
    background-color: #ffc107;
    color: #000;
}

.bg-success[b-91teg2b45s] {
    background-color: #28a745;
    color: #fff;
}

.bg-danger[b-91teg2b45s] {
    background-color: #dc3545;
    color: #fff;
}

.bg-info[b-91teg2b45s] {
    background-color: #17a2b8;
    color: #fff;
}

/* Button Styles */
.btn[b-91teg2b45s] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.btn-sm[b-91teg2b45s] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.btn-outline-primary[b-91teg2b45s] {
    color: #6a11cb;
    border-color: #6a11cb;
    background-color: transparent;
}

.btn-outline-primary:hover[b-91teg2b45s] {
    color: #fff;
    background-color: #6a11cb;
    border-color: #6a11cb;
}

/* Code Styles */
code[b-91teg2b45s] {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    background-color: #f8f9fa;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    color: #e83e8c;
}

/* Validation Rules Section */
.validation-rules-section[b-91teg2b45s] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.validation-rules-section h3[b-91teg2b45s] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.validation-rule-card[b-91teg2b45s] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    height: 100%;
}

.validation-rule-card:hover[b-91teg2b45s] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-color: #6a11cb;
}

.validation-rule-card.violated[b-91teg2b45s] {
    border-left: 4px solid #dc3545;
    background-color: #fff5f5;
}

.validation-rule-card.passed[b-91teg2b45s] {
    border-left: 4px solid #28a745;
    background-color: #f8fff8;
}

.validation-rule-card.warning[b-91teg2b45s] {
    border-left: 4px solid #ffc107;
    background-color: #fffdf5;
}

.rule-header[b-91teg2b45s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}

.rule-header h5[b-91teg2b45s] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.rule-body[b-91teg2b45s] {
    margin-bottom: 0;
}

.rule-body p[b-91teg2b45s] {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.rule-recommendation[b-91teg2b45s] {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: #f8f9fa;
    border-radius: 6px;
    border-left: 3px solid #6a11cb;
}

.rule-recommendation strong[b-91teg2b45s] {
    color: #333;
    font-weight: 600;
    font-size: 0.9rem;
}

.rule-documentation[b-91teg2b45s] {
    margin-top: 0.75rem;
}

.rule-documentation .btn[b-91teg2b45s] {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.rule-documentation .btn:hover[b-91teg2b45s] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Status Badge Styles */
.badge[b-91teg2b45s] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
}

.bg-danger[b-91teg2b45s] {
    background-color: #dc3545;
    color: #fff;
}

.bg-success[b-91teg2b45s] {
    background-color: #28a745;
    color: #fff;
}

.bg-warning[b-91teg2b45s] {
    background-color: #ffc107;
    color: #000;
}

.bg-info[b-91teg2b45s] {
    background-color: #17a2b8;
    color: #fff;
}

/* Row and Column Styles */
.row[b-91teg2b45s] {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.75rem;
}

.col-md-6[b-91teg2b45s] {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 0.75rem;
}

.mb-3[b-91teg2b45s] {
    margin-bottom: 1rem;
}

/* Responsive adjustments for validation rules */
@media (max-width: 768px) {
    .col-md-6[b-91teg2b45s] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .rule-header[b-91teg2b45s] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .rule-header h5[b-91teg2b45s] {
        font-size: 1rem;
    }
    
    .validation-rule-card[b-91teg2b45s] {
        padding: 1rem;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .data-quality-container[b-91teg2b45s] {
        padding: 1rem;
    }
    
    .dashboard-title[b-91teg2b45s] {
        font-size: 2rem;
    }
    
    .filters-row[b-91teg2b45s] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-91teg2b45s] {
        justify-content: space-between;
    }
    
    .kpi-row[b-91teg2b45s] {
        grid-template-columns: 1fr;
    }
    
    .tables-section[b-91teg2b45s] {
        grid-template-columns: 1fr;
    }
    
    .table-container[b-91teg2b45s] {
        overflow-x: auto;
    }
    
    .date-list[b-91teg2b45s] {
        max-width: 150px;
    }
}
/* /Pages/Admin/Stats/ExecutiveOverview.razor.rz.scp.css */
/* Executive Overview Dashboard Styles */

.executive-overview[b-g9v43yavd0] {
    padding: 2rem;
    background-color: #f8f9fa;
    min-height: 100vh;
}

.dashboard-header[b-g9v43yavd0] {
    margin-bottom: 2rem;
    text-align: center;
}

.dashboard-title[b-g9v43yavd0] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.dashboard-subtitle[b-g9v43yavd0] {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 0;
}

/* Filters Section */
.filters-section[b-g9v43yavd0] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filters-row[b-g9v43yavd0] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.filter-group[b-g9v43yavd0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label[b-g9v43yavd0] {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.filter-input[b-g9v43yavd0],
.filter-select[b-g9v43yavd0] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.filter-input:focus[b-g9v43yavd0],
.filter-select:focus[b-g9v43yavd0] {
    outline: none;
    border-color: #6a11cb;
    box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.1);
}

.btn-apply[b-g9v43yavd0] {
    background: linear-gradient(135deg, #6a11cb, #8d5cf4);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-apply:hover:not(:disabled)[b-g9v43yavd0] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}

.btn-apply:disabled[b-g9v43yavd0] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading State */
.loading[b-g9v43yavd0] {
    text-align: center;
    padding: 3rem;
    color: #666;
    font-size: 1.1rem;
}

.loading i[b-g9v43yavd0] {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    animation: spin-b-g9v43yavd0 1s linear infinite;
}

@keyframes spin-b-g9v43yavd0 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Error State */
.alert[b-g9v43yavd0] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-danger[b-g9v43yavd0] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Alerts Section */
.alerts-section[b-g9v43yavd0] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.alerts-section h4[b-g9v43yavd0] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-item[b-g9v43yavd0] {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border-left: 4px solid;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.alert-item:last-child[b-g9v43yavd0] {
    margin-bottom: 0;
}

.alert-warning[b-g9v43yavd0] {
    background-color: #fff3cd;
    border-left-color: #ffc107;
    color: #856404;
}

.alert-danger[b-g9v43yavd0] {
    background-color: #f8d7da;
    border-left-color: #dc3545;
    color: #721c24;
}

.alert-info[b-g9v43yavd0] {
    background-color: #d1ecf1;
    border-left-color: #17a2b8;
    color: #0c5460;
}

.alert-icon[b-g9v43yavd0] {
    font-size: 1.25rem;
    margin-top: 0.25rem;
}

.alert-content[b-g9v43yavd0] {
    flex: 1;
}

.alert-title[b-g9v43yavd0] {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.alert-description[b-g9v43yavd0] {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.alert-details[b-g9v43yavd0] {
    font-size: 0.85rem;
    opacity: 0.8;
}

.alert-actions[b-g9v43yavd0] {
    margin-top: 0.75rem;
}

.btn-alert[b-g9v43yavd0] {
    background: #6a11cb;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-alert:hover[b-g9v43yavd0] {
    background: #5a0fb8;
    transform: translateY(-1px);
}

/* KPI Section */
.kpi-section[b-g9v43yavd0] {
    margin-bottom: 2rem;
}

.kpi-section h4[b-g9v43yavd0] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kpi-row[b-g9v43yavd0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.kpi-card[b-g9v43yavd0] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.kpi-card:hover[b-g9v43yavd0] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.kpi-header[b-g9v43yavd0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.kpi-header i[b-g9v43yavd0] {
    font-size: 1.25rem;
    color: #6a11cb;
}

.kpi-header span[b-g9v43yavd0] {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.kpi-value[b-g9v43yavd0] {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.kpi-details[b-g9v43yavd0] {
    color: #666;
    font-size: 0.85rem;
}

/* Charts Section */
.charts-section[b-g9v43yavd0] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.charts-section h4[b-g9v43yavd0] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Time Series Chart Styles */
.time-series-chart[b-g9v43yavd0] {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.chart-title[b-g9v43yavd0] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-legend[b-g9v43yavd0] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 6px;
}

.legend-item[b-g9v43yavd0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #666;
}

.legend-color[b-g9v43yavd0] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.chart-day[b-g9v43yavd0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 30px;
    height: 100%;
    position: relative;
}

.day-bars[b-g9v43yavd0] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 180px;
    margin-bottom: 0.5rem;
    width: 100%;
}

.chart-bar[b-g9v43yavd0] {
    width: 8px;
    min-height: 5px;
    border-radius: 3px 3px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: 0.9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chart-bar:hover[b-g9v43yavd0] {
    opacity: 1;
    transform: scaleY(1.05);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.revenue-bar[b-g9v43yavd0] {
    background: linear-gradient(to top, #27ae60, #2ecc71);
}

.new-users-bar[b-g9v43yavd0] {
    background: linear-gradient(to top, #2980b9, #3498db);
}

.active-subscriptions-bar[b-g9v43yavd0] {
    background: linear-gradient(to top, #e67e22, #f39c12);
}

.chart-date[b-g9v43yavd0] {
    font-size: 0.7rem;
    color: #666;
    text-align: center;
    white-space: nowrap;
    transform: rotate(-45deg);
    transform-origin: center center;
    margin-top: 1rem;
    height: 25px;
    line-height: 25px;
    font-weight: 500;
}

.empty-chart[b-g9v43yavd0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #666;
    font-style: italic;
}

.empty-chart i[b-g9v43yavd0] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* Chart Section */
.charts-section[b-g9v43yavd0] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Empty State */
.empty-state[b-g9v43yavd0] {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

/* Empty State Container */
.empty-state-container[b-g9v43yavd0] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.empty-icon[b-g9v43yavd0] {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 1rem;
}

.empty-state-container h4[b-g9v43yavd0] {
    color: #333;
    margin-bottom: 0.5rem;
}

.empty-state-container p[b-g9v43yavd0] {
    color: #666;
    margin-bottom: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .executive-overview[b-g9v43yavd0] {
        padding: 1rem;
    }
    
    .dashboard-title[b-g9v43yavd0] {
        font-size: 2rem;
    }
    
    .filters-row[b-g9v43yavd0] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-g9v43yavd0] {
        justify-content: space-between;
    }
    
    .kpi-row[b-g9v43yavd0] {
        grid-template-columns: 1fr;
    }
    
    .alert-item[b-g9v43yavd0] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Chart Styles */
.time-series-chart[b-g9v43yavd0] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.chart-container[b-g9v43yavd0] {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 200px;
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1rem;
    width: 100%;
}

.chart-day[b-g9v43yavd0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 20px;
}

.day-bars[b-g9v43yavd0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    height: 100%;
    justify-content: end;
}

.chart-bar[b-g9v43yavd0] {
    width: 100%;
    border-radius: 2px 2px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 2px;
}

.chart-bar:hover[b-g9v43yavd0] {
    opacity: 0.8;
    transform: scaleY(1.05);
}

.revenue-bar[b-g9v43yavd0] {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.new-users-bar[b-g9v43yavd0] {
    background: linear-gradient(135deg, #3498db, #5dade2);
}

.active-subscriptions-bar[b-g9v43yavd0] {
    background: linear-gradient(135deg, #f39c12, #f7dc6f);
}

.chart-date[b-g9v43yavd0] {
    font-size: 0.7rem;
    color: #666;
    margin-top: 0.5rem;
    text-align: center;
    writing-mode: horizontal-tb;
}

.empty-chart[b-g9v43yavd0] {
    text-align: center;
    padding: 3rem;
    color: #666;
}

.empty-chart i[b-g9v43yavd0] {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 1rem;
    display: block;
}

/* Chart Styles */
.chart-container[b-g9v43yavd0] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.chart-title[b-g9v43yavd0] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-legend[b-g9v43yavd0] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}

.legend-item[b-g9v43yavd0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #666;
}

.legend-color[b-g9v43yavd0] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.chart-bars-container[b-g9v43yavd0] {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 200px;
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1rem;
    width: 100%;
}

.chart-day[b-g9v43yavd0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 20px;
}

.day-bars[b-g9v43yavd0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    height: 100%;
    justify-content: end;
}

.chart-bar[b-g9v43yavd0] {
    width: 100%;
    border-radius: 2px 2px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 2px;
}

.chart-bar:hover[b-g9v43yavd0] {
    opacity: 0.8;
    transform: scaleY(1.05);
}

.revenue-bar[b-g9v43yavd0] {
    background: linear-gradient(135deg, #2ecc71, #58d68d);
}

.new-users-bar[b-g9v43yavd0] {
    background: linear-gradient(135deg, #3498db, #5dade2);
}

.active-subscriptions-bar[b-g9v43yavd0] {
    background: linear-gradient(135deg, #9b59b6, #bb8fce);
}

.chart-date[b-g9v43yavd0] {
    font-size: 0.7rem;
    color: #666;
    margin-top: 0.5rem;
    text-align: center;
    writing-mode: horizontal-tb;
}
/* /Pages/Admin/Stats/OperationsAndAlerts.razor.rz.scp.css */
/* Operations & Alerts Dashboard Styles */

.operations-alerts-container[b-4ub4nqhw3w] {
    padding: 2rem;
    background-color: #f8f9fa;
    min-height: 100vh;
}

.dashboard-header[b-4ub4nqhw3w] {
    margin-bottom: 2rem;
    text-align: center;
}

.dashboard-title[b-4ub4nqhw3w] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.dashboard-subtitle[b-4ub4nqhw3w] {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 0;
}

/* Filters Section */
.filters-section[b-4ub4nqhw3w] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filters-row[b-4ub4nqhw3w] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.filter-group[b-4ub4nqhw3w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label[b-4ub4nqhw3w] {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.filter-input[b-4ub4nqhw3w],
.filter-select[b-4ub4nqhw3w] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.filter-input:focus[b-4ub4nqhw3w],
.filter-select:focus[b-4ub4nqhw3w] {
    outline: none;
    border-color: #6a11cb;
    box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.1);
}

.btn-apply[b-4ub4nqhw3w] {
    background: linear-gradient(135deg, #6a11cb, #8d5cf4);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-apply:hover:not(:disabled)[b-4ub4nqhw3w] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}

.btn-apply:disabled[b-4ub4nqhw3w] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading State */
.loading[b-4ub4nqhw3w] {
    text-align: center;
    padding: 3rem;
    color: #666;
    font-size: 1.1rem;
}

.loading i[b-4ub4nqhw3w] {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    animation: spin-b-4ub4nqhw3w 1s linear infinite;
}

@keyframes spin-b-4ub4nqhw3w {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Error State */
.alert[b-4ub4nqhw3w] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-danger[b-4ub4nqhw3w] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Alerts Section */
.alerts-section[b-4ub4nqhw3w] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.alerts-section h4[b-4ub4nqhw3w] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-item[b-4ub4nqhw3w] {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border-left: 4px solid;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.alert-item:last-child[b-4ub4nqhw3w] {
    margin-bottom: 0;
}

.alert-warning[b-4ub4nqhw3w] {
    background-color: #fff3cd;
    border-left-color: #ffc107;
    color: #856404;
}

.alert-danger[b-4ub4nqhw3w] {
    background-color: #f8d7da;
    border-left-color: #dc3545;
    color: #721c24;
}

.alert-info[b-4ub4nqhw3w] {
    background-color: #d1ecf1;
    border-left-color: #17a2b8;
    color: #0c5460;
}

.alert-icon[b-4ub4nqhw3w] {
    font-size: 1.25rem;
    margin-top: 0.25rem;
}

.alert-content[b-4ub4nqhw3w] {
    flex: 1;
}

.alert-title[b-4ub4nqhw3w] {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.alert-description[b-4ub4nqhw3w] {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.alert-details[b-4ub4nqhw3w] {
    font-size: 0.85rem;
    opacity: 0.8;
}

.alert-actions[b-4ub4nqhw3w] {
    margin-top: 0.75rem;
}

.btn-alert[b-4ub4nqhw3w] {
    background: #6a11cb;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-alert:hover[b-4ub4nqhw3w] {
    background: #5a0fb8;
    transform: translateY(-1px);
}

/* Empty State */
.empty-state[b-4ub4nqhw3w] {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

/* Empty State Container */
.empty-state-container[b-4ub4nqhw3w] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.empty-icon[b-4ub4nqhw3w] {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 1rem;
}

.empty-state-container h4[b-4ub4nqhw3w] {
    color: #333;
    margin-bottom: 0.5rem;
}

.empty-state-container p[b-4ub4nqhw3w] {
    color: #666;
    margin-bottom: 1.5rem;
}

/* KPI Card Styles */
.kpi-card[b-4ub4nqhw3w] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    margin-bottom: 1rem;
}

.kpi-card:hover[b-4ub4nqhw3w] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.kpi-card.kpi-success[b-4ub4nqhw3w] {
    border-left: 4px solid #28a745;
}

.kpi-card.kpi-warning[b-4ub4nqhw3w] {
    border-left: 4px solid #ffc107;
}

.kpi-card.kpi-danger[b-4ub4nqhw3w] {
    border-left: 4px solid #dc3545;
}

.kpi-value[b-4ub4nqhw3w] {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.kpi-label[b-4ub4nqhw3w] {
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Alerts Grid */
.alerts-grid[b-4ub4nqhw3w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.alert-card[b-4ub4nqhw3w] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.alert-card:hover[b-4ub4nqhw3w] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.alert-card.alert-danger[b-4ub4nqhw3w] {
    border-left-color: #dc3545;
    background-color: #fff5f5;
}

.alert-card.alert-warning[b-4ub4nqhw3w] {
    border-left-color: #ffc107;
    background-color: #fffdf5;
}

.alert-card.alert-info[b-4ub4nqhw3w] {
    border-left-color: #17a2b8;
    background-color: #f0f9ff;
}

.alert-header[b-4ub4nqhw3w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.alert-header h5[b-4ub4nqhw3w] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.alert-body p[b-4ub4nqhw3w] {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.alert-metrics[b-4ub4nqhw3w] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #666;
}

.alert-metrics span[b-4ub4nqhw3w] {
    display: flex;
    justify-content: space-between;
}

.alert-footer[b-4ub4nqhw3w] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

/* Info Cards */
.info-card[b-4ub4nqhw3w] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.info-card h5[b-4ub4nqhw3w] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.info-value[b-4ub4nqhw3w] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #6a11cb;
}

/* No Alerts State */
.no-alerts[b-4ub4nqhw3w] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Bootstrap overrides */
.form-control[b-4ub4nqhw3w] {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus[b-4ub4nqhw3w] {
    color: #212529;
    background-color: #fff;
    border-color: #6a11cb;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(106, 17, 203, 0.25);
}

.form-label[b-4ub4nqhw3w] {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.form-select[b-4ub4nqhw3w] {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-select:focus[b-4ub4nqhw3w] {
    border-color: #6a11cb;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(106, 17, 203, 0.25);
}

.btn[b-4ub4nqhw3w] {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary[b-4ub4nqhw3w] {
    color: #fff;
    background-color: #6a11cb;
    border-color: #6a11cb;
}

.btn-primary:hover[b-4ub4nqhw3w] {
    color: #fff;
    background-color: #5a0fb8;
    border-color: #5a0fb8;
}

.btn-outline-primary[b-4ub4nqhw3w] {
    color: #6a11cb;
    border-color: #6a11cb;
}

.btn-outline-primary:hover[b-4ub4nqhw3w] {
    color: #fff;
    background-color: #6a11cb;
    border-color: #6a11cb;
}

.btn-outline-danger[b-4ub4nqhw3w] {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-danger:hover[b-4ub4nqhw3w] {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-sm[b-4ub4nqhw3w] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.btn:disabled[b-4ub4nqhw3w] {
    pointer-events: none;
    opacity: 0.65;
}

.spinner-border[b-4ub4nqhw3w] {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentcolor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-4ub4nqhw3w 0.75s linear infinite;
}

.spinner-border-sm[b-4ub4nqhw3w] {
    width: 1rem;
    height: 1rem;
    border-width: 0.125em;
}

@keyframes spinner-border-b-4ub4nqhw3w {
    to {
        transform: rotate(360deg);
    }
}

.text-center[b-4ub4nqhw3w] {
    text-align: center !important;
}

.py-5[b-4ub4nqhw3w] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.py-4[b-4ub4nqhw3w] {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.mt-3[b-4ub4nqhw3w] {
    margin-top: 1rem !important;
}

.mb-3[b-4ub4nqhw3w] {
    margin-bottom: 1rem !important;
}

.mb-2[b-4ub4nqhw3w] {
    margin-bottom: 0.5rem !important;
}

.me-2[b-4ub4nqhw3w] {
    margin-right: 0.5rem !important;
}

.text-muted[b-4ub4nqhw3w] {
    color: #6c757d !important;
}

.text-success[b-4ub4nqhw3w] {
    color: #198754 !important;
}

.text-warning[b-4ub4nqhw3w] {
    color: #fd7e14 !important;
}

.text-danger[b-4ub4nqhw3w] {
    color: #dc3545 !important;
}

.fw-bold[b-4ub4nqhw3w] {
    font-weight: 700 !important;
}

.d-flex[b-4ub4nqhw3w] {
    display: flex !important;
}

.align-items-center[b-4ub4nqhw3w] {
    align-items: center !important;
}

.align-items-end[b-4ub4nqhw3w] {
    align-items: flex-end !important;
}

.justify-content-between[b-4ub4nqhw3w] {
    justify-content: space-between !important;
}

/* Row and Column System */
.row[b-4ub4nqhw3w] {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.col-md-3[b-4ub4nqhw3w] {
    flex: 0 0 25%;
    max-width: 25%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.col-md-6[b-4ub4nqhw3w] {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

/* Table Styles */
.table-responsive[b-4ub4nqhw3w] {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table[b-4ub4nqhw3w] {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    border-collapse: collapse;
}

.table th[b-4ub4nqhw3w],
.table td[b-4ub4nqhw3w] {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

.table thead th[b-4ub4nqhw3w] {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
}

.table tbody tr:hover[b-4ub4nqhw3w] {
    background-color: rgba(0, 0, 0, 0.075);
}

.table-striped tbody tr:nth-of-type(odd)[b-4ub4nqhw3w] {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Badge Styles */
.badge[b-4ub4nqhw3w] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
}

.bg-danger[b-4ub4nqhw3w] {
    background-color: #dc3545;
    color: #fff;
}

.bg-success[b-4ub4nqhw3w] {
    background-color: #28a745;
    color: #fff;
}

.bg-warning[b-4ub4nqhw3w] {
    background-color: #ffc107;
    color: #000;
}

.bg-info[b-4ub4nqhw3w] {
    background-color: #17a2b8;
    color: #fff;
}

.bg-secondary[b-4ub4nqhw3w] {
    background-color: #6c757d;
    color: #fff;
}

/* Responsive Design */
@media (max-width: 768px) {
    .operations-alerts-container[b-4ub4nqhw3w] {
        padding: 1rem;
    }
    
    .dashboard-title[b-4ub4nqhw3w] {
        font-size: 2rem;
    }
    
    .filters-row[b-4ub4nqhw3w] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-4ub4nqhw3w] {
        justify-content: space-between;
    }
    
    .alert-item[b-4ub4nqhw3w] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .col-md-3[b-4ub4nqhw3w],
    .col-md-6[b-4ub4nqhw3w] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .alerts-grid[b-4ub4nqhw3w] {
        grid-template-columns: 1fr;
    }
    
    .alert-header[b-4ub4nqhw3w] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/* /Pages/Admin/Stats/PaymentsAndRevenue.razor.rz.scp.css */
/* Payments & Revenue Dashboard Styles */

.payments-and-revenue-dashboard[b-ovl3e9rcak] {
    padding: 2rem;
    background-color: #f8f9fa;
    min-height: 100vh;
}

.dashboard-header[b-ovl3e9rcak] {
    margin-bottom: 2rem;
    text-align: center;
}

.dashboard-title[b-ovl3e9rcak] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.dashboard-subtitle[b-ovl3e9rcak] {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 0;
}

/* Filters Section */
.filters-section[b-ovl3e9rcak] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filters-row[b-ovl3e9rcak] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.filter-group[b-ovl3e9rcak] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label[b-ovl3e9rcak] {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.filter-input[b-ovl3e9rcak],
.filter-select[b-ovl3e9rcak] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.filter-input:focus[b-ovl3e9rcak],
.filter-select:focus[b-ovl3e9rcak] {
    outline: none;
    border-color: #6a11cb;
    box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.1);
}

.btn-apply[b-ovl3e9rcak] {
    background: linear-gradient(135deg, #6a11cb, #8d5cf4);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-apply:hover:not(:disabled)[b-ovl3e9rcak] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}

.btn-apply:disabled[b-ovl3e9rcak] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading State */
.loading[b-ovl3e9rcak] {
    text-align: center;
    padding: 3rem;
    color: #666;
    font-size: 1.1rem;
}

.loading i[b-ovl3e9rcak] {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    animation: spin-b-ovl3e9rcak 1s linear infinite;
}

@keyframes spin-b-ovl3e9rcak {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Error State */
.alert[b-ovl3e9rcak] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-danger[b-ovl3e9rcak] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* KPI Section */
.kpi-section[b-ovl3e9rcak] {
    margin-bottom: 2rem;
}

.kpi-section h4[b-ovl3e9rcak] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kpi-row[b-ovl3e9rcak] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.kpi-card[b-ovl3e9rcak] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.kpi-card:hover[b-ovl3e9rcak] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.kpi-header[b-ovl3e9rcak] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.kpi-header i[b-ovl3e9rcak] {
    font-size: 1.25rem;
    color: #6a11cb;
}

.kpi-header span[b-ovl3e9rcak] {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.kpi-value[b-ovl3e9rcak] {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.kpi-details[b-ovl3e9rcak] {
    color: #666;
    font-size: 0.85rem;
}

/* Charts Section */
.charts-section[b-ovl3e9rcak] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.charts-section h4[b-ovl3e9rcak] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-container[b-ovl3e9rcak] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.chart-container h5[b-ovl3e9rcak] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    text-align: center;
}

.chart-container canvas[b-ovl3e9rcak] {
    display: block;
    width: 100% !important;
    height: 250px !important;
    max-width: 100%;
}

/* Tables Section */
.tables-section[b-ovl3e9rcak] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.table-container[b-ovl3e9rcak] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.table-container h4[b-ovl3e9rcak] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-container h4 i[b-ovl3e9rcak] {
    color: #6a11cb;
    margin-right: 0.5rem;
}

.btn-export[b-ovl3e9rcak] {
    background: #28a745;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-export:hover[b-ovl3e9rcak] {
    background: #218838;
    transform: translateY(-1px);
}

.table[b-ovl3e9rcak] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.table th[b-ovl3e9rcak],
.table td[b-ovl3e9rcak] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.table th[b-ovl3e9rcak] {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.table td[b-ovl3e9rcak] {
    color: #666;
    font-size: 0.9rem;
}

.table tbody tr:hover[b-ovl3e9rcak] {
    background-color: #f8f9fa;
}

/* Empty State */
.empty-state[b-ovl3e9rcak] {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

/* Empty State Container */
.empty-state-container[b-ovl3e9rcak] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.empty-icon[b-ovl3e9rcak] {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 1rem;
}

.empty-state-container h4[b-ovl3e9rcak] {
    color: #333;
    margin-bottom: 0.5rem;
}

.empty-state-container p[b-ovl3e9rcak] {
    color: #666;
    margin-bottom: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .payments-and-revenue-dashboard[b-ovl3e9rcak] {
        padding: 1rem;
    }
    
    .dashboard-title[b-ovl3e9rcak] {
        font-size: 2rem;
    }
    
    .filters-row[b-ovl3e9rcak] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-ovl3e9rcak] {
        justify-content: space-between;
    }
    
    .kpi-row[b-ovl3e9rcak] {
        grid-template-columns: 1fr;
    }
    
    .tables-section[b-ovl3e9rcak] {
        grid-template-columns: 1fr;
    }
    
    .table-container[b-ovl3e9rcak] {
        overflow-x: auto;
    }
}
/* /Pages/Admin/Stats/PayoutsAndPartners.razor.rz.scp.css */
/* Payouts & Partners Dashboard Styles */

.payouts-and-partners-dashboard[b-sxz51dcjux] {
    padding: 2rem;
    background-color: #f8f9fa;
    min-height: 100vh;
}

.dashboard-header[b-sxz51dcjux] {
    margin-bottom: 2rem;
    text-align: center;
}

.dashboard-title[b-sxz51dcjux] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.dashboard-subtitle[b-sxz51dcjux] {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 0;
}

/* Filters Section */
.filters-section[b-sxz51dcjux] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filters-row[b-sxz51dcjux] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.filter-group[b-sxz51dcjux] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label[b-sxz51dcjux] {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.filter-input[b-sxz51dcjux],
.filter-select[b-sxz51dcjux] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.filter-input:focus[b-sxz51dcjux],
.filter-select:focus[b-sxz51dcjux] {
    outline: none;
    border-color: #6a11cb;
    box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.1);
}

.btn-apply[b-sxz51dcjux] {
    background: linear-gradient(135deg, #6a11cb, #8d5cf4);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-apply:hover:not(:disabled)[b-sxz51dcjux] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}

.btn-apply:disabled[b-sxz51dcjux] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading State */
.loading[b-sxz51dcjux] {
    text-align: center;
    padding: 3rem;
    color: #666;
    font-size: 1.1rem;
}

.loading i[b-sxz51dcjux] {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    animation: spin-b-sxz51dcjux 1s linear infinite;
}

@keyframes spin-b-sxz51dcjux {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Error State */
.alert[b-sxz51dcjux] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-danger[b-sxz51dcjux] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* KPI Section */
.kpi-section[b-sxz51dcjux] {
    margin-bottom: 2rem;
}

.kpi-section h4[b-sxz51dcjux] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kpi-row[b-sxz51dcjux] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.kpi-card[b-sxz51dcjux] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.kpi-card:hover[b-sxz51dcjux] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.kpi-header[b-sxz51dcjux] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.kpi-header i[b-sxz51dcjux] {
    font-size: 1.25rem;
    color: #6a11cb;
}

.kpi-header span[b-sxz51dcjux] {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.kpi-value[b-sxz51dcjux] {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.kpi-details[b-sxz51dcjux] {
    color: #666;
    font-size: 0.85rem;
}

/* Charts Section */
.charts-section[b-sxz51dcjux] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.charts-section h4[b-sxz51dcjux] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-container[b-sxz51dcjux] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.chart-container h5[b-sxz51dcjux] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    text-align: center;
}

.chart-container canvas[b-sxz51dcjux] {
    display: block;
    width: 100% !important;
    height: 250px !important;
    max-width: 100%;
}

/* Tables Section */
.tables-section[b-sxz51dcjux] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.table-container[b-sxz51dcjux] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.table-container h4[b-sxz51dcjux] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-container h4 i[b-sxz51dcjux] {
    color: #6a11cb;
    margin-right: 0.5rem;
}

.btn-export[b-sxz51dcjux] {
    background: #28a745;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-export:hover[b-sxz51dcjux] {
    background: #218838;
    transform: translateY(-1px);
}

.table[b-sxz51dcjux] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.table th[b-sxz51dcjux],
.table td[b-sxz51dcjux] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.table th[b-sxz51dcjux] {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.table td[b-sxz51dcjux] {
    color: #666;
    font-size: 0.9rem;
}

.table tbody tr:hover[b-sxz51dcjux] {
    background-color: #f8f9fa;
}

/* Empty State */
.empty-state[b-sxz51dcjux] {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

/* Empty State Container */
.empty-state-container[b-sxz51dcjux] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.empty-icon[b-sxz51dcjux] {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 1rem;
}

.empty-state-container h4[b-sxz51dcjux] {
    color: #333;
    margin-bottom: 0.5rem;
}

.empty-state-container p[b-sxz51dcjux] {
    color: #666;
    margin-bottom: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .payouts-and-partners-dashboard[b-sxz51dcjux] {
        padding: 1rem;
    }
    
    .dashboard-title[b-sxz51dcjux] {
        font-size: 2rem;
    }
    
    .filters-row[b-sxz51dcjux] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-sxz51dcjux] {
        justify-content: space-between;
    }
    
    .kpi-row[b-sxz51dcjux] {
        grid-template-columns: 1fr;
    }
    
    .tables-section[b-sxz51dcjux] {
        grid-template-columns: 1fr;
    }
    
    .table-container[b-sxz51dcjux] {
        overflow-x: auto;
    }
}
/* /Pages/Admin/Stats/PromoCodePerformance.razor.rz.scp.css */
/* Promo Code Performance Dashboard Styles */

.promo-code-performance-dashboard[b-7tzqllg3pi] {
    padding: 2rem;
    background-color: #f8f9fa;
    min-height: 100vh;
}

.dashboard-header[b-7tzqllg3pi] {
    margin-bottom: 2rem;
    text-align: center;
}

.dashboard-title[b-7tzqllg3pi] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.dashboard-subtitle[b-7tzqllg3pi] {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 0;
}

/* Filters Section */
.filters-section[b-7tzqllg3pi] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filters-row[b-7tzqllg3pi] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.filter-group[b-7tzqllg3pi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label[b-7tzqllg3pi] {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.filter-input[b-7tzqllg3pi],
.filter-select[b-7tzqllg3pi] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.filter-input:focus[b-7tzqllg3pi],
.filter-select:focus[b-7tzqllg3pi] {
    outline: none;
    border-color: #6a11cb;
    box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.1);
}

.btn-apply[b-7tzqllg3pi] {
    background: linear-gradient(135deg, #6a11cb, #8d5cf4);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-apply:hover:not(:disabled)[b-7tzqllg3pi] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}

.btn-apply:disabled[b-7tzqllg3pi] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading State */
.loading[b-7tzqllg3pi] {
    text-align: center;
    padding: 3rem;
    color: #666;
    font-size: 1.1rem;
}

.loading i[b-7tzqllg3pi] {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    animation: spin-b-7tzqllg3pi 1s linear infinite;
}

@keyframes spin-b-7tzqllg3pi {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Error State */
.alert[b-7tzqllg3pi] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-danger[b-7tzqllg3pi] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* KPI Section */
.kpi-section[b-7tzqllg3pi] {
    margin-bottom: 2rem;
}

.kpi-section h4[b-7tzqllg3pi] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kpi-row[b-7tzqllg3pi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.kpi-card[b-7tzqllg3pi] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.kpi-card:hover[b-7tzqllg3pi] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.kpi-header[b-7tzqllg3pi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.kpi-header i[b-7tzqllg3pi] {
    font-size: 1.25rem;
    color: #6a11cb;
}

.kpi-header span[b-7tzqllg3pi] {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.kpi-value[b-7tzqllg3pi] {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.kpi-details[b-7tzqllg3pi] {
    color: #666;
    font-size: 0.85rem;
}

/* Charts Section */
.charts-section[b-7tzqllg3pi] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.charts-section h4[b-7tzqllg3pi] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-container[b-7tzqllg3pi] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.chart-container h5[b-7tzqllg3pi] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    text-align: center;
}

.chart-container canvas[b-7tzqllg3pi] {
    display: block;
    width: 100% !important;
    height: 250px !important;
    max-width: 100%;
}

/* Tables Section */
.tables-section[b-7tzqllg3pi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.table-container[b-7tzqllg3pi] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.table-container h4[b-7tzqllg3pi] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-container h4 i[b-7tzqllg3pi] {
    color: #6a11cb;
    margin-right: 0.5rem;
}

.btn-export[b-7tzqllg3pi] {
    background: #28a745;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-export:hover[b-7tzqllg3pi] {
    background: #218838;
    transform: translateY(-1px);
}

.table[b-7tzqllg3pi] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.table th[b-7tzqllg3pi],
.table td[b-7tzqllg3pi] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.table th[b-7tzqllg3pi] {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.table td[b-7tzqllg3pi] {
    color: #666;
    font-size: 0.9rem;
}

.table tbody tr:hover[b-7tzqllg3pi] {
    background-color: #f8f9fa;
}

/* Empty State */
.empty-state[b-7tzqllg3pi] {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

/* Empty State Container */
.empty-state-container[b-7tzqllg3pi] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.empty-icon[b-7tzqllg3pi] {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 1rem;
}

.empty-state-container h4[b-7tzqllg3pi] {
    color: #333;
    margin-bottom: 0.5rem;
}

.empty-state-container p[b-7tzqllg3pi] {
    color: #666;
    margin-bottom: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .promo-code-performance-dashboard[b-7tzqllg3pi] {
        padding: 1rem;
    }
    
    .dashboard-title[b-7tzqllg3pi] {
        font-size: 2rem;
    }
    
    .filters-row[b-7tzqllg3pi] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-7tzqllg3pi] {
        justify-content: space-between;
    }
    
    .kpi-row[b-7tzqllg3pi] {
        grid-template-columns: 1fr;
    }
    
    .tables-section[b-7tzqllg3pi] {
        grid-template-columns: 1fr;
    }
    
    .table-container[b-7tzqllg3pi] {
        overflow-x: auto;
    }
}
/* /Pages/Admin/Stats/SubscriptionsAndRetention.razor.rz.scp.css */
/* Subscriptions & Retention Dashboard Styles */

.subscriptions-retention-dashboard[b-zz6pi5pjwu] {
    padding: 2rem;
    background-color: #f8f9fa;
    min-height: 100vh;
}

.dashboard-header[b-zz6pi5pjwu] {
    margin-bottom: 2rem;
    text-align: center;
}

.dashboard-title[b-zz6pi5pjwu] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.dashboard-subtitle[b-zz6pi5pjwu] {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 0;
}

/* Filters Section */
.filters-section[b-zz6pi5pjwu] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filters-row[b-zz6pi5pjwu] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.filter-group[b-zz6pi5pjwu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label[b-zz6pi5pjwu] {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.filter-input[b-zz6pi5pjwu],
.filter-select[b-zz6pi5pjwu] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.filter-input:focus[b-zz6pi5pjwu],
.filter-select:focus[b-zz6pi5pjwu] {
    outline: none;
    border-color: #6a11cb;
    box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.1);
}

.btn-apply[b-zz6pi5pjwu] {
    background: linear-gradient(135deg, #6a11cb, #8d5cf4);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-apply:hover:not(:disabled)[b-zz6pi5pjwu] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}

.btn-apply:disabled[b-zz6pi5pjwu] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading State */
.loading[b-zz6pi5pjwu] {
    text-align: center;
    padding: 3rem;
    color: #666;
    font-size: 1.1rem;
}

.loading i[b-zz6pi5pjwu] {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    animation: spin-b-zz6pi5pjwu 1s linear infinite;
}

@keyframes spin-b-zz6pi5pjwu {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Error State */
.alert[b-zz6pi5pjwu] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-danger[b-zz6pi5pjwu] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* KPI Section */
.kpi-section[b-zz6pi5pjwu] {
    margin-bottom: 2rem;
}

.kpi-section h4[b-zz6pi5pjwu] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kpi-row[b-zz6pi5pjwu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.kpi-card[b-zz6pi5pjwu] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.kpi-card:hover[b-zz6pi5pjwu] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.kpi-header[b-zz6pi5pjwu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.kpi-header i[b-zz6pi5pjwu] {
    font-size: 1.25rem;
    color: #6a11cb;
}

.kpi-header span[b-zz6pi5pjwu] {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.kpi-value[b-zz6pi5pjwu] {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.kpi-details[b-zz6pi5pjwu] {
    color: #666;
    font-size: 0.85rem;
}

/* Charts Section */
.charts-section[b-zz6pi5pjwu] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.charts-section h4[b-zz6pi5pjwu] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Charts Section */
.charts-section[b-zz6pi5pjwu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.chart-container[b-zz6pi5pjwu] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.chart-title[b-zz6pi5pjwu] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Pie Chart Styles */
.pie-chart[b-zz6pi5pjwu] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.pie-segment[b-zz6pi5pjwu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border-radius: 8px;
    background: var(--color, #f8f9fa);
    min-width: 80px;
    transition: transform 0.2s ease;
}

.pie-segment:hover[b-zz6pi5pjwu] {
    transform: scale(1.05);
}

.pie-label[b-zz6pi5pjwu] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

.pie-value[b-zz6pi5pjwu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
}

/* Time Series Chart Styles */
.time-series-chart[b-zz6pi5pjwu] {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.chart-bars-container[b-zz6pi5pjwu] {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 200px;
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1rem;
    width: 100%;
}

.chart-day[b-zz6pi5pjwu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 20px;
}

.day-bars[b-zz6pi5pjwu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    height: 100%;
    justify-content: end;
}

.chart-bar[b-zz6pi5pjwu] {
    width: 100%;
    border-radius: 2px 2px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 2px;
}

.chart-bar:hover[b-zz6pi5pjwu] {
    opacity: 0.8;
    transform: scaleY(1.05);
}

.active-bar[b-zz6pi5pjwu] {
    background: linear-gradient(135deg, #3498db, #5dade2);
}

.new-bar[b-zz6pi5pjwu] {
    background: linear-gradient(135deg, #2ecc71, #58d68d);
}

.chart-date[b-zz6pi5pjwu] {
    font-size: 0.7rem;
    color: #666;
    margin-top: 0.5rem;
    text-align: center;
    writing-mode: horizontal-tb;
}

.empty-chart[b-zz6pi5pjwu] {
    text-align: center;
    padding: 3rem;
    color: #666;
}

.empty-chart i[b-zz6pi5pjwu] {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 1rem;
    display: block;
}

.chart-legend[b-zz6pi5pjwu] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 6px;
}

.legend-item[b-zz6pi5pjwu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #666;
}

.legend-color[b-zz6pi5pjwu] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.chart-day[b-zz6pi5pjwu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 30px;
    height: 100%;
    position: relative;
}

.day-bars[b-zz6pi5pjwu] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 180px;
    margin-bottom: 0.5rem;
    width: 100%;
}

.chart-bar[b-zz6pi5pjwu] {
    width: 8px;
    min-height: 5px;
    border-radius: 3px 3px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: 0.9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chart-bar:hover[b-zz6pi5pjwu] {
    opacity: 1;
    transform: scaleY(1.05);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.active-bar[b-zz6pi5pjwu] {
    background: linear-gradient(to top, #2980b9, #3498db);
}

.new-bar[b-zz6pi5pjwu] {
    background: linear-gradient(to top, #27ae60, #2ecc71);
}

.chart-date[b-zz6pi5pjwu] {
    font-size: 0.7rem;
    color: #666;
    text-align: center;
    white-space: nowrap;
    transform: rotate(-45deg);
    transform-origin: center center;
    margin-top: 1rem;
    height: 25px;
    line-height: 25px;
    font-weight: 500;
}

.empty-chart[b-zz6pi5pjwu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #666;
    font-style: italic;
}

.empty-chart i[b-zz6pi5pjwu] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* Tables Section */
.tables-section[b-zz6pi5pjwu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.table-container[b-zz6pi5pjwu] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.table-container h4[b-zz6pi5pjwu] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-container h4 i[b-zz6pi5pjwu] {
    color: #6a11cb;
    margin-right: 0.5rem;
}

.btn-export[b-zz6pi5pjwu] {
    background: #28a745;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-export:hover[b-zz6pi5pjwu] {
    background: #218838;
    transform: translateY(-1px);
}

.table[b-zz6pi5pjwu] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.table th[b-zz6pi5pjwu],
.table td[b-zz6pi5pjwu] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.table th[b-zz6pi5pjwu] {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.table td[b-zz6pi5pjwu] {
    color: #666;
    font-size: 0.9rem;
}

.table tbody tr:hover[b-zz6pi5pjwu] {
    background-color: #f8f9fa;
}

/* Table Header */
.table-header[b-zz6pi5pjwu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.table-header h4[b-zz6pi5pjwu] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-header h4 i[b-zz6pi5pjwu] {
    color: #6a11cb;
}

.table-actions[b-zz6pi5pjwu] {
    display: flex;
    gap: 0.5rem;
}

/* Chart Styles */
.time-series-chart[b-zz6pi5pjwu] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.chart-bars-container[b-zz6pi5pjwu] {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 200px;
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1rem;
    width: 100%;
}

.chart-day[b-zz6pi5pjwu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 20px;
}

.day-bars[b-zz6pi5pjwu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    height: 100%;
    justify-content: end;
}

.chart-bar[b-zz6pi5pjwu] {
    width: 100%;
    border-radius: 2px 2px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 2px;
}

.chart-bar:hover[b-zz6pi5pjwu] {
    opacity: 0.8;
    transform: scaleY(1.05);
}

.active-bar[b-zz6pi5pjwu] {
    background: linear-gradient(135deg, #3498db, #5dade2);
}

.new-bar[b-zz6pi5pjwu] {
    background: linear-gradient(135deg, #2ecc71, #58d68d);
}

.chart-date[b-zz6pi5pjwu] {
    font-size: 0.7rem;
    color: #666;
    margin-top: 0.5rem;
    text-align: center;
    writing-mode: horizontal-tb;
}

.empty-chart[b-zz6pi5pjwu] {
    text-align: center;
    padding: 3rem;
    color: #666;
}

.empty-chart i[b-zz6pi5pjwu] {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 1rem;
    display: block;
}

/* Data Table */
.table-wrapper[b-zz6pi5pjwu] {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.data-table[b-zz6pi5pjwu] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.data-table th[b-zz6pi5pjwu],
.data-table td[b-zz6pi5pjwu] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.9rem;
}

.data-table th[b-zz6pi5pjwu] {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    position: sticky;
    top: 0;
    z-index: 1;
}

.data-table td[b-zz6pi5pjwu] {
    color: #666;
}

.data-table tbody tr:hover[b-zz6pi5pjwu] {
    background-color: #f8f9fa;
}

/* User ID styling */
.user-id[b-zz6pi5pjwu] {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: #666;
    background-color: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Plan badges */
.plan-badge[b-zz6pi5pjwu] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}

.plan-trial[b-zz6pi5pjwu] {
    background-color: #e3f2fd;
    color: #1976d2;
}

.plan-monthly[b-zz6pi5pjwu] {
    background-color: #e8f5e8;
    color: #2e7d32;
}

.plan-yearly[b-zz6pi5pjwu] {
    background-color: #fff3e0;
    color: #f57c00;
}

.plan-sixmonths[b-zz6pi5pjwu] {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

/* Days badges */
.days-badge[b-zz6pi5pjwu] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    min-width: 30px;
    text-align: center;
}

.days-badge.urgent[b-zz6pi5pjwu] {
    background-color: #ffebee;
    color: #c62828;
}

.days-badge.warning[b-zz6pi5pjwu] {
    background-color: #fff3e0;
    color: #ef6c00;
}

.days-badge.normal[b-zz6pi5pjwu] {
    background-color: #e8f5e8;
    color: #2e7d32;
}

/* Empty table state */
.empty-table[b-zz6pi5pjwu] {
    text-align: center;
    padding: 2rem !important;
    color: #666;
    font-style: italic;
}

.empty-table i[b-zz6pi5pjwu] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
    display: block;
}

/* Empty State */
.empty-state[b-zz6pi5pjwu] {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

/* Empty State Container */
.empty-state-container[b-zz6pi5pjwu] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.empty-icon[b-zz6pi5pjwu] {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 1rem;
}

.empty-state-container h4[b-zz6pi5pjwu] {
    color: #333;
    margin-bottom: 0.5rem;
}

.empty-state-container p[b-zz6pi5pjwu] {
    color: #666;
    margin-bottom: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .subscriptions-retention-dashboard[b-zz6pi5pjwu] {
        padding: 1rem;
    }
    
    .dashboard-title[b-zz6pi5pjwu] {
        font-size: 2rem;
    }
    
    .filters-row[b-zz6pi5pjwu] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-zz6pi5pjwu] {
        justify-content: space-between;
    }
    
    .kpi-row[b-zz6pi5pjwu] {
        grid-template-columns: 1fr;
    }
    
    .tables-section[b-zz6pi5pjwu] {
        grid-template-columns: 1fr;
    }
    
    .table-container[b-zz6pi5pjwu] {
        overflow-x: auto;
    }
}
/* /Pages/Admin/Stats/UserAnalytics.razor.rz.scp.css */
/* User Analytics Dashboard Styles */

.user-analytics-dashboard[b-oqgjvvjs0a] {
    padding: 2rem;
    background-color: #f8f9fa;
    min-height: 100vh;
}

.dashboard-header[b-oqgjvvjs0a] {
    margin-bottom: 2rem;
    text-align: center;
}

.dashboard-title[b-oqgjvvjs0a] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.dashboard-subtitle[b-oqgjvvjs0a] {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 0;
}

/* Filters Section */
.filters-section[b-oqgjvvjs0a] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filters-row[b-oqgjvvjs0a] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.filter-group[b-oqgjvvjs0a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label[b-oqgjvvjs0a] {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.filter-input[b-oqgjvvjs0a],
.filter-select[b-oqgjvvjs0a] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.filter-input:focus[b-oqgjvvjs0a],
.filter-select:focus[b-oqgjvvjs0a] {
    outline: none;
    border-color: #6a11cb;
    box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.1);
}

.btn-apply[b-oqgjvvjs0a] {
    background: linear-gradient(135deg, #6a11cb, #8d5cf4);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-apply:hover:not(:disabled)[b-oqgjvvjs0a] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}

.btn-apply:disabled[b-oqgjvvjs0a] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading State */
.loading[b-oqgjvvjs0a] {
    text-align: center;
    padding: 3rem;
    color: #666;
    font-size: 1.1rem;
}

.loading i[b-oqgjvvjs0a] {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    animation: spin-b-oqgjvvjs0a 1s linear infinite;
}

@keyframes spin-b-oqgjvvjs0a {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Error State */
.alert[b-oqgjvvjs0a] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-danger[b-oqgjvvjs0a] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* KPI Section */
.kpi-section[b-oqgjvvjs0a] {
    margin-bottom: 2rem;
}

.kpi-section h3[b-oqgjvvjs0a] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kpi-row[b-oqgjvvjs0a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.kpi-card[b-oqgjvvjs0a] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.kpi-card:hover[b-oqgjvvjs0a] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.kpi-card.kpi-success[b-oqgjvvjs0a] {
    border-left: 4px solid #28a745;
}

.kpi-card.kpi-warning[b-oqgjvvjs0a] {
    border-left: 4px solid #ffc107;
}

.kpi-card.kpi-danger[b-oqgjvvjs0a] {
    border-left: 4px solid #dc3545;
}

.kpi-value[b-oqgjvvjs0a] {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.kpi-label[b-oqgjvvjs0a] {
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Charts Section */
.charts-section[b-oqgjvvjs0a] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.charts-section h3[b-oqgjvvjs0a] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-container[b-oqgjvvjs0a] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.chart-container h5[b-oqgjvvjs0a] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    text-align: center;
}

.chart-container canvas[b-oqgjvvjs0a] {
    display: block;
    width: 100% !important;
    height: 250px !important;
    max-width: 100%;
}

/* Tables Section */
.tables-section[b-oqgjvvjs0a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.table-container[b-oqgjvvjs0a] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.table-container h4[b-oqgjvvjs0a] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-container h4 i[b-oqgjvvjs0a] {
    color: #6a11cb;
    margin-right: 0.5rem;
}

.btn-export[b-oqgjvvjs0a] {
    background: #28a745;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-export:hover[b-oqgjvvjs0a] {
    background: #218838;
    transform: translateY(-1px);
}

.table[b-oqgjvvjs0a] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.table th[b-oqgjvvjs0a],
.table td[b-oqgjvvjs0a] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.table th[b-oqgjvvjs0a] {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.table td[b-oqgjvvjs0a] {
    color: #666;
    font-size: 0.9rem;
}

.table tbody tr:hover[b-oqgjvvjs0a] {
    background-color: #f8f9fa;
}

/* Empty State */
.empty-state[b-oqgjvvjs0a] {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

/* Empty State Container */
.empty-state-container[b-oqgjvvjs0a] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.empty-icon[b-oqgjvvjs0a] {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 1rem;
}

.empty-state-container h4[b-oqgjvvjs0a] {
    color: #333;
    margin-bottom: 0.5rem;
}

.empty-state-container p[b-oqgjvvjs0a] {
    color: #666;
    margin-bottom: 1.5rem;
}

/* No Issues State */
.no-issues[b-oqgjvvjs0a] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Badge Styles */
.badge[b-oqgjvvjs0a] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
}

.bg-success[b-oqgjvvjs0a] {
    background-color: #28a745;
    color: #fff;
}

.bg-warning[b-oqgjvvjs0a] {
    background-color: #ffc107;
    color: #000;
}

.bg-danger[b-oqgjvvjs0a] {
    background-color: #dc3545;
    color: #fff;
}

.bg-info[b-oqgjvvjs0a] {
    background-color: #17a2b8;
    color: #fff;
}

.bg-secondary[b-oqgjvvjs0a] {
    background-color: #6c757d;
    color: #fff;
}

/* Text Colors */
.text-success[b-oqgjvvjs0a] {
    color: #28a745 !important;
}

.text-warning[b-oqgjvvjs0a] {
    color: #ffc107 !important;
}

.text-danger[b-oqgjvvjs0a] {
    color: #dc3545 !important;
}

.text-muted[b-oqgjvvjs0a] {
    color: #6c757d !important;
}

.fw-bold[b-oqgjvvjs0a] {
    font-weight: 700 !important;
}

/* Row and Column System */
.row[b-oqgjvvjs0a] {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.col-md-2[b-oqgjvvjs0a] {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.col-md-3[b-oqgjvvjs0a] {
    flex: 0 0 25%;
    max-width: 25%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.col-md-6[b-oqgjvvjs0a] {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

/* Form Controls */
.form-control[b-oqgjvvjs0a] {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus[b-oqgjvvjs0a] {
    color: #212529;
    background-color: #fff;
    border-color: #6a11cb;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(106, 17, 203, 0.25);
}

.form-label[b-oqgjvvjs0a] {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.form-select[b-oqgjvvjs0a] {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-select:focus[b-oqgjvvjs0a] {
    border-color: #6a11cb;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(106, 17, 203, 0.25);
}

/* Button Styles */
.btn[b-oqgjvvjs0a] {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary[b-oqgjvvjs0a] {
    color: #fff;
    background-color: #6a11cb;
    border-color: #6a11cb;
}

.btn-primary:hover[b-oqgjvvjs0a] {
    color: #fff;
    background-color: #5a0fb8;
    border-color: #5a0fb8;
}

.btn-outline-danger[b-oqgjvvjs0a] {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-danger:hover[b-oqgjvvjs0a] {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-sm[b-oqgjvvjs0a] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.btn:disabled[b-oqgjvvjs0a] {
    pointer-events: none;
    opacity: 0.65;
}

/* Spinner */
.spinner-border[b-oqgjvvjs0a] {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentcolor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-oqgjvvjs0a 0.75s linear infinite;
}

.spinner-border-sm[b-oqgjvvjs0a] {
    width: 1rem;
    height: 1rem;
    border-width: 0.125em;
}

@keyframes spinner-border-b-oqgjvvjs0a {
    to {
        transform: rotate(360deg);
    }
}

/* Utility Classes */
.text-center[b-oqgjvvjs0a] {
    text-align: center !important;
}

.py-5[b-oqgjvvjs0a] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.py-4[b-oqgjvvjs0a] {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.mt-3[b-oqgjvvjs0a] {
    margin-top: 1rem !important;
}

.mb-3[b-oqgjvvjs0a] {
    margin-bottom: 1rem !important;
}

.me-2[b-oqgjvvjs0a] {
    margin-right: 0.5rem !important;
}

.d-flex[b-oqgjvvjs0a] {
    display: flex !important;
}

.align-items-center[b-oqgjvvjs0a] {
    align-items: center !important;
}

.align-items-end[b-oqgjvvjs0a] {
    align-items: flex-end !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .user-analytics-dashboard[b-oqgjvvjs0a] {
        padding: 1rem;
    }
    
    .dashboard-title[b-oqgjvvjs0a] {
        font-size: 2rem;
    }
    
    .filters-row[b-oqgjvvjs0a] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-oqgjvvjs0a] {
        justify-content: space-between;
    }
    
    .kpi-row[b-oqgjvvjs0a] {
        grid-template-columns: 1fr;
    }
    
    .tables-section[b-oqgjvvjs0a] {
        grid-template-columns: 1fr;
    }
    
    .table-container[b-oqgjvvjs0a] {
        overflow-x: auto;
    }
    
    .col-md-2[b-oqgjvvjs0a],
    .col-md-3[b-oqgjvvjs0a],
    .col-md-6[b-oqgjvvjs0a] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* /Pages/Admin/Stats/UsersAndCohorts.razor.rz.scp.css */
/* Users & Cohorts Dashboard Styles */

.users-cohorts-dashboard[b-m6l5agjhsk] {
    padding: 2rem;
    background-color: #f8f9fa;
    min-height: 100vh;
}

.dashboard-header[b-m6l5agjhsk] {
    margin-bottom: 2rem;
    text-align: center;
}

.dashboard-title[b-m6l5agjhsk] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.dashboard-subtitle[b-m6l5agjhsk] {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 0;
}

/* Filters Section */
.filters-section[b-m6l5agjhsk] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filters-row[b-m6l5agjhsk] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.filter-group[b-m6l5agjhsk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label[b-m6l5agjhsk] {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.filter-input[b-m6l5agjhsk],
.filter-select[b-m6l5agjhsk] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.filter-input:focus[b-m6l5agjhsk],
.filter-select:focus[b-m6l5agjhsk] {
    outline: none;
    border-color: #6a11cb;
    box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.1);
}

.btn-apply[b-m6l5agjhsk] {
    background: linear-gradient(135deg, #6a11cb, #8d5cf4);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-apply:hover:not(:disabled)[b-m6l5agjhsk] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}

.btn-apply:disabled[b-m6l5agjhsk] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading State */
.loading[b-m6l5agjhsk] {
    text-align: center;
    padding: 3rem;
    color: #666;
    font-size: 1.1rem;
}

.loading i[b-m6l5agjhsk] {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    animation: spin-b-m6l5agjhsk 1s linear infinite;
}

@keyframes spin-b-m6l5agjhsk {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Error State */
.alert[b-m6l5agjhsk] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-danger[b-m6l5agjhsk] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* KPI Section */
.kpi-section[b-m6l5agjhsk] {
    margin-bottom: 2rem;
}

.kpi-section h4[b-m6l5agjhsk] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kpi-row[b-m6l5agjhsk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.kpi-card[b-m6l5agjhsk] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.kpi-card:hover[b-m6l5agjhsk] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.kpi-header[b-m6l5agjhsk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.kpi-header i[b-m6l5agjhsk] {
    font-size: 1.25rem;
    color: #6a11cb;
}

.kpi-header span[b-m6l5agjhsk] {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.kpi-value[b-m6l5agjhsk] {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.kpi-details[b-m6l5agjhsk] {
    color: #666;
    font-size: 0.85rem;
}

/* Charts Section */
.charts-section[b-m6l5agjhsk] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.charts-section h4[b-m6l5agjhsk] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Time Series Chart Styles */
.time-series-chart[b-m6l5agjhsk] {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.chart-bars-container[b-m6l5agjhsk] {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 200px;
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1rem;
    width: 100%;
}

.chart-day[b-m6l5agjhsk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 20px;
}

.day-bars[b-m6l5agjhsk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    height: 100%;
    justify-content: end;
}

.chart-bar[b-m6l5agjhsk] {
    width: 100%;
    border-radius: 2px 2px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 2px;
}

.chart-bar:hover[b-m6l5agjhsk] {
    opacity: 0.8;
    transform: scaleY(1.05);
}

.registrations-bar[b-m6l5agjhsk] {
    background: linear-gradient(135deg, #3498db, #5dade2);
}

.conversion-bar[b-m6l5agjhsk] {
    background: linear-gradient(135deg, #2ecc71, #58d68d);
}

.chart-date[b-m6l5agjhsk] {
    font-size: 0.7rem;
    color: #666;
    margin-top: 0.5rem;
    text-align: center;
    writing-mode: horizontal-tb;
}

.empty-chart[b-m6l5agjhsk] {
    text-align: center;
    padding: 3rem;
    color: #666;
}

.empty-chart i[b-m6l5agjhsk] {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 1rem;
    display: block;
}

.chart-title[b-m6l5agjhsk] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-legend[b-m6l5agjhsk] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 6px;
}

.legend-item[b-m6l5agjhsk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #666;
}

.legend-color[b-m6l5agjhsk] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.chart-day[b-m6l5agjhsk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 30px;
    height: 100%;
    position: relative;
}

.day-bars[b-m6l5agjhsk] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 180px;
    margin-bottom: 0.5rem;
    width: 100%;
}

.chart-bar[b-m6l5agjhsk] {
    width: 8px;
    min-height: 5px;
    border-radius: 3px 3px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: 0.9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chart-bar:hover[b-m6l5agjhsk] {
    opacity: 1;
    transform: scaleY(1.05);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.registrations-bar[b-m6l5agjhsk] {
    background: linear-gradient(to top, #2980b9, #3498db);
}

.conversion-bar[b-m6l5agjhsk] {
    background: linear-gradient(to top, #27ae60, #2ecc71);
}

.chart-date[b-m6l5agjhsk] {
    font-size: 0.7rem;
    color: #666;
    text-align: center;
    white-space: nowrap;
    transform: rotate(-45deg);
    transform-origin: center center;
    margin-top: 1rem;
    height: 25px;
    line-height: 25px;
    font-weight: 500;
}

.empty-chart[b-m6l5agjhsk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #666;
    font-style: italic;
}

.empty-chart i[b-m6l5agjhsk] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* Tables Section */
.tables-section[b-m6l5agjhsk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.table-container[b-m6l5agjhsk] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.table-container h4[b-m6l5agjhsk] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-container h4 i[b-m6l5agjhsk] {
    color: #6a11cb;
    margin-right: 0.5rem;
}

.btn-export[b-m6l5agjhsk] {
    background: #28a745;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-export:hover[b-m6l5agjhsk] {
    background: #218838;
    transform: translateY(-1px);
}

.table[b-m6l5agjhsk] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.table th[b-m6l5agjhsk],
.table td[b-m6l5agjhsk] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.table th[b-m6l5agjhsk] {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.table td[b-m6l5agjhsk] {
    color: #666;
    font-size: 0.9rem;
}

.table tbody tr:hover[b-m6l5agjhsk] {
    background-color: #f8f9fa;
}

/* Conversion Table Styles */
.conversion-cell[b-m6l5agjhsk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.conversion-value[b-m6l5agjhsk] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
}

.conversion-bar[b-m6l5agjhsk] {
    width: 100%;
    height: 6px;
    background-color: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.conversion-fill[b-m6l5agjhsk] {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #20c997);
    transition: width 0.3s ease;
}

.table-header[b-m6l5agjhsk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.table-actions[b-m6l5agjhsk] {
    display: flex;
    gap: 0.5rem;
}

.data-table[b-m6l5agjhsk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th[b-m6l5agjhsk],
.data-table td[b-m6l5agjhsk] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.data-table th[b-m6l5agjhsk] {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    font-size: 0.85rem;
}

.data-table td[b-m6l5agjhsk] {
    color: #666;
}

.data-table tbody tr:hover[b-m6l5agjhsk] {
    background-color: #f8f9fa;
}

.empty-table[b-m6l5agjhsk] {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

.empty-table i[b-m6l5agjhsk] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
    display: block;
}

.user-id[b-m6l5agjhsk] {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: #6c757d;
}

.table-wrapper[b-m6l5agjhsk] {
    overflow-x: auto;
}

/* Empty State */
.empty-state[b-m6l5agjhsk] {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

/* Empty State Container */
.empty-state-container[b-m6l5agjhsk] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.empty-icon[b-m6l5agjhsk] {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 1rem;
}

.empty-state-container h4[b-m6l5agjhsk] {
    color: #333;
    margin-bottom: 0.5rem;
}

.empty-state-container p[b-m6l5agjhsk] {
    color: #666;
    margin-bottom: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .users-cohorts-dashboard[b-m6l5agjhsk] {
        padding: 1rem;
    }
    
    .dashboard-title[b-m6l5agjhsk] {
        font-size: 2rem;
    }
    
    .filters-row[b-m6l5agjhsk] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-m6l5agjhsk] {
        justify-content: space-between;
    }
    
    .kpi-row[b-m6l5agjhsk] {
        grid-template-columns: 1fr;
    }
    
    .tables-section[b-m6l5agjhsk] {
        grid-template-columns: 1fr;
    }
    
    .table-container[b-m6l5agjhsk] {
        overflow-x: auto;
    }
}

/* Chart Styles */
.time-series-chart[b-m6l5agjhsk] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.chart-bars-container[b-m6l5agjhsk] {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 200px;
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1rem;
    width: 100%;
}

.chart-day[b-m6l5agjhsk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 20px;
}

.day-bars[b-m6l5agjhsk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    height: 100%;
    justify-content: end;
}

.chart-bar[b-m6l5agjhsk] {
    width: 100%;
    border-radius: 2px 2px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.chart-bar:hover[b-m6l5agjhsk] {
    opacity: 0.8;
    transform: scaleY(1.05);
}

.registrations-bar[b-m6l5agjhsk] {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    min-height: 2px;
}

.conversion-bar[b-m6l5agjhsk] {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    min-height: 2px;
}

.chart-date[b-m6l5agjhsk] {
    font-size: 0.7rem;
    color: #666;
    margin-top: 0.5rem;
    text-align: center;
    writing-mode: horizontal-tb;
}

.empty-chart[b-m6l5agjhsk] {
    text-align: center;
    padding: 3rem;
    color: #666;
}

.empty-chart i[b-m6l5agjhsk] {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 1rem;
    display: block;
}
/* /Pages/Admin/Tickets/AdminSupport.razor.rz.scp.css */
/* Основной контейнер */
.admin-support-container[b-z95wwt16rm] {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    background: linear-gradient(135deg, #f8f9ff 0%, #f1f3ff 100%);
    min-height: calc(100vh - 80px);
}

/* Заголовок админ панели */
.admin-header[b-z95wwt16rm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 25px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.1);
    position: relative;
    overflow: hidden;
}

.admin-header[b-z95wwt16rm]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.admin-title[b-z95wwt16rm] {
    color: #2c3e50;
    font-weight: 600;
    margin: 0;
    font-size: 1.75rem;
}

.admin-actions[b-z95wwt16rm] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.admin-badge[b-z95wwt16rm] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    white-space: nowrap;
}

/* Быстрая статистика */
.quick-stats[b-z95wwt16rm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.quick-stat-item[b-z95wwt16rm] {
    background: white;
    padding: 25px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.quick-stat-item[b-z95wwt16rm]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.quick-stat-item:hover[b-z95wwt16rm]::before {
    transform: scaleX(1);
}

.quick-stat-item:hover[b-z95wwt16rm] {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.quick-stat-number[b-z95wwt16rm] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 8px;
    line-height: 1;
}

.quick-stat-label[b-z95wwt16rm] {
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Загрузка */
.loading-container[b-z95wwt16rm] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.loading-spinner[b-z95wwt16rm] {
    text-align: center;
}

.loading-text[b-z95wwt16rm] {
    color: #6c757d;
    margin-top: 20px;
    font-size: 1.1rem;
    font-weight: 500;
}

.spinner-border[b-z95wwt16rm] {
    width: 3.5rem;
    height: 3.5rem;
    border-width: 4px;
}

/* Фильтры */
.tickets-filter[b-z95wwt16rm] {
    margin-bottom: 30px;
}

.filter-container[b-z95wwt16rm] {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.btn-group .btn[b-z95wwt16rm] {
    border-radius: 10px !important;
    margin-right: 8px;
    font-weight: 500;
    padding: 12px 20px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.btn-group .btn:hover[b-z95wwt16rm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-group .btn-check:checked + .btn[b-z95wwt16rm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.3);
}

/* Карточки тикетов */
.tickets-list[b-z95wwt16rm] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ticket-card[b-z95wwt16rm] {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid #e9ecef;
    position: relative;
    overflow: hidden;
}

.ticket-card[b-z95wwt16rm]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #e9ecef;
    transition: all 0.3s ease;
}

.ticket-card:hover[b-z95wwt16rm] {
    transform: translateY(-8px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

.ticket-card.priority-high[b-z95wwt16rm]::before {
    background: linear-gradient(180deg, #dc3545 0%, #c82333 100%);
}

.ticket-card.priority-medium[b-z95wwt16rm]::before {
    background: linear-gradient(180deg, #ffc107 0%, #e0a800 100%);
}

.ticket-card.priority-low[b-z95wwt16rm]::before {
    background: linear-gradient(180deg, #28a745 0%, #1e7e34 100%);
}

.ticket-card.status-open[b-z95wwt16rm] {
    background: linear-gradient(135deg, #fff 0%, #fff8e1 100%);
}

.ticket-card.status-waiting[b-z95wwt16rm] {
    background: linear-gradient(135deg, #fff 0%, #ffe5e5 100%);
}

.ticket-header[b-z95wwt16rm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ticket-meta[b-z95wwt16rm] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.ticket-id[b-z95wwt16rm] {
    font-family: 'Courier New', monospace;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #495057;
    border: 1px solid #dee2e6;
}

.ticket-date[b-z95wwt16rm] {
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
}

.badge[b-z95wwt16rm] {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.unassigned[b-z95wwt16rm] {
    animation: pulse-warning-b-z95wwt16rm 2s infinite;
}

@keyframes pulse-warning-b-z95wwt16rm {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Контент тикета */
.ticket-content[b-z95wwt16rm] {
    margin-bottom: 20px;
}

.ticket-subject[b-z95wwt16rm] {
    color: #2c3e50;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.4;
}

.ticket-user[b-z95wwt16rm] {
    color: #667eea;
    margin-bottom: 15px;
    font-size: 1rem;
    font-weight: 500;
}

.ticket-preview[b-z95wwt16rm] {
    color: #6c757d;
    margin-bottom: 0;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Подвал тикета */
.ticket-footer[b-z95wwt16rm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.ticket-stats[b-z95wwt16rm] {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: #6c757d;
    align-items: center;
}

.ticket-actions[b-z95wwt16rm] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-action[b-z95wwt16rm] {
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
}

.btn-action:hover[b-z95wwt16rm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Пустое состояние */
.empty-state[b-z95wwt16rm] {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.empty-icon[b-z95wwt16rm] {
    color: #dee2e6;
    margin-bottom: 20px;
}

.empty-title[b-z95wwt16rm] {
    color: #495057;
    margin-bottom: 15px;
    font-weight: 600;
}

.empty-description[b-z95wwt16rm] {
    color: #6c757d;
    font-size: 1.1rem;
    line-height: 1.5;
}

/* Ошибки */
.error-container[b-z95wwt16rm] {
    margin-top: 20px;
}

.alert[b-z95wwt16rm] {
    border: none;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.alert-content[b-z95wwt16rm] {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.alert-text[b-z95wwt16rm] {
    flex: 1;
}

.alert-danger[b-z95wwt16rm] {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
}

/* Пагинация */
.pagination-container[b-z95wwt16rm] {
    margin-top: 30px;
    padding: 25px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.pagination .page-link[b-z95wwt16rm] {
    border: none;
    color: #6c757d;
    font-weight: 500;
    padding: 12px 16px;
    margin: 0 4px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.pagination .page-link:hover[b-z95wwt16rm] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.pagination .page-item.active .page-link[b-z95wwt16rm] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Адаптивность */
@media (max-width: 768px) {
    .admin-support-container[b-z95wwt16rm] {
        padding: 15px;
    }

    .admin-header[b-z95wwt16rm] {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .admin-actions[b-z95wwt16rm] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .quick-stats[b-z95wwt16rm] {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .filter-container[b-z95wwt16rm] {
        flex-direction: column;
        gap: 15px;
    }

    .btn-group[b-z95wwt16rm] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .ticket-header[b-z95wwt16rm],
    .ticket-footer[b-z95wwt16rm] {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .ticket-actions[b-z95wwt16rm] {
        width: 100%;
        justify-content: center;
    }

    .btn-action[b-z95wwt16rm] {
        flex: 1;
    }
}

@media (max-width: 576px) {
    .quick-stats[b-z95wwt16rm] {
        grid-template-columns: 1fr;
    }

    .quick-stat-number[b-z95wwt16rm] {
        font-size: 2rem;
    }

    .ticket-card[b-z95wwt16rm] {
        padding: 20px;
    }

    .ticket-meta[b-z95wwt16rm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Анимации */
.ticket-card[b-z95wwt16rm] {
    animation: fadeInUp-b-z95wwt16rm 0.4s ease-out;
}

.quick-stat-item:nth-child(1)[b-z95wwt16rm] { animation-delay: 0.1s; }
.quick-stat-item:nth-child(2)[b-z95wwt16rm] { animation-delay: 0.2s; }
.quick-stat-item:nth-child(3)[b-z95wwt16rm] { animation-delay: 0.3s; }
.quick-stat-item:nth-child(4)[b-z95wwt16rm] { animation-delay: 0.4s; }

@keyframes fadeInUp-b-z95wwt16rm {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quick-stat-item[b-z95wwt16rm] {
    animation: fadeIn-b-z95wwt16rm 0.5s ease-out;
}

@keyframes fadeIn-b-z95wwt16rm {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Pages/Admin/Tickets/AdminSupportStats.razor.rz.scp.css */
/* Основные стили страницы */
h3[b-fnscqxuqd9] {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 2rem;
    position: relative;
    padding-left: 1rem;
}

h3[b-fnscqxuqd9]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
}

/* Стили для карточек статистики */
.card[b-fnscqxuqd9] {
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.card[b-fnscqxuqd9]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover[b-fnscqxuqd9]::before {
    opacity: 1;
}

.card:hover[b-fnscqxuqd9] {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.card-body[b-fnscqxuqd9] {
    padding: 1.5rem;
    text-align: center;
    position: relative;
}

/* Стили для метрик */
.text-muted[b-fnscqxuqd9] {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    color: #6c757d !important;
}

.fs-3[b-fnscqxuqd9] {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #2c3e50;
    line-height: 1.2;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fs-4[b-fnscqxuqd9] {
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    color: #2c3e50;
    margin: 0;
}

/* Специальные стили для разных типов карточек */
.col-sm-6:nth-child(1) .card[b-fnscqxuqd9]::before,
.col-sm-6:nth-child(2) .card[b-fnscqxuqd9]::before {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.col-sm-6:nth-child(3) .card[b-fnscqxuqd9]::before,
.col-sm-6:nth-child(4) .card[b-fnscqxuqd9]::before {
    background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
}

.col-sm-6:nth-child(5) .card[b-fnscqxuqd9]::before,
.col-sm-6:nth-child(6) .card[b-fnscqxuqd9]::before {
    background: linear-gradient(90deg, #fa709a 0%, #fee140 100%);
}

.col-sm-6:nth-child(7) .card[b-fnscqxuqd9]::before,
.col-sm-6:nth-child(8) .card[b-fnscqxuqd9]::before {
    background: linear-gradient(90deg, #a8edea 0%, #fed6e3 100%);
}

/* Стили для больших карточек времени */
.col-12 .card[b-fnscqxuqd9] {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.col-12 .card-header[b-fnscqxuqd9] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 1rem 1.5rem;
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
}

.col-12 .card-body[b-fnscqxuqd9] {
    padding: 2rem 1.5rem;
    background: white;
}

/* Анимация для загрузки */
.spinner-border[b-fnscqxuqd9] {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
}

/* Стили для алертов */
.alert-danger[b-fnscqxuqd9] {
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    color: #721c24;
    box-shadow: 0 4px 15px rgba(255, 154, 158, 0.3);
}

.alert-danger i[b-fnscqxuqd9] {
    color: #dc3545;
}

/* Адаптивные стили */
@media (max-width: 768px) {
    .card-body[b-fnscqxuqd9] {
        padding: 1rem;
    }

    .fs-3[b-fnscqxuqd9] {
        font-size: 2rem !important;
    }

    .fs-4[b-fnscqxuqd9] {
        font-size: 1.5rem !important;
    }

    h3[b-fnscqxuqd9] {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

/* Дополнительные эффекты */
.card-body[b-fnscqxuqd9]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.card:hover .card-body[b-fnscqxuqd9]::after {
    opacity: 1;
}

/* Стили для выделения медленных метрик */
.text-danger[b-fnscqxuqd9] {
    animation: pulse-red-b-fnscqxuqd9 2s infinite;
}

@keyframes pulse-red-b-fnscqxuqd9 {
    0% { color: #dc3545; }
    50% { color: #ff6b6b; }
    100% { color: #dc3545; }
}

/* Стили для контейнера */
.row.g-3[b-fnscqxuqd9] {
    margin-top: 1rem;
}

/* Улучшенные стили для текста с возрастом тикетов */
.mt-3 .fw-semibold[b-fnscqxuqd9] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Стили для центрированного текста в больших карточках */
.text-center .col-sm-4[b-fnscqxuqd9],
.text-center .col-sm-6[b-fnscqxuqd9] {
    padding: 1rem 0;
    position: relative;
}

.text-center .col-sm-4[b-fnscqxuqd9]::after,
.text-center .col-sm-6[b-fnscqxuqd9]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 1px;
    opacity: 0.3;
}

/* Эффект появления карточек */
.card[b-fnscqxuqd9] {
    animation: fadeInUp-b-fnscqxuqd9 0.6s ease forwards;
}

.col-sm-6:nth-child(1) .card[b-fnscqxuqd9] { animation-delay: 0.1s; }
.col-sm-6:nth-child(2) .card[b-fnscqxuqd9] { animation-delay: 0.2s; }
.col-sm-6:nth-child(3) .card[b-fnscqxuqd9] { animation-delay: 0.3s; }
.col-sm-6:nth-child(4) .card[b-fnscqxuqd9] { animation-delay: 0.4s; }
.col-sm-6:nth-child(5) .card[b-fnscqxuqd9] { animation-delay: 0.5s; }
.col-sm-6:nth-child(6) .card[b-fnscqxuqd9] { animation-delay: 0.6s; }
.col-sm-6:nth-child(7) .card[b-fnscqxuqd9] { animation-delay: 0.7s; }
.col-sm-6:nth-child(8) .card[b-fnscqxuqd9] { animation-delay: 0.8s; }
.col-12:nth-child(9) .card[b-fnscqxuqd9] { animation-delay: 0.9s; }
.col-12:nth-child(10) .card[b-fnscqxuqd9] { animation-delay: 1.0s; }

@keyframes fadeInUp-b-fnscqxuqd9 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Pages/Admin/Tickets/AdminSupportTickets.razor.rz.scp.css */
.admin-ticket-container[b-0gbq0be710] {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    background: linear-gradient(135deg, #f8f9ff 0%, #f1f3ff 100%);
    min-height: calc(100vh - 80px);
}

/* Заголовок тикета */
.ticket-header-card[b-0gbq0be710] {
    background: white;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #667eea;
}

.ticket-header-content[b-0gbq0be710] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.ticket-header-left[b-0gbq0be710] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex: 1;
}

.ticket-title[b-0gbq0be710] {
    margin: 0;
    color: #2c3e50;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.3;
}

.ticket-id[b-0gbq0be710] {
    font-family: 'Courier New', monospace;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-right: 15px;
    border: 1px solid #dee2e6;
}

.ticket-meta[b-0gbq0be710] {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.ticket-actions-panel[b-0gbq0be710] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Сообщения */
.messages-container[b-0gbq0be710] {
    margin-bottom: 30px;
}

.message-card[b-0gbq0be710] {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    position: relative;
}

.message-card.admin-message[b-0gbq0be710] {
    border-left: 4px solid #28a745;
    background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);
}

.message-card.user-message[b-0gbq0be710] {
    border-left: 4px solid #007bff;
    background: linear-gradient(135deg, #f8fbff 0%, #e3f2fd 100%);
}

.message-header[b-0gbq0be710] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.message-author[b-0gbq0be710] {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #2c3e50;
}

.message-date[b-0gbq0be710] {
    color: #6c757d;
    font-size: 0.9rem;
}

.message-content[b-0gbq0be710] {
    color: #495057;
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 1rem;
}

.message-attachments[b-0gbq0be710] {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.message-attachments h6[b-0gbq0be710] {
    color: #6c757d;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.attachment-item[b-0gbq0be710] {
    margin-bottom: 8px;
}

/* Форма ответа */
.reply-form-container[b-0gbq0be710] {
    position: sticky;
    bottom: 20px;
    z-index: 100;
}

.reply-form-card[b-0gbq0be710] {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid #e3f2fd;
}

.reply-form-card h5[b-0gbq0be710] {
    color: #2c3e50;
    margin-bottom: 20px;
    font-weight: 600;
}

.form-control[b-0gbq0be710] {
    border-radius: 10px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.form-control:focus[b-0gbq0be710] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.reply-actions[b-0gbq0be710] {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Пустые состояния */
.empty-messages[b-0gbq0be710] {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.error-state[b-0gbq0be710] {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.loading-container[b-0gbq0be710] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.loading-spinner[b-0gbq0be710] {
    text-align: center;
}

.loading-text[b-0gbq0be710] {
    color: #6c757d;
    margin-top: 20px;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Адаптивность */
@media (max-width: 768px) {
    .admin-ticket-container[b-0gbq0be710] {
        padding: 15px;
    }

    .ticket-header-content[b-0gbq0be710] {
        flex-direction: column;
        gap: 20px;
    }

    .ticket-header-left[b-0gbq0be710] {
        flex-direction: column;
        gap: 15px;
    }

    .ticket-actions-panel[b-0gbq0be710] {
        width: 100%;
        justify-content: center;
    }

    .message-header[b-0gbq0be710] {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .reply-actions[b-0gbq0be710] {
        flex-direction: column;
    }

    .reply-actions .btn[b-0gbq0be710] {
        width: 100%;
    }
}

/* Анимации */
.message-card[b-0gbq0be710] {
    animation: fadeInUp-b-0gbq0be710 0.4s ease-out;
}

.reply-form-card[b-0gbq0be710] {
    animation: slideUp-b-0gbq0be710 0.5s ease-out;
}

@keyframes fadeInUp-b-0gbq0be710 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp-b-0gbq0be710 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Pages/Blog/InternetSecurityGuide.razor.rz.scp.css */
/* /Pages/Blog/ShadowsocksGuide.razor.rz.scp.css */
.comparison-table[b-bl50bcucsf] {
    margin: 2rem 0;
    overflow-x: auto;
}

.table[b-bl50bcucsf] {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.table th[b-bl50bcucsf] {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 1rem;
}

.table td[b-bl50bcucsf] {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-light);
}

.table tbody tr:last-child td[b-bl50bcucsf] {
    border-bottom: none;
}
/* /Pages/Blog/VpnForRussia.razor.rz.scp.css */
.blog-article[b-5wza19hf7l] {
    background: white;
    border-radius: 12px;
    padding: 3rem;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

.breadcrumb[b-5wza19hf7l] {
    color: var(--gray-color);
    margin-bottom: 1rem;
}

.breadcrumb a[b-5wza19hf7l] {
    color: var(--primary-color);
    text-decoration: none;
}

.article-header h1[b-5wza19hf7l] {
    color: var(--dark-color);
    font-size: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.article-meta[b-5wza19hf7l] {
    color: var(--gray-color);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-light);
}

.article-meta span[b-5wza19hf7l] {
    margin-right: 1.5rem;
}

.article-content h2[b-5wza19hf7l] {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin: 2.5rem 0 1rem;
}

.article-content h3[b-5wza19hf7l] {
    color: var(--dark-color);
    font-size: 1.4rem;
    margin: 2rem 0 1rem;
}

.article-content p[b-5wza19hf7l] {
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.article-content ul[b-5wza19hf7l], .article-content ol[b-5wza19hf7l] {
    margin-bottom: 1.5rem;
}

.article-content li[b-5wza19hf7l] {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.cta-section[b-5wza19hf7l] {
    background: var(--primary-color);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    margin-top: 3rem;
}

.cta-section h3[b-5wza19hf7l] {
    color: white !important;
    margin-bottom: 1rem;
}

.cta-section .btn[b-5wza19hf7l] {
    background: white;
    color: var(--primary-color);
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 600;
}
/* /Pages/Blog/VpnForStreaming.razor.rz.scp.css */
/* /Pages/Blog/VpnSpeedOptimization.razor.rz.scp.css */
.tip-box[b-nh7etrtkqd] {
    background: #e8f5e8;
    border-left: 4px solid var(--primary-color);
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
}

.code-block[b-nh7etrtkqd] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.protocol-comparison[b-nh7etrtkqd] {
    display: grid;
    gap: 1rem;
    margin: 2rem 0;
}

.protocol-item[b-nh7etrtkqd] {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.protocol-item h4[b-nh7etrtkqd] {
    margin-bottom: 0.5rem;
    color: var(--dark-color);
}

.speed-test-cta[b-nh7etrtkqd] {
    background: linear-gradient(135deg, var(--primary-color), #4CAF50);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    margin-top: 3rem;
}

.speed-test-cta h3[b-nh7etrtkqd] {
    color: white !important;
    margin-bottom: 1rem;
}

.speed-test-cta .btn[b-nh7etrtkqd] {
    background: white;
    color: var(--primary-color);
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 600;
}
/* /Pages/BlogIndex.razor.rz.scp.css */
.blog-post-card[b-tu4ib4wzem] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.blog-post-card:hover[b-tu4ib4wzem] {
    transform: translateY(-2px);
}

.blog-post-card h2 a[b-tu4ib4wzem] {
    color: var(--dark-color);
    text-decoration: none;
}

.blog-post-card h2 a:hover[b-tu4ib4wzem] {
    color: var(--primary-color);
}

.post-meta[b-tu4ib4wzem] {
    color: var(--gray-color);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.post-meta span[b-tu4ib4wzem] {
    margin-right: 1rem;
}

.read-more[b-tu4ib4wzem] {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.tag-cloud .tag[b-tu4ib4wzem] {
    display: inline-block;
    background: var(--gray-light);
    color: var(--gray-color);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    margin: 0.25rem;
    transition: all 0.3s ease;
}

.tag-cloud .tag:hover[b-tu4ib4wzem] {
    background: var(--primary-color);
    color: white;
}
/* /Pages/ConfirmEmail.razor.rz.scp.css */
/* Используем те же стили что и для Login.razor */
.login-container[b-qnllspn41a] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1rem;
}

.login-card[b-qnllspn41a] {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 2.5rem;
    width: 100%;
    max-width: 450px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 10;
}

.login-card:hover[b-qnllspn41a] {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.login-header[b-qnllspn41a] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.logo[b-qnllspn41a] {
    margin-bottom: 1.5rem;
}

.logo-text[b-qnllspn41a] {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary-color, #ff69b4), var(--secondary-color, #6a11cb));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.login-header h2[b-qnllspn41a] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1c1c1c;
    margin-bottom: 0.75rem;
}

.login-subtitle[b-qnllspn41a] {
    color: #6c757d;
    font-size: 1rem;
}

@media (max-width: 576px) {
    .login-card[b-qnllspn41a] {
        padding: 2rem 1.5rem;
    }

    .logo-text[b-qnllspn41a] {
        font-size: 2.2rem;
    }

    .login-header h2[b-qnllspn41a] {
        font-size: 1.5rem;
    }

    .login-subtitle[b-qnllspn41a] {
        font-size: 0.9rem;
    }
}

/* /Pages/Download.razor.rz.scp.css */
.download-container[b-czjbjal8vl] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Селектор платформ */
.platform-selector[b-czjbjal8vl] {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.platform-selector-inner[b-czjbjal8vl] {
    display: flex;
    min-width: 100%;
}

.platform-button[b-czjbjal8vl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: none;
    border: none;
    color: #666;
    min-width: 100px;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    outline: none;
}

.platform-button:hover[b-czjbjal8vl] {
    background-color: rgba(255, 105, 180, 0.05);
    color: #333;
}

.platform-button.active[b-czjbjal8vl] {
    color: #ff69b4;
    border-bottom-color: #ff69b4;
    background-color: rgba(255, 105, 180, 0.1);
}

.platform-button i[b-czjbjal8vl] {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

/* Контент для загрузки */
.download-content[b-czjbjal8vl] {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-bottom: 2rem;
}

.platform-details[b-czjbjal8vl] {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.platform-icon[b-czjbjal8vl] {
    font-size: 3.5rem;
    margin-right: 1.5rem;
    color: #ff69b4;
}

.platform-info h4[b-czjbjal8vl] {
    margin-bottom: 0.5rem;
    color: #333;
}

.platform-version[b-czjbjal8vl] {
    color: #666;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.platform-requirements[b-czjbjal8vl] {
    color: #666;
    font-size: 0.9rem;
}

/* Кнопки загрузки */
.download-actions[b-czjbjal8vl] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.download-button[b-czjbjal8vl] {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.5rem;
    background-color: #ff69b4;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(255, 105, 180, 0.3);
}

.download-button:hover[b-czjbjal8vl] {
    background-color: #ff5ba7;
    color: white;
}

.download-button i[b-czjbjal8vl] {
    font-size: 1.5rem;
    margin-right: 0.8rem;
}

.download-text[b-czjbjal8vl] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.download-details[b-czjbjal8vl] {
    display: block;
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Инструкция по установке */
.installation-guide[b-czjbjal8vl] {
    margin-bottom: 2rem;
}

.installation-guide h5[b-czjbjal8vl] {
    margin-bottom: 1rem;
    color: #333;
}

.installation-steps[b-czjbjal8vl] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.step[b-czjbjal8vl] {
    display: flex;
    align-items: flex-start;
}

.step-number[b-czjbjal8vl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #ff69b4;
    color: white;
    border-radius: 50%;
    margin-right: 1rem;
    font-weight: 600;
    flex-shrink: 0;
}

.step-text[b-czjbjal8vl] {
    color: #333;
    line-height: 1.5;
    padding-top: 0.2rem;
}

/* Дополнительная информация */
.additional-info[b-czjbjal8vl] {
    margin-bottom: 2rem;
}

.additional-info h5[b-czjbjal8vl] {
    margin-bottom: 1rem;
    color: #333;
}

.additional-info ul[b-czjbjal8vl] {
    list-style: none;
    padding: 0;
}

.additional-info li[b-czjbjal8vl] {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
}

.additional-info li i[b-czjbjal8vl] {
    color: #ff69b4;
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

/* Секция всех платформ */
.other-platforms[b-czjbjal8vl] {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-bottom: 2rem;
}

.other-platforms h4[b-czjbjal8vl] {
    margin-bottom: 1.5rem;
    color: #333;
}

.platforms-grid[b-czjbjal8vl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.platform-card[b-czjbjal8vl] {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 2px solid transparent;
}

.platform-card:hover[b-czjbjal8vl] {
    background-color: #f0f0f0;
    transform: translateY(-3px);
}

.platform-card.active[b-czjbjal8vl] {
    border-color: #ff69b4;
    background-color: rgba(255, 105, 180, 0.1);
}

.platform-card-icon[b-czjbjal8vl] {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
    color: #ff69b4;
}

.platform-card-name[b-czjbjal8vl] {
    font-weight: 600;
    margin-bottom: 0.2rem;
    color: #333;
}

.platform-card-version[b-czjbjal8vl] {
    font-size: 0.8rem;
    color: #666;
}

/* FAQ секция */
.faq-section[b-czjbjal8vl] {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

.faq-section h4[b-czjbjal8vl] {
    margin-bottom: 1.5rem;
    color: #333;
}

.accordion-button:not(.collapsed)[b-czjbjal8vl] {
    background-color: rgba(255, 105, 180, 0.1);
    color: #ff69b4;
    box-shadow: none;
}

.accordion-button:focus[b-czjbjal8vl] {
    box-shadow: none;
    border-color: rgba(255, 105, 180, 0.5);
}

.accordion-button[b-czjbjal8vl]::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff69b4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Адаптивность */
@media (max-width: 768px) {
    .platform-details[b-czjbjal8vl] {
        flex-direction: column;
        text-align: center;
    }

    .platform-icon[b-czjbjal8vl] {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .download-actions[b-czjbjal8vl] {
        justify-content: center;
    }

    .download-content[b-czjbjal8vl] {
        padding: 1.5rem;
    }
}
/* /Pages/ForgotPassword.razor.rz.scp.css */
/* Используем те же стили что и для Login.razor */
.login-container[b-5sueoul3c8] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1rem;
}

.login-card[b-5sueoul3c8] {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 2.5rem;
    width: 100%;
    max-width: 450px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 10;
}

.login-card:hover[b-5sueoul3c8] {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.login-header[b-5sueoul3c8] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.logo[b-5sueoul3c8] {
    margin-bottom: 1.5rem;
}

.logo-text[b-5sueoul3c8] {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary-color, #ff69b4), var(--secondary-color, #6a11cb));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.login-header h2[b-5sueoul3c8] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1c1c1c;
    margin-bottom: 0.75rem;
}

.login-subtitle[b-5sueoul3c8] {
    color: #6c757d;
    font-size: 1rem;
}

.login-form[b-5sueoul3c8] {
    margin-bottom: 2rem;
}

.form-group[b-5sueoul3c8] {
    margin-bottom: 1.75rem;
}

.form-group label[b-5sueoul3c8] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
}

.input-group[b-5sueoul3c8] {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.input-group:focus-within[b-5sueoul3c8] {
    border-color: var(--primary-color, #ff69b4);
    box-shadow: 0 0 0 0.2rem rgba(255, 105, 180, 0.15);
}

.input-icon[b-5sueoul3c8] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background-color: #f8f9fa;
    color: #6c757d;
    border-right: 1px solid #ced4da;
}

.form-control[b-5sueoul3c8] {
    border: none;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    flex-grow: 1;
}

.form-control:focus[b-5sueoul3c8] {
    box-shadow: none;
    outline: none;
}

.btn-login[b-5sueoul3c8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem;
    margin-top: 1.5rem;
    background: linear-gradient(90deg, var(--primary-color, #ff69b4), var(--secondary-color, #6a11cb));
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
}

.btn-login[b-5sueoul3c8]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    z-index: 1;
}

.btn-login:hover[b-5sueoul3c8] {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
}

.btn-login:hover[b-5sueoul3c8]:before {
    transform: translateX(100%);
}

.btn-login:disabled[b-5sueoul3c8] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-text[b-5sueoul3c8] {
    z-index: 2;
    margin-right: 0.5rem;
}

.btn-login i[b-5sueoul3c8] {
    z-index: 2;
    font-size: 1.2rem;
}

.login-footer[b-5sueoul3c8] {
    margin-top: 2rem;
    text-align: center;
}

.register-link[b-5sueoul3c8] {
    color: var(--primary-color, #ff69b4);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.register-link:hover[b-5sueoul3c8] {
    color: var(--secondary-color, #6a11cb);
    text-decoration: underline;
}

@media (max-width: 576px) {
    .login-card[b-5sueoul3c8] {
        padding: 2rem 1.5rem;
    }

    .logo-text[b-5sueoul3c8] {
        font-size: 2.2rem;
    }

    .login-header h2[b-5sueoul3c8] {
        font-size: 1.5rem;
    }

    .login-subtitle[b-5sueoul3c8] {
        font-size: 0.9rem;
    }
}

/* /Pages/GetKey.razor.rz.scp.css */
.get-key-container[b-52vrfmxz5j] {
    max-width: 1200px;
    margin: 0 auto;
}

.key-card[b-52vrfmxz5j] {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-bottom: 2rem;
}

.subscription-check[b-52vrfmxz5j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.subscription-check i[b-52vrfmxz5j] {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

.subscription-check i.inactive[b-52vrfmxz5j] {
    color: #dc3545;
}

.subscription-check i.active[b-52vrfmxz5j] {
    color: #28a745;
}

.subscription-check h4[b-52vrfmxz5j] {
    margin-bottom: 1rem;
}

.subscription-check p[b-52vrfmxz5j] {
    margin-bottom: 1.5rem;
    color: #666;
}

.get-key-actions[b-52vrfmxz5j] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.location-toggle[b-52vrfmxz5j] {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.toggle-title[b-52vrfmxz5j] {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.toggle-title i[b-52vrfmxz5j] {
    margin-right: 0.5rem;
    color: #ff69b4;
}

.toggle-container[b-52vrfmxz5j] {
    display: flex;
    align-items: center;
    background-color: #e9ecef;
    border-radius: 50px;
    padding: 0.25rem;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.toggle-option[b-52vrfmxz5j] {
    flex: 1;
    text-align: center;
    padding: 0.75rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-option.active[b-52vrfmxz5j] {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #ff69b4;
    font-weight: 600;
}

.server-section[b-52vrfmxz5j] {
    margin-top: 2rem;
}

.server-title[b-52vrfmxz5j] {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.server-title i[b-52vrfmxz5j] {
    margin-right: 0.5rem;
    color: #ff69b4;
}

.server-list[b-52vrfmxz5j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.server-card[b-52vrfmxz5j] {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.server-card:hover[b-52vrfmxz5j] {
    background-color: #f0f0f0;
    transform: translateY(-3px);
}

.server-card.active[b-52vrfmxz5j] {
    border-color: #ff69b4;
    background-color: rgba(255, 105, 180, 0.05);
}

.server-card-header[b-52vrfmxz5j] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.server-flag[b-52vrfmxz5j] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 1rem;
}

.server-info h5[b-52vrfmxz5j] {
    margin-bottom: 0.25rem;
}

.server-info .server-location[b-52vrfmxz5j] {
    color: #666;
    font-size: 0.9rem;
}

.server-stats[b-52vrfmxz5j] {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.server-stat[b-52vrfmxz5j] {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: #666;
}

.server-stat i[b-52vrfmxz5j] {
    margin-right: 0.3rem;
    color: #ff69b4;
}

.key-result[b-52vrfmxz5j] {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.key-result-title[b-52vrfmxz5j] {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.key-result-title i[b-52vrfmxz5j] {
    margin-right: 0.5rem;
    color: #ff69b4;
}

.key-value[b-52vrfmxz5j] {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    position: relative;
}

.key-value input[b-52vrfmxz5j] {
    flex-grow: 1;
    border: none;
    outline: none;
    background: none;
    font-family: monospace;
}

.copy-button[b-52vrfmxz5j] {
    position: absolute;
    right: 0.5rem;
    padding: 0.5rem;
    background: none;
    border: none;
    color: #ff69b4;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-button:hover[b-52vrfmxz5j] {
    color: #ff5ba7;
}

.copy-tooltip[b-52vrfmxz5j] {
    position: absolute;
    right: 2.5rem;
    background-color: #333;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.copy-tooltip.show[b-52vrfmxz5j] {
    opacity: 1;
}

.setup-instructions[b-52vrfmxz5j] {
    margin-top: 1.5rem;
}

.setup-instructions h6[b-52vrfmxz5j] {
    margin-bottom: 1rem;
}

.setup-steps[b-52vrfmxz5j] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.setup-step[b-52vrfmxz5j] {
    display: flex;
    align-items: flex-start;
}

.setup-step-number[b-52vrfmxz5j] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    background-color: #ff69b4;
    color: white;
    border-radius: 50%;
    margin-right: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.setup-step-text[b-52vrfmxz5j] {
    color: #666;
}

@media (max-width: 768px) {
    .get-key-actions[b-52vrfmxz5j] {
        flex-direction: column;
    }

    .server-list[b-52vrfmxz5j] {
        grid-template-columns: 1fr;
    }
}

.server-description[b-52vrfmxz5j] {
    min-height: 50px; /* Фиксированная высота для описания */
    margin-bottom: 1rem;
}

.server-description p[b-52vrfmxz5j] {
    margin: 0;
    color: #666;
}

.server-card[b-52vrfmxz5j] {
    display: flex;
    flex-direction: column;
    min-height: 220px; /* Минимальная высота карточки */
}

.server-stats[b-52vrfmxz5j] {
    margin-top: auto; /* Прижимает блок статистики к низу карточки */
}
/* /Pages/Guides.razor.rz.scp.css */
.guides-container[b-fbczr4rdrh] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Строка поиска */
.guides-search-bar[b-fbczr4rdrh] {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.search-input[b-fbczr4rdrh] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input i[b-fbczr4rdrh] {
    position: absolute;
    left: 1rem;
    color: #ff69b4;
    font-size: 1.2rem;
}

.search-input input[b-fbczr4rdrh] {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 3rem;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    font-size: 1rem;
    transition: all 0.2s;
}

.search-input input:focus[b-fbczr4rdrh] {
    outline: none;
    border-color: #ff69b4;
    box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.2);
}

.search-clear[b-fbczr4rdrh] {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0;
}

.search-clear:hover[b-fbczr4rdrh] {
    color: #666;
}

/* Содержимое руководств */
.guides-content[b-fbczr4rdrh] {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1.5rem;
}

/* Категории */
.guides-categories[b-fbczr4rdrh] {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    height: fit-content;
}

.guides-categories h5[b-fbczr4rdrh] {
    margin-bottom: 1rem;
    color: #333;
}

.category-list[b-fbczr4rdrh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.category[b-fbczr4rdrh] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.category:hover[b-fbczr4rdrh] {
    background-color: rgba(255, 105, 180, 0.05);
}

.category.active[b-fbczr4rdrh] {
    background-color: rgba(255, 105, 180, 0.1);
    color: #ff69b4;
}

.category i[b-fbczr4rdrh] {
    margin-right: 0.75rem;
    font-size: 1.1rem;
}

/* Список руководств */
.guides-list[b-fbczr4rdrh] {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
}

.guides-grid[b-fbczr4rdrh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.guide-card[b-fbczr4rdrh] {
    display: flex;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #f0f0f0;
}

.guide-card:hover[b-fbczr4rdrh] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #ff69b4;
}

.guide-platform[b-fbczr4rdrh] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    margin-right: 1rem;
    color: #ff69b4;
    font-size: 1.75rem;
}

.guide-content[b-fbczr4rdrh] {
    flex-grow: 1;
}

.guide-title[b-fbczr4rdrh] {
    margin-bottom: 0.5rem;
    color: #333;
}

.guide-metadata[b-fbczr4rdrh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.guide-category[b-fbczr4rdrh] {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: #666;
}

.guide-category i[b-fbczr4rdrh] {
    margin-right: 0.5rem;
}

.guide-difficulty[b-fbczr4rdrh] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.guide-difficulty.easy[b-fbczr4rdrh] {
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.guide-difficulty.medium[b-fbczr4rdrh] {
    background-color: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

.guide-difficulty.hard[b-fbczr4rdrh] {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.guide-description[b-fbczr4rdrh] {
    color: #666;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guide-action[b-fbczr4rdrh] {
    display: flex;
    align-items: center;
    color: #ff69b4;
}

/* Нет руководств */
.no-guides[b-fbczr4rdrh] {
    text-align: center;
    padding: 3rem 0;
}

.no-guides i[b-fbczr4rdrh] {
    font-size: 3rem;
    color: #e0e0e0;
    margin-bottom: 1rem;
}

.no-guides p[b-fbczr4rdrh] {
    color: #666;
    margin-bottom: 1rem;
}

/* Модальное окно руководства */
.guide-header-info[b-fbczr4rdrh] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.guide-header-info > div[b-fbczr4rdrh] {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background-color: #f8f9fa;
    border-radius: 50px;
}

.guide-header-info i[b-fbczr4rdrh] {
    margin-right: 0.5rem;
}

.guide-description-full[b-fbczr4rdrh] {
    margin-bottom: 1.5rem;
    color: #666;
}

.guide-prerequisites[b-fbczr4rdrh] {
    margin-bottom: 1.5rem;
}

.guide-prerequisites h6[b-fbczr4rdrh] {
    margin-bottom: 0.75rem;
    color: #333;
}

.guide-prerequisites ul[b-fbczr4rdrh] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guide-prerequisites li[b-fbczr4rdrh] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.guide-prerequisites li i[b-fbczr4rdrh] {
    color: #28a745;
    margin-right: 0.5rem;
    margin-top: 0.25rem;
}

.guide-steps[b-fbczr4rdrh] {
    margin-bottom: 2rem;
}

.guide-steps h6[b-fbczr4rdrh] {
    margin-bottom: 1rem;
    color: #333;
}

.numbered-steps[b-fbczr4rdrh] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.numbered-step[b-fbczr4rdrh] {
    display: flex;
    align-items: flex-start;
}

.step-number[b-fbczr4rdrh] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    background-color: #ff69b4;
    color: white;
    border-radius: 50%;
    margin-right: 1rem;
    font-weight: 600;
    flex-shrink: 0;
}

.step-details[b-fbczr4rdrh] {
    flex-grow: 1;
}

.step-details h6[b-fbczr4rdrh] {
    margin-bottom: 0.5rem;
    color: #333;
}

.step-details p[b-fbczr4rdrh] {
    margin-bottom: 1rem;
    color: #666;
}

.step-image[b-fbczr4rdrh] {
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.step-image img[b-fbczr4rdrh] {
    max-width: 100%;
    height: auto;
}

.step-notes[b-fbczr4rdrh] {
    margin-top: 1rem;
}

.note[b-fbczr4rdrh] {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem;
    background-color: rgba(255, 193, 7, 0.1);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.note i[b-fbczr4rdrh] {
    color: #ffc107;
    margin-right: 0.5rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.guide-troubleshooting[b-fbczr4rdrh] {
    margin-bottom: 1.5rem;
}

.guide-troubleshooting h6[b-fbczr4rdrh] {
    margin-bottom: 1rem;
    color: #333;
}

.guide-related[b-fbczr4rdrh] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.guide-related h6[b-fbczr4rdrh] {
    margin-bottom: 1rem;
    color: #333;
}

.related-guides-list[b-fbczr4rdrh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.related-guide[b-fbczr4rdrh] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: #f8f9fa;
    border-radius: 50px;
    color: #666;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.related-guide:hover[b-fbczr4rdrh] {
    background-color: rgba(255, 105, 180, 0.1);
    color: #ff69b4;
}

.related-guide i[b-fbczr4rdrh] {
    margin-right: 0.5rem;
}

/* Адаптивность */
@media (max-width: 992px) {
    .guides-content[b-fbczr4rdrh] {
        grid-template-columns: 1fr;
    }

    .guides-categories[b-fbczr4rdrh] {
        margin-bottom: 1.5rem;
    }

    .category-list[b-fbczr4rdrh] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .category[b-fbczr4rdrh] {
        width: auto;
    }
}

@media (max-width: 768px) {
    .guide-card[b-fbczr4rdrh] {
        flex-direction: column;
    }

    .guide-platform[b-fbczr4rdrh] {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .guide-header-info[b-fbczr4rdrh] {
        justify-content: center;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* Основные переменные и цвета */
:root[b-58d83g607a] {
    --primary-color: #ff69b4;
    --primary-dark: #e05ea3;
    --primary-light: #ff9fd0;
    --secondary-color: #6a11cb;
    --accent-color: #2575fc;
    --dark-color: #1c1c1c;
    --light-color: #ffffff;
    --light-bg: #f8f9fa;
    --gray-color: #6c757d;
    --gray-light: #e9ecef;
    --success-color: #28a745;
    --font-main: 'Montserrat', sans-serif;
}

/* Общие стили */
h1[b-58d83g607a], h2[b-58d83g607a], h3[b-58d83g607a], h4[b-58d83g607a], h5[b-58d83g607a], h6[b-58d83g607a] {
    font-weight: 700;
}

.section-header[b-58d83g607a] {
    margin-bottom: 3rem;
}

/* Акцент на пробный период в хиро */
.trial-badge-large[b-58d83g607a] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(255,105,180,0.25);
    position: relative;
    isolation: isolate;
}

.trial-badge-large .main[b-58d83g607a] {
    font-size: 1rem;
    letter-spacing: 0.2px;
}

.trial-badge-large .sub[b-58d83g607a] {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.trial-badge-large[b-58d83g607a]::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    background: radial-gradient(60% 60% at 50% 50%, rgba(255,105,180,0.25), rgba(255,105,180,0));
    z-index: -1;
    animation: trialGlow-b-58d83g607a 2.8s ease-in-out infinite alternate;
}

@keyframes trialGlow-b-58d83g607a {
    from { filter: blur(12px); opacity: 0.6; }
    to   { filter: blur(16px); opacity: 0.9; }
}

.hero-trustline[b-58d83g607a] {
    color: rgba(255,255,255,0.85);
}

.text-gradient[b-58d83g607a] {
    background: linear-gradient(90deg, #fff, var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

/* Добавить новые стили для бейджа "Работает в России" */
.trust-label .badge[b-58d83g607a] {
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2);
}

/* Адаптив: уменьшаем бейдж пробного периода на мобильных */
@media (max-width: 576px) {
    .trial-badge-large[b-58d83g607a] {
        padding: 8px 12px;
        gap: 8px;
    }
    .trial-badge-large .main[b-58d83g607a] {
        font-size: 0.95rem;
    }
    .trial-badge-large .sub[b-58d83g607a] {
        font-size: 0.8rem;
        padding: 3px 8px;
    }
}

/* Аватары пользователей - социальное доказательство */
.user-trust[b-58d83g607a] {
    margin-top: 1.5rem;
}

.trust-avatars[b-58d83g607a] {
    display: flex;
}

.avatar[b-58d83g607a] {
    width: 30px;
    height: 30px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
    margin-right: -10px;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.trust-text[b-58d83g607a] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Кнопки */
.btn-primary[b-58d83g607a] {
    background-color: var(--primary-color);
    border: none;
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
    transition: all 0.3s ease;
    color: white;
    position: relative;
    z-index: 1;
}

.btn-primary:hover[b-58d83g607a],
.btn-primary:focus[b-58d83g607a],
.btn-primary:active[b-58d83g607a] {
    background-color: var(--primary-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 105, 180, 0.4);
    color: white;
    border-color: transparent;
}

.pulse-btn[b-58d83g607a] {
    position: relative;
}

.pulse-btn[b-58d83g607a]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0.375rem;
    background: rgba(255, 105, 180, 0.4);
    z-index: -1;
    animation: pulse-b-58d83g607a 2s infinite;
}

.btn-outline-primary[b-58d83g607a] {
    color: var(--primary-color);
    border-color: var(--primary-color);
    transition: all 0.3s ease;
}

.btn-outline-primary:hover[b-58d83g607a], .btn-outline-primary:focus[b-58d83g607a] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
}

.btn-outline-light[b-58d83g607a] {
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: white;
    transition: all 0.3s ease;
}

.btn-outline-light:hover[b-58d83g607a] {
    background-color: white;
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* Пульсирующая кнопка */
@keyframes pulse-b-58d83g607a {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    70% {
        transform: scale(1.05);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Героический раздел */

/* Стили для улучшенной хиро-секции */
.hero-section[b-58d83g607a] {
    background: linear-gradient(135deg, #331a80, #1a123a);
    padding: 5rem 0;
    color: white;
    position: relative;
    overflow: hidden;
}

.hero-content[b-58d83g607a] {
    position: relative;
    z-index: 2;
    padding-right: 1.5rem;
}

.status-badge[b-58d83g607a] {
    display: inline-block;
    background-color: rgba(255, 105, 180, 0.9);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
}

.hero-title[b-58d83g607a] {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    background: linear-gradient(90deg, #fff, var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.hero-description[b-58d83g607a] {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    max-width: 540px;
}

.cta-buttons[b-58d83g607a] {
    margin-bottom: 2rem;
}

/* Контейнер кнопок в хиро (для текущей разметки .cta-button) */
.cta-button[b-58d83g607a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem; /* равномерные отступы между кнопками */
}

.action-btn[b-58d83g607a] {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: none;
    border-radius: 0.5rem;
    background-color: var(--primary-color);
    border: none;
    box-shadow: 0 8px 20px rgba(255, 105, 180, 0.4);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.action-btn[b-58d83g607a]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
    z-index: 0;
}

.action-btn:hover[b-58d83g607a]:before {
    transform: scaleX(1);
    transform-origin: left;
}

.action-btn:hover[b-58d83g607a] {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(255, 105, 180, 0.5);
}

.security-features[b-58d83g607a] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.security-feature[b-58d83g607a] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    transition: all 0.3s ease;
}

.security-feature:hover[b-58d83g607a] {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.security-feature i[b-58d83g607a] {
    margin-right: 0.8rem;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
}

.security-feature span[b-58d83g607a] {
    display: inline-block;
    line-height: 1.2;
    vertical-align: middle;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 992px) {
    .hero-section[b-58d83g607a] {
        padding: 4rem 0;
    }
    
    .hero-title[b-58d83g607a] {
        font-size: 2.5rem;
    }
    
    .hero-content[b-58d83g607a] {
        padding-right: 0;
        margin-bottom: 3rem;
    }
    
    .security-features[b-58d83g607a] {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hero-title[b-58d83g607a] {
        font-size: 2rem;
    }
    
    .hero-description[b-58d83g607a] {
        font-size: 1.1rem;
    }
    
    .security-feature[b-58d83g607a] {
        font-size: 0.9rem;
    }
}

/* Улучшаем подложку - делаем более современный узор вместо простых точек */
.hero-section[b-58d83g607a]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
            radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 20%) 50px 50px,
            radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 20%),
            radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.04) 0%, transparent 30%);
    background-size: 150px 150px, 130px 130px, 200px 200px;
    background-repeat: repeat;
    z-index: 0;
}

.hero-content[b-58d83g607a] {
    position: relative;
    z-index: 2;
}

.hero-image[b-58d83g607a] {
    position: relative;
    z-index: 2;
}

.image-container[b-58d83g607a] {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.floating[b-58d83g607a] {
    animation: float-b-58d83g607a 6s ease-in-out infinite;
}

@keyframes float-b-58d83g607a {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Улучшаем эффект свечения */
.glow-effect[b-58d83g607a] {
    position: absolute;
    width: 70%;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(255, 105, 180, 0.4) 0%, rgba(255, 105, 180, 0) 70%);
    top: 15%;
    left: 15%;
    z-index: -1;
    filter: blur(20px);
    animation: glow-b-58d83g607a 4s ease-in-out infinite alternate;
}

@keyframes glow-b-58d83g607a {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    100% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

.devices-mockup[b-58d83g607a] {
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.device-icon[b-58d83g607a] {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, background-color 0.3s;
}

.device-icon:hover[b-58d83g607a] {
    transform: translateY(-5px);
    background-color: var(--primary-color);
}

.trust-badges .badge[b-58d83g607a] {
    font-weight: 500;
    border-radius: 30px;
    padding: 8px 15px;
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, background-color 0.3s;
}

.trust-badges .badge:hover[b-58d83g607a] {
    transform: translateY(-2px);
    background-color: rgba(255, 255, 255, 0.2);
}

/* Промо-секция */
.promo-section[b-58d83g607a] {
    background: linear-gradient(135deg, #f8f8ff, #f0f0ff);
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
}

/* Добавляем фоновый узор для промо-секции */
.promo-section[b-58d83g607a]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(106, 17, 203, 0.05) 0%, transparent 25%),
    radial-gradient(circle at 70% 60%, rgba(255, 105, 180, 0.05) 0%, transparent 25%);
    background-size: 60px 60px;
    z-index: 0;
}

/* Улучшаем промо-карточку */
.promo-card[b-58d83g607a] {
    background: linear-gradient(135deg, #6a11cb, #8d5cf4); /* Более светлый, приятный градиент */
    border-radius: 15px;
    padding: 2rem;
    color: white;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(106, 17, 203, 0.2);
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Более заметная граница */
}

.promo-content[b-58d83g607a] {
    position: relative;
    z-index: 2;
}

.promo-label[b-58d83g607a] {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 0.85rem;
    display: inline-block;
    margin-bottom: 15px;
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.promo-code[b-58d83g607a] {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 8px 18px;
    border-radius: 30px;
    font-family: monospace;
    font-size: 1.5rem;
    letter-spacing: 2px;
    color: white;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.promo-decoration[b-58d83g607a] {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 6rem; /* Немного увеличиваем размер */
    opacity: 0.08;
    z-index: 1;
    color: white;
}

/* Функции и преимущества */
.features-section[b-58d83g607a] {
    padding: 6rem 0;
    background: linear-gradient(180deg, #f9f9f9, rgba(255, 105, 180, 0.05) 100%);
    position: relative;
}

/* Добавляем фоновый узор для секции фич */
.features-section[b-58d83g607a]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.4;
    background-image:
            radial-gradient(circle at 100% 150%, rgba(255, 105, 180, 0.02) 24%, transparent 25%),
            radial-gradient(circle at 0 150%, rgba(255, 105, 180, 0.02) 24%, transparent 25%),
            radial-gradient(circle at 50% 100%, rgba(255, 105, 180, 0.02) 24%, transparent 25%),
            radial-gradient(circle at 0% 50%, rgba(255, 105, 180, 0.02) 24%, transparent 25%),
            radial-gradient(circle at 100% 50%, rgba(255, 105, 180, 0.02) 24%, transparent 25%);
    background-size: 20px 20px;
    background-repeat: repeat;
    z-index: 0;
}

.section-header .text-primary[b-58d83g607a] {
    color: #ff69b4 !important;
}

.features-section h2[b-58d83g607a] {
    color: #333;
    position: relative;
    z-index: 1;
}

/* Улучшаем карточки функций */
.feature-card[b-58d83g607a] {
    background-color: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    height: 100%;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.feature-card:hover[b-58d83g607a] {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(255, 105, 180, 0.15);
    border-color: rgba(255, 105, 180, 0.2);
}

.feature-card[b-58d83g607a]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.feature-card:hover[b-58d83g607a]:before {
    transform: scaleX(1);
}

.feature-icon[b-58d83g607a] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ff69b4, #e05ea3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 2rem;
    box-shadow: 0 10px 20px rgba(255, 105, 180, 0.2);
    position: relative;
    z-index: 2;
}

.feature-card h4[b-58d83g607a] {
    margin-bottom: 1rem;
    color: #333;
    font-weight: 600;
}

.feature-card p[b-58d83g607a] {
    color: #666;
    margin-bottom: 0;
}

/* Тарифные планы - ОБНОВЛЕНО */
.pricing-section[b-58d83g607a] {
    padding: 4rem 0;
    background-color: #f8f9fa;
    position: relative;
}

/* Добавляем фоновый узор для тарифной секции */
.pricing-section[b-58d83g607a]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
            radial-gradient(circle at 10% 10%, rgba(255, 105, 180, 0.03) 0%, transparent 25%),
            radial-gradient(circle at 90% 90%, rgba(255, 105, 180, 0.03) 0%, transparent 25%);
    background-size: 80px 80px;
    z-index: 0;
}

/* Заголовок секции тарифов */
.pricing-section .section-header[b-58d83g607a] {
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.pricing-section .section-header h6[b-58d83g607a] {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.pricing-section .section-header h2[b-58d83g607a] {
    margin-bottom: 1rem;
    font-size: 2rem;
    color: #333;
}

.pricing-section .section-header p[b-58d83g607a] {
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: #666;
}

/* Карточка тарифа */
.pricing-card[b-58d83g607a] {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    z-index: 1;
}

.pricing-card:hover[b-58d83g607a] {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(255, 105, 180, 0.12);
}

/* Длительность тарифа */
.pricing-duration[b-58d83g607a] {
    position: relative;
    display: inline-block;
    padding: 6px 12px;
    background-color: #f3f4f6;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

/* Заголовок карточки тарифа */
.pricing-header[b-58d83g607a] {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.pricing-header h5[b-58d83g607a] {
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1.25rem;
    color: #333;
}

/* Блок с ценой */
.price[b-58d83g607a] {
    display: flex;
    align-items: baseline;
    margin-bottom: 0.75rem;
}

.currency[b-58d83g607a] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-right: 0.25rem;
    color: #333;
}

.amount[b-58d83g607a] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-color);
}

.period[b-58d83g607a] {
    font-size: 0.9rem;
    color: #6c757d;
    margin-left: 0.5rem;
}

/* Экономия */
.price-saving[b-58d83g607a] {
    display: inline-block;
    padding: 4px 10px;
    background-color: rgba(255, 105, 180, 0.1);
    color: var(--primary-color);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Тело карточки */
.pricing-body[b-58d83g607a] {
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

/* Список особенностей */
.pricing-features[b-58d83g607a] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-features li[b-58d83g607a] {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
}

.pricing-features li i[b-58d83g607a] {
    color: var(--success-color);
    margin-right: 0.75rem;
    font-size: 1.1rem;
}

.pricing-features .disabled-feature[b-58d83g607a] {
    color: #adb5bd;
}

.pricing-features .disabled-feature i[b-58d83g607a] {
    color: #dc3545;
}

/* Подвал карточки */
.pricing-footer[b-58d83g607a] {
    margin-top: auto;
}

/* Популярный тариф */
.pricing-card.popular[b-58d83g607a] {
    border: 2px solid var(--primary-color);
    transform: scale(1.03);
}

.pricing-card.popular:hover[b-58d83g607a] {
    transform: scale(1.03) translateY(-8px);
}

.popular-badge[b-58d83g607a] {
    position: absolute;
    top: 0;
    right: 1.5rem;
    background: var(--primary-color);
    color: white;
    padding: 5px 15px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 10px rgba(255, 105, 180, 0.3);
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 991px) {
    .pricing-section[b-58d83g607a] {
        padding: 3rem 0;
    }

    .pricing-section .section-header[b-58d83g607a] {
        margin-bottom: 2rem;
    }

    .pricing-section .section-header h2[b-58d83g607a] {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }

    .pricing-section .section-header p[b-58d83g607a] {
        margin-bottom: 1.5rem;
        font-size: 0.95rem;
    }

    .pricing-card[b-58d83g607a] {
        margin-bottom: 1.5rem;
    }

    .pricing-card.popular[b-58d83g607a] {
        transform: scale(1);
    }

    .pricing-card.popular:hover[b-58d83g607a] {
        transform: translateY(-8px);
    }
}

@media (max-width: 767px) {
    .pricing-card[b-58d83g607a] {
        padding: 1.5rem;
    }

    .pricing-duration[b-58d83g607a] {
        margin-bottom: 1rem;
    }

    .pricing-header[b-58d83g607a] {
        margin-bottom: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .amount[b-58d83g607a] {
        font-size: 2rem;
    }

    .currency[b-58d83g607a] {
        font-size: 1rem;
    }

    .period[b-58d83g607a] {
        font-size: 0.8rem;
    }

    .price[b-58d83g607a] {
        margin-bottom: 0.5rem;
    }

    .price-saving[b-58d83g607a] {
        margin-top: 0.5rem;
        display: block;
    }

    .pricing-features li[b-58d83g607a] {
        padding: 0.4rem 0;
        font-size: 0.9rem;
    }
}

.quick-connect-btn[b-58d83g607a] {
    white-space: nowrap; /* чтобы текст не переносился и не ломал кнопку */
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: none;
    border-radius: 0.5rem;
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background-color: transparent;
}

.quick-connect-btn:hover[b-58d83g607a] {
    background-color: white;
    color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
    border-color: white;
    text-decoration: none;
}

.quick-connect-btn:focus[b-58d83g607a] {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.quick-connect-btn i[b-58d83g607a] {
    font-size: 1.2rem;
}


/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .cta-button[b-58d83g607a] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .quick-connect-btn[b-58d83g607a] {
        margin-left: 0 !important;
        width: 100%;
        max-width: 280px;
    }

    .action-btn[b-58d83g607a] {
        width: 100%;
        max-width: 280px;
    }
}

@media (max-width: 575px) {
    .pricing-card[b-58d83g607a] {
        padding: 1.25rem;
    }

    .pricing-duration[b-58d83g607a] {
        font-size: 0.8rem;
        padding: 5px 10px;
        margin-bottom: 0.75rem;
    }

    .pricing-header h5[b-58d83g607a] {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    .amount[b-58d83g607a] {
        font-size: 1.75rem;
    }

    .pricing-header[b-58d83g607a] {
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    .price-saving[b-58d83g607a] {
        font-size: 0.75rem;
        padding: 3px 8px;
    }

    .pricing-features li[b-58d83g607a] {
        font-size: 0.85rem;
    }

    .pricing-features li i[b-58d83g607a] {
        font-size: 1rem;
        margin-right: 0.5rem;
    }

    .quick-connect-btn[b-58d83g607a] {
        padding: 0.7rem 1.5rem;
        font-size: 1rem;
    }

    .action-btn[b-58d83g607a] {
        padding: 0.7rem 1.5rem;
        font-size: 1rem;
    }
}

/* Отзывы */
.testimonials-section[b-58d83g607a] {
    padding: 6rem 0;
    background-color: white;
    position: relative;
}

.testimonial-card[b-58d83g607a] {
    background-color: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.testimonial-card:hover[b-58d83g607a] {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(255, 105, 180, 0.15);
    border-color: rgba(255, 105, 180, 0.1);
}

.testimonial-rating[b-58d83g607a] {
    margin-bottom: 1rem;
    color: #ffc107;
    font-size: 1.1rem;
}

.testimonial-text[b-58d83g607a] {
    color: #555;
    font-style: italic;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
}

.testimonial-author[b-58d83g607a] {
    display: flex;
    align-items: center;
}

.testimonial-avatar[b-58d83g607a] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 105, 180, 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 1rem;
}

.testimonial-info h6[b-58d83g607a] {
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: #333;
}

.testimonial-info span[b-58d83g607a] {
    color: #888;
    font-size: 0.9rem;
}

/* Секция CTA */
.cta-section[b-58d83g607a] {
    padding: 6rem 0;
    background: linear-gradient(135deg, #331a80, #1a123a);
    color: white;
    position: relative;
    overflow: hidden;
}

.cta-container[b-58d83g607a] {
    position: relative;
    z-index: 2;
}

.cta-content h2[b-58d83g607a] {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.cta-content p[b-58d83g607a] {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-buttons[b-58d83g607a] {
    margin-bottom: 2rem;
}

.btn-light-outline[b-58d83g607a] {
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-light-outline:hover[b-58d83g607a] {
    background-color: white;
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-light[b-58d83g607a] {
    background-color: white;
    color: var(--primary-color);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-light:hover[b-58d83g607a] {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 105, 180, 0.3);
}

.cta-trust[b-58d83g607a] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.trust-item[b-58d83g607a] {
    display: flex;
    align-items: center;
    margin-right: 2rem;
    margin-bottom: 0.5rem;
}

.trust-item i[b-58d83g607a] {
    margin-right: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
}

.trust-item span[b-58d83g607a] {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.cta-decoration[b-58d83g607a] {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.decoration-element[b-58d83g607a] {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 105, 180, 0.1);
}

.element-1[b-58d83g607a] {
    width: 200px;
    height: 200px;
    top: 20%;
    left: 10%;
}

.element-2[b-58d83g607a] {
    width: 150px;
    height: 150px;
    top: 50%;
    right: 10%;
}

.element-3[b-58d83g607a] {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 30%;
}

.decoration-icon[b-58d83g607a] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.decoration-icon i[b-58d83g607a] {
    font-size: 3rem;
    color: white;
}

/* Футер */
.footer-section[b-58d83g607a] {
    padding: 5rem 0 2rem;
    background-color: #1c1c1c;
    color: #a8a8a8;
    position: relative;
}

.footer-top[b-58d83g607a] {
    margin-bottom: 3rem;
}

.footer-logo[b-58d83g607a] {
    display: inline-block;
    margin-bottom: 1.5rem;
    text-decoration: none;
}

.logo-text[b-58d83g607a] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.highlight[b-58d83g607a] {
    color: var(--primary-color);
}

.footer-description[b-58d83g607a] {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    opacity: 0.8;
}

.social-links[b-58d83g607a] {
    display: flex;
    margin-bottom: 2rem;
}

.social-link[b-58d83g607a] {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    color: white;
    transition: all 0.3s ease;
}

.social-link:hover[b-58d83g607a] {
    background-color: var(--primary-color);
    transform: translateY(-3px);
    color: white;
}

.footer-heading[b-58d83g607a] {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.footer-links[b-58d83g607a] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li[b-58d83g607a] {
    margin-bottom: 0.75rem;
}

.footer-links a[b-58d83g607a] {
    color: #a8a8a8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover[b-58d83g607a] {
    color: var(--primary-color);
}

.subscription-text[b-58d83g607a] {
    margin-bottom: 1rem;
    line-height: 1.6;
    opacity: 0.8;
}

.subscription-form[b-58d83g607a] {
    margin-bottom: 1.5rem;
}

.input-group[b-58d83g607a] {
    display: flex;
}

.form-control[b-58d83g607a] {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px 0 0 8px;
    color: white;
    padding: 0.75rem 1rem;
}

.form-control[b-58d83g607a]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.input-group .btn[b-58d83g607a] {
    border-radius: 0 8px 8px 0;
    padding: 0.75rem 1rem;
}

.payment-methods[b-58d83g607a] {
    margin-top: 1.5rem;
}

.payment-title[b-58d83g607a] {
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.payment-icons[b-58d83g607a] {
    display: flex;
}

.payment-icons i[b-58d83g607a] {
    margin-right: 1rem;
    font-size: 1.5rem;
    color: #a8a8a8;
    transition: color 0.2s ease;
}

.payment-icons i:hover[b-58d83g607a] {
    color: white;
}

.footer-bottom[b-58d83g607a] {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright[b-58d83g607a] {
    margin-bottom: 0;
    opacity: 0.7;
}

.legal-links[b-58d83g607a] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.legal-links li[b-58d83g607a] {
    margin-left: 1.5rem;
}

.legal-links a[b-58d83g607a] {
    color: #a8a8a8;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.legal-links a:hover[b-58d83g607a] {
    color: white;
}

.tariff-option[b-58d83g607a] {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px;
    transition: all 0.2s ease;
}

.tariff-option:hover[b-58d83g607a],
.tariff-option input:checked + label[b-58d83g607a] {
    background-color: #f8f9fa;
    border-color: #0d6efd;
}

.tariff-option label[b-58d83g607a] {
    cursor: pointer;
    margin-bottom: 0;
    padding: 5px;
}

.modal-open[b-58d83g607a] {
    overflow: hidden;
}

/* Медиа-запросы для адаптивности */
@media (max-width: 991px) {
    .hero-section[b-58d83g607a] {
        padding: 4rem 0;
    }

    .features-section[b-58d83g607a],
    .testimonials-section[b-58d83g607a],
    .cta-section[b-58d83g607a] {
        padding: 4rem 0;
    }

    .footer-section[b-58d83g607a] {
        padding: 4rem 0 2rem;
    }

    .cta-content h2[b-58d83g607a] {
        font-size: 2rem;
    }

    .cta-decoration[b-58d83g607a] {
        margin-top: 3rem;
    }

    .hero-content[b-58d83g607a] {
        margin-bottom: 2rem;
    }

    .legal-links[b-58d83g607a] {
        justify-content: flex-start;
        margin-top: 1rem;
    }

    .legal-links li[b-58d83g607a] {
        margin-left: 0;
        margin-right: 1.5rem;
    }
}

@media (max-width: 767px) {
    .hero-section[b-58d83g607a],
    .features-section[b-58d83g607a],
    .testimonials-section[b-58d83g607a],
    .cta-section[b-58d83g607a] {
        padding: 3rem 0;
    }

    .promo-section[b-58d83g607a] {
        padding: 1.5rem 0;
    }

    .promo-card[b-58d83g607a] {
        padding: 1.5rem;
        flex-direction: column;
    }

    .promo-decoration[b-58d83g607a] {
        position: relative;
        transform: none;
        right: auto;
        top: auto;
        margin-top: 1rem;
        font-size: 4rem;
    }

    .feature-card[b-58d83g607a] {
        padding: 1.5rem;
    }

    .feature-icon[b-58d83g607a] {
        width: 70px;
        height: 70px;
        font-size: 1.75rem;
    }

    .testimonial-card[b-58d83g607a] {
        padding: 1.5rem;
    }

    .cta-content h2[b-58d83g607a] {
        font-size: 1.75rem;
    }

    .cta-content p[b-58d83g607a] {
        font-size: 1rem;
    }

    .btn-light-outline[b-58d83g607a], .btn-light[b-58d83g607a] {
        padding: 0.6rem 1.25rem;
        font-size: 0.95rem;
    }

    .footer-logo-wrapper[b-58d83g607a] {
        margin-bottom: 2rem;
    }

    .cta-button[b-58d83g607a] {
        display: flex;  /* Это необходимо для работы justify-content */
        justify-content: center; /* Центрирование кнопки */
    }
}

@media (max-width: 575px) {
    .hero-section[b-58d83g607a] {
        padding: 2rem 0;
    }

    .hero-content h1[b-58d83g607a] {
        font-size: 2rem;
    }

    .hero-content p[b-58d83g607a] {
        font-size: 1rem;
    }

    .cta-buttons .btn[b-58d83g607a] {
        margin-bottom: 1rem;
    }

    .promo-code[b-58d83g607a] {
        font-size: 1.25rem;
    }

    .feature-card h4[b-58d83g607a] {
        font-size: 1.1rem;
    }

    .feature-card p[b-58d83g607a] {
        font-size: 0.9rem;
    }

    .testimonial-text[b-58d83g607a] {
        font-size: 0.9rem;
    }

    .social-link[b-58d83g607a] {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}
/* /Pages/Login.razor.rz.scp.css */
.login-container[b-off3yusx8c] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1rem;
}

/* Карточка входа */
.login-card[b-off3yusx8c] {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 2.5rem;
    width: 100%;
    max-width: 450px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 10;
}

.login-card:hover[b-off3yusx8c] {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

/* Модальное окно */
.modal-overlay[b-off3yusx8c] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 10000;
    display: block;
    pointer-events: all;
}

.modal-dialog[b-off3yusx8c] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    width: 90%;
    max-width: 420px;
    margin: 0;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* Блокировка прокрутки */
body.modal-open[b-off3yusx8c] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    width: 100%;
}

/* Заголовок */
.login-header[b-off3yusx8c] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.logo[b-off3yusx8c] {
    margin-bottom: 1.5rem;
}

.logo-text[b-off3yusx8c] {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary-color, #ff69b4), var(--secondary-color, #6a11cb));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.login-header h2[b-off3yusx8c] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1c1c1c;
    margin-bottom: 0.75rem;
}

.login-subtitle[b-off3yusx8c] {
    color: #6c757d;
    font-size: 1rem;
}

/* Форма входа */
.login-form[b-off3yusx8c] {
    margin-bottom: 2rem;
}

.form-group[b-off3yusx8c] {
    margin-bottom: 1.75rem;
}

.form-group label[b-off3yusx8c] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
}

/* Стилизация инпутов */
.input-group[b-off3yusx8c] {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.input-group:focus-within[b-off3yusx8c] {
    border-color: var(--primary-color, #ff69b4);
    box-shadow: 0 0 0 0.2rem rgba(255, 105, 180, 0.15);
}

.input-icon[b-off3yusx8c] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background-color: #f8f9fa;
    color: #6c757d;
    border-right: 1px solid #ced4da;
}

.password-toggle[b-off3yusx8c] {
    border-right: none;
    border-left: 1px solid #ced4da;
    cursor: pointer;
    background-color: transparent;
}

.password-toggle:hover[b-off3yusx8c] {
    color: var(--primary-color, #ff69b4);
}

.form-control[b-off3yusx8c] {
    border: none;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    flex-grow: 1;
}

.form-control:focus[b-off3yusx8c] {
    box-shadow: none;
    outline: none;
}

.form-check-input:checked[b-off3yusx8c] {
    background-color: var(--primary-color, #ff69b4);
    border-color: var(--primary-color, #ff69b4);
}

/* Стили для кнопки входа */
.btn-login[b-off3yusx8c] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem;
    margin-top: 1.5rem;
    background: linear-gradient(90deg, var(--primary-color, #ff69b4), var(--secondary-color, #6a11cb));
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
}

.btn-login[b-off3yusx8c]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    z-index: 1;
}

.btn-login:hover[b-off3yusx8c] {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
}

.btn-login:hover[b-off3yusx8c]:before {
    transform: translateX(100%);
}

.btn-text[b-off3yusx8c] {
    z-index: 2;
    margin-right: 0.5rem;
}

.btn-login i[b-off3yusx8c] {
    z-index: 2;
    font-size: 1.2rem;
}

/* Раздел для входа через социальные сети */
.login-footer[b-off3yusx8c] {
    margin-top: 2rem;
    text-align: center;
}

.login-footer p[b-off3yusx8c] {
    margin-bottom: 1.5rem;
}

.register-link[b-off3yusx8c] {
    color: var(--primary-color, #ff69b4);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.register-link:hover[b-off3yusx8c] {
    color: var(--secondary-color, #6a11cb);
    text-decoration: underline;
}

.social-login[b-off3yusx8c] {
    margin-top: 1.5rem;
}

.social-login-text[b-off3yusx8c] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: #6c757d;
    margin-bottom: 1.25rem;
}

.social-login-text[b-off3yusx8c]::before,
.social-login-text[b-off3yusx8c]::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: #dee2e6;
    margin: 0 15px;
}

.social-buttons[b-off3yusx8c] {
    display: flex;
    justify-content: center;
}

/* Кнопка Telegram */
.btn-telegram[b-off3yusx8c] {
    background-color: #0088cc;
    color: white;
    padding: 0.75rem 2rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 136, 204, 0.3);
}

.btn-telegram:hover[b-off3yusx8c] {
    background-color: #0077b5;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 136, 204, 0.4);
}

.btn-telegram i[b-off3yusx8c] {
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

/* Адаптивность */
@media (max-width: 576px) {
    .login-card[b-off3yusx8c] {
        padding: 2rem 1.5rem;
    }

    .logo-text[b-off3yusx8c] {
        font-size: 2.2rem;
    }

    .login-header h2[b-off3yusx8c] {
        font-size: 1.5rem;
    }

    .login-subtitle[b-off3yusx8c] {
        font-size: 0.9rem;
    }
}
/* /Pages/NotFoundPage.razor.rz.scp.css */
/* /Pages/Payment.razor.rz.scp.css */
/* Общие стили страницы */
.payment-page[b-89wibsgmls] {
    color: #333;
    background-color: #f8f9fa;
    min-height: 100vh;
}

h3.section-title[b-89wibsgmls] {
    font-weight: 600;
    color: #333;
}

.back-link a[b-89wibsgmls] {
    color: #666;
    font-weight: 500;
    transition: color 0.2s;
}

.back-link a:hover[b-89wibsgmls] {
    color: #ff69b4;
}

/* Стили для карточек */
.card[b-89wibsgmls] {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    height: 100%;
}

.card-header[b-89wibsgmls] {
    background-color: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 1.25rem 1.5rem;
}

.card-header h5[b-89wibsgmls] {
    margin: 0;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
}

.card-header h5 i[b-89wibsgmls] {
    color: #ff69b4;
}

.card-body[b-89wibsgmls] {
    padding: 1.5rem;
}

/* Стили для секции с планами подписки */
.plan-selection h6[b-89wibsgmls] {
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.plans-grid[b-89wibsgmls] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.plan-option[b-89wibsgmls] {
    background-color: white;
    border: 2px solid #f0f0f0;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px;
}

.plan-option:hover[b-89wibsgmls] {
    border-color: #ff9dcd;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(255, 105, 180, 0.1);
}

.plan-option.active[b-89wibsgmls] {
    border-color: #ff69b4;
    background-color: rgba(255, 105, 180, 0.05);
    box-shadow: 0 6px 15px rgba(255, 105, 180, 0.1);
}

.plan-name[b-89wibsgmls] {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.plan-price[b-89wibsgmls] {
    color: #ff69b4;
    font-weight: 700;
    font-size: 1.25rem;
}

.plan-tag[b-89wibsgmls] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #ff69b4, #ff8dc7);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    white-space: nowrap;
}

/* Стили для секции с промокодом */
.promo-section[b-89wibsgmls] {
    margin-top: 2rem;
}

.promo-section h6[b-89wibsgmls] {
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.promo-input[b-89wibsgmls] {
    display: flex;
}

.promo-input input[b-89wibsgmls] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px 0 0 8px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}

.promo-input input:focus[b-89wibsgmls] {
    border-color: #ff69b4;
}

.promo-input button[b-89wibsgmls] {
    background-color: #ff69b4;
    color: white;
    border: none;
    border-radius: 0 8px 8px 0;
    padding: 0 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.promo-input button:hover[b-89wibsgmls] {
    background-color: #ff5aa7;
}

.promo-input button:disabled[b-89wibsgmls] {
    background-color: #f0f0f0;
    color: #999;
    cursor: not-allowed;
}

.promo-message[b-89wibsgmls] {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

.promo-message.error[b-89wibsgmls] {
    color: #842029;
    background-color: #f8d7da;
}

.promo-message.success[b-89wibsgmls] {
    color: #0f5132;
    background-color: #d1e7dd;
}

.promo-applied[b-89wibsgmls] {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.5rem;
}

.promo-header[b-89wibsgmls] {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.promo-header i[b-89wibsgmls] {
    color: #198754;
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

.promo-header span[b-89wibsgmls] {
    flex: 1;
}

.promo-remove[b-89wibsgmls] {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 0.25rem;
    margin-left: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.promo-remove:hover[b-89wibsgmls] {
    background-color: rgba(220, 53, 69, 0.1);
}

.promo-benefits[b-89wibsgmls] {
    padding-left: 1.7rem;
}

.promo-benefit[b-89wibsgmls] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #666;
}

.promo-benefit i[b-89wibsgmls] {
    margin-right: 0.5rem;
    font-size: 0.85rem;
}

/* Стили для сводки заказа */
.summary-card[b-89wibsgmls] {
    background-color: white;
}

.summary-table[b-89wibsgmls] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.summary-row[b-89wibsgmls] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.summary-row.discount[b-89wibsgmls] {
    color: #198754;
    font-weight: 500;
}

.summary-row.total[b-89wibsgmls] {
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
}

.summary-divider[b-89wibsgmls] {
    height: 1px;
    background-color: #e0e0e0;
    margin: 0.5rem 0;
}

.bonus-message[b-89wibsgmls] {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: rgba(13, 110, 253, 0.08);
    border-radius: 8px;
    color: #0d6efd;
    font-size: 0.9rem;
}

.bonus-message i[b-89wibsgmls] {
    margin-right: 0.75rem;
    font-size: 1rem;
}

.checkout-btn[b-89wibsgmls] {
    width: 100%;
    margin-top: 1.5rem;
    background: linear-gradient(90deg, #ff69b4, #ff8dc7);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 1rem;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkout-btn:hover[b-89wibsgmls] {
    background: linear-gradient(90deg, #ff5aa7, #ff7dbd);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
}

.checkout-btn:disabled[b-89wibsgmls] {
    background: #f0f0f0;
    color: #999;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.checkout-btn i[b-89wibsgmls] {
    margin-right: 0.75rem;
}

.security-note[b-89wibsgmls] {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: #777;
    display: flex;
    justify-content: center;
    align-items: center;
}

.security-note i[b-89wibsgmls] {
    margin-right: 0.5rem;
}

/* Стили для состояний загрузки и ошибки */
.loading-container[b-89wibsgmls] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: 2rem auto;
    max-width: 500px;
}

.loading-container .spinner-border[b-89wibsgmls] {
    color: #ff69b4;
    margin-bottom: 1rem;
}

.error-container[b-89wibsgmls] {
    text-align: center;
    padding: 3rem;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: 2rem auto;
    max-width: 500px;
}

.error-icon[b-89wibsgmls] {
    color: #dc3545;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.error-message[b-89wibsgmls] {
    color: #555;
    margin-bottom: 2rem;
}

.btn-back[b-89wibsgmls] {
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-back:hover[b-89wibsgmls] {
    background-color: #5a6268;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 767px) {
    .card-body[b-89wibsgmls] {
        padding: 1.25rem;
    }

    .plans-grid[b-89wibsgmls] {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }

    .plan-option[b-89wibsgmls] {
        min-height: 100px;
        padding: 0.75rem;
    }

    .plan-name[b-89wibsgmls] {
        font-size: 0.9rem;
    }

    .plan-price[b-89wibsgmls] {
        font-size: 1.1rem;
    }
}
/* /Pages/PersonalArea.razor.rz.scp.css */
/* Основные стили страницы */
.personal-area-page[b-6cpbtlw0ue] {
    background-color: #f8f9fa;
    min-height: calc(100vh - 60px);
}

/* Контейнер загрузки */
.loading-spinner-container[b-6cpbtlw0ue] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: #666;
}

.loading-spinner-container span[b-6cpbtlw0ue] {
    margin-top: 1rem;
}

/* Карточка с краткой информацией профиля */
.profile-summary-card[b-6cpbtlw0ue] {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    text-align: center;
    height: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
}

.profile-summary-card:hover[b-6cpbtlw0ue] {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.profile-avatar-container[b-6cpbtlw0ue] {
    margin-bottom: 1.5rem;
}

.profile-avatar[b-6cpbtlw0ue] {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    background-color: rgba(255, 105, 180, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.profile-avatar i[b-6cpbtlw0ue] {
    font-size: 3.5rem;
    color: #ff69b4;
}

.profile-info h4[b-6cpbtlw0ue] {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.status-badge[b-6cpbtlw0ue] {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.75rem;
}

.status-active[b-6cpbtlw0ue] {
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.status-inactive[b-6cpbtlw0ue] {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* Карточка с информацией о подписке */
.subscription-info-card[b-6cpbtlw0ue] {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
}

.subscription-info-card:hover[b-6cpbtlw0ue] {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.subscription-info-card .card-header[b-6cpbtlw0ue] {
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1.25rem 1.5rem;
    border-radius: 12px 12px 0 0;
}

.subscription-info-card .card-header h5[b-6cpbtlw0ue] {
    color: #333;
    font-weight: 600;
    margin: 0;
}

.subscription-info-card .card-header i[b-6cpbtlw0ue] {
    color: #ff69b4;
}

.subscription-info-card .card-body[b-6cpbtlw0ue] {
    padding: 1.5rem;
}

.subscription-plan-badge[b-6cpbtlw0ue] {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 30px;
    background-color: rgba(255, 105, 180, 0.1);
    color: #ff69b4;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.subscription-status-badge[b-6cpbtlw0ue] {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.75rem;
}

.time-indicator[b-6cpbtlw0ue] {
    margin-bottom: 2rem;
}

.progress[b-6cpbtlw0ue] {
    height: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.progress-bar[b-6cpbtlw0ue] {
    height: 100%;
    background: linear-gradient(90deg, #ff69b4, #ff8dc7);
}

.time-details[b-6cpbtlw0ue] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.days-left[b-6cpbtlw0ue] {
    display: flex;
    flex-direction: column;
}

.days-left .number[b-6cpbtlw0ue] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ff69b4;
    line-height: 1;
}

.days-left .label[b-6cpbtlw0ue] {
    font-size: 0.85rem;
    color: #888;
}

.expiry-date[b-6cpbtlw0ue] {
    color: #666;
    font-size: 0.9rem;
}

.subscription-actions[b-6cpbtlw0ue] {
    margin-top: 1rem;
}

.subscription-actions .btn[b-6cpbtlw0ue] {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s;
}

.btn-primary[b-6cpbtlw0ue] {
    background: linear-gradient(90deg, #ff69b4, #ff8dc7);
    border: none;
}

.btn-primary:hover[b-6cpbtlw0ue] {
    background: linear-gradient(90deg, #ff5ba8, #ff7eb9);
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
    transform: translateY(-2px);
}

/* Карточка с деталями аккаунта */
.account-details-card[b-6cpbtlw0ue], .quick-actions-card[b-6cpbtlw0ue] {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
}

.account-details-card:hover[b-6cpbtlw0ue], .quick-actions-card:hover[b-6cpbtlw0ue] {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.account-details-card .card-header[b-6cpbtlw0ue], .quick-actions-card .card-header[b-6cpbtlw0ue] {
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1.25rem 1.5rem;
    border-radius: 12px 12px 0 0;
}

.account-details-card .card-header h5[b-6cpbtlw0ue], .quick-actions-card .card-header h5[b-6cpbtlw0ue] {
    color: #333;
    font-weight: 600;
    margin: 0;
}

.account-details-card .card-header i[b-6cpbtlw0ue], .quick-actions-card .card-header i[b-6cpbtlw0ue] {
    color: #ff69b4;
}

.account-details-card .card-body[b-6cpbtlw0ue], .quick-actions-card .card-body[b-6cpbtlw0ue] {
    padding: 1.5rem;
}

.detail-item[b-6cpbtlw0ue] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.detail-icon[b-6cpbtlw0ue] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: rgba(255, 105, 180, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.detail-icon i[b-6cpbtlw0ue] {
    font-size: 1.2rem;
    color: #ff69b4;
}

.detail-content[b-6cpbtlw0ue] {
    flex-grow: 1;
}

.detail-label[b-6cpbtlw0ue] {
    color: #888;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
}

.detail-value[b-6cpbtlw0ue] {
    color: #333;
    font-weight: 500;
}

.account-details-card .btn[b-6cpbtlw0ue] {
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
}

/* Карточка быстрых действий */
.action-list[b-6cpbtlw0ue] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.action-item[b-6cpbtlw0ue] {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.02);
    transition: all 0.2s;
    color: inherit;
    text-decoration: none;
}

.action-item:hover[b-6cpbtlw0ue] {
    background-color: rgba(255, 105, 180, 0.05);
    transform: translateX(5px);
}

.action-icon[b-6cpbtlw0ue] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: rgba(255, 105, 180, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.action-icon i[b-6cpbtlw0ue] {
    font-size: 1.2rem;
    color: #ff69b4;
}

.action-content[b-6cpbtlw0ue] {
    flex-grow: 1;
}

.action-title[b-6cpbtlw0ue] {
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #333;
}

.action-description[b-6cpbtlw0ue] {
    font-size: 0.85rem;
    color: #888;
}

/* Модальное окно */
.modal-content[b-6cpbtlw0ue] {
    border-radius: 12px;
    border: none;
}

.modal-header[b-6cpbtlw0ue] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1.25rem 1.5rem;
}

.modal-footer[b-6cpbtlw0ue] {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1.25rem 1.5rem;
}

/* Дополнительные стили для Telegram */
.connected-account[b-6cpbtlw0ue] {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #28a745;
}

.not-connected-account[b-6cpbtlw0ue] {
    font-style: italic;
}

/* Стили для уведомлений */
.notification-toast[b-6cpbtlw0ue] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    padding: 1rem;
    border-radius: 12px;
    background-color: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    width: 350px;
    z-index: 9999;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
}

.notification-toast.show[b-6cpbtlw0ue] {
    transform: translateY(0);
    opacity: 1;
}

.notification-toast.success[b-6cpbtlw0ue] {
    border-left: 4px solid #28a745;
}

.notification-toast.error[b-6cpbtlw0ue] {
    border-left: 4px solid #dc3545;
}

.notification-icon[b-6cpbtlw0ue] {
    margin-right: 1rem;
    font-size: 1.5rem;
}

.notification-toast.success .notification-icon[b-6cpbtlw0ue] {
    color: #28a745;
}

.notification-toast.error .notification-icon[b-6cpbtlw0ue] {
    color: #dc3545;
}

.notification-title[b-6cpbtlw0ue] {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: #333;
}

.notification-message[b-6cpbtlw0ue] {
    font-size: 0.9rem;
    color: #666;
}

/* Обновленные стили для кнопок */
.account-actions .btn[b-6cpbtlw0ue] {
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-outline-primary[b-6cpbtlw0ue] {
    color: #0088cc;
    border-color: #0088cc;
}

.btn-outline-primary:hover[b-6cpbtlw0ue] {
    background-color: #0088cc;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 136, 204, 0.2);
}

.btn-outline-danger[b-6cpbtlw0ue] {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-danger:hover[b-6cpbtlw0ue] {
    background-color: #dc3545;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.2);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 767px) {
    .profile-summary-card[b-6cpbtlw0ue],
    .subscription-info-card[b-6cpbtlw0ue],
    .account-details-card[b-6cpbtlw0ue],
    .quick-actions-card[b-6cpbtlw0ue] {
        margin-bottom: 1.5rem;
    }

    .action-item[b-6cpbtlw0ue] {
        padding: 0.75rem;
    }

    .action-icon[b-6cpbtlw0ue] {
        width: 36px;
        height: 36px;
    }

    .action-title[b-6cpbtlw0ue] {
        font-size: 0.95rem;
    }

    .action-description[b-6cpbtlw0ue] {
        font-size: 0.8rem;
    }
}

/* Анимации */
@keyframes fadeIn-b-6cpbtlw0ue {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.personal-area-page .row > div[b-6cpbtlw0ue] {
    animation: fadeIn-b-6cpbtlw0ue 0.5s ease-out forwards;
}

.personal-area-page .row > div:nth-child(1)[b-6cpbtlw0ue] {
    animation-delay: 0.1s;
}

.personal-area-page .row > div:nth-child(2)[b-6cpbtlw0ue] {
    animation-delay: 0.2s;
}

.personal-area-page .row > div:nth-child(3)[b-6cpbtlw0ue] {
    animation-delay: 0.3s;
}

.personal-area-page .row > div:nth-child(4)[b-6cpbtlw0ue] {
    animation-delay: 0.4s;
}
/* /Pages/Privacy.razor.rz.scp.css */
.legal-content h2[b-w29eqngfc2] {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-top: 2rem;
}

.legal-content ul[b-w29eqngfc2] {
    margin-left: 1rem;
}

.legal-content li[b-w29eqngfc2] {
    margin-bottom: 0.5rem;
}
/* /Pages/Referral.razor.rz.scp.css */
.referral-container[b-jez4ghvr1b] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Индикатор загрузки */
.loading-spinner-container[b-jez4ghvr1b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 0;
    color: #666;
}

.loading-spinner-container .spinner-border[b-jez4ghvr1b] {
    color: #ff69b4 !important;
    width: 3rem;
    height: 3rem;
}

.loading-spinner-container span[b-jez4ghvr1b] {
    margin-top: 1rem;
    font-size: 1.05rem;
}

/* Контейнер "нет промокода" */
.no-referral-code[b-jez4ghvr1b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3.5rem 1.5rem;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.no-code-icon[b-jez4ghvr1b] {
    font-size: 3.2rem;
    margin-bottom: 1.8rem;
    color: #ff69b4;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-color: rgba(255, 105, 180, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.15);
}

.no-referral-code:hover .no-code-icon[b-jez4ghvr1b] {
    transform: scale(1.05);
    background-color: rgba(255, 105, 180, 0.15);
}

.no-referral-code h4[b-jez4ghvr1b] {
    margin-bottom: 1.2rem;
    color: #333;
    font-size: 1.5rem;
    font-weight: 600;
}

.no-referral-code p[b-jez4ghvr1b] {
    margin-bottom: 1.8rem;
    color: #666;
    max-width: 600px;
    font-size: 1.05rem;
    line-height: 1.6;
}

.no-referral-code .btn-primary[b-jez4ghvr1b] {
    background-color: #ff69b4;
    border-color: #ff69b4;
    padding: 0.7rem 1.5rem;
    font-size: 1.05rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.25);
}

.no-referral-code .btn-primary:hover[b-jez4ghvr1b] {
    background-color: #ff4daa;
    border-color: #ff4daa;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 105, 180, 0.35);
}

/* Информационные карточки */
.referral-info-cards[b-jez4ghvr1b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.referral-card[b-jez4ghvr1b] {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    padding: 1.8rem;
    display: flex;
    align-items: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.referral-card:hover[b-jez4ghvr1b] {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.referral-card-icon[b-jez4ghvr1b] {
    font-size: 2rem;
    color: #ff69b4;
    margin-right: 1.2rem;
    width: 55px;
    height: 55px;
    background-color: rgba(255, 105, 180, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(255, 105, 180, 0.15);
}

.referral-card-content[b-jez4ghvr1b] {
    flex-grow: 1;
}

.referral-card-title[b-jez4ghvr1b] {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.referral-code[b-jez4ghvr1b] {
    display: flex;
    align-items: center;
    margin-bottom: 1.2rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 0.7rem 1rem;
    border: 1px solid #f0f0f0;
}

.code[b-jez4ghvr1b] {
    font-weight: 600;
    font-family: 'Roboto Mono', monospace;
    font-size: 1.3rem;
    color: #333;
    flex-grow: 1;
    letter-spacing: 0.5px;
}

.copy-btn[b-jez4ghvr1b] {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.4rem;
    transition: all 0.2s;
    border-radius: 50%;
}

.copy-btn:hover[b-jez4ghvr1b] {
    color: #ff69b4;
    background-color: rgba(255, 105, 180, 0.1);
}

.referral-balance[b-jez4ghvr1b], .referral-users-count[b-jez4ghvr1b], .referral-total-earnings[b-jez4ghvr1b] {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.6rem;
}

.referral-card-subtitle[b-jez4ghvr1b] {
    font-size: 0.85rem;
    color: #888;
}

.referral-card-actions[b-jez4ghvr1b] {
    margin-top: 1.2rem;
}

.referral-card-actions .btn[b-jez4ghvr1b] {
    border-radius: 50px;
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.referral-card-actions .btn-outline-danger[b-jez4ghvr1b] {
    color: #ef4444;
    border-color: #ef4444;
}

.referral-card-actions .btn-outline-danger:hover[b-jez4ghvr1b] {
    background-color: #ef4444;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.25);
}

.referral-card-actions .btn-success[b-jez4ghvr1b] {
    background-color: #10b981;
    border-color: #10b981;
}

.referral-card-actions .btn-success:hover[b-jez4ghvr1b] {
    background-color: #059669;
    border-color: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.25);
}

.referral-card-note[b-jez4ghvr1b] {
    font-size: 0.85rem;
    color: #888;
    display: flex;
    align-items: center;
    margin-top: 0.8rem;
}

.referral-card-note i[b-jez4ghvr1b] {
    margin-right: 0.5rem;
    color: #ffc107;
}

/* Раздел поделиться */
.referral-share-section[b-jez4ghvr1b] {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    margin-bottom: 2rem;
}

.referral-share-section h5[b-jez4ghvr1b] {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.referral-share-section p[b-jez4ghvr1b] {
    color: #666;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

.referral-link-container[b-jez4ghvr1b] {
    margin-bottom: 2rem;
}

.referral-link-container .input-group[b-jez4ghvr1b] {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.referral-link-container .input-group-text[b-jez4ghvr1b] {
    background-color: #f3f4f6;
    border-color: #e5e7eb;
    color: #666;
    font-weight: 500;
}

.referral-link-container .form-control[b-jez4ghvr1b] {
    border-color: #e5e7eb;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
}

.referral-link-container .btn-primary[b-jez4ghvr1b] {
    background-color: #ff69b4;
    border-color: #ff69b4;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.referral-link-container .btn-primary:hover[b-jez4ghvr1b] {
    background-color: #ff4daa;
    border-color: #ff4daa;
}

.referral-share-buttons[b-jez4ghvr1b] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.share-btn[b-jez4ghvr1b] {
    flex: 1;
    min-width: 130px;
    border-radius: 50px;
    padding: 0.7rem 1rem;
    transition: all 0.3s ease;
    border-width: 2px;
}

.share-btn:hover[b-jez4ghvr1b] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.share-btn i[b-jez4ghvr1b] {
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

.share-btn[onclick*="telegram"][b-jez4ghvr1b] {
    color: #0088cc;
    border-color: #0088cc;
}

.share-btn[onclick*="telegram"]:hover[b-jez4ghvr1b] {
    background-color: #0088cc;
    color: white;
}

.share-btn[onclick*="whatsapp"][b-jez4ghvr1b] {
    color: #25d366;
    border-color: #25d366;
}

.share-btn[onclick*="whatsapp"]:hover[b-jez4ghvr1b] {
    background-color: #25d366;
    color: white;
}

.share-btn[onclick*="email"][b-jez4ghvr1b] {
    color: #ea4335;
    border-color: #ea4335;
}

.share-btn[onclick*="email"]:hover[b-jez4ghvr1b] {
    background-color: #ea4335;
    color: white;
}

.share-btn[onclick*="vk"][b-jez4ghvr1b] {
    color: #4c75a3;
    border-color: #4c75a3;
}

.share-btn[onclick*="vk"]:hover[b-jez4ghvr1b] {
    background-color: #4c75a3;
    color: white;
}

/* Раздел статистики */
.referral-statistics[b-jez4ghvr1b] {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    padding: 2rem;
}

.referral-statistics h5[b-jez4ghvr1b] {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #333;
}

.statistics-period-selector[b-jez4ghvr1b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 2rem;
}

.statistics-period-selector .btn[b-jez4ghvr1b] {
    border-radius: 50px;
    padding: 0.6rem 1.2rem;
    transition: all 0.3s ease;
    font-weight: 500;
}

.statistics-period-selector .btn-primary[b-jez4ghvr1b] {
    background-color: #ff69b4;
    border-color: #ff69b4;
    box-shadow: 0 4px 8px rgba(255, 105, 180, 0.25);
}

.statistics-period-selector .btn-primary:hover[b-jez4ghvr1b] {
    background-color: #ff4daa;
    border-color: #ff4daa;
    transform: translateY(-2px);
}

.statistics-period-selector .btn-outline-primary[b-jez4ghvr1b] {
    color: #ff69b4;
    border-color: #ff69b4;
}

.statistics-period-selector .btn-outline-primary:hover[b-jez4ghvr1b] {
    background-color: rgba(255, 105, 180, 0.1);
    color: #ff69b4;
    border-color: #ff69b4;
}

.no-statistics[b-jez4ghvr1b], .no-history[b-jez4ghvr1b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 0;
    color: #888;
}

.no-statistics i[b-jez4ghvr1b], .no-history i[b-jez4ghvr1b] {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: #ddd;
}

.no-statistics p[b-jez4ghvr1b], .no-history p[b-jez4ghvr1b] {
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
}

/* График статистики */
.statistics-chart-container[b-jez4ghvr1b] {
    margin-bottom: 2.5rem;
    height: 280px;
    position: relative;
    background-color: #f9fafb;
    border-radius: 12px;
    padding: 1.5rem;
}

.chart-placeholder[b-jez4ghvr1b] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 35px;
}

.chart-bars[b-jez4ghvr1b] {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 100%;
    gap: 8px;
}

.chart-bar[b-jez4ghvr1b] {
    flex: 1;
    background: linear-gradient(to top, rgba(255, 105, 180, 0.7), rgba(255, 105, 180, 0.9));
    border-radius: 6px 6px 0 0;
    min-height: 5px;
    max-width: 45px;
    margin: 0 auto;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(255, 105, 180, 0.2);
}

.chart-bar:hover[b-jez4ghvr1b] {
    transform: scaleY(1.05);
    background: #ff69b4;
    box-shadow: 0 4px 8px rgba(255, 105, 180, 0.35);
}

.bar-amount[b-jez4ghvr1b] {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: #666;
    white-space: nowrap;
    font-weight: 600;
}

.chart-labels[b-jez4ghvr1b] {
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
}

.chart-label[b-jez4ghvr1b] {
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    transform: rotate(-30deg);
    transform-origin: top center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 45px;
    font-weight: 500;
}

/* Таблица истории */
.referral-history[b-jez4ghvr1b] {
    margin-top: 2.5rem;
}

.referral-history h5[b-jez4ghvr1b] {
    margin-bottom: 1.5rem;
}

.referral-history .table[b-jez4ghvr1b] {
    border-radius: 8px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.referral-history .table thead th[b-jez4ghvr1b] {
    background-color: #f3f4f6;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding: 1rem;
    border-bottom: 2px solid #e5e7eb;
}

.referral-history .table tbody td[b-jez4ghvr1b] {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #e5e7eb;
}

.referral-history .table tbody tr:last-child td[b-jez4ghvr1b] {
    border-bottom: none;
}

.earnings[b-jez4ghvr1b] {
    color: #10b981;
    font-weight: 600;
}

/* Модальные окна */
.modal-dialog[b-jez4ghvr1b] {
    max-width: 500px;
}

.modal-content[b-jez4ghvr1b] {
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.modal-header[b-jez4ghvr1b] {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
    padding: 1.2rem 1.5rem;
}

.modal-header .modal-title[b-jez4ghvr1b] {
    font-weight: 600;
    color: #333;
}

.modal-body[b-jez4ghvr1b] {
    padding: 1.5rem;
}

.modal-footer[b-jez4ghvr1b] {
    border-top: 1px solid #e5e7eb;
    padding: 1.2rem 1.5rem;
}

.modal-footer .btn[b-jez4ghvr1b] {
    border-radius: 50px;
    padding: 0.6rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.modal-footer .btn-secondary[b-jez4ghvr1b] {
    background-color: #f3f4f6;
    border-color: #e5e7eb;
    color: #666;
}

.modal-footer .btn-secondary:hover[b-jez4ghvr1b] {
    background-color: #e5e7eb;
    border-color: #d1d5db;
}

.modal-footer .btn-primary[b-jez4ghvr1b] {
    background-color: #ff69b4;
    border-color: #ff69b4;
    box-shadow: 0 4px 8px rgba(255, 105, 180, 0.25);
}

.modal-footer .btn-primary:hover[b-jez4ghvr1b] {
    background-color: #ff4daa;
    border-color: #ff4daa;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 105, 180, 0.35);
}

.modal-footer .btn-danger[b-jez4ghvr1b] {
    background-color: #ef4444;
    border-color: #ef4444;
}

.modal-footer .btn-danger:hover[b-jez4ghvr1b] {
    background-color: #dc2626;
    border-color: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.25);
}

.modal-footer .btn-success[b-jez4ghvr1b] {
    background-color: #10b981;
    border-color: #10b981;
}

.modal-footer .btn-success:hover[b-jez4ghvr1b] {
    background-color: #059669;
    border-color: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.25);
}

/* Адаптивность */
@media (max-width: 768px) {
    .referral-info-cards[b-jez4ghvr1b] {
        grid-template-columns: 1fr;
    }

    .referral-share-buttons[b-jez4ghvr1b] {
        justify-content: center;
    }

    .share-btn[b-jez4ghvr1b] {
        flex-grow: 1;
    }

    .chart-label[b-jez4ghvr1b] {
        font-size: 0.7rem;
    }
}

.ruble-sign[b-jez4ghvr1b] {
    display: inline-block;
    vertical-align: baseline;
    line-height: 1;
}

.referral-balance[b-jez4ghvr1b], .referral-total-earnings[b-jez4ghvr1b] {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

/* Стили для кнопок социальных сетей */
.btn-outline-telegram[b-jez4ghvr1b] {
    color: #0088cc;
    border-color: #0088cc;
}

.btn-outline-telegram:hover[b-jez4ghvr1b] {
    background-color: #0088cc;
    color: white;
    border-color: #0088cc;
}

.btn-outline-whatsapp[b-jez4ghvr1b] {
    color: #25d366;
    border-color: #25d366;
}

.btn-outline-whatsapp:hover[b-jez4ghvr1b] {
    background-color: #25d366;
    color: white;
    border-color: #25d366;
}

.btn-outline-email[b-jez4ghvr1b] {
    color: #ea4335;
    border-color: #ea4335;
}

.btn-outline-email:hover[b-jez4ghvr1b] {
    background-color: #ea4335;
    color: white;
    border-color: #ea4335;
}

.btn-outline-vk[b-jez4ghvr1b] {
    color: #4c75a3;
    border-color: #4c75a3;
}

.btn-outline-vk:hover[b-jez4ghvr1b] {
    background-color: #4c75a3;
    color: white;
    border-color: #4c75a3;
}
/* /Pages/Registration.razor.rz.scp.css */
/* Основные стили для страницы регистрации */
.register-container[b-ny61y4u6tz] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1rem;
}

/* Карточка регистрации */
.register-card[b-ny61y4u6tz] {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 2.5rem;
    width: 100%;
    max-width: 480px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 10;
}

.register-card:hover[b-ny61y4u6tz] {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

/* Заголовок */
.register-header[b-ny61y4u6tz] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.logo[b-ny61y4u6tz] {
    margin-bottom: 1.5rem;
}

.logo-text[b-ny61y4u6tz] {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary-color, #ff69b4), var(--secondary-color, #6a11cb));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.register-header h2[b-ny61y4u6tz] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1c1c1c;
    margin-bottom: 0.75rem;
}

.register-subtitle[b-ny61y4u6tz] {
    color: #6c757d;
    font-size: 1rem;
}

/* Форма регистрации */
.register-form[b-ny61y4u6tz] {
    margin-bottom: 2rem;
}

.form-group[b-ny61y4u6tz] {
    margin-bottom: 1.75rem;
}

.form-group label[b-ny61y4u6tz] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
}

/* Стилизация инпутов */
.input-group[b-ny61y4u6tz] {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.input-group:focus-within[b-ny61y4u6tz] {
    border-color: var(--primary-color, #ff69b4);
    box-shadow: 0 0 0 0.2rem rgba(255, 105, 180, 0.15);
}

.input-icon[b-ny61y4u6tz] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background-color: #f8f9fa;
    color: #6c757d;
    border-right: 1px solid #ced4da;
}

.password-toggle[b-ny61y4u6tz] {
    border-right: none;
    border-left: 1px solid #ced4da;
    cursor: pointer;
    background-color: transparent;
}

.password-toggle:hover[b-ny61y4u6tz] {
    color: var(--primary-color, #ff69b4);
}

.form-control[b-ny61y4u6tz] {
    border: none;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    flex-grow: 1;
}

.form-control:focus[b-ny61y4u6tz] {
    box-shadow: none;
    outline: none;
}

/* Индикатор сложности пароля */
.password-strength[b-ny61y4u6tz] {
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

.strength-label[b-ny61y4u6tz] {
    display: block;
    margin-bottom: 0.25rem;
}

.strength-meter[b-ny61y4u6tz] {
    height: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
}

.strength-progress[b-ny61y4u6tz] {
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* Цвета для индикатора сложности пароля */
.very-weak .strength-label[b-ny61y4u6tz] {
    color: #dc3545;
}

.very-weak .strength-progress[b-ny61y4u6tz] {
    background-color: #dc3545;
    width: 20%;
}

.weak .strength-label[b-ny61y4u6tz] {
    color: #fd7e14;
}

.weak .strength-progress[b-ny61y4u6tz] {
    background-color: #fd7e14;
    width: 40%;
}

.medium .strength-label[b-ny61y4u6tz] {
    color: #ffc107;
}

.medium .strength-progress[b-ny61y4u6tz] {
    background-color: #ffc107;
    width: 60%;
}

.strong .strength-label[b-ny61y4u6tz] {
    color: #20c997;
}

.strong .strength-progress[b-ny61y4u6tz] {
    background-color: #20c997;
    width: 80%;
}

.very-strong .strength-label[b-ny61y4u6tz] {
    color: #28a745;
}

.very-strong .strength-progress[b-ny61y4u6tz] {
    background-color: #28a745;
    width: 100%;
}

/* Стили для требований к паролю */
.password-requirements[b-ny61y4u6tz] {
    margin-top: 0.75rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
}

.requirement[b-ny61y4u6tz] {
    display: flex;
    align-items: center;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.requirement:last-child[b-ny61y4u6tz] {
    margin-bottom: 0;
}

.requirement i[b-ny61y4u6tz] {
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.requirement-met[b-ny61y4u6tz] {
    color: #28a745;
}

.d-none[b-ny61y4u6tz] {
    display: none !important;
}

/* Чекбокс согласия с условиями */
.form-check[b-ny61y4u6tz] {
    padding-left: 1.8rem;
    position: relative;
    margin-top: 1rem;
}

.form-check-input[b-ny61y4u6tz] {
    position: absolute;
    margin-top: 0.25rem;
    margin-left: -1.8rem;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.form-check-input:checked[b-ny61y4u6tz] {
    background-color: var(--primary-color, #ff69b4);
    border-color: var(--primary-color, #ff69b4);
}

.form-check-label[b-ny61y4u6tz] {
    font-size: 0.9rem;
    color: #6c757d;
    cursor: pointer;
}

.terms-link[b-ny61y4u6tz] {
    color: var(--primary-color, #ff69b4);
    text-decoration: none;
    transition: color 0.2s ease;
}

.terms-link:hover[b-ny61y4u6tz] {
    color: var(--secondary-color, #6a11cb);
    text-decoration: underline;
}

/* Кнопка регистрации */
.btn-register[b-ny61y4u6tz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem;
    margin-top: 1.5rem;
    background: linear-gradient(90deg, var(--primary-color, #ff69b4), var(--secondary-color, #6a11cb));
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
}

.btn-register[b-ny61y4u6tz]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    z-index: 1;
}

.btn-register:hover:not(:disabled)[b-ny61y4u6tz] {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
}

.btn-register:hover:not(:disabled)[b-ny61y4u6tz]:before {
    transform: translateX(100%);
}

.btn-register:disabled[b-ny61y4u6tz] {
    background: linear-gradient(90deg, #b3b3b3, #888888);
    cursor: not-allowed;
    box-shadow: none;
}

.btn-text[b-ny61y4u6tz] {
    z-index: 2;
    margin-right: 0.5rem;
}

.btn-register i[b-ny61y4u6tz] {
    z-index: 2;
    font-size: 1.2rem;
}

/* Валидационные сообщения */
.validation-message[b-ny61y4u6tz] {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.alert-danger[b-ny61y4u6tz] {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.2);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

/* Нижняя часть формы */
.register-footer[b-ny61y4u6tz] {
    margin-top: 2rem;
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.register-footer p[b-ny61y4u6tz] {
    margin-bottom: 1.5rem;
}

.login-link[b-ny61y4u6tz] {
    color: var(--primary-color, #ff69b4);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-link:hover[b-ny61y4u6tz] {
    color: var(--secondary-color, #6a11cb);
    text-decoration: underline;
}

/* Раздел для регистрации через соцсети */
.social-register[b-ny61y4u6tz] {
    margin-top: 1.5rem;
}

.social-register-text[b-ny61y4u6tz] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: #6c757d;
    margin-bottom: 1.25rem;
}

.social-register-text[b-ny61y4u6tz]::before,
.social-register-text[b-ny61y4u6tz]::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: #dee2e6;
    margin: 0 15px;
}

.social-buttons[b-ny61y4u6tz] {
    display: flex;
    justify-content: center;
}

/* Кнопка Telegram */
.btn-telegram[b-ny61y4u6tz] {
    background-color: #0088cc;
    color: white;
    padding: 0.75rem 2rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 136, 204, 0.3);
}

.btn-telegram:hover[b-ny61y4u6tz] {
    background-color: #0077b5;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 136, 204, 0.4);
}

.btn-telegram i[b-ny61y4u6tz] {
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

/* Адаптивность */
@media (max-width: 576px) {
    .register-card[b-ny61y4u6tz] {
        padding: 2rem 1.5rem;
    }

    .logo-text[b-ny61y4u6tz] {
        font-size: 2.2rem;
    }

    .register-header h2[b-ny61y4u6tz] {
        font-size: 1.5rem;
    }

    .register-subtitle[b-ny61y4u6tz] {
        font-size: 0.9rem;
    }

    .password-requirements[b-ny61y4u6tz] {
        font-size: 0.8rem;
    }
}
/* /Pages/ResetPassword.razor.rz.scp.css */
/* Используем те же стили что и для Login.razor */
.login-container[b-iqk3im9p95] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1rem;
}

.login-card[b-iqk3im9p95] {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 2.5rem;
    width: 100%;
    max-width: 450px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 10;
}

.login-card:hover[b-iqk3im9p95] {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.login-header[b-iqk3im9p95] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.logo[b-iqk3im9p95] {
    margin-bottom: 1.5rem;
}

.logo-text[b-iqk3im9p95] {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary-color, #ff69b4), var(--secondary-color, #6a11cb));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.login-header h2[b-iqk3im9p95] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1c1c1c;
    margin-bottom: 0.75rem;
}

.login-subtitle[b-iqk3im9p95] {
    color: #6c757d;
    font-size: 1rem;
}

.login-form[b-iqk3im9p95] {
    margin-bottom: 2rem;
}

.form-group[b-iqk3im9p95] {
    margin-bottom: 1.75rem;
}

.form-group label[b-iqk3im9p95] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
}

.input-group[b-iqk3im9p95] {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.input-group:focus-within[b-iqk3im9p95] {
    border-color: var(--primary-color, #ff69b4);
    box-shadow: 0 0 0 0.2rem rgba(255, 105, 180, 0.15);
}

.input-icon[b-iqk3im9p95] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background-color: #f8f9fa;
    color: #6c757d;
    border-right: 1px solid #ced4da;
}

.password-toggle[b-iqk3im9p95] {
    border-right: none;
    border-left: 1px solid #ced4da;
    cursor: pointer;
    background-color: transparent;
}

.password-toggle:hover[b-iqk3im9p95] {
    color: var(--primary-color, #ff69b4);
}

.form-control[b-iqk3im9p95] {
    border: none;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    flex-grow: 1;
}

.form-control:focus[b-iqk3im9p95] {
    box-shadow: none;
    outline: none;
}

.btn-login[b-iqk3im9p95] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem;
    margin-top: 1.5rem;
    background: linear-gradient(90deg, var(--primary-color, #ff69b4), var(--secondary-color, #6a11cb));
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
}

.btn-login[b-iqk3im9p95]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    z-index: 1;
}

.btn-login:hover[b-iqk3im9p95] {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
}

.btn-login:hover[b-iqk3im9p95]:before {
    transform: translateX(100%);
}

.btn-login:disabled[b-iqk3im9p95] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-text[b-iqk3im9p95] {
    z-index: 2;
    margin-right: 0.5rem;
}

.btn-login i[b-iqk3im9p95] {
    z-index: 2;
    font-size: 1.2rem;
}

@media (max-width: 576px) {
    .login-card[b-iqk3im9p95] {
        padding: 2rem 1.5rem;
    }

    .logo-text[b-iqk3im9p95] {
        font-size: 2.2rem;
    }

    .login-header h2[b-iqk3im9p95] {
        font-size: 1.5rem;
    }

    .login-subtitle[b-iqk3im9p95] {
        font-size: 0.9rem;
    }
}

/* /Pages/Subscriptions.razor.rz.scp.css */
/* Основной контейнер страницы */
.subscription-page[b-vu09jy9g6g] {
    background-color: #f8f9fa;
    min-height: calc(100vh - 60px);
}

/* Загрузка */
.loading-spinner-container[b-vu09jy9g6g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: #666;
}

.loading-spinner-container span[b-vu09jy9g6g] {
    margin-top: 1rem;
}

/* Заголовки разделов */
.section-title[b-vu09jy9g6g] {
    position: relative;
    color: #333;
    font-weight: 600;
    margin-bottom: 2rem;
    padding-left: 1rem;
    border-left: 4px solid #ff69b4;
}

/* Текущая карточка подписки */
.current-subscription-card[b-vu09jy9g6g] {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    margin-bottom: 2rem;
}

.current-subscription-card:hover[b-vu09jy9g6g] {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.current-subscription-card .card-header[b-vu09jy9g6g] {
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1.25rem 1.5rem;
}

.current-subscription-card .card-header h5[b-vu09jy9g6g] {
    color: #333;
    font-weight: 600;
    margin: 0;
}

.current-subscription-card .card-header i[b-vu09jy9g6g] {
    color: #ff69b4;
}

.current-subscription-card .card-body[b-vu09jy9g6g] {
    padding: 1.5rem;
}

.current-plan[b-vu09jy9g6g] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.plan-badge[b-vu09jy9g6g] {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 30px;
    background-color: rgba(255, 105, 180, 0.1);
    color: #ff69b4;
    font-weight: 600;
    font-size: 1.1rem;
    width: fit-content;
    margin-left: 0;
    margin-right: auto;
}

.expiry-info[b-vu09jy9g6g] {
    width: 100%;
}

.progress[b-vu09jy9g6g] {
    height: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.progress-bar[b-vu09jy9g6g] {
    height: 100%;
    background: linear-gradient(90deg, #ff69b4, #ff8dc7);
}

.time-details[b-vu09jy9g6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.days-left[b-vu09jy9g6g] {
    display: flex;
    flex-direction: column;
}

.days-left .number[b-vu09jy9g6g] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ff69b4;
    line-height: 1;
}

.days-left .label[b-vu09jy9g6g] {
    font-size: 0.85rem;
    color: #888;
}

.expiry-date[b-vu09jy9g6g] {
    color: #666;
    font-size: 0.9rem;
}

/* Карточки планов подписки - УЛУЧШЕННАЯ ВЕРСИЯ */
.subscription-plans[b-vu09jy9g6g] {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Для очень больших экранов (от 1400px) */
@media (min-width: 1400px) {
    .subscription-plans[b-vu09jy9g6g] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 300px));
        max-width: 1300px;
    }
}

/* Для больших экранов (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .subscription-plans[b-vu09jy9g6g] {
        grid-template-columns: repeat(auto-fit, minmax(270px, 290px));
        max-width: 1150px;
    }
}

/* Для средних экранов (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .subscription-plans[b-vu09jy9g6g] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 300px));
        max-width: 950px;
    }
}

/* Для планшетов (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .subscription-plans[b-vu09jy9g6g] {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        max-width: 700px;
        gap: 1.5rem;
    }
}

/* Для мобильных устройств */
@media (max-width: 767px) {
    .subscription-plans[b-vu09jy9g6g] {
        grid-template-columns: 1fr;
        max-width: 400px;
        gap: 1rem;
    }
}

.subscription-card[b-vu09jy9g6g] {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
    height: 100%;
    /* Минимальная высота для консистентности */
    min-height: 420px;
}

.subscription-card:hover[b-vu09jy9g6g] {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.subscription-header[b-vu09jy9g6g] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 0.5rem;
    min-height: 60px;
}

.subscription-header h4[b-vu09jy9g6g] {
    margin: 0;
    color: #333;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.3;
    flex: 1;
}

.current-badge[b-vu09jy9g6g] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.best-value-badge[b-vu09jy9g6g] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    background-color: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.subscription-price[b-vu09jy9g6g] {
    margin-bottom: 0.5rem;
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.price-value[b-vu09jy9g6g] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ff69b4;
    line-height: 1;
}

.price-period[b-vu09jy9g6g] {
    font-size: 0.9rem;
    color: #666;
}

.subscription-discount[b-vu09jy9g6g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    min-height: 32px;
}

.discount[b-vu09jy9g6g] {
    background-color: rgba(255, 105, 180, 0.1);
    color: #ff69b4;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Горизонтальная линия с уменьшенными отступами */
.subscription-card hr[b-vu09jy9g6g] {
    margin: 1rem 0;
    border: none;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
}

.subscription-features[b-vu09jy9g6g] {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    flex-grow: 1;
}

.subscription-features li[b-vu09jy9g6g] {
    margin-bottom: 0.6rem;
    display: flex;
    align-items: flex-start;
    font-size: 0.9rem;
}

.subscription-features li i[b-vu09jy9g6g] {
    color: #ff69b4;
    margin-right: 0.5rem;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.subscription-action[b-vu09jy9g6g] {
    margin-top: auto;
}

.subscription-action .btn[b-vu09jy9g6g] {
    width: 100%;
    border-radius: 8px;
    padding: 0.65rem;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-primary[b-vu09jy9g6g] {
    background: linear-gradient(90deg, #ff69b4, #ff8dc7);
    border: none;
}

.btn-primary:hover[b-vu09jy9g6g] {
    background: linear-gradient(90deg, #ff5ba8, #ff7eb9);
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
    transform: translateY(-2px);
}

.btn-primary:disabled[b-vu09jy9g6g] {
    background: #adb5bd;
    opacity: 0.7;
}

/* Нет планов */
.no-plans[b-vu09jy9g6g] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.no-data-icon[b-vu09jy9g6g] {
    font-size: 3rem;
    color: #adb5bd;
    margin-bottom: 1rem;
}

/* Преимущества подписки */
.subscription-benefits[b-vu09jy9g6g] {
    margin-top: 3rem;
}

.benefits-grid[b-vu09jy9g6g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.benefit-item[b-vu09jy9g6g] {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.benefit-item:hover[b-vu09jy9g6g] {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.benefit-icon[b-vu09jy9g6g] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: rgba(255, 105, 180, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.benefit-icon i[b-vu09jy9g6g] {
    font-size: 1.5rem;
    color: #ff69b4;
}

.benefit-content[b-vu09jy9g6g] {
    flex-grow: 1;
}

.benefit-content h5[b-vu09jy9g6g] {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.benefit-content p[b-vu09jy9g6g] {
    color: #666;
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* Всплывающее сообщение об успешной активации */
.alert-overlay[b-vu09jy9g6g] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.alert-container[b-vu09jy9g6g] {
    width: 90%;
    max-width: 500px;
}

.alert-success[b-vu09jy9g6g] {
    background-color: #fff;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    animation: slideUp-b-vu09jy9g6g 0.3s ease-out;
}

.alert-icon[b-vu09jy9g6g] {
    font-size: 3rem;
    color: #28a745;
    margin-bottom: 1rem;
}

.alert-content h5[b-vu09jy9g6g] {
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.alert-content p[b-vu09jy9g6g] {
    color: #666;
    margin-bottom: 1.5rem;
}

@keyframes slideUp-b-vu09jy9g6g {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Адаптивность */
@media (max-width: 767px) {
    .current-plan[b-vu09jy9g6g] {
        flex-direction: column;
    }

    .benefit-item[b-vu09jy9g6g] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .benefit-icon[b-vu09jy9g6g] {
        margin-bottom: 1rem;
    }

    .subscription-card[b-vu09jy9g6g] {
        min-height: auto;
        padding: 1rem;
    }

    .subscription-header h4[b-vu09jy9g6g] {
        font-size: 1.1rem;
    }

    .price-value[b-vu09jy9g6g] {
        font-size: 1.5rem;
    }
}
/* /Pages/Support.razor.rz.scp.css */
.support-page .card[b-micq58jagd] {
    border-radius: 0.5rem;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

.support-page .card:hover[b-micq58jagd] {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.support-page .card-header[b-micq58jagd] {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-weight: 500;
}

.support-page .card-header h4[b-micq58jagd] {
    font-weight: 600;
    font-size: 1.2rem;
}

/* Стили для списка обращений */
.support-page .list-group-item[b-micq58jagd] {
    transition: background-color 0.2s;
    border-left: none;
    border-right: none;
}

.support-page .list-group-item:hover[b-micq58jagd] {
    background-color: rgba(0, 123, 255, 0.05);
}

.support-page .list-group-item:first-child[b-micq58jagd] {
    border-top: none;
}

/* Стили для FAQ аккордеона */
.support-page .accordion-button[b-micq58jagd] {
    font-weight: 500;
    box-shadow: none;
    color: #212529;
}

.support-page .accordion-button:not(.collapsed)[b-micq58jagd] {
    background-color: rgba(0, 123, 255, 0.05);
    color: #0d6efd;
}

.support-page .accordion-button:focus[b-micq58jagd] {
    box-shadow: none;
    border-color: rgba(0, 123, 255, 0.25);
}

/* Стилизация форм и кнопок */
.support-page .form-control:focus[b-micq58jagd],
.support-page .form-select:focus[b-micq58jagd] {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-color: #86b7fe;
}

.support-page .form-label[b-micq58jagd] {
    font-weight: 500;
}

.support-page .btn-primary[b-micq58jagd] {
    background-color: #0d6efd;
    border-color: #0d6efd;
    transition: background-color 0.2s;
}

.support-page .btn-primary:hover[b-micq58jagd] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.support-page .btn-outline-primary[b-micq58jagd] {
    color: #0d6efd;
    border-color: #0d6efd;
    transition: all 0.2s;
}

.support-page .btn-outline-primary:hover[b-micq58jagd] {
    background-color: #0d6efd;
    color: white;
}

/* Стилизация модального окна с обращением */
.support-page .modal-content[b-micq58jagd] {
    border-radius: 0.5rem;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
}

.support-page .modal-header[b-micq58jagd] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.support-page .modal-body[b-micq58jagd] {
    padding: 1.5rem;
}

/* Стили для сообщений тикета */
.support-page .ticket-message[b-micq58jagd] {
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

.support-page .support-reply[b-micq58jagd] {
    background-color: rgba(13, 110, 253, 0.05);
    border-left: 4px solid #0d6efd;
}

.support-page .user-reply[b-micq58jagd] {
    background-color: #f8f9fa;
    border-left: 4px solid #6c757d;
}

.support-page .ticket-message .header[b-micq58jagd] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.support-page .ticket-message .sender[b-micq58jagd] {
    font-weight: 500;
}

.support-page .ticket-message .time[b-micq58jagd] {
    color: #6c757d;
}

/* Стилизация статусов обращений */
.support-page .status-badge[b-micq58jagd] {
    padding: 0.35em 0.65em;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.support-page .status-new[b-micq58jagd] {
    background-color: #cfe2ff;
    color: #084298;
}

.support-page .status-in-progress[b-micq58jagd] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.support-page .status-waiting[b-micq58jagd] {
    background-color: #fff3cd;
    color: #664d03;
}

.support-page .status-closed[b-micq58jagd] {
    background-color: #e2e3e5;
    color: #41464b;
}

/* Стилизация контактного блока */
.support-page .contact-icon[b-micq58jagd] {
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

.support-page .contact-block[b-micq58jagd] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.support-page .contact-block i[b-micq58jagd] {
    min-width: 24px;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 767px) {
    .support-page .card-header h4[b-micq58jagd] {
        font-size: 1.1rem;
    }

    .support-page .list-group-item h5[b-micq58jagd] {
        font-size: 1rem;
    }

    .support-page .contact-block[b-micq58jagd] {
        flex-direction: column;
        align-items: flex-start;
    }

    .support-page .contact-block i[b-micq58jagd] {
        margin-bottom: 0.5rem;
    }
}

/* Анимации и эффекты */
.support-page .btn[b-micq58jagd] {
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}

.support-page .btn[b-micq58jagd]:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.8s;
}

.support-page .btn:active[b-micq58jagd]:after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

/* Стилизация кнопок в мессенджерах */
.support-page .messenger-buttons[b-micq58jagd] {
    display: flex;
    gap: 0.5rem;
}

.support-page .messenger-button[b-micq58jagd] {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: 500;
    transition: all 0.2s;
}

.support-page .telegram-button[b-micq58jagd] {
    background-color: #0088cc;
    color: white;
    border: none;
}

.support-page .telegram-button:hover[b-micq58jagd] {
    background-color: #0077b5;
}

.support-page .whatsapp-button[b-micq58jagd] {
    background-color: #25d366;
    color: white;
    border: none;
}

.support-page .whatsapp-button:hover[b-micq58jagd] {
    background-color: #1fb357;
}

.support-page .messenger-button i[b-micq58jagd] {
    margin-right: 0.5rem;
    font-size: 1.2rem;
}

/* Плавные переходы страницы */
.support-page .fade-in[b-micq58jagd] {
    animation: fadeIn-b-micq58jagd 0.5s;
}

@keyframes fadeIn-b-micq58jagd {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Стилизация для выделения нового сообщения */
.support-page .new-message[b-micq58jagd] {
    animation: highlight-b-micq58jagd 1.5s ease-out;
}

@keyframes highlight-b-micq58jagd {
    0% { background-color: rgba(13, 110, 253, 0.1); }
    100% { background-color: transparent; }
}

/* Добавьте эти стили для бейджа статуса */
.support-page .badge[b-micq58jagd] {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

/* Обеспечиваем достаточное пространство между элементами интерфейса */
.support-page .d-flex.justify-content-between[b-micq58jagd] {
    margin-bottom: 2px;
}

/* Исправляем отступы для строк в списке обращений */
.support-page .list-group-item-action[b-micq58jagd] {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Улучшаем расположение для заголовка тикета и статуса */
.support-page .list-group-item .d-flex.w-100[b-micq58jagd] {
    align-items: flex-start;
    margin-bottom: 8px;
}

/* Правильное позиционирование в строке между заголовком и статусом */
.support-page .list-group-item h5.mb-1[b-micq58jagd] {
    margin-top: 0;
    margin-bottom: 0 !important;
    padding-right: 10px;
    flex: 1;
}
/* /Pages/Terms.razor.rz.scp.css */